Merge p0-w2-tc-dark: dark palette rewrite as navy/green/off-white mirror
This commit is contained in:
Daniel Harvey
@@ -174,42 +174,39 @@
|
|||||||
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
|
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
|
||||||
};
|
};
|
||||||
|
|
||||||
// Lowcountry Summer Nights - Dark Theme
|
// Wireframe dark palette - navy ground / green-accent / off-white
|
||||||
// Inspired by warm sunsets over marshes, fireflies, Spanish moss, lamplight
|
// 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()
|
private readonly PaletteDark _darkPalette = new()
|
||||||
{
|
{
|
||||||
Primary = "#D4654A", // Deep sunset coral - richer, distinct
|
Primary = "#3D7A68", // Green-accent - interactive colour on dark
|
||||||
Secondary = "#7B6D8D", // Twilight purple - muted
|
PrimaryDarken = "#2A5C4F", // Green-light - hover/pressed
|
||||||
Tertiary = "#E9C46A", // Firefly gold - lamplight
|
Secondary = "#FAFAF8", // Off-white - secondary emphasis
|
||||||
Info = "#2196F3", // MudBlazor default blue (semantic)
|
Tertiary = "#1A3C34", // Deep green - tertiary accent
|
||||||
Success = "#4CAF50", // MudBlazor default green (semantic)
|
Background = "#0D1B2A", // Navy - the light palette's primary as the dark ground
|
||||||
Warning = "#FF9800", // MudBlazor default amber (semantic)
|
Surface = "#162437", // Navy-mid - elevated cards/panels
|
||||||
Error = "#F44336", // MudBlazor default red (semantic)
|
AppbarBackground = "rgba(13,27,42,0.92)", // Semi-opaque navy
|
||||||
Black = "#0A0A0F", // Deep night black
|
AppbarText = "#FAFAF8",
|
||||||
White = "#F5F0E6", // Warm moonlight white
|
DrawerBackground = "#162437", // Navy-mid
|
||||||
Surface = "rgba(123,109,141,0.12)", // Twilight-tinted surface
|
DrawerText = "#FAFAF8",
|
||||||
Background = "#0D0D12", // Deep twilight background
|
DrawerIcon = "#8A9BB0", // Muted
|
||||||
BackgroundGray = "#141420", // Slightly lighter night
|
// TextPrimary (#FAFAF8) on Background (#0D1B2A): contrast ratio ~16.5:1 - passes WCAG AA (≥4.5:1)
|
||||||
AppbarText = "#F5F0E6", // Warm moonlight text
|
TextPrimary = "#FAFAF8",
|
||||||
AppbarBackground = "rgba(13,13,18,0.95)", // Translucent night
|
// TextSecondary (#8A9BB0) on Background (#0D1B2A): contrast ratio ~6.1:1 - passes WCAG AA for normal text
|
||||||
DrawerBackground = "rgba(123,109,141,0.08)", // Subtle twilight tint
|
TextSecondary = "#8A9BB0",
|
||||||
DrawerIcon = "#E0E0E0", // Light icons
|
TextDisabled = "rgba(250,250,248,0.38)",
|
||||||
DrawerText = "#E0E0E0", // Light drawer text
|
ActionDefault = "#8A9BB0",
|
||||||
ActionDefault = "#BDBDBD", // Default action color
|
ActionDisabled = "rgba(250,250,248,0.26)",
|
||||||
ActionDisabled = "#757575", // Disabled state
|
ActionDisabledBackground = "rgba(250,250,248,0.12)",
|
||||||
ActionDisabledBackground = "#1A1A2E", // Disabled background
|
Divider = "rgba(250,250,248,0.10)",
|
||||||
TextPrimary = "#F5F0E6", // Warm white primary text
|
DividerLight = "rgba(250,250,248,0.06)",
|
||||||
TextSecondary = "#B8B0C4", // Lavender gray secondary text
|
TableLines = "rgba(250,250,248,0.10)",
|
||||||
TextDisabled = "#757575", // Disabled text
|
LinesDefault = "rgba(250,250,248,0.10)",
|
||||||
GrayLight = "rgba(212,101,74,0.15)", // Coral tint light
|
LinesInputs = "rgba(250,250,248,0.30)",
|
||||||
GrayLighter = "rgba(212,101,74,0.08)", // Coral tint lighter
|
OverlayLight = "rgba(13,27,42,0.5)",
|
||||||
GrayDefault = "rgba(212,101,74,0.22)", // Coral tint default
|
OverlayDark = "rgba(0,0,0,0.7)",
|
||||||
GrayDark = "rgba(212,101,74,0.35)", // Coral tint dark
|
// Semantic (Info/Success/Warning/Error) intentionally left at MudBlazor defaults
|
||||||
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
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Theme wrapper class for CSS targeting
|
// Theme wrapper class for CSS targeting
|
||||||
|
|||||||
@@ -59,20 +59,25 @@
|
|||||||
consumers and are scheduled for retirement in Phase 0.3/0.4. */
|
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 {
|
.deepdrft-theme-dark {
|
||||||
/* Core Palette */
|
/* Legacy palette aliases - mapped onto wireframe tokens.
|
||||||
--deepdrft-primary: #D4654A;
|
On dark, green-accent becomes the primary interactive colour and
|
||||||
--deepdrft-secondary: #7B6D8D;
|
off-white becomes the secondary emphasis. */
|
||||||
--deepdrft-tertiary: #E9C46A;
|
--deepdrft-primary: var(--deepdrft-green-accent);
|
||||||
--deepdrft-quaternary: #8AA39B;
|
--deepdrft-secondary: var(--deepdrft-white);
|
||||||
--deepdrft-quinary: #9EB8C4;
|
--deepdrft-tertiary: var(--deepdrft-green);
|
||||||
--deepdrft-senary: #D4845A;
|
--deepdrft-quaternary: var(--deepdrft-muted);
|
||||||
|
--deepdrft-quinary: var(--deepdrft-green-light);
|
||||||
|
--deepdrft-senary: var(--deepdrft-navy-mid);
|
||||||
|
|
||||||
/* Surfaces */
|
/* Surfaces - navy ground, navy-mid elevated */
|
||||||
--deepdrft-surface: rgba(123,109,141,0.12);
|
--deepdrft-surface: var(--deepdrft-navy-mid);
|
||||||
--deepdrft-background: #0D0D12;
|
--deepdrft-background: var(--deepdrft-navy);
|
||||||
--deepdrft-surface-alpha: rgba(13, 13, 18, 0.95);
|
--deepdrft-surface-alpha: rgba(13, 27, 42, 0.92);
|
||||||
|
|
||||||
/* Theme-aware aliases */
|
/* Theme-aware aliases */
|
||||||
--theme-primary: var(--deepdrft-primary);
|
--theme-primary: var(--deepdrft-primary);
|
||||||
@@ -81,14 +86,14 @@
|
|||||||
--theme-quaternary: var(--deepdrft-quaternary);
|
--theme-quaternary: var(--deepdrft-quaternary);
|
||||||
--theme-quinary: var(--deepdrft-quinary);
|
--theme-quinary: var(--deepdrft-quinary);
|
||||||
--theme-senary: var(--deepdrft-senary);
|
--theme-senary: var(--deepdrft-senary);
|
||||||
--theme-surface: #F5F0E6;
|
--theme-surface: var(--deepdrft-white);
|
||||||
--theme-surface-soft: #B8B0C4;
|
--theme-surface-soft: var(--deepdrft-muted);
|
||||||
|
|
||||||
/* Gradient colors */
|
/* Gradient colors */
|
||||||
--gradient-base: #0D0D12;
|
--gradient-base: var(--deepdrft-navy);
|
||||||
--gradient-accent: #7B6D8D;
|
--gradient-accent: var(--deepdrft-green-accent);
|
||||||
--gradient-warm: #D4654A;
|
--gradient-warm: var(--deepdrft-green);
|
||||||
--gradient-light: #E9C46A;
|
--gradient-light: var(--deepdrft-green-light);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =============================================================================
|
/* =============================================================================
|
||||||
|
|||||||
Reference in New Issue
Block a user