/* ========================================================================== Dark Theme ========================================================================== HUE CONTROL SYSTEM ------------------ Two variables control the character of the dark theme: --eci-dark-hue: OKLCH hue angle (0-360) - 220 = cool blue/gray (default) - 110 = warm gray/olive - 55 = warm amber/brown - 285 = blue-violet - 0 = neutral (when chroma is 0) --eci-dark-chroma: Color intensity (0-0.05) - 0 = pure neutral gray (no tint) - 0.005 = barely perceptible tint (default) - 0.015 = subtle tint - 0.03 = noticeable tint - 0.05 = strong tint (use sparingly) BUILT-IN VARIANTS ----------------- Use data-theme-variant attribute for pre-configured themes: // Blue/gray (default) // Brown/gray // Pure gray CUSTOM OVERRIDE --------------- Or override the variables directly in your app's CSS: [data-theme="dark"] { --eci-dark-hue: 285; --eci-dark-chroma: 0.015; } LIGHTNESS --------- Backgrounds use "dark charcoal" (~17% OKLCH) rather than near-black (~6%). Surfaces are elevated to ~20% for clear visual separation. This provides better visual hierarchy and reduced eye strain while maintaining strong contrast ratios (12:1+ with light text). WHAT GETS TINTED ---------------- - Page, canvas, surfaces, containers, borders, skeleton, glass - Neutral scale (steps 50-200) - used for dark backgrounds - Secondary scale (steps 20-200) - used for dark backgrounds - Zinc scale - already OKLCH, uses the hue variable NOT TINTED (left neutral for readability/identity): - Text colors - Accent palettes (blue, green, red, orange, yellow, purple, slate-blue) - Status aliases (success, warning, error, etc.) ========================================================================== */ [data-theme="dark"] { /* -------------------------------------------------------------------------- Hue Control Variables -------------------------------------------------------------------------- These two variables control the entire dark theme's color character. Adjust --eci-dark-hue to shift the tint, --eci-dark-chroma for intensity. Setting chroma to 0 gives pure neutral grays (hue becomes powerless). Current values: warm gray with a hint of cool blue. -------------------------------------------------------------------------- */ --eci-dark-hue: 220; --eci-dark-chroma: 0.005; /* -------------------------------------------------------------------------- Base Surfaces (Page & Canvas) -------------------------------------------------------------------------- The foundational background colors. These are the darkest elements. Page/canvas at 17% provides a warm charcoal base. -------------------------------------------------------------------------- */ --eci-color-page: oklch(17% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-canvas: oklch(17% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-background-translucent: oklch(17% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.7); --eci-color-background-glass: oklch(17% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.6); /* -------------------------------------------------------------------------- Surface Colors -------------------------------------------------------------------------- Used for cards, modals, panels, and other elevated UI elements. Stepped lightness creates visual hierarchy with subtle gaps between levels. -------------------------------------------------------------------------- */ --eci-color-surface: oklch(20% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-secondary: oklch(23% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-tertiary: oklch(26% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-variant-dark: oklch(18% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-variant-light: oklch(23% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-hover: oklch(26% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-active: oklch(30% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-selected: oklch(30% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-checked: #7187ab; --eci-color-surface-disabled: oklch(16% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-surface-translucent: oklch(16% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.6); --eci-color-surface-glass: oklch(16% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.6); --eci-color-surface-glass-blur: 15px; /* -------------------------------------------------------------------------- Container Colors -------------------------------------------------------------------------- Used for sidebars, navigation panels, and other container elements. Sits between page and surface for layered depth. -------------------------------------------------------------------------- */ --eci-color-container: oklch(18% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-container-item: oklch(18% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-container-item-hover: oklch(28% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-container-item-active: oklch(28% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-container-item-selected: oklch(28% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-container-item-checked: oklch(28% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-container-item-disabled: transparent; /* -------------------------------------------------------------------------- Text Colors -------------------------------------------------------------------------- NOT tinted - text stays neutral for optimal readability. Light text on dark backgrounds maintains high contrast ratios. -------------------------------------------------------------------------- */ --eci-color-text: #e5e5e5; --eci-color-text-active: rgb(252, 252, 252); --eci-color-text-light: lab(58 0 -0.01); --eci-color-text-semi-light: lab(65 0 -0.01); --eci-color-text-lighter: lab(49 0 -0.01); --eci-markdown-text-color: #b7b7b7; --eci-color-text-inverse: #1A1B1C; --eci-color-text-white: #ffffff; --eci-color-text-black: #1A1B1C; /* -------------------------------------------------------------------------- Border Colors -------------------------------------------------------------------------- Tinted borders that harmonize with surfaces. Stepped from subtle (barely visible) to strong (clear separation). -------------------------------------------------------------------------- */ --eci-color-border: oklch(32% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-border-default: oklch(32% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-border-subtle: oklch(26% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-border-strong: oklch(38% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-border-thin: 1px solid var(--eci-color-border-default); --eci-border-medium: 2px solid var(--eci-color-border-default); --eci-border-thick: 4px solid var(--eci-color-border-default); /* Additional dark-mode tokens */ --eci-color-text-hover: var(--eci-color-neutral-200); /* -------------------------------------------------------------------------- Skeleton Colors -------------------------------------------------------------------------- Loading placeholder colors, tinted to match the theme. -------------------------------------------------------------------------- */ --eci-color-skeleton-1: oklch(20% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-skeleton-2: oklch(26% var(--eci-dark-chroma) var(--eci-dark-hue)); /* -------------------------------------------------------------------------- Glass Colors -------------------------------------------------------------------------- Frosted glass effect backgrounds, tinted for cohesion. -------------------------------------------------------------------------- */ --eci-color-glass-background: oklch(18% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.35); /* -------------------------------------------------------------------------- Neutral Scale (Dark End: 50-200) -------------------------------------------------------------------------- These steps are used for dark backgrounds and surfaces. Tinted with the theme hue for visual cohesion. Steps 300+ remain neutral as they're used for lighter UI elements. -------------------------------------------------------------------------- */ --eci-color-neutral-50: oklch(12% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-neutral-100: oklch(18% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-neutral-200: oklch(25% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-neutral-300: #404040; --eci-color-neutral-400: #525252; --eci-color-neutral-500: #737373; --eci-color-neutral-600: #a3a3a3; --eci-color-neutral-700: #d4d4d4; --eci-color-neutral-800: #e5e5e5; --eci-color-neutral-900: #f5f5f5; --eci-color-neutral-950: #fafafa; /* -------------------------------------------------------------------------- Secondary Scale (Dark End: 20-200) -------------------------------------------------------------------------- Custom gray scale for secondary UI elements. Dark steps tinted, light steps remain neutral. -------------------------------------------------------------------------- */ --eci-color-secondary-20: oklch(15% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-secondary-30: oklch(22% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-secondary-40: oklch(26% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-secondary-50: oklch(14% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-secondary-100: oklch(18% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-secondary-200: oklch(24% var(--eci-dark-chroma) var(--eci-dark-hue)); --eci-color-secondary-300: #adadad; --eci-color-secondary-400: #d4d4d4; --eci-color-secondary-500: #e6e6e6; --eci-color-secondary-600: #f2f2f2; --eci-color-secondary-700: #f6f6f6; --eci-color-secondary-800: #f7f7f7; --eci-color-secondary-900: #f8f8f8; --eci-color-secondary-950: #fafafa; /* -------------------------------------------------------------------------- Accent Color Palettes -------------------------------------------------------------------------- NOT tinted - these retain their distinct color identities. Used for semantic meaning (info, success, warning, error, etc.) -------------------------------------------------------------------------- */ /* Blue */ --eci-color-blue-50: #011419; --eci-color-blue-100: #021e26; --eci-color-blue-200: #075985; --eci-color-blue-300: #0369a1; --eci-color-blue-400: #0284c7; --eci-color-blue-500: #0ea5e9; --eci-color-blue-600: #0ea5e9; --eci-color-blue-700: #38bdf8; --eci-color-blue-800: #7dd3fc; --eci-color-blue-900: #bae6fd; --eci-color-blue-950: #e0f2fe; /* Green */ --eci-color-green-50: #010c09; --eci-color-green-100: #01120d; --eci-color-green-200: #064e3b; --eci-color-green-300: #065f46; --eci-color-green-400: #047857; --eci-color-green-500: #10b981; --eci-color-green-600: #10b981; --eci-color-green-700: #34d399; --eci-color-green-800: #6ee7b7; --eci-color-green-900: #a7f3d0; --eci-color-green-950: #d1fae5; /* Red */ --eci-color-red-50: #130303; --eci-color-red-100: #1c0404; --eci-color-red-200: #7f1d1d; --eci-color-red-300: #991b1b; --eci-color-red-400: #b91c1c; --eci-color-red-500: #ef4444; --eci-color-red-600: #ef4444; --eci-color-red-700: #f87171; --eci-color-red-800: #fca5a5; --eci-color-red-900: #fecaca; --eci-color-red-950: #fee2e2; /* Orange */ --eci-color-orange-50: #170901; --eci-color-orange-100: #230d02; --eci-color-orange-200: #9a3412; --eci-color-orange-300: #c2410c; --eci-color-orange-400: #ea580c; --eci-color-orange-500: #f97316; --eci-color-orange-600: #f97316; --eci-color-orange-700: #fb923c; --eci-color-orange-800: #fdba74; --eci-color-orange-900: #fed7aa; --eci-color-orange-950: #ffedd5; /* Yellow */ --eci-color-yellow-50: #140e01; --eci-color-yellow-100: #1f1401; --eci-color-yellow-200: #854d0e; --eci-color-yellow-300: #a16207; --eci-color-yellow-400: #ca8a04; --eci-color-yellow-500: #eab308; --eci-color-yellow-600: #eab308; --eci-color-yellow-700: #facc15; --eci-color-yellow-800: #fde047; --eci-color-yellow-900: #fef08a; --eci-color-yellow-950: #fef9c3; /* Purple */ --eci-color-purple-50: #0f0517; --eci-color-purple-100: #160823; --eci-color-purple-200: #6b21a8; --eci-color-purple-300: #7e22ce; --eci-color-purple-400: #9333ea; --eci-color-purple-500: #a855f7; --eci-color-purple-600: #a855f7; --eci-color-purple-700: #c084fc; --eci-color-purple-800: #d8b4fe; --eci-color-purple-900: #e9d5ff; --eci-color-purple-950: #f3e8ff; /* Slate Blue (reversed for dark mode - lighter values at lower steps) */ --eci-color-slate-blue-50: #07090b; --eci-color-slate-blue-100: #0b0d10; --eci-color-slate-blue-200: #1e293b; --eci-color-slate-blue-300: #334155; --eci-color-slate-blue-400: #475569; --eci-color-slate-blue-500: #64748b; --eci-color-slate-blue-600: #64748b; --eci-color-slate-blue-700: #94a3b8; --eci-color-slate-blue-800: #cbd5e1; --eci-color-slate-blue-900: #e2e8f0; --eci-color-slate-blue-950: #f1f5f9; /* -------------------------------------------------------------------------- Zinc Scale -------------------------------------------------------------------------- Neutral colors using OKLCH. Now uses --eci-dark-hue for consistency. Reversed for dark theme: darker values at lower steps. -------------------------------------------------------------------------- */ --eci-color-zinc-50: oklch(12% 0.010 var(--eci-dark-hue)); --eci-color-zinc-100: oklch(18% 0.012 var(--eci-dark-hue)); --eci-color-zinc-200: oklch(25% 0.013 var(--eci-dark-hue)); --eci-color-zinc-300: oklch(31% 0.014 var(--eci-dark-hue)); --eci-color-zinc-400: oklch(43% 0.015 var(--eci-dark-hue)); --eci-color-zinc-500: oklch(55.2% 0.016 var(--eci-dark-hue)); --eci-color-zinc-600: oklch(70% 0.014 var(--eci-dark-hue)); --eci-color-zinc-700: oklch(81% 0.012 var(--eci-dark-hue)); --eci-color-zinc-800: oklch(88% 0.008 var(--eci-dark-hue)); --eci-color-zinc-900: oklch(93% 0.006 var(--eci-dark-hue)); --eci-color-zinc-950: oklch(96% 0.004 var(--eci-dark-hue)); /* -------------------------------------------------------------------------- Status Aliases -------------------------------------------------------------------------- Map semantic status tokens to base color palettes. These reference the accent palettes (not tinted). -------------------------------------------------------------------------- */ /* Primary - uses Zinc scale (inherits hue) */ --eci-color-primary-50: var(--eci-color-zinc-50); --eci-color-primary-100: var(--eci-color-zinc-100); --eci-color-primary-200: var(--eci-color-zinc-200); --eci-color-primary-300: var(--eci-color-zinc-300); --eci-color-primary-400: var(--eci-color-zinc-400); --eci-color-primary-500: var(--eci-color-zinc-500); --eci-color-primary-600: var(--eci-color-zinc-600); --eci-color-primary-700: var(--eci-color-zinc-700); --eci-color-primary-800: var(--eci-color-zinc-800); --eci-color-primary-900: var(--eci-color-zinc-900); --eci-color-primary-950: var(--eci-color-zinc-950); /* Success */ --eci-color-success-50: var(--eci-color-green-50); --eci-color-success-100: var(--eci-color-green-100); --eci-color-success-200: var(--eci-color-green-200); --eci-color-success-300: var(--eci-color-green-300); --eci-color-success-400: var(--eci-color-green-400); --eci-color-success-500: var(--eci-color-green-500); --eci-color-success-600: var(--eci-color-green-600); --eci-color-success-700: var(--eci-color-green-700); --eci-color-success-800: var(--eci-color-green-800); --eci-color-success-900: var(--eci-color-green-900); --eci-color-success-950: var(--eci-color-green-950); /* Warning */ --eci-color-warning-50: var(--eci-color-orange-50); --eci-color-warning-100: var(--eci-color-orange-100); --eci-color-warning-200: var(--eci-color-orange-200); --eci-color-warning-300: var(--eci-color-orange-300); --eci-color-warning-400: var(--eci-color-orange-400); --eci-color-warning-500: var(--eci-color-orange-500); --eci-color-warning-600: var(--eci-color-orange-600); --eci-color-warning-700: var(--eci-color-orange-700); --eci-color-warning-800: var(--eci-color-orange-800); --eci-color-warning-900: var(--eci-color-orange-900); --eci-color-warning-950: var(--eci-color-orange-950); /* Error */ --eci-color-error-50: var(--eci-color-red-50); --eci-color-error-100: var(--eci-color-red-100); --eci-color-error-200: var(--eci-color-red-200); --eci-color-error-300: var(--eci-color-red-300); --eci-color-error-400: var(--eci-color-red-400); --eci-color-error-500: var(--eci-color-red-500); --eci-color-error-600: var(--eci-color-red-600); --eci-color-error-700: var(--eci-color-red-700); --eci-color-error-800: var(--eci-color-red-800); --eci-color-error-900: var(--eci-color-red-900); --eci-color-error-950: var(--eci-color-red-950); /* Info */ --eci-color-info-50: var(--eci-color-blue-50); --eci-color-info-100: var(--eci-color-blue-100); --eci-color-info-200: var(--eci-color-blue-200); --eci-color-info-300: var(--eci-color-blue-300); --eci-color-info-400: var(--eci-color-blue-400); --eci-color-info-500: var(--eci-color-blue-500); --eci-color-info-600: var(--eci-color-blue-600); --eci-color-info-700: var(--eci-color-blue-700); --eci-color-info-800: var(--eci-color-blue-800); --eci-color-info-900: var(--eci-color-blue-900); --eci-color-info-950: var(--eci-color-blue-950); /* Critical */ --eci-color-critical-50: var(--eci-color-purple-50); --eci-color-critical-100: var(--eci-color-purple-100); --eci-color-critical-200: var(--eci-color-purple-200); --eci-color-critical-300: var(--eci-color-purple-300); --eci-color-critical-400: var(--eci-color-purple-400); --eci-color-critical-500: var(--eci-color-purple-500); --eci-color-critical-600: var(--eci-color-purple-600); --eci-color-critical-700: var(--eci-color-purple-700); --eci-color-critical-800: var(--eci-color-purple-800); --eci-color-critical-900: var(--eci-color-purple-900); --eci-color-critical-950: var(--eci-color-purple-950); /* * Channel triplets for Tailwind-style alpha composition. * See base `tokens/colors.css` for full documentation. The saturated * mid-tones are intentionally reused across light/dark so that semantic * accents stay recognisable regardless of theme. Neutral/secondary are * flipped to pair with dark surfaces. */ --eci-color-neutral-500-rgb: 115 115 115; --eci-color-success-500-rgb: 16 185 129; --eci-color-warning-500-rgb: 249 115 22; --eci-color-error-500-rgb: 239 68 68; --eci-color-info-500-rgb: 14 165 233; --eci-color-tip-500-rgb: 168 85 247; --eci-color-critical-500-rgb: 168 85 247; --eci-color-primary-500-rgb: 113 113 122; --eci-color-secondary-500-rgb: 230 230 230; --eci-color-tertiary-500-rgb: var(--eci-color-secondary-500-rgb); --eci-color-danger-500-rgb: var(--eci-color-error-500-rgb); --eci-color-online-500-rgb: var(--eci-color-success-500-rgb); --eci-color-offline-500-rgb: var(--eci-color-neutral-500-rgb); /* Busy */ --eci-color-busy-50: var(--eci-color-orange-50); --eci-color-busy-100: var(--eci-color-orange-100); --eci-color-busy-200: var(--eci-color-orange-200); --eci-color-busy-300: var(--eci-color-orange-300); --eci-color-busy-400: var(--eci-color-orange-400); --eci-color-busy-500: var(--eci-color-orange-500); --eci-color-busy-600: var(--eci-color-orange-600); --eci-color-busy-700: var(--eci-color-orange-700); --eci-color-busy-800: var(--eci-color-orange-800); --eci-color-busy-900: var(--eci-color-orange-900); --eci-color-busy-950: var(--eci-color-orange-950); /* Presence */ --eci-color-online-50: var(--eci-color-green-50); --eci-color-online-100: var(--eci-color-green-100); --eci-color-online-200: var(--eci-color-green-200); --eci-color-online-300: var(--eci-color-green-300); --eci-color-online-400: var(--eci-color-green-400); --eci-color-online-500: var(--eci-color-green-500); --eci-color-online-600: var(--eci-color-green-600); --eci-color-online-700: var(--eci-color-green-700); --eci-color-online-800: var(--eci-color-green-800); --eci-color-online-900: var(--eci-color-green-900); --eci-color-online-950: var(--eci-color-green-950); --eci-color-offline-50: var(--eci-color-neutral-50); --eci-color-offline-100: var(--eci-color-neutral-100); --eci-color-offline-200: var(--eci-color-neutral-200); --eci-color-offline-300: var(--eci-color-neutral-300); --eci-color-offline-400: var(--eci-color-neutral-400); --eci-color-offline-500: var(--eci-color-neutral-500); --eci-color-offline-600: var(--eci-color-neutral-600); --eci-color-offline-700: var(--eci-color-neutral-700); --eci-color-offline-800: var(--eci-color-neutral-800); --eci-color-offline-900: var(--eci-color-neutral-900); --eci-color-offline-950: var(--eci-color-neutral-950); --eci-color-away-50: var(--eci-color-orange-50); --eci-color-away-100: var(--eci-color-orange-100); --eci-color-away-200: var(--eci-color-orange-200); --eci-color-away-300: var(--eci-color-orange-300); --eci-color-away-400: var(--eci-color-orange-400); --eci-color-away-500: var(--eci-color-orange-500); --eci-color-away-600: var(--eci-color-orange-600); --eci-color-away-700: var(--eci-color-orange-700); --eci-color-away-800: var(--eci-color-orange-800); --eci-color-away-900: var(--eci-color-orange-900); --eci-color-away-950: var(--eci-color-orange-950); /* Tip */ --eci-color-tip-50: var(--eci-color-purple-50); --eci-color-tip-100: var(--eci-color-purple-100); --eci-color-tip-200: var(--eci-color-purple-200); --eci-color-tip-300: var(--eci-color-purple-300); --eci-color-tip-400: var(--eci-color-purple-400); --eci-color-tip-500: var(--eci-color-purple-500); --eci-color-tip-600: var(--eci-color-purple-600); --eci-color-tip-700: var(--eci-color-purple-700); --eci-color-tip-800: var(--eci-color-purple-800); --eci-color-tip-900: var(--eci-color-purple-900); --eci-color-tip-950: var(--eci-color-purple-950); /* -------------------------------------------------------------------------- Gradients -------------------------------------------------------------------------- Tuned for dark surfaces. These use color-mix with palette variables, so they automatically inherit any hue changes through the palette refs. -------------------------------------------------------------------------- */ --eci-gradient-primary: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-primary-400), transparent 85%) 0%, transparent 100%); --eci-gradient-primary-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-primary-400), transparent 85%) 0%, transparent 100%); --eci-gradient-primary-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-primary-400), transparent 85%) 0%, transparent 100%); --eci-gradient-primary-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-primary-400), transparent 85%) 0%, transparent 100%); --eci-gradient-primary-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-primary-400), transparent 85%) 100%); --eci-gradient-primary-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-primary-400), transparent 85%) 0%, transparent 70%); --eci-gradient-secondary: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-secondary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-secondary-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-secondary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-secondary-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-secondary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-secondary-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-secondary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-secondary-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-secondary-500), transparent 85%) 100%); --eci-gradient-secondary-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-secondary-500), transparent 85%) 0%, transparent 70%); --eci-gradient-tertiary: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-tertiary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-tertiary-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-tertiary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-tertiary-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-tertiary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-tertiary-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-tertiary-500), transparent 85%) 0%, transparent 100%); --eci-gradient-tertiary-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-tertiary-500), transparent 85%) 100%); --eci-gradient-tertiary-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-tertiary-500), transparent 85%) 0%, transparent 70%); --eci-gradient-neutral: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 85%) 0%, transparent 100%); --eci-gradient-neutral-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 85%) 0%, transparent 100%); --eci-gradient-neutral-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 85%) 0%, transparent 100%); --eci-gradient-neutral-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 85%) 0%, transparent 100%); --eci-gradient-neutral-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-neutral-100), transparent 85%) 100%); --eci-gradient-neutral-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-neutral-100), transparent 85%) 0%, transparent 70%); --eci-gradient-blue: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-blue-400), transparent 85%) 0%, transparent 100%); --eci-gradient-blue-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-blue-400), transparent 85%) 0%, transparent 100%); --eci-gradient-blue-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-blue-400), transparent 85%) 0%, transparent 100%); --eci-gradient-blue-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-blue-400), transparent 85%) 0%, transparent 100%); --eci-gradient-blue-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-blue-400), transparent 85%) 100%); --eci-gradient-blue-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-blue-400), transparent 85%) 0%, transparent 70%); --eci-gradient-green: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-green-400), transparent 85%) 0%, transparent 100%); --eci-gradient-green-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-green-400), transparent 85%) 0%, transparent 100%); --eci-gradient-green-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-green-400), transparent 85%) 0%, transparent 100%); --eci-gradient-green-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-green-400), transparent 85%) 0%, transparent 100%); --eci-gradient-green-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-green-400), transparent 85%) 100%); --eci-gradient-green-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-green-400), transparent 85%) 0%, transparent 70%); --eci-gradient-red: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-red-400), transparent 85%) 0%, transparent 100%); --eci-gradient-red-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-red-400), transparent 85%) 0%, transparent 100%); --eci-gradient-red-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-red-400), transparent 85%) 0%, transparent 100%); --eci-gradient-red-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-red-400), transparent 85%) 0%, transparent 100%); --eci-gradient-red-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-red-400), transparent 85%) 100%); --eci-gradient-red-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-red-400), transparent 85%) 0%, transparent 70%); --eci-gradient-orange: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-orange-400), transparent 85%) 0%, transparent 100%); --eci-gradient-orange-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-orange-400), transparent 85%) 0%, transparent 100%); --eci-gradient-orange-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-orange-400), transparent 85%) 0%, transparent 100%); --eci-gradient-orange-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-orange-400), transparent 85%) 0%, transparent 100%); --eci-gradient-orange-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-orange-400), transparent 85%) 100%); --eci-gradient-orange-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-orange-400), transparent 85%) 0%, transparent 70%); --eci-gradient-yellow: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-yellow-400), transparent 85%) 0%, transparent 100%); --eci-gradient-yellow-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-yellow-400), transparent 85%) 0%, transparent 100%); --eci-gradient-yellow-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-yellow-400), transparent 85%) 0%, transparent 100%); --eci-gradient-yellow-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-yellow-400), transparent 85%) 0%, transparent 100%); --eci-gradient-yellow-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-yellow-400), transparent 85%) 100%); --eci-gradient-yellow-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-yellow-400), transparent 85%) 0%, transparent 70%); --eci-gradient-purple: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-purple-400), transparent 85%) 0%, transparent 100%); --eci-gradient-purple-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-purple-400), transparent 85%) 0%, transparent 100%); --eci-gradient-purple-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-purple-400), transparent 85%) 0%, transparent 100%); --eci-gradient-purple-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-purple-400), transparent 85%) 0%, transparent 100%); --eci-gradient-purple-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-purple-400), transparent 85%) 100%); --eci-gradient-purple-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-purple-400), transparent 85%) 0%, transparent 70%); --eci-gradient-success: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-success-400), transparent 85%) 0%, transparent 100%); --eci-gradient-success-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-success-400), transparent 85%) 0%, transparent 100%); --eci-gradient-success-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-success-400), transparent 85%) 0%, transparent 100%); --eci-gradient-success-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-success-400), transparent 85%) 0%, transparent 100%); --eci-gradient-success-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-success-400), transparent 85%) 100%); --eci-gradient-success-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-success-400), transparent 85%) 0%, transparent 70%); --eci-gradient-warning: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-warning-400), transparent 85%) 0%, transparent 100%); --eci-gradient-warning-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-warning-400), transparent 85%) 0%, transparent 100%); --eci-gradient-warning-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-warning-400), transparent 85%) 0%, transparent 100%); --eci-gradient-warning-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-warning-400), transparent 85%) 0%, transparent 100%); --eci-gradient-warning-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-warning-400), transparent 85%) 100%); --eci-gradient-warning-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-warning-400), transparent 85%) 0%, transparent 70%); --eci-gradient-error: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-error-400), transparent 85%) 0%, transparent 100%); --eci-gradient-error-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-error-400), transparent 85%) 0%, transparent 100%); --eci-gradient-error-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-error-400), transparent 85%) 0%, transparent 100%); --eci-gradient-error-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-error-400), transparent 85%) 0%, transparent 100%); --eci-gradient-error-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-error-400), transparent 85%) 100%); --eci-gradient-error-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-error-400), transparent 85%) 0%, transparent 70%); --eci-gradient-critical: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-critical-400), transparent 85%) 0%, transparent 100%); --eci-gradient-critical-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-critical-400), transparent 85%) 0%, transparent 100%); --eci-gradient-critical-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-critical-400), transparent 85%) 0%, transparent 100%); --eci-gradient-critical-diagonal: linear-gradient(45deg, color-mix(in oklch, var(--eci-color-critical-400), transparent 85%) 0%, transparent 100%); --eci-gradient-critical-diagonal-corner: linear-gradient(45deg, transparent 65%, color-mix(in oklch, var(--eci-color-critical-400), transparent 85%) 100%); --eci-gradient-critical-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-critical-400), transparent 85%) 0%, transparent 70%); /* Surface gradient: very subtle light lift on dark */ --eci-gradient-surface: linear-gradient(135deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 92%) 0%, transparent 100%); --eci-gradient-surface-vertical: linear-gradient(180deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 92%) 0%, transparent 100%); --eci-gradient-surface-horizontal: linear-gradient(90deg, color-mix(in oklch, var(--eci-color-neutral-100), transparent 92%) 0%, transparent 100%); --eci-gradient-surface-radial: radial-gradient(circle at top left, color-mix(in oklch, var(--eci-color-neutral-100), transparent 92%) 0%, transparent 70%); /* -------------------------------------------------------------------------- Overlay Colors -------------------------------------------------------------------------- */ --eci-overlay-dark-color: oklch(15% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.25); --eci-overlay-light-color: oklch(22% var(--eci-dark-chroma) var(--eci-dark-hue) / 0.15); /* -------------------------------------------------------------------------- Subtle Gradient Backgrounds -------------------------------------------------------------------------- Tuned for dark surfaces with better visibility. -------------------------------------------------------------------------- */ --eci-gradient-subtle-primary: linear-gradient(145deg, var(--eci-color-primary-200), var(--eci-color-primary-300)); --eci-gradient-subtle-primary-border: var(--eci-color-primary-300); --eci-gradient-subtle-primary-text: var(--eci-color-primary-700); --eci-gradient-subtle-neutral: linear-gradient(145deg, var(--eci-color-neutral-200), var(--eci-color-neutral-300)); --eci-gradient-subtle-neutral-border: var(--eci-color-neutral-300); --eci-gradient-subtle-neutral-text: var(--eci-color-neutral-700); --eci-gradient-subtle-success: linear-gradient(145deg, var(--eci-color-success-200), var(--eci-color-success-300)); --eci-gradient-subtle-success-border: var(--eci-color-success-300); --eci-gradient-subtle-success-text: var(--eci-color-success-700); --eci-gradient-subtle-warning: linear-gradient(145deg, var(--eci-color-warning-200), var(--eci-color-warning-300)); --eci-gradient-subtle-warning-border: var(--eci-color-warning-300); --eci-gradient-subtle-warning-text: var(--eci-color-warning-700); --eci-gradient-subtle-error: linear-gradient(145deg, var(--eci-color-error-200), var(--eci-color-error-300)); --eci-gradient-subtle-error-border: var(--eci-color-error-300); --eci-gradient-subtle-error-text: var(--eci-color-error-700); --eci-gradient-subtle-info: linear-gradient(145deg, var(--eci-color-info-200), var(--eci-color-info-300)); --eci-gradient-subtle-info-border: var(--eci-color-info-300); --eci-gradient-subtle-info-text: var(--eci-color-info-700); /* -------------------------------------------------------------------------- Component Overrides -------------------------------------------------------------------------- Specific component tokens for dark theme. -------------------------------------------------------------------------- */ --eci-button-primary-background-color: var(--eci-color-primary-400); --eci-button-primary-text-color: var(--eci-color-text-white); --eci-button-primary-border-color: var(--eci-color-primary-500); --eci-button-primary-hover-background-color: var(--eci-color-primary-600); --eci-button-primary-hover-border-color: var(--eci-color-primary-500); --eci-button-primary-active-background-color: var(--eci-color-primary-700); --eci-button-primary-active-border-color: var(--eci-color-primary-700); --eci-image-dark-variant-display: block; --eci-image-light-variant-display: none; } /* ========================================================================== Dark Theme Variants ========================================================================== These variants only override the hue control variables. All other tokens automatically adapt through the OKLCH color system. Usage: Or in CSS: [data-theme="dark"][data-theme-variant="warm"] { ... } ========================================================================== */ /* -------------------------------------------------------------------------- Warm Variant (Brown/Gray) -------------------------------------------------------------------------- A subtle warm gray with olive undertones. Based on hsl(60 2.7% 14.5%) - nearly neutral with gentle warmth. Good for: cozy interfaces, reading apps, evening use. -------------------------------------------------------------------------- */ [data-theme="dark"][data-theme-variant="warm"] { --eci-dark-hue: 110; --eci-dark-chroma: 0.006; } /* -------------------------------------------------------------------------- Cool Variant (Blue/Gray) - Current Default -------------------------------------------------------------------------- A subtle cool gray with blue undertones. Professional and modern feel. Good for: productivity apps, dashboards, technical interfaces. -------------------------------------------------------------------------- */ [data-theme="dark"][data-theme-variant="cool"] { --eci-dark-hue: 220; --eci-dark-chroma: 0.005; } /* -------------------------------------------------------------------------- Neutral Variant (Pure Gray) -------------------------------------------------------------------------- Pure neutral gray with no color tint. Maximum neutrality for color-sensitive work. Good for: design tools, photo editing, color-critical applications. -------------------------------------------------------------------------- */ [data-theme="dark"][data-theme-variant="neutral"] { --eci-dark-hue: 0; --eci-dark-chroma: 0; }