Open tomas-hartman opened 1 year ago
I'm not really sure what you want to do, but you don't need to import the theme
object from the config to use your theme tokens.
By prefixing them with the scale name, you can pick a token from any of your available theme scales.
import { styled} from '../../../styles/stitches.config'
const Component = styled('span', {
mv: "$space$xs"
})
You can read further in the docs here
@Code-Victor I know about the other way, but I want/need to import tokens from theme
for better type control. The 'string token magic' turned out to be pretty unreliable with refactorings.
Then I think the best this is the best solution.
import { styled, theme } from '../../../styles/stitches.config'
const Component = styled('span', {
mv: theme.space.xs.computedValue, // returns "var(--space-xs)"
})
It generates the serialized CSS var() representing the token(so in this case, var(--space-xs)).
Cool, thanks. It's actually a nice workaround.
Also, if you're working with multiple themes or want the exact value. you can try this
import { styled, config} from '../../../styles/stitches.config'
const Component = styled('span', {
mv: config.space.xs, // returns the exact value
})
Bug report
When trying to use utils in combination with tokens from
theme
I get a ts error.Describe the bug
Due to the lack of information on this topic in docs, along with inability to solve it with neither
PropertyValue
norScaleValue
and missing export of appropriate type, I assume this might be a bug.System information