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

It's worth asking: should this be the job of the token parser (and by extension the concern of the token format), or should it be the responsibility of the platform rendering the UI? 

Put another way: what if we had tokens like:

```json
{
    "type-size-large-fluid-min": {
        $type: "dimension",
        $value: "32px",
    },
    "type-size-large-fluid-max": {
        $type: "dimension",
        $value: "48px",
    },
    "type-size-large-fluid-preferred": {
        $type: "dimension",
        $value: "4vw",
    },
    "type-size-large-fixed": {
        $type: "dimension",
        $value: "40px",
    },
}
```

I could then write the css (assuming my tokens were compiled into custom variables):

```css
h1 {
    font-size: var(--type-size-large-fixed);
    font-size: clamp(
        var(--type-size-large-fluid-min),
        var(--type-size-large-fluid-preferred),
        var(--type-size-large-fluid-max)
    );
}
```

This saves us from having to write logic into our token parser to understand and decide what the equivalent of `clamp()` is in each target context.

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


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

Received on Wednesday, 30 November 2022 19:40:00 UTC