Re: [community-group] Color first draft (updated) (#266)

I'm late to the game, but let us consider that parsing color values in the generation of the design-token.json may not be the proper responsibility for design-token JSON files. Simply put, the spec does not need to declare a key/value for colorspace, components, or alpha to be of use.

Because the CSS Color() spec is well defined and requires a few simple regex to properly lift the values and the color space/model, I suggest the transformer (Style Dictionary) is responsible for parsing any valid CSS Color() string given within the $value key. So long as the color is valid, it can be parsed into any other space/profile as desired for the target platform with no visual difference (except out-of-gamut, of course). 

Still, a fallback color space/model could be valuable where we do not want (or trust) the transformer to convert into another color space (reasons). If so, consider reuse of the CSS pattern for font-family, where we comma delim the values `font-family: "Times New Roman", Times, serif;`. 

A proposed example...

```
{
    "Midtone gray": {
      "$type": "color",
      "$value": "#6a6a6a"
    },
    "Magestic magenta": {
      "$type": "color",
      "$value": "hsl(329, 52%, 52%)"
    },
    "Simple sage": {
      "$type": "color",
      "$value": "hsl(104, 39%, 74%, 0.75), #B1D7A3"
    },
    "Barbie pink": {
      "$type": "color",
      "$value": "oklab(53.76% 0.2324 -0.02)"
    },
    "Overlay gray": {
      "$type": "color",
      "$value": "oklch(44.95% 0 0 / 33.33%), #55555555"
    },
}
```

The advantage is leveraging known patterns/standards established by CSS, maintaining separation of responsibility by allowing transformers to do what they are built to do, and simplifying the output in JSON. 

I'd further propose the choice of output space/model be embedded in Style Dictionary according to design/business decisions per platform and/or brand. All colors could be transformed to hex for pure CSS output, but SCSS may respect the first definition in comma delim array, (hex, hsl, oklab, oklch). For iOS, everything could be transformed to P3 or kept in Hex, or even a mix if possible.


-- 
GitHub Notification of comment by caoimghgin
Please view or discuss this issue at https://github.com/design-tokens/community-group/pull/266#issuecomment-2761667485 using your GitHub account


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

Received on Friday, 28 March 2025 15:17:02 UTC