- From: Pavel Laptev via GitHub <sysbot+gh@w3.org>
- Date: Wed, 23 Nov 2022 14:39:12 +0000
- To: public-design-tokens-log@w3.org
@equinusocio I think in terms of `JSON` format all values are constants, because we don't override them as variables.
```js
const color500 = "#FF4455"
const color200 = "#FFC7CC"
let colorAccent
if (darkmode === true) {
colorButton = color200
} else {
colorButton = color500
}
```
Of course, we have aliases but it's different. In CSS variables, it will be converted like this if we have different themes.
```css
:root {
--color-main-500: #FF4455;
--color-main-200: #FFC7CC;
--color-button-lightmode: var(--color-main-500);
--color-button-darkmode: var(--color-main-200);
}
```
In order to achieve overriding in CSS we need to do it manually. Of course there could be a plugin to covert themes into classes, but different companies could use different implementations or methods of working with tokens.
```css
:root {
--color-main-500: #FF4455;
--color-main-200: #FFC7CC;
}
.lighttheme {
--color-button: var(--color-main-500);
}
.darktheme {
--color-button: var(--color-main-200);
}
```
--
GitHub Notification of comment by PavelLaptev
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/187#issuecomment-1325172436 using your GitHub account
--
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Wednesday, 23 November 2022 14:39:14 UTC