From ed27e0e99732f5b2e7cba0ce5d9ec41bbc9fe702 Mon Sep 17 00:00:00 2001 From: Daniel Harvey Date: Sun, 17 May 2026 21:51:43 -0400 Subject: [PATCH] P0 W2 TC: rewrite dark palette as navy/green/off-white wireframe variant; fix TextSecondary WCAG comment ~6.1:1 --- DeepDrftWeb.Client/Layout/MainLayout.razor | 65 +++++++++---------- .../wwwroot/styles/deepdrft-styles.css | 41 +++++++----- 2 files changed, 54 insertions(+), 52 deletions(-) diff --git a/DeepDrftWeb.Client/Layout/MainLayout.razor b/DeepDrftWeb.Client/Layout/MainLayout.razor index 29df2ae..fa51e6e 100644 --- a/DeepDrftWeb.Client/Layout/MainLayout.razor +++ b/DeepDrftWeb.Client/Layout/MainLayout.razor @@ -163,42 +163,39 @@ // Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults }; - // Lowcountry Summer Nights - Dark Theme - // Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight + // Wireframe dark palette - navy ground / green-accent / off-white + // Mirrors the light palette's vocabulary on a dark ground; the coral/lowcountry + // identity has been retired. On dark, green-accent (#3D7A68) becomes the primary + // interactive colour and off-white (#FAFAF8) becomes the secondary emphasis. private readonly PaletteDark _darkPalette = new() { - Primary = "#D4654A", // Deep sunset coral - richer, distinct - Secondary = "#7B6D8D", // Twilight purple - muted - Tertiary = "#E9C46A", // Firefly gold - lamplight - Info = "#2196F3", // MudBlazor default blue (semantic) - Success = "#4CAF50", // MudBlazor default green (semantic) - Warning = "#FF9800", // MudBlazor default amber (semantic) - Error = "#F44336", // MudBlazor default red (semantic) - Black = "#0A0A0F", // Deep night black - White = "#F5F0E6", // Warm moonlight white - Surface = "rgba(123,109,141,0.12)", // Twilight-tinted surface - Background = "#0D0D12", // Deep twilight background - BackgroundGray = "#141420", // Slightly lighter night - AppbarText = "#F5F0E6", // Warm moonlight text - AppbarBackground = "rgba(13,13,18,0.95)", // Translucent night - DrawerBackground = "rgba(123,109,141,0.08)", // Subtle twilight tint - DrawerIcon = "#E0E0E0", // Light icons - DrawerText = "#E0E0E0", // Light drawer text - ActionDefault = "#BDBDBD", // Default action color - ActionDisabled = "#757575", // Disabled state - ActionDisabledBackground = "#1A1A2E", // Disabled background - TextPrimary = "#F5F0E6", // Warm white primary text - TextSecondary = "#B8B0C4", // Lavender gray secondary text - TextDisabled = "#757575", // Disabled text - GrayLight = "rgba(212,101,74,0.15)", // Coral tint light - GrayLighter = "rgba(212,101,74,0.08)", // Coral tint lighter - GrayDefault = "rgba(212,101,74,0.22)", // Coral tint default - GrayDark = "rgba(212,101,74,0.35)", // Coral tint dark - Divider = "rgba(212,101,74,0.18)", // Coral divider - LinesDefault = "rgba(212,101,74,0.18)", // Coral lines - TableLines = "rgba(212,101,74,0.18)", // Coral table lines - OverlayLight = "rgba(0,0,0,0.7)", // Dark overlay - OverlayDark = "rgba(255,255,255,0.08)", // Light overlay + Primary = "#3D7A68", // Green-accent - interactive colour on dark + PrimaryDarken = "#2A5C4F", // Green-light - hover/pressed + Secondary = "#FAFAF8", // Off-white - secondary emphasis + Tertiary = "#1A3C34", // Deep green - tertiary accent + Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground + Surface = "#162437", // Navy-mid - elevated cards/panels + AppbarBackground = "rgba(13,27,42,0.92)", // Semi-opaque navy + AppbarText = "#FAFAF8", + DrawerBackground = "#162437", // Navy-mid + DrawerText = "#FAFAF8", + DrawerIcon = "#8A9BB0", // Muted + // TextPrimary (#FAFAF8) on Background (#0D1B2A): contrast ratio ~16.5:1 - passes WCAG AA (≥4.5:1) + TextPrimary = "#FAFAF8", + // TextSecondary (#8A9BB0) on Background (#0D1B2A): contrast ratio ~6.1:1 - passes WCAG AA for normal text + TextSecondary = "#8A9BB0", + TextDisabled = "rgba(250,250,248,0.38)", + ActionDefault = "#8A9BB0", + ActionDisabled = "rgba(250,250,248,0.26)", + ActionDisabledBackground = "rgba(250,250,248,0.12)", + Divider = "rgba(250,250,248,0.10)", + DividerLight = "rgba(250,250,248,0.06)", + TableLines = "rgba(250,250,248,0.10)", + LinesDefault = "rgba(250,250,248,0.10)", + LinesInputs = "rgba(250,250,248,0.30)", + OverlayLight = "rgba(13,27,42,0.5)", + OverlayDark = "rgba(0,0,0,0.7)", + // Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults }; // Theme wrapper class for CSS targeting diff --git a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css index 1d74261..a6dc308 100644 --- a/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css +++ b/DeepDrftWeb/wwwroot/styles/deepdrft-styles.css @@ -59,20 +59,25 @@ consumers and are scheduled for retirement in Phase 0.3/0.4. */ } -/* Dark Theme (Lowcountry Summer Nights) */ +/* 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 { - /* Core Palette */ - --deepdrft-primary: #D4654A; - --deepdrft-secondary: #7B6D8D; - --deepdrft-tertiary: #E9C46A; - --deepdrft-quaternary: #8AA39B; - --deepdrft-quinary: #9EB8C4; - --deepdrft-senary: #D4845A; + /* 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 */ - --deepdrft-surface: rgba(123,109,141,0.12); - --deepdrft-background: #0D0D12; - --deepdrft-surface-alpha: rgba(13, 13, 18, 0.95); + /* 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); @@ -81,14 +86,14 @@ --theme-quaternary: var(--deepdrft-quaternary); --theme-quinary: var(--deepdrft-quinary); --theme-senary: var(--deepdrft-senary); - --theme-surface: #F5F0E6; - --theme-surface-soft: #B8B0C4; + --theme-surface: var(--deepdrft-white); + --theme-surface-soft: var(--deepdrft-muted); /* Gradient colors */ - --gradient-base: #0D0D12; - --gradient-accent: #7B6D8D; - --gradient-warm: #D4654A; - --gradient-light: #E9C46A; + --gradient-base: var(--deepdrft-navy); + --gradient-accent: var(--deepdrft-green-accent); + --gradient-warm: var(--deepdrft-green); + --gradient-light: var(--deepdrft-green-light); } /* =============================================================================