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

[Alice]

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