Re: [community-group] Pre-defined composite type for refering color modifications (e.g. rgba) (#88)

> **Note**
>
> Not sure if it's appropriate to raise here but since I first found the concept here I'll leave a comment. Folks can let me know if this is significant enough for it to be a separate issue.

There's been a few asks for the ability to refer to a token and transform it before finally resolving the value to downstream platforms. As an example, taking a primary color and adjusting the saturation for the hover color. I happened upon this very issue and saw the idea of an `$operations` key and I was fixated on it all weekend. After some thinking [I've took a stab at it](https://blog.damato.design/posts/token-operations/) with some of my own requirements:

### Operations should have a limited, low-level set of agreeable implementations

An `alpha` implementation can differ between vendors and I don't think we're prepared to define all of the possible operations here in this specification. It would mean vendors would take time to implement each as needed, and compatibility could become out of sync as some vendors are faster to implement than others.

It would be more manageable to agree on low-level primitives, most of which already exist on `String` and `Math` which can be composed into high-level reusable operations.

### Operations should be highly customizable

Color isn't the only kind of token that people are looking to transform. Creating a typography scale could be done using this method by supplying a base and scale. Other tokens could be computed if given the ability to do so.

### Collections of operations should be reusable

With a low-level sort of language, we'll need to provide abstractions that can be reused with a reference to those operations. Importing these operations can spread the steps in place.

---

The following example is very verbose but the blog post above has a recommendation for a reusable abstraction.

```json
{
  "primary-color-overlay": {
    "$type": "color",
    "$value": "#fffc00",
    "$operations": [
      0.5,
      ["String.match", "$value", "#([0-9A-Fa-f]{2})"],
      ["String.match", "$value", "#(?:[0-9A-Fa-f]{2})([0-9A-Fa-f]{2})"],
      ["String.match", "$value", "#(?:[0-9A-Fa-f]{4})([0-9A-Fa-f]{2})"],
      ["Math.parseInt", "$1", 16],
      ["Math.parseInt", "$2", 16],
      ["Math.parseInt", "$3", 16],
      ["String.concat", ",", "$4", "$5", "$6", "$0"],
      ["String.concat", "", "rgba(", "$7", ")"]
    ]
  }
}
```

[See minimal prototype in action.](https://replit.com/@fauxserious/TokenOperations)

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


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

Received on Wednesday, 31 May 2023 21:00:54 UTC