Re: [community-group] [RFC] Theming (#2)

As I dig through the discussions more and more, I'm seeing (just as you are, @mathieudutour) some convergence in the underlying intention of mixins, interfaces, components, and variants. Just like you said, they're _groups_ of tokens.

```json
{ "colors" : {
  "type": "group",
  "value": {
    "dark": {
      "type": "group",
      "value": {
        "foreground": {
          "type": "color",
          "value": "#ffffff"
        }, {
        "background": {
          "type": "color",
          "value": "#000000"
        }
      }
    }, {
    "light": {
      "type": "group",
      "value": {
        "foreground": {
          "type": "color",
          "value": "#000000"
        }, {
        "background": {
          "type": "color",
          "value": "#ffffff"
        }
      }
    }
  }
}
```

This allows for a lot of flexibility in parsing. If a user wants all their tokens to be output a single js file, a token might end up with the name `colors.dark.foreground`. But if a user wants the tokens to be split up into separate files by group name and rendered to css, it might give you a `colors/dark.css` file with the token named `--foreground`.

There's a second convergence around aliasing. In the example above, I have to write out `#ffffff` and `#000000` twice each. Aliases make this much easier to maintain.

  ```json
{ "colors" : {
  "type": "group",
  "value": {
    "base": {
      "type": "group",
      "value": {
        "white": {
          "type": "color",
          "value": "#ffffff"
        }, {
        "black": {
          "type": "color",
          "value": "#000000"
        }
      }
    },
    "dark": {
      "type": "group",
      "value": {
        "foreground": {
          "type": "alias",
          "value": "colors.base.white"
        }, {
        "background": {
          "type": "alias",
          "value": "colors.base.black"
        }
      }
    }, {
    "light": {
      "type": "group",
      "value": {
        "foreground": {
          "type": "alias",
          "value": "colors.base.black"
        }, {
        "background": {
          "type": "alias",
          "value": "colors.base.white"
        }
      }
    }
  }
}
```

I think the two concepts together neatly cover the use case of themeing in that they enable a lot of flexibility on the user side without sacrificing readability on the token file side. Additionally this approach keeps the grammar simple.

What do you y'all think?

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


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

Received on Wednesday, 12 January 2022 20:05:13 UTC