/* ============================================================================= WorkGuru Master Theme — wg-theme.css ============================================================================= Single source of truth for colours, radii, shadows, and typography tokens. USAGE ───── 1. Include this file BEFORE any dashboard or component CSS. 2. Reference tokens with var(--wg-*) instead of hard-coded hex values. 3. For dark mode, add data-mode="dark" to . 3b. For colour themes, add data-theme="ocean" (etc.) to . These are independent — combine freely. 4. For client-branded themes, override any --wg-* variable on :root in a tenant-specific stylesheet loaded after this file. STRUCTURE ───── A. Raw Palette — The actual colour swatches (not used directly in CSS) B. Semantic Tokens — Purpose-based aliases (use THESE in components) C. Component Tokens — Widget / card / table / pill / toolbar shortcuts D. Typography & Spacing — Font stacks, radii, shadows, spacing scale E. Dark Mode — Overrides via [data-mode="dark"] G. Colour Themes — Brand variants via [data-theme="..."] NAMING CONVENTION ───── --wg-- Examples: --wg-text-primary, --wg-bg-surface, --wg-border-light ============================================================================= */ /* ============================================================================= A. RAW PALETTE ───────────────────────────────────────────────────────────────────────────── These are the building blocks. Don't use them directly in component CSS — use the semantic tokens in Section B instead. This makes dark-mode and tenant theming a single-layer swap. ============================================================================= */ :root { /* ── Grays (cool-tinted to match current dashboards) ── */ --wg-gray-50: #fafbfc; --wg-gray-100: #f7f8fc; --wg-gray-150: #f3f4f6; --wg-gray-200: #edf0f5; --wg-gray-250: #e8ebf2; --wg-gray-300: #d9deea; --wg-gray-400: #cfd6e4; --wg-gray-500: #98a2b3; --wg-gray-600: #667085; --wg-gray-700: #475467; --wg-gray-800: #344054; --wg-gray-900: #1f2937; --wg-gray-950: #111827; --wg-gray-1000: #101828; /* ── Brand Indigo (primary action / links in dashboards) ── */ --wg-indigo-50: #eef2ff; --wg-indigo-100: #e0e7ff; --wg-indigo-200: #c7d2fe; --wg-indigo-400: #818cf8; --wg-indigo-500: #6d5efc; --wg-indigo-600: #5867dd; --wg-indigo-700: #4f46e5; --wg-indigo-800: #4338ca; --wg-indigo-900: #3730a3; /* ── Brand Purple (pivot reports, accent) ── */ --wg-purple-50: #f2ebff; --wg-purple-100: #ede9fe; --wg-purple-200: #ddd6fe; --wg-purple-300: #c4b5fd; --wg-purple-400: #a78bfa; --wg-purple-500: #8b5cf6; --wg-purple-600: #7c3aed; --wg-purple-700: #6f42c1; --wg-purple-800: #5b21b6; /* ── Blue (info / approved badges) ── */ --wg-blue-50: #eef4ff; --wg-blue-500: #356dff; --wg-blue-600: #2563eb; /* ── Green (success / in-progress / healthy) ── */ --wg-green-50: #eaf6ea; --wg-green-500: #43a047; --wg-green-600: #3f8f2f; --wg-green-700: #2e7d32; /* ── Yellow / Amber (warning / risk) ── */ --wg-yellow-50: #fff4df; --wg-yellow-400: #f4b400; --wg-yellow-500: #f39c12; --wg-yellow-600: #f0a51a; --wg-yellow-700: #c97a00; --wg-yellow-800: #c58a00; /* ── Red (danger / overdue / error) ── */ --wg-red-50: #fdeceb; --wg-red-500: #e53935; --wg-red-600: #d93025; --wg-red-800: #8b0000; /* ── Orange (high-progress / unsaved) ── */ --wg-orange-500: #e56b1f; --wg-orange-600: #ffa500; /* ── Cyan (schedule tasks / assignments) ── */ --wg-cyan-50: #ecfeff; --wg-cyan-100: #cffafe; --wg-cyan-200: #a5f3fc; --wg-cyan-300: #67e8f9; --wg-cyan-400: #22d3ee; --wg-cyan-500: #06b6d4; --wg-cyan-600: #0891b2; --wg-cyan-700: #0e7490; /* ── Fuchsia (risk / at-risk items) ── */ --wg-fuchsia-500: #d946ef; --wg-fuchsia-600: #c026d3; /* ── Emerald (capacity — light load) ── */ --wg-emerald-50: #ecfdf5; --wg-emerald-500: #10b981; --wg-emerald-700: #047857; /* ── Amber (capacity — near full) ── */ --wg-amber-50: #fffbeb; --wg-amber-100: #fef3c7; --wg-amber-500: #f59e0b; --wg-amber-700: #b45309; /* ── White / Black ── */ --wg-white: #ffffff; --wg-black: #000000; } /* ============================================================================= B. SEMANTIC TOKENS — Use these in all component / page CSS ============================================================================= */ :root { /* ── Backgrounds ── */ --wg-bg-body: var(--wg-gray-50); /* page background */ --wg-bg-page: var(--wg-bg-body); /* alias used by FC overrides */ --wg-bg-card: var(--wg-white); /* card / portlet surface */ --wg-bg-surface: var(--wg-gray-100); /* secondary surface (toolbars) */ --wg-bg-surface-alt: var(--wg-gray-150); /* subtle alternate bg */ --wg-bg-hover: var(--wg-gray-100); /* row / item hover */ --wg-bg-active: var(--wg-indigo-50); /* active filter / selection */ --wg-bg-zebra: #fafafc; /* table odd-row stripe */ --wg-bg-overlay: rgba(0, 0, 0, 0.30); /* modal / dialog backdrop */ --wg-bg-menu-active: #ededfd; /* sidebar active menu item */ /* ── Text ── */ --wg-text-heading: var(--wg-gray-1000); /* main headings */ --wg-text-primary: var(--wg-gray-900); /* primary body text */ --wg-text-secondary: var(--wg-gray-800); /* secondary body text */ --wg-text-body: var(--wg-gray-700); /* default body text */ --wg-text-muted: var(--wg-gray-600); /* labels, captions */ --wg-text-faint: var(--wg-gray-500); /* meta info, subtexts */ --wg-text-disabled: var(--wg-gray-400); /* disabled / placeholder */ --wg-text-inverse: var(--wg-white); /* text on dark backgrounds */ /* ── Links ── */ --wg-link: var(--wg-indigo-600); /* default link colour (#5867dd) */ --wg-link-hover: var(--wg-indigo-500); /* link hover (#6d5efc) */ --wg-link-active: var(--wg-indigo-700); /* link active (#4f46e5) */ /* ── Borders ── */ --wg-border-light: var(--wg-gray-200); /* card borders, dividers */ --wg-border: var(--wg-gray-250); /* default border */ --wg-border-medium: var(--wg-gray-300); /* inputs, heavier dividers */ --wg-border-heavy: var(--wg-gray-400); /* focused / emphasized borders */ /* ── Brand ── */ --wg-brand: var(--wg-indigo-600); /* primary brand */ --wg-brand-hover: var(--wg-indigo-700); /* brand hover */ --wg-brand-light: var(--wg-indigo-50); /* brand tint (pill bg etc.) */ --wg-brand-border: var(--wg-indigo-200); /* active pill border */ /* ── Accent (purple — pivot reports, "new" badge) ── */ --wg-accent: var(--wg-purple-600); /* #7c3aed */ --wg-accent-light: var(--wg-purple-100); /* #ede9fe */ --wg-accent-mid: var(--wg-purple-300); /* #c4b5fd */ --wg-accent-text: var(--wg-purple-800); /* #5b21b6 */ /* ── Status: Success ── */ --wg-success: var(--wg-green-700); /* #2e7d32 */ --wg-success-light: var(--wg-green-50); /* #eaf6ea */ /* ── Status: Warning ── */ --wg-warning: var(--wg-yellow-500); /* #f39c12 */ --wg-warning-light: var(--wg-yellow-50); /* #fff4df */ --wg-warning-text: var(--wg-yellow-700); /* #c97a00 */ /* ── Status: Danger ── */ --wg-danger: var(--wg-red-500); /* #e53935 */ --wg-danger-light: var(--wg-red-50); /* #fdeceb */ /* ── Status: Info ── */ --wg-info: var(--wg-blue-500); /* #356dff */ --wg-info-light: var(--wg-blue-50); /* #eef4ff */ /* ── Validation ── */ --wg-error: #ff0000; /* input validation border */ /* ── Focus ring ── */ --wg-focus-ring: rgba(124, 58, 237, 0.12); /* input / button focus glow */ } /* ============================================================================= C. COMPONENT TOKENS — Shortcuts for commonly styled elements ============================================================================= */ :root { /* ── Widget Cards (nd-widgets-grid) ── */ --wg-widget-bg: var(--wg-bg-card); --wg-widget-border: var(--wg-border-light); --wg-widget-radius: 14px; --wg-widget-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); --wg-widget-shadow-hover: 0 10px 24px rgba(16, 24, 40, 0.06); --wg-widget-title-color: var(--wg-text-muted); --wg-widget-value-color: var(--wg-text-heading); --wg-widget-sub-color: var(--wg-text-faint); /* ── Cards / Outer shells (quotes-*-card, etc.) ── */ --wg-card-bg: var(--wg-bg-card); --wg-card-border: var(--wg-border-light); --wg-card-radius: 14px; --wg-card-shadow: 0 1px 2px rgba(16, 24, 40, 0.03); --wg-card-header-border: #f1f4f8; /* ── Tables (NewDashboardsTable) ── */ --wg-table-header-bg: var(--wg-gray-100); --wg-table-header-text: var(--wg-gray-900); /* #2f3542 equivalent */ --wg-table-cell-bg: var(--wg-white); --wg-table-cell-text: var(--wg-gray-900); --wg-table-cell-border: #eef1f6; --wg-table-hover-bg: #fcfcfe; --wg-table-zebra-bg: var(--wg-bg-zebra); /* ── Status Pills ── */ --wg-pill-radius: 999px; --wg-pill-neutral-bg: var(--wg-gray-150); --wg-pill-neutral-text: #4b5563; --wg-pill-primary-bg: var(--wg-indigo-50); --wg-pill-primary-text: var(--wg-indigo-700); --wg-pill-info-bg: #f3ecff; --wg-pill-info-text: var(--wg-purple-600); --wg-pill-warning-bg: #fff4e5; --wg-pill-warning-text: var(--wg-yellow-700); --wg-pill-danger-bg: var(--wg-red-50); --wg-pill-danger-text: var(--wg-danger); --wg-pill-success-bg: var(--wg-green-50); --wg-pill-success-text: var(--wg-green-700); /* ── Toolbar buttons ── */ --wg-toolbar-btn-bg: var(--wg-white); --wg-toolbar-btn-border: var(--wg-gray-300); --wg-toolbar-btn-text: #374151; --wg-toolbar-btn-hover: var(--wg-gray-100); --wg-toolbar-btn-radius: 10px; /* ── Filter pills (status tab filters) ── */ --wg-filter-bg: var(--wg-gray-150); --wg-filter-text: var(--wg-text-muted); --wg-filter-hover-bg: #eef1f6; --wg-filter-active-bg: var(--wg-indigo-50); --wg-filter-active-text: var(--wg-indigo-800); --wg-filter-active-border: var(--wg-indigo-200); /* ── Inputs / Forms ── */ --wg-input-bg: var(--wg-white); --wg-input-border: var(--wg-border-medium); --wg-input-text: var(--wg-text-primary); --wg-input-placeholder: var(--wg-text-faint); --wg-input-focus-border: var(--wg-accent-mid); --wg-input-focus-ring: var(--wg-focus-ring); --wg-input-disabled-bg: #f3f3f3; --wg-input-radius: 6px; /* ── Scrollbars ── */ --wg-scroll-thumb: #e5e7eb; --wg-scroll-thumb-hover: #d1d5db; /* ── Progress bars ── */ --wg-progress-track: #e7ebf3; --wg-progress-normal: var(--wg-green-600); --wg-progress-warning: var(--wg-yellow-600); --wg-progress-high: var(--wg-orange-500); /* ── Staff Schedule ── */ --wg-sched-task-bg: var(--wg-cyan-500); --wg-sched-task-text: var(--wg-white); --wg-sched-task-border: var(--wg-cyan-300); --wg-sched-task-lane: var(--wg-cyan-50); --wg-sched-event-bg: var(--wg-purple-50); --wg-sched-event-text: var(--wg-purple-800); --wg-sched-event-border: var(--wg-purple-200); --wg-sched-event-lane: var(--wg-purple-50); --wg-sched-project-bg: var(--wg-purple-500); --wg-sched-project-text: var(--wg-white); --wg-sched-risk-bg: var(--wg-fuchsia-500); --wg-sched-cap-light: var(--wg-emerald-700); --wg-sched-cap-light-bg: var(--wg-emerald-50); --wg-sched-cap-med: var(--wg-amber-700); --wg-sched-cap-med-bg: var(--wg-amber-50); --wg-sched-cap-high: var(--wg-red-500); --wg-sched-cap-high-bg: var(--wg-red-50); } /* ============================================================================= D. TYPOGRAPHY & SPACING ============================================================================= */ :root { /* ── Font ── */ --wg-font: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --wg-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; --wg-font-size-xs: 11px; --wg-font-size-sm: 12px; --wg-font-size-base: 13px; --wg-font-size-md: 14px; --wg-font-size-lg: 15px; --wg-font-size-xl: 18px; --wg-font-size-2xl: 24px; --wg-font-size-3xl: 30px; --wg-font-size-4xl: 42px; /* ── Radii ── */ --wg-radius-sm: 6px; --wg-radius: 10px; --wg-radius-md: 12px; --wg-radius-lg: 14px; --wg-radius-full: 999px; /* ── Shadows ── */ --wg-shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.03); --wg-shadow-sm: 0 2px 3px 2px rgba(0, 0, 0, 0.03); --wg-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10); --wg-shadow-lg: 0 10px 30px rgba(23, 33, 61, 0.12); --wg-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.12); /* ── Row height (tables / pivot) ── */ --wg-row-height: 36px; /* ── Spacing scale ── */ --wg-space-1: 4px; --wg-space-2: 8px; --wg-space-3: 12px; --wg-space-4: 16px; --wg-space-5: 20px; --wg-space-6: 24px; --wg-space-8: 32px; } /* ============================================================================= E. DARK MODE ───────────────────────────────────────────────────────────────────────────── Activated by: (independent of data-theme colour) Dark mode is INDEPENDENT of colour theme. You can combine any colour theme with dark mode: This block overrides neutrals (backgrounds, text, borders, shadows) and status colours. Brand / link / accent colours are left to the colour theme (Section G). Brand-derived "light wash" tokens use color-mix() so they auto-adapt to whatever brand colour is active. ============================================================================= */ [data-mode="dark"] { /* ── Backgrounds ── */ --wg-bg-body: #0f1117; --wg-bg-page: #0f1117; --wg-bg-card: #1a1d27; --wg-bg-surface: #22252f; --wg-bg-surface-alt: #282b36; --wg-bg-hover: #2a2e3a; --wg-bg-zebra: #1e2130; --wg-bg-overlay: rgba(0, 0, 0, 0.55); /* Brand-derived backgrounds — auto-adapt to active colour theme */ --wg-bg-active: color-mix(in srgb, var(--wg-brand) 15%, transparent); --wg-bg-menu-active: color-mix(in srgb, var(--wg-brand) 18%, transparent); /* ── Text ── */ --wg-text-heading: #f0f1f4; --wg-text-primary: #e2e4ea; --wg-text-secondary: #c8cbd4; --wg-text-body: #b0b5c3; --wg-text-muted: #8b92a5; --wg-text-faint: #6b7280; --wg-text-disabled: #4b5060; --wg-text-inverse: #111827; /* ── Borders ── */ --wg-border-light: #2a2e3a; --wg-border: #353946; --wg-border-medium: #3f4452; --wg-border-heavy: #4f5565; /* ── Brand wash variants — adapt to any colour theme via color-mix() ── */ --wg-brand-light: color-mix(in srgb, var(--wg-brand) 15%, transparent); --wg-brand-border: color-mix(in srgb, var(--wg-brand) 30%, transparent); /* ── Accent wash variants ── */ --wg-accent-light: color-mix(in srgb, var(--wg-accent) 12%, transparent); --wg-accent-mid: color-mix(in srgb, var(--wg-accent) 30%, transparent); --wg-accent-text: color-mix(in srgb, var(--wg-accent) 80%, white); /* ── Focus ring — adapt to brand ── */ --wg-focus-ring: color-mix(in srgb, var(--wg-brand) 20%, transparent); /* ── Status: Success ── */ --wg-success: #66bb6a; --wg-success-light: rgba(102, 187, 106, 0.12); /* ── Status: Warning ── */ --wg-warning: #ffb74d; --wg-warning-light: rgba(255, 183, 77, 0.12); --wg-warning-text: #ffd54f; /* ── Status: Danger ── */ --wg-danger: #ef5350; --wg-danger-light: rgba(239, 83, 80, 0.12); /* ── Status: Info ── */ --wg-info: #42a5f5; --wg-info-light: rgba(66, 165, 245, 0.12); /* ── Validation ── */ --wg-error: #ef5350; /* ── Widget Cards ── */ --wg-widget-bg: var(--wg-bg-card); --wg-widget-border: var(--wg-border-light); --wg-widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.20); --wg-widget-shadow-hover: 0 8px 24px rgba(0, 0, 0, 0.30); --wg-widget-title-color: var(--wg-text-muted); --wg-widget-value-color: var(--wg-text-heading); --wg-widget-sub-color: var(--wg-text-faint); /* ── Cards ── */ --wg-card-bg: var(--wg-bg-card); --wg-card-border: var(--wg-border-light); --wg-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.20); --wg-card-header-border: var(--wg-border); /* ── Tables ── */ --wg-table-header-bg: var(--wg-bg-surface); --wg-table-header-text: var(--wg-text-primary); --wg-table-cell-bg: var(--wg-bg-card); --wg-table-cell-text: var(--wg-text-primary); --wg-table-cell-border: var(--wg-border-light); --wg-table-hover-bg: var(--wg-bg-hover); --wg-table-zebra-bg: var(--wg-bg-zebra); /* ── Status Pills — brand-derived use color-mix, status use rgba ── */ --wg-pill-neutral-bg: var(--wg-bg-surface-alt); --wg-pill-neutral-text: var(--wg-text-body); --wg-pill-primary-bg: var(--wg-brand-light); --wg-pill-primary-text: color-mix(in srgb, var(--wg-brand) 70%, white); --wg-pill-info-bg: var(--wg-accent-light); --wg-pill-info-text: var(--wg-accent); --wg-pill-warning-bg: var(--wg-warning-light); --wg-pill-warning-text: var(--wg-warning-text); --wg-pill-danger-bg: var(--wg-danger-light); --wg-pill-danger-text: #ef9a9a; --wg-pill-success-bg: var(--wg-success-light); --wg-pill-success-text: #81c784; /* ── Toolbar buttons ── */ --wg-toolbar-btn-bg: var(--wg-bg-surface); --wg-toolbar-btn-border: var(--wg-border-medium); --wg-toolbar-btn-text: var(--wg-text-body); --wg-toolbar-btn-hover: var(--wg-bg-hover); /* ── Filter pills — brand-derived via color-mix ── */ --wg-filter-bg: var(--wg-bg-surface-alt); --wg-filter-text: var(--wg-text-muted); --wg-filter-hover-bg: var(--wg-bg-hover); --wg-filter-active-bg: var(--wg-brand-light); --wg-filter-active-text: color-mix(in srgb, var(--wg-brand) 70%, white); --wg-filter-active-border: var(--wg-brand-border); /* ── Inputs ── */ --wg-input-bg: var(--wg-bg-surface); --wg-input-border: var(--wg-border-medium); --wg-input-text: var(--wg-text-primary); --wg-input-placeholder: var(--wg-text-faint); --wg-input-focus-border: var(--wg-accent); --wg-input-focus-ring: var(--wg-focus-ring); --wg-input-disabled-bg: #282b36; /* ── Scrollbars ── */ --wg-scroll-thumb: #3f4452; --wg-scroll-thumb-hover: #4f5565; /* ── Progress bars ── */ --wg-progress-track: var(--wg-border); --wg-progress-normal: #66bb6a; --wg-progress-warning: #ffb74d; --wg-progress-high: #ff8a65; /* ── Shadows (deeper in dark mode) ── */ --wg-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --wg-shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.20); --wg-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.30); --wg-shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.35); --wg-shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.40); /* ── Staff Schedule ── */ --wg-sched-task-bg: var(--wg-cyan-700); --wg-sched-task-text: var(--wg-white); --wg-sched-task-border: var(--wg-cyan-600); --wg-sched-task-lane: rgba(6, 182, 212, 0.08); --wg-sched-event-bg: color-mix(in srgb, var(--wg-purple-600) 20%, var(--wg-bg-surface)); --wg-sched-event-text: var(--wg-text-heading); --wg-sched-event-border: color-mix(in srgb, var(--wg-purple-500) 35%, transparent); --wg-sched-event-lane: rgba(139, 92, 246, 0.06); --wg-sched-project-bg: var(--wg-purple-600); --wg-sched-project-text: var(--wg-white); --wg-sched-risk-bg: var(--wg-fuchsia-600); --wg-sched-cap-light: var(--wg-emerald-500); --wg-sched-cap-light-bg: rgba(16, 185, 129, 0.12); --wg-sched-cap-med: var(--wg-amber-500); --wg-sched-cap-med-bg: rgba(245, 158, 11, 0.12); --wg-sched-cap-high: #ef5350; --wg-sched-cap-high-bg: rgba(239, 83, 80, 0.12); } /* OS-level dark mode auto-detect — DISABLED until full dark-mode audit is complete. Re-enable by uncommenting once all pages have been tested in dark mode. @media (prefers-color-scheme: dark) { :root:not([data-mode="light"]) { ... same overrides as [data-mode="dark"] above ... } } end of disabled @media block */ /* ============================================================================= G. COLOUR THEMES ───────────────────────────────────────────────────────────────────────────── Apply a colour theme: data-theme="" on Apply dark mode: data-mode="dark" on These are INDEPENDENT — combine freely: Available colour themes: • (default) — Indigo (no attribute needed) • ocean — Cool blue data-theme="ocean" • emerald — Fresh green data-theme="emerald" • sunset — Warm amber data-theme="sunset" • rose — Bold pink data-theme="rose" Dark mode is in Section E, activated by data-mode="dark". It auto-adapts to whichever colour theme is active via color-mix(). ============================================================================= */ /* ── Ocean (Blue) ── */ [data-theme="ocean"] { /* Brand */ --wg-brand: #2563eb; --wg-brand-hover: #1d4ed8; --wg-brand-light: #eff6ff; --wg-brand-border: #bfdbfe; /* Links */ --wg-link: #2563eb; --wg-link-hover: #3b82f6; --wg-link-active: #1d4ed8; /* Accent (cyan-teal) */ --wg-accent: #0891b2; --wg-accent-light: #ecfeff; --wg-accent-mid: #67e8f9; --wg-accent-text: #155e75; /* Active / focus states */ --wg-bg-active: #eff6ff; --wg-bg-menu-active: #dbeafe; --wg-focus-ring: rgba(37, 99, 235, 0.12); /* Status colours — cool-shifted to complement blue brand */ --wg-success: #0d9488; /* teal-green instead of pure green */ --wg-success-light: #f0fdfa; --wg-warning: #e67e22; /* slightly cooler amber */ --wg-warning-light: #fef3c7; --wg-warning-text: #b45309; --wg-danger: #dc2626; /* slightly cooler red */ --wg-danger-light: #fef2f2; --wg-info: #0284c7; /* deeper sky-blue */ --wg-info-light: #e0f2fe; /* Component overrides */ --wg-filter-active-bg: #eff6ff; --wg-filter-active-text: #1e40af; --wg-filter-active-border: #bfdbfe; --wg-pill-primary-bg: #eff6ff; --wg-pill-primary-text: #1e40af; --wg-pill-info-bg: #ecfeff; --wg-pill-info-text: #0891b2; --wg-pill-success-bg: #f0fdfa; --wg-pill-success-text: #0d9488; --wg-input-focus-border: #93c5fd; } /* ── Emerald (Green) ── */ [data-theme="emerald"] { /* Brand */ --wg-brand: #059669; --wg-brand-hover: #047857; --wg-brand-light: #ecfdf5; --wg-brand-border: #a7f3d0; /* Links */ --wg-link: #059669; --wg-link-hover: #10b981; --wg-link-active: #047857; /* Accent (teal) */ --wg-accent: #0d9488; --wg-accent-light: #f0fdfa; --wg-accent-mid: #5eead4; --wg-accent-text: #115e59; /* Active / focus states */ --wg-bg-active: #ecfdf5; --wg-bg-menu-active: #d1fae5; --wg-focus-ring: rgba(5, 150, 105, 0.12); /* Status colours — nature-shifted to complement green brand */ --wg-success: #15803d; /* deeper forest green (avoids brand clash) */ --wg-success-light: #f0fdf4; --wg-warning: #ca8a04; /* olive-gold amber */ --wg-warning-light: #fefce8; --wg-warning-text: #a16207; --wg-danger: #dc2626; /* standard red (good contrast with green) */ --wg-danger-light: #fef2f2; --wg-info: #2563eb; /* blue (distinct from green brand) */ --wg-info-light: #eff6ff; /* Component overrides */ --wg-filter-active-bg: #ecfdf5; --wg-filter-active-text: #065f46; --wg-filter-active-border: #a7f3d0; --wg-pill-primary-bg: #ecfdf5; --wg-pill-primary-text: #065f46; --wg-pill-info-bg: #f0fdfa; --wg-pill-info-text: #0d9488; --wg-pill-success-bg: #f0fdf4; --wg-pill-success-text: #15803d; --wg-input-focus-border: #6ee7b7; } /* ── Sunset (Amber) ── */ [data-theme="sunset"] { /* Brand */ --wg-brand: #d97706; --wg-brand-hover: #b45309; --wg-brand-light: #fffbeb; --wg-brand-border: #fde68a; /* Links */ --wg-link: #d97706; --wg-link-hover: #f59e0b; --wg-link-active: #b45309; /* Accent (orange) */ --wg-accent: #ea580c; --wg-accent-light: #fff7ed; --wg-accent-mid: #fdba74; --wg-accent-text: #9a3412; /* Active / focus states */ --wg-bg-active: #fffbeb; --wg-bg-menu-active: #fef3c7; --wg-focus-ring: rgba(217, 119, 6, 0.12); /* Status colours — warm-shifted to complement amber brand */ --wg-success: #16a34a; /* slightly warmer green */ --wg-success-light: #f0fdf4; --wg-warning: #c2410c; /* deeper burnt-orange (avoids brand clash) */ --wg-warning-light: #fff7ed; --wg-warning-text: #9a3412; --wg-danger: #be123c; /* rose-red (warm complement) */ --wg-danger-light: #fff1f2; --wg-info: #7c3aed; /* purple (distinct from warm palette) */ --wg-info-light: #f5f3ff; /* Component overrides */ --wg-filter-active-bg: #fffbeb; --wg-filter-active-text: #92400e; --wg-filter-active-border: #fde68a; --wg-pill-primary-bg: #fffbeb; --wg-pill-primary-text: #92400e; --wg-pill-info-bg: #fff7ed; --wg-pill-info-text: #ea580c; --wg-pill-warning-bg: #fff7ed; --wg-pill-warning-text: #c2410c; --wg-input-focus-border: #fcd34d; } /* ── Rose (Pink) ── */ [data-theme="rose"] { /* Brand */ --wg-brand: #e11d48; --wg-brand-hover: #be123c; --wg-brand-light: #fff1f2; --wg-brand-border: #fecdd3; /* Links */ --wg-link: #e11d48; --wg-link-hover: #f43f5e; --wg-link-active: #be123c; /* Accent (pink) */ --wg-accent: #db2777; --wg-accent-light: #fdf2f8; --wg-accent-mid: #f9a8d4; --wg-accent-text: #9d174d; /* Active / focus states */ --wg-bg-active: #fff1f2; --wg-bg-menu-active: #ffe4e6; --wg-focus-ring: rgba(225, 29, 72, 0.12); /* Status colours — warm-pink-shifted to complement rose brand */ --wg-success: #059669; /* emerald green (cool contrast to rose) */ --wg-success-light: #ecfdf5; --wg-warning: #d97706; /* amber (warm complement) */ --wg-warning-light: #fffbeb; --wg-warning-text: #b45309; --wg-danger: #b91c1c; /* darker red (avoids brand clash) */ --wg-danger-light: #fef2f2; --wg-info: #7c3aed; /* purple (distinct from pink brand) */ --wg-info-light: #f5f3ff; /* Component overrides */ --wg-filter-active-bg: #fff1f2; --wg-filter-active-text: #9f1239; --wg-filter-active-border: #fecdd3; --wg-pill-primary-bg: #fff1f2; --wg-pill-primary-text: #9f1239; --wg-pill-info-bg: #fdf2f8; --wg-pill-info-text: #db2777; --wg-pill-danger-bg: #fef2f2; --wg-pill-danger-text: #b91c1c; --wg-input-focus-border: #fda4af; } /* ───────────────────────────────────────────────────────────────────────────── THEME + DARK MODE COMPOUND FIX ───────────────────────────────────────────────────────────────────────────── Each colour theme hardcodes light-mode wash tokens (brand-light, brand-border, accent-light, bg-active, etc.). Because theme selectors appear AFTER the [data-mode="dark"] block, they clobber the dark-mode color-mix() derivations. This compound selector re-applies the dynamic derivations so that dark mode adapts correctly regardless of which colour theme is active. ───────────────────────────────────────────────────────────────────────────── */ [data-mode="dark"][data-theme="ocean"], [data-mode="dark"][data-theme="emerald"], [data-mode="dark"][data-theme="sunset"], [data-mode="dark"][data-theme="rose"] { /* Brand wash — derive from active --wg-brand */ --wg-brand-light: color-mix(in srgb, var(--wg-brand) 15%, transparent); --wg-brand-border: color-mix(in srgb, var(--wg-brand) 30%, transparent); /* Accent wash — derive from active --wg-accent */ --wg-accent-light: color-mix(in srgb, var(--wg-accent) 12%, transparent); --wg-accent-mid: color-mix(in srgb, var(--wg-accent) 30%, transparent); --wg-accent-text: color-mix(in srgb, var(--wg-accent) 80%, white); /* Active / selection states */ --wg-bg-active: color-mix(in srgb, var(--wg-brand) 15%, transparent); --wg-bg-menu-active: color-mix(in srgb, var(--wg-brand) 18%, transparent); /* Focus ring */ --wg-focus-ring: color-mix(in srgb, var(--wg-brand) 20%, transparent); } /* ============================================================================= F. COLOUR MAP — Quick-reference of hex → token for migration ───────────────────────────────────────────────────────────────────────────── Use this when refactoring existing CSS files to use wg-theme tokens. EXISTING HEX → REPLACEMENT TOKEN ───────────────────────────────────────── #101828, #111827 → var(--wg-text-heading) #1f2937 → var(--wg-text-primary) #2f3542, #344054 → var(--wg-text-secondary) #374151, #475467 → var(--wg-text-body) #667085 → var(--wg-text-muted) #98a2b3 → var(--wg-text-faint) #fff, #ffffff → var(--wg-bg-card) #fafbfc, #f9f9f9 → var(--wg-bg-body) #f7f8fc, #f8f8fb → var(--wg-bg-surface) #f3f4f6 → var(--wg-bg-surface-alt) #fcfcfe, #fafbff → var(--wg-table-hover-bg) #fafafc → var(--wg-bg-zebra) #edf0f5, #eef1f6 → var(--wg-border-light) #e8ebf2, #e5e9f2 → var(--wg-border) #d9deea, #dbe2ec → var(--wg-border-medium) #cfd6e4, #c4c9d4 → var(--wg-border-heavy) #5867dd → var(--wg-link) / var(--wg-brand) #4f46e5, #4338ca → var(--wg-link-active) / var(--wg-brand-hover) #6d5efc → var(--wg-link-hover) #eef2ff → var(--wg-brand-light) #c7d2fe → var(--wg-brand-border) #7c3aed → var(--wg-accent) #ede9fe → var(--wg-accent-light) #c4b5fd → var(--wg-accent-mid) #5b21b6 → var(--wg-accent-text) #6f42c1 → var(--wg-purple-700) (use sparingly) #2e7d32 → var(--wg-success) #eaf6ea → var(--wg-success-light) #e53935 → var(--wg-danger) #fdeceb → var(--wg-danger-light) #f39c12 → var(--wg-warning) #fff4df → var(--wg-warning-light) #c97a00 → var(--wg-warning-text) #356dff → var(--wg-info) #eef4ff → var(--wg-info-light) ============================================================================= */ /* ============================================================================= H. BORDER RADIUS MODE ───────────────────────────────────────────────────────────────────────────── Activated by: Controlled independently from colour theme and dark mode. Overrides all --wg-radius-* tokens to 2px (near-zero) for a sharp UI. ============================================================================= */ [data-radius="sharp"] { --wg-radius-sm: 2px; --wg-radius: 2px; --wg-radius-md: 2px; --wg-radius-lg: 3px; --wg-radius-full: 3px; }