/* theme/palette.css * Layer: theme * Colors, surfaces, shadows, technical dimensions * * This file defines the complete color system including: * - Base colors (text, primary, secondary) * - Surface variants (surface, surface-alt, surface-raised, etc.) - computed from defaults * - Status colors (success, warning, critical, info) * - Border colors * - Shadow scale (xs to 2xl) * - Technical dimensions (borders, focus rings, scrollbars) * * Note: CSS functions (--shade, --tint, --alpha, etc.) are defined in functions.css */ @layer theme { :root { /* Color scheme: automatic light/dark mode via light-dark() */ color-scheme: light dark; accent-color: var(--color-primary); /* ─── Base Colors ── * Core color tokens used throughout the design system * Uses OKLCH for better color manipulation and consistency * Note: --default-color-text-* are defined in theme.css */ /* Text color: uses light-dark() for automatic theme switching */ --color-text: light-dark(var(--default-color-text-light), var(--default-color-text-dark)); /* Primary brand color: blue (OKLCH) - used for buttons, links, focus states */ --color-primary: oklch(0.546 0.245 262.881); /* #3b82f6 */ /* Secondary color: computed from primary using harmony function (+30 hue rotation) */ --color-secondary: oklch(from var(--color-primary) l c calc(h + 30)); /* Complementary color: computed from primary (180 hue rotation) * Available for custom usage: color: var(--color-complementary); */ --color-complementary: oklch(from var(--color-primary) l c calc(h + 180)); /* ─── Color Variants ── * Derived colors for interactive states */ /* Hover state: primary with 8% less lightness (darker) */ --color-primary-hover: oklch(from var(--color-primary) calc(l - 0.08) c h); /* Muted state: primary with 28% more lightness (lighter) */ --color-primary-muted: oklch(from var(--color-primary) calc(l + 0.28) c h); /* ─── Surfaces ── * Background layers for different UI elevations * Computed from --default-color-surface-base using functions * All use light-dark() for automatic theme support */ /* Base surface color: uses light-dark() * Note: --default-color-surface-* are defined in theme.css */ --color-surface: light-dark(var(--default-color-surface-light), var(--default-color-surface-dark)); /* Alternate surfaces: slightly elevated (sidebar, header, table header) */ --color-surface-alt: light-dark( color-mix(in srgb, var(--default-color-surface-light), black 3%), var(--default-color-surface-dark-alt) ); /* Raised surfaces: more elevated (cards, modals, panels) */ --color-surface-raised: light-dark( var(--default-color-surface-light), var(--default-color-surface-dark-raised) ); /* Overlay surfaces: surface with alpha */ --color-surface-overlay: light-dark( oklch(from var(--default-color-surface-light) l c h / 0.85), oklch(from var(--default-color-surface-dark) l c h / 0.85) ); /* Sunken surfaces: surface with more shade (inputs, inset zones) */ --color-surface-sunken: light-dark( color-mix(in srgb, var(--default-color-surface-light), black 7%), color-mix(in srgb, var(--default-color-surface-dark), black 25%) ); /* Hover state: surface with slight shade */ --color-surface-hover: light-dark( color-mix(in srgb, var(--default-color-surface-light), black 6%), color-mix(in srgb, var(--default-color-surface-dark), white 40%) ); /* Active/selected state: surface with primary tint */ --color-surface-active: light-dark( color-mix(in srgb, var(--color-primary) 8%, var(--default-color-surface-light)), color-mix(in srgb, var(--color-primary) 15%, var(--default-color-surface-dark)) ); /* Inverse surface: dark panel on light page / light panel on dark page * Use for: sidebar inverse (Slack), dark nav header (GitHub) */ --color-surface-inverse: light-dark( var(--default-color-surface-dark-alt), var(--default-color-surface-light) ); /* Text on inverse surface */ --color-text-inverse: light-dark( var(--default-color-text-dark), var(--default-color-text-light) ); /* ─── Status Colors ── * Semantic colors for feedback states (OKLCH) */ /* Success: green - confirmations, completed states */ --color-success: oklch(0.627 0.194 149.214); /* #10b981 */ /* Warning: amber - cautions, pending states */ --color-warning: oklch(0.705 0.213 79.98); /* #f59e0b */ /* Critical/Error: red - errors, destructive actions */ --color-critical: oklch(0.637 0.237 25.331); /* #ef4444 */ /* Info: blue - informational messages */ --color-info: var(--color-primary); /* On-primary: text/icon color for use on --color-primary backgrounds */ --color-on-primary: white; /* Warning emphasis: darkened warning for text-on-light contexts (oklch 0.705 fails contrast on white) */ --color-warning-emphasis: color-mix(in oklch, var(--color-warning), black 30%); /* ─── Borders ── * Border colors derived from primary color with transparency * Light mode: primary with alpha on light background * Dark mode: primary with alpha on dark background */ /* Default border: primary color with transparency (subtle border) */ --color-border: light-dark( oklch(from var(--color-primary) 0.85 0.04 265 / 0.35), oklch(from var(--color-primary) 0.55 0.15 265 / 0.5) ); /* Strong border (hover, focus): darker and less transparent */ --color-border-strong: light-dark( oklch(from var(--color-primary) 0.75 0.06 265 / 0.6), oklch(from var(--color-primary) 0.45 0.18 265 / 0.7) ); /* ─── Text Variants ── * Additional text colors (OKLCH) */ /* Muted text: gray / blue-gray - secondary text, captions */ --color-text-muted: light-dark(oklch(0.551 0.045 264.364), oklch(0.696 0.044 265.755)); /* ─── Shadows ── * Elevation shadows derived from text color for natural appearance * Uses OKLCH relative color syntax to compute shadow from --color-text */ /* Shadow color base: derived from text color with low lightness and desaturated */ --shadow-color: light-dark( oklch(from var(--color-text) 0.25 0.01 h), oklch(from var(--color-text) 0.15 0 h) ); /* Extra small shadow: 1px offset, 2px blur, 96% transparent - subtle elevation */ --shadow-xs: 0 1px 2px color-mix(in oklch, var(--shadow-color), transparent 96%); /* Small shadow: 1px offset, 3px blur, 94% transparent - cards, buttons */ --shadow-sm: 0 1px 3px color-mix(in oklch, var(--shadow-color), transparent 94%); /* Medium shadow: 2px offset, 4px blur, 92% transparent - default elevation */ --shadow-md: 0 2px 4px color-mix(in oklch, var(--shadow-color), transparent 92%); /* Large shadow: 4px offset, 12px blur, 88% transparent - dropdowns, modals */ --shadow-lg: 0 4px 12px color-mix(in oklch, var(--shadow-color), transparent 88%); /* Extra large shadow: 8px offset, 24px blur, 84% transparent - floating panels */ --shadow-xl: 0 8px 24px color-mix(in oklch, var(--shadow-color), transparent 84%); /* 2XL shadow: 12px offset, 32px blur, 80% transparent - maximum elevation */ --shadow-2xl: 0 12px 32px color-mix(in oklch, var(--shadow-color), transparent 80%); /* ─── Technical Dimensions ── * Precise measurements for UI elements * Derived from spacing scale where possible */ /* Default border width: 1px */ --border-width: 1px; /* Focus ring: now handled directly in components with outline * (outline: 1.5px solid var(--color-primary); outline-offset: 1px;) * Kept here for backward compat if custom overrides need them. */ --focus-ring-width: 1.5px; --focus-ring-gap: 1px; /* Custom scrollbar dimensions: derived from spacing scale */ --scrollbar-width: calc(var(--gutter-xs) * 1.5); /* 6px */ --scrollbar-height: calc(var(--gutter-xs) * 1.5); /* 6px */ } /* ─── Manual Theme Override ── * Allow apps to force light or dark mode via data-theme attribute * Usage: or * JavaScript controls this attribute based on user preference */ [data-theme="light"] { color-scheme: light; } [data-theme="dark"] { color-scheme: dark; } }