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" />