Unknown 'gray2' in multiple components

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;
}

[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

[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.