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) ══════════════════ */