docs: correct PlayStateIcon compiled-selector specificity tuple (0,4,0) to (0,5,0)

The [b-xxx] Blazor scope attribute is a fifth class/attribute simple selector; the prior count dropped it.
This commit is contained in:
daniel-c-harvey
2026-06-20 03:06:59 -04:00
parent 00ff9e2702
commit 4410132409
2 changed files with 3 additions and 3 deletions
+1 -1
View File
@@ -146,7 +146,7 @@ Green-accent interactive icon affordances (Play / Share / Add-to-Queue / lava-la
Two reasons this is needed and why it's a class, not a palette colour: (1) no MudBlazor `Color` enum is green in both themes (`Dark.Secondary` is off-white), so palette-only solutions can't express "green in both"; (2) MudBlazor stamps the standalone rule `.mud-secondary-text { color: …secondary !important }` (0,1,0) on the glyph `<svg>`, so wrapper-level overrides never reach it — the reusable rule targets `.dd-accent-icon .mud-icon-button .mud-icon-root` (0,3,0) `!important`, which beats it on specificity alone; source order is not load-bearing for the glyph clause. The Session/Mix release-detail hero Share/Play glyphs use this class too: they were already green-accent in light (via `Color.Secondary``Light.Secondary`), so folding them in keeps light pixel-identical while fixing the dark over-image glyphs — they are not actually theme-divergent. **Add new green-accent icon affordances by applying this class, not by spawning a new dark override.** Two reasons this is needed and why it's a class, not a palette colour: (1) no MudBlazor `Color` enum is green in both themes (`Dark.Secondary` is off-white), so palette-only solutions can't express "green in both"; (2) MudBlazor stamps the standalone rule `.mud-secondary-text { color: …secondary !important }` (0,1,0) on the glyph `<svg>`, so wrapper-level overrides never reach it — the reusable rule targets `.dd-accent-icon .mud-icon-button .mud-icon-root` (0,3,0) `!important`, which beats it on specificity alone; source order is not load-bearing for the glyph clause. The Session/Mix release-detail hero Share/Play glyphs use this class too: they were already green-accent in light (via `Color.Secondary``Light.Secondary`), so folding them in keeps light pixel-identical while fixing the dark over-image glyphs — they are not actually theme-divergent. **Add new green-accent icon affordances by applying this class, not by spawning a new dark override.**
**Self-themed components are authoritative over `.dd-accent-icon`.** `PlayStateIcon` owns its glyph colour inside `.icon-container` and must beat a surrounding `.dd-accent-icon` in dark — its scoped CSS rule targets `.mud-icon-root` at (0,4,0) `!important` (after Blazor's scope attribute is applied), which outranks the consolidation rule's (0,3,0) `!important`. Do not wrap a `PlayStateIcon` in `.dd-accent-icon` expecting to recolor its play-chip glyph — the play chip always shows navy (`--deepdrft-play-glyph`) against the moss-green chip in dark. **Self-themed components are authoritative over `.dd-accent-icon`.** `PlayStateIcon` owns its glyph colour inside `.icon-container` and must beat a surrounding `.dd-accent-icon` in dark — its scoped CSS rule targets `.mud-icon-root` at (0,5,0) `!important` (after Blazor's scope attribute is applied), which outranks the consolidation rule's (0,3,0) `!important`. Do not wrap a `PlayStateIcon` in `.dd-accent-icon` expecting to recolor its play-chip glyph — the play chip always shows navy (`--deepdrft-play-glyph`) against the moss-green chip in dark.
**Gas-lamp toggle is self-colored in its SVG.** `DDIcons.GasLampLit` (dark-mode icon) carries `fill="#2A5C4F"` directly on its frame path — no CSS colour override is needed. The former dark nav rule (`.deepdrft-theme-dark .dd-nav-actions .mud-icon-button`) has been removed as dead. `DDIcons.GasLamp` (light-mode icon) continues to use `currentColor` and inherits nav text colour in light (the unlit toggle is theme-divergent by design). **Gas-lamp toggle is self-colored in its SVG.** `DDIcons.GasLampLit` (dark-mode icon) carries `fill="#2A5C4F"` directly on its frame path — no CSS colour override is needed. The former dark nav rule (`.deepdrft-theme-dark .dd-nav-actions .mud-icon-button`) has been removed as dead. `DDIcons.GasLamp` (light-mode icon) continues to use `currentColor` and inherits nav text colour in light (the unlit toggle is theme-divergent by design).
@@ -28,8 +28,8 @@
must NOT recolor the play-chip glyph in dark. The consolidation rule is: must NOT recolor the play-chip glyph in dark. The consolidation rule is:
.dd-accent-icon .mud-icon-button .mud-icon-root (0,3,0) !important .dd-accent-icon .mud-icon-button .mud-icon-root (0,3,0) !important
After Blazor scoped-CSS compilation this rule becomes: After Blazor scoped-CSS compilation this rule becomes:
.deepdrft-theme-dark .icon-container[b-xxx] .mud-icon-button .mud-icon-root (0,4,0) !important .deepdrft-theme-dark .icon-container[b-xxx] .mud-icon-button .mud-icon-root (0,5,0) !important
(0,4,0) beats (0,3,0) — wins on specificity; !important parity is irrelevant. (0,5,0) beats (0,3,0) — wins on specificity; !important parity is irrelevant.
Dark only: light already renders the navy glyph via the MudBlazor Color prop. */ Dark only: light already renders the navy glyph via the MudBlazor Color prop. */
.deepdrft-theme-dark .icon-container ::deep .mud-icon-button .mud-icon-root { .deepdrft-theme-dark .icon-container ::deep .mud-icon-button .mud-icon-root {
color: var(--deepdrft-play-glyph) !important; color: var(--deepdrft-play-glyph) !important;