daniel/deepdrft
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 13 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftPublic.Client/Controls/AudioPlayerBar/AudioPlayerBar.razor.css
+14
View File
@@ -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;
DeepDrftPublic.Client/Controls/PlayStateIcon.razor.css
+11 -2
View File
@@ -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);
}
DeepDrftPublic.Client/Layout/DeepDrftFooter.razor.css
+5 -5
View File
@@ -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.
DeepDrftPublic.Client/Pages/About.razor.css
+17 -17
View File
@@ -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) ══════════════════ */
DeepDrftPublic.Client/Pages/Home.razor.css
+18 -16
View File
@@ -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;
}
DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+15
View File
@@ -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;
DeepDrftShared.Client/wwwroot/styles/deepdrft-tokens.css
+43
View File
@@ -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;
}