/** * Knowledge Base Theme Palettes * * AUTO-GENERATED by build_themes.py * Generated: 2026-02-07T17:17:46.464309 * * Contains themes (default + solarized + tweakcn imports) * Each theme has light and dark mode variants. * * Derived variables use CSS color-mix() for perceptually accurate colors. * Requires browser support for color-mix() (~95% coverage). */ /* ============================================================================ DEFAULT Theme Custom default theme matching current look ============================================================================ */ :root, [data-theme="default"][data-mode="dark"] { color-scheme: dark; /* Base colors */ --kb-bg-body: #0a0a0f; --kb-bg-card: #111118; --kb-bg-popover: #1a1a24; --kb-bg-subtle: #16161e; --kb-bg-muted: #22222e; --kb-bg-input: #1a1a24; --kb-text-primary: #f0f0f5; --kb-text-secondary: #a0a0b0; --kb-text-muted: #606070; /* Theme colors */ --kb-primary: #6366f1; /* Indigo - primary brand */ --kb-primary-fg: #ffffff; /* White text on indigo */ --kb-info: #22d3ee; /* Cyan - secondary/complementary */ --kb-info-fg: #0a0a0f; /* Dark text on bright cyan */ --kb-accent: #8b5cf6; /* Purple - accent */ --kb-accent-fg: #ffffff; /* White text on purple */ --kb-border-default: #2a2a36; --kb-danger: #ef4444; --kb-danger-fg: #ffffff; --kb-admin-sidebar-bg: #111118; --kb-admin-nav-color: #606070; /* Shadows */ --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --kb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --kb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --kb-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Manual overrides - use hand-picked values instead of derived */ --kb-text-secondary: #a0a0b0; --kb-bg-subtle: #16161e; } [data-theme="default"][data-mode="light"], [data-mode="light"]:not([data-theme]) { color-scheme: light; /* Base colors */ --kb-bg-body: #fafafa; --kb-bg-card: #ffffff; --kb-bg-popover: #ffffff; --kb-bg-muted: #f0f0f0; --kb-bg-input: #ffffff; --kb-text-primary: #171717; --kb-text-muted: #a3a3a3; /* Theme colors */ --kb-primary: #4f46e5; /* Indigo - primary brand */ --kb-primary-fg: #ffffff; /* White text on indigo */ --kb-info: #0891b2; /* Cyan - secondary/complementary */ --kb-info-fg: #ffffff; /* White text on darker cyan */ --kb-accent: #7c3aed; /* Purple - accent */ --kb-accent-fg: #ffffff; /* White text on purple */ --kb-border-default: #e5e5e5; --kb-danger: #dc2626; --kb-danger-fg: #ffffff; --kb-admin-sidebar-bg: #ffffff; --kb-admin-nav-color: #a3a3a3; /* Shadows */ --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --kb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --kb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --kb-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Manual overrides - use hand-picked values instead of derived */ --kb-text-secondary: #525252; --kb-bg-subtle: #f5f5f5; } /* ============================================================================ SOLARIZED Theme Official Ethan Schoonover palette https://ethanschoonover.com/solarized/ ============================================================================ */ [data-theme="solarized"][data-mode="dark"] { color-scheme: dark; /* Monotone colors */ /* base03: #002b36 (Background Dark) base02: #073642 (Background Highlights Dark) base01: #586e75 (Comments / Muted) base00: #657b83 (Body Text Light Mode) base0: #839496 (Body Text Dark Mode) base1: #93a1a1 (Emphasized Content) base2: #eee8d5 (Background Highlights Light) base3: #fdf6e3 (Background Light) */ /* Backgrounds */ --kb-bg-body: #002b36; /* base03 */ --kb-bg-card: #073642; /* base02 */ --kb-bg-popover: #094552; --kb-bg-subtle: #073642; /* base02 */ --kb-bg-muted: #0a4f5c; --kb-bg-input: #073642; /* base02 */ /* Text - FIXED: proper hierarchy */ --kb-text-primary: #839496; /* base0 - main body text */ --kb-text-secondary: #93a1a1; /* base1 - brighter than primary */ --kb-text-muted: #586e75; /* base01 - de-emphasized */ /* Theme colors - Solarized accent palette */ --kb-primary: #268bd2; /* blue */ --kb-primary-fg: #fdf6e3; /* base3 - light text on blue */ --kb-info: #2aa198; /* cyan */ --kb-info-fg: #fdf6e3; /* base3 - light text on cyan */ --kb-accent: #6c71c4; /* violet */ --kb-accent-fg: #fdf6e3; /* base3 - light text on violet */ /* Borders */ --kb-border-default: #094552; /* Status - use Solarized accent colors */ --kb-danger: #dc322f; /* red */ --kb-danger-fg: #fdf6e3; /* base3 - light text on red */ /* Admin */ --kb-admin-sidebar-bg: #073642; --kb-admin-nav-color: #586e75; /* Shadows */ --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --kb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --kb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); --kb-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.7); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Manual overrides - use official Solarized palette values */ --kb-text-secondary: #93a1a1; /* base1 - brighter than primary */ --kb-bg-subtle: #073642; /* base02 */ } [data-theme="solarized"][data-mode="light"] { color-scheme: light; /* Backgrounds - inverted from dark */ --kb-bg-body: #fdf6e3; /* base3 */ --kb-bg-card: #eee8d5; /* base2 */ --kb-bg-popover: #eee8d5; /* base2 */ --kb-bg-muted: #e6dfcb; --kb-bg-input: #fdf6e3; /* base3 */ /* Text - FIXED: proper hierarchy for light mode */ --kb-text-primary: #657b83; /* base00 - main body text */ --kb-text-muted: #93a1a1; /* base1 - de-emphasized */ /* Theme colors - same as dark mode */ --kb-primary: #268bd2; /* blue */ --kb-primary-fg: #fdf6e3; /* base3 - light text on blue */ --kb-info: #2aa198; /* cyan */ --kb-info-fg: #fdf6e3; /* base3 - light text on cyan */ --kb-accent: #6c71c4; /* violet */ --kb-accent-fg: #fdf6e3; /* base3 - light text on violet */ /* Borders */ --kb-border-default: #e6dfcb; /* Status */ --kb-danger: #dc322f; /* red */ --kb-danger-fg: #fdf6e3; /* base3 - light text on red */ /* Admin */ --kb-admin-sidebar-bg: #eee8d5; --kb-admin-nav-color: #93a1a1; /* Shadows */ --kb-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --kb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); --kb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); --kb-shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.15); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Manual overrides - use official Solarized palette values */ --kb-text-secondary: #586e75; /* base01 - slightly darker */ --kb-bg-subtle: #eee8d5; /* base2 */ } /* ============================================================================ AMBER-MINIMAL Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="amber-minimal"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9846 0.0017 247.8389); --kb-bg-input: oklch(0.9276 0.0058 264.5313); --kb-text-primary: oklch(0.2686 0 0); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.7686 0.1647 70.0804); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.9670 0.0029 264.5419); --kb-info-fg: oklch(0.4461 0.0263 256.8018); --kb-accent: oklch(0.9869 0.0214 95.2774); --kb-accent-fg: oklch(0.4732 0.1247 46.2007); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9276 0.0058 264.5313); --kb-admin-sidebar-bg: oklch(0.9846 0.0017 247.8389); --kb-admin-nav-color: oklch(0.2686 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); } [data-theme="amber-minimal"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2046 0 0); --kb-bg-card: oklch(0.2686 0 0); --kb-bg-popover: oklch(0.2686 0 0); --kb-bg-muted: oklch(0.2393 0 0); --kb-bg-input: oklch(0.3715 0 0); --kb-text-primary: oklch(0.9219 0 0); --kb-text-muted: oklch(0.7155 0 0); --kb-primary: oklch(0.7686 0.1647 70.0804); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.2686 0 0); --kb-info-fg: oklch(0.9219 0 0); --kb-accent: oklch(0.4732 0.1247 46.2007); --kb-accent-fg: oklch(0.9243 0.1151 95.7459); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3715 0 0); --kb-admin-sidebar-bg: oklch(0.1684 0 0); --kb-admin-nav-color: oklch(0.9219 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); } /* ============================================================================ AMETHYST-HAZE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="amethyst-haze"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9777 0.0041 301.4256); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.8906 0.0139 299.7754); --kb-bg-input: oklch(0.9329 0.0124 301.2783); --kb-text-primary: oklch(0.3651 0.0325 287.0807); --kb-text-muted: oklch(0.5288 0.0375 290.7895); --kb-primary: oklch(0.6104 0.0767 299.7335); --kb-primary-fg: oklch(0.9777 0.0041 301.4256); --kb-info: oklch(0.8957 0.0265 300.2416); --kb-info-fg: oklch(0.3651 0.0325 287.0807); --kb-accent: oklch(0.7889 0.0802 359.9375); --kb-accent-fg: oklch(0.3394 0.0441 1.7583); --kb-danger: oklch(0.6332 0.1578 22.6734); --kb-danger-fg: oklch(0.9777 0.0041 301.4256); --kb-border-default: oklch(0.8447 0.0226 300.1421); --kb-admin-sidebar-bg: oklch(0.9554 0.0082 301.3541); --kb-admin-nav-color: oklch(0.3651 0.0325 287.0807); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); --kb-shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06); --kb-shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06); --kb-shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06); --kb-shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); } [data-theme="amethyst-haze"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2166 0.0215 292.8474); --kb-bg-card: oklch(0.2544 0.0301 292.7315); --kb-bg-popover: oklch(0.2544 0.0301 292.7315); --kb-bg-muted: oklch(0.2560 0.0320 294.8380); --kb-bg-input: oklch(0.2847 0.0346 291.2726); --kb-text-primary: oklch(0.9053 0.0245 293.5570); --kb-text-muted: oklch(0.6974 0.0282 300.0614); --kb-primary: oklch(0.7058 0.0777 302.0489); --kb-primary-fg: oklch(0.2166 0.0215 292.8474); --kb-info: oklch(0.4604 0.0472 295.5578); --kb-info-fg: oklch(0.9053 0.0245 293.5570); --kb-accent: oklch(0.3181 0.0321 308.6149); --kb-accent-fg: oklch(0.8391 0.0692 2.6681); --kb-danger: oklch(0.6875 0.1420 21.4566); --kb-danger-fg: oklch(0.2166 0.0215 292.8474); --kb-border-default: oklch(0.3063 0.0359 293.3367); --kb-admin-sidebar-bg: oklch(0.1985 0.0200 293.6639); --kb-admin-nav-color: oklch(0.9053 0.0245 293.5570); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); --kb-shadow-md: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 2px 4px 0px hsl(0 0% 0% / 0.06); --kb-shadow-lg: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 4px 6px 0px hsl(0 0% 0% / 0.06); --kb-shadow-xl: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 8px 10px 0px hsl(0 0% 0% / 0.06); --kb-shadow: 1px 2px 5px 1px hsl(0 0% 0% / 0.06), 1px 1px 2px 0px hsl(0 0% 0% / 0.06); } /* ============================================================================ BOLD-TECH Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="bold-tech"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9691 0.0161 293.7558); --kb-bg-input: oklch(0.9299 0.0334 272.7879); --kb-text-primary: oklch(0.3588 0.1354 278.6973); --kb-text-muted: oklch(0.5413 0.2466 293.0090); --kb-primary: oklch(0.6056 0.2189 292.7172); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9618 0.0202 295.1913); --kb-info-fg: oklch(0.4568 0.2146 277.0229); --kb-accent: oklch(0.9319 0.0316 255.5855); --kb-accent-fg: oklch(0.4244 0.1809 265.6377); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9299 0.0334 272.7879); --kb-admin-sidebar-bg: oklch(0.9691 0.0161 293.7558); --kb-admin-nav-color: oklch(0.3588 0.1354 278.6973); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 1px 2px -1px hsl(255 86% 66% / 0.20); --kb-shadow-md: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 2px 4px -1px hsl(255 86% 66% / 0.20); --kb-shadow-lg: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 4px 6px -1px hsl(255 86% 66% / 0.20); --kb-shadow-xl: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 8px 10px -1px hsl(255 86% 66% / 0.20); --kb-shadow: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 1px 2px -1px hsl(255 86% 66% / 0.20); } [data-theme="bold-tech"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2077 0.0398 265.7549); --kb-bg-card: oklch(0.2573 0.0861 281.2883); --kb-bg-popover: oklch(0.2573 0.0861 281.2883); --kb-bg-muted: oklch(0.2329 0.0919 279.1398); --kb-bg-input: oklch(0.2827 0.1351 291.0894); --kb-text-primary: oklch(0.9299 0.0334 272.7879); --kb-text-muted: oklch(0.8112 0.1013 293.5712); --kb-primary: oklch(0.6056 0.2189 292.7172); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.2573 0.0861 281.2883); --kb-info-fg: oklch(0.9299 0.0334 272.7879); --kb-accent: oklch(0.4568 0.2146 277.0229); --kb-accent-fg: oklch(0.9299 0.0334 272.7879); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.2827 0.1351 291.0894); --kb-admin-sidebar-bg: oklch(0.2077 0.0398 265.7549); --kb-admin-nav-color: oklch(0.9299 0.0334 272.7879); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 1px 2px -1px hsl(255 86% 66% / 0.20); --kb-shadow-md: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 2px 4px -1px hsl(255 86% 66% / 0.20); --kb-shadow-lg: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 4px 6px -1px hsl(255 86% 66% / 0.20); --kb-shadow-xl: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 8px 10px -1px hsl(255 86% 66% / 0.20); --kb-shadow: 2px 2px 4px 0px hsl(255 86% 66% / 0.20), 2px 1px 2px -1px hsl(255 86% 66% / 0.20); } /* ============================================================================ BUBBLEGUM Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="bubblegum"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9399 0.0203 345.6985); --kb-bg-card: oklch(0.9498 0.0500 86.8891); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.8800 0.0504 212.0952); --kb-bg-input: oklch(0.9189 0 0); --kb-text-primary: oklch(0.4712 0 0); --kb-text-muted: oklch(0.5795 0 0); --kb-primary: oklch(0.6209 0.1801 348.1385); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8095 0.0694 198.1863); --kb-info-fg: oklch(0.3211 0 0); --kb-accent: oklch(0.9195 0.0801 87.6670); --kb-accent-fg: oklch(0.3211 0 0); --kb-danger: oklch(0.7091 0.1697 21.9551); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.6209 0.1801 348.1385); --kb-admin-sidebar-bg: oklch(0.9140 0.0424 343.0913); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00); --kb-shadow-md: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 2px 4px -1px hsl(325.7800 58.1800% 56.8600% / 1.00); --kb-shadow-lg: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 4px 6px -1px hsl(325.7800 58.1800% 56.8600% / 1.00); --kb-shadow-xl: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 8px 10px -1px hsl(325.7800 58.1800% 56.8600% / 1.00); --kb-shadow: 3px 3px 0px 0px hsl(325.7800 58.1800% 56.8600% / 1.00), 3px 1px 2px -1px hsl(325.7800 58.1800% 56.8600% / 1.00); } [data-theme="bubblegum"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2497 0.0305 234.1628); --kb-bg-card: oklch(0.2902 0.0299 233.5352); --kb-bg-popover: oklch(0.2902 0.0299 233.5352); --kb-bg-muted: oklch(0.2713 0.0086 255.5780); --kb-bg-input: oklch(0.3093 0.0305 232.0027); --kb-text-primary: oklch(0.9306 0.0197 349.0785); --kb-text-muted: oklch(0.7794 0.0803 4.1330); --kb-primary: oklch(0.9195 0.0801 87.6670); --kb-primary-fg: oklch(0.2497 0.0305 234.1628); --kb-info: oklch(0.7794 0.0803 4.1330); --kb-info-fg: oklch(0.2497 0.0305 234.1628); --kb-accent: oklch(0.6699 0.0988 356.9762); --kb-accent-fg: oklch(0.9306 0.0197 349.0785); --kb-danger: oklch(0.6702 0.1806 350.3599); --kb-danger-fg: oklch(0.2497 0.0305 234.1628); --kb-border-default: oklch(0.3907 0.0399 242.2181); --kb-admin-sidebar-bg: oklch(0.2303 0.0270 235.9743); --kb-admin-nav-color: oklch(0.9670 0.0029 264.5419); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00); --kb-shadow-md: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 2px 4px -1px hsl(206.1538 28.0576% 27.2549% / 1.00); --kb-shadow-lg: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 4px 6px -1px hsl(206.1538 28.0576% 27.2549% / 1.00); --kb-shadow-xl: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 8px 10px -1px hsl(206.1538 28.0576% 27.2549% / 1.00); --kb-shadow: 3px 3px 0px 0px hsl(206.1538 28.0576% 27.2549% / 1.00), 3px 1px 2px -1px hsl(206.1538 28.0576% 27.2549% / 1.00); } /* ============================================================================ CAFFEINE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="caffeine"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9821 0 0); --kb-bg-card: oklch(0.9911 0 0); --kb-bg-popover: oklch(0.9911 0 0); --kb-bg-muted: oklch(0.9521 0 0); --kb-bg-input: oklch(0.8822 0 0); --kb-text-primary: oklch(0.2435 0 0); --kb-text-muted: oklch(0.5032 0 0); --kb-primary: oklch(0.4341 0.0392 41.9938); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9200 0.0651 74.3695); --kb-info-fg: oklch(0.3499 0.0685 40.8288); --kb-accent: oklch(0.9310 0 0); --kb-accent-fg: oklch(0.2435 0 0); --kb-danger: oklch(0.6271 0.1936 33.3390); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8822 0 0); --kb-admin-sidebar-bg: oklch(0.9881 0 0); --kb-admin-nav-color: oklch(0.2645 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="caffeine"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1776 0 0); --kb-bg-card: oklch(0.2134 0 0); --kb-bg-popover: oklch(0.2134 0 0); --kb-bg-muted: oklch(0.2520 0 0); --kb-bg-input: oklch(0.4017 0 0); --kb-text-primary: oklch(0.9491 0 0); --kb-text-muted: oklch(0.7699 0 0); --kb-primary: oklch(0.9247 0.0524 66.1732); --kb-primary-fg: oklch(0.2029 0.0240 200.1962); --kb-info: oklch(0.3163 0.0190 63.6992); --kb-info-fg: oklch(0.9247 0.0524 66.1732); --kb-accent: oklch(0.2850 0 0); --kb-accent-fg: oklch(0.9491 0 0); --kb-danger: oklch(0.6271 0.1936 33.3390); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.2351 0.0115 91.7467); --kb-admin-sidebar-bg: oklch(0.2103 0.0059 285.8852); --kb-admin-nav-color: oklch(0.9674 0.0013 286.3752); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ CANDYLAND Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="candyland"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9809 0.0025 228.7836); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.8828 0.0285 98.1033); --kb-bg-input: oklch(0.8699 0 0); --kb-text-primary: oklch(0.3211 0 0); --kb-text-muted: oklch(0.5382 0 0); --kb-primary: oklch(0.8677 0.0735 7.0855); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.8148 0.0819 225.7537); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.9680 0.2110 109.7692); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8699 0 0); --kb-admin-sidebar-bg: oklch(0.9809 0.0025 228.7836); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="candyland"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2303 0.0125 264.2926); --kb-bg-card: oklch(0.3210 0.0078 223.6661); --kb-bg-popover: oklch(0.3210 0.0078 223.6661); --kb-bg-muted: oklch(0.3867 0 0); --kb-bg-input: oklch(0.3867 0 0); --kb-text-primary: oklch(0.9219 0 0); --kb-text-muted: oklch(0.7155 0 0); --kb-primary: oklch(0.8027 0.1355 349.2347); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.7395 0.2268 142.8504); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.8148 0.0819 225.7537); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3867 0 0); --kb-admin-sidebar-bg: oklch(0.2303 0.0125 264.2926); --kb-admin-nav-color: oklch(0.9219 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ CATPPUCCIN Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="catppuccin"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9578 0.0058 264.5321); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(0.8575 0.0145 268.4756); --kb-bg-muted: oklch(0.9060 0.0117 264.5071); --kb-bg-input: oklch(0.8575 0.0145 268.4756); --kb-text-primary: oklch(0.4355 0.0430 279.3250); --kb-text-muted: oklch(0.5471 0.0343 279.0837); --kb-primary: oklch(0.5547 0.2503 297.0156); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8575 0.0145 268.4756); --kb-info-fg: oklch(0.4355 0.0430 279.3250); --kb-accent: oklch(0.6820 0.1448 235.3822); --kb-accent-fg: oklch(1.0000 0 0); --kb-danger: oklch(0.5505 0.2155 19.8095); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8083 0.0174 271.1982); --kb-admin-sidebar-bg: oklch(0.9335 0.0087 264.5206); --kb-admin-nav-color: oklch(0.4355 0.0430 279.3250); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); --kb-shadow-md: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12); --kb-shadow-lg: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12); --kb-shadow-xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12); --kb-shadow: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); } [data-theme="catppuccin"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2155 0.0254 284.0647); --kb-bg-card: oklch(0.2429 0.0304 283.9110); --kb-bg-popover: oklch(0.4037 0.0320 280.1520); --kb-bg-muted: oklch(0.2973 0.0294 276.2144); --kb-bg-input: oklch(0.3240 0.0319 281.9784); --kb-text-primary: oklch(0.8787 0.0426 272.2767); --kb-text-muted: oklch(0.7510 0.0396 273.9320); --kb-primary: oklch(0.7871 0.1187 304.7693); --kb-primary-fg: oklch(0.2429 0.0304 283.9110); --kb-info: oklch(0.4765 0.0340 278.6430); --kb-info-fg: oklch(0.8787 0.0426 272.2767); --kb-accent: oklch(0.8467 0.0833 210.2545); --kb-accent-fg: oklch(0.2429 0.0304 283.9110); --kb-danger: oklch(0.7556 0.1297 2.7642); --kb-danger-fg: oklch(0.2429 0.0304 283.9110); --kb-border-default: oklch(0.3240 0.0319 281.9784); --kb-admin-sidebar-bg: oklch(0.1828 0.0204 284.2039); --kb-admin-nav-color: oklch(0.8787 0.0426 272.2767); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); --kb-shadow-md: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12); --kb-shadow-lg: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12); --kb-shadow-xl: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12); --kb-shadow: 0px 4px 6px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); } /* ============================================================================ CLAUDE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="claude"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9818 0.0054 95.0986); --kb-bg-card: oklch(0.9818 0.0054 95.0986); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9341 0.0153 90.2390); --kb-bg-input: oklch(0.7621 0.0156 98.3528); --kb-text-primary: oklch(0.3438 0.0269 95.7226); --kb-text-muted: oklch(0.6059 0.0075 97.4233); --kb-primary: oklch(0.6171 0.1375 39.0427); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9245 0.0138 92.9892); --kb-info-fg: oklch(0.4334 0.0177 98.6048); --kb-accent: oklch(0.9245 0.0138 92.9892); --kb-accent-fg: oklch(0.2671 0.0196 98.9390); --kb-danger: oklch(0.1908 0.0020 106.5859); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8847 0.0069 97.3627); --kb-admin-sidebar-bg: oklch(0.9663 0.0080 98.8792); --kb-admin-nav-color: oklch(0.3590 0.0051 106.6524); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="claude"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2679 0.0036 106.6427); --kb-bg-card: oklch(0.2679 0.0036 106.6427); --kb-bg-popover: oklch(0.3085 0.0035 106.6039); --kb-bg-muted: oklch(0.2213 0.0038 106.7070); --kb-bg-input: oklch(0.4336 0.0113 100.2195); --kb-text-primary: oklch(0.8074 0.0142 93.0137); --kb-text-muted: oklch(0.7713 0.0169 99.0657); --kb-primary: oklch(0.6724 0.1308 38.7559); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9818 0.0054 95.0986); --kb-info-fg: oklch(0.3085 0.0035 106.6039); --kb-accent: oklch(0.2130 0.0078 95.4245); --kb-accent-fg: oklch(0.9663 0.0080 98.8792); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3618 0.0101 106.8928); --kb-admin-sidebar-bg: oklch(0.2357 0.0024 67.7077); --kb-admin-nav-color: oklch(0.8074 0.0142 93.0137); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ CLAYMORPHISM Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="claymorphism"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9232 0.0026 48.7171); --kb-bg-card: oklch(0.9699 0.0013 106.4238); --kb-bg-popover: oklch(0.9699 0.0013 106.4238); --kb-bg-muted: oklch(0.9232 0.0026 48.7171); --kb-bg-input: oklch(0.8687 0.0043 56.3660); --kb-text-primary: oklch(0.2795 0.0368 260.0310); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.5854 0.2041 277.1173); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8687 0.0043 56.3660); --kb-info-fg: oklch(0.4461 0.0263 256.8018); --kb-accent: oklch(0.9376 0.0260 321.9388); --kb-accent-fg: oklch(0.3729 0.0306 259.7328); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8687 0.0043 56.3660); --kb-admin-sidebar-bg: oklch(0.8687 0.0043 56.3660); --kb-admin-nav-color: oklch(0.2795 0.0368 260.0310); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 1px 2px 3px hsl(240 4% 60% / 0.18); --kb-shadow-md: 2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 2px 4px 3px hsl(240 4% 60% / 0.18); --kb-shadow-lg: 2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 4px 6px 3px hsl(240 4% 60% / 0.18); --kb-shadow-xl: 2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 8px 10px 3px hsl(240 4% 60% / 0.18); --kb-shadow: 2px 2px 10px 4px hsl(240 4% 60% / 0.18), 2px 1px 2px 3px hsl(240 4% 60% / 0.18); } [data-theme="claymorphism"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2244 0.0074 67.4370); --kb-bg-card: oklch(0.2801 0.0080 59.3379); --kb-bg-popover: oklch(0.2801 0.0080 59.3379); --kb-bg-muted: oklch(0.2287 0.0074 67.4469); --kb-bg-input: oklch(0.3359 0.0077 59.4197); --kb-text-primary: oklch(0.9288 0.0126 255.5078); --kb-text-muted: oklch(0.7137 0.0192 261.3246); --kb-primary: oklch(0.6801 0.1583 276.9349); --kb-primary-fg: oklch(0.2244 0.0074 67.4370); --kb-info: oklch(0.3359 0.0077 59.4197); --kb-info-fg: oklch(0.8717 0.0093 258.3382); --kb-accent: oklch(0.3896 0.0074 59.4734); --kb-accent-fg: oklch(0.8717 0.0093 258.3382); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(0.2244 0.0074 67.4370); --kb-border-default: oklch(0.3359 0.0077 59.4197); --kb-admin-sidebar-bg: oklch(0.3359 0.0077 59.4197); --kb-admin-nav-color: oklch(0.9288 0.0126 255.5078); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 1px 2px 3px hsl(0 0% 0% / 0.18); --kb-shadow-md: 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 2px 4px 3px hsl(0 0% 0% / 0.18); --kb-shadow-lg: 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 4px 6px 3px hsl(0 0% 0% / 0.18); --kb-shadow-xl: 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 8px 10px 3px hsl(0 0% 0% / 0.18); --kb-shadow: 2px 2px 10px 4px hsl(0 0% 0% / 0.18), 2px 1px 2px 3px hsl(0 0% 0% / 0.18); } /* ============================================================================ CLEAN-SLATE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="clean-slate"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9842 0.0034 247.8575); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9670 0.0029 264.5419); --kb-bg-input: oklch(0.8717 0.0093 258.3382); --kb-text-primary: oklch(0.2795 0.0368 260.0310); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.5854 0.2041 277.1173); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9276 0.0058 264.5313); --kb-info-fg: oklch(0.3729 0.0306 259.7328); --kb-accent: oklch(0.9299 0.0334 272.7879); --kb-accent-fg: oklch(0.3729 0.0306 259.7328); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8717 0.0093 258.3382); --kb-admin-sidebar-bg: oklch(0.9670 0.0029 264.5419); --kb-admin-nav-color: oklch(0.2795 0.0368 260.0310); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); } [data-theme="clean-slate"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2077 0.0398 265.7549); --kb-bg-card: oklch(0.2795 0.0368 260.0310); --kb-bg-popover: oklch(0.2795 0.0368 260.0310); --kb-bg-muted: oklch(0.2427 0.0381 259.9437); --kb-bg-input: oklch(0.4461 0.0263 256.8018); --kb-text-primary: oklch(0.9288 0.0126 255.5078); --kb-text-muted: oklch(0.7137 0.0192 261.3246); --kb-primary: oklch(0.6801 0.1583 276.9349); --kb-primary-fg: oklch(0.2077 0.0398 265.7549); --kb-info: oklch(0.3351 0.0331 260.9120); --kb-info-fg: oklch(0.8717 0.0093 258.3382); --kb-accent: oklch(0.3729 0.0306 259.7328); --kb-accent-fg: oklch(0.8717 0.0093 258.3382); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(0.2077 0.0398 265.7549); --kb-border-default: oklch(0.4461 0.0263 256.8018); --kb-admin-sidebar-bg: oklch(0.2795 0.0368 260.0310); --kb-admin-nav-color: oklch(0.9288 0.0126 255.5078); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); } /* ============================================================================ COSMIC-NIGHT Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="cosmic-night"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9730 0.0133 286.1503); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9580 0.0133 286.1454); --kb-bg-input: oklch(0.9115 0.0216 285.9625); --kb-text-primary: oklch(0.3015 0.0572 282.4176); --kb-text-muted: oklch(0.5426 0.0465 284.7435); --kb-primary: oklch(0.5417 0.1790 288.0332); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9174 0.0435 292.6901); --kb-info-fg: oklch(0.4143 0.1039 288.1742); --kb-accent: oklch(0.9221 0.0373 262.1410); --kb-accent-fg: oklch(0.3015 0.0572 282.4176); --kb-danger: oklch(0.6861 0.2061 14.9941); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9115 0.0216 285.9625); --kb-admin-sidebar-bg: oklch(0.9580 0.0133 286.1454); --kb-admin-nav-color: oklch(0.3015 0.0572 282.4176); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); --kb-shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12); --kb-shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12); --kb-shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12); --kb-shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); } [data-theme="cosmic-night"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1743 0.0227 283.7998); --kb-bg-card: oklch(0.2284 0.0384 282.9324); --kb-bg-popover: oklch(0.2284 0.0384 282.9324); --kb-bg-muted: oklch(0.2710 0.0621 281.4377); --kb-bg-input: oklch(0.3261 0.0597 282.5832); --kb-text-primary: oklch(0.9185 0.0257 285.8834); --kb-text-muted: oklch(0.7166 0.0462 285.1741); --kb-primary: oklch(0.7162 0.1597 290.3962); --kb-primary-fg: oklch(0.1743 0.0227 283.7998); --kb-info: oklch(0.3139 0.0736 283.4591); --kb-info-fg: oklch(0.8367 0.0849 285.9111); --kb-accent: oklch(0.3354 0.0828 280.9705); --kb-accent-fg: oklch(0.9185 0.0257 285.8834); --kb-danger: oklch(0.6861 0.2061 14.9941); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3261 0.0597 282.5832); --kb-admin-sidebar-bg: oklch(0.2284 0.0384 282.9324); --kb-admin-nav-color: oklch(0.9185 0.0257 285.8834); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); --kb-shadow-md: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 2px 4px -1px hsl(240 30% 25% / 0.12); --kb-shadow-lg: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 4px 6px -1px hsl(240 30% 25% / 0.12); --kb-shadow-xl: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 8px 10px -1px hsl(240 30% 25% / 0.12); --kb-shadow: 0px 4px 10px 0px hsl(240 30% 25% / 0.12), 0px 1px 2px -1px hsl(240 30% 25% / 0.12); } /* ============================================================================ CYBERPUNK Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="cyberpunk"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9816 0.0017 247.8390); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9595 0.0200 286.0164); --kb-bg-input: oklch(0.9205 0.0086 225.0878); --kb-text-primary: oklch(0.1649 0.0352 281.8285); --kb-text-muted: oklch(0.1649 0.0352 281.8285); --kb-primary: oklch(0.6726 0.2904 341.4084); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9595 0.0200 286.0164); --kb-info-fg: oklch(0.1649 0.0352 281.8285); --kb-accent: oklch(0.8903 0.1739 171.2690); --kb-accent-fg: oklch(0.1649 0.0352 281.8285); --kb-danger: oklch(0.6535 0.2348 34.0370); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9205 0.0086 225.0878); --kb-admin-sidebar-bg: oklch(0.9595 0.0200 286.0164); --kb-admin-nav-color: oklch(0.1649 0.0352 281.8285); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 2px 4px -3px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 4px 6px -3px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 8px 10px -3px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); } [data-theme="cyberpunk"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1649 0.0352 281.8285); --kb-bg-card: oklch(0.2542 0.0611 281.1423); --kb-bg-popover: oklch(0.2542 0.0611 281.1423); --kb-bg-muted: oklch(0.2123 0.0522 280.9917); --kb-bg-input: oklch(0.3279 0.0832 280.7890); --kb-text-primary: oklch(0.9513 0.0074 260.7315); --kb-text-muted: oklch(0.6245 0.0500 278.1046); --kb-primary: oklch(0.6726 0.2904 341.4084); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.2542 0.0611 281.1423); --kb-info-fg: oklch(0.9513 0.0074 260.7315); --kb-accent: oklch(0.8903 0.1739 171.2690); --kb-accent-fg: oklch(0.1649 0.0352 281.8285); --kb-danger: oklch(0.6535 0.2348 34.0370); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3279 0.0832 280.7890); --kb-admin-sidebar-bg: oklch(0.1649 0.0352 281.8285); --kb-admin-nav-color: oklch(0.9513 0.0074 260.7315); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 2px 4px -3px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 4px 6px -3px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 8px 10px -3px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); } /* ============================================================================ DARKMATTER Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="darkmatter"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9670 0.0029 264.5419); --kb-bg-input: oklch(0.9276 0.0058 264.5313); --kb-text-primary: oklch(0.2101 0.0318 264.6645); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.6716 0.1368 48.5130); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.5360 0.0398 196.0280); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.9491 0 0); --kb-accent-fg: oklch(0.2101 0.0318 264.6645); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(0.9851 0 0); --kb-border-default: oklch(0.9276 0.0058 264.5313); --kb-admin-sidebar-bg: oklch(0.9670 0.0029 264.5419); --kb-admin-nav-color: oklch(0.2101 0.0318 264.6645); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); --kb-shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05); --kb-shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05); --kb-shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05); --kb-shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); } [data-theme="darkmatter"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1797 0.0043 308.1928); --kb-bg-card: oklch(0.1822 0 0); --kb-bg-popover: oklch(0.1797 0.0043 308.1928); --kb-bg-muted: oklch(0.2520 0 0); --kb-bg-input: oklch(0.2520 0 0); --kb-text-primary: oklch(0.8109 0 0); --kb-text-muted: oklch(0.6268 0 0); --kb-primary: oklch(0.7214 0.1337 49.9802); --kb-primary-fg: oklch(0.1797 0.0043 308.1928); --kb-info: oklch(0.5940 0.0443 196.0233); --kb-info-fg: oklch(0.1797 0.0043 308.1928); --kb-accent: oklch(0.3211 0 0); --kb-accent-fg: oklch(0.8109 0 0); --kb-danger: oklch(0.5940 0.0443 196.0233); --kb-danger-fg: oklch(0.1797 0.0043 308.1928); --kb-border-default: oklch(0.2520 0 0); --kb-admin-sidebar-bg: oklch(0.1822 0 0); --kb-admin-nav-color: oklch(0.8109 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); --kb-shadow-md: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 2px 4px -1px hsl(0 0% 0% / 0.05); --kb-shadow-lg: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 4px 6px -1px hsl(0 0% 0% / 0.05); --kb-shadow-xl: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 8px 10px -1px hsl(0 0% 0% / 0.05); --kb-shadow: 0px 1px 4px 0px hsl(0 0% 0% / 0.05), 0px 1px 2px -1px hsl(0 0% 0% / 0.05); } /* ============================================================================ DOOM-64 Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="doom-64"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.8452 0 0); --kb-bg-card: oklch(0.7572 0 0); --kb-bg-popover: oklch(0.7572 0 0); --kb-bg-muted: oklch(0.7826 0 0); --kb-bg-input: oklch(0.4313 0 0); --kb-text-primary: oklch(0.2393 0 0); --kb-text-muted: oklch(0.4091 0 0); --kb-primary: oklch(0.5016 0.1887 27.4816); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.4955 0.0896 126.1858); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.5880 0.0993 245.7394); --kb-accent-fg: oklch(1.0000 0 0); --kb-danger: oklch(0.7076 0.1975 46.4558); --kb-danger-fg: oklch(0 0 0); --kb-border-default: oklch(0.4313 0 0); --kb-admin-sidebar-bg: oklch(0.7572 0 0); --kb-admin-nav-color: oklch(0.2393 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40); --kb-shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 2px 4px -1px hsl(0 0% 0% / 0.40); --kb-shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 4px 6px -1px hsl(0 0% 0% / 0.40); --kb-shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 8px 10px -1px hsl(0 0% 0% / 0.40); --kb-shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.40), 0px 1px 2px -1px hsl(0 0% 0% / 0.40); } [data-theme="doom-64"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2178 0 0); --kb-bg-card: oklch(0.2850 0 0); --kb-bg-popover: oklch(0.2850 0 0); --kb-bg-muted: oklch(0.2645 0 0); --kb-bg-input: oklch(0.4091 0 0); --kb-text-primary: oklch(0.9067 0 0); --kb-text-muted: oklch(0.7058 0 0); --kb-primary: oklch(0.6083 0.2090 27.0276); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.6423 0.1467 133.0145); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.7482 0.1235 244.7492); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(0.7839 0.1719 68.0943); --kb-danger-fg: oklch(0 0 0); --kb-border-default: oklch(0.4091 0 0); --kb-admin-sidebar-bg: oklch(0.1913 0 0); --kb-admin-nav-color: oklch(0.9067 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60); --kb-shadow-md: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 2px 4px -1px hsl(0 0% 0% / 0.60); --kb-shadow-lg: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 4px 6px -1px hsl(0 0% 0% / 0.60); --kb-shadow-xl: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 8px 10px -1px hsl(0 0% 0% / 0.60); --kb-shadow: 0px 2px 5px 0px hsl(0 0% 0% / 0.60), 0px 1px 2px -1px hsl(0 0% 0% / 0.60); } /* ============================================================================ ELEGANT-LUXURY Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="elegant-luxury"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9779 0.0042 56.3756); --kb-bg-card: oklch(0.9779 0.0042 56.3756); --kb-bg-popover: oklch(0.9779 0.0042 56.3756); --kb-bg-muted: oklch(0.9431 0.0068 53.4442); --kb-bg-input: oklch(0.9355 0.0324 80.9937); --kb-text-primary: oklch(0.2178 0 0); --kb-text-muted: oklch(0.4444 0.0096 73.6390); --kb-primary: oklch(0.4650 0.1470 24.9381); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9625 0.0385 89.0943); --kb-info-fg: oklch(0.4847 0.1022 75.1153); --kb-accent: oklch(0.9619 0.0580 95.6174); --kb-accent-fg: oklch(0.3958 0.1331 25.7230); --kb-danger: oklch(0.4437 0.1613 26.8994); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9355 0.0324 80.9937); --kb-admin-sidebar-bg: oklch(0.9431 0.0068 53.4442); --kb-admin-nav-color: oklch(0.2178 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); --kb-shadow-md: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12); --kb-shadow-lg: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12); --kb-shadow-xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12); --kb-shadow: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); } [data-theme="elegant-luxury"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2161 0.0061 56.0434); --kb-bg-card: oklch(0.2685 0.0063 34.2976); --kb-bg-popover: oklch(0.2685 0.0063 34.2976); --kb-bg-muted: oklch(0.2291 0.0060 56.0708); --kb-bg-input: oklch(0.3741 0.0087 67.5582); --kb-text-primary: oklch(0.9699 0.0013 106.4238); --kb-text-muted: oklch(0.8687 0.0043 56.3660); --kb-primary: oklch(0.5054 0.1905 27.5181); --kb-primary-fg: oklch(0.9779 0.0042 56.3756); --kb-info: oklch(0.4732 0.1247 46.2007); --kb-info-fg: oklch(0.9619 0.0580 95.6174); --kb-accent: oklch(0.5553 0.1455 48.9975); --kb-accent-fg: oklch(0.9619 0.0580 95.6174); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3741 0.0087 67.5582); --kb-admin-sidebar-bg: oklch(0.2161 0.0061 56.0434); --kb-admin-nav-color: oklch(0.9699 0.0013 106.4238); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); --kb-shadow-md: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 2px 4px -3px hsl(0 63% 18% / 0.12); --kb-shadow-lg: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 4px 6px -3px hsl(0 63% 18% / 0.12); --kb-shadow-xl: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 8px 10px -3px hsl(0 63% 18% / 0.12); --kb-shadow: 1px 1px 16px -2px hsl(0 63% 18% / 0.12), 1px 1px 2px -3px hsl(0 63% 18% / 0.12); } /* ============================================================================ GRAPHITE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="graphite"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9551 0 0); --kb-bg-card: oklch(0.9702 0 0); --kb-bg-popover: oklch(0.9702 0 0); --kb-bg-muted: oklch(0.8853 0 0); --kb-bg-input: oklch(0.9067 0 0); --kb-text-primary: oklch(0.3211 0 0); --kb-text-muted: oklch(0.5103 0 0); --kb-primary: oklch(0.4891 0 0); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9067 0 0); --kb-info-fg: oklch(0.3211 0 0); --kb-accent: oklch(0.8078 0 0); --kb-accent-fg: oklch(0.3211 0 0); --kb-danger: oklch(0.5594 0.1900 25.8625); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8576 0 0); --kb-admin-sidebar-bg: oklch(0.9370 0 0); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 1px 2px -1px hsl(0 0% 20% / 0.15); --kb-shadow-md: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 2px 4px -1px hsl(0 0% 20% / 0.15); --kb-shadow-lg: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 4px 6px -1px hsl(0 0% 20% / 0.15); --kb-shadow-xl: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 8px 10px -1px hsl(0 0% 20% / 0.15); --kb-shadow: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 1px 2px -1px hsl(0 0% 20% / 0.15); } [data-theme="graphite"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2178 0 0); --kb-bg-card: oklch(0.2435 0 0); --kb-bg-popover: oklch(0.2435 0 0); --kb-bg-muted: oklch(0.2850 0 0); --kb-bg-input: oklch(0.3092 0 0); --kb-text-primary: oklch(0.8853 0 0); --kb-text-muted: oklch(0.5999 0 0); --kb-primary: oklch(0.7058 0 0); --kb-primary-fg: oklch(0.2178 0 0); --kb-info: oklch(0.3092 0 0); --kb-info-fg: oklch(0.8853 0 0); --kb-accent: oklch(0.3715 0 0); --kb-accent-fg: oklch(0.8853 0 0); --kb-danger: oklch(0.6591 0.1530 22.1703); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3290 0 0); --kb-admin-sidebar-bg: oklch(0.2393 0 0); --kb-admin-nav-color: oklch(0.8853 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 1px 2px -1px hsl(0 0% 20% / 0.15); --kb-shadow-md: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 2px 4px -1px hsl(0 0% 20% / 0.15); --kb-shadow-lg: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 4px 6px -1px hsl(0 0% 20% / 0.15); --kb-shadow-xl: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 8px 10px -1px hsl(0 0% 20% / 0.15); --kb-shadow: 0px 2px 0px 0px hsl(0 0% 20% / 0.15), 0px 1px 2px -1px hsl(0 0% 20% / 0.15); } /* ============================================================================ KODAMA-GROVE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="kodama-grove"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.8798 0.0534 91.7893); --kb-bg-card: oklch(0.8937 0.0395 87.5676); --kb-bg-popover: oklch(0.9378 0.0331 89.8515); --kb-bg-muted: oklch(0.8532 0.0631 91.1493); --kb-bg-input: oklch(0.8361 0.0713 90.3269); --kb-text-primary: oklch(0.4265 0.0310 59.2153); --kb-text-muted: oklch(0.5761 0.0259 60.9323); --kb-primary: oklch(0.6657 0.1050 118.9078); --kb-primary-fg: oklch(0.9882 0.0069 88.6415); --kb-info: oklch(0.8532 0.0631 91.1493); --kb-info-fg: oklch(0.4265 0.0310 59.2153); --kb-accent: oklch(0.8361 0.0713 90.3269); --kb-accent-fg: oklch(0.4265 0.0310 59.2153); --kb-danger: oklch(0.7136 0.0981 29.9827); --kb-danger-fg: oklch(0.9790 0.0082 91.4818); --kb-border-default: oklch(0.6918 0.0440 59.8448); --kb-admin-sidebar-bg: oklch(0.8631 0.0645 90.5161); --kb-admin-nav-color: oklch(0.4265 0.0310 59.2153); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15); --kb-shadow-md: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15); --kb-shadow-lg: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15); --kb-shadow-xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15); --kb-shadow: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15); } [data-theme="kodama-grove"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.3303 0.0214 88.0737); --kb-bg-card: oklch(0.3583 0.0165 82.3257); --kb-bg-popover: oklch(0.3583 0.0165 82.3257); --kb-bg-muted: oklch(0.3892 0.0197 82.7084); --kb-bg-input: oklch(0.4448 0.0239 84.5498); --kb-text-primary: oklch(0.9217 0.0235 82.1191); --kb-text-muted: oklch(0.7096 0.0171 73.6179); --kb-primary: oklch(0.6762 0.0567 132.4479); --kb-primary-fg: oklch(0.2686 0.0105 61.0213); --kb-info: oklch(0.4448 0.0239 84.5498); --kb-info-fg: oklch(0.9217 0.0235 82.1191); --kb-accent: oklch(0.6540 0.0723 90.7629); --kb-accent-fg: oklch(0.2686 0.0105 61.0213); --kb-danger: oklch(0.6287 0.0821 31.2958); --kb-danger-fg: oklch(0.9357 0.0201 84.5907); --kb-border-default: oklch(0.4448 0.0239 84.5498); --kb-admin-sidebar-bg: oklch(0.3303 0.0214 88.0737); --kb-admin-nav-color: oklch(0.9217 0.0235 82.1191); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15); --kb-shadow-md: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 2px 4px -1px hsl(88 22% 35% / 0.15); --kb-shadow-lg: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 4px 6px -1px hsl(88 22% 35% / 0.15); --kb-shadow-xl: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 8px 10px -1px hsl(88 22% 35% / 0.15); --kb-shadow: 3px 3px 2px 0px hsl(88 22% 35% / 0.15), 3px 1px 2px -1px hsl(88 22% 35% / 0.15); } /* ============================================================================ MIDNIGHT-BLOOM Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="midnight-bloom"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9821 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.8202 0.0213 91.6163); --kb-bg-input: oklch(0.8699 0 0); --kb-text-primary: oklch(0.3211 0 0); --kb-text-muted: oklch(0.5382 0 0); --kb-primary: oklch(0.5676 0.2021 283.0838); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8214 0.0720 249.3482); --kb-info-fg: oklch(0.3211 0 0); --kb-accent: oklch(0.6475 0.0642 117.4260); --kb-accent-fg: oklch(1.0000 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8699 0 0); --kb-admin-sidebar-bg: oklch(0.9821 0 0); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 2px 4px -3px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 4px 6px -3px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 8px 10px -3px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); } [data-theme="midnight-bloom"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2303 0.0125 264.2926); --kb-bg-card: oklch(0.3210 0.0078 223.6661); --kb-bg-popover: oklch(0.3210 0.0078 223.6661); --kb-bg-muted: oklch(0.3867 0 0); --kb-bg-input: oklch(0.3867 0 0); --kb-text-primary: oklch(0.9219 0 0); --kb-text-muted: oklch(0.7155 0 0); --kb-primary: oklch(0.5676 0.2021 283.0838); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.3390 0.1793 301.6848); --kb-info-fg: oklch(0.9219 0 0); --kb-accent: oklch(0.6746 0.1414 261.3380); --kb-accent-fg: oklch(0.9219 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3867 0 0); --kb-admin-sidebar-bg: oklch(0.2303 0.0125 264.2926); --kb-admin-nav-color: oklch(0.9219 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 2px 4px -3px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 4px 6px -3px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 8px 10px -3px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 5px 10px -2px hsl(0 0% 0% / 0.10), 0px 1px 2px -3px hsl(0 0% 0% / 0.10); } /* ============================================================================ MOCHA-MOUSSE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="mocha-mousse"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9529 0.0146 102.4597); --kb-bg-card: oklch(0.9529 0.0146 102.4597); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.8502 0.0389 49.0874); --kb-bg-input: oklch(0.7473 0.0387 80.5476); --kb-text-primary: oklch(0.4063 0.0255 40.3627); --kb-text-muted: oklch(0.5416 0.0512 37.2132); --kb-primary: oklch(0.6083 0.0623 44.3588); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.7473 0.0387 80.5476); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.8502 0.0389 49.0874); --kb-accent-fg: oklch(0.4063 0.0255 40.3627); --kb-danger: oklch(0.2225 0.0098 52.9636); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.7473 0.0387 80.5476); --kb-admin-sidebar-bg: oklch(0.8903 0.0278 49.5658); --kb-admin-nav-color: oklch(0.4063 0.0255 40.3627); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 1px 2px -1px hsl(20 18% 51% / 0.11); --kb-shadow-md: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 2px 4px -1px hsl(20 18% 51% / 0.11); --kb-shadow-lg: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 4px 6px -1px hsl(20 18% 51% / 0.11); --kb-shadow-xl: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 8px 10px -1px hsl(20 18% 51% / 0.11); --kb-shadow: 2px 2px 0px 0px hsl(20 18% 51% / 0.11), 2px 1px 2px -1px hsl(20 18% 51% / 0.11); } [data-theme="mocha-mousse"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2721 0.0141 48.1783); --kb-bg-card: oklch(0.3291 0.0156 50.8936); --kb-bg-popover: oklch(0.3291 0.0156 50.8936); --kb-bg-muted: oklch(0.4063 0.0255 40.3627); --kb-bg-input: oklch(0.4063 0.0255 40.3627); --kb-text-primary: oklch(0.9529 0.0146 102.4597); --kb-text-muted: oklch(0.7575 0.0380 50.8610); --kb-primary: oklch(0.7272 0.0539 52.3320); --kb-primary-fg: oklch(0.2721 0.0141 48.1783); --kb-info: oklch(0.5416 0.0512 37.2132); --kb-info-fg: oklch(0.9529 0.0146 102.4597); --kb-accent: oklch(0.7473 0.0387 80.5476); --kb-accent-fg: oklch(0.2721 0.0141 48.1783); --kb-danger: oklch(0.6875 0.1420 21.4566); --kb-danger-fg: oklch(0.2721 0.0141 48.1783); --kb-border-default: oklch(0.4063 0.0255 40.3627); --kb-admin-sidebar-bg: oklch(0.2225 0.0098 52.9636); --kb-admin-nav-color: oklch(0.9529 0.0146 102.4597); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 1px 2px -1px hsl(20 18% 30% / 0.11); --kb-shadow-md: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 2px 4px -1px hsl(20 18% 30% / 0.11); --kb-shadow-lg: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 4px 6px -1px hsl(20 18% 30% / 0.11); --kb-shadow-xl: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 8px 10px -1px hsl(20 18% 30% / 0.11); --kb-shadow: 2px 2px 0px 0px hsl(20 18% 30% / 0.11), 2px 1px 2px -1px hsl(20 18% 30% / 0.11); } /* ============================================================================ MODERN-MINIMAL Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="modern-minimal"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9846 0.0017 247.8389); --kb-bg-input: oklch(0.9276 0.0058 264.5313); --kb-text-primary: oklch(0.3211 0 0); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.6231 0.1880 259.8145); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9670 0.0029 264.5419); --kb-info-fg: oklch(0.4461 0.0263 256.8018); --kb-accent: oklch(0.9514 0.0250 236.8242); --kb-accent-fg: oklch(0.3791 0.1378 265.5222); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9276 0.0058 264.5313); --kb-admin-sidebar-bg: oklch(0.9846 0.0017 247.8389); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="modern-minimal"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2046 0 0); --kb-bg-card: oklch(0.2686 0 0); --kb-bg-popover: oklch(0.2686 0 0); --kb-bg-muted: oklch(0.2393 0 0); --kb-bg-input: oklch(0.3715 0 0); --kb-text-primary: oklch(0.9219 0 0); --kb-text-muted: oklch(0.7155 0 0); --kb-primary: oklch(0.6231 0.1880 259.8145); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.2686 0 0); --kb-info-fg: oklch(0.9219 0 0); --kb-accent: oklch(0.3791 0.1378 265.5222); --kb-accent-fg: oklch(0.8823 0.0571 254.1284); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3715 0 0); --kb-admin-sidebar-bg: oklch(0.2046 0 0); --kb-admin-nav-color: oklch(0.9219 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ MONO Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="mono"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9702 0 0); --kb-bg-input: oklch(0.9219 0 0); --kb-text-primary: oklch(0.1448 0 0); --kb-text-muted: oklch(0.5486 0 0); --kb-primary: oklch(0.5555 0 0); --kb-primary-fg: oklch(0.9851 0 0); --kb-info: oklch(0.9702 0 0); --kb-info-fg: oklch(0.2046 0 0); --kb-accent: oklch(0.9702 0 0); --kb-accent-fg: oklch(0.2046 0 0); --kb-danger: oklch(0.5830 0.2387 28.4765); --kb-danger-fg: oklch(0.9702 0 0); --kb-border-default: oklch(0.9219 0 0); --kb-admin-sidebar-bg: oklch(0.9851 0 0); --kb-admin-nav-color: oklch(0.1448 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00); --kb-shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00); --kb-shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00); --kb-shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00); --kb-shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00); } [data-theme="mono"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1448 0 0); --kb-bg-card: oklch(0.2134 0 0); --kb-bg-popover: oklch(0.2686 0 0); --kb-bg-muted: oklch(0.2686 0 0); --kb-bg-input: oklch(0.4386 0 0); --kb-text-primary: oklch(0.9851 0 0); --kb-text-muted: oklch(0.7090 0 0); --kb-primary: oklch(0.5555 0 0); --kb-primary-fg: oklch(0.9851 0 0); --kb-info: oklch(0.2686 0 0); --kb-info-fg: oklch(0.9851 0 0); --kb-accent: oklch(0.3715 0 0); --kb-accent-fg: oklch(0.9851 0 0); --kb-danger: oklch(0.7022 0.1892 22.2279); --kb-danger-fg: oklch(0.2686 0 0); --kb-border-default: oklch(0.3407 0 0); --kb-admin-sidebar-bg: oklch(0.2046 0 0); --kb-admin-nav-color: oklch(0.9851 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00); --kb-shadow-md: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 2px 4px -1px hsl(0 0% 0% / 0.00); --kb-shadow-lg: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 4px 6px -1px hsl(0 0% 0% / 0.00); --kb-shadow-xl: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 8px 10px -1px hsl(0 0% 0% / 0.00); --kb-shadow: 0px 1px 0px 0px hsl(0 0% 0% / 0.00), 0px 1px 2px -1px hsl(0 0% 0% / 0.00); } /* ============================================================================ NATURE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="nature"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9711 0.0074 80.7211); --kb-bg-card: oklch(0.9711 0.0074 80.7211); --kb-bg-popover: oklch(0.9711 0.0074 80.7211); --kb-bg-muted: oklch(0.9370 0.0142 74.4218); --kb-bg-input: oklch(0.8805 0.0208 74.6428); --kb-text-primary: oklch(0.3000 0.0358 30.2042); --kb-text-muted: oklch(0.4495 0.0486 39.2110); --kb-primary: oklch(0.5234 0.1347 144.1672); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9571 0.0210 147.6360); --kb-info-fg: oklch(0.4254 0.1159 144.3078); --kb-accent: oklch(0.8952 0.0504 146.0366); --kb-accent-fg: oklch(0.4254 0.1159 144.3078); --kb-danger: oklch(0.5386 0.1937 26.7249); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8805 0.0208 74.6428); --kb-admin-sidebar-bg: oklch(0.9370 0.0142 74.4218); --kb-admin-nav-color: oklch(0.3000 0.0358 30.2042); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="nature"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2683 0.0279 150.7681); --kb-bg-card: oklch(0.3327 0.0271 146.9867); --kb-bg-popover: oklch(0.3327 0.0271 146.9867); --kb-bg-muted: oklch(0.2926 0.0212 147.7496); --kb-bg-input: oklch(0.3942 0.0265 142.9926); --kb-text-primary: oklch(0.9423 0.0097 72.6595); --kb-text-muted: oklch(0.8579 0.0174 76.0955); --kb-primary: oklch(0.6731 0.1624 144.2083); --kb-primary-fg: oklch(0.2157 0.0453 145.7256); --kb-info: oklch(0.3942 0.0265 142.9926); --kb-info-fg: oklch(0.8970 0.0166 142.5518); --kb-accent: oklch(0.5752 0.1446 144.1813); --kb-accent-fg: oklch(0.9423 0.0097 72.6595); --kb-danger: oklch(0.5386 0.1937 26.7249); --kb-danger-fg: oklch(0.9423 0.0097 72.6595); --kb-border-default: oklch(0.3942 0.0265 142.9926); --kb-admin-sidebar-bg: oklch(0.2683 0.0279 150.7681); --kb-admin-nav-color: oklch(0.9423 0.0097 72.6595); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ NEO-BRUTALISM Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="neo-brutalism"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9551 0 0); --kb-bg-input: oklch(0 0 0); --kb-text-primary: oklch(0 0 0); --kb-text-muted: oklch(0.3211 0 0); --kb-primary: oklch(0.6489 0.2370 26.9728); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9680 0.2110 109.7692); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.5635 0.2408 260.8178); --kb-accent-fg: oklch(1.0000 0 0); --kb-danger: oklch(0 0 0); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0 0 0); --kb-admin-sidebar-bg: oklch(0.9551 0 0); --kb-admin-nav-color: oklch(0 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); --kb-shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00); --kb-shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00); --kb-shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00); --kb-shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); } [data-theme="neo-brutalism"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0 0 0); --kb-bg-card: oklch(0.3211 0 0); --kb-bg-popover: oklch(0.3211 0 0); --kb-bg-muted: oklch(0.2178 0 0); --kb-bg-input: oklch(1.0000 0 0); --kb-text-primary: oklch(1.0000 0 0); --kb-text-muted: oklch(0.8452 0 0); --kb-primary: oklch(0.7044 0.1872 23.1858); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.9691 0.2005 109.6228); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.6755 0.1765 252.2592); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(1.0000 0 0); --kb-danger-fg: oklch(0 0 0); --kb-border-default: oklch(1.0000 0 0); --kb-admin-sidebar-bg: oklch(0 0 0); --kb-admin-nav-color: oklch(1.0000 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); --kb-shadow-md: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 2px 4px -1px hsl(0 0% 0% / 1.00); --kb-shadow-lg: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 4px 6px -1px hsl(0 0% 0% / 1.00); --kb-shadow-xl: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 8px 10px -1px hsl(0 0% 0% / 1.00); --kb-shadow: 4px 4px 0px 0px hsl(0 0% 0% / 1.00), 4px 1px 2px -1px hsl(0 0% 0% / 1.00); } /* ============================================================================ NORTHERN-LIGHTS Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="northern-lights"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9824 0.0013 286.3757); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.8828 0.0285 98.1033); --kb-bg-input: oklch(0.8699 0 0); --kb-text-primary: oklch(0.3211 0 0); --kb-text-muted: oklch(0.5382 0 0); --kb-primary: oklch(0.6487 0.1538 150.3071); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.6746 0.1414 261.3380); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.8269 0.1080 211.9627); --kb-accent-fg: oklch(0.3211 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8699 0 0); --kb-admin-sidebar-bg: oklch(0.9824 0.0013 286.3757); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="northern-lights"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2303 0.0125 264.2926); --kb-bg-card: oklch(0.3210 0.0078 223.6661); --kb-bg-popover: oklch(0.3210 0.0078 223.6661); --kb-bg-muted: oklch(0.3867 0 0); --kb-bg-input: oklch(0.3867 0 0); --kb-text-primary: oklch(0.9219 0 0); --kb-text-muted: oklch(0.7155 0 0); --kb-primary: oklch(0.6487 0.1538 150.3071); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.5880 0.0993 245.7394); --kb-info-fg: oklch(0.9219 0 0); --kb-accent: oklch(0.6746 0.1414 261.3380); --kb-accent-fg: oklch(0.9219 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3867 0 0); --kb-admin-sidebar-bg: oklch(0.2303 0.0125 264.2926); --kb-admin-nav-color: oklch(0.9219 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ NOTEBOOK Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="notebook"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9821 0 0); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9158 0 0); --kb-bg-input: oklch(1.0000 0 0); --kb-text-primary: oklch(0.3485 0 0); --kb-text-muted: oklch(0.4313 0 0); --kb-primary: oklch(0.4891 0 0); --kb-primary-fg: oklch(0.9551 0 0); --kb-info: oklch(0.9006 0 0); --kb-info-fg: oklch(0.3485 0 0); --kb-accent: oklch(0.9354 0.0456 94.8549); --kb-accent-fg: oklch(0.4015 0.0436 37.9587); --kb-danger: oklch(0.6627 0.0978 20.0041); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.5538 0.0025 17.2320); --kb-admin-sidebar-bg: oklch(0.9551 0 0); --kb-admin-nav-color: oklch(0.3485 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03); --kb-shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03); --kb-shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03); --kb-shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03); --kb-shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03); } [data-theme="notebook"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2891 0 0); --kb-bg-card: oklch(0.3211 0 0); --kb-bg-popover: oklch(0.3211 0 0); --kb-bg-muted: oklch(0.3904 0 0); --kb-bg-input: oklch(0.3211 0 0); --kb-text-primary: oklch(0.8945 0 0); --kb-text-muted: oklch(0.7058 0 0); --kb-primary: oklch(0.7572 0 0); --kb-primary-fg: oklch(0.2891 0 0); --kb-info: oklch(0.4676 0 0); --kb-info-fg: oklch(0.8078 0 0); --kb-accent: oklch(0.9067 0 0); --kb-accent-fg: oklch(0.3211 0 0); --kb-danger: oklch(0.7915 0.0491 18.2410); --kb-danger-fg: oklch(0.2891 0 0); --kb-border-default: oklch(0.4276 0 0); --kb-admin-sidebar-bg: oklch(0.2478 0 0); --kb-admin-nav-color: oklch(0.8945 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03); --kb-shadow-md: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 2px 4px -1px hsl(0 0% 0% / 0.03); --kb-shadow-lg: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 4px 6px -1px hsl(0 0% 0% / 0.03); --kb-shadow-xl: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 8px 10px -1px hsl(0 0% 0% / 0.03); --kb-shadow: 1px 4px 5px 0px hsl(0 0% 0% / 0.03), 1px 1px 2px -1px hsl(0 0% 0% / 0.03); } /* ============================================================================ OCEAN-BREEZE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="ocean-breeze"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9751 0.0127 244.2507); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9670 0.0029 264.5419); --kb-bg-input: oklch(0.9276 0.0058 264.5313); --kb-text-primary: oklch(0.3729 0.0306 259.7328); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.7227 0.1920 149.5793); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9514 0.0250 236.8242); --kb-info-fg: oklch(0.4461 0.0263 256.8018); --kb-accent: oklch(0.9505 0.0507 163.0508); --kb-accent-fg: oklch(0.3729 0.0306 259.7328); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9276 0.0058 264.5313); --kb-admin-sidebar-bg: oklch(0.9514 0.0250 236.8242); --kb-admin-nav-color: oklch(0.3729 0.0306 259.7328); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); } [data-theme="ocean-breeze"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2077 0.0398 265.7549); --kb-bg-card: oklch(0.2795 0.0368 260.0310); --kb-bg-popover: oklch(0.2795 0.0368 260.0310); --kb-bg-muted: oklch(0.2463 0.0275 259.9628); --kb-bg-input: oklch(0.4461 0.0263 256.8018); --kb-text-primary: oklch(0.8717 0.0093 258.3382); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.7729 0.1535 163.2231); --kb-primary-fg: oklch(0.2077 0.0398 265.7549); --kb-info: oklch(0.3351 0.0331 260.9120); --kb-info-fg: oklch(0.7118 0.0129 286.0665); --kb-accent: oklch(0.3729 0.0306 259.7328); --kb-accent-fg: oklch(0.7118 0.0129 286.0665); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(0.2077 0.0398 265.7549); --kb-border-default: oklch(0.4461 0.0263 256.8018); --kb-admin-sidebar-bg: oklch(0.2795 0.0368 260.0310); --kb-admin-nav-color: oklch(0.8717 0.0093 258.3382); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 2px 4px -2px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 4px 6px -2px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 8px 10px -2px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 4px 8px -1px hsl(0 0% 0% / 0.10), 0px 1px 2px -2px hsl(0 0% 0% / 0.10); } /* ============================================================================ PASTEL-DREAMS Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="pastel-dreams"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9689 0.0090 314.7819); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9464 0.0327 307.1745); --kb-bg-input: oklch(0.9073 0.0530 306.0902); --kb-text-primary: oklch(0.3729 0.0306 259.7328); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.7090 0.1592 293.5412); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9073 0.0530 306.0902); --kb-info-fg: oklch(0.4461 0.0263 256.8018); --kb-accent: oklch(0.9376 0.0260 321.9388); --kb-accent-fg: oklch(0.3729 0.0306 259.7328); --kb-danger: oklch(0.8077 0.1035 19.5706); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9073 0.0530 306.0902); --kb-admin-sidebar-bg: oklch(0.9073 0.0530 306.0902); --kb-admin-nav-color: oklch(0.3729 0.0306 259.7328); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 1px 2px -5px hsl(0 0% 0% / 0.08); --kb-shadow-md: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 2px 4px -5px hsl(0 0% 0% / 0.08); --kb-shadow-lg: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 4px 6px -5px hsl(0 0% 0% / 0.08); --kb-shadow-xl: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 8px 10px -5px hsl(0 0% 0% / 0.08); --kb-shadow: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 1px 2px -5px hsl(0 0% 0% / 0.08); } [data-theme="pastel-dreams"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2161 0.0061 56.0434); --kb-bg-card: oklch(0.2805 0.0309 307.2326); --kb-bg-popover: oklch(0.2805 0.0309 307.2326); --kb-bg-muted: oklch(0.2283 0.0375 302.9006); --kb-bg-input: oklch(0.3416 0.0444 308.8496); --kb-text-primary: oklch(0.9299 0.0334 272.7879); --kb-text-muted: oklch(0.7137 0.0192 261.3246); --kb-primary: oklch(0.7874 0.1179 295.7538); --kb-primary-fg: oklch(0.2161 0.0061 56.0434); --kb-info: oklch(0.3416 0.0444 308.8496); --kb-info-fg: oklch(0.8717 0.0093 258.3382); --kb-accent: oklch(0.3858 0.0509 304.6383); --kb-accent-fg: oklch(0.8717 0.0093 258.3382); --kb-danger: oklch(0.8077 0.1035 19.5706); --kb-danger-fg: oklch(0.2161 0.0061 56.0434); --kb-border-default: oklch(0.3416 0.0444 308.8496); --kb-admin-sidebar-bg: oklch(0.3416 0.0444 308.8496); --kb-admin-nav-color: oklch(0.9299 0.0334 272.7879); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 1px 2px -5px hsl(0 0% 0% / 0.08); --kb-shadow-md: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 2px 4px -5px hsl(0 0% 0% / 0.08); --kb-shadow-lg: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 4px 6px -5px hsl(0 0% 0% / 0.08); --kb-shadow-xl: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 8px 10px -5px hsl(0 0% 0% / 0.08); --kb-shadow: 0px 8px 16px -4px hsl(0 0% 0% / 0.08), 0px 1px 2px -5px hsl(0 0% 0% / 0.08); } /* ============================================================================ PERPETUITY Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="perpetuity"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9491 0.0085 197.0126); --kb-bg-card: oklch(0.9724 0.0053 197.0692); --kb-bg-popover: oklch(0.9724 0.0053 197.0692); --kb-bg-muted: oklch(0.9295 0.0107 196.9723); --kb-bg-input: oklch(0.9244 0.0181 196.8450); --kb-text-primary: oklch(0.3772 0.0619 212.6640); --kb-text-muted: oklch(0.5428 0.0594 201.5662); --kb-primary: oklch(0.5624 0.0947 203.2755); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9244 0.0181 196.8450); --kb-info-fg: oklch(0.3772 0.0619 212.6640); --kb-accent: oklch(0.9021 0.0297 201.8915); --kb-accent-fg: oklch(0.3772 0.0619 212.6640); --kb-danger: oklch(0.5732 0.1901 25.5409); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8931 0.0205 204.4136); --kb-admin-sidebar-bg: oklch(0.9280 0.0183 205.3151); --kb-admin-nav-color: oklch(0.3772 0.0619 212.6640); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15); --kb-shadow-md: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 2px 4px -1px hsl(185 70% 30% / 0.15); --kb-shadow-lg: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 4px 6px -1px hsl(185 70% 30% / 0.15); --kb-shadow-xl: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 8px 10px -1px hsl(185 70% 30% / 0.15); --kb-shadow: 1px 1px 2px 0px hsl(185 70% 30% / 0.15), 1px 1px 2px -1px hsl(185 70% 30% / 0.15); } [data-theme="perpetuity"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2068 0.0247 224.4533); --kb-bg-card: oklch(0.2293 0.0276 216.0674); --kb-bg-popover: oklch(0.2293 0.0276 216.0674); --kb-bg-muted: oklch(0.2894 0.0412 218.8153); --kb-bg-input: oklch(0.3775 0.0564 216.5010); --kb-text-primary: oklch(0.8520 0.1269 195.0354); --kb-text-muted: oklch(0.6611 0.0975 195.0526); --kb-primary: oklch(0.8520 0.1269 195.0354); --kb-primary-fg: oklch(0.2068 0.0247 224.4533); --kb-info: oklch(0.3775 0.0564 216.5010); --kb-info-fg: oklch(0.8520 0.1269 195.0354); --kb-accent: oklch(0.3775 0.0564 216.5010); --kb-accent-fg: oklch(0.8520 0.1269 195.0354); --kb-danger: oklch(0.6168 0.2086 25.8088); --kb-danger-fg: oklch(0.9612 0 0); --kb-border-default: oklch(0.3775 0.0564 216.5010); --kb-admin-sidebar-bg: oklch(0.2068 0.0247 224.4533); --kb-admin-nav-color: oklch(0.8520 0.1269 195.0354); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20); --kb-shadow-md: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 2px 4px -1px hsl(180 70% 60% / 0.20); --kb-shadow-lg: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 4px 6px -1px hsl(180 70% 60% / 0.20); --kb-shadow-xl: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 8px 10px -1px hsl(180 70% 60% / 0.20); --kb-shadow: 1px 1px 2px 0px hsl(180 70% 60% / 0.20), 1px 1px 2px -1px hsl(180 70% 60% / 0.20); } /* ============================================================================ QUANTUM-ROSE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="quantum-rose"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9692 0.0192 343.9344); --kb-bg-card: oklch(0.9837 0.0107 339.3288); --kb-bg-popover: oklch(0.9837 0.0107 339.3288); --kb-bg-muted: oklch(0.9429 0.0363 344.2604); --kb-bg-input: oklch(0.9230 0.0701 326.1273); --kb-text-primary: oklch(0.4426 0.1653 352.3762); --kb-text-muted: oklch(0.5740 0.1732 352.0544); --kb-primary: oklch(0.6002 0.2414 0.1348); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9230 0.0701 326.1273); --kb-info-fg: oklch(0.4426 0.1653 352.3762); --kb-accent: oklch(0.8766 0.0828 344.8849); --kb-accent-fg: oklch(0.4426 0.1653 352.3762); --kb-danger: oklch(0.5831 0.1911 6.3410); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8881 0.0747 344.3866); --kb-admin-sidebar-bg: oklch(0.9629 0.0227 345.7485); --kb-admin-nav-color: oklch(0.4426 0.1653 352.3762); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 1px 2px -1px hsl(330 70% 30% / 0.18); --kb-shadow-md: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 2px 4px -1px hsl(330 70% 30% / 0.18); --kb-shadow-lg: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 4px 6px -1px hsl(330 70% 30% / 0.18); --kb-shadow-xl: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 8px 10px -1px hsl(330 70% 30% / 0.18); --kb-shadow: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 1px 2px -1px hsl(330 70% 30% / 0.18); } [data-theme="quantum-rose"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1808 0.0535 313.7159); --kb-bg-card: oklch(0.2398 0.0661 313.2337); --kb-bg-popover: oklch(0.2398 0.0661 313.2337); --kb-bg-muted: oklch(0.2701 0.0770 312.3525); --kb-bg-input: oklch(0.3184 0.0915 319.6465); --kb-text-primary: oklch(0.8624 0.1307 326.6356); --kb-text-muted: oklch(0.7116 0.1623 327.1132); --kb-primary: oklch(0.7543 0.2319 332.0212); --kb-primary-fg: oklch(0.1608 0.0493 327.5673); --kb-info: oklch(0.3184 0.0915 319.6465); --kb-info-fg: oklch(0.8624 0.1307 326.6356); --kb-accent: oklch(0.3558 0.1201 325.7655); --kb-accent-fg: oklch(0.8624 0.1307 326.6356); --kb-danger: oklch(0.6539 0.2441 7.1740); --kb-danger-fg: oklch(0.9821 0 0); --kb-border-default: oklch(0.3280 0.1202 313.5393); --kb-admin-sidebar-bg: oklch(0.1941 0.0504 311.3983); --kb-admin-nav-color: oklch(0.8624 0.1307 326.6356); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 1px 2px -1px hsl(300 80% 50% / 0.18); --kb-shadow-md: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 2px 4px -1px hsl(300 80% 50% / 0.18); --kb-shadow-lg: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 4px 6px -1px hsl(300 80% 50% / 0.18); --kb-shadow-xl: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 8px 10px -1px hsl(300 80% 50% / 0.18); --kb-shadow: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 1px 2px -1px hsl(300 80% 50% / 0.18); } /* ============================================================================ RETRO-ARCADE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="retro-arcade"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9735 0.0261 90.0953); --kb-bg-card: oklch(0.9306 0.0260 92.4020); --kb-bg-popover: oklch(0.9306 0.0260 92.4020); --kb-bg-muted: oklch(0.6979 0.0159 196.7940); --kb-bg-input: oklch(0.6537 0.0197 205.2618); --kb-text-primary: oklch(0.3092 0.0518 219.6516); --kb-text-muted: oklch(0.3092 0.0518 219.6516); --kb-primary: oklch(0.5924 0.2025 355.8943); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.6437 0.1019 187.3840); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.5808 0.1732 39.5003); --kb-accent-fg: oklch(1.0000 0 0); --kb-danger: oklch(0.5863 0.2064 27.1172); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.6537 0.0197 205.2618); --kb-admin-sidebar-bg: oklch(0.9735 0.0261 90.0953); --kb-admin-nav-color: oklch(0.3092 0.0518 219.6516); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15); --kb-shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15); --kb-shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15); --kb-shadow-xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 8px 10px -1px hsl(196 83% 10% / 0.15); --kb-shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15); } [data-theme="retro-arcade"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2673 0.0486 219.8169); --kb-bg-card: oklch(0.3092 0.0518 219.6516); --kb-bg-popover: oklch(0.3092 0.0518 219.6516); --kb-bg-muted: oklch(0.5230 0.0283 219.1365); --kb-bg-input: oklch(0.5230 0.0283 219.1365); --kb-text-primary: oklch(0.6979 0.0159 196.7940); --kb-text-muted: oklch(0.6979 0.0159 196.7940); --kb-primary: oklch(0.5924 0.2025 355.8943); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.6437 0.1019 187.3840); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.5808 0.1732 39.5003); --kb-accent-fg: oklch(1.0000 0 0); --kb-danger: oklch(0.5863 0.2064 27.1172); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.5230 0.0283 219.1365); --kb-admin-sidebar-bg: oklch(0.2673 0.0486 219.8169); --kb-admin-nav-color: oklch(0.6979 0.0159 196.7940); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15); --kb-shadow-md: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 2px 4px -1px hsl(196 83% 10% / 0.15); --kb-shadow-lg: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 4px 6px -1px hsl(196 83% 10% / 0.15); --kb-shadow-xl: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 8px 10px -1px hsl(196 83% 10% / 0.15); --kb-shadow: 2px 2px 4px 0px hsl(196 83% 10% / 0.15), 2px 1px 2px -1px hsl(196 83% 10% / 0.15); } /* ============================================================================ SAGE-GARDEN Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="sage-garden"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9761 0.0041 91.4461); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9251 0.0071 88.6450); --kb-bg-input: oklch(1.0000 0 0); --kb-text-primary: oklch(0.2417 0.0298 269.8827); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.6333 0.0309 154.9039); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8596 0.0291 119.9919); --kb-info-fg: oklch(0.2417 0.0298 269.8827); --kb-accent: oklch(0.8242 0.0221 136.6092); --kb-accent-fg: oklch(0.2417 0.0298 269.8827); --kb-danger: oklch(0.5624 0.1743 26.1433); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9251 0.0071 88.6450); --kb-admin-sidebar-bg: oklch(0.9845 0.0026 106.4477); --kb-admin-nav-color: oklch(0.2417 0.0298 269.8827); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 1px 2px -1px hsl(225 27.7778% 14.1176% / 0.04); --kb-shadow-md: 0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 2px 4px -1px hsl(225 27.7778% 14.1176% / 0.04); --kb-shadow-lg: 0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 4px 6px -1px hsl(225 27.7778% 14.1176% / 0.04); --kb-shadow-xl: 0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 8px 10px -1px hsl(225 27.7778% 14.1176% / 0.04); --kb-shadow: 0px 1px 2px 0px hsl(225 27.7778% 14.1176% / 0.04), 0px 1px 2px -1px hsl(225 27.7778% 14.1176% / 0.04); } [data-theme="sage-garden"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1448 0 0); --kb-bg-card: oklch(0.1822 0 0); --kb-bg-popover: oklch(0.1822 0 0); --kb-bg-muted: oklch(0.2178 0 0); --kb-bg-input: oklch(0.1822 0 0); --kb-text-primary: oklch(0.9702 0 0); --kb-text-muted: oklch(0.7058 0 0); --kb-primary: oklch(0.6333 0.0309 154.9039); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.2178 0 0); --kb-info-fg: oklch(0.9702 0 0); --kb-accent: oklch(0.3709 0.0248 153.9823); --kb-accent-fg: oklch(0.9702 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.2850 0 0); --kb-admin-sidebar-bg: oklch(0.1684 0 0); --kb-admin-nav-color: oklch(0.9702 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 1px 2px -1px hsl(0 0% 0% / 0.04); --kb-shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 2px 4px -1px hsl(0 0% 0% / 0.04); --kb-shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 4px 6px -1px hsl(0 0% 0% / 0.04); --kb-shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 8px 10px -1px hsl(0 0% 0% / 0.04); --kb-shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.04), 0px 1px 2px -1px hsl(0 0% 0% / 0.04); } /* ============================================================================ SOFT-POP Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="soft-pop"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9789 0.0082 121.6272); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9551 0 0); --kb-bg-input: oklch(0.5555 0 0); --kb-text-primary: oklch(0 0 0); --kb-text-muted: oklch(0.3211 0 0); --kb-primary: oklch(0.5106 0.2301 276.9656); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.7038 0.1230 182.5025); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.7686 0.1647 70.0804); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0 0 0); --kb-admin-sidebar-bg: oklch(0.9789 0.0082 121.6272); --kb-admin-nav-color: oklch(0 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); } [data-theme="soft-pop"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0 0 0); --kb-bg-card: oklch(0.2455 0.0217 257.2823); --kb-bg-popover: oklch(0.2455 0.0217 257.2823); --kb-bg-muted: oklch(0.3211 0 0); --kb-bg-input: oklch(1.0000 0 0); --kb-text-primary: oklch(1.0000 0 0); --kb-text-muted: oklch(0.8452 0 0); --kb-primary: oklch(0.6801 0.1583 276.9349); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.7845 0.1325 181.9120); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.8790 0.1534 91.6054); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(0.7106 0.1661 22.2162); --kb-danger-fg: oklch(0 0 0); --kb-border-default: oklch(0.4459 0 0); --kb-admin-sidebar-bg: oklch(0 0 0); --kb-admin-nav-color: oklch(1.0000 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow-md: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 2px 4px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow-lg: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 4px 6px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow-xl: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 8px 10px -1px hsl(0 0% 10.1961% / 0.05); --kb-shadow: 0px 0px 0px 0px hsl(0 0% 10.1961% / 0.05), 0px 1px 2px -1px hsl(0 0% 10.1961% / 0.05); } /* ============================================================================ SOLAR-DUSK Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="solar-dusk"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9885 0.0057 84.5659); --kb-bg-card: oklch(0.9686 0.0091 78.2818); --kb-bg-popover: oklch(0.9686 0.0091 78.2818); --kb-bg-muted: oklch(0.9363 0.0218 83.2637); --kb-bg-input: oklch(0.8866 0.0404 89.6994); --kb-text-primary: oklch(0.3660 0.0251 49.6085); --kb-text-muted: oklch(0.5534 0.0116 58.0708); --kb-primary: oklch(0.5553 0.1455 48.9975); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8276 0.0752 74.4400); --kb-info-fg: oklch(0.4444 0.0096 73.6390); --kb-accent: oklch(0.9000 0.0500 74.9889); --kb-accent-fg: oklch(0.4444 0.0096 73.6390); --kb-danger: oklch(0.4437 0.1613 26.8994); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8866 0.0404 89.6994); --kb-admin-sidebar-bg: oklch(0.9363 0.0218 83.2637); --kb-admin-nav-color: oklch(0.3660 0.0251 49.6085); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18); --kb-shadow-md: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 2px 4px -1px hsl(28 18% 25% / 0.18); --kb-shadow-lg: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 4px 6px -1px hsl(28 18% 25% / 0.18); --kb-shadow-xl: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 8px 10px -1px hsl(28 18% 25% / 0.18); --kb-shadow: 0px 2px 3px 0px hsl(28 18% 25% / 0.18), 0px 1px 2px -1px hsl(28 18% 25% / 0.18); } [data-theme="solar-dusk"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2161 0.0061 56.0434); --kb-bg-card: oklch(0.2685 0.0063 34.2976); --kb-bg-popover: oklch(0.2685 0.0063 34.2976); --kb-bg-muted: oklch(0.2330 0.0073 67.4563); --kb-bg-input: oklch(0.3741 0.0087 67.5582); --kb-text-primary: oklch(0.9699 0.0013 106.4238); --kb-text-muted: oklch(0.7161 0.0091 56.2590); --kb-primary: oklch(0.7049 0.1867 47.6044); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.4444 0.0096 73.6390); --kb-info-fg: oklch(0.9232 0.0026 48.7171); --kb-accent: oklch(0.3598 0.0497 229.3202); --kb-accent-fg: oklch(0.9232 0.0026 48.7171); --kb-danger: oklch(0.5771 0.2152 27.3250); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3741 0.0087 67.5582); --kb-admin-sidebar-bg: oklch(0.2685 0.0063 34.2976); --kb-admin-nav-color: oklch(0.9699 0.0013 106.4238); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18); --kb-shadow-md: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 2px 4px -1px hsl(0 0% 5% / 0.18); --kb-shadow-lg: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 4px 6px -1px hsl(0 0% 5% / 0.18); --kb-shadow-xl: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 8px 10px -1px hsl(0 0% 5% / 0.18); --kb-shadow: 0px 2px 3px 0px hsl(0 0% 5% / 0.18), 0px 1px 2px -1px hsl(0 0% 5% / 0.18); } /* ============================================================================ STARRY-NIGHT Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="starry-night"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9755 0.0045 258.3245); --kb-bg-card: oklch(0.9341 0.0132 251.5628); --kb-bg-popover: oklch(0.9856 0.0278 98.0540); --kb-bg-muted: oklch(0.9202 0.0080 106.5563); --kb-bg-input: oklch(0.6896 0.0714 234.0387); --kb-text-primary: oklch(0.2558 0.0433 268.0662); --kb-text-muted: oklch(0.4815 0.1178 263.3758); --kb-primary: oklch(0.4815 0.1178 263.3758); --kb-primary-fg: oklch(0.9856 0.0278 98.0540); --kb-info: oklch(0.8567 0.1164 81.0092); --kb-info-fg: oklch(0.2558 0.0433 268.0662); --kb-accent: oklch(0.6896 0.0714 234.0387); --kb-accent-fg: oklch(0.9856 0.0278 98.0540); --kb-danger: oklch(0.2611 0.0376 322.5267); --kb-danger-fg: oklch(0.9856 0.0278 98.0540); --kb-border-default: oklch(0.7791 0.0156 251.1926); --kb-admin-sidebar-bg: oklch(0.9341 0.0132 251.5628); --kb-admin-nav-color: oklch(0.2558 0.0433 268.0662); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="starry-night"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2204 0.0198 275.8439); --kb-bg-card: oklch(0.2703 0.0407 281.3036); --kb-bg-popover: oklch(0.2703 0.0407 281.3036); --kb-bg-muted: oklch(0.2424 0.0324 281.0890); --kb-bg-input: oklch(0.4815 0.1178 263.3758); --kb-text-primary: oklch(0.9366 0.0129 266.6974); --kb-text-muted: oklch(0.6243 0.0412 262.0375); --kb-primary: oklch(0.4815 0.1178 263.3758); --kb-primary-fg: oklch(0.9097 0.1440 95.1120); --kb-info: oklch(0.9097 0.1440 95.1120); --kb-info-fg: oklch(0.2703 0.0407 281.3036); --kb-accent: oklch(0.8469 0.0524 264.7751); --kb-accent-fg: oklch(0.2204 0.0198 275.8439); --kb-danger: oklch(0.5280 0.1200 357.1130); --kb-danger-fg: oklch(0.9097 0.1440 95.1120); --kb-border-default: oklch(0.3072 0.0287 281.7681); --kb-admin-sidebar-bg: oklch(0.2703 0.0407 281.3036); --kb-admin-nav-color: oklch(0.9366 0.0129 266.6974); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ SUNSET-HORIZON Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="sunset-horizon"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9856 0.0084 56.3169); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9656 0.0176 39.4009); --kb-bg-input: oklch(0.9296 0.0370 38.6868); --kb-text-primary: oklch(0.3353 0.0132 2.7676); --kb-text-muted: oklch(0.5534 0.0116 58.0708); --kb-primary: oklch(0.7357 0.1641 34.7091); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9596 0.0200 28.9029); --kb-info-fg: oklch(0.5587 0.1294 32.7364); --kb-accent: oklch(0.8278 0.1131 57.9984); --kb-accent-fg: oklch(0.3353 0.0132 2.7676); --kb-danger: oklch(0.6122 0.2082 22.2410); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9296 0.0370 38.6868); --kb-admin-sidebar-bg: oklch(0.9656 0.0176 39.4009); --kb-admin-nav-color: oklch(0.3353 0.0132 2.7676); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09); --kb-shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09); --kb-shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09); --kb-shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09); --kb-shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09); } [data-theme="sunset-horizon"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2569 0.0169 352.4042); --kb-bg-card: oklch(0.3184 0.0176 341.4465); --kb-bg-popover: oklch(0.3184 0.0176 341.4465); --kb-bg-muted: oklch(0.2848 0.0159 343.6554); --kb-bg-input: oklch(0.3637 0.0203 342.2664); --kb-text-primary: oklch(0.9397 0.0119 51.3156); --kb-text-muted: oklch(0.8378 0.0237 52.6346); --kb-primary: oklch(0.7357 0.1641 34.7091); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.3637 0.0203 342.2664); --kb-info-fg: oklch(0.9397 0.0119 51.3156); --kb-accent: oklch(0.8278 0.1131 57.9984); --kb-accent-fg: oklch(0.2569 0.0169 352.4042); --kb-danger: oklch(0.6122 0.2082 22.2410); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3637 0.0203 342.2664); --kb-admin-sidebar-bg: oklch(0.2569 0.0169 352.4042); --kb-admin-nav-color: oklch(0.9397 0.0119 51.3156); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09); --kb-shadow-md: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 2px 4px -4px hsl(0 0% 0% / 0.09); --kb-shadow-lg: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 4px 6px -4px hsl(0 0% 0% / 0.09); --kb-shadow-xl: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 8px 10px -4px hsl(0 0% 0% / 0.09); --kb-shadow: 0px 6px 12px -3px hsl(0 0% 0% / 0.09), 0px 1px 2px -4px hsl(0 0% 0% / 0.09); } /* ============================================================================ SUPABASE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="supabase"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9911 0 0); --kb-bg-card: oklch(0.9911 0 0); --kb-bg-popover: oklch(0.9911 0 0); --kb-bg-muted: oklch(0.9461 0 0); --kb-bg-input: oklch(0.9731 0 0); --kb-text-primary: oklch(0.2046 0 0); --kb-text-muted: oklch(0.2435 0 0); --kb-primary: oklch(0.8348 0.1302 160.9080); --kb-primary-fg: oklch(0.2626 0.0147 166.4589); --kb-info: oklch(0.9940 0 0); --kb-info-fg: oklch(0.2046 0 0); --kb-accent: oklch(0.9461 0 0); --kb-accent-fg: oklch(0.2435 0 0); --kb-danger: oklch(0.5523 0.1927 32.7272); --kb-danger-fg: oklch(0.9934 0.0032 17.2118); --kb-border-default: oklch(0.9037 0 0); --kb-admin-sidebar-bg: oklch(0.9911 0 0); --kb-admin-nav-color: oklch(0.5452 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17); --kb-shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17); --kb-shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17); --kb-shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17); --kb-shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17); } [data-theme="supabase"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.1822 0 0); --kb-bg-card: oklch(0.2046 0 0); --kb-bg-popover: oklch(0.2603 0 0); --kb-bg-muted: oklch(0.2393 0 0); --kb-bg-input: oklch(0.2603 0 0); --kb-text-primary: oklch(0.9288 0.0126 255.5078); --kb-text-muted: oklch(0.7122 0 0); --kb-primary: oklch(0.4365 0.1044 156.7556); --kb-primary-fg: oklch(0.9213 0.0135 167.1556); --kb-info: oklch(0.2603 0 0); --kb-info-fg: oklch(0.9851 0 0); --kb-accent: oklch(0.3132 0 0); --kb-accent-fg: oklch(0.9851 0 0); --kb-danger: oklch(0.3123 0.0852 29.7877); --kb-danger-fg: oklch(0.9368 0.0045 34.3092); --kb-border-default: oklch(0.2809 0 0); --kb-admin-sidebar-bg: oklch(0.1822 0 0); --kb-admin-nav-color: oklch(0.6301 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17); --kb-shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 2px 4px -1px hsl(0 0% 0% / 0.17); --kb-shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 4px 6px -1px hsl(0 0% 0% / 0.17); --kb-shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 8px 10px -1px hsl(0 0% 0% / 0.17); --kb-shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.17), 0px 1px 2px -1px hsl(0 0% 0% / 0.17); } /* ============================================================================ T3-CHAT Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="t3-chat"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9754 0.0084 325.6414); --kb-bg-card: oklch(0.9754 0.0084 325.6414); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9395 0.0260 331.5454); --kb-bg-input: oklch(0.8517 0.0558 336.6002); --kb-text-primary: oklch(0.3257 0.1161 325.0372); --kb-text-muted: oklch(0.4924 0.1244 324.4523); --kb-primary: oklch(0.5316 0.1409 355.1999); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8696 0.0675 334.8991); --kb-info-fg: oklch(0.4448 0.1341 324.7991); --kb-accent: oklch(0.8696 0.0675 334.8991); --kb-accent-fg: oklch(0.4448 0.1341 324.7991); --kb-danger: oklch(0.5248 0.1368 20.8317); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8568 0.0829 328.9110); --kb-admin-sidebar-bg: oklch(0.9360 0.0288 320.5788); --kb-admin-nav-color: oklch(0.4948 0.1909 354.5435); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="t3-chat"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2409 0.0201 307.5346); --kb-bg-card: oklch(0.2803 0.0232 307.5413); --kb-bg-popover: oklch(0.1548 0.0132 338.9015); --kb-bg-muted: oklch(0.2634 0.0219 309.4748); --kb-bg-input: oklch(0.3387 0.0195 332.8347); --kb-text-primary: oklch(0.8398 0.0387 309.5391); --kb-text-muted: oklch(0.7940 0.0372 307.1032); --kb-primary: oklch(0.4607 0.1853 4.0994); --kb-primary-fg: oklch(0.8560 0.0618 346.3684); --kb-info: oklch(0.3137 0.0306 310.0610); --kb-info-fg: oklch(0.8483 0.0382 307.9613); --kb-accent: oklch(0.3649 0.0508 308.4911); --kb-accent-fg: oklch(0.9647 0.0091 341.8035); --kb-danger: oklch(0.2258 0.0524 12.6119); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3286 0.0154 343.4461); --kb-admin-sidebar-bg: oklch(0.1893 0.0163 331.0475); --kb-admin-nav-color: oklch(0.8607 0.0293 343.6612); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ TANGERINE Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="tangerine"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9383 0.0042 236.4993); --kb-bg-card: oklch(1.0000 0 0); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9846 0.0017 247.8389); --kb-bg-input: oklch(0.9700 0.0029 264.5420); --kb-text-primary: oklch(0.3211 0 0); --kb-text-muted: oklch(0.5510 0.0234 264.3637); --kb-primary: oklch(0.6397 0.1720 36.4421); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9670 0.0029 264.5419); --kb-info-fg: oklch(0.4461 0.0263 256.8018); --kb-accent: oklch(0.9119 0.0222 243.8174); --kb-accent-fg: oklch(0.3791 0.1378 265.5222); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9022 0.0052 247.8822); --kb-admin-sidebar-bg: oklch(0.9030 0.0046 258.3257); --kb-admin-nav-color: oklch(0.3211 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10); } [data-theme="tangerine"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2598 0.0306 262.6666); --kb-bg-card: oklch(0.3106 0.0301 268.6365); --kb-bg-popover: oklch(0.2900 0.0249 268.3986); --kb-bg-muted: oklch(0.3095 0.0266 266.7132); --kb-bg-input: oklch(0.3843 0.0301 269.7337); --kb-text-primary: oklch(0.9219 0 0); --kb-text-muted: oklch(0.7155 0 0); --kb-primary: oklch(0.6397 0.1720 36.4421); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.3095 0.0266 266.7132); --kb-info-fg: oklch(0.9219 0 0); --kb-accent: oklch(0.3380 0.0589 267.5867); --kb-accent-fg: oklch(0.8823 0.0571 254.1284); --kb-danger: oklch(0.6368 0.2078 25.3313); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3843 0.0301 269.7337); --kb-admin-sidebar-bg: oklch(0.3100 0.0283 267.7408); --kb-admin-nav-color: oklch(0.9219 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10); --kb-shadow-md: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 2px 4px -1px hsl(0 0% 0% / 0.10); --kb-shadow-lg: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 4px 6px -1px hsl(0 0% 0% / 0.10); --kb-shadow-xl: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 8px 10px -1px hsl(0 0% 0% / 0.10); --kb-shadow: 0px 1px 3px 0px hsl(0 0% 0% / 0.10), 0px 1px 2px -1px hsl(0 0% 0% / 0.10); } /* ============================================================================ TWITTER Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="twitter"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(1.0000 0 0); --kb-bg-card: oklch(0.9784 0.0011 197.1387); --kb-bg-popover: oklch(1.0000 0 0); --kb-bg-muted: oklch(0.9222 0.0013 286.3737); --kb-bg-input: oklch(0.9809 0.0025 228.7836); --kb-text-primary: oklch(0.1884 0.0128 248.5103); --kb-text-muted: oklch(0.1884 0.0128 248.5103); --kb-primary: oklch(0.6723 0.1606 244.9955); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.1884 0.0128 248.5103); --kb-info-fg: oklch(1.0000 0 0); --kb-accent: oklch(0.9392 0.0166 250.8453); --kb-accent-fg: oklch(0.6723 0.1606 244.9955); --kb-danger: oklch(0.6188 0.2376 25.7658); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9317 0.0118 231.6594); --kb-admin-sidebar-bg: oklch(0.9784 0.0011 197.1387); --kb-admin-nav-color: oklch(0.1884 0.0128 248.5103); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); } [data-theme="twitter"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0 0 0); --kb-bg-card: oklch(0.2097 0.0080 274.5332); --kb-bg-popover: oklch(0 0 0); --kb-bg-muted: oklch(0.2090 0 0); --kb-bg-input: oklch(0.3020 0.0288 244.8244); --kb-text-primary: oklch(0.9328 0.0025 228.7857); --kb-text-muted: oklch(0.5637 0.0078 247.9662); --kb-primary: oklch(0.6692 0.1607 245.0110); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9622 0.0035 219.5331); --kb-info-fg: oklch(0.1884 0.0128 248.5103); --kb-accent: oklch(0.1928 0.0331 242.5459); --kb-accent-fg: oklch(0.6692 0.1607 245.0110); --kb-danger: oklch(0.6188 0.2376 25.7658); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.2674 0.0047 248.0045); --kb-admin-sidebar-bg: oklch(0.2097 0.0080 274.5332); --kb-admin-nav-color: oklch(0.8853 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-shadow-sm: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow-md: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 2px 4px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow-lg: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 4px 6px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow-xl: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 8px 10px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); --kb-shadow: 0px 2px 0px 0px hsl(202.8169 89.1213% 53.1373% / 0.00), 0px 1px 2px -1px hsl(202.8169 89.1213% 53.1373% / 0.00); } /* ============================================================================ VERCEL Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="vercel"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9900 0 0); --kb-bg-card: oklch(1 0 0); --kb-bg-popover: oklch(0.9900 0 0); --kb-bg-muted: oklch(0.9700 0 0); --kb-bg-input: oklch(0.9400 0 0); --kb-text-primary: oklch(0 0 0); --kb-text-muted: oklch(0.4400 0 0); --kb-primary: oklch(0 0 0); --kb-primary-fg: oklch(1 0 0); --kb-info: oklch(0.9400 0 0); --kb-info-fg: oklch(0 0 0); --kb-accent: oklch(0.9400 0 0); --kb-accent-fg: oklch(0 0 0); --kb-danger: oklch(0.6300 0.1900 23.0300); --kb-danger-fg: oklch(1 0 0); --kb-border-default: oklch(0.9200 0 0); --kb-admin-sidebar-bg: oklch(0.9900 0 0); --kb-admin-nav-color: oklch(0 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --kb-shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); --kb-shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); --kb-shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); --kb-shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); } [data-theme="vercel"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0 0 0); --kb-bg-card: oklch(0.1400 0 0); --kb-bg-popover: oklch(0.1800 0 0); --kb-bg-muted: oklch(0.2300 0 0); --kb-bg-input: oklch(0.3200 0 0); --kb-text-primary: oklch(1 0 0); --kb-text-muted: oklch(0.7200 0 0); --kb-primary: oklch(1 0 0); --kb-primary-fg: oklch(0 0 0); --kb-info: oklch(0.2500 0 0); --kb-info-fg: oklch(1 0 0); --kb-accent: oklch(0.3200 0 0); --kb-accent-fg: oklch(1 0 0); --kb-danger: oklch(0.6900 0.2000 23.9100); --kb-danger-fg: oklch(0 0 0); --kb-border-default: oklch(0.2600 0 0); --kb-admin-sidebar-bg: oklch(0.1800 0 0); --kb-admin-nav-color: oklch(1 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); --kb-shadow-md: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 2px 4px -1px hsl(0 0% 0% / 0.18); --kb-shadow-lg: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 4px 6px -1px hsl(0 0% 0% / 0.18); --kb-shadow-xl: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 8px 10px -1px hsl(0 0% 0% / 0.18); --kb-shadow: 0px 1px 2px 0px hsl(0 0% 0% / 0.18), 0px 1px 2px -1px hsl(0 0% 0% / 0.18); } /* ============================================================================ VINTAGE-PAPER Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="vintage-paper"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9582 0.0152 90.2357); --kb-bg-card: oklch(0.9914 0.0098 87.4695); --kb-bg-popover: oklch(0.9914 0.0098 87.4695); --kb-bg-muted: oklch(0.9239 0.0190 83.0636); --kb-bg-input: oklch(0.8606 0.0321 84.5881); --kb-text-primary: oklch(0.3760 0.0225 64.3434); --kb-text-muted: oklch(0.5391 0.0387 71.1655); --kb-primary: oklch(0.6180 0.0778 65.5444); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.8846 0.0302 85.5655); --kb-info-fg: oklch(0.4313 0.0300 64.9288); --kb-accent: oklch(0.8348 0.0426 88.8064); --kb-accent-fg: oklch(0.3760 0.0225 64.3434); --kb-danger: oklch(0.5471 0.1438 32.9149); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.8606 0.0321 84.5881); --kb-admin-sidebar-bg: oklch(0.9239 0.0190 83.0636); --kb-admin-nav-color: oklch(0.3760 0.0225 64.3434); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); --kb-shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12); --kb-shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12); --kb-shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12); --kb-shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); } [data-theme="vintage-paper"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2747 0.0139 57.6523); --kb-bg-card: oklch(0.3237 0.0155 59.0603); --kb-bg-popover: oklch(0.3237 0.0155 59.0603); --kb-bg-muted: oklch(0.2939 0.0125 62.1298); --kb-bg-input: oklch(0.3795 0.0181 57.1280); --kb-text-primary: oklch(0.9239 0.0190 83.0636); --kb-text-muted: oklch(0.7982 0.0243 82.1078); --kb-primary: oklch(0.7264 0.0581 66.6967); --kb-primary-fg: oklch(0.2747 0.0139 57.6523); --kb-info: oklch(0.3795 0.0181 57.1280); --kb-info-fg: oklch(0.9239 0.0190 83.0636); --kb-accent: oklch(0.4186 0.0281 56.3404); --kb-accent-fg: oklch(0.9239 0.0190 83.0636); --kb-danger: oklch(0.5471 0.1438 32.9149); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3795 0.0181 57.1280); --kb-admin-sidebar-bg: oklch(0.2747 0.0139 57.6523); --kb-admin-nav-color: oklch(0.9239 0.0190 83.0636); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); --kb-shadow-md: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 2px 4px -1px hsl(28 13% 20% / 0.12); --kb-shadow-lg: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 4px 6px -1px hsl(28 13% 20% / 0.12); --kb-shadow-xl: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 8px 10px -1px hsl(28 13% 20% / 0.12); --kb-shadow: 2px 3px 5px 0px hsl(28 13% 20% / 0.12), 2px 1px 2px -1px hsl(28 13% 20% / 0.12); } /* ============================================================================ VIOLET-BLOOM Theme Source: tweakcn.com | Uses color-mix() for derived variables ============================================================================ */ [data-theme="violet-bloom"][data-mode="light"] { color-scheme: light; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.9940 0 0); --kb-bg-card: oklch(0.9940 0 0); --kb-bg-popover: oklch(0.9911 0 0); --kb-bg-muted: oklch(0.9702 0 0); --kb-bg-input: oklch(0.9401 0 0); --kb-text-primary: oklch(0 0 0); --kb-text-muted: oklch(0.4386 0 0); --kb-primary: oklch(0.5393 0.2713 286.7462); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.9540 0.0063 255.4755); --kb-info-fg: oklch(0.1344 0 0); --kb-accent: oklch(0.9393 0.0288 266.3680); --kb-accent-fg: oklch(0.5445 0.1903 259.4848); --kb-danger: oklch(0.6290 0.1902 23.0704); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.9300 0.0094 286.2156); --kb-admin-sidebar-bg: oklch(0.9777 0.0051 247.8763); --kb-admin-nav-color: oklch(0 0 0); /* Derived using color-mix (light mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), black 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 15%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), black 10%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 85%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), black 10%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 85%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 90%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), black 10%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 85%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), black 10%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 85%); /* Status colors - STATIC Tailwind-inspired (darker for light mode contrast) */ --kb-success: #16a34a; /* Tailwind green-600 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 90%); --kb-warning: #d97706; /* Tailwind amber-600 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 90%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 90%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 80%); --kb-code-bg: var(--kb-bg-subtle); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-subtle); --kb-scrollbar-thumb: var(--kb-border-strong); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: var(--kb-bg-muted); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16); --kb-shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16); --kb-shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16); --kb-shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16); --kb-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16); } [data-theme="violet-bloom"][data-mode="dark"] { color-scheme: dark; /* Base colors from tweakcn */ --kb-bg-body: oklch(0.2223 0.0060 271.1393); --kb-bg-card: oklch(0.2568 0.0076 274.6528); --kb-bg-popover: oklch(0.2568 0.0076 274.6528); --kb-bg-muted: oklch(0.2940 0.0130 272.9312); --kb-bg-input: oklch(0.3289 0.0092 268.3843); --kb-text-primary: oklch(0.9551 0 0); --kb-text-muted: oklch(0.7058 0 0); --kb-primary: oklch(0.6132 0.2294 291.7437); --kb-primary-fg: oklch(1.0000 0 0); --kb-info: oklch(0.2940 0.0130 272.9312); --kb-info-fg: oklch(0.9551 0 0); --kb-accent: oklch(0.2795 0.0368 260.0310); --kb-accent-fg: oklch(0.7857 0.1153 246.6596); --kb-danger: oklch(0.7106 0.1661 22.2162); --kb-danger-fg: oklch(1.0000 0 0); --kb-border-default: oklch(0.3289 0.0092 268.3843); --kb-admin-sidebar-bg: oklch(0.2011 0.0039 286.0396); --kb-admin-nav-color: oklch(0.9551 0 0); /* Derived using color-mix (dark mode) */ /* text-secondary: Between primary and muted for readable hierarchy */ /* This ensures text-secondary is always readable on body/card backgrounds */ --kb-text-secondary: color-mix(in oklab, var(--kb-text-primary), var(--kb-text-muted) 50%); /* bg-subtle: Between body and card for subtle differentiation */ --kb-bg-subtle: color-mix(in oklab, var(--kb-bg-body), var(--kb-bg-card) 50%); --kb-bg-active: color-mix(in oklab, var(--kb-bg-muted), white 5%); --kb-bg-overlay: color-mix(in oklab, var(--kb-bg-body), transparent 15%); --kb-text-link: var(--kb-primary); --kb-text-link-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-text-accent: var(--kb-accent); --kb-text-info: var(--kb-info); --kb-border-subtle: color-mix(in oklab, var(--kb-border-default), var(--kb-bg-body) 50%); --kb-border-strong: color-mix(in oklab, var(--kb-border-default), var(--kb-text-primary) 20%); /* Primary color derivations */ --kb-primary-hover: color-mix(in oklab, var(--kb-primary), white 15%); --kb-primary-muted: color-mix(in oklab, var(--kb-primary), transparent 80%); --kb-focus-ring: var(--kb-primary); /* Info color derivations (from tweakcn secondary) */ --kb-info-hover: color-mix(in oklab, var(--kb-info), white 15%); --kb-info-muted: color-mix(in oklab, var(--kb-info), transparent 80%); --kb-info-bg: color-mix(in oklab, var(--kb-info), transparent 85%); /* Accent color derivations */ --kb-accent-hover: color-mix(in oklab, var(--kb-accent), white 15%); --kb-accent-muted: color-mix(in oklab, var(--kb-accent), transparent 80%); /* Danger color derivations (from tweakcn destructive) */ --kb-danger-hover: color-mix(in oklab, var(--kb-danger), white 15%); --kb-danger-muted: color-mix(in oklab, var(--kb-danger), transparent 80%); /* Status colors - STATIC Tailwind-inspired for semantic consistency */ /* These don't change per theme - green is always success, red is always danger */ --kb-success: #22c55e; /* Tailwind green-500 */ --kb-success-bg: color-mix(in oklab, var(--kb-success), transparent 85%); --kb-warning: #f59e0b; /* Tailwind amber-500 */ --kb-warning-bg: color-mix(in oklab, var(--kb-warning), transparent 85%); /* --kb-danger and --kb-danger-fg come from tweakcn --destructive (already mapped) */ --kb-danger-bg: color-mix(in oklab, var(--kb-danger), transparent 85%); --kb-highlight-bg: color-mix(in oklab, var(--kb-warning), transparent 70%); --kb-code-bg: var(--kb-bg-card); --kb-code-border: var(--kb-border-default); --kb-code-text: var(--kb-text-secondary); --kb-scrollbar-track: var(--kb-bg-card); --kb-scrollbar-thumb: var(--kb-border-default); --kb-scrollbar-thumb-hover: var(--kb-text-muted); --kb-admin-brand-color: var(--kb-text-primary); --kb-admin-nav-hover-color: var(--kb-text-primary); --kb-admin-nav-hover-bg: color-mix(in oklab, var(--kb-text-primary), transparent 92%); --kb-bg-primary: var(--kb-bg-body); /* Text color safety: base color too extreme for text, use foreground instead */ --kb-text-accent: var(--kb-accent-fg); --kb-text-info: var(--kb-info-fg); --kb-shadow-sm: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16); --kb-shadow-md: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 2px 4px -1px hsl(0 0% 0% / 0.16); --kb-shadow-lg: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 4px 6px -1px hsl(0 0% 0% / 0.16); --kb-shadow-xl: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 8px 10px -1px hsl(0 0% 0% / 0.16); --kb-shadow: 0px 2px 3px 0px hsl(0 0% 0% / 0.16), 0px 1px 2px -1px hsl(0 0% 0% / 0.16); }