Re: [community-group] Legacy color (#137)

I'm using Oklch as a primary space in our design system mainly used in web apps. We also need another spaces for Figma, MS Office etc. We don't use Design Tokes Format Module yet, just plain JS object. This is how it would looked like:

```json
{
    "$name": "amber-30",
    "$humanName": "Amber 30",
    "$css": "--amber-30",
    "$modifier": "30",
    "$bgInteractionMode": "darken",
    "$type": "color",
    "$value": "oklch(0.84 0.1 82)",
    "$colorSpaces": {
        "oklch": "oklch(0.84 0.1 82)",
        "hex": "#ebc57d",
        "rgb": "rgb(240 200 130)",
        "hsl": "hsl(39 74% 71%)"
    }
}
```

What I would improve is that if `$type: color` has multiple values, the name of the key must represents color space. If we could preserve css like syntax, we could have definition of a color in one line.

```json
{
    "$type": "color",
    "$value": {
        "oklch": "oklch(0.84 0.1 82)",
        "hex": "#ebc57d",
        "rgb": "rgb(240 200 130)",
        "hsl": "hsl(39 74% 71%)"
    }
}
```

And even alpha behind slash.

```json
{
    "$type": "color",
    "$value": {
        "oklch": "oklch(0.84 0.1 82 / 0.5)",
        "hex": "#ebc57d80",
        "rgb": "rgb(240 200 130 / 0.5)",
        "hsl": "hsl(39 74% 71% / 0.5)"
    }
}
```

If there is a good use case for splitting into channels, then why not

```json
{
    "$type": "color",
    "$value": {
        "oklch": {
            "channels": [0.84, 0.1, 82],
            "alpha": 0.5
        },
        "hex": "#ebc57d80",
        "rgb": {
            "channels": [240, 200, 130],
           " alpha": 0.5
        },
       "hsl": {
            "channels": [39, 0.74, 0.71],
            "alpha": 0.5
        },
    }
}
```




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


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

Received on Thursday, 30 May 2024 10:07:30 UTC