[community-group] [Discussion]: How to transform composite tokens (#226)

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

== [Discussion]: How to transform composite tokens ==
## Description

The latest editor's draft (as of August 2023) [states](https://second-editors-draft.tr.designtokens.org/format/#composite-design-token) that composite design token is "a design token whose value is made up of multiple, named child values."

Given the following [example](https://design-tokens.github.io/community-group/format/#example-composite-token-example) in the editor's draft, is there currently a recommendation on how to transform the token?
```json
{
  "shadow-token": {
    "$type": "shadow",
    "$value": {
      "color": "#00000088",
      "offsetX": "0.5rem",
      "offsetY": "0.5rem",
      "blur": "1.5rem",
      "spread": "0rem"
    }
  }
}
```

It seems like there are two options here:
1. Each `value` property name is appended to the top-level token name to create a new token, and all of those tokens must be applied
2. The top-level token name is still a singular value, and the `value` refers to all sub-values that must be applied

If we take a look at those two possibilities in action, here's what they might look like if we transformed them into JavaScript variables:

```javascript
// Option 1

const SHADOW_TOKEN_COLOR = "#00000088";
const SHADOW_TOKEN_OFFSET_X = "0.5rem";
const SHADOW_TOKEN_OFFSET_Y = "0.5rem";
const SHADOW_TOKEN_BLUR = "1.5rem";
const SHADOW_TOKEN_SPREAD = "0rem";
```

```javascript
// Option 2

const SHADOW_TOKEN = {
  color: "#00000088",
  offsetX: "0.5rem",
  offsetY: "0.5rem",
  blur: "1.5rem",
  spread: "0rem"
}
```

## Tradeoffs

**Option 1**
Pros:
1. Tokens can be accessed individually (e.g. apply `SHADOW_TOKEN_COLOR`, but don't apply `SHADOW_TOKEN_OFFSET_X`).
2. Don't need to worry about multiple formats of tokens (i.e. all values will be strings, and there are no object values).

Cons:
1. It isn't immediately clear which transformed tokens need to be applied together other than the first part of the token name (e.g. `SHADOW_TOKEN`). This would require token users to be extra careful in order to ensure that all generated tokens coming from the one composite token are applied.

**Option 2**
Pros:
1. Only one transformed token is generated.
2. It's very clear which values need to be applied together.

Cons:
1. Token users would need to be aware that tokens may come in multiple formats (e.g. strings or objects).

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


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

Received on Thursday, 17 August 2023 20:07:03 UTC