mirror of
https://github.com/shadcn-ui/ui.git
synced 2026-07-07 22:18:39 +00:00
18fcf0f766
* feat(@shadcn/react): add message-scroller package Add the @shadcn/react headless primitives package with MessageScroller scroll anchoring, streaming follow, history prepend, and jump-to-message behavior. Includes geometry helpers, use-render utility, and unit, browser, and perf tests. * feat(registry): add chat components Add MessageScroller, Message, Bubble, Attachment, and Marker registry sources for base and radix, style variants, preview-03 chat blocks, and registry index wiring. * feat(v4): integrate chat components into docs site Wire chat components into the v4 app with docs routes, example preview pages, message part renderers, markdown support, registry build updates, and supporting lib utilities. * feat(examples): add chat component demos Add base and radix example demos for MessageScroller, Message, Bubble, Attachment, Marker, scroll-fade, and shimmer. * docs: add chat component documentation Add component and utility docs for the chat component set, update docs navigation, and add the June 2026 chat components changelog entry. * chore: regenerate registry JSON output Rebuild public registry artifacts for all style variants with the new chat components. * chore(release): add @shadcn/react publish and CI pipeline Add Changesets prerelease workflow, browser test job, RELEASING docs, and monorepo wiring for publishing @shadcn/react independently from the shadcn CLI. * docs: fix display of component preview on mobile * fix * fix * docs: add message scroller docs * style: format * fix
637 lines
21 KiB
CSS
637 lines
21 KiB
CSS
.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);
|
|
}
|
|
}
|