Closed aliceathens closed 7 months ago
I have some custom variants defined:
export const inputVariants = { inputVariants: { default: { ...text.bodyS, display: 'flex', alignItems: 'center', position: 'relative', width: '100%', borderWidth: 1, borderColor: colors.borderNeutralC200, backgroundColor: colors.backgroundNeutralC000, color: colors.contentNeutralC950 }, focused: { borderColor: colors.borderBrandC500 }, invalid: { borderColor: colors.borderDangerC700 } }, } }
And I am importing them in the theme like so:
const theme = createTheme({ spacing, colors, borderRadii: radius, breakpoints: {}, textVariants: text, fontSize, ...buttonVariants, ...inputVariants })
However it doesn't like it when I try to use colors.borderBrandC500 for example.
colors.borderBrandC500
Here is a sample of the colors.ts
export const colors: Record<MappedColorNames, string> = { backgroundBrandC050: '#FFFFFF', backgroundBrandC100: '#000000', backgroundBrandC200: '#FFFFFF', backgroundBrandC400: '#FFFFFF', backgroundBrandC500: '#FFFFFF' }
I get error: ERROR Error: Value '#FFFFFF' does not exist in theme['colors']
ERROR Error: Value '#FFFFFF' does not exist in theme['colors']
To be able to use colors.backgroundBrandC400
colors.backgroundBrandC400
2.4.2
Current behavior
I have some custom variants defined:
And I am importing them in the theme like so:
However it doesn't like it when I try to use
colors.borderBrandC500
for example.Here is a sample of the colors.ts
I get error:
ERROR Error: Value '#FFFFFF' does not exist in theme['colors']
Expected behavior
To be able to use
colors.backgroundBrandC400
To Reproduce
Platform:
Environment
2.4.2