Rebass: Unknown 'gray2' in multiple components

[selrond]

I've noticed there's invalid color gray2 set on multiple components (Input, Select, Textarea, Slider, Border, Card, Progress, Tabs) background-colors and box shadows set by default. Thus the intended properties don't render.

A sample code from my page:

.iUtigF {
    font-family: inherit;
    line-height: inherit;
    display: inline-block;
    vertical-align: middle;
    border: 0;
    box-shadow: inset 0 0 0 1px gray2;
    border-radius: 25px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-align: center;
    font-weight: 400;
}

[schmannie]

Same issue here. Just noticed it with the Card component. Have you noticed it with any color other than gray2?

EDIT: In the meantime, I just used Styled Components to wrap in the invalidated properties, but of course, that isn't really ideal.

[selrond]

@mannie-faux nope, just gray2 seems to be a problem

[epilande]

@selrond @mannie-faux this is because the components don't have the theme context.

Rebass has a <Provider /> component that will properly configure the theme, just need to use it at the root of your application.

See http://jxnblk.com/rebass/theming.

[schmannie]

I don't really have this "issue" anymore as I'm not really using the same components much at the moment, but I wanted to point out that I already had the Provider with a theme wrapping my app when I posted that comment.

<Rebass.Provider theme={theme}>
    {props.children}
</Rebass.Provider>

with a theme setup like so:

import colors from './colors';

export default {
  colors,
  font: '"Open Sans", -apple-system, BlinkMacSystemFont, sans-serif',
  monospace: 'Inconsolata, "SF Mono", "Roboto Mono", Menlo, monospace',
  radius: 0,
};

The gray2 color is definitely present and accessible as colors.gray[2], but I'm not sure how to works with the gray2 color being referenced in the Rebass component definition itself.

Oh, and my colors variable is just a custom color palette I made using palx.

[epilande]

@mannie-faux Ah palx returns an array of grays, that's why you're able to access it with colors.gray[2], but rebass looks for colors.gray2. The array needs to be flattened onto the colors object.

Rebass also use palx to generate colors then flattens it to a single colors object. https://github.com/jxnblk/rebass/blob/29701cbd394925d9d4b1f69d7d9a0b34cf69df3a/src/theme.js#L38-L59

[schmannie]

Oh duh. I took Rebass using palx too literally, and I figured the answer was something similar to this! Thanks for the help, this should probably fix a lot of styling errors that I probably never even realised were there.

What about you @selrond? Was the lack of Provider the issue?

[selrond]

@mannie-faux @epilande I have properly used theme provider in the root of my app, the problem still persists.

[epilande]

@selrond does the theme prop get propagated down to your styled components? When the theme prop reaches those components you mentioned (Input, Select, Textarea, Slider, etc..), how does the colors object look?

[schmannie]

@selrond Hmm. Well, the problem personally occurred due to me not flattening the Palx-generated palette prior to passing it into the Rebass theme. The error suggests that your own theme is being passed an incorrectly-formatted color object as well or one that is missing. Does the component that actually has that bad CSS actually have the theme/colors as props in React Dev Tools? Could you share your repo, and if not, just some affected code?

[brandonmp]

for me, the cause of confusion was this example:

The theme object has the following shape. Any custom values passed to the Provider component will be merged with the defaults.

// Default values
const theme = {
  breakpoints: [
    32,
    48,
    64,
    80
  ],
  space: [
    0,
    4,
    8,
    16,
    32,
    64,
    128,
  ],
  fontSizes: [
    12,
    14,
    16,
    20,
    24,
    32,
    48,
    64,
    72,
    96
  ],
  weights: [
    400,
    700
  ],
  colors: {
    black: '#000',
    white: '#fff',
    ...palxColors       <--  wat
  },
  radius: 4,
  font: '-apple-system, BlinkMacSystemFont, sans-serif',
  monospace: '"SF Mono", "Roboto Mono", Menlo, monospace'
}

@epilande 's snip was perfect though

[jxnblk]

Closing this since palx has been removed in v2