@layer base { /* HeroUI Default Theme */ :root, .light, .default, [data-theme="light"], [data-theme="default"] { color-scheme: light; /* == Common Variables == */ /* Primitive Colors (Do not change between light and dark) */ --white: oklch(100% 0 0); --black: oklch(0% 0 0); --snow: oklch(0.9911 0 0); --eclipse: oklch(0.2103 0.0059 285.89); /* Spacing scale */ --spacing: 0.25rem; /* Border */ --border-width: 1px; --field-border-width: 0px; --disabled-opacity: 0.5; /* Ring offset - Used for focus ring */ --ring-offset-width: 2px; /* Cursor */ --cursor-interactive: pointer; --cursor-disabled: not-allowed; /* Radius */ --radius: 0.5rem; --field-radius: calc(var(--radius) * 1.5); /* == Light Theme Variables == */ /* Base Colors */ --background: oklch(0.9702 0 0); --foreground: var(--eclipse); /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */ --surface: var(--white); --surface-foreground: var(--foreground); --surface-secondary: oklch(0.9524 0.0013 286.37); --surface-secondary-foreground: var(--foreground); --surface-tertiary: oklch(0.9373 0.0013 286.37); --surface-tertiary-foreground: var(--foreground); /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) */ --overlay: var(--white); --overlay-foreground: var(--foreground); --muted: oklch(0.5517 0.0138 285.94); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(94% 0.001 286.375); --default-foreground: var(--eclipse); --accent: oklch(0.6204 0.195 253.83); --accent-foreground: var(--snow); /* Form Fields */ --field-background: var(--white); --field-foreground: oklch(0.2103 0.0059 285.89); --field-placeholder: var(--muted); --field-border: transparent; /* no border by default on form fields */ /* Status Colors */ --success: oklch(0.7329 0.1935 150.81); --success-foreground: var(--eclipse); --warning: oklch(0.7819 0.1585 72.33); --warning-foreground: var(--eclipse); --danger: oklch(0.6532 0.2328 25.74); --danger-foreground: var(--snow); /* Component Colors */ --segment: var(--white); --segment-foreground: var(--eclipse); /* Misc Colors */ --border: oklch(90% 0.004 286.32); --separator: oklch(92% 0.004 286.32); --focus: var(--accent); --link: var(--foreground); /* Backdrop */ --backdrop: rgba(0, 0, 0, 0.5); /* Calculated Colors */ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); --background-inverse: var(--foreground); --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); --field-hover: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); --field-focus: var(--field-background, var(--default)); --field-border-hover: color-mix( in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10% ); --field-border-focus: color-mix( in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22% ); --default-soft: color-mix(in oklab, var(--default) 50%, transparent); --default-soft-foreground: var(--default-foreground); --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); --accent-soft: color-mix(in oklab, var(--accent) 15%, transparent); --accent-soft-foreground: color-mix(in oklab, var(--accent) 70%, var(--foreground) 30%); --accent-soft-hover: color-mix(in oklab, var(--accent) 20%, transparent); --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); --danger-soft-foreground: color-mix(in oklab, var(--danger) 70%, var(--foreground) 40%); --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); --warning-soft: color-mix(in oklab, var(--warning) 15%, transparent); --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 70%); --warning-soft-hover: color-mix(in oklab, var(--warning) 20%, transparent); --success-soft: color-mix(in oklab, var(--success) 15%, transparent); --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 60%); --success-soft-hover: color-mix(in oklab, var(--success) 20%, transparent); --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); /* Shadows */ /* --surface-shadow: 0 0px 0px 0 rgba(24, 24, 27, 0.03), 0 2px 10px 0 rgba(24, 24, 27, 0.08); */ --surface-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06); /* Overlay shadow */ --overlay-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06), 0 -6px 12px 0 rgba(0, 0, 0, 0.03), 0 14px 28px 0 rgba(0, 0, 0, 0.08); --field-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.04), 0 1px 2px 0 rgba(0, 0, 0, 0.06), 0 0 1px 0 rgba(0, 0, 0, 0.06); /* Skeleton Default Global Animation */ --skeleton-animation: shimmer; /* shimmer, pulse, none */ /* Tooltip Default Delays */ --tooltip-delay: 1500ms; --tooltip-close-delay: 500ms; } .dark, [data-theme="dark"] { color-scheme: dark; /* == Dark Theme Variables == */ /* Base Colors */ --background: oklch(12% 0.005 285.823); --foreground: var(--snow); /* Surface: Used for non-overlay components (cards, accordions, disclosure groups) */ --surface: oklch(0.2103 0.0059 285.89); --surface-foreground: var(--foreground); --surface-secondary: oklch(0.257 0.0037 286.14); --surface-tertiary: oklch(0.2721 0.0024 247.91); /* Overlay: Used for floating/overlay components (tooltips, popovers, modals, menus) - lighter for contrast */ --overlay: oklch(0.2103 0.0059 285.89); --overlay-foreground: var(--foreground); --muted: oklch(70.5% 0.015 286.067); --scrollbar: var(--scrollbar-thumb); --scrollbar-thumb: color-mix(in oklch, var(--foreground) 15%, transparent); --scrollbar-track: transparent; --scrollbar-gutter: auto; --scrollbar-width: thin; --scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); --default: oklch(27.4% 0.006 286.033); --default-foreground: var(--snow); /* Form Fields */ --field-background: oklch(0.2103 0.0059 285.89); --field-foreground: var(--foreground); /* Status Colors */ --warning: oklch(0.8203 0.1388 76.34); --warning-foreground: var(--eclipse); --danger: oklch(0.594 0.1967 24.63); --danger-foreground: var(--snow); /* Component Colors */ --segment: oklch(0.3964 0.01 285.93); --segment-foreground: var(--foreground); /* Misc Colors */ --border: oklch(28% 0.006 286.033); --separator: oklch(25% 0.006 286.033); --focus: var(--accent); --link: var(--foreground); /* Backdrop */ --backdrop: rgba(0, 0, 0, 0.6); /* Shadows */ --surface-shadow: 0 0 0 0 transparent inset; /* No shadow on dark mode */ --overlay-shadow: 0 0 1px 0 rgba(255, 255, 255, 0.3) inset; --field-shadow: 0 0 0 0 transparent inset; /* Transparent shadow to allow ring utilities to work */ /* Calculated Colors */ --surface-hover: color-mix(in oklab, var(--surface) 92%, var(--surface-foreground) 8%); --background-secondary: color-mix(in oklab, var(--background) 96%, var(--foreground) 4%); --background-tertiary: color-mix(in oklab, var(--background) 92%, var(--foreground) 8%); --background-inverse: var(--foreground); --default-hover: color-mix(in oklab, var(--default) 96%, var(--default-foreground) 4%); --accent-hover: color-mix(in oklab, var(--accent) 90%, var(--accent-foreground) 10%); --success-hover: color-mix(in oklab, var(--success) 90%, var(--success-foreground) 10%); --warning-hover: color-mix(in oklab, var(--warning) 90%, var(--warning-foreground) 10%); --danger-hover: color-mix(in oklab, var(--danger) 90%, var(--danger-foreground) 10%); --field-hover: color-mix( in oklab, var(--field-background, var(--default)) 90%, var(--field-foreground, var(--foreground)) 2% ); --field-focus: var(--field-background, var(--default)); --field-border-hover: color-mix( in oklab, var(--field-border, var(--border)) 88%, var(--field-foreground, var(--foreground)) 10% ); --field-border-focus: color-mix( in oklab, var(--field-border, var(--border)) 74%, var(--field-foreground, var(--foreground)) 22% ); --default-soft: color-mix(in oklab, var(--default) 50%, transparent); --default-soft-foreground: var(--default-foreground); --default-soft-hover: color-mix(in oklab, var(--default) 60%, transparent); --accent-soft: color-mix(in oklab, var(--accent) 12%, transparent); --accent-soft-foreground: color-mix(in oklab, var(--accent) 80%, var(--foreground) 30%); --accent-soft-hover: color-mix(in oklab, var(--accent) 16%, transparent); --danger-soft: color-mix(in oklab, var(--danger) 15%, transparent); --danger-soft-foreground: color-mix(in oklab, var(--danger) 80%, var(--foreground) 30%); --danger-soft-hover: color-mix(in oklab, var(--danger) 20%, transparent); --warning-soft: color-mix(in oklab, var(--warning) 12%, transparent); --warning-soft-foreground: color-mix(in oklab, var(--warning) 80%, var(--foreground) 30%); --warning-soft-hover: color-mix(in oklab, var(--warning) 16%, transparent); --success-soft: color-mix(in oklab, var(--success) 12%, transparent); --success-soft-foreground: color-mix(in oklab, var(--success) 80%, var(--foreground) 30%); --success-soft-hover: color-mix(in oklab, var(--success) 16%, transparent); --separator-secondary: color-mix(in oklab, var(--surface) 85%, var(--surface-foreground) 15%); --separator-tertiary: color-mix(in oklab, var(--surface) 81%, var(--surface-foreground) 19%); --border-secondary: color-mix(in oklab, var(--surface) 78%, var(--surface-foreground) 22%); --border-tertiary: color-mix(in oklab, var(--surface) 66%, var(--surface-foreground) 34%); } /* Vibrant palette - more saturated soft foregrounds, less contrast */ [data-vibrant-palette="true"]:not(.dark):not([data-theme="dark"]) { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } [data-vibrant-palette="true"].dark, [data-vibrant-palette="true"][data-theme="dark"] { --accent-soft-foreground: color-mix(in oklab, var(--accent) 92%, var(--foreground) 8%); --danger-soft-foreground: color-mix(in oklab, var(--danger) 92%, var(--foreground) 8%); --warning-soft-foreground: color-mix(in oklab, var(--warning) 92%, var(--foreground) 8%); --success-soft-foreground: color-mix(in oklab, var(--success) 92%, var(--foreground) 8%); } }