Re: [community-group] How to do tokens that share a name with a group (#97)

@IanVS I don't think parsers like Style Dictionary support a top-level variable and nested variables inside. It's either one or the other. 

If I had to guess it's probably an issue with some exports, like the JS object syntax used by CSS in JS platforms. If you had a top-level variable defined, you couldn't also have an array of child elements, one would override the other.

```js
{
   colors: {
    // It can't be a string and object at same time
    gray: "#6c7d93",
    gray: {
      10: "#16191d",
    },
  },
}
```

You'd have to do something like this and make your top level gray something like `--color-gray-0`:

```json
{
  "color": {
    "$type": "color",
    "base": {
      "gray": {
        "0": { "$value": "#6c7d93" },
        "10" : { "$value": "#16191d" },
        "15": { "$value": "#21252c" },
        "20"  : { "$value": "#2b323b" },
        "30"  : { "$value": "#414b58" },
        "40"  : { "$value": "#576475" },
        "50"  : { "$value": "#6c7d93" }
      },
    }
  }
}
```

This kind of pattern happens more often with variants and component/composite tokens. It's easy to want to do a `button.background` and then a `button.background.disabled` -- but that causes similar collisions. So it's best to name the "default" state as something (usually default, initial, etc): `button.background` becomes `button.background.default`.

---

To acknowledge the discussion: I'm not sure how having a group type would resolve the consolidation of the tokens into variables. Unless each variable is unique (like CSS exports, where you get individual `--color-gray` names -- or individual JS var export like `const colorGray` and `const colorGray10`), this system won't work with parsers like Style Dictionary.

For example, I wanted to theme the gray colors, this definitely works with individual variables:

```js
// Dark theme
export const colorGray = "#6c7d93";
export const colorGray10 = "#16191d";
```

Then I could use these inside my project:

```js
import lightTheme from "./dark"
import darkTheme from "./dark"

const theme = isDarkMode ? darkTheme : lightTheme;
```

But if I had an object based syntax, this doesn't work.

And ideally the goal of these tokens would be to be used across all -- if not most platforms? So I feel like this would just always conflict with dynamic languages like JS and the common practice of theming (like CSS in JS).

If it were supported, there'd definitely have to be some sort of guidelines for parsers to understand that groups would only be supported in "split variable" contexts. This way they could throw an error to help user understand why the tokens aren't properly reflected in more dynamic contexts (e.g. JS object syntax, SASS maps, etc). 

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


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

Received on Tuesday, 19 March 2024 23:14:41 UTC