Merge theme-icon-followups into dev

Fix PlayStateIcon green-on-green chip and gas-lamp frame in dark theme.
This commit is contained in:
daniel-c-harvey
2026-06-20 03:07:40 -04:00
4 changed files with 27 additions and 10 deletions
+5 -1
View File
@@ -144,7 +144,11 @@ Component state lives in ViewModels (registered scoped in DI). Components render
Green-accent interactive icon affordances (Play / Share / Add-to-Queue / lava-lamp trigger, etc.) use a **single reusable treatment** in `deepdrft-styles.css`, not per-site dark overrides. Wrap the affordance(s) in a container carrying `.dd-accent-icon`; the rule colours the inner `.mud-icon-root` glyph green-accent (`--deepdrft-green-accent`, the brand constant — same value in both palettes) in **both** themes. Add `.dd-accent-fill` to the same container when it also holds a filled `Color.Secondary` `MudButton` whose fill must go green-accent in **dark** (dark-only — light already renders green fill + white text). Green-accent interactive icon affordances (Play / Share / Add-to-Queue / lava-lamp trigger, etc.) use a **single reusable treatment** in `deepdrft-styles.css`, not per-site dark overrides. Wrap the affordance(s) in a container carrying `.dd-accent-icon`; the rule colours the inner `.mud-icon-root` glyph green-accent (`--deepdrft-green-accent`, the brand constant — same value in both palettes) in **both** themes. Add `.dd-accent-fill` to the same container when it also holds a filled `Color.Secondary` `MudButton` whose fill must go green-accent in **dark** (dark-only — light already renders green fill + white text).
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. The one genuinely theme-divergent affordance (the gas-lamp toggle = inherited nav text in light) does **not** use this class — it keeps a narrow dark-only rule. **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,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).
## Development commands ## Development commands
@@ -22,4 +22,15 @@
component's scope attribute. */ component's scope attribute. */
.deepdrft-theme-dark .icon-container ::deep .mud-icon-button { .deepdrft-theme-dark .icon-container ::deep .mud-icon-button {
color: var(--deepdrft-play-glyph); color: var(--deepdrft-play-glyph);
}
/* PlayStateIcon is authoritative over its own glyph colour — a surrounding .dd-accent-icon
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
After Blazor scoped-CSS compilation this rule becomes:
.deepdrft-theme-dark .icon-container[b-xxx] .mud-icon-button .mud-icon-root (0,5,0) !important
(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. */
.deepdrft-theme-dark .icon-container ::deep .mud-icon-button .mud-icon-root {
color: var(--deepdrft-play-glyph) !important;
} }
@@ -809,13 +809,10 @@ body:has(.waveform-visualizer-control-overlay) {
color: var(--deepdrft-navy) !important; color: var(--deepdrft-navy) !important;
} }
/* Theme-divergent affordance — gas-lamp dark-mode toggle. /* Gas-lamp dark-mode toggle: the frame now carries an explicit #2A5C4F fill in its SVG
Uses Color.Inherit, so in LIGHT it inherits the nav text colour (the contract to keep). (DDIcons.GasLampLit), so no CSS colour override is needed here in dark. The nav rule
In dark theme it goes green-accent to match the convention. Scoped to .dd-nav-actions that previously set green-accent on the MudIconButton has been removed — it was the
(covers both desktop and mobile nav, which both render the gas-lamp there); dark-only. */ only .mud-icon-button in .dd-nav-actions and is now dead. */
.deepdrft-theme-dark .dd-nav-actions .mud-icon-button {
color: var(--deepdrft-green-accent);
}
/* ============================================================================= /* =============================================================================
RELEASE DESCRIPTION BLURB RELEASE DESCRIPTION BLURB
+7 -2
View File
@@ -12,11 +12,16 @@ public static class DDIcons
"""; """;
/// <summary> /// <summary>
/// Charleston gas lamp with lit flame - for dark mode /// Charleston gas lamp with lit flame - for dark mode.
/// Frame/body path uses an explicit darker-green fill (#2A5C4F — palette PrimaryDarken /
/// --deepdrft-green-light) instead of currentColor so it is deterministic in the nav
/// regardless of inherited colour. The flame ellipses keep their literal orange/yellow/cream
/// fills. Only rendered in dark mode (DarkLightModeButtonIcon in DeepDrftMenu.razor).
/// If the palette's PrimaryDarken changes, update #2A5C4F to match.
/// </summary> /// </summary>
public const string GasLampLit = """ public const string GasLampLit = """
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path fill="currentColor" d="M11 0h2v2h-2zM5 6l7-4 7 4v2H5zM6 8h12l-1.5 10h-9zM7.7 9l1.2 8h6.2l1.2-8zM9 19h6v1H9zM10 21h4v2h-4z"/> <path fill="#2A5C4F" d="M11 0h2v2h-2zM5 6l7-4 7 4v2H5zM6 8h12l-1.5 10h-9zM7.7 9l1.2 8h6.2l1.2-8zM9 19h6v1H9zM10 21h4v2h-4z"/>
<ellipse cx="12" cy="13" rx="2.5" ry="3.5" fill="#FF9800"/> <ellipse cx="12" cy="13" rx="2.5" ry="3.5" fill="#FF9800"/>
<ellipse cx="12" cy="12.5" rx="1.5" ry="2.5" fill="#FFCA28"/> <ellipse cx="12" cy="12.5" rx="1.5" ry="2.5" fill="#FFCA28"/>
<ellipse cx="12" cy="12" rx=".7" ry="1.5" fill="#FFF8E1"/> <ellipse cx="12" cy="12" rx=".7" ry="1.5" fill="#FFF8E1"/>