[community-group] How to deal with "fluid" dimensions (#188)

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

== How to deal with "fluid" dimensions ==
While working on responsiveness and the [fluid typography](https://www.smashingmagazine.com/2022/01/modern-fluid-typography-css-clamp/#accessibility-concerns) topic we found ourselves wondering whether we should put `clamp(0.64rem, 0.69rem + -0.27vw, 0.5rem)` in a design token. (We would use this for font sizes, but these can be used for spacing as well.)

According to the current spec, the dimension type is a string ending with either `px` or `rem`.

How should we handle this? Has this already been discussed somewhere else?

Many questions arise:
- do we need a new token type? (e.g. "fluid dimension")
- how would design tools handle such values?
- should we provide a non-fluid value as a fallback?
- what about viewport units? and calculations mixing units (e.g. `0.69rem + -0.27vw`)?

I would imagine something like this:

```json5
{
  "fluid-dimension-token": {
    "$type": "clamp", // or fluid-dimension?
    "$value": {
      "min": "32px",
      "max": "48px",
      "preferred": "4vw",
      "fallback": "40px"
    }
  }
}
```

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


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

Received on Friday, 25 November 2022 11:20:52 UTC