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

This dimension token is just what I needed. For [context I have been working](https://github.com/tbrasington/typescale-generator) on utils to generate clamped scales in css and their equivalent px values for a given dartboard size in Figma.

I have been setting a config like this

```json
{
  "config": {
    "range": [-2, -1, 0, 1, 2, 3, 4],
    "sizes": [
      {
        "$name": "BP1",
        "width": 320,
        "fontSize": 16,
        "typeScale": 1.067
      },
      {
        "$name": "BP2",
        "width": 768,
        "fontSize": 16,
        "typeScale": 1.067
      },
      {
        "$name": "BP4",
        "width": 1440,
        "fontSize": 20,
        "typeScale": 1.067
      }
    ]
  },
```

then referencing it as this, which isn't ideal as fontScale isn't an obvious token.

```json
"Heading 1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.heading}",
        "fontWeight": "{font.weight.heading.normal}",
        "letterSpacing": "0px",
        "lineHeight": "{font.lineHeight.heading}",
        "fontSize": null,
        "fontScale": 4
      }
    },
```

But I think with the approaches above something like 

```json
{
   "typography-scale":{
      "$type":"scale",
      "$value":{
         "min":{
            "width":"320px",
            "base":"16px",
            "ratio":1.067
         },
         "max":{
            "width":"1728px",
            "base":"21px",
            "ratio":1.414
         }
      }
   }
}
```


```json
"Heading 1": {
      "$type": "typography",
      "$value": {
        "fontFamily": "{font.family.heading}",
        "fontWeight": "{font.weight.heading.normal}",
        "letterSpacing": "0px",
        "lineHeight": "{font.lineHeight.heading}",
        "fontSize": "{{scales.typography-scale}}",
      }
    },
```

The parser can then work out if it needs to render a px, rem, clamp or array of sizes.

It would also be good to have an array as an option for rendering multiple styles for different artboard sizes in Figma (useful when testing out lots of layout permutations) or if someone wanted to target media queries, or native platforms.

```json
{
   "typography-scale":{
      "$type":"scale",
      "$value":[
         {
            "width":"320px",
            "base":"16px",
            "ratio":1.067
         },
         {
            "width":"1024px",
            "base":"16px",
            "ratio":1.067
         },
         {
            "width":"1728px",
            "base":"21px",
            "ratio":1.414
         }
      ]
   }
}
```





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


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

Received on Thursday, 12 January 2023 21:48:29 UTC