style: theme-aware token pass for dark-mode surfaces (Phase 18)

Re-point neutral page surfaces, play-chip, and default popover from constant brand tokens to theme-aware aliases defined twice in deepdrft-tokens.css. Decorative navy/green sections and bespoke dark-glass panels untouched. Appbar-navy symptom deferred (palette C#, out of CSS scope).
This commit is contained in:
daniel-c-harvey
2026-06-19 18:12:35 -04:00
parent fd4fdd2624
commit 03fdcda054
7 changed files with 123 additions and 40 deletions
@@ -358,6 +358,21 @@ h2, h3, h4, h5, h6,
font-family: var(--deepdrft-font-mono) !important;
}
/* Default MudBlazor popover surface (Phase 18, T4 — symptom #1). Selects, menus, tooltips, and
the share-popover body render inside .mud-popover. Their visible surface is the inner .mud-paper,
which paints background-color: var(--mud-palette-surface). Inspection settled the root cause: the
"too dark" is NOT --deepdrft-panel-ground leakage (the bespoke dark-glass panels are MudOverlay
.mud-overlay-content surfaces and never match .mud-popover) — it is simply that the popover surface
tracks --mud-palette-surface with no desaturated-navy treatment. So re-point --mud-palette-surface
to the theme-aware --deepdrft-popover-surface *within the popover scope only*: a soft desaturated-navy
wash in light, the existing panel-ground charcoal in dark. Scoping the variable (not a flat
background) means any inner .mud-paper, .mud-list, or menu picks it up for free, while the global
surface used elsewhere on the page is unaffected. */
.mud-popover {
--mud-palette-surface: var(--deepdrft-popover-surface);
background-color: var(--deepdrft-popover-surface);
}
.deepdrft-share-popover-body {
padding: 0.75rem 1rem;
min-width: 280px;