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