daniel-c-harvey
03fdcda054
Re-point neutral page surfaces, play-chip, and default popover from constant brand tokens to theme-aware aliases defined twice in deepdrft-tokens.css. Decorative navy/green sections and bespoke dark-glass panels untouched. Appbar-navy symptom deferred (palette C#, out of CSS scope).
155 lines
8.0 KiB
CSS
155 lines
8.0 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. */
|
|
--deepdrft-panel-ground: #1a1c22;
|
|
|
|
/* 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 is a soft desaturated-navy wash so they read as a calm light
|
|
surface; dark uses the existing panel-ground charcoal. Bespoke dark-glass panels
|
|
(visualizer/queue/privacy) do NOT bind this — they keep --deepdrft-panel-ground directly. */
|
|
--deepdrft-popover-surface: color-mix(in srgb, var(--deepdrft-navy) 8%, var(--deepdrft-white));
|
|
|
|
/* 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);
|
|
|
|
/* Theme-aware page-surface family (Phase 18) — inverted onto the navy ground.
|
|
OQ#1 resolved: GROUND (--deepdrft-navy), 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. */
|
|
--deepdrft-page-surface: var(--deepdrft-navy);
|
|
--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. 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). Symptom #1 is a LIGHT-mode complaint and the acceptance bar
|
|
requires dark popovers to stay unchanged, so dark binds the exact current MudBlazor dark
|
|
Surface (#162437, DeepDrftPalettes.Dark.Surface) — NOT §3's suggested panel-ground (#1a1c22),
|
|
which would have shifted dark popovers a shade. Pixel-identical dark; only light is retoned. */
|
|
--deepdrft-popover-surface: #162437;
|
|
}
|