.theme-default .theme-container, .theme-default [data-radix-popper-content-wrapper] { --chart-1: var(--color-blue-300); --chart-2: var(--color-blue-500); --chart-3: var(--color-blue-600); --chart-4: var(--color-blue-700); --chart-5: var(--color-blue-800); } .theme-mono .theme-container, .theme-mono [data-radix-popper-content-wrapper] { --font-sans: var(--font-mono); --primary: var(--color-stone-600); --primary-foreground: var(--color-stone-50); --chart-1: var(--color-stone-300); --chart-2: var(--color-stone-500); --chart-3: var(--color-stone-600); --chart-4: var(--color-stone-700); --chart-5: var(--color-stone-800); --sidebar-primary: var(--color-stone-600); --sidebar-primary-foreground: var(--color-stone-50); --sidebar-ring: var(--color-stone-400); @variant dark { --primary: var(--color-stone-500); --primary-foreground: var(--color-stone-50); --sidebar-primary: var(--color-stone-500); --sidebar-primary-foreground: var(--color-stone-50); --sidebar-ring: var(--color-stone-900); } @media (min-width: 1024px) { --font-sans: var(--font-mono); --radius: 0.45em; --text-lg: 1rem; --text-xl: 1.1rem; --text-2xl: 1.2rem; --text-3xl: 1.3rem; --text-4xl: 1.4rem; --text-5xl: 1.5rem; --text-6xl: 1.6rem; --text-7xl: 1.7rem; --text-8xl: 1.8rem; --text-base: 0.85rem; --text-sm: 0.8rem; --spacing: 0.222222rem; } .rounded-xs, .rounded-sm, .rounded-md, .rounded-lg, .rounded-xl { border-radius: 0; } .shadow-xs, .shadow-sm, .shadow-md, .shadow-lg, .shadow-xl { box-shadow: none; } [data-slot="toggle-group"], [data-slot="toggle-group-item"], [data-slot="checkbox"], [data-slot="radio"], [data-slot="switch"], [data-slot="switch-thumb"] { @apply !rounded-none !shadow-none; } } .theme-scaled .theme-container, .theme-scaled [data-radix-popper-content-wrapper] { --chart-1: var(--color-blue-300); --chart-2: var(--color-blue-500); --chart-3: var(--color-blue-600); --chart-4: var(--color-blue-700); --chart-5: var(--color-blue-800); @media (min-width: 1024px) { --radius: 0.45em; --text-lg: 1rem; --text-xl: 1.1rem; --text-2xl: 1.2rem; --text-3xl: 1.3rem; --text-4xl: 1.4rem; --text-5xl: 1.5rem; --text-6xl: 1.6rem; --text-7xl: 1.7rem; --text-8xl: 1.8rem; --text-base: 0.85rem; --text-sm: 0.8rem; --spacing: 0.2rem; } [data-slot="select-trigger"], [data-slot="toggle-group-item"] { --spacing: 0.2rem; } [data-slot="card"] { border-radius: var(--radius); padding-block: calc(var(--spacing) * 4); gap: calc(var(--spacing) * 2); } [data-slot="card"].pb-0 { padding-bottom: 0; } } .theme-rounded-none .theme-container, .theme-rounded-none [data-radix-popper-content-wrapper] { --radius: 0; } .theme-rounded-small .theme-container, .theme-rounded-small [data-radix-popper-content-wrapper] { --radius: 0.4rem; } .theme-rounded-medium .theme-container, .theme-rounded-medium [data-radix-popper-content-wrapper] { --radius: 0.65rem; } .theme-rounded-large .theme-container, .theme-rounded-large [data-radix-popper-content-wrapper] { --radius: 1rem; } .theme-rounded-full .theme-container, .theme-rounded-full [data-radix-popper-content-wrapper] { --radius: 1.2rem; } .theme-inter .theme-container, .theme-inter [data-radix-popper-content-wrapper] { --font-sans: var(--font-inter); } .theme-noto-sans .theme-container, .theme-noto-sans [data-radix-popper-content-wrapper] { --font-sans: var(--font-noto-sans); } .theme-nunito-sans .theme-container, .theme-nunito-sans [data-radix-popper-content-wrapper] { --font-sans: var(--font-nunito-sans); } .theme-figtree .theme-container, .theme-figtree [data-radix-popper-content-wrapper] { --font-sans: var(--font-figtree); } .theme-blue .theme-container, .theme-blue [data-radix-popper-content-wrapper] { --primary: var(--color-blue-700); --primary-foreground: var(--color-blue-50); /* --ring: var(--color-blue-100); */ --sidebar-primary: var(--color-blue-600); --sidebar-primary-foreground: var(--color-blue-50); /* --sidebar-ring: var(--color-blue-400); */ --chart-1: var(--color-blue-300); --chart-2: var(--color-blue-500); --chart-3: var(--color-blue-600); --chart-4: var(--color-blue-700); --chart-5: var(--color-blue-800); @variant dark { --primary: var(--color-blue-700); --primary-foreground: var(--color-blue-50); /* --ring: var(--color-blue-900); */ --sidebar-primary: var(--color-blue-500); --sidebar-primary-foreground: var(--color-blue-50); /* --sidebar-ring: var(--color-blue-900); */ } } .theme-green .theme-container, .theme-green [data-radix-popper-content-wrapper] { --primary: var(--color-lime-600); --primary-foreground: var(--color-lime-50); --ring: var(--color-lime-400); --chart-1: var(--color-green-300); --chart-2: var(--color-green-500); --chart-3: var(--color-green-600); --chart-4: var(--color-green-700); --chart-5: var(--color-green-800); --sidebar-primary: var(--color-lime-600); --sidebar-primary-foreground: var(--color-lime-50); --sidebar-ring: var(--color-lime-400); @variant dark { --primary: var(--color-lime-600); --primary-foreground: var(--color-lime-50); --ring: var(--color-lime-900); --sidebar-primary: var(--color-lime-500); --sidebar-primary-foreground: var(--color-lime-50); --sidebar-ring: var(--color-lime-900); } } .theme-amber .theme-container, .theme-amber [data-radix-popper-content-wrapper] { --primary: var(--color-amber-600); --primary-foreground: var(--color-amber-50); --ring: var(--color-amber-400); --chart-1: var(--color-amber-300); --chart-2: var(--color-amber-500); --chart-3: var(--color-amber-600); --chart-4: var(--color-amber-700); --chart-5: var(--color-amber-800); --sidebar-primary: var(--color-amber-600); --sidebar-primary-foreground: var(--color-amber-50); --sidebar-ring: var(--color-amber-400); @variant dark { --primary: var(--color-amber-500); --primary-foreground: var(--color-amber-50); --ring: var(--color-amber-900); --sidebar-primary: var(--color-amber-500); --sidebar-primary-foreground: var(--color-amber-50); --sidebar-ring: var(--color-amber-900); } } .theme-rose .theme-container, .theme-rose [data-radix-popper-content-wrapper] { --primary: var(--color-rose-600); --primary-foreground: var(--color-rose-50); --ring: var(--color-rose-400); --chart-1: var(--color-rose-300); --chart-2: var(--color-rose-500); --chart-3: var(--color-rose-600); --chart-4: var(--color-rose-700); --chart-5: var(--color-rose-800); --sidebar-primary: var(--color-rose-600); --sidebar-primary-foreground: var(--color-rose-50); --sidebar-ring: var(--color-rose-400); @variant dark { --primary: var(--color-rose-500); --primary-foreground: var(--color-rose-50); --ring: var(--color-rose-900); --sidebar-primary: var(--color-rose-500); --sidebar-primary-foreground: var(--color-rose-50); --sidebar-ring: var(--color-rose-900); } } .theme-purple .theme-container, .theme-purple [data-radix-popper-content-wrapper] { --primary: var(--color-purple-600); --primary-foreground: var(--color-purple-50); --ring: var(--color-purple-400); --chart-1: var(--color-purple-300); --chart-2: var(--color-purple-500); --chart-3: var(--color-purple-600); --chart-4: var(--color-purple-700); --chart-5: var(--color-purple-800); --sidebar-primary: var(--color-purple-600); --sidebar-primary-foreground: var(--color-purple-50); --sidebar-ring: var(--color-purple-400); @variant dark { --primary: var(--color-purple-500); --primary-foreground: var(--color-purple-50); --ring: var(--color-purple-900); --sidebar-primary: var(--color-purple-500); --sidebar-primary-foreground: var(--color-purple-50); --sidebar-ring: var(--color-purple-900); } } .theme-orange .theme-container, .theme-orange [data-radix-popper-content-wrapper] { --primary: var(--color-orange-600); --primary-foreground: var(--color-orange-50); --ring: var(--color-orange-400); --chart-1: var(--color-orange-300); --chart-2: var(--color-orange-500); --chart-3: var(--color-orange-600); --chart-4: var(--color-orange-700); --chart-5: var(--color-orange-800); --sidebar-primary: var(--color-orange-600); --sidebar-primary-foreground: var(--color-orange-50); --sidebar-ring: var(--color-orange-400); @variant dark { --primary: var(--color-orange-500); --primary-foreground: var(--color-orange-50); --ring: var(--color-orange-900); --sidebar-primary: var(--color-orange-500); --sidebar-primary-foreground: var(--color-orange-50); --sidebar-ring: var(--color-orange-900); } } .theme-teal .theme-container, .theme-teal [data-radix-popper-content-wrapper] { --primary: var(--color-teal-600); --primary-foreground: var(--color-teal-50); --chart-1: var(--color-teal-300); --chart-2: var(--color-teal-500); --chart-3: var(--color-teal-600); --chart-4: var(--color-teal-700); --chart-5: var(--color-teal-800); --sidebar-primary: var(--color-teal-600); --sidebar-primary-foreground: var(--color-teal-50); --sidebar-ring: var(--color-teal-400); @variant dark { --primary: var(--color-teal-500); --primary-foreground: var(--color-teal-50); --sidebar-primary: var(--color-teal-500); --sidebar-primary-foreground: var(--color-teal-50); --sidebar-ring: var(--color-teal-900); } } .theme-red .theme-container, .theme-red [data-radix-popper-content-wrapper] { --primary: var(--color-red-600); --primary-foreground: var(--color-red-50); --ring: var(--color-red-400); --chart-1: var(--color-red-300); --chart-2: var(--color-red-500); --chart-3: var(--color-red-600); --chart-4: var(--color-red-700); --chart-5: var(--color-red-800); --sidebar-primary: var(--color-red-600); --sidebar-primary-foreground: var(--color-red-50); --sidebar-ring: var(--color-red-400); @variant dark { --primary: var(--color-red-500); --primary-foreground: var(--color-red-50); --ring: var(--color-red-900); --sidebar-primary: var(--color-red-500); --sidebar-primary-foreground: var(--color-red-50); --sidebar-ring: var(--color-red-900); } } .theme-yellow .theme-container, .theme-yellow [data-radix-popper-content-wrapper] { --primary: var(--color-yellow-400); --primary-foreground: var(--color-yellow-900); --ring: var(--color-yellow-400); --chart-1: var(--color-yellow-300); --chart-2: var(--color-yellow-500); --chart-3: var(--color-yellow-600); --chart-4: var(--color-yellow-700); --chart-5: var(--color-yellow-800); --sidebar-primary: var(--color-yellow-600); --sidebar-primary-foreground: var(--color-yellow-50); --sidebar-ring: var(--color-yellow-400); @variant dark { --primary: var(--color-yellow-500); --primary-foreground: var(--color-yellow-900); --ring: var(--color-yellow-900); --sidebar-primary: var(--color-yellow-500); --sidebar-primary-foreground: var(--color-yellow-50); --sidebar-ring: var(--color-yellow-900); } } .theme-violet .theme-container, .theme-violet [data-radix-popper-content-wrapper] { --primary: var(--color-violet-600); --primary-foreground: var(--color-violet-50); --ring: var(--color-violet-400); --chart-1: var(--color-violet-300); --chart-2: var(--color-violet-500); --chart-3: var(--color-violet-600); --chart-4: var(--color-violet-700); --chart-5: var(--color-violet-800); --sidebar-primary: var(--color-violet-600); --sidebar-primary-foreground: var(--color-violet-50); --sidebar-ring: var(--color-violet-400); @variant dark { --primary: var(--color-violet-500); --primary-foreground: var(--color-violet-50); --ring: var(--color-violet-900); --sidebar-primary: var(--color-violet-500); --sidebar-primary-foreground: var(--color-violet-50); --sidebar-ring: var(--color-violet-900); } } .theme-sketch { --background: oklch(0.9721 0.0158 110.5501); --foreground: oklch(0.5066 0.2501 271.8903); --card: oklch(0.9721 0.0158 110.5501); --card-foreground: oklch(0.5066 0.2501 271.8903); --popover: oklch(0.9721 0.0158 110.5501); --popover-foreground: oklch(0.5066 0.2501 271.8903); --primary: oklch(0.5066 0.2501 271.8903); --primary-foreground: oklch(1 0 0); --secondary: oklch(1 0 0); --secondary-foreground: oklch(0.5066 0.2501 271.8903); --muted: oklch(0.9189 0.0147 106.6853); --muted-foreground: oklch(0.5066 0.2501 271.8903); --accent: oklch(0.9168 0.0214 109.7161); --accent-foreground: oklch(0.4486 0.2266 271.5512); --destructive: oklch(0.63 0.19 23.03); --destructive-foreground: oklch(1 0 0); --border: oklch(0.5066 0.2501 271.8903); --input: oklch(0.5066 0.2501 271.8903); --ring: oklch(0.468 0.2721 279.6007); --chart-1: oklch(0.5066 0.2501 271.8903); --chart-2: oklch(0.7 0.19 48); --chart-3: oklch(0.77 0.2 131); --chart-4: oklch(0.68 0.15 237); --chart-5: oklch(0.66 0.21 354); --sidebar: oklch(0.9721 0.0158 110.5501); --sidebar-foreground: oklch(0.5066 0.2501 271.8903); --sidebar-primary: oklch(0.5066 0.2501 271.8903); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.9168 0.0214 109.7161); --sidebar-accent-foreground: oklch(0.4486 0.2266 271.5512); --sidebar-border: oklch(0.4486 0.2266 271.5512); --sidebar-ring: oklch(0.4486 0.2266 271.5512); --font-sans: Geist Mono; --shadow-2xs: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.07); --shadow-xs: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.07); --shadow-sm: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15), 4px 1px 2px -1px hsl(238.3146 85.5769% 59.2157% / 0.15); --shadow: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15), 4px 1px 2px -1px hsl(238.3146 85.5769% 59.2157% / 0.15); --shadow-md: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15), 4px 2px 4px -1px hsl(238.3146 85.5769% 59.2157% / 0.15); --shadow-lg: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15), 4px 4px 6px -1px hsl(238.3146 85.5769% 59.2157% / 0.15); --shadow-xl: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.15), 4px 8px 10px -1px hsl(238.3146 85.5769% 59.2157% / 0.15); --shadow-2xl: 4px 4px 0px 0px hsl(238.3146 85.5769% 59.2157% / 0.38); --radius: 0rem; @variant dark { --background: oklch(0.256 0.151 268.343); --foreground: oklch(0.972 0.016 110.55); --card: oklch(0.256 0.151 268.343); --card-foreground: oklch(0.972 0.016 110.55); --popover: oklch(0.507 0.25 271.89); --popover-foreground: oklch(0.972 0.016 110.55); --primary: oklch(0.972 0.016 110.55); --primary-foreground: oklch(0.253 0.094 275.725); --secondary: oklch(1 0 0 / 0.2); --secondary-foreground: oklch(1 0 0); --muted: oklch(0.228 0.127 269.556); --muted-foreground: oklch(0.972 0.016 110.55); --accent: oklch(0.228 0.127 269.556); --accent-foreground: oklch(0.972 0.016 110.55); --destructive: oklch(0.711 0.166 22.216); --destructive-foreground: oklch(0 0 0); --border: oklch(0.427 0.149 277.089); --input: oklch(0.427 0.149 277.089); --ring: oklch(1 0 0); --chart-1: oklch(0.972 0.016 110.55); --chart-2: oklch(0.7 0.19 48); --chart-3: oklch(0.77 0.2 131); --chart-4: oklch(0.68 0.15 237); --chart-5: oklch(0.66 0.21 354); --sidebar: oklch(0.256 0.151 268.343); --sidebar-foreground: oklch(0.972 0.016 110.55); --sidebar-primary: oklch(0.507 0.25 271.89); --sidebar-primary-foreground: oklch(1 0 0); --sidebar-accent: oklch(0.416 0.203 272.082); --sidebar-accent-foreground: oklch(0.972 0.016 110.55); --sidebar-border: oklch(0.972 0.016 110.55); --sidebar-ring: oklch(0.972 0.016 110.55); --sidebar-background: oklch(0.253 0.094 275.725); --font-sans: Geist Mono; --shadow-2xs: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow-xs: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow-sm: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow-md: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow-lg: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow-xl: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); --shadow-2xl: 4px 4px 0px 0px oklch(0.427 0.149 277.089 / 0.5); } } .theme-neutral { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); @variant dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.922 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.87 0 0); --chart-2: oklch(0.556 0 0); --chart-3: oklch(0.439 0 0); --chart-4: oklch(0.371 0 0); --chart-5: oklch(0.269 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } } .theme-blue { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.488 0.243 264.376); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.967 0.001 286.375); --secondary-foreground: oklch(0.21 0.006 285.885); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --radius: 0.625rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.546 0.245 262.881); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); --selection: oklch(0.93 0.03 256); --selection-foreground: oklch(0.145 0 0); @variant dark { --background: oklch(0.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.205 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.205 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.424 0.199 265.638); --primary-foreground: oklch(0.97 0.014 254.604); --secondary: oklch(0.274 0.006 286.033); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.704 0.191 22.216); --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); --ring: oklch(0.556 0 0); --chart-1: oklch(0.809 0.105 251.813); --chart-2: oklch(0.623 0.214 259.815); --chart-3: oklch(0.546 0.245 262.881); --chart-4: oklch(0.488 0.243 264.376); --chart-5: oklch(0.424 0.199 265.638); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.623 0.214 259.815); --sidebar-primary-foreground: oklch(0.97 0.014 254.604); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(1 0 0 / 10%); --sidebar-ring: oklch(0.556 0 0); } }