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

Typically, the preferred value in a `clamp` function corresponds to a number, a dimension, or a percentage. By default, it is treated as a number, which is automatically converted to a pixel value.

The W3C specification does not address percentages and refers to additional types that will be documented in the future. Below is my current workaround for using `clamp` and general fluid dimensions:

```json5
{
  "letterspacing": {
    "static": {
      "$type": "dimension",
      "tight": { "$value": { "unit": "px", "value": -0.5 } },
      "normal": { "$value": { "unit": "px", "value": 0 } },
      "wide": { "$value": { "unit": "px", "value": 0.5 } },
      "wider": { "$value": { "unit": "px", "value": 1 } }
    },
    "fluid": {
      "wide": {
        "min": { "$type": "dimension", "$value": "{base.spacing.static.wide}" },
        "preferred": { "$type": "number", "$value": 0.1, "unit": "vw" }, // Use a number with a unit
        "max": { "$type": "dimension", "$value": "{base.spacing.static.wider}" }
      }
    }
  }
}
```

This setup does not work out of the box with Style Dictionary, as the current specification does not support it. However, you can implement it custom transformer:

```typescript
  StyleDictionary.registerTransform({
    name: "size/compose/numberWithUnit",
    type: transformTypes.value,
    transitive: false,
    filter: (token) => token.$type === "number" && typeof token.unit === "string",
    transform: (token) => {
      const { $value, unit, name } = token;
      const validUnits = new Set(["px", "rem", "em", "vw", "vh", "vmin", "vmax", "pt", "dp", "%", "cm", "mm", "in", "pc"]);

      if (validUnits.has(unit)) {
        return `${$value}${unit}`;
      }

      console.error(`Invalid Number Unit: '${name}: ${$value}${unit}' has an invalid unit. Please use one of the following: ${Array.from(validUnits).join(', ')}.`);
      return $value;
    }
  });

StyleDictionary.registerTransformGroup({
    name: "custom/css-extended",
    transforms: [
      ...StyleDictionary.hooks.transformGroups.css,
      "size/compose/numberWithUnit",
    ]
  })
```

Do you need additional custom transformers to support the current W3C specification in Style Dictionary? Check this out: 
https://github.com/amzn/style-dictionary/issues/848#issuecomment-2855874849

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


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

Received on Wednesday, 14 May 2025 12:13:18 UTC