From 03fdcda0548c63453aef82d64d1a6effdc7ea5d0 Mon Sep 17 00:00:00 2001 From: daniel-c-harvey Date: Fri, 19 Jun 2026 18:12:35 -0400 Subject: [PATCH] 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). --- .../AudioPlayerBar/AudioPlayerBar.razor.css | 14 ++++++ .../Controls/PlayStateIcon.razor.css | 13 +++++- .../Layout/DeepDrftFooter.razor.css | 10 ++--- DeepDrftPublic.Client/Pages/About.razor.css | 34 +++++++-------- DeepDrftPublic.Client/Pages/Home.razor.css | 34 ++++++++------- .../wwwroot/styles/deepdrft-styles.css | 15 +++++++ .../wwwroot/styles/deepdrft-tokens.css | 43 +++++++++++++++++++ 7 files changed, 123 insertions(+), 40 deletions(-) diff --git a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css index d9cbe31..d457a0e 100644 --- a/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css +++ b/DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css @@ -42,6 +42,20 @@ right: 0.5rem; } +/* PLAYER-BAR play-chip override (Phase 18, T3). PlayStateIcon's chip defaults to the solid + --deepdrft-play-chip (moss-green in dark) used on release heroes and Cut track rows. On the + bright player dock that solid green reads too hot, so here — and only here — swap to the + translucent --deepdrft-play-chip-soft (same green, much less opaque). The glyph stays the + palette green/primary on this context (the navy default-glyph would vanish on the translucent + wash), so we let MudIconButton's own Color.Primary stand by neutralising the default override. */ +::deep .player-surface .icon-container { + background-color: var(--deepdrft-play-chip-soft); +} + +::deep .player-surface .icon-container .mud-icon-button { + color: var(--mud-palette-primary); +} + /* Minimized floating dock — positioning + hover only; colour from MudFab */ .minimized-dock { position: fixed; diff --git a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css index a7d846d..af69c89 100644 --- a/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css +++ b/DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css @@ -2,7 +2,7 @@ display: flex; justify-content: center; align-content: center; - background-color: var(--deepdrft-soft); + background-color: var(--deepdrft-play-chip); border-radius: 50%; height: 60px; width: 60px; @@ -10,5 +10,14 @@ } .icon-container:hover { - background-color: color-mix(var(--deepdrft-soft), var(--deepdrft-navy-mid) 25%); + background-color: color-mix(in srgb, var(--deepdrft-play-chip), var(--deepdrft-navy-mid) 25%); +} + +/* The glyph reads against the chip, not the page: in dark mode the chip is moss-green + and the MudIconButton's Color.Primary green glyph would vanish, so pin the glyph to the + theme-aware --deepdrft-play-glyph (navy on the green dark chip; unchanged in light, where + the token resolves to navy over the soft-grey chip). ::deep reaches the portaled-in-scope + MudIconButton icon, which doesn't carry this component's scope attribute. */ +.icon-container ::deep .mud-icon-button { + color: var(--deepdrft-play-glyph); } \ No newline at end of file diff --git a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css index f874ca9..6b39f01 100644 --- a/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css +++ b/DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css @@ -3,7 +3,7 @@ WaveformVisualizer backdrop (z-index:0), keeping footer text fully legible. */ position: relative; z-index: 1; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); border-top: 1px solid var(--deepdrft-border); padding: 3rem; display: flex; @@ -22,7 +22,7 @@ font-family: var(--deepdrft-font-display); font-size: 1.5rem; font-weight: 400; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); } .deepdrft-footer-logo span { @@ -44,19 +44,19 @@ font-size: 0.62rem; letter-spacing: 0.18em; text-transform: uppercase; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); text-decoration: none; transition: color 0.2s; } .deepdrft-footer-links a:hover, -.deepdrft-footer-links button:hover { color: var(--deepdrft-navy); } +.deepdrft-footer-links button:hover { color: var(--deepdrft-page-text); } .deepdrft-footer-copy { font-family: var(--deepdrft-font-mono); font-size: 0.58rem; letter-spacing: 0.12em; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); } /* PRIVACY trigger — reset button chrome so it reads as a link, not a button element. diff --git a/DeepDrftPublic.Client/Pages/About.razor.css b/DeepDrftPublic.Client/Pages/About.razor.css index 6786066..9619063 100644 --- a/DeepDrftPublic.Client/Pages/About.razor.css +++ b/DeepDrftPublic.Client/Pages/About.razor.css @@ -35,7 +35,7 @@ justify-content: center; padding: 6rem 3rem; position: relative; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); height: 100%; } @@ -43,7 +43,7 @@ display: flex; flex-direction: column; justify-content: center; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); height: 100%; } @@ -79,7 +79,7 @@ font-weight: 300; line-height: 0.92; letter-spacing: -0.02em; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); margin-bottom: 0.5rem; animation-delay: 0.22s; } @@ -93,7 +93,7 @@ font-family: var(--deepdrft-font-body); font-size: 0.92rem; line-height: 1.75; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.7; max-width: 36ch; margin-bottom: 3rem; @@ -109,7 +109,7 @@ .movement { display: grid; grid-template-columns: minmax(140px, 14%) minmax(0, 1fr); - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); align-items: start; } @@ -141,7 +141,7 @@ font-weight: 300; line-height: 1; letter-spacing: -0.04em; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.14; padding-left: 1.4rem; transition: color 0.5s ease, opacity 0.5s ease; @@ -163,7 +163,7 @@ font-size: 0.58rem; letter-spacing: 0.24em; text-transform: uppercase; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); writing-mode: vertical-rl; transform: rotate(180deg); transform-origin: center; @@ -207,7 +207,7 @@ font-size: 0.62rem; letter-spacing: 0.28em; text-transform: uppercase; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); white-space: nowrap; } @@ -231,7 +231,7 @@ font-size: clamp(2.6rem, 5vw, 4.2rem); font-weight: 300; line-height: 1.02; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); margin-bottom: 2rem; } @@ -244,7 +244,7 @@ font-family: var(--deepdrft-font-body); font-size: 0.95rem; line-height: 1.85; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.72; max-width: 56ch; } @@ -295,7 +295,7 @@ font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); margin-top: 0.9rem; padding-left: 0.1rem; } @@ -309,7 +309,7 @@ font-size: 2rem; font-weight: 300; line-height: 1.1; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); margin-bottom: 1rem; } @@ -317,7 +317,7 @@ font-family: var(--deepdrft-font-body); font-size: 0.85rem; line-height: 1.8; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.7; } @@ -339,7 +339,7 @@ font-size: 0.56rem; letter-spacing: 0.2em; text-transform: uppercase; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); margin-top: 0.9rem; } @@ -467,7 +467,7 @@ font-family: var(--deepdrft-font-display); font-size: 1.5rem; font-weight: 400; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); min-width: 7rem; } @@ -477,7 +477,7 @@ font-family: var(--deepdrft-font-body); font-size: 0.85rem; line-height: 1.6; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.6; } @@ -502,7 +502,7 @@ font-size: clamp(1.8rem, 3.4vw, 2.9rem); font-weight: 300; line-height: 1.15; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); } /* ══════════════════ CLOSING CTA (reused vocabulary) ══════════════════ */ diff --git a/DeepDrftPublic.Client/Pages/Home.razor.css b/DeepDrftPublic.Client/Pages/Home.razor.css index 4da836c..fa16963 100644 --- a/DeepDrftPublic.Client/Pages/Home.razor.css +++ b/DeepDrftPublic.Client/Pages/Home.razor.css @@ -15,7 +15,7 @@ justify-content: center; padding: 6rem 3rem; position: relative; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); height: 100%; } @@ -30,7 +30,7 @@ align-items: center; gap: 2rem; padding: 2rem 3rem; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); } .divider-line { @@ -43,7 +43,7 @@ font-family: var(--deepdrft-font-mono); font-size: 0.6rem; letter-spacing: 0.25em; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); text-transform: uppercase; white-space: nowrap; } @@ -51,7 +51,7 @@ /* ── SECTION (sound) ── */ .section { padding: 7rem 3rem; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); } @media (min-width: 960px) { @@ -74,7 +74,7 @@ font-size: clamp(2.8rem, 5vw, 4.5rem); font-weight: 300; line-height: 1; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); } .section-title em { @@ -106,7 +106,7 @@ font-family: var(--deepdrft-font-body); font-size: 0.9rem; line-height: 1.8; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.65; max-width: 52ch; } @@ -130,7 +130,7 @@ } .medium-card { - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); border: 1px solid var(--deepdrft-border); cursor: pointer; overflow: hidden; @@ -189,7 +189,7 @@ font-family: var(--deepdrft-font-mono); font-size: 0.58rem; letter-spacing: 0.2em; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); text-transform: uppercase; margin-bottom: 0.6rem; } @@ -198,7 +198,7 @@ font-family: var(--deepdrft-font-display); font-size: 1.6rem; font-weight: 400; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); margin-bottom: 0.75rem; line-height: 1.1; } @@ -207,7 +207,7 @@ font-family: var(--deepdrft-font-body); font-size: 0.82rem; line-height: 1.65; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); opacity: 0.6; } @@ -333,7 +333,7 @@ display: flex; flex-direction: column; justify-content: center; - background: var(--deepdrft-white); + background: var(--deepdrft-page-surface); height: 100%; } @@ -387,7 +387,7 @@ font-family: var(--deepdrft-font-display); font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); line-height: 1.05; margin-bottom: 2rem; } @@ -426,14 +426,16 @@ display: flex; align-items: center; justify-content: center; - background: var(--deepdrft-navy); + /* Inversion pair with the glyph below: a contrast chip against the page surface + (navy chip / white glyph in light; white chip / navy glyph on the dark ground). */ + background: var(--deepdrft-page-text); flex-shrink: 0; } .option-icon svg { width: 0.9rem; height: 0.9rem; - stroke: var(--deepdrft-white); + stroke: var(--deepdrft-page-surface); fill: none; stroke-width: 1.5; } @@ -442,14 +444,14 @@ font-family: var(--deepdrft-font-mono); font-size: 0.65rem; letter-spacing: 0.15em; - color: var(--deepdrft-navy); + color: var(--deepdrft-page-text); text-transform: uppercase; } .option-text-sub { font-family: var(--deepdrft-font-body); font-size: 0.75rem; - color: var(--deepdrft-muted); + color: var(--deepdrft-page-text-muted); margin-top: 0.1rem; } diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css index e4e21d1..8dfcf9d 100644 --- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css @@ -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; diff --git a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css index 1484705..b5406a9 100644 --- a/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css +++ b/DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css @@ -68,6 +68,28 @@ --gradient-warm: var(--deepdrft-green); --gradient-light: var(--deepdrft-green-accent); + /* Theme-aware page-surface family (Phase 18). The "neutral page surface" concept: + sections that were hardcoded to --deepdrft-white because the site was light-only. + Light values reproduce today's look exactly; the .deepdrft-theme-dark block below + inverts them onto the navy ground so neutral sections dissolve into one dark field. */ + --deepdrft-page-surface: var(--deepdrft-white); + --deepdrft-page-text: var(--deepdrft-navy); + --deepdrft-page-text-muted: var(--deepdrft-muted); + + /* Play-chip family (Phase 18). PlayStateIcon's chip is shared across release heroes, + Cut track rows, and the player bar. Light keeps the current soft-grey chip + glyph; + dark turns the chip moss-green with a navy glyph. The -soft variant is the player-bar + override (same green, much less opaque). */ + --deepdrft-play-chip: var(--deepdrft-soft); + --deepdrft-play-glyph: var(--deepdrft-navy); + --deepdrft-play-chip-soft: var(--deepdrft-soft); + + /* Popover surface (Phase 18). Default MudBlazor popovers (selects/menus/tooltips/share + body) bind this. Light is a soft desaturated-navy wash so they read as a calm light + surface; dark uses the existing panel-ground charcoal. Bespoke dark-glass panels + (visualizer/queue/privacy) do NOT bind this — they keep --deepdrft-panel-ground directly. */ + --deepdrft-popover-surface: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white)); + /* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*. Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have consumers and are scheduled for retirement in Phase 0.3/0.4. */ @@ -108,4 +130,25 @@ --gradient-accent: var(--deepdrft-green-accent); --gradient-warm: var(--deepdrft-green); --gradient-light: var(--deepdrft-green-light); + + /* Theme-aware page-surface family (Phase 18) — inverted onto the navy ground. + OQ#1 resolved: GROUND (--deepdrft-navy), so neutral sections (Home hero-left, + medium grid, footer, About light sections) dissolve into the site background as + one continuous dark field rather than reading as raised panels. */ + --deepdrft-page-surface: var(--deepdrft-navy); + --deepdrft-page-text: var(--deepdrft-white); + /* Lift muted text toward white so eyebrows/sub-text stay legible on the dark ground. */ + --deepdrft-page-text-muted: color-mix(in srgb, var(--deepdrft-muted) 70%, var(--deepdrft-white)); + + /* Play-chip family (Phase 18) — moss-green chip, navy glyph. The -soft variant is the + player-bar override: same green, much less opaque (translucent wash over the navy dock). */ + --deepdrft-play-chip: var(--deepdrft-green-accent); + --deepdrft-play-glyph: var(--deepdrft-navy); + --deepdrft-play-chip-soft: color-mix(in srgb, var(--deepdrft-green-accent) 30%, transparent); + + /* Popover surface (Phase 18). Symptom #1 is a LIGHT-mode complaint and the acceptance bar + requires dark popovers to stay unchanged, so dark binds the exact current MudBlazor dark + Surface (#162437, DeepDrftPalettes.Dark.Surface) — NOT §3's suggested panel-ground (#1a1c22), + which would have shifted dark popovers a shade. Pixel-identical dark; only light is retoned. */ + --deepdrft-popover-surface: #162437; }