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

Merge p0-w1-palette-fonts: wireframe palette + font foundation

Browse Source
This commit is contained in:
Daniel Harvey
2026-05-17 21:29:00 -04:00
parent 0aee8e58a3 144f7c7527
commit 583ff26fd7
3 changed files with 98 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
DeepDrftWeb.Client/Layout/MainLayout.razor
+48 -31
View File
@@ -71,31 +71,48 @@
}, },
H1 = new H1Typography() H1 = new H1Typography()
{ {
FontFamily = new[] {"Bodoni Moda", "serif"} FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
}, },
H2 = new H2Typography() H2 = new H2Typography()
{ {
FontFamily = new[] {"Cormorant", "serif"} FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
}, },
H3 = new H3Typography() H3 = new H3Typography()
{ {
FontFamily = new[] {"Cormorant", "serif"} FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
}, },
H4 = new H4Typography() H4 = new H4Typography()
{ {
FontFamily = new[] {"Cormorant", "serif"} FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
}, },
// Extended to H5/H6 beyond spec — keeps heading hierarchy consistent in Cormorant Garamond
H5 = new H5Typography() H5 = new H5Typography()
{ {
FontFamily = new[] {"Cormorant", "serif"} FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
}, },
H6 = new H6Typography() H6 = new H6Typography()
{ {
FontFamily = new[] {"Cormorant", "serif"} FontFamily = new[] {"Cormorant Garamond", "Georgia", "serif"}
},
Subtitle1 = new Subtitle1Typography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
},
Body1 = new Body1Typography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
Body2 = new Body2Typography()
{
FontFamily = new[] {"DM Sans", "sans-serif"}
},
Caption = new CaptionTypography()
{
FontFamily = new[] {"Geist Mono", "monospace"}
}, },
Button = new ButtonTypography() Button = new ButtonTypography()
{ {
FontFamily = new[] {"DM Sans", "sans-serif"} FontFamily = new[] {"Geist Mono", "monospace"}
} }
} }
} }
@@ -118,32 +135,32 @@
StateHasChanged(); StateHasChanged();
} }
// Charleston in the Day - Light Theme // Wireframe light palette - navy / green / warm off-white
// Inspired by Charleston's historic architecture: wrought iron, bronze, Atlantic coast
private readonly PaletteLight _lightPalette = new() private readonly PaletteLight _lightPalette = new()
{ {
Primary = "#1A1A1A", // Wrought iron black Primary = "#0D1B2A", // Navy - text, buttons
Secondary = "#B8623D", // Burnished copper - warm orange bronze PrimaryDarken = "#162437", // Navy-mid - hover, elevated surfaces
Tertiary = "#2A7B8C", // Atlantic turquoise Secondary = "#1A3C34", // Deep green - italic emphasis
Info = "#2196F3", // MudBlazor default blue (semantic) Tertiary = "#3D7A68", // Green-accent - interactive hovers/active/icons
Success = "#4CAF50", // MudBlazor default green (semantic) Background = "#FAFAF8", // Warm off-white
Warning = "#FF9800", // MudBlazor default amber (semantic) BackgroundGray = "#F0F2F0", // Slight warm gray for contrast
Error = "#F44336", // MudBlazor default red (semantic) Surface = "#FAFAF8",
Black = "#1A1A1A", // Wrought iron black AppbarBackground = "rgba(250,250,248,0.88)",
White = "#FDFBF7", // Cream white (stucco) AppbarText = "#0D1B2A",
Surface = "#FDFBF7", // Cream stucco surface TextPrimary = "#0D1B2A",
Background = "#F5F2EC", // Warm linen background TextSecondary = "#8A9BB0", // Muted - secondary text, nav at rest
AppbarText = "#FDFBF7", // Cream text on dark appbar TextDisabled = "rgba(13,27,42,0.38)",
AppbarBackground = "#1A1A1A", // Solid wrought iron appbar ActionDefault = "#8A9BB0",
DrawerBackground = "#F5F2EC", // Linen drawer ActionDisabled = "rgba(13,27,42,0.26)",
TextPrimary = "#1A1A1A", // Wrought iron text ActionDisabledBackground = "rgba(13,27,42,0.12)",
TextSecondary = "#4A4A4A", // Softer iron text Divider = "rgba(13,27,42,0.10)",
GrayLight = "rgba(26,26,26,0.08)", // Light iron tint DividerLight = "rgba(13,27,42,0.06)",
GrayLighter = "rgba(26,26,26,0.04)", // Very light iron tint TableLines = "rgba(13,27,42,0.10)",
GrayDefault = "rgba(26,26,26,0.15)", // Medium iron tint LinesDefault = "rgba(13,27,42,0.10)",
GrayDark = "rgba(26,26,26,0.25)", // Darker iron tint LinesInputs = "rgba(13,27,42,0.30)",
Divider = "rgba(26,26,26,0.12)", // Subtle divider lines OverlayLight = "rgba(250,250,248,0.5)",
TableLines = "rgba(26,26,26,0.12)", // Table borders OverlayDark = "rgba(13,27,42,0.5)",
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
}; };
// Lowcountry Summer Nights - Dark Theme // Lowcountry Summer Nights - Dark Theme
DeepDrftWeb/Components/App.razor
+1 -3
View File
@@ -8,9 +8,7 @@
<base href="/" /> <base href="/" />
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600;6..96,700&display=swap" rel="stylesheet"> <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">
<link href="https://fonts.googleapis.com/css2?family=Cormorant:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" /> <link href="_@Assets["content/MudBlazor.ThemeManager/MudBlazorThemeManager.css"]" rel="stylesheet" />
<link href=@Assets["_content/MudBlazor/MudBlazor.min.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["DeepDrftWeb.styles.css"]"/>
DeepDrftWeb/wwwroot/styles/deepdrft-styles.css
+49 -28
View File
@@ -4,20 +4,39 @@
1. CSS VARIABLES - Theme System 1. CSS VARIABLES - Theme System
============================================================================= */ ============================================================================= */
/* Light Theme (Charleston in the Day) */ /* Light theme - wireframe palette (navy / green / warm off-white) */
:root { :root {
/* Core Palette */ /* Wireframe tokens - source of truth */
--deepdrft-primary: #1A1A1A; --deepdrft-navy: #0D1B2A;
--deepdrft-secondary: #B8623D; --deepdrft-navy-mid: #162437;
--deepdrft-tertiary: #2A7B8C; --deepdrft-green: #1A3C34;
--deepdrft-quaternary: #D4A556; --deepdrft-green-light: #2A5C4F;
--deepdrft-quinary: #3D5A47; --deepdrft-green-accent: #3D7A68;
--deepdrft-senary: #6B4C6A; --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 */ /* Surfaces */
--deepdrft-surface: #FDFBF7; --deepdrft-surface: var(--deepdrft-white);
--deepdrft-background: #F5F2EC; --deepdrft-background: var(--deepdrft-white);
--deepdrft-surface-alpha: rgba(253, 251, 247, 0.9); --deepdrft-surface-alpha: rgba(250, 250, 248, 0.88);
/* Theme-aware aliases */ /* Theme-aware aliases */
--theme-primary: var(--deepdrft-primary); --theme-primary: var(--deepdrft-primary);
@@ -27,18 +46,17 @@
--theme-quinary: var(--deepdrft-quinary); --theme-quinary: var(--deepdrft-quinary);
--theme-senary: var(--deepdrft-senary); --theme-senary: var(--deepdrft-senary);
--theme-surface: var(--deepdrft-surface); --theme-surface: var(--deepdrft-surface);
--theme-surface-soft: #4A4A4A; --theme-surface-soft: var(--deepdrft-muted);
/* Gradient colors */ /* Gradient colors */
--gradient-base: #FDFBF7; --gradient-base: var(--deepdrft-white);
--gradient-accent: #1A1A1A; --gradient-accent: var(--deepdrft-navy);
--gradient-warm: #B8623D; --gradient-warm: var(--deepdrft-green);
--gradient-light: #D4A556; --gradient-light: var(--deepdrft-green-accent);
/* Fonts */ /* Legacy font aliases retired in Phase 0.1 — all consumers now use --deepdrft-font-*.
--font-hero: "Bodoni Moda", serif; Palette aliases (--deepdrft-primary, --theme-*, etc.) remain; they still have
--font-headers: "Cormorant", serif; consumers and are scheduled for retirement in Phase 0.3/0.4. */
--font-body: "DM Sans", sans-serif;
} }
/* Dark Theme (Lowcountry Summer Nights) */ /* Dark Theme (Lowcountry Summer Nights) */
@@ -121,7 +139,7 @@
/* Hero text */ /* Hero text */
h1, .deepdrft-text-hero { h1, .deepdrft-text-hero {
font-family: var(--font-hero); font-family: var(--deepdrft-font-display);
font-weight: bold; font-weight: bold;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5); text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
} }
@@ -129,7 +147,7 @@ h1, .deepdrft-text-hero {
/* Headers */ /* Headers */
h2, h3, h4, h5, h6, h2, h3, h4, h5, h6,
.deepdrft-text-subtitle { .deepdrft-text-subtitle {
font-family: var(--font-headers); font-family: var(--deepdrft-font-display);
} }
.deepdrft-text-subtitle { .deepdrft-text-subtitle {
@@ -141,7 +159,7 @@ h2, h3, h4, h5, h6,
body, p, span, div, body, p, span, div,
.deepdrft-text-description, .deepdrft-text-description,
.deepdrft-text-readable { .deepdrft-text-readable {
font-family: var(--font-body); font-family: var(--deepdrft-font-body);
} }
.deepdrft-text-description { .deepdrft-text-description {
@@ -153,16 +171,19 @@ body, p, span, div,
.deepdrft-text-readable { line-height: 1.6; } .deepdrft-text-readable { line-height: 1.6; }
/* MudBlazor font overrides */ /* MudBlazor font overrides */
.mud-typography-h1 { font-family: var(--font-hero) !important; } .mud-typography-h1,
.mud-typography-h2, .mud-typography-h3, .mud-typography-h4, .mud-typography-h2, .mud-typography-h3, .mud-typography-h4,
.mud-typography-h5, .mud-typography-h6, .mud-typography-h5, .mud-typography-h6,
.mud-button-text, .mud-navlink-text, .mud-appbar-content { .mud-navlink-text, .mud-appbar-content {
font-family: var(--font-headers) !important; font-family: var(--deepdrft-font-display) !important;
}
.mud-button-text,
.mud-typography-caption, .mud-typography-overline {
font-family: var(--deepdrft-font-mono) !important;
} }
.mud-typography-body1, .mud-typography-body2, .mud-typography-body1, .mud-typography-body2,
.mud-typography-caption, .mud-typography-overline,
.mud-input-text, .mud-select-text, .mud-form-label { .mud-input-text, .mud-select-text, .mud-form-label {
font-family: var(--font-body) !important; font-family: var(--deepdrft-font-body) !important;
} }
/* ============================================================================= /* =============================================================================