- From: Daniel Hruška via GitHub <sysbot+gh@w3.org>
- Date: Tue, 07 May 2024 12:50:04 +0000
- To: public-design-tokens-log@w3.org
Just for inspiration - I'm using my own system (for now), and this is how I deal with themes.
Non-themeable tokens
```json
"blue-10": {
"name": "blue-10",
"humanName": "Blue 10",
"css": "--blue-10",
"value": "oklch(0.95 0.02 250)",
"modifier": "10",
"def": "0.95 0.04 250",
"colorSpaces": {
"oklch": "oklch(0.95 0.02 250)",
"hex": "#e5f0fc",
"rgb": "rgb(230 240 250)",
"hsl": "hsl(210 78% 94%)"
}
},
"blue-100": {
"name": "blue-100",
"humanName": "Blue 100",
"css": "--blue-100",
"value": "oklch(0.3 0.07 250)",
"modifier": "100",
"def": "0.3 0.07 250",
"colorSpaces": {
"oklch": "oklch(0.3 0.07 250)",
"hex": "#0d2f4f",
"rgb": "rgb(13 47 79)",
"hsl": "hsl(210 72% 18%)"
}
},
```
Themeable token
```json
"minimal": {
"name": "surface-blue-minimal",
"humanName": "Surface Blue Minimal",
"css": "--surface-blue-minimal",
"theme": {
"light": {
"value": "blue-10",
"css": "--blue-10",
},
"dark": {
"value": "blue-100",
"css": "--blue-100",
}
},
},
```
For CSS I then generate something like this (we are using JS to manipulate themes).
```css
:root {
--blue-10: oklch(0.95 0.02 250);
--blue-20: oklch(0.89 0.06 250);
--blue-30: oklch(0.84 0.09 250);
--blue-40: oklch(0.8 0.11 250);
--blue-50: oklch(0.56 0.18 250);
--blue-60: oklch(0.55 0.2 250);
--blue-70: oklch(0.54 0.19 250);
--blue-80: oklch(0.48 0.14 250);
--blue-90: oklch(0.4 0.11 250);
--blue-100: oklch(0.3 0.07 250);
}
:root,
[data-theme$="light"]:not(:root),
:is(:root[data-theme$="dark"] [data-theme="inverted"]) {
--surface-blue-minimal: var(--blue-10);
}
:root[data-theme$="dark"],
[data-theme$="dark"]:not(:root),
:is(:root[data-theme$="light"] [data-theme="inverted"]) {
--surface-blue-minimal: var(--blue-100);
}
```
--
GitHub Notification of comment by danosek
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/210#issuecomment-2098332724 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 7 May 2024 12:50:05 UTC