Understanding cva and tokens

[jimmymorris]

Hello, I was hoping to make sure I'm understanding something or need to make a feature request.

First question

Any reason why textStyles are not abled to be added to a cva?

It seems like I cannot do the following:

const buttonStyle = cva({
  base: {
    color: 'red',
  },
  variants: {
    size: {
      small: {
        textStyle: 'bodySmall'
      },
      medium: {
        textStyle: 'body'
      },
      large: {
        textStyle: 'bodyLarge'
      }
    }
  }
})

Second question:

I have an atomic recipe that I'm wanting to create, I currently have the following:

export const sampleRecipe = cva({
  base: {
    display: 'flex',
    color: '{colors.text.action.default}',
  },
});

I also understand that the following works:

export const sampleRecipe = cva({
  base: {
    display: 'flex',
    color: 'text.action.default',
  },
});

but what it seems is that the following does not work:

export const sampleRecipe = cva({
  base: {
    display: 'flex',
    color: token('colors.text.action.default'),
  },
});

[anubra266]

1. textStyle works in cva https://play.panda-css.com/f6QneUBoVH
2. You're using a runtime function. Panda works by static extraction. You can do this if you want a fallback, otherwise prefer the curly brace:

export const sampleRecipe = cva({
  base: {
    display: 'flex',
    color: 'token(colors.text.action.default)',
    // if you need fallback value
    color: 'token(colors.text.action.default, red)',
  },
});

[jimmymorris]

Thanks so much, of course you were right on the text styles, it was an issue with my textStyles data 🤦

Just to understand as well, the token function is ideally used during runtime only? otherwise curly brace is the preferred method to reference tokens in the theme?

[anubra266]

@jimmymorris The token method imported from styled system is for runtime use only yes.
As for dynamic usage, you can use the string token function which I showed in my example. It's just that you don't really need this over the curly braces; except you want to use a fallback value.