Theme-ui: Colors in SX prop styles not populating correctly

[joniler]

I've wrapped my application in the theme provider and am using the jsx pragma in my components. Despite this, I am unable to utilize colors within my theme configuration.

Main App:

import { ThemeProvider } from 'theme-ui'
import theme from '../src/theme'
import dynamic from 'next/dynamic'
import Header from '../components/layout/Header'

const Footer = dynamic(() => import('../components/layout/Footer'), { ssr: false })

function ConciseStudio({ Component, pageProps }) {
  return(
    <ThemeProvider theme={theme}>
      <Header/>
      <Component {...pageProps} variant={theme.styles}/>
      <Footer/>
    </ThemeProvider>
  )
}

export default ConciseStudio

My theme colors:

colors: {
    text: '#181818',
    background: '#fff',
    primary: '#181818',
    secondary: '#CC008A',
    tertiary: '#4d4d4d',
    muted: '#f2f2f2'
  },

Example component:

/** @jsx jsx */
import { jsx } from 'theme-ui'

export default function Header() {

  const headerStyles = {
    position: 'fixed',
    top: 0,
    left: 0,
    width: '100%',
    height: '80px',
    background: 'primary'
  }

  return(
    <div sx={headerStyles}>
      <p>stuff</p>
    </div>
  )
}

In my browser, I see this:

Am I doing something incorrectly here, or is this a bug? I'm using the latest version of NextJS.

[hasparus]

Repro on CodeSandbox with theme-ui v0.3.0: https://codesandbox.io/s/theme-ui-colors-bug-b176t?file=/src/App.js.

[atanasster]

backgroundColor: 'primary' works fine.

[hasparus]

backgroundColor: 'primary' works fine.

Oh yeah, that's a thing that could help you, @joniler. Try backgroundColor or bg.

I checked my repro right now, and it works properly.

Obviously, I didn't take a screenshot, but I could swear it didn't work when I posted my last comment :/ colors were missing from the context 😢

[joniler]

You guys are fantastic, thank you for the workaround. I spent like 2 hours thinking I missed something and tried all sorts of stupid shit before reverting and coming here.

That being said, maybe it's worth looking into why this wouldn't work when using the standard 'background' css attribute? It might save some headache for others down the road. There could be a technical reason why it doesn't work though... (maybe something to do with the effort involved in parsing through shorthand properties to change the color part?)

[atanasster]

@joniler - this seems to be by design, here is the official list of sx theme-aware props:

https://theme-ui.com/sx-prop/

[joniler]

@atanasster right you are my friend. Thanks again for the help!

[jxnblk]

@joniler for more context background is a CSS shorthand for multiple properties, not only color, see https://www.w3.org/TR/css-backgrounds-3/#the-background