[community-group] colorPalette composite type (#178)

drwpow has just created a new issue for https://github.com/design-tokens/community-group:

== colorPalette composite type ==
I’d like to propose a composite type of [**color** (8.1)](https://tr.designtokens.org/format/#color) that would allow colors related to one another to have a more clear association (and be able to use this association in tooling).

The concept of a palette is present in most design systems (e.g. [Adobe Spectrum](https://spectrum.adobe.com/page/color-system/), [IBM Carbon](https://carbondesignsystem.com/guidelines/color/overview/#contrast-ratios), as well as design system tooling (screenshot):

![Screenshot of supernova.io’s palettes](https://user-images.githubusercontent.com/1369770/199614618-0f99af69-2cd9-4753-a784-f9b4aeff863c.jpg)

I’d like to offer 2 possible ways to represent this:

### Option 1: array

```json
{
  "blue-50": {
    "$type": "color",
    "$value": "#4589ff"
  },
  "blue-palette": {
    "$type": "colorPalette",
    "$value": [
      "#edf5ff",
      "#d0e2ff",
      "#a6c8ff",
      "#78a9ff",
      "{blue-50}",
      "#0f62fe",
      "#0043ce"
    ]
  }
}
```

This allows colors to have not only a direct relationship with one another, but a specific ordering as well. The meaning of the ordering would be up to the author (e.g. light-to-dark vs dark-to-light).

The array format would slot in neatly with what most design systems are doing already that use values like `Blue 10`, `Blue 20`, etc. ([Adobe Spectrum](https://spectrum.adobe.com/page/color-system/), [IBM Carbon](https://carbondesignsystem.com/guidelines/color/overview/#contrast-ratios)). Only this would be a universal way to describe palettes rather than having to infer them based on numbers in the token name.

I really don’t see a downside to this method.

### Option 2: semantic boundaries

```json
{
  "blue-50": {
    "$type": "color",
    "$value": "#4589ff"
  },
  "blue-palette": {
    "$type": "colorPalette",
    "$value": {
      "light": "#edf5ff",
      "mid": "{blue-50}",
      "dark": "#0043ce"
    }
  }
}
```

A more experimental approach: the palette is described in terms of the middtone, and the lightest and darkest colors in the palette. This is essentially an array but with limited values, and with names. Though unlike the array, this couldn’t be used without tooling, and given that so much info like colorspace and easing curve is omitted, the implementations would vary so wildly this may not be worth pursuing. But wanted to toss it out there just as an idea.

---

Thoughts on the proposals?

Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/178 using your GitHub account


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

Received on Wednesday, 2 November 2022 22:54:33 UTC