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

refactor(split): extract DeepDrftShared.Client RCL with shared atoms

Browse Source 
TrackCard, TracksGallery, DDIcons, DeepDrftPalettes (Default+Cms), DeepDrftFontLinks,
and palette CSS tokens extracted. Both hosts and DeepDrftCms reference the shared RCL.
This commit is contained in:
Daniel Harvey
2026-05-19 17:14:23 -04:00
parent 840192fb79
commit 8b8796fc58
22 changed files with 360 additions and 299 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb/Components/App.razor
+3 -3
View File
@@ -1,4 +1,5 @@
@using DeepDrftWeb.Services
@using DeepDrftShared.Client.Components
<!DOCTYPE html>
<html lang="en">
@@ -6,12 +7,11 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<base href="/" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Geist+Mono:wght@300;400;500&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;1,9..40,300&display=swap" rel="stylesheet">
<DeepDrftFontLinks />
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.css"] rel="stylesheet" />
<link rel="stylesheet" href="@Assets["DeepDrftWeb.styles.css"]"/>
<link rel="stylesheet" href="@Assets["_content/DeepDrftShared.Client/styles/deepdrft-tokens.css"]" />
<link rel="stylesheet" href="styles/deepdrft-styles.css" />
<ImportMap />
<link rel="icon" type="image/ico" href="deepdrft-logo.ico" />
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+7 -94
View File
@@ -1,101 +1,14 @@
/* DeepDrft Global Styles - Simplified & Maintainable */
/* DeepDrft Global Styles - Simplified & Maintainable
Note: the palette / token layer (--deepdrft-*, --theme-*, --gradient-*, and the
.deepdrft-theme-dark override block) lives in DeepDrftShared.Client and is
served at _content/DeepDrftShared.Client/styles/deepdrft-tokens.css. Link that
file BEFORE this one in App.razor — every rule below depends on those tokens. */
/* =============================================================================
1. CSS VARIABLES - Theme System
1. PAGE BASELINE
============================================================================= */
/* Light theme - wireframe palette (navy / green / warm off-white) */
:root {
/* Wireframe tokens - source of truth */
--deepdrft-navy: #0D1B2A;
--deepdrft-navy-mid: #162437;
--deepdrft-green: #1A3C34;
--deepdrft-green-light: #2A5C4F;
--deepdrft-green-accent: #3D7A68;
--deepdrft-muted: #8A9BB0;
--deepdrft-white: #FAFAF8;
--deepdrft-border: rgba(13, 27, 42, 0.10);
--deepdrft-border-green: rgba(26, 60, 52, 0.20);
/* Wireframe font stack */
--deepdrft-font-display: "Cormorant Garamond", Georgia, serif;
--deepdrft-font-mono: "Geist Mono", monospace;
--deepdrft-font-body: "DM Sans", sans-serif;
/* Legacy palette aliases - mapped onto wireframe tokens.
Existing utility classes (.deepdrft-card-*, .deepdrft-chip-*, .deepdrft-text-*)
still reference these names; they will be retired in Phase 0.3/0.4 when
Home.razor is rewritten. Until then, alias to the closest wireframe colour. */
--deepdrft-primary: var(--deepdrft-navy);
--deepdrft-secondary: var(--deepdrft-green);
--deepdrft-tertiary: var(--deepdrft-green-accent);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces */
--deepdrft-surface: var(--deepdrft-white);
--deepdrft-background: var(--deepdrft-white);
--deepdrft-surface-alpha: rgba(250, 250, 248, 0.88);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
--theme-secondary: var(--deepdrft-secondary);
--theme-tertiary: var(--deepdrft-tertiary);
--theme-quaternary: var(--deepdrft-quaternary);
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-surface);
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: var(--deepdrft-white);
--gradient-accent: var(--deepdrft-navy);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-accent);
/* 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. */
}
/* Dark theme - wireframe palette (navy ground / green-accent / off-white).
Mirrors the light palette's vocabulary on a dark ground. Same alias structure
as :root so utility classes (.deepdrft-chip-*, .deepdrft-border-*, .deepdrft-text-*)
resolve coherently across themes. */
.deepdrft-theme-dark {
/* Legacy palette aliases - mapped onto wireframe tokens.
On dark, green-accent becomes the primary interactive colour and
off-white becomes the secondary emphasis. */
--deepdrft-primary: var(--deepdrft-green-accent);
--deepdrft-secondary: var(--deepdrft-white);
--deepdrft-tertiary: var(--deepdrft-green);
--deepdrft-quaternary: var(--deepdrft-muted);
--deepdrft-quinary: var(--deepdrft-green-light);
--deepdrft-senary: var(--deepdrft-navy-mid);
/* Surfaces - navy ground, navy-mid elevated */
--deepdrft-surface: var(--deepdrft-navy-mid);
--deepdrft-background: var(--deepdrft-navy);
--deepdrft-surface-alpha: rgba(13, 27, 42, 0.92);
/* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary);
--theme-secondary: var(--deepdrft-secondary);
--theme-tertiary: var(--deepdrft-tertiary);
--theme-quaternary: var(--deepdrft-quaternary);
--theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-white);
--theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */
--gradient-base: var(--deepdrft-navy);
--gradient-accent: var(--deepdrft-green-accent);
--gradient-warm: var(--deepdrft-green);
--gradient-light: var(--deepdrft-green-light);
}
/* Base page colours — use MudBlazor's theme-injected variables so they
switch automatically when IsDarkMode toggles. The --mud-palette-background
and --mud-palette-text-primary variables are injected by MudThemeProvider