mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-01 00:24:20 +00:00
feat: add oklch colors to themes (#7090)
* wip * feat: add oklch theme * fix: keys
This commit is contained in:
shadcn
GitHub
@@ -7,7 +7,8 @@ import {
|
||||
PageHeaderDescription,
|
||||
PageHeaderHeading,
|
||||
} from "@/components/page-header"
|
||||
import { ThemeCustomizer } from "@/components/theme-customizer"
|
||||
import { Customizer } from "@/components/theme-customizer"
|
||||
import { Button } from "@/registry/new-york/ui/button"
|
||||
|
||||
const title = "Add colors. Make it yours."
|
||||
const description =
|
||||
@@ -48,10 +49,17 @@ export default function ThemesLayout({
|
||||
<Announcement />
|
||||
<PageHeaderHeading>{title}</PageHeaderHeading>
|
||||
<PageHeaderDescription>{description}</PageHeaderDescription>
|
||||
<PageActions>
|
||||
<ThemeCustomizer />
|
||||
</PageActions>
|
||||
<div className="mt-2 rounded-full bg-blue-600 px-3 py-1 text-xs text-white">
|
||||
New Theme Editor coming soon
|
||||
</div>
|
||||
</PageHeader>
|
||||
<div id="themes" className="border-grid scroll-mt-24 border-b">
|
||||
<div className="container-wrapper">
|
||||
<div className="container flex items-center py-4">
|
||||
<Customizer />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="container-wrapper">
|
||||
<div className="container py-6">
|
||||
<section id="themes" className="scroll-mt-20">
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
import * as React from "react"
|
||||
import template from "lodash/template"
|
||||
import { Check, Copy, Moon, Repeat, Sun } from "lucide-react"
|
||||
import { Check, ClipboardIcon, Copy } from "lucide-react"
|
||||
import { useTheme } from "next-themes"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
@@ -21,6 +21,9 @@ import {
|
||||
import {
|
||||
Drawer,
|
||||
DrawerContent,
|
||||
DrawerDescription,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/registry/new-york/ui/drawer"
|
||||
import { Label } from "@/registry/new-york/ui/label"
|
||||
@@ -29,15 +32,28 @@ import {
|
||||
PopoverContent,
|
||||
PopoverTrigger,
|
||||
} from "@/registry/new-york/ui/popover"
|
||||
import { Separator } from "@/registry/new-york/ui/separator"
|
||||
import { Skeleton } from "@/registry/new-york/ui/skeleton"
|
||||
import {
|
||||
Tooltip,
|
||||
TooltipContent,
|
||||
TooltipTrigger,
|
||||
} from "@/registry/new-york/ui/tooltip"
|
||||
import { BaseColor, baseColors } from "@/registry/registry-base-colors"
|
||||
BaseColor,
|
||||
baseColors,
|
||||
baseColorsOKLCH,
|
||||
} from "@/registry/registry-base-colors"
|
||||
|
||||
import "@/styles/mdx.css"
|
||||
import { toast } from "sonner"
|
||||
|
||||
import {
|
||||
Tabs,
|
||||
TabsContent,
|
||||
TabsList,
|
||||
TabsTrigger,
|
||||
} from "@/registry/new-york/ui/tabs"
|
||||
|
||||
interface BaseColorOKLCH {
|
||||
light: Record<string, string>
|
||||
dark: Record<string, string>
|
||||
}
|
||||
|
||||
export function ThemeCustomizer() {
|
||||
const [config, setConfig] = useConfig()
|
||||
@@ -78,9 +94,9 @@ export function ThemeCustomizer() {
|
||||
)
|
||||
}
|
||||
|
||||
function Customizer() {
|
||||
export function Customizer() {
|
||||
const [mounted, setMounted] = React.useState(false)
|
||||
const { setTheme: setMode, resolvedTheme: mode } = useTheme()
|
||||
const { resolvedTheme: mode } = useTheme()
|
||||
const [config, setConfig] = useConfig()
|
||||
|
||||
React.useEffect(() => {
|
||||
@@ -88,39 +104,11 @@ function Customizer() {
|
||||
}, [])
|
||||
|
||||
return (
|
||||
<ThemeWrapper
|
||||
defaultTheme="zinc"
|
||||
className="flex flex-col space-y-4 md:space-y-6"
|
||||
>
|
||||
<div className="flex items-start pt-4 md:pt-0">
|
||||
<div className="space-y-1 pr-2">
|
||||
<div className="font-semibold leading-none tracking-tight">
|
||||
Theme Customizer
|
||||
</div>
|
||||
<div className="text-xs text-muted-foreground">
|
||||
Customize your components colors.
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="ml-auto rounded-[0.5rem]"
|
||||
onClick={() => {
|
||||
setConfig({
|
||||
...config,
|
||||
theme: "zinc",
|
||||
radius: 0.5,
|
||||
})
|
||||
}}
|
||||
>
|
||||
<Repeat />
|
||||
<span className="sr-only">Reset</span>
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex flex-1 flex-col space-y-4 md:space-y-6">
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Color</Label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
<ThemeWrapper defaultTheme="zinc">
|
||||
<div className="grid w-full flex-1 grid-cols-2 flex-wrap items-start gap-2 sm:flex sm:items-center md:gap-6">
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="sr-only text-xs">Color</Label>
|
||||
<div className="flex flex-wrap gap-1 md:gap-2">
|
||||
{baseColors
|
||||
.filter(
|
||||
(theme) =>
|
||||
@@ -131,7 +119,7 @@ function Customizer() {
|
||||
|
||||
return mounted ? (
|
||||
<Button
|
||||
variant={"outline"}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
key={theme.name}
|
||||
onClick={() => {
|
||||
@@ -141,8 +129,8 @@ function Customizer() {
|
||||
})
|
||||
}}
|
||||
className={cn(
|
||||
"justify-start",
|
||||
isActive && "border-2 border-primary"
|
||||
"w-[32px] rounded-lg lg:px-2.5 xl:w-[86px]",
|
||||
isActive && "border-primary/50 ring-[2px] ring-primary/30"
|
||||
)}
|
||||
style={
|
||||
{
|
||||
@@ -154,22 +142,28 @@ function Customizer() {
|
||||
>
|
||||
<span
|
||||
className={cn(
|
||||
"mr-1 flex h-5 w-5 shrink-0 -translate-x-1 items-center justify-center rounded-full bg-[--theme-primary]"
|
||||
"flex h-4 w-4 shrink-0 items-center justify-center rounded-full bg-[--theme-primary]"
|
||||
)}
|
||||
>
|
||||
{isActive && <Check className="h-4 w-4 text-white" />}
|
||||
{isActive && <Check className="!size-2.5 text-white" />}
|
||||
</span>
|
||||
<span className="hidden xl:block">
|
||||
{theme.label === "Zinc" ? "Default" : theme.label}
|
||||
</span>
|
||||
{theme.label}
|
||||
</Button>
|
||||
) : (
|
||||
<Skeleton className="h-8 w-full" key={theme.name} />
|
||||
<Skeleton
|
||||
className="h-8 w-[32px] xl:w-[86px]"
|
||||
key={theme.name}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Radius</Label>
|
||||
<div className="grid grid-cols-5 gap-2">
|
||||
<Separator orientation="vertical" className="hidden h-6 sm:block" />
|
||||
<div className="flex flex-col gap-2">
|
||||
<Label className="sr-only text-xs">Radius</Label>
|
||||
<div className="flex flex-wrap gap-1 md:gap-2">
|
||||
{["0", "0.3", "0.5", "0.75", "1.0"].map((value) => {
|
||||
return (
|
||||
<Button
|
||||
@@ -183,8 +177,9 @@ function Customizer() {
|
||||
})
|
||||
}}
|
||||
className={cn(
|
||||
"w-[40px] rounded-lg",
|
||||
config.radius === parseFloat(value) &&
|
||||
"border-2 border-primary"
|
||||
"border-primary/50 ring-[2px] ring-primary/30"
|
||||
)}
|
||||
>
|
||||
{value}
|
||||
@@ -193,81 +188,50 @@ function Customizer() {
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-1.5">
|
||||
<Label className="text-xs">Mode</Label>
|
||||
<div className="grid grid-cols-3 gap-2">
|
||||
{mounted ? (
|
||||
<>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
size="sm"
|
||||
onClick={() => setMode("light")}
|
||||
className={cn(mode === "light" && "border-2 border-primary")}
|
||||
>
|
||||
<Sun className="mr-1 -translate-x-1" />
|
||||
Light
|
||||
</Button>
|
||||
<Button
|
||||
variant={"outline"}
|
||||
size="sm"
|
||||
onClick={() => setMode("dark")}
|
||||
className={cn(mode === "dark" && "border-2 border-primary")}
|
||||
>
|
||||
<Moon className="mr-1 -translate-x-1" />
|
||||
Dark
|
||||
</Button>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Skeleton className="h-8 w-full" />
|
||||
<Skeleton className="h-8 w-full" />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex gap-2 sm:ml-auto">
|
||||
<CopyCodeButton />
|
||||
</div>
|
||||
</div>
|
||||
</ThemeWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
function CopyCodeButton({
|
||||
export function CopyCodeButton({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof Button>) {
|
||||
const [config] = useConfig()
|
||||
const activeTheme = baseColors.find((theme) => theme.name === config.theme)
|
||||
const [hasCopied, setHasCopied] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
setTimeout(() => {
|
||||
setHasCopied(false)
|
||||
}, 2000)
|
||||
}, [hasCopied])
|
||||
|
||||
return (
|
||||
<>
|
||||
{activeTheme && (
|
||||
<Button
|
||||
onClick={() => {
|
||||
copyToClipboardWithMeta(getThemeCode(activeTheme, config.radius), {
|
||||
name: "copy_theme_code",
|
||||
properties: {
|
||||
theme: activeTheme.name,
|
||||
radius: config.radius,
|
||||
},
|
||||
})
|
||||
setHasCopied(true)
|
||||
}}
|
||||
className={cn("md:hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
{hasCopied ? <Check /> : <Copy />}
|
||||
Copy code
|
||||
</Button>
|
||||
)}
|
||||
<Drawer>
|
||||
<DrawerTrigger asChild>
|
||||
<Button
|
||||
className={cn("h-8 rounded-lg shadow-none sm:hidden", className)}
|
||||
{...props}
|
||||
>
|
||||
Copy
|
||||
</Button>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent>
|
||||
<DrawerHeader>
|
||||
<DrawerTitle>Theme</DrawerTitle>
|
||||
<DrawerDescription>
|
||||
Copy and paste the following code into your CSS file.
|
||||
</DrawerDescription>
|
||||
</DrawerHeader>
|
||||
<ThemeWrapper defaultTheme="zinc" className="relative px-6">
|
||||
<CustomizerCode />
|
||||
</ThemeWrapper>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
<Dialog>
|
||||
<DialogTrigger asChild>
|
||||
<Button className={cn("hidden md:flex", className)} {...props}>
|
||||
<Button
|
||||
className={cn(
|
||||
"hidden h-8 rounded-lg shadow-none sm:flex",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
Copy code
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
@@ -280,28 +244,6 @@ function CopyCodeButton({
|
||||
</DialogHeader>
|
||||
<ThemeWrapper defaultTheme="zinc" className="relative">
|
||||
<CustomizerCode />
|
||||
{activeTheme && (
|
||||
<Button
|
||||
size="sm"
|
||||
onClick={() => {
|
||||
copyToClipboardWithMeta(
|
||||
getThemeCode(activeTheme, config.radius),
|
||||
{
|
||||
name: "copy_theme_code",
|
||||
properties: {
|
||||
theme: activeTheme.name,
|
||||
radius: config.radius,
|
||||
},
|
||||
}
|
||||
)
|
||||
setHasCopied(true)
|
||||
}}
|
||||
className="absolute right-4 top-4 bg-muted text-muted-foreground hover:bg-muted hover:text-muted-foreground"
|
||||
>
|
||||
{hasCopied ? <Check /> : <Copy />}
|
||||
Copy
|
||||
</Button>
|
||||
)}
|
||||
</ThemeWrapper>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@@ -311,168 +253,269 @@ function CopyCodeButton({
|
||||
|
||||
function CustomizerCode() {
|
||||
const [config] = useConfig()
|
||||
const activeTheme = baseColors.find((theme) => theme.name === config.theme)
|
||||
const [hasCopied, setHasCopied] = React.useState(false)
|
||||
const [themeVersion, setThemeVersion] = React.useState("v4")
|
||||
const activeTheme = React.useMemo(
|
||||
() => baseColors.find((theme) => theme.name === config.theme),
|
||||
[config.theme]
|
||||
)
|
||||
const activeThemeOKLCH = React.useMemo(
|
||||
() => baseColorsOKLCH[config.theme as keyof typeof baseColorsOKLCH],
|
||||
[config.theme]
|
||||
)
|
||||
|
||||
React.useEffect(() => {
|
||||
if (hasCopied) {
|
||||
setTimeout(() => {
|
||||
setHasCopied(false)
|
||||
}, 2000)
|
||||
}
|
||||
}, [hasCopied])
|
||||
|
||||
return (
|
||||
<ThemeWrapper defaultTheme="zinc" className="relative space-y-4">
|
||||
<div data-rehype-pretty-code-fragment="">
|
||||
<pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
|
||||
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
|
||||
<span className="line text-white">@layer base {</span>
|
||||
<span className="line text-white"> :root {</span>
|
||||
<span className="line text-white">
|
||||
--background:{" "}
|
||||
{activeTheme?.cssVars.light["background"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--foreground:{" "}
|
||||
{activeTheme?.cssVars.light["foreground"]};
|
||||
</span>
|
||||
{[
|
||||
"card",
|
||||
"popover",
|
||||
"primary",
|
||||
"secondary",
|
||||
"muted",
|
||||
"accent",
|
||||
"destructive",
|
||||
].map((prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.light[
|
||||
prefix as keyof typeof activeTheme.cssVars.light
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--{prefix}-foreground:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.light[
|
||||
`${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
))}
|
||||
<span className="line text-white">
|
||||
--border:{" "}
|
||||
{activeTheme?.cssVars.light["border"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--input:{" "}
|
||||
{activeTheme?.cssVars.light["input"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--ring:{" "}
|
||||
{activeTheme?.cssVars.light["ring"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--radius: {config.radius}rem;
|
||||
</span>
|
||||
{["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
|
||||
(prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.light[
|
||||
prefix as keyof typeof activeTheme.cssVars.light
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
<Tabs value={themeVersion} onValueChange={setThemeVersion}>
|
||||
<div className="flex items-center justify-between">
|
||||
<TabsList>
|
||||
<TabsTrigger value="v4">Tailwind v4</TabsTrigger>
|
||||
<TabsTrigger value="v3">v3</TabsTrigger>
|
||||
</TabsList>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
copyToClipboardWithMeta(
|
||||
themeVersion === "v3"
|
||||
? getThemeCode(activeTheme, config.radius)
|
||||
: getThemeCodeOKLCH(activeThemeOKLCH, config.radius),
|
||||
{
|
||||
name: "copy_theme_code",
|
||||
properties: {
|
||||
theme: config.theme,
|
||||
radius: config.radius,
|
||||
},
|
||||
}
|
||||
)
|
||||
)}
|
||||
<span className="line text-white"> }</span>
|
||||
<span className="line text-white"> </span>
|
||||
<span className="line text-white"> .dark {</span>
|
||||
<span className="line text-white">
|
||||
--background:{" "}
|
||||
{activeTheme?.cssVars.dark["background"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--foreground:{" "}
|
||||
{activeTheme?.cssVars.dark["foreground"]};
|
||||
</span>
|
||||
{[
|
||||
"card",
|
||||
"popover",
|
||||
"primary",
|
||||
"secondary",
|
||||
"muted",
|
||||
"accent",
|
||||
"destructive",
|
||||
].map((prefix) => (
|
||||
<>
|
||||
setHasCopied(true)
|
||||
}}
|
||||
className="absolute right-0 top-0 shadow-none"
|
||||
>
|
||||
{hasCopied ? <Check /> : <ClipboardIcon />}
|
||||
Copy
|
||||
</Button>
|
||||
</div>
|
||||
<TabsContent value="v4">
|
||||
<div data-rehype-pretty-code-fragment="">
|
||||
<pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
|
||||
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
|
||||
<span className="line text-white"> :root {</span>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.dark[
|
||||
prefix as keyof typeof activeTheme.cssVars.dark
|
||||
]
|
||||
}
|
||||
;
|
||||
--radius: {config.radius}rem;
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--{prefix}-foreground:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.dark[
|
||||
`${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
))}
|
||||
<span className="line text-white">
|
||||
--border:{" "}
|
||||
{activeTheme?.cssVars.dark["border"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--input:{" "}
|
||||
{activeTheme?.cssVars.dark["input"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--ring:{" "}
|
||||
{activeTheme?.cssVars.dark["ring"]};
|
||||
</span>
|
||||
{["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
|
||||
(prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.dark[
|
||||
prefix as keyof typeof activeTheme.cssVars.dark
|
||||
]
|
||||
}
|
||||
;
|
||||
{Object.entries(activeThemeOKLCH?.light).map(([key, value]) => (
|
||||
<span className="line text-white" key={key}>
|
||||
--{key}: {value};
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
<span className="line text-white"> }</span>
|
||||
<span className="line text-white">}</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
))}
|
||||
<span className="line text-white"> }</span>
|
||||
<span className="line text-white"> </span>
|
||||
<span className="line text-white"> .dark {</span>
|
||||
{Object.entries(activeThemeOKLCH?.dark).map(([key, value]) => (
|
||||
<span className="line text-white" key={key}>
|
||||
--{key}: {value};
|
||||
</span>
|
||||
))}
|
||||
<span className="line text-white"> }</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent value="v3">
|
||||
<div data-rehype-pretty-code-fragment="">
|
||||
<pre className="max-h-[450px] overflow-x-auto rounded-lg border bg-zinc-950 py-4 dark:bg-zinc-900">
|
||||
<code className="relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm">
|
||||
<span className="line text-white">@layer base {</span>
|
||||
<span className="line text-white">
|
||||
:root {
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--background:{" "}
|
||||
{activeTheme?.cssVars.light["background"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--foreground:{" "}
|
||||
{activeTheme?.cssVars.light["foreground"]};
|
||||
</span>
|
||||
{[
|
||||
"card",
|
||||
"popover",
|
||||
"primary",
|
||||
"secondary",
|
||||
"muted",
|
||||
"accent",
|
||||
"destructive",
|
||||
].map((prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.light[
|
||||
prefix as keyof typeof activeTheme.cssVars.light
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--{prefix}-foreground:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.light[
|
||||
`${prefix}-foreground` as keyof typeof activeTheme.cssVars.light
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
))}
|
||||
<span className="line text-white">
|
||||
--border:{" "}
|
||||
{activeTheme?.cssVars.light["border"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--input:{" "}
|
||||
{activeTheme?.cssVars.light["input"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--ring:{" "}
|
||||
{activeTheme?.cssVars.light["ring"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--radius: {config.radius}rem;
|
||||
</span>
|
||||
{["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
|
||||
(prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.light[
|
||||
prefix as keyof typeof activeTheme.cssVars.light
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
<span className="line text-white"> }</span>
|
||||
<span className="line text-white"> </span>
|
||||
<span className="line text-white">
|
||||
.dark {
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--background:{" "}
|
||||
{activeTheme?.cssVars.dark["background"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--foreground:{" "}
|
||||
{activeTheme?.cssVars.dark["foreground"]};
|
||||
</span>
|
||||
{[
|
||||
"card",
|
||||
"popover",
|
||||
"primary",
|
||||
"secondary",
|
||||
"muted",
|
||||
"accent",
|
||||
"destructive",
|
||||
].map((prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.dark[
|
||||
prefix as keyof typeof activeTheme.cssVars.dark
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--{prefix}-foreground:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.dark[
|
||||
`${prefix}-foreground` as keyof typeof activeTheme.cssVars.dark
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
))}
|
||||
<span className="line text-white">
|
||||
--border:{" "}
|
||||
{activeTheme?.cssVars.dark["border"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--input:{" "}
|
||||
{activeTheme?.cssVars.dark["input"]};
|
||||
</span>
|
||||
<span className="line text-white">
|
||||
--ring:{" "}
|
||||
{activeTheme?.cssVars.dark["ring"]};
|
||||
</span>
|
||||
{["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"].map(
|
||||
(prefix) => (
|
||||
<>
|
||||
<span className="line text-white">
|
||||
--{prefix}:{" "}
|
||||
{
|
||||
activeTheme?.cssVars.dark[
|
||||
prefix as keyof typeof activeTheme.cssVars.dark
|
||||
]
|
||||
}
|
||||
;
|
||||
</span>
|
||||
</>
|
||||
)
|
||||
)}
|
||||
<span className="line text-white"> }</span>
|
||||
<span className="line text-white">}</span>
|
||||
</code>
|
||||
</pre>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</ThemeWrapper>
|
||||
)
|
||||
}
|
||||
|
||||
function getThemeCode(theme: BaseColor, radius: number) {
|
||||
function getThemeCodeOKLCH(theme: BaseColorOKLCH | undefined, radius: number) {
|
||||
if (!theme) {
|
||||
return ""
|
||||
}
|
||||
|
||||
const rootSection =
|
||||
":root {\n --radius: " +
|
||||
radius +
|
||||
"rem;\n" +
|
||||
Object.entries(theme.light)
|
||||
.map((entry) => " --" + entry[0] + ": " + entry[1] + ";")
|
||||
.join("\n") +
|
||||
"\n}\n\n.dark {\n" +
|
||||
Object.entries(theme.dark)
|
||||
.map((entry) => " --" + entry[0] + ": " + entry[1] + ";")
|
||||
.join("\n") +
|
||||
"\n}\n"
|
||||
|
||||
return rootSection
|
||||
}
|
||||
|
||||
function getThemeCode(theme: BaseColor | undefined, radius: number) {
|
||||
if (!theme) {
|
||||
return ""
|
||||
}
|
||||
|
||||
return template(BASE_STYLES_WITH_VARIABLES)({
|
||||
colors: theme.cssVars,
|
||||
radius,
|
||||
radius: radius.toString(),
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
@@ -1102,3 +1102,550 @@ export const baseColorsV4 = {
|
||||
},
|
||||
},
|
||||
} as const
|
||||
|
||||
export const baseColorsOKLCH = {
|
||||
zinc: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950
|
||||
card: "oklch(1 0 0)", // --color-zinc-50
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
|
||||
primary: "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
"primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200
|
||||
ring: "oklch(0.705 0.015 286.067)", // --color-zinc-400
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950
|
||||
"sidebar-primary": "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
"sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200
|
||||
"sidebar-ring": "oklch(0.705 0.015 286.067)", // --color-zinc-400
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
primary: "oklch(0.92 0.004 286.32)", // --color-zinc-200
|
||||
"primary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white
|
||||
ring: "oklch(0.552 0.016 285.938)", // --color-zinc-500
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
"sidebar-primary": "oklch(0.488 0.243 264.376)", // --color-blue-700
|
||||
"sidebar-primary-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white
|
||||
"sidebar-ring": "oklch(0.552 0.016 285.938)", // --color-zinc-500
|
||||
},
|
||||
},
|
||||
red: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
"primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
"sidebar-primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
"primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
"sidebar-primary-foreground": "oklch(0.971 0.013 17.38)", // --color-red-50 (approx HSL 0 85.7% 97.3%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.637 0.237 25.331)", // --color-red-500 (approx HSL 0 72.2% 50.6%)
|
||||
},
|
||||
},
|
||||
rose: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
"primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
"sidebar-primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
"primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
"sidebar-primary-foreground": "oklch(0.969 0.015 12.422)", // --color-rose-50 (approx HSL 355.7 100% 97.3%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.645 0.246 16.439)", // --color-rose-500 (approx HSL 346.8 77.2% 49.8%)
|
||||
},
|
||||
},
|
||||
orange: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
|
||||
"primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
|
||||
"sidebar-primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.705 0.213 47.604)", // --color-orange-500 (approx HSL 24.6 95% 53.1%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
|
||||
"primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
|
||||
"sidebar-primary-foreground": "oklch(0.98 0.016 73.684)", // --color-orange-50 (approx HSL 60 9.1% 97.8%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.646 0.222 41.116)", // --color-orange-600 (approx HSL 20.5 90.2% 48.2%)
|
||||
},
|
||||
},
|
||||
green: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
|
||||
"primary-foreground": "oklch(0.982 0.018 155.826)", // --color-green-50 (approx HSL 355.7 100% 97.3%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
|
||||
"sidebar-primary-foreground": "oklch(0.982 0.018 155.826)", // --color-green-50 (approx HSL 355.7 100% 97.3%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.723 0.219 149.579)", // --color-green-500 (approx HSL 142.1 76.2% 36.3%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.696 0.17 162.48)", // --color-emerald-500 (approx HSL 142.1 70.6% 45.3%)
|
||||
"primary-foreground": "oklch(0.393 0.095 152.535)", // --color-green-900 (approx HSL 144.9 80.4% 10%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.527 0.154 150.069)", // --color-green-700 (approx HSL 142.4 71.8% 29.2%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (approx HSL 142.1 70.6% 45.3%)
|
||||
"sidebar-primary-foreground": "oklch(0.393 0.095 152.535)", // --color-green-900 (approx HSL 144.9 80.4% 10%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.527 0.154 150.069)", // --color-green-700 (approx HSL 142.4 71.8% 29.2%)
|
||||
},
|
||||
},
|
||||
blue: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
|
||||
"primary-foreground": "oklch(0.97 0.014 254.604)", // --color-blue-50 (approx HSL 210 40% 98%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
|
||||
"sidebar-primary-foreground": "oklch(0.97 0.014 254.604)", // --color-blue-50 (approx HSL 210 40% 98%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.623 0.214 259.815)", // --color-blue-500 (approx HSL 221.2 83.2% 53.3%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.546 0.245 262.881)", // --color-blue-600 (approx HSL 217.2 91.2% 59.8%)
|
||||
"primary-foreground": "oklch(0.379 0.146 265.522)", // --color-blue-900 (approx HSL 222.2 47.4% 11.2%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.488 0.243 264.376)", // --color-blue-700 (approx HSL 224.3 76.3% 48%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.546 0.245 262.881)", // --color-blue-600 (approx HSL 217.2 91.2% 59.8%)
|
||||
"sidebar-primary-foreground": "oklch(0.379 0.146 265.522)", // --color-blue-900 (approx HSL 222.2 47.4% 11.2%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.488 0.243 264.376)", // --color-blue-700 (approx HSL 224.3 76.3% 48%)
|
||||
},
|
||||
},
|
||||
yellow: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
|
||||
"primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
|
||||
"sidebar-primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
|
||||
"primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.554 0.135 66.442)", // --color-yellow-700 (approx HSL 35.5 91.7% 32.9%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.795 0.184 86.047)", // --color-yellow-500 (approx HSL 47.9 95.8% 53.1%)
|
||||
"sidebar-primary-foreground": "oklch(0.421 0.095 57.708)", // --color-yellow-900 (approx HSL 26 83.3% 14.1%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.554 0.135 66.442)", // --color-yellow-700 (approx HSL 35.5 91.7% 32.9%)
|
||||
},
|
||||
},
|
||||
violet: {
|
||||
light: {
|
||||
background: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
foreground: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
card: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"card-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
popover: "oklch(1 0 0)", // --color-zinc-50 (from zinc)
|
||||
"popover-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
primary: "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
|
||||
"primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
|
||||
secondary: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"secondary-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
muted: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"muted-foreground": "oklch(0.552 0.016 285.938)", // --color-zinc-500 (from zinc)
|
||||
accent: "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
destructive: "oklch(0.577 0.245 27.325)", // --color-red-600 (from zinc)
|
||||
border: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
input: "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
ring: "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
|
||||
"chart-1": "oklch(0.646 0.222 41.116)", // --color-orange-600 (from zinc)
|
||||
"chart-2": "oklch(0.6 0.118 184.704)", // --color-teal-600 (from zinc)
|
||||
"chart-3": "oklch(0.398 0.07 227.392)", // --color-cyan-900 (from zinc)
|
||||
"chart-4": "oklch(0.828 0.189 84.429)", // --color-amber-400 (from zinc)
|
||||
"chart-5": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
sidebar: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
"sidebar-primary": "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
|
||||
"sidebar-primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
|
||||
"sidebar-accent": "oklch(0.967 0.001 286.375)", // --color-zinc-100 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-border": "oklch(0.92 0.004 286.32)", // --color-zinc-200 (from zinc)
|
||||
"sidebar-ring": "oklch(0.606 0.25 292.717)", // --color-violet-500 (approx HSL 262.1 83.3% 57.8%)
|
||||
},
|
||||
dark: {
|
||||
background: "oklch(0.141 0.005 285.823)", // --color-zinc-950 (from zinc)
|
||||
foreground: "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
card: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"card-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
popover: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"popover-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
primary: "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
|
||||
"primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
|
||||
secondary: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"secondary-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
muted: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"muted-foreground": "oklch(0.705 0.015 286.067)", // --color-zinc-400 (from zinc)
|
||||
accent: "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
destructive: "oklch(0.704 0.191 22.216)", // --color-red-400 (from zinc)
|
||||
border: "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
input: "oklch(1 0 0 / 15%)", // --color-white (from zinc)
|
||||
ring: "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
|
||||
"chart-1": "oklch(0.488 0.243 264.376)", // --color-blue-700 (from zinc)
|
||||
"chart-2": "oklch(0.696 0.17 162.48)", // --color-emerald-500 (from zinc)
|
||||
"chart-3": "oklch(0.769 0.188 70.08)", // --color-amber-500 (from zinc)
|
||||
"chart-4": "oklch(0.627 0.265 303.9)", // --color-purple-500 (from zinc)
|
||||
"chart-5": "oklch(0.645 0.246 16.439)", // --color-rose-500 (from zinc)
|
||||
sidebar: "oklch(0.21 0.006 285.885)", // --color-zinc-900 (from zinc)
|
||||
"sidebar-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-primary": "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
|
||||
"sidebar-primary-foreground": "oklch(0.969 0.016 293.756)", // --color-violet-50 (approx HSL 210 20% 98%)
|
||||
"sidebar-accent": "oklch(0.274 0.006 286.033)", // --color-zinc-800 (from zinc)
|
||||
"sidebar-accent-foreground": "oklch(0.985 0 0)", // --color-zinc-50 (from zinc)
|
||||
"sidebar-border": "oklch(1 0 0 / 10%)", // --color-white (from zinc)
|
||||
"sidebar-ring": "oklch(0.541 0.281 293.009)", // --color-violet-600 (approx HSL 263.4 70% 50.4%)
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user