How to use permutations to generate themed CSS from a single token file?

[gynekolog]

I'm trying to configure Terrazzo 2 to generate separate CSS custom properties for light and dark themes.
I used to use modeSelector, which is now deprecated. I understand that permutations are the recommended replacement, but I'm not sure how to use them with my setup.

Can you provide guidance on how to generate a single CSS file with separate selectors for each theme, without splitting the source token file, please?

Example token file structure:

{
  "colors": {
    "background": {
      "screen": {
        "$type": "color",
        "$value": "#ffffff",
        "$extensions": {
          "mode": {
            "light": "#ffffff",
            "dark": "#000000"
          }
        }
      }
    }
  }
}

Expected output:

[data-theme="light"] {
    --colors-background-screen: #ffffff;
 }

[data-theme="dark"] {
    --colors-background-screen: #000000;
}

terrazzo.config.ts with modeSelectors:

...
modeSelectors: [
  {
      mode: "light",
      selectors: ['[data-theme="light"]'],
  },
  {
      mode: "dark",
      selectors: ['[data-theme="dark"]'],
  },
],
...

[drwpow]

Ah great question! You can only use permutations if you’ve updated your tokens to use the new resolver syntax. You can try to use permutations with { tzMode: 'light' } / { tzMode: 'dark' }, but there may be some unexpected output trying to get Terrazzo to “upconvert” your tokens if you bend it enough. For the best experience it’s probably worth using the new format.