Re: [community-group] Native modes and theming support (#210)

I really like this proposal and think building theming into the format will improve interoperability.

At Interplay, we use a very similar data structure internaly and get users to import/export specific themes to the token group format. The only difference is we use `$values` rather than `$modes`, and `$inherit` rather than `$fallback`

One suggestions I have is making `$fallback` an array instead of a single value.

Then users could define themes/modes for `compact`, `jumbo`, `dark` and `light`. Then they can combine these to create e.g. `dark-mobile`, `light-mobile`, etc. The value of the tokens would be determined by the order of the inherited themes. 

This would save a lot of duplicate entry for values across themes.

```json
{
  "$name": "UI Colors",
  "$modes": {
    "light": { }, 
    "dark": { },
    "compact": { },
    "jumbo": { }, 
    "dark-compact": { "$fallback": ["dark", "compact"] }
  },
  "font-size": {
    "$type": "dimension",
    "small": {
      "$value": "1rem",
      "$modes": {
        "compact": "0.5rem",
        "jumbo": "1.5rem",
      }
    }
  },
  "backgrounds": {
    "$type": "color",
    "base": {
      "$value": "{colors.white}",
      "$modes": {
        "light": "{colors.white}",
        "dark": "{colors.black}",
      }
    }
  }
}
```

The values for these tokens in the `dark-compact` theme would be
`font-size.small: 0.5rem`
`background.base: {colors.black}`

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


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

Received on Thursday, 23 March 2023 21:50:14 UTC