Re: [community-group] [RFC] Theming (#2)

One of the approaches that I use within CSS is to have a proxy in between the root variables (think a color palette) and the parts of the component to which they are applied (think applying a value to a CSS property).

```css
:root {
    --color-red--500: #e51c23;
    --color-red--600: #dd191d;
}

[theme="brand"] {
    --backgroundColor-buttonCritical--pressed: var(--color-red--500);
}

[theme="wild"] {
    --backgroundColor-buttonCritical--pressed: var(--color-red--600);
}

.my-danger-button:active {
    background-color: var(--backgroundColor-buttonCritical--pressed);
}
```
In this way, the selection of the token to use is done by determining the _intent_ of the color instead of the specific value. When selecting a theme, the new proxy is loaded in, reading from the available palette. If a decision is made to change all values of critical button backgrounds in a particular theme, it's done without finding all the instances.

While this is probably less of an issue within design tools where components are created as reusable symbols and their values are assigned at the design system maintainer level. I can expect newer components not yet included in the system to require some guidance in determining what color (or any token for that matter) to use instead of just picking any red so that it aligns with a provided system or theme.


-- 
GitHub Notification of comment by ddamato
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/2#issuecomment-527502746 using your GitHub account

Received on Tuesday, 3 September 2019 15:10:53 UTC