- From: Romain Menke via GitHub <sysbot+gh@w3.org>
- Date: Tue, 13 Sep 2022 07:09:31 +0000
- To: public-design-tokens-log@w3.org
romainmenke has just created a new issue for https://github.com/design-tokens/community-group: == Conditional token values == see : https://github.com/design-tokens/community-group/issues/2 This issue was focussed on "theming" and already contains some great thoughts on that but I don't think that themes are the right abstraction. I also do not want to derail that thread. -------- The basic premise is fairly simple and shared with the concept of themes : **Change token values when X changes, where X is something external to the tokens file** Examples of factors that could affect token values : - screen size - ability to display certain colors on a screen (srgb, display-p3) - user preferences for color schemes (dark, light) - applying different branding (brand X, brand Y) - platform type (Android, iOS, Web) - media type (screen, print) - support for features The most mature system/API that exists for this is most likely Conditional At Rules in CSS (`@supports` and `@media` specifically) In CSS Conditional At Rules "wrap" around style declarations. ```css .foo { color: cyan; } @media (min-width: 300px) { .foo { color: purple; } } @media screen and (prefers-color-scheme: dark) { .foo { color: yellow; } } ``` For Design Tokens I think the inverse makes the most sense. A token describes a base value and a list of conditional values. ```json { "$value": "cyan", "$conditionalValues": [ { "conditions": [{ "name": "screen-min-width", "value": "300px" }], "value": "purple" }, { "conditions": [ { "name": "media-type", "value": "screen" }, { "name": "color-scheme", "value": "dark" } ], "value": "yellow" } ] } ``` The exact data shape for `"conditions"` is likely non-ideal for all possible cases. But I think it illustrates the point. Condition names would need to be a specced list. Condition values per name would also need to be specced. -------- Design tools would provide UI to assign conditional values on tokens and would also use them. - Artboards might match certain conditions based on config (artboard size, color scheme, ...) - Certain actions might trigger certain conditions (printing a document) - .... -------- Translation tools could generate the code for the conditionals so that developers can use a single token name while still having a dynamic outcome. -------- Specialised tools could provide validation. You might want to "lint" a tokens file and check that all colors have a dark and light variant. Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/169 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Tuesday, 13 September 2022 07:09:34 UTC