17
1 min read
Token-to-code
The Figma file is right. The CSS is last month's file. Two sources of truth means neither one is.
The token model emits code. CSS custom properties for the app. A registry entry for the install. Same names, same values, two formats. You change the model. The outputs regenerate.
Last month's CSS on the left. The UI already moved. One model emits CSS and registry JSON on the right — same names, same hex.
Learn more
:root {
--color-primary: #2563eb;
}UI#7c3aed
CSS#2563eb
Learn more
:root {
--color-primary: #7c3aed;
}{
"cssVars": {
"light": {
"color.primary": "#7c3aed"
}
}
}CSS--color-primary
registrycssVars.light
Portable means the names survive a framework change. --color-primary does not care if you are in CSS modules or a registry.
:root {
--color-primary: #7c3aed;
--color-background: #ffffff;
--color-foreground: #111111;
}:root {
--color-primary: #7c3aed;
--color-background: #ffffff;
--color-foreground: #111111;
}