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

Hi all :wave:! I also favor @applinist's state matrix approach—it should be able to accommodate a huge range of possible user preferences.

It's worth pointing out that [CSS Media Queries](https://drafts.csswg.org/mediaqueries-5) has done a lot of work thinking about [color scheme](https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme) and [color contrast](https://drafts.csswg.org/mediaqueries-5/#prefers-contrast) preference that should be of interest here. They also have [an open issue about gradients of high contrast](https://github.com/w3c/csswg-drafts/issues/2943) that might make us want to reconsider whether just the two contrast tokens (high/low) are enough (assuming the "variation" values are meant to be normative).

It would be awesome if setting a design token state matrix could apply relevant media queries at a level that's easy to override (the user agent, for instance) rather than asking authors do all the work themselves. Writing/generating the CSS required to implement this would be quite a burden. For example, here's one way to do this right now for just the `light (scheme) + high (contrast)` & `dark + high` color combinations:

```css
:root {
    --color_scheme-light-contrast-high: #foo;
    --color_scheme-dark-contrast-high: #bar;
}

@media screen and (prefers-color-scheme: light) and (prefers-contrast: high) {
    .foo {
        color: var(--color_scheme-light-contrast-high);
    }
}
  
@media screen and (prefers-color-scheme: dark) and (prefers-contrast: high) {
    .foo {
        color: var(--color_scheme-dark-contrast-high);
    }
}
```

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

Received on Thursday, 26 September 2019 16:40:21 UTC