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

I’m excited to see this discussion picking back up! @ilikescience I really like your attention to aliasing and grouping theme-related tokens. I also really like your point about simple grammar as well.

Not to distract from your suggestion, but your example brings to mind a question I’ve had for a while: _Do tokens belong to themes? or do themes belong to tokens?_ I think many of us think of themes as first-class citizens, but I’m just curious if there’s value in inverting that assumption. If tokens own themes, the schema would be concise and also allow fallbacks. Further, it can reduce the amount of refactoring to your design tokens whenever a theme is added/removed/changed (when adding a theme, you wouldn’t have to copy + paste all 100% of your tokens; you’d only have to modify the tokens that changed).

By keeping tokens as first-class citizens, rather than themes, it could reduce complexity (up for debate, of course!). For example:

```json
{
  "colors": {
    "type": "group",
    "value": {
      "white": {
        "type": "color",
        "value": "#ffffff"
      },
      {
      "black": {
        "type": "color",
        "value": "#000000"
      },
      "foreground": {
        "type": "alias",
        "value": "colors.black",
        "theme": {
          "dark": "colors.white",
          "light": "colors.black" 
        }
      },
      "background": {
        "type": "alias",
        "value": "colors.white",
        "theme": {
          "dark": "colors.black",
          "light": "colors.white"
        }
      },
      "active": {
        "type": "color",
        "value": "#0000ff",
        "theme": {
          "dark": "#4080ff"
        }
      }
    }
  }
}
```

_Note: this schema format is outdated, but just matching the current discussion._

In this example, `theme` could be a simple mapping because it borrows the `type` from its parent, saving you from having to redeclare it again (i.e. it’s the same format as `"value"`). Also, `active` only needs to declare a separate value for the “dark” theme because all other themes inherit the default value.

---

One last thought: `theme` might be too broad; I’ve heard the word `mode` used as a more granular term ([example](https://twitter.com/bigmediumjosh/status/1450914012036804618)). For example, say you have light/dark mode, and you have “enlarged text“ mode (a11y). Rather than have all permutations of color themes + text size themes, you could call light/dark a “mode” for color, and text size a “mode” for type, allowing you to freely combine them without having to make a bajillion themes.

-- 
GitHub Notification of comment by drwpow
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/2#issuecomment-1011550482 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 23:37:26 UTC