Nested colors in theme (and other nested theme tokens)

[jaukia]

Theming of Stitches is based on the System UI format. System UI supports nested tokens, such as colors, in this way:

// example nested colors object
colors: {
  blue: '#07c',
  blues: [
    '#004170',
    '#006fbe',
    '#2d8fd5',
    '#5aa7de',
  ]
}

https://system-ui.com/theme/

However, I can't get this to work in Stitches ("blues" shows up as just one token). Am I doing something wrong, is this not supported by Stitches? If not then perhaps I should do an issue on this.

[dylanklohr]

To my knowledge, stitches does not offer nested theming tokens. Rather, it offers the ability to associate custom "tokens" (keys) with each color "value" https://stitches.dev/docs/tokens#defining-tokens.

Can you explain the use-case of why one might want to group several colors together without having a token to differentiate which value is being referenced?

[jaukia]

A couple of use-cases come into my mind:

1. In Xstyled, you can group modes under colors to support both light and dark styles in just one theme in a standardized way:
   https://xstyled.dev/docs/dark-mode/

const theme = {
  colors: {
    text: '#000',
    background: '#fff',
    primary: '#07c',
    modes: {
      dark: {
        text: '#fff',
        background: '#000',
        primary: '#0cf',
      },
    },
  },
}

2. Another would be to separate in a more clean way unrelated colors (tokens) by grouping them under categories, say blues, greens, grays, etc. Or those related to specific elements or product areas. An example of that can be seen in the Primer design system example theme:
   https://primer.style/react/theme-reference

"colorSchemes": {
    "light": {
      "colors": {
        "canvasDefaultTransparent": "rgba(255,255,255,0)",
        "marketingIcon": {
          "primary": "#218bff",
          "secondary": "#54aeff"
        },
        "diffBlob": {
          "addition": {
            "numText": "#24292f",
            "fg": "#24292f",
            "numBg": "#CCFFD8",
            "lineBg": "#E6FFEC",
            "wordBg": "#ABF2BC"
          },
          "deletion": {
            "numText": "#24292f",
            "fg": "#24292f",
            "numBg": "#FFD7D5",

Compared with these, the theme format of Stitches feels limited.

[dylanklohr]

Thanks for the examples 😄

There isn't a way via the createStitches API to group colors semantically that I'm aware of, but depending on how you would want to consume the color values themseleves, there are a few options that I could think of that may offer an alternative that's comparable.

One option would be to use the theme object that the createStitches exposes, or perhaps even the object returned by createTheme to create your own standalone style groupings.

[jaukia]

Thanks for checking this and for the suggestions! I wasn't sure if I'm just missing something or if this is a missing feature in Stitches. Perhaps I'll do a feature request then.