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/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;
}