amzn
CSS variables with light-dark()?
Having a light and a dark theme, is it possible to generate variables using the CSS light-dark() syntax?
Ex desired output:
:root {
/* palette tokens */
--kd-color-black: #000;
--kd-color-white: #fff;
/* named tokens */
--kd-color-text: light-dark(var(--kd-color-black), var(--kd-color-white));
--kd-color-background: light-dark(var(--kd-color-white), var(--kd-color-black));
}
If yes, how would we need to structure the tokens JSON files? Using Tokens Studio for Figma, how could we get there?
Might be possible if https://github.com/amzn/style-dictionary/issues/1063 feature gets added, but as of now it's not possible
Just a question: How do you respect the active theme chosen by the user with light-dark()? This function refers to the OS theme or the browser-forced one. How would you handle it in CSS if users want to use a light theme while using a dark OS theme (like outdoor)?
This article explains it in depth: https://css-tricks.com/come-to-the-light-dark-side/
Basically, set a meta color-scheme tag with value of dark, light or light dark (auto/user preference). Then maybe give them a setting to choose between those 3 options.
I ended up writing a custom node script to parse the token JSON into light dark syntax rather than use style dictionary.
Basically, set a meta color-scheme tag with value of dark, light or light dark (auto/user preference). Then maybe give them a setting to choose between those 3 options.
👍🏻
About the issue, I had the same, and we write a custom transform that parses specific key names to return light-dark. In our case we use two SD setup, one for raw tokens (fixed values) and one for themed tokens, all the theme tokens are rendered with light-dark() value
Something like this:
{
"global-background": {
"$type": "color-theme",
"light": "#fff",
"dark": "#000"
}
}
so our transform generates --global-background: light-dark(#fff, #000);
This would be really nice if supported.
You can have multiple themes.. Each with a light and dark color-scheme/color-mode
themes: blue, red, orange.. etc
