Error: Value '#0F0E0F' does not exist in theme['colors']

[aliceathens]

Current behavior

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.

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']

Expected behavior

To be able to use colors.backgroundBrandC400

To Reproduce

Platform:

• [x ] iOS
• Android

Environment

2.4.2

[Christopher2K]

Hey @aliceathens, did you ever found a solution to this?

[nicktiberi]

The issue is that you are passing the value of colors.backgroundBrandC500 to the theme (which is "#FFFFFF", and not defined in theme.colors), but what you really want to pass is the string "backgroundBrandC500", which IS defined in theme.colors.

I was able to solve this for my use case by using an enum and a derived type:

const palette = {
  black: '#000000',
};

enum Color {
  textPrimary = 'textPrimary'
}

type ColorType = `${Color}`;

const colors: Record<ColorType, string> = {
  textPrimary: palette.black
};

const theme = createTheme({
  colors,
  textVariants: {
    defaults: {
      color: Color.textPrimary // could also pass the raw string "textPrimary" here but I wanted to avoid this
    }
  }
});