daniel-c-harvey
4c14c67c33
Queue, visualizer control deck, and privacy overlays now bind a theme-aware --deepdrft-panel-* family (surface/text/text-muted/border/row-hover): light translucent glass with dark text in light theme, unchanged dark-glass charcoal in dark. Tokens re-declared in body.deepdrft-theme-dark for the body-portaled overlays.
221 lines
12 KiB
CSS
221 lines
12 KiB
CSS
/* DeepDrft design tokens — shared palette layer.
|
|
Consumed by both DeepDrftPublic (public site, light + dark) and the CMS host
|
|
(light only). Page-specific styling lives in the consuming host's own
|
|
stylesheet (e.g. DeepDrftPublic/wwwroot/styles/deepdrft-styles.css). */
|
|
|
|
/* Light theme - wireframe palette (navy / green / warm off-white) */
|
|
:root {
|
|
/* Wireframe tokens - source of truth */
|
|
--deepdrft-navy: #112338;
|
|
--deepdrft-navy-mid: #17283f;
|
|
--deepdrft-green: #1A3C34;
|
|
--deepdrft-green-light: #2A5C4F;
|
|
--deepdrft-green-accent: #3D7A68;
|
|
--deepdrft-green-interactive: #429d6a;
|
|
--deepdrft-muted: #8A9BB0;
|
|
--deepdrft-soft: #e3e7ec;
|
|
--deepdrft-white: #FAFAF8;
|
|
--deepdrft-border: rgba(13, 27, 42, 0.10);
|
|
--deepdrft-border-green: rgba(26, 60, 52, 0.20);
|
|
/* Thin light-on-dark border, NowPlayingCard spirit (Phase 15 §5). One token instead of scattering
|
|
the rgba(250,250,248,0.12) literal NowPlayingCard uses inline. */
|
|
--deepdrft-border-light: rgba(250, 250, 248, 0.12);
|
|
/* Modal scrim base colour (RGB triple for use in rgba()) — panel dark-ground (#0D1B2A).
|
|
Deliberately NOT --deepdrft-navy (#112338); tokenised here so the scrim rule in
|
|
deepdrft-styles.css has no hardcoded literals. Change here once. */
|
|
--deepdrft-scrim-rgb: 13, 27, 42;
|
|
/* Modal scrim opacity — the SINGLE point of truth for the visualizer-controls overlay tint
|
|
(Phase 15 §4/§10.5). Mild so the panel reads as modal without a blackout. Change here once. */
|
|
--deepdrft-modal-scrim-alpha: 0.15;
|
|
/* Panel ground — muted, desaturated charcoal beneath the controls panel.
|
|
Tunable: increase blue channel (e.g. #1e2235) to recover warmth, lower (e.g. #191b20) to go darker.
|
|
Source token; consumed by the theme-aware --deepdrft-panel-surface dark value below. */
|
|
--deepdrft-panel-ground: #1a1c22;
|
|
|
|
/* Glass-panel family — the bespoke overlay panels (queue / visualizer control deck / privacy).
|
|
Light values here make these panels a light translucent glass with dark text so they read
|
|
coherently against the light page; the .deepdrft-theme-dark block below reproduces today's
|
|
dark-glass charcoal exactly so dark mode is visually unchanged. Surface keeps the glassmorphic
|
|
translucency (paired with backdrop-blur in the consuming rules).
|
|
Light surface: near-page-surface white at 82% so the backdrop blur still shows through;
|
|
text/border are navy-based for legibility on the light glass. */
|
|
--deepdrft-panel-surface: rgba(250, 250, 248, 0.82);
|
|
--deepdrft-panel-text: var(--deepdrft-navy);
|
|
--deepdrft-panel-text-muted: var(--deepdrft-muted);
|
|
--deepdrft-panel-border: var(--deepdrft-border);
|
|
/* Row/hover wash on the panel surface — a navy tint on light, a white tint on dark (below). */
|
|
--deepdrft-panel-row-hover: color-mix(in srgb, var(--deepdrft-navy) 8%, transparent);
|
|
|
|
/* 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);
|
|
|
|
/* Theme-aware page-surface family (Phase 18). The "neutral page surface" concept:
|
|
sections that were hardcoded to --deepdrft-white because the site was light-only.
|
|
Light values reproduce today's look exactly; the .deepdrft-theme-dark block below
|
|
inverts them onto the navy ground so neutral sections dissolve into one dark field. */
|
|
--deepdrft-page-surface: var(--deepdrft-white);
|
|
--deepdrft-page-text: var(--deepdrft-navy);
|
|
--deepdrft-page-text-muted: var(--deepdrft-muted);
|
|
|
|
/* Play-chip family (Phase 18). PlayStateIcon's chip is shared across release heroes,
|
|
Cut track rows, and the player bar. Light keeps the current soft-grey chip + glyph;
|
|
dark turns the chip moss-green with a navy glyph. The -soft variant is the player-bar
|
|
override (same green, much less opaque). */
|
|
--deepdrft-play-chip: var(--deepdrft-soft);
|
|
--deepdrft-play-glyph: var(--deepdrft-navy);
|
|
--deepdrft-play-chip-soft: var(--deepdrft-soft);
|
|
|
|
/* Popover surface (Phase 18). Default MudBlazor popovers (selects/menus/tooltips/share
|
|
body) bind this. Light uses a very subtle navy wash (4%) — near the page background but
|
|
just perceptibly off-white so the popover reads as an elevated surface. Dark uses a
|
|
bluer navy (colour-mix of navy-mid + green-accent at 20%), defined once in
|
|
--deepdrft-popover-surface-dark below and referenced by both the .deepdrft-theme-dark
|
|
wrapper block and the body.deepdrft-theme-dark block so portaled popover content (which
|
|
portals to <body>, outside the wrapper div) is also reached. The bespoke glass panels
|
|
(visualizer/queue/privacy) do NOT bind this — they have their own theme-aware
|
|
--deepdrft-panel-* family (dark glass in dark theme, light glass in light). */
|
|
--deepdrft-popover-surface-dark: color-mix(in srgb, var(--deepdrft-navy-mid) 80%, var(--deepdrft-green-accent) 20%);
|
|
--deepdrft-popover-surface: color-mix(in srgb, var(--deepdrft-navy) 4%, var(--deepdrft-white));
|
|
|
|
/* Fixed-nav height — single source of truth shared by the frosted-glass nav
|
|
(DeepDrftMenu.razor.css pins .dd-nav to this) and the main-content clearance
|
|
(.dd-main-content padding-top in deepdrft-styles.css). The nav is position:fixed
|
|
so content scrolls under its backdrop blur; this keeps the clearance in lockstep
|
|
with the bar so content never overlaps. Mobile (<600px) override below. */
|
|
--deepdrft-nav-height: 88px;
|
|
|
|
/* 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. */
|
|
}
|
|
|
|
/* Mobile fixed-nav height — matches the <600px breakpoint in DeepDrftMenu.razor.css
|
|
(tighter horizontal padding + smaller bar). Cascades to .dd-nav and .dd-main-content. */
|
|
@media (max-width: 599px) {
|
|
:root {
|
|
--deepdrft-nav-height: 72px;
|
|
}
|
|
}
|
|
|
|
/* 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);
|
|
|
|
/* Theme-aware page-surface family (Phase 18) — inverted onto the true page ground.
|
|
Binds --mud-palette-background (#0D1B2A) so neutral sections (Home hero-left,
|
|
medium grid, footer, About light sections) dissolve into the site background as
|
|
one continuous dark field rather than reading as raised panels (#112338 navy
|
|
is card-elevation, not the page ground). */
|
|
--deepdrft-page-surface: var(--mud-palette-background);
|
|
--deepdrft-page-text: var(--deepdrft-white);
|
|
/* Lift muted text toward white so eyebrows/sub-text stay legible on the dark ground. */
|
|
--deepdrft-page-text-muted: color-mix(in srgb, var(--deepdrft-muted) 70%, var(--deepdrft-white));
|
|
|
|
/* Play-chip family (Phase 18) — moss-green chip, navy glyph (green-on-green on the
|
|
player bar; navy-on-green on solid chips). The -soft variant is the player-bar
|
|
override: same green, much less opaque (translucent wash over the navy dock). */
|
|
--deepdrft-play-chip: var(--deepdrft-green-accent);
|
|
--deepdrft-play-glyph: var(--deepdrft-navy);
|
|
--deepdrft-play-chip-soft: color-mix(in srgb, var(--deepdrft-green-accent) 30%, transparent);
|
|
|
|
/* Popover surface (Phase 18) — within .deepdrft-theme-dark wrapper this value applies to
|
|
non-portaled elements only (drawers, inline menus). Portaled MudBlazor popovers live at
|
|
<body> level; the body.deepdrft-theme-dark block below uses the same source token. */
|
|
--deepdrft-popover-surface: var(--deepdrft-popover-surface-dark);
|
|
|
|
/* Glass-panel family (dark) — reproduces today's dark-glass chrome EXACTLY. Surface is the
|
|
opaque charcoal ground the panels used directly before tokenisation; text is off-white;
|
|
border is the thin light-on-dark hairline (NowPlayingCard spirit); row hover is the prior
|
|
white 6% wash. Dark mode must look unchanged. */
|
|
--deepdrft-panel-surface: var(--deepdrft-panel-ground);
|
|
--deepdrft-panel-text: var(--deepdrft-white);
|
|
--deepdrft-panel-text-muted: color-mix(in srgb, var(--deepdrft-white) 60%, transparent);
|
|
--deepdrft-panel-border: var(--deepdrft-border-light);
|
|
--deepdrft-panel-row-hover: color-mix(in srgb, var(--deepdrft-white) 6%, transparent);
|
|
}
|
|
|
|
/* Portal-scope dark popover surface. MudBlazor popovers (selects, menus, share body) portal
|
|
to <body>, placing them outside the .deepdrft-theme-dark wrapper div. MainLayout.razor syncs
|
|
deepdrft-theme-dark onto <body> via JS after each render, so this selector reaches portaled
|
|
content. Resolved from --deepdrft-popover-surface-dark (defined in :root above) — bluer navy
|
|
(navy-mid + 20% green-accent tint) rather than the pure charcoal #162437. */
|
|
body.deepdrft-theme-dark {
|
|
--deepdrft-popover-surface: var(--deepdrft-popover-surface-dark);
|
|
|
|
/* The bespoke glass panels (queue / visualizer / privacy) are MudOverlay panels that portal to
|
|
<body>, outside the .deepdrft-theme-dark wrapper div — same portal scope as popovers. Re-declare
|
|
the dark glass-panel family here so the panels resolve the dark (charcoal) values; without this
|
|
they would fall through to the light :root values while the page is in dark mode. */
|
|
--deepdrft-panel-surface: var(--deepdrft-panel-ground);
|
|
--deepdrft-panel-text: var(--deepdrft-white);
|
|
--deepdrft-panel-text-muted: color-mix(in srgb, var(--deepdrft-white) 60%, transparent);
|
|
--deepdrft-panel-border: var(--deepdrft-border-light);
|
|
--deepdrft-panel-row-hover: color-mix(in srgb, var(--deepdrft-white) 6%, transparent);
|
|
}
|