/* BlazorBlueprint Theme System — Base & Primary Color Definitions * Uses OKLCH color space. Scoped via data attributes on . * * Usage: * * * These selectors override the user's theme.css :root block when data * attributes are present, falling back gracefully when they are not. */ /* ════════════════════════════════════════════════════════════════════════════ * BASE COLORS — Gray scale palettes * Sets: background, foreground, card, popover, secondary, muted, accent, * border, input, ring, sidebar-*, destructive, chart-* * ════════════════════════════════════════════════════════════════════════════ */ /* ── Zinc (cool gray, subtle blue undertone) ────────────────────────────── */ [data-base-color="zinc"] { --background: oklch(1 0 0); --foreground: oklch(0.1410 0.004 285.82); --card: oklch(1 0 0); --card-foreground: oklch(0.1410 0.004 285.82); --popover: oklch(1 0 0); --popover-foreground: oklch(0.1410 0.004 285.82); --primary: oklch(0.2100 0.006 285.88); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.9670 0.001 286.38); --secondary-foreground: oklch(0.2100 0.006 285.88); --muted: oklch(0.9670 0.001 286.38); --muted-foreground: oklch(0.5520 0.016 285.94); --accent: oklch(0.9670 0.001 286.38); --accent-foreground: oklch(0.2100 0.006 285.88); --destructive: oklch(0.5770 0.245 27.33); --destructive-foreground: oklch(1 0 0); --border: oklch(0.9200 0.004 286.32); --input: oklch(0.9200 0.004 286.32); --ring: oklch(0.5520 0.016 285.94); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.714); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.1410 0.004 285.82); --sidebar-primary: oklch(0.2100 0.006 285.88); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.9670 0.001 286.38); --sidebar-accent-foreground: oklch(0.2100 0.006 285.88); --sidebar-border: oklch(0.9200 0.004 286.32); --sidebar-ring: oklch(0.5520 0.016 285.94); } [data-base-color="zinc"].dark, .dark[data-base-color="zinc"] { --background: oklch(0.1410 0.004 285.82); --foreground: oklch(0.985 0 0); --card: oklch(0.1410 0.004 285.82); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.1410 0.004 285.82); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.2100 0.006 285.88); --secondary: oklch(0.2740 0.006 286.03); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.2740 0.006 286.03); --muted-foreground: oklch(0.7050 0.015 286.07); --accent: oklch(0.2740 0.006 286.03); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.2740 0.006 286.03); --input: oklch(0.2740 0.006 286.03); --ring: oklch(0.5520 0.016 285.94); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.1410 0.004 285.82); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.2740 0.006 286.03); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.2740 0.006 286.03); --sidebar-ring: oklch(0.5520 0.016 285.94); } /* ── Slate (cool blue-gray) ─────────────────────────────────────────────── */ [data-base-color="slate"] { --background: oklch(1 0 0); --foreground: oklch(0.129 0.042 264.695); --card: oklch(1 0 0); --card-foreground: oklch(0.129 0.042 264.695); --popover: oklch(1 0 0); --popover-foreground: oklch(0.129 0.042 264.695); --primary: oklch(0.208 0.042 265.755); --primary-foreground: oklch(0.984 0.003 247.858); --secondary: oklch(0.968 0.007 247.896); --secondary-foreground: oklch(0.208 0.042 265.755); --muted: oklch(0.968 0.007 247.896); --muted-foreground: oklch(0.554 0.046 257.417); --accent: oklch(0.968 0.007 247.896); --accent-foreground: oklch(0.208 0.042 265.755); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.929 0.013 255.508); --input: oklch(0.929 0.013 255.508); --ring: oklch(0.554 0.046 257.417); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.714); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.984 0.003 247.858); --sidebar-foreground: oklch(0.129 0.042 264.695); --sidebar-primary: oklch(0.208 0.042 265.755); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-accent: oklch(0.968 0.007 247.896); --sidebar-accent-foreground: oklch(0.208 0.042 265.755); --sidebar-border: oklch(0.929 0.013 255.508); --sidebar-ring: oklch(0.554 0.046 257.417); } [data-base-color="slate"].dark, .dark[data-base-color="slate"] { --background: oklch(0.129 0.042 264.695); --foreground: oklch(0.984 0.003 247.858); --card: oklch(0.129 0.042 264.695); --card-foreground: oklch(0.984 0.003 247.858); --popover: oklch(0.129 0.042 264.695); --popover-foreground: oklch(0.984 0.003 247.858); --primary: oklch(0.984 0.003 247.858); --primary-foreground: oklch(0.208 0.042 265.755); --secondary: oklch(0.279 0.041 260.031); --secondary-foreground: oklch(0.984 0.003 247.858); --muted: oklch(0.279 0.041 260.031); --muted-foreground: oklch(0.704 0.04 256.788); --accent: oklch(0.279 0.041 260.031); --accent-foreground: oklch(0.984 0.003 247.858); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.984 0.003 247.858); --border: oklch(0.279 0.041 260.031); --input: oklch(0.279 0.041 260.031); --ring: oklch(0.554 0.046 257.417); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.129 0.042 264.695); --sidebar-foreground: oklch(0.984 0.003 247.858); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.984 0.003 247.858); --sidebar-accent: oklch(0.279 0.041 260.031); --sidebar-accent-foreground: oklch(0.984 0.003 247.858); --sidebar-border: oklch(0.279 0.041 260.031); --sidebar-ring: oklch(0.554 0.046 257.417); } /* ── Gray (pure balanced gray) ──────────────────────────────────────────── */ [data-base-color="gray"] { --background: oklch(1 0 0); --foreground: oklch(0.13 0.028 261.692); --card: oklch(1 0 0); --card-foreground: oklch(0.13 0.028 261.692); --popover: oklch(1 0 0); --popover-foreground: oklch(0.13 0.028 261.692); --primary: oklch(0.21 0.034 264.665); --primary-foreground: oklch(0.985 0.002 247.839); --secondary: oklch(0.967 0.003 264.542); --secondary-foreground: oklch(0.21 0.034 264.665); --muted: oklch(0.967 0.003 264.542); --muted-foreground: oklch(0.551 0.027 264.364); --accent: oklch(0.967 0.003 264.542); --accent-foreground: oklch(0.21 0.034 264.665); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.928 0.006 264.531); --input: oklch(0.928 0.006 264.531); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.714); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.002 247.839); --sidebar-foreground: oklch(0.13 0.028 261.692); --sidebar-primary: oklch(0.21 0.034 264.665); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.967 0.003 264.542); --sidebar-accent-foreground: oklch(0.21 0.034 264.665); --sidebar-border: oklch(0.928 0.006 264.531); --sidebar-ring: oklch(0.551 0.027 264.364); } [data-base-color="gray"].dark, .dark[data-base-color="gray"] { --background: oklch(0.13 0.028 261.692); --foreground: oklch(0.985 0.002 247.839); --card: oklch(0.13 0.028 261.692); --card-foreground: oklch(0.985 0.002 247.839); --popover: oklch(0.13 0.028 261.692); --popover-foreground: oklch(0.985 0.002 247.839); --primary: oklch(0.985 0.002 247.839); --primary-foreground: oklch(0.21 0.034 264.665); --secondary: oklch(0.274 0.032 261.523); --secondary-foreground: oklch(0.985 0.002 247.839); --muted: oklch(0.274 0.032 261.523); --muted-foreground: oklch(0.707 0.022 261.325); --accent: oklch(0.274 0.032 261.523); --accent-foreground: oklch(0.985 0.002 247.839); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0.002 247.839); --border: oklch(0.274 0.032 261.523); --input: oklch(0.274 0.032 261.523); --ring: oklch(0.551 0.027 264.364); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.13 0.028 261.692); --sidebar-foreground: oklch(0.985 0.002 247.839); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.002 247.839); --sidebar-accent: oklch(0.274 0.032 261.523); --sidebar-accent-foreground: oklch(0.985 0.002 247.839); --sidebar-border: oklch(0.274 0.032 261.523); --sidebar-ring: oklch(0.551 0.027 264.364); } /* ── Neutral (true neutral, zero chroma) ────────────────────────────────── */ [data-base-color="neutral"] { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.556 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.714); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.556 0 0); } [data-base-color="neutral"].dark, .dark[data-base-color="neutral"] { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0 0); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.556 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.145 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.556 0 0); } /* ── Stone (warm gray, yellow/brown undertone) ──────────────────────────── */ [data-base-color="stone"] { --background: oklch(1 0 0); --foreground: oklch(0.147 0.004 49.25); --card: oklch(1 0 0); --card-foreground: oklch(0.147 0.004 49.25); --popover: oklch(1 0 0); --popover-foreground: oklch(0.147 0.004 49.25); --primary: oklch(0.216 0.006 56.043); --primary-foreground: oklch(0.985 0.001 106.424); --secondary: oklch(0.97 0.001 106.424); --secondary-foreground: oklch(0.216 0.006 56.043); --muted: oklch(0.97 0.001 106.424); --muted-foreground: oklch(0.553 0.013 58.071); --accent: oklch(0.97 0.001 106.424); --accent-foreground: oklch(0.216 0.006 56.043); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(1 0 0); --border: oklch(0.923 0.003 48.717); --input: oklch(0.923 0.003 48.717); --ring: oklch(0.553 0.013 58.071); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.714); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --sidebar: oklch(0.985 0.001 106.424); --sidebar-foreground: oklch(0.147 0.004 49.25); --sidebar-primary: oklch(0.216 0.006 56.043); --sidebar-primary-foreground: oklch(0.985 0.001 106.424); --sidebar-accent: oklch(0.97 0.001 106.424); --sidebar-accent-foreground: oklch(0.216 0.006 56.043); --sidebar-border: oklch(0.923 0.003 48.717); --sidebar-ring: oklch(0.553 0.013 58.071); } [data-base-color="stone"].dark, .dark[data-base-color="stone"] { --background: oklch(0.147 0.004 49.25); --foreground: oklch(0.985 0.001 106.424); --card: oklch(0.147 0.004 49.25); --card-foreground: oklch(0.985 0.001 106.424); --popover: oklch(0.147 0.004 49.25); --popover-foreground: oklch(0.985 0.001 106.424); --primary: oklch(0.985 0.001 106.424); --primary-foreground: oklch(0.216 0.006 56.043); --secondary: oklch(0.268 0.007 34.298); --secondary-foreground: oklch(0.985 0.001 106.424); --muted: oklch(0.268 0.007 34.298); --muted-foreground: oklch(0.709 0.01 56.259); --accent: oklch(0.268 0.007 34.298); --accent-foreground: oklch(0.985 0.001 106.424); --destructive: oklch(0.704 0.191 22.216); --destructive-foreground: oklch(0.985 0.001 106.424); --border: oklch(0.268 0.007 34.298); --input: oklch(0.268 0.007 34.298); --ring: oklch(0.553 0.013 58.071); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --sidebar: oklch(0.147 0.004 49.25); --sidebar-foreground: oklch(0.985 0.001 106.424); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0.001 106.424); --sidebar-accent: oklch(0.268 0.007 34.298); --sidebar-accent-foreground: oklch(0.985 0.001 106.424); --sidebar-border: oklch(0.268 0.007 34.298); --sidebar-ring: oklch(0.553 0.013 58.071); } /* ════════════════════════════════════════════════════════════════════════════ * PRIMARY COLORS — Accent overrides * Sets: --primary, --primary-foreground, --ring * The "default" primary inherits from the base color (no attribute needed). * ════════════════════════════════════════════════════════════════════════════ */ /* ── Blue ───────────────────────────────────────────────────────────────── */ [data-primary-color="blue"] { --primary: oklch(0.546 0.245 262.88); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.546 0.245 262.88); } .dark[data-primary-color="blue"], [data-primary-color="blue"].dark { --primary: oklch(0.623 0.214 259.82); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.623 0.214 259.82); } /* ── Violet ─────────────────────────────────────────────────────────────── */ [data-primary-color="violet"] { --primary: oklch(0.541 0.281 293.009); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.541 0.281 293.009); } .dark[data-primary-color="violet"], [data-primary-color="violet"].dark { --primary: oklch(0.654 0.236 292.756); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.654 0.236 292.756); } /* ── Purple ─────────────────────────────────────────────────────────────── */ [data-primary-color="purple"] { --primary: oklch(0.553 0.261 301.924); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.553 0.261 301.924); } .dark[data-primary-color="purple"], [data-primary-color="purple"].dark { --primary: oklch(0.627 0.265 303.9); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.627 0.265 303.9); } /* ── Rose ───────────────────────────────────────────────────────────────── */ [data-primary-color="rose"] { --primary: oklch(0.585 0.22 3.958); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.585 0.22 3.958); } .dark[data-primary-color="rose"], [data-primary-color="rose"].dark { --primary: oklch(0.645 0.246 16.439); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.645 0.246 16.439); } /* ── Red ────────────────────────────────────────────────────────────────── */ [data-primary-color="red"] { --primary: oklch(0.577 0.245 27.325); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.577 0.245 27.325); } .dark[data-primary-color="red"], [data-primary-color="red"].dark { --primary: oklch(0.704 0.191 22.216); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.704 0.191 22.216); } /* ── Orange ─────────────────────────────────────────────────────────────── */ [data-primary-color="orange"] { --primary: oklch(0.705 0.213 47.604); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.705 0.213 47.604); } .dark[data-primary-color="orange"], [data-primary-color="orange"].dark { --primary: oklch(0.769 0.188 70.08); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.769 0.188 70.08); } /* ── Amber ──────────────────────────────────────────────────────────────── */ [data-primary-color="amber"] { --primary: oklch(0.769 0.188 70.08); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.769 0.188 70.08); } .dark[data-primary-color="amber"], [data-primary-color="amber"].dark { --primary: oklch(0.828 0.189 84.429); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.828 0.189 84.429); } /* ── Yellow ─────────────────────────────────────────────────────────────── */ [data-primary-color="yellow"] { --primary: oklch(0.852 0.199 91.936); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.852 0.199 91.936); } .dark[data-primary-color="yellow"], [data-primary-color="yellow"].dark { --primary: oklch(0.905 0.182 98.111); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.905 0.182 98.111); } /* ── Lime ───────────────────────────────────────────────────────────────── */ [data-primary-color="lime"] { --primary: oklch(0.768 0.233 130.85); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.768 0.233 130.85); } .dark[data-primary-color="lime"], [data-primary-color="lime"].dark { --primary: oklch(0.841 0.238 128.85); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.841 0.238 128.85); } /* ── Green ──────────────────────────────────────────────────────────────── */ [data-primary-color="green"] { --primary: oklch(0.596 0.145 163.225); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.596 0.145 163.225); } .dark[data-primary-color="green"], [data-primary-color="green"].dark { --primary: oklch(0.696 0.17 162.48); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.696 0.17 162.48); } /* ── Emerald ────────────────────────────────────────────────────────────── */ [data-primary-color="emerald"] { --primary: oklch(0.596 0.145 163.225); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.596 0.145 163.225); } .dark[data-primary-color="emerald"], [data-primary-color="emerald"].dark { --primary: oklch(0.696 0.17 162.48); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.696 0.17 162.48); } /* ── Teal ───────────────────────────────────────────────────────────────── */ [data-primary-color="teal"] { --primary: oklch(0.627 0.134 184.128); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.627 0.134 184.128); } .dark[data-primary-color="teal"], [data-primary-color="teal"].dark { --primary: oklch(0.704 0.14 182.503); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.704 0.14 182.503); } /* ── Cyan ───────────────────────────────────────────────────────────────── */ [data-primary-color="cyan"] { --primary: oklch(0.655 0.151 207.078); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.655 0.151 207.078); } .dark[data-primary-color="cyan"], [data-primary-color="cyan"].dark { --primary: oklch(0.715 0.143 215.221); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.715 0.143 215.221); } /* ── Sky ────────────────────────────────────────────────────────────────── */ [data-primary-color="sky"] { --primary: oklch(0.6 0.118 184.714); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.6 0.118 184.714); } .dark[data-primary-color="sky"], [data-primary-color="sky"].dark { --primary: oklch(0.681 0.162 222.72); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.681 0.162 222.72); } /* ── Indigo ─────────────────────────────────────────────────────────────── */ [data-primary-color="indigo"] { --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.488 0.243 264.376); } .dark[data-primary-color="indigo"], [data-primary-color="indigo"].dark { --primary: oklch(0.585 0.233 277.117); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.585 0.233 277.117); } /* ── Fuchsia ─────────────────────────────────────────────────────────────── */ [data-primary-color="fuchsia"] { --primary: oklch(0.591 0.293 322.896); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.591 0.293 322.896); } .dark[data-primary-color="fuchsia"], [data-primary-color="fuchsia"].dark { --primary: oklch(0.694 0.222 320.364); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.694 0.222 320.364); } /* ── Pink ───────────────────────────────────────────────────────────────── */ [data-primary-color="pink"] { --primary: oklch(0.592 0.249 0.584); --primary-foreground: oklch(0.985 0 0); --ring: oklch(0.592 0.249 0.584); } .dark[data-primary-color="pink"], [data-primary-color="pink"].dark { --primary: oklch(0.699 0.199 356.048); --primary-foreground: oklch(0.15 0 0); --ring: oklch(0.699 0.199 356.048); }