[community-group] Contextual token values (#204)

ilikescience has just created a new issue for https://github.com/design-tokens/community-group:

== Contextual token values ==
> **Note**
> This is meant to be a catchall issue for a number of separate conversations around contextual values. See #188, #169, #135, and #2 for previous conversations

Reading back through issues, it seems like we should make three interlinked decisions soon:

1. Should the spec support contextual token values? (aka theming, fluid values, conditional values)
    a. If so, what contexts should be supported?
    b. And what should the context be?

My current thinking:

## Should the spec support contextual values?
Yes. Changing a design based on context is a major use case for tokens, so it would be good to include it in the spec. 

## If so, what contexts should be supported?
Those that are independent of platforms. For example (not exhaustive):
- Platform-independent:
    - Viewport width
    - Accessibility preferences (high contrast, reduced motion)
    - Color theme
- Platform-dependent:
    - version or environment (ie CSS @supports or iOS version)
    - unique units like CSS's lvh, dvb

## And what should the syntax be?
@romainmenke 's initial proposal is a good place to start, though I'd recommend calling them "contextual" values instead of "conditional" values.

```json
{
  "backgroundColor": {
    "$type": "color",
    "$value": "cyan",
    "$contextualValues": [
      {
        "$context": "width",
        "$condition": ">500px",
        "$value": "purple"
      },
      {
        "$context": "colorScheme",
        "$condition": "dark",
        "$value": "yellow"
      }
    ]
  }
}
```

Though an argument could be made for grouping token mappings under contexts like so:

```json
{
  "backgroundColor": {
    "$type": "color",
    "default": {
      "$value": "cyan"
    },
    "context": {
      "wide": {
        "$value": "purple"
      },
      "dark": {
        "$value": "yellow"
      }
    }
  },
  "$contexts": {
    "width": [
      {
        "$condition": ">500px",
        "$contextualValues": {
          "backgroundColor-default": "{backgroundColor-context-wide}"
        }
      }
    ],
    "colorScheme": [
      {
        "$condition": "dark",
        "contextualValues": {
          "backgroundColor-default": "{backgroundColor-context-dark}"
        }
      }
    ]
  }
}
```

I'm using aliases in the second example to demonstrate how contexts could be additive to grouping.

---

Overall, I think that we can define a set of contexts that are supported by all target platforms, then define a specification for how the syntax in the token file should be interpreted in each language.
  

Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/204 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 21 January 2023 23:22:45 UTC