[community-group] Conditional token values (#169)

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