@import "tailwindcss"; @import "@heroui/styles"; @source inline("{bg,text,border,ring,stroke,fill}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}"); @source inline("hover:{bg,text,border}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}"); @source inline("data-[selected]:{bg,text,border}-{slate,gray,zinc,neutral,stone,red,orange,amber,yellow,lime,green,emerald,teal,cyan,sky,blue,indigo,violet,purple,fuchsia,pink,rose}-{50,100,200,300,400,500,600,700,800,900,950}"); /* * HeroUI Theme Customization * Add this to your global.css after importing @heroui/styles * Only includes base variables from variables.css * @see https://v3.heroui.com/docs/react/getting-started/theming */ :root, .light, .default, [data-theme="light"], [data-theme="default"] { /* Theme Colors (Light Mode) */ --accent: oklch(62.04% 0.1951 253.83); --accent-foreground: oklch(99.11% 0 0); --background: oklch(97.02% 0.0069 253.83); --border: oklch(90% 0.0069 253.83); --danger: oklch(65.32% 0.236 25.74); --danger-foreground: oklch(99.11% 0 0); --default: oklch(94% 0.0069 253.83); --default-foreground: oklch(21.03% 0.0059 253.83); --field-background: oklch(100% 0.0034 253.83); --field-foreground: oklch(21.03% 0.0069 253.83); --field-placeholder: oklch(55.17% 0.0138 253.83); --focus: oklch(62.04% 0.1951 253.83); --foreground: oklch(21.03% 0.0069 253.83); --muted: oklch(55.17% 0.0138 253.83); --overlay: oklch(100% 0.0021 253.83); --overlay-foreground: oklch(21.03% 0.0069 253.83); --scrollbar: oklch(87.1% 0.0069 253.83); --segment: oklch(100% 0.0069 253.83); --segment-foreground: oklch(21.03% 0.0069 253.83); --separator: oklch(92% 0.0069 253.83); --success: oklch(73.29% 0.1962 150.81); --success-foreground: oklch(21.03% 0.0059 150.81); --surface: oklch(100% 0.0034 253.83); --surface-foreground: oklch(21.03% 0.0069 253.83); --surface-secondary: oklch(95.24% 0.0055 253.83); --surface-secondary-foreground: oklch(21.03% 0.0069 253.83); --surface-tertiary: oklch(93.73% 0.0055 253.83); --surface-tertiary-foreground: oklch(21.03% 0.0069 253.83); --warning: oklch(78.19% 0.1607 72.33); --warning-foreground: oklch(21.03% 0.0059 72.33); /* Border Radius */ --radius: 0.25rem; --field-radius: 0.5rem; /* Font Family */ /* Make sure to load Saira font in your app */ --font-sans: "Saira", sans-serif; } .dark, [data-theme="dark"] { color-scheme: dark; /* Theme Colors (Dark Mode) */ --accent: oklch(62.04% 0.1951 253.83); --accent-foreground: oklch(99.11% 0 0); --background: oklch(12% 0.0069 253.83); --border: oklch(28% 0.0069 253.83); --danger: oklch(59.4% 0.1994 24.63); --danger-foreground: oklch(99.11% 0 0); --default: oklch(27.4% 0.0069 253.83); --default-foreground: oklch(99.11% 0 0); --field-background: oklch(21.03% 0.0138 253.83); --field-foreground: oklch(99.11% 0.0069 253.83); --field-placeholder: oklch(70.5% 0.0138 253.83); --focus: oklch(62.04% 0.1951 253.83); --foreground: oklch(99.11% 0.0069 253.83); --muted: oklch(70.5% 0.0138 253.83); --overlay: oklch(21.03% 0.0138 253.83); --overlay-foreground: oklch(99.11% 0.0069 253.83); --scrollbar: oklch(70.5% 0.0069 253.83); --segment: oklch(39.64% 0.0069 253.83); --segment-foreground: oklch(99.11% 0.0069 253.83); --separator: oklch(25% 0.0069 253.83); --success: oklch(73.29% 0.1962 150.81); --success-foreground: oklch(21.03% 0.0059 150.81); --surface: oklch(21.03% 0.0138 253.83); --surface-foreground: oklch(99.11% 0.0069 253.83); --surface-secondary: oklch(25.7% 0.0103 253.83); --surface-secondary-foreground: oklch(99.11% 0.0069 253.83); --surface-tertiary: oklch(27.21% 0.0103 253.83); --surface-tertiary-foreground: oklch(99.11% 0.0069 253.83); --warning: oklch(82.03% 0.1407 76.34); --warning-foreground: oklch(21.03% 0.0059 76.34); }