Adding an '_active' Attribute to Button Recipes

[yoon-jisung]

"I'm getting this error, but I'm not sure what I'm doing wrong. Can you help me?"

const buttonRecipe = cva({
  base: {
    border: '0',
    cursor: 'pointer',
    display: 'inline-block',
    lineHeight: '1',
    fontStyle: 'normal',
    fontWeight: '400',
  },
  variants: {
    colorType: {
      none: {
        color: 'token(colors.coldBlack900)',
        backgroundColor: 'token(colors.coldBlackG100)',
      },
      whiteRound: {
        border: '1px solid token(grayscale.coldBlack300)',
        background: '#ffffff',
      },
      primary: {
        color: 'white',
        backgroundColor: {
          base: 'token(colors.coldBlue300)',
          _hover: 'token(colors.coldBlue400)',
          _active: 'coldBlue500',
        },
      },

[astahmer]

it looks like an escaping issue happening because of the ., which leads to invalid CSS syntax
this might happen if some tokens are not found (and therefore won't be replaced at build-time to their CSS variable equivalent)

can you try without using token( when not necessary (e.g composite values like border), ex:

const buttonRecipe = cva({
  base: {
    border: '0',
    cursor: 'pointer',
    display: 'inline-block',
    lineHeight: '1',
    fontStyle: 'normal',
    fontWeight: '400',
  },
  variants: {
    colorType: {
      none: {
        color: 'coldBlack900',
        backgroundColor: 'coldBlackG100',
      },
      whiteRound: {
        border: '1px solid token(grayscale.coldBlack300)',
        background: '#ffffff',
      },
      primary: {
        color: 'white',
        backgroundColor: {
          base: 'coldBlue300',
          _hover: 'coldBlue400',
          _active: 'coldBlue500',
        },
      },