Problem
In the Colors example at 94bf4d8, palette.another is emitted under .Another, while the dark-theme aliases are emitted on :root:
:root {
@media (prefers-color-scheme: dark) {
--primary: var(--palette-another-yellow);
--secondary: var(--palette-another-cyan);
}
}
.Another {
--palette-another-yellow: oklch(96.798% 0.21101 109.76924);
--palette-another-cyan: oklch(90.54% 0.15455 194.76896);
}This requires .Another to match the root element, or the source properties to be independently available there. It does not work merely by placing .Another on a descendant.
Custom-property references are substituted when the alias is computed, before inheritance. Defining the source on a descendant cannot repair an invalid alias inherited from the root. See the CSS Custom Properties specification.
Minimal browser regression fixture
The following removes the media-query condition to isolate the scoping problem:
<style>
:root { --primary: var(--palette-another-yellow); }
.Another { --palette-another-yellow: yellow; }
.probe { color: var(--primary, red); }
</style>
<div class="Another probe">Expected palette color only after fixing the scopes</div>The descendant receives the fallback red, not yellow. Applying .Another to <html> instead makes the source available where the alias is computed. Add browser assertions for both placements; this report is based on source/specification analysis, not a completed browser test run.
Proposed correction
Choose and document a coherent example:
- Define palette tokens globally, then override semantic aliases by theme; or
- Emit both source tokens and aliases in the same selector context; or
- Explicitly require a root theme class and illustrate
:root.Another with matching HTML.
Acceptance criteria
A conservative scope-diagnostic feature is separate follow-up work; this issue fixes the concrete documentation example.
Problem
In the Colors example at 94bf4d8,
palette.anotheris emitted under.Another, while the dark-theme aliases are emitted on:root:This requires
.Anotherto match the root element, or the source properties to be independently available there. It does not work merely by placing.Anotheron a descendant.Custom-property references are substituted when the alias is computed, before inheritance. Defining the source on a descendant cannot repair an invalid alias inherited from the root. See the CSS Custom Properties specification.
Minimal browser regression fixture
The following removes the media-query condition to isolate the scoping problem:
The descendant receives the fallback red, not yellow. Applying
.Anotherto<html>instead makes the source available where the alias is computed. Add browser assertions for both placements; this report is based on source/specification analysis, not a completed browser test run.Proposed correction
Choose and document a coherent example:
:root.Anotherwith matching HTML.Acceptance criteria
getComputedStyle()tests for root and descendant theme classes, including an active dark-mode condition.A conservative scope-diagnostic feature is separate follow-up work; this issue fixes the concrete documentation example.