/* ═══════════════════════════════════════════════════════════════ ThemeTokensNew.css — Bronze Art Design Token System ═══════════════════════════════════════════════════════════════ Single source of truth for --ba-* CSS custom properties. All values are flat — no color-mix(), no derivation. MudBlazor palette is controlled via C# PaletteLight / PaletteDark objects in MainLayout.razor.cs — NOT via CSS overrides here. To re-theme: change :root values + update PaletteLight in C#. Dark theme: :root[data-theme="dark"] redeclares EVERY token + PaletteDark in C#. ═══════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════ LIGHT THEME (default) ═══════════════════════════════════════════════════════════════ */ :root { /* ── §1 Brand ────────────────────────────────────────────── */ --ba-brand-accent: #D7B262; /* Decorative — borders, rules, badges. Never interactive. */ --ba-brand-primary: #67003C; /* Interactive — buttons, hover, active, focus, CTA */ /* ── §2 Text ─────────────────────────────────────────────── */ --ba-text-body: #424242; /* Primary body text */ --ba-text-muted: #757575; /* Nav icons, description text, secondary UI */ --ba-text-secondary: #999999; /* Labels, subtitles, header cells */ --ba-text-tertiary: #bbbbbb; /* Placeholders, hints, swatch labels, muted values */ --ba-text-label-warm: #b0a89e; /* DiscountInputBox extras labels */ --ba-on-primary: white; /* Foreground on filled primary surfaces */ --ba-accent-dark: #8E793E; /* Darkened accent — notes labels, secondary decorative text */ /* ── §3 Surfaces ─────────────────────────────────────────── */ --ba-surface-page: #e6e2da; /* App background (warm greige) */ --ba-surface-card: #f5f2ec; /* Card / panel surface (warm cream) */ --ba-surface-elevated: #f5f2ec; /* Elevated surface (same as card in light) */ --ba-surface-control: #eeebe4; /* Input surface — distinct from card, reads as interactive */ --ba-header-bg: #e6e1d4; /* BronzeDialog title bar (accent-tinted) */ --ba-surface-canvas: transparent; /* Light canvas for images/SVGs — no effect in light theme */ --ba-surface-photo: white; /* Product photo background — white in both themes */ /* ── §4 Error ────────────────────────────────────────────── */ --ba-error-base: #C62828; /* Error / destructive states */ --ba-error-bg: rgba(198, 40, 40, 0.06); /* Error background wash */ --ba-error-border: rgba(198, 40, 40, 0.20); /* Error border */ /* ── §5 Borders ──────────────────────────────────────────── */ /* Accent-based (gold) */ --ba-border-accent: rgba(215, 178, 98, 0.25); /* Header borders, decorative rules */ --ba-border-accent-mid: rgba(215, 178, 98, 0.35); /* Icon badge borders, scrollbar active */ /* Neutral (black-based, flip to white-based in dark) */ --ba-border-neutral-4: rgba(0, 0, 0, 0.06); /* Ultra-light separator */ --ba-border-neutral-5: rgba(0, 0, 0, 0.08); /* Panel border, close hover */ --ba-border-default: rgba(0, 0, 0, 0.10); /* Cards, panels, dividers */ --ba-border-strong: rgba(0, 0, 0, 0.14); /* Table borders, visible separators */ --ba-border-input: rgba(0, 0, 0, 0.18); /* Form inputs, secondary button outlines */ --ba-border-primary: rgba(103, 0, 60, 0.15); /* Primary accent border */ /* ── §6 Accent tints — decorative hover/fill overlays ──── */ --ba-accent-tint-4: rgba(215, 178, 98, 0.04); --ba-accent-tint-6: rgba(215, 178, 98, 0.06); --ba-accent-tint-8: rgba(215, 178, 98, 0.08); --ba-accent-tint-10: rgba(215, 178, 98, 0.14); --ba-accent-tint-12: rgba(215, 178, 98, 0.16); --ba-accent-tint-15: rgba(215, 178, 98, 0.15); --ba-accent-tint-25: rgba(215, 178, 98, 0.25); --ba-accent-tint-30: rgba(215, 178, 98, 0.30); --ba-row-hover: rgba(215, 178, 98, 0.025); /* Ultra-subtle row hover — MudTable body rows */ /* ── §7 Primary tints — interactive hover/active overlays ─ */ --ba-primary-tint-5: rgba(103, 0, 60, 0.07); --ba-primary-tint-8: rgba(103, 0, 60, 0.11); --ba-primary-tint-12: rgba(103, 0, 60, 0.16); --ba-primary-tint-15: rgba(103, 0, 60, 0.15); --ba-primary-tint-20: rgba(103, 0, 60, 0.20); --ba-primary-tint-25: rgba(103, 0, 60, 0.25); --ba-primary-tint-30: rgba(103, 0, 60, 0.30); --ba-primary-tint-50: rgba(103, 0, 60, 0.50); --ba-primary-light: #D6BCC6; /* Lightened primary for soft backgrounds */ --ba-primary-dark: #7a0047; /* Darkened primary for pressed/active states */ /* ── §8 Shadows ──────────────────────────────────────────── */ --ba-shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.06); --ba-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.10); --ba-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.10); --ba-shadow-lift: 0 4px 16px rgba(0, 0, 0, 0.14); --ba-shadow-btn-hover: 0 2px 6px rgba(0, 0, 0, 0.10); --ba-shadow-dramatic: 0 8px 30px rgba(0, 0, 0, 0.12); --ba-shadow-dramatic-hover: 0 20px 50px rgba(0, 0, 0, 0.18); --ba-shadow-fab: 0 4px 16px rgba(0, 0, 0, 0.08); --ba-shadow-fab-hover: 0 6px 24px rgba(0, 0, 0, 0.12); --ba-shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); --ba-shadow-focus-ring: 0 0 0 3px rgba(103, 0, 60, 0.12); --ba-shadow-primary-hover: 0 4px 12px rgba(103, 0, 60, 0.20); --ba-shadow-thumb: 0 1px 4px rgba(103, 0, 60, 0.20); /* ── §9 Typography ───────────────────────────────────────── */ --ba-font-display: 'Playfair Display', Georgia, serif; --ba-font-body: 'Roboto', system-ui, sans-serif; /* ── §10 Transitions ─────────────────────────────────────── */ --ba-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* ── §11 Track / slider ──────────────────────────────────── */ --ba-track-bg: #e8e4df; /* ── §12 Tooltip (inverted — dark on light app) ──────────── */ --ba-tooltip-bg: #2a2220; /* Tooltip card surface (warm charcoal) */ --ba-tooltip-bg-elevated: #352e2b; /* Image area / elevated tooltip surface */ --ba-tooltip-text: #f0ebe5; /* Primary tooltip text (warm cream-white) */ --ba-tooltip-text-secondary: rgba(240, 235, 229, 0.72); --ba-tooltip-text-muted: rgba(240, 235, 229, 0.55); --ba-tooltip-border: rgba(215, 178, 98, 0.18); /* Tooltip card border (subtle gold) */ --ba-tooltip-separator: rgba(215, 178, 98, 0.22); /* Title/section separators inside tooltip */ --ba-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.2); --ba-tooltip-accent: #D7B262; /* Value emphasis — gold pops on dark tooltip bg */ /* ── §13 Print ───────────────────────────────────────────── */ --ba-print-border: #dddddd; /* ── §14 Overlay / glass surfaces ────────────────────────── */ --ba-overlay-wash: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.82) 40%, rgba(255, 255, 255, 0.65) 100%); --ba-overlay-heavy: rgba(255, 255, 255, 0.92); --ba-overlay-medium: rgba(255, 255, 255, 0.70); --ba-overlay-scrim: rgba(0, 0, 0, 0.75); /* Dark scrim over images — text readability */ --ba-overlay-glass: rgba(255, 255, 255, 0.9); /* Frosted glass surface */ --ba-overlay-dim: rgba(255, 255, 255, 0.85); /* Dimension labels on table cell thumbnails */ /* ── §15 Scrollbar ───────────────────────────────────────── */ --ba-scrollbar-thumb: rgba(180, 168, 148, 0.45); /* Warm neutral — visible but not intrusive on light bg */ --ba-scrollbar-thumb-hover: rgba(180, 168, 148, 0.65); /* Stronger on hover */ /* ── §16 Loading screen (index.html) ────────────────────── */ --ba-loading-bg: linear-gradient(to bottom right, #ffffff 0%, #f7f2e6 30%, #f5f5f5 70%, #ece0c6 100%); --ba-loading-msg-bg: rgba(255, 255, 255, 0.6); /* Message box translucent white */ /* ── §17 Photo Badge chrome (chip on white photo surface) ─ */ /* Theme-stable — --ba-surface-photo is white in both themes, */ /* so any chrome sitting on it must also be identical in both.*/ --ba-photo-badge-bg: #f5f2ec; /* Warm cream chip surface */ --ba-photo-badge-border: rgba(0, 0, 0, 0.10); /* Subtle neutral outline */ --ba-photo-badge-text: #424242; /* Dark body text */ --ba-photo-badge-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); /* Gentle elevation */ } /* ═══════════════════════════════════════════════════════════════ DARK THEME ═══════════════════════════════════════════════════════════════ Full redeclaration of every token. Primary interactive shifts to warm rose-gold (#C4936A). Gold accent stays for decorative elements. ═══════════════════════════════════════════════════════════════ */ :root[data-theme="dark"] { /* ── §1 Brand ────────────────────────────────────────────── */ --ba-brand-accent: #E0BE6E; /* Slightly brighter gold for dark surfaces */ --ba-brand-primary: #C4936A; /* Warm rose-gold — interactive elements */ /* ── §2 Text ─────────────────────────────────────────────── */ --ba-text-body: rgba(255, 255, 255, 0.87); --ba-text-muted: rgba(255, 255, 255, 0.60); --ba-text-secondary: rgba(255, 255, 255, 0.50); --ba-text-tertiary: rgba(255, 255, 255, 0.38); --ba-text-label-warm: rgba(255, 255, 255, 0.45); --ba-on-primary: #1a1a22; /* Dark text on filled rose-gold surfaces */ --ba-accent-dark: #C9A84E; /* Brighter accent for decorative text on dark */ /* ── §3 Surfaces ─────────────────────────────────────────── */ --ba-surface-page: #1a1a22; /* Dark app background */ --ba-surface-card: #262630; /* Dark card surface */ --ba-surface-elevated: #30303c; /* Elevated — slightly lighter than card */ --ba-surface-control: #2e2e38; /* Input surface */ --ba-header-bg: #2c2a30; /* Dialog title bar (subtle warm tint) */ --ba-surface-canvas: #909090; /* Light canvas — neutral mid-grey for images/drawings */ --ba-surface-photo: white; /* Product photo background — white even in dark theme */ /* ── §4 Error ────────────────────────────────────────────── */ --ba-error-base: #EF5350; /* Lighter red for dark bg readability */ --ba-error-bg: rgba(239, 83, 80, 0.10); --ba-error-border: rgba(239, 83, 80, 0.25); /* ── §5 Borders ──────────────────────────────────────────── */ /* Accent-based (gold) */ --ba-border-accent: rgba(224, 190, 110, 0.25); --ba-border-accent-mid: rgba(224, 190, 110, 0.35); /* Neutral (white-based) */ --ba-border-neutral-4: rgba(255, 255, 255, 0.04); --ba-border-neutral-5: rgba(255, 255, 255, 0.06); --ba-border-default: rgba(255, 255, 255, 0.08); --ba-border-strong: rgba(255, 255, 255, 0.12); --ba-border-input: rgba(255, 255, 255, 0.16); --ba-border-primary: rgba(196, 147, 106, 0.20); /* Rose-gold accent border */ /* ── §6 Accent tints — gold on dark ──────────────────────── */ --ba-accent-tint-4: rgba(224, 190, 110, 0.04); --ba-accent-tint-6: rgba(224, 190, 110, 0.06); --ba-accent-tint-8: rgba(224, 190, 110, 0.08); --ba-accent-tint-10: rgba(224, 190, 110, 0.10); --ba-accent-tint-12: rgba(224, 190, 110, 0.12); --ba-accent-tint-15: rgba(224, 190, 110, 0.15); --ba-accent-tint-25: rgba(224, 190, 110, 0.25); --ba-accent-tint-30: rgba(224, 190, 110, 0.30); --ba-row-hover: rgba(224, 190, 110, 0.03); /* ── §7 Primary tints — rose-gold on dark ────────────────── */ --ba-primary-tint-5: rgba(196, 147, 106, 0.06); --ba-primary-tint-8: rgba(196, 147, 106, 0.10); --ba-primary-tint-12: rgba(196, 147, 106, 0.14); --ba-primary-tint-15: rgba(196, 147, 106, 0.18); --ba-primary-tint-20: rgba(196, 147, 106, 0.22); --ba-primary-tint-25: rgba(196, 147, 106, 0.28); --ba-primary-tint-30: rgba(196, 147, 106, 0.34); --ba-primary-tint-50: rgba(196, 147, 106, 0.50); --ba-primary-light: #D4AD88; /* Soft rose-gold for backgrounds */ --ba-primary-dark: #A87A54; /* Pressed/active state */ /* ── §8 Shadows — deeper for dark backgrounds ────────────── */ --ba-shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.20); --ba-shadow-card: 0 2px 12px rgba(0, 0, 0, 0.30); --ba-shadow-hover: 0 2px 8px rgba(0, 0, 0, 0.25); --ba-shadow-lift: 0 4px 16px rgba(0, 0, 0, 0.30); --ba-shadow-btn-hover: 0 2px 6px rgba(0, 0, 0, 0.25); --ba-shadow-dramatic: 0 8px 30px rgba(0, 0, 0, 0.40); --ba-shadow-dramatic-hover: 0 20px 50px rgba(0, 0, 0, 0.50); --ba-shadow-fab: 0 4px 16px rgba(0, 0, 0, 0.30); --ba-shadow-fab-hover: 0 6px 24px rgba(0, 0, 0, 0.40); --ba-shadow-dropdown: 0 12px 40px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.25); --ba-shadow-focus-ring: 0 0 0 3px rgba(196, 147, 106, 0.15); --ba-shadow-primary-hover: 0 4px 12px rgba(196, 147, 106, 0.30); --ba-shadow-thumb: 0 1px 4px rgba(196, 147, 106, 0.25); /* ── §9 Typography — same fonts ──────────────────────────── */ --ba-font-display: 'Playfair Display', Georgia, serif; --ba-font-body: 'Roboto', system-ui, sans-serif; /* ── §10 Transitions — same ──────────────────────────────── */ --ba-transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); /* ── §11 Track / slider ──────────────────────────────────── */ --ba-track-bg: #3a3a44; /* ── §12 Tooltip (inverted — light on dark app) ──────────── */ --ba-tooltip-bg: #f0ebe5; /* Light warm surface */ --ba-tooltip-bg-elevated: #fdfcf8; --ba-tooltip-text: #2a2220; /* Dark text on light tooltip */ --ba-tooltip-text-secondary: rgba(42, 34, 32, 0.72); --ba-tooltip-text-muted: rgba(42, 34, 32, 0.55); --ba-tooltip-border: rgba(196, 147, 106, 0.20); /* Rose-gold border on tooltips */ --ba-tooltip-separator: rgba(196, 147, 106, 0.18); --ba-tooltip-shadow: 0 8px 32px rgba(0, 0, 0, 0.50), 0 2px 8px rgba(0, 0, 0, 0.30); --ba-tooltip-accent: #67003C; /* Value emphasis — dark pink readable on light tooltip bg */ /* ── §13 Print — always light, no override needed ────────── */ --ba-print-border: #dddddd; /* ── §14 Overlay / glass surfaces ────────────────────────── */ --ba-overlay-wash: linear-gradient(180deg, rgba(26, 26, 34, 0.95) 0%, rgba(26, 26, 34, 0.85) 40%, rgba(26, 26, 34, 0.70) 100%); --ba-overlay-heavy: rgba(26, 26, 34, 0.95); --ba-overlay-medium: rgba(26, 26, 34, 0.75); --ba-overlay-scrim: rgba(0, 0, 0, 0.85); --ba-overlay-glass: rgba(38, 38, 48, 0.92); --ba-overlay-dim: rgba(38, 38, 48, 0.85); /* ── §15 Scrollbar ───────────────────────────────────────── */ --ba-scrollbar-thumb: rgba(160, 150, 130, 0.40); /* Warm neutral — visible on dark bg */ --ba-scrollbar-thumb-hover: rgba(160, 150, 130, 0.60); /* Stronger on hover */ /* ── §16 Loading screen (index.html) ────────────────────── */ --ba-loading-bg: linear-gradient(to bottom right, #1a1a22 0%, #22222c 30%, #1e1e28 70%, #2a2830 100%); --ba-loading-msg-bg: rgba(255, 255, 255, 0.06); /* Message box — subtle on dark surface */ /* ── §17 Photo Badge chrome (chip on white photo surface) ─ */ /* Same values as light theme — --ba-surface-photo stays white. */ --ba-photo-badge-bg: #f5f2ec; --ba-photo-badge-border: rgba(0, 0, 0, 0.10); --ba-photo-badge-text: #424242; --ba-photo-badge-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } /* ═══════════════════════════════════════════════════════════════ PRINT — Force light-theme tokens when dark mode is active. Ensures printed output is always consistent regardless of the active theme. Covers §1-§7 + §11 (visually impactful). Shadows, typography, transitions, tooltips, overlays skipped. ═══════════════════════════════════════════════════════════════ */ @media print { :root[data-theme="dark"] { /* ── §1 Brand ── */ --ba-brand-accent: #D7B262; --ba-brand-primary: #67003C; /* ── §2 Text ── */ --ba-text-body: #424242; --ba-text-muted: #757575; --ba-text-secondary: #999999; --ba-text-tertiary: #bbbbbb; --ba-text-label-warm: #b0a89e; --ba-on-primary: white; --ba-accent-dark: #8E793E; /* ── §3 Surfaces ── */ --ba-surface-page: #e6e2da; --ba-surface-card: #f5f2ec; --ba-surface-elevated: #f5f2ec; --ba-surface-control: #eeebe4; --ba-header-bg: #e6e1d4; --ba-surface-canvas: transparent; --ba-surface-photo: white; /* ── §4 Error ── */ --ba-error-base: #C62828; --ba-error-bg: rgba(198, 40, 40, 0.06); --ba-error-border: rgba(198, 40, 40, 0.20); /* ── §5 Borders ── */ --ba-border-accent: rgba(215, 178, 98, 0.25); --ba-border-accent-mid: rgba(215, 178, 98, 0.35); --ba-border-neutral-4: rgba(0, 0, 0, 0.06); --ba-border-neutral-5: rgba(0, 0, 0, 0.08); --ba-border-default: rgba(0, 0, 0, 0.10); --ba-border-strong: rgba(0, 0, 0, 0.14); --ba-border-input: rgba(0, 0, 0, 0.18); --ba-border-primary: rgba(103, 0, 60, 0.15); /* ── §6 Accent tints ── */ --ba-accent-tint-4: rgba(215, 178, 98, 0.04); --ba-accent-tint-6: rgba(215, 178, 98, 0.06); --ba-accent-tint-8: rgba(215, 178, 98, 0.08); --ba-accent-tint-10: rgba(215, 178, 98, 0.14); --ba-accent-tint-12: rgba(215, 178, 98, 0.16); --ba-accent-tint-15: rgba(215, 178, 98, 0.15); --ba-accent-tint-25: rgba(215, 178, 98, 0.25); --ba-accent-tint-30: rgba(215, 178, 98, 0.30); --ba-row-hover: rgba(215, 178, 98, 0.025); /* ── §7 Primary tints ── */ --ba-primary-tint-5: rgba(103, 0, 60, 0.07); --ba-primary-tint-8: rgba(103, 0, 60, 0.11); --ba-primary-tint-12: rgba(103, 0, 60, 0.16); --ba-primary-tint-15: rgba(103, 0, 60, 0.15); --ba-primary-tint-20: rgba(103, 0, 60, 0.20); --ba-primary-tint-25: rgba(103, 0, 60, 0.25); --ba-primary-tint-30: rgba(103, 0, 60, 0.30); --ba-primary-tint-50: rgba(103, 0, 60, 0.50); --ba-primary-light: #D6BCC6; --ba-primary-dark: #7a0047; /* ── §11 Track ── */ --ba-track-bg: #e8e4df; } }