Confused by Chakra Ui semantic tokens top level keys?

Viewed 131

I'm a little confused by the docs on Semantic Tokens. Lets say we define semantic tokens like this:

const theme = extendTheme({
  semanticTokens: {
    colors: {
      text: {
        default: "green.500",
        _dark: "blue.500"
      },
      card: {
        default: "gray.50",
        _dark: "gray.700"
      }
    },
    shadows: {
      card: {
        default: "md",
        _dark: "none"
      }
    },
    radii: {
      card: "lg"
    }
  }
});

In the example, we're using the categories/top level keys colors, shadowsand radii. These seem to be the the top level keys from the defaultTheme object. When using the semanticTokens, we do this:

<Box shadow="card" p={4} rounded="card" bg="card">
        <Text color="text">Semantic Tokens are Awesome!</Text>
 </Box>

Obviously, we did not use colors.text but merely text to use the token and this seeems to work everywhere a color is expected (e. g. bg="text").

I understand how this works for colors, but what happens if I want to use a semantic token for e.g. padding="distance-sm". What category would I use for this? Do I need the categories (colors, shadows...) or can I simply omit them? As is, I don't think the docs are very clear on this.

Doing this does not work:

const theme = extendTheme({
  semanticTokens: {
    distance_sm: 8,
});
<Box p="distance_sm" />
0 Answers
Related