Dashboard final version, TODO: update main sidebar menu
This commit is contained in:
Simon Pocrnjič
+69
-65
@@ -1,4 +1,5 @@
|
||||
@import "tailwindcss";
|
||||
@import "./themes.css";
|
||||
|
||||
@plugin "tailwindcss-animate";
|
||||
|
||||
@@ -187,74 +188,72 @@ @theme inline {
|
||||
}
|
||||
|
||||
:root {
|
||||
--radius: 0.625rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.129 0.042 264.695);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.129 0.042 264.695);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.129 0.042 264.695);
|
||||
--primary: oklch(0.208 0.042 265.755);
|
||||
--primary-foreground: oklch(0.984 0.003 247.858);
|
||||
--secondary: oklch(0.968 0.007 247.896);
|
||||
--secondary-foreground: oklch(0.208 0.042 265.755);
|
||||
--muted: oklch(0.968 0.007 247.896);
|
||||
--muted-foreground: oklch(0.554 0.046 257.417);
|
||||
--accent: oklch(0.968 0.007 247.896);
|
||||
--accent-foreground: oklch(0.208 0.042 265.755);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--destructive-foreground: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.929 0.013 255.508);
|
||||
--input: oklch(0.929 0.013 255.508);
|
||||
--ring: oklch(0.704 0.04 256.788);
|
||||
--chart-1: oklch(0.646 0.222 41.116);
|
||||
--chart-2: oklch(0.6 0.118 184.704);
|
||||
--chart-3: oklch(0.398 0.07 227.392);
|
||||
--chart-4: oklch(0.828 0.189 84.429);
|
||||
--chart-5: oklch(0.769 0.188 70.08);
|
||||
--sidebar: oklch(0.984 0.003 247.858);
|
||||
--sidebar-foreground: oklch(0.129 0.042 264.695);
|
||||
--sidebar-primary: oklch(0.208 0.042 265.755);
|
||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-accent: oklch(0.968 0.007 247.896);
|
||||
--sidebar-accent-foreground: oklch(0.208 0.042 265.755);
|
||||
--sidebar-border: oklch(0.929 0.013 255.508);
|
||||
--sidebar-ring: oklch(0.704 0.04 256.788);
|
||||
--radius: 0.65rem;
|
||||
--background: oklch(1 0 0);
|
||||
--foreground: oklch(0.141 0.005 285.823);
|
||||
--card: oklch(1 0 0);
|
||||
--card-foreground: oklch(0.141 0.005 285.823);
|
||||
--popover: oklch(1 0 0);
|
||||
--popover-foreground: oklch(0.141 0.005 285.823);
|
||||
--primary: oklch(0.648 0.2 131.684);
|
||||
--primary-foreground: oklch(0.986 0.031 120.757);
|
||||
--secondary: oklch(0.967 0.001 286.375);
|
||||
--secondary-foreground: oklch(0.21 0.006 285.885);
|
||||
--muted: oklch(0.967 0.001 286.375);
|
||||
--muted-foreground: oklch(0.552 0.016 285.938);
|
||||
--accent: oklch(0.967 0.001 286.375);
|
||||
--accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--destructive: oklch(0.577 0.245 27.325);
|
||||
--border: oklch(0.92 0.004 286.32);
|
||||
--input: oklch(0.92 0.004 286.32);
|
||||
--ring: oklch(0.841 0.238 128.85);
|
||||
--chart-1: oklch(0.871 0.15 154.449);
|
||||
--chart-2: oklch(0.723 0.219 149.579);
|
||||
--chart-3: oklch(0.627 0.194 149.214);
|
||||
--chart-4: oklch(0.527 0.154 150.069);
|
||||
--chart-5: oklch(0.448 0.119 151.328);
|
||||
--sidebar: oklch(0.985 0 0);
|
||||
--sidebar-foreground: oklch(0.141 0.005 285.823);
|
||||
--sidebar-primary: oklch(0.648 0.2 131.684);
|
||||
--sidebar-primary-foreground: oklch(0.986 0.031 120.757);
|
||||
--sidebar-accent: oklch(0.967 0.001 286.375);
|
||||
--sidebar-accent-foreground: oklch(0.21 0.006 285.885);
|
||||
--sidebar-border: oklch(0.92 0.004 286.32);
|
||||
--sidebar-ring: oklch(0.841 0.238 128.85);
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: oklch(0.129 0.042 264.695);
|
||||
--foreground: oklch(0.984 0.003 247.858);
|
||||
--card: oklch(0.129 0.042 264.695);
|
||||
--card-foreground: oklch(0.984 0.003 247.858);
|
||||
--popover: oklch(0.129 0.042 264.695);
|
||||
--popover-foreground: oklch(0.984 0.003 247.858);
|
||||
--primary: oklch(0.984 0.003 247.858);
|
||||
--primary-foreground: oklch(0.208 0.042 265.755);
|
||||
--secondary: oklch(0.279 0.041 260.031);
|
||||
--secondary-foreground: oklch(0.984 0.003 247.858);
|
||||
--muted: oklch(0.279 0.041 260.031);
|
||||
--muted-foreground: oklch(0.704 0.04 256.788);
|
||||
--accent: oklch(0.279 0.041 260.031);
|
||||
--accent-foreground: oklch(0.984 0.003 247.858);
|
||||
--destructive: oklch(0.396 0.141 25.723);
|
||||
--destructive-foreground: oklch(0.637 0.237 25.331);
|
||||
--border: oklch(0.279 0.041 260.031);
|
||||
--input: oklch(0.279 0.041 260.031);
|
||||
--ring: oklch(0.446 0.043 257.281);
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
--sidebar: oklch(0.208 0.042 265.755);
|
||||
--sidebar-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-primary: oklch(0.488 0.243 264.376);
|
||||
--sidebar-primary-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-accent: oklch(0.279 0.041 260.031);
|
||||
--sidebar-accent-foreground: oklch(0.984 0.003 247.858);
|
||||
--sidebar-border: oklch(0.279 0.041 260.031);
|
||||
--sidebar-ring: oklch(0.446 0.043 257.281);
|
||||
--background: oklch(0.141 0.005 285.823);
|
||||
--foreground: oklch(0.985 0 0);
|
||||
--card: oklch(0.21 0.006 285.885);
|
||||
--card-foreground: oklch(0.985 0 0);
|
||||
--popover: oklch(0.21 0.006 285.885);
|
||||
--popover-foreground: oklch(0.985 0 0);
|
||||
--primary: oklch(0.648 0.2 131.684);
|
||||
--primary-foreground: oklch(0.986 0.031 120.757);
|
||||
--secondary: oklch(0.274 0.006 286.033);
|
||||
--secondary-foreground: oklch(0.985 0 0);
|
||||
--muted: oklch(0.274 0.006 286.033);
|
||||
--muted-foreground: oklch(0.705 0.015 286.067);
|
||||
--accent: oklch(0.274 0.006 286.033);
|
||||
--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.405 0.101 131.063);
|
||||
--chart-1: oklch(0.871 0.15 154.449);
|
||||
--chart-2: oklch(0.723 0.219 149.579);
|
||||
--chart-3: oklch(0.627 0.194 149.214);
|
||||
--chart-4: oklch(0.527 0.154 150.069);
|
||||
--chart-5: oklch(0.448 0.119 151.328);
|
||||
--sidebar: oklch(0.21 0.006 285.885);
|
||||
--sidebar-foreground: oklch(0.985 0 0);
|
||||
--sidebar-primary: oklch(0.768 0.233 130.85);
|
||||
--sidebar-primary-foreground: oklch(0.986 0.031 120.757);
|
||||
--sidebar-accent: oklch(0.274 0.006 286.033);
|
||||
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||
--sidebar-border: oklch(1 0 0 / 10%);
|
||||
--sidebar-ring: oklch(0.405 0.101 131.063);
|
||||
}
|
||||
|
||||
@layer base {
|
||||
@@ -264,4 +263,9 @@ @layer base {
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
}
|
||||
|
||||
button:not([disabled]),
|
||||
[role="button"]:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,396 @@
|
||||
.theme-default .theme-container,
|
||||
.theme-default [data-reka-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-reka-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-reka-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-reka-popper-content-wrapper] {
|
||||
--radius: 0;
|
||||
}
|
||||
|
||||
.theme-rounded-small .theme-container,
|
||||
.theme-rounded-small [data-reka-popper-content-wrapper] {
|
||||
--radius: 0.4rem;
|
||||
}
|
||||
|
||||
.theme-rounded-medium .theme-container,
|
||||
.theme-rounded-medium [data-reka-popper-content-wrapper] {
|
||||
--radius: 0.65rem;
|
||||
}
|
||||
|
||||
.theme-rounded-large .theme-container,
|
||||
.theme-rounded-large [data-reka-popper-content-wrapper] {
|
||||
--radius: 1rem;
|
||||
}
|
||||
|
||||
.theme-rounded-full .theme-container,
|
||||
.theme-rounded-full [data-reka-popper-content-wrapper] {
|
||||
--radius: 1.2rem;
|
||||
}
|
||||
|
||||
.theme-inter .theme-container,
|
||||
.theme-inter [data-reka-popper-content-wrapper] {
|
||||
--font-sans: var(--font-inter);
|
||||
}
|
||||
|
||||
.theme-noto-sans .theme-container,
|
||||
.theme-noto-sans [data-reka-popper-content-wrapper] {
|
||||
--font-sans: var(--font-noto-sans);
|
||||
}
|
||||
|
||||
.theme-nunito-sans .theme-container,
|
||||
.theme-nunito-sans [data-reka-popper-content-wrapper] {
|
||||
--font-sans: var(--font-nunito-sans);
|
||||
}
|
||||
|
||||
.theme-figtree .theme-container,
|
||||
.theme-figtree [data-reka-popper-content-wrapper] {
|
||||
--font-sans: var(--font-figtree);
|
||||
}
|
||||
|
||||
.theme-blue .theme-container,
|
||||
.theme-blue [data-reka-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-reka-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-reka-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-reka-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-reka-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-reka-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-reka-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-reka-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-reka-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-reka-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);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user