Allow partial token replacements without resetting all theme variables with ScopedTheme

[brunowilliang]

Hi team,

I am using ScopedTheme and custom themes for page branding.
I need to keep base light / dark behavior, but override only two tokens in scoped templates:

• --accent
• --secondary

Current behavior

When I define templates with partial overrides, Uniwind requires every theme to include the full variable set and throws:

• Uniwind Error - Theme <template> is missing variable ...
• Uniwind Error - All themes must have the same variables

So for small branding changes (2 colors), I currently need to duplicate dozens of tokens in every template.

Repro setup (simplified)

metro.config.js

withUniwindConfig(config, {
  cssEntryFile: './src/theme/global.css',
  extraThemes: [
    'red-green-template',
    'magenta-lime-template',
    'gold-blue-template',
  ],
})

global.css (intended partial overrides)

@layer theme {
  :root {
    @variant light {
      --accent: oklch(...);
      --secondary: oklch(...);
      --background: oklch(...);
      --foreground: oklch(...);
      /* full base token set */
    }

    @variant dark {
      --accent: oklch(...);
      --secondary: oklch(...);
      --background: oklch(...);
      --foreground: oklch(...);
      /* full base token set */
    }

    @variant red-green-template {
      --accent: oklch(63.73% 0.2096 16.63);
      --secondary: oklch(69.64% 0.073 139.08);
      /* expected: inherit all other tokens */
    }

    @variant magenta-lime-template {
      --accent: oklch(64.86% 0.1335 316.07);
      --secondary: oklch(84.09% 0.1033 103.28);
      /* expected: inherit all other tokens */
    }

    @variant gold-blue-template {
      --accent: oklch(91.36% 0.1279 59.15);
      --secondary: oklch(44.92% 0.3234 213.84);
      /* expected: inherit all other tokens */
    }
  }
}

Usage

<ScopedTheme theme="red-green-template">
  <MySection />
</ScopedTheme>

Expected behavior

Scoped themes should support partial token overrides and fallback/inherit missing tokens from the active base theme (light or dark), instead of requiring full token duplication.

Possible approaches:

1. Theme inheritance (custom-template extends light/dark)
2. ScopedTheme API for CSS variable overrides (subtree-level)
3. Automatic fallback for missing variables to base theme

Why this matters

For multi-tenant/page-branding scenarios, changing only accent and secondary is common.
Requiring full token duplication for each template is hard to maintain and error-prone.

Is there a recommended way to implement this today?

[github-actions]

This issue has been automatically closed because it lacks a clear, minimal reproduction that we can use to verify the reported bug.

[brunowilliang]

@jpudysz github-actions is closing automatically, so I created a discussion for #422.
If you could just take a look and help me out, I'd appreciate it.

[Brentlok]

Issues are for bugs, discussions are for feature requests.