@3df-spa/ui 1.1.0 → 1.2.0

package/dist/index.js

@@ -1440,37 +1440,37 @@ const tt = /* @__PURE__ */ Symbol("select"), At = ["aria-expanded", "aria-active
   }
 }), es = ie(
   [
-    "inline-flex items-center gap-1",
-    "rounded-md text-xs font-semibold",
+    "inline-flex items-center gap-1.5 shadow-sm",
+    "rounded-[var(--badge-radius,var(--radius-sm))] text-xs font-semibold",
     "transition-colors duration-200",
     "select-none",
     "focus-visible:outline-2 focus-visible:outline-ring",
-    "[&>svg]:size-3 [&>svg]:pointer-events-none"
+    "[&>svg]:size-3 [&>svg]:pointer-events-none [&>svg]:shrink-0"
   ].join(" "),
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow-sm",
-        secondary: "bg-secondary text-secondary-foreground",
-        outline: "border-ui border-border bg-foreground/[0.06] text-foreground",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm",
-        success: "bg-success text-success-foreground shadow-sm",
-        warning: "bg-warning text-warning-foreground shadow-sm",
-        red: "bg-red-600 text-white shadow-sm dark:bg-red-500",
-        orange: "bg-orange-500 text-white shadow-sm dark:bg-orange-400 dark:text-black",
-        yellow: "bg-yellow-400 text-black shadow-sm dark:bg-yellow-300",
-        green: "bg-green-600 text-white shadow-sm dark:bg-green-500",
-        teal: "bg-teal-600 text-white shadow-sm dark:bg-teal-500",
-        blue: "bg-blue-600 text-white shadow-sm dark:bg-blue-500",
-        indigo: "bg-indigo-600 text-white shadow-sm dark:bg-indigo-500",
-        purple: "bg-purple-600 text-white shadow-sm dark:bg-purple-500",
-        pink: "bg-pink-600 text-white shadow-sm dark:bg-pink-500",
-        gray: "bg-gray-500 text-white shadow-sm dark:bg-gray-400 dark:text-black"
+        default: "bg-primary text-primary-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-none",
+        outline: "border-ui border-border bg-foreground/[0.06] text-foreground shadow-none",
+        destructive: "bg-destructive text-destructive-foreground",
+        success: "bg-success text-success-foreground",
+        warning: "bg-warning text-warning-foreground",
+        red: "bg-red-600 text-white dark:bg-red-500",
+        orange: "bg-orange-500 text-white dark:bg-orange-400 dark:text-black",
+        yellow: "bg-yellow-400 text-black dark:bg-yellow-300",
+        green: "bg-green-600 text-white dark:bg-green-500",
+        teal: "bg-teal-600 text-white dark:bg-teal-500",
+        blue: "bg-blue-600 text-white dark:bg-blue-500",
+        indigo: "bg-indigo-600 text-white dark:bg-indigo-500",
+        purple: "bg-purple-600 text-white dark:bg-purple-500",
+        pink: "bg-pink-600 text-white dark:bg-pink-500",
+        gray: "bg-gray-500 text-white dark:bg-gray-400 dark:text-black"
       },
       size: {
-        default: "px-2.5 py-0.5",
-        sm: "px-2 py-px text-[0.65rem]",
-        lg: "px-3 py-1 text-sm"
+        default: "h-6 px-3.5",
+        sm: "h-5 px-2.5 text-[0.65rem]",
+        lg: "h-7 px-4 text-sm"
       }
     },
     defaultVariants: {
@@ -1515,7 +1515,7 @@ const tt = /* @__PURE__ */ Symbol("select"), At = ["aria-expanded", "aria-active
       const { class: u, ...c } = e;
       return c;
     }), a = i(() => typeof t.as != "string" ? !0 : ["a", "button"].includes(t.as)), n = {
-      default: "bg-card text-card-foreground rounded-xl border-ui border-border shadow-md"
+      default: "bg-card text-card-foreground rounded-lg border border-border/28 shadow-none"
     }, l = i(
       () => b(
         n[t.variant] ?? n.default,
@@ -2271,11 +2271,7 @@ const ls = { class: "table min-w-full" }, is = /* @__PURE__ */ _({
       imageError: u,
       size: a
     }), (c, f) => (d(), m("span", y(r.value, {
-      class: o(b)(
-        "relative flex shrink-0 overflow-hidden rounded-full",
-        n[a.value],
-        o(e).class
-      )
+      class: o(b)("relative flex shrink-0 overflow-hidden rounded-full", n[a.value], o(e).class)
     }), [
       x(c.$slots, "default")
     ], 16));
@@ -2669,7 +2665,7 @@ const ks = ["data-state", "data-collapsible", "data-variant", "data-side"], As =
       return n;
     }), r = i(
       () => b(
-        "flex flex-col gap-2 border-b-ui border-sidebar-border/50 p-4 transition-[padding] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)]",
+        "flex flex-col gap-2 border-b-ui border-sidebar-border/70 p-4 transition-[padding] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)]",
         "group-data-[collapsible=icon]/sidebar-wrapper:p-2",
         t.class
       )
@@ -2691,7 +2687,7 @@ const ks = ["data-state", "data-collapsible", "data-variant", "data-side"], As =
       return n;
     }), r = i(
       () => b(
-        "flex flex-col gap-2 border-t-ui border-sidebar-border/50 p-4 transition-[padding] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)]",
+        "flex flex-col gap-2 border-t-ui border-sidebar-border/70 p-4 transition-[padding] duration-400 ease-[cubic-bezier(0.22,1,0.36,1)]",
         "group-data-[collapsible=icon]/sidebar-wrapper:p-2",
         t.class
       )
@@ -2718,7 +2714,7 @@ const ks = ["data-state", "data-collapsible", "data-variant", "data-side"], As =
         "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-sidebar-border/60",
         "[&::-webkit-scrollbar-track]:bg-transparent",
         "hover:[&::-webkit-scrollbar-thumb]:bg-sidebar-border",
-        "[&>[data-sidebar=group]]:border-b-ui [&>[data-sidebar=group]]:border-sidebar-border/50 [&>[data-sidebar=group]:last-child]:border-b-0",
+        "[&>[data-sidebar=group]]:border-b-ui [&>[data-sidebar=group]]:border-sidebar-border/60 [&>[data-sidebar=group]:last-child]:border-b-0",
         t.class
       )
     );

package/dist/theme.css

@@ -1,55 +1,52 @@
 @custom-variant dark (&:where(.dark, .dark *));
 @source ".";
-@theme {
---color-background: hsl(0 0% 98%);
---color-foreground: hsl(0 0% 3.9%);
---color-card: hsl(0 0% 100%);
---color-card-foreground: hsl(0 0% 3.9%);
---color-popover: hsl(0 0% 100%);
---color-popover-foreground: hsl(0 0% 3.9%);
---color-primary: hsl(0 0% 0%);
---color-primary-foreground: hsl(0 0% 100%);
---color-secondary: hsl(0 0% 94%);
---color-secondary-foreground: hsl(0 0% 9%);
---color-muted: hsl(0 0% 96%);
---color-muted-foreground: hsl(0 0% 45%);
---color-accent: hsl(0 0% 92%);
---color-accent-foreground: hsl(0 0% 9%);
---color-destructive: hsl(0 84% 50%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(217 91% 60%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(0 0% 85%);
---color-input: hsl(0 0% 85%);
---color-ring: hsl(0 0% 25%);
---color-sidebar: hsl(0 0% 98%);
---color-sidebar-foreground: hsl(0 0% 0%);
---color-sidebar-primary: hsl(0 0% 0%);
---color-sidebar-primary-foreground: hsl(0 0% 100%);
---color-sidebar-accent: hsl(0 0% 92%);
---color-sidebar-accent-foreground: hsl(0 0% 0%);
---color-sidebar-border: hsl(0 0% 85%);
---color-sidebar-ring: hsl(0 0% 25%);
---color-chart-1: hsl(215 20% 42%);
---color-chart-2: hsl(215 12% 58%);
---color-chart-3: hsl(170 25% 38%);
---color-chart-4: hsl(340 18% 48%);
---color-chart-5: hsl(255 18% 52%);
---color-chart-6: hsl(25 70% 55%);
---color-chart-7: hsl(280 55% 58%);
---color-chart-8: hsl(175 55% 45%);
---color-chart-9: hsl(58 80% 52%);
---color-chart-10: hsl(330 60% 58%);
---color-chart-11: hsl(142 71% 45%);
---color-chart-12: hsl(0 72% 51%);
---radius-sm: calc(var(--ui-radius, 0.625rem) * 0.72);
---radius-md: var(--ui-radius, 0.625rem);
---radius-lg: calc(var(--ui-radius, 0.625rem) * 1.2);
---radius-xl: calc(var(--ui-radius, 0.625rem) * 1.6);
+:root {
+color-scheme: light;
+--background: hsl(0 0% 100%);
+--foreground: hsl(240 10% 3.9%);
+--card: hsl(0 0% 100%);
+--card-foreground: hsl(240 10% 3.9%);
+--popover: hsl(0 0% 100%);
+--popover-foreground: hsl(240 10% 3.9%);
+--primary: hsl(240 5.9% 10%);
+--primary-foreground: hsl(0 0% 98%);
+--secondary: hsl(240 4.8% 95.9%);
+--secondary-foreground: hsl(240 5.9% 10%);
+--muted: hsl(240 4.8% 95.9%);
+--muted-foreground: hsl(240 3.8% 46.1%);
+--accent: hsl(240 4.8% 95.9%);
+--accent-foreground: hsl(240 5.9% 10%);
+--destructive: hsl(0 84.2% 60.2%);
+--destructive-foreground: hsl(0 0% 98%);
+--success: hsl(142 76% 36%);
+--success-foreground: hsl(0 0% 98%);
+--warning: hsl(38 92% 50%);
+--warning-foreground: hsl(0 0% 98%);
+--info: hsl(217 91% 60%);
+--info-foreground: hsl(0 0% 98%);
+--border: hsl(240 5.9% 90%);
+--input: hsl(240 5.9% 90%);
+--ring: hsl(240 10% 3.9%);
+--sidebar: hsl(0 0% 98%);
+--sidebar-foreground: hsl(240 5.9% 10%);
+--sidebar-primary: hsl(240 5.9% 10%);
+--sidebar-primary-foreground: hsl(0 0% 98%);
+--sidebar-accent: hsl(240 4.8% 95.9%);
+--sidebar-accent-foreground: hsl(240 5.9% 10%);
+--sidebar-border: hsl(240 5.9% 90%);
+--sidebar-ring: hsl(240 10% 3.9%);
+--chart-1: hsl(215 20% 42%);
+--chart-2: hsl(215 12% 58%);
+--chart-3: hsl(170 25% 38%);
+--chart-4: hsl(340 18% 48%);
+--chart-5: hsl(255 18% 52%);
+--chart-6: hsl(25 70% 55%);
+--chart-7: hsl(280 55% 58%);
+--chart-8: hsl(175 55% 45%);
+--chart-9: hsl(58 80% 52%);
+--chart-10: hsl(330 60% 58%);
+--chart-11: hsl(142 71% 45%);
+--chart-12: hsl(0 72% 51%);
 --shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.04);
 --shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.06);
 --shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.08), 0 1px 2px -1px hsl(0 0% 0% / 0.06);
@@ -58,6 +55,135 @@
 --shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.12), 0 8px 10px -6px hsl(0 0% 0% / 0.08);
 --shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.22);
 --shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.06);
+--font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+--radius: 1rem;
+--spacing: 0.25rem;
+--ui-radius: 1rem;
+--ui-letter-spacing: -0.10em;
+--ui-shadow-blur: 0px;
+--ui-shadow-opacity: 0;
+}
+.dark {
+color-scheme: dark;
+--background: hsl(240 10% 3.9%);
+--foreground: hsl(0 0% 98%);
+--card: hsl(240 10% 3.9%);
+--card-foreground: hsl(0 0% 98%);
+--popover: hsl(240 10% 3.9%);
+--popover-foreground: hsl(0 0% 98%);
+--primary: hsl(0 0% 98%);
+--primary-foreground: hsl(240 5.9% 10%);
+--secondary: hsl(240 3.7% 15.9%);
+--secondary-foreground: hsl(0 0% 98%);
+--muted: hsl(240 3.7% 15.9%);
+--muted-foreground: hsl(240 5% 64.9%);
+--accent: hsl(240 3.7% 15.9%);
+--accent-foreground: hsl(0 0% 98%);
+--destructive: hsl(0 62.8% 30.6%);
+--destructive-foreground: hsl(0 0% 98%);
+--success: hsl(142 69% 58%);
+--success-foreground: hsl(0 0% 0%);
+--warning: hsl(38 92% 50%);
+--warning-foreground: hsl(0 0% 0%);
+--info: hsl(213 94% 68%);
+--info-foreground: hsl(0 0% 0%);
+--border: hsl(240 3.7% 15.9%);
+--input: hsl(240 3.7% 15.9%);
+--ring: hsl(240 4.9% 83.9%);
+--sidebar: hsl(240 5.9% 10%);
+--sidebar-foreground: hsl(0 0% 98%);
+--sidebar-primary: hsl(0 0% 98%);
+--sidebar-primary-foreground: hsl(240 5.9% 10%);
+--sidebar-accent: hsl(240 3.7% 15.9%);
+--sidebar-accent-foreground: hsl(0 0% 98%);
+--sidebar-border: hsl(240 3.7% 15.9%);
+--sidebar-ring: hsl(240 4.9% 83.9%);
+--chart-1: hsl(215 20% 55%);
+--chart-2: hsl(215 12% 45%);
+--chart-3: hsl(170 22% 48%);
+--chart-4: hsl(340 16% 56%);
+--chart-5: hsl(255 16% 62%);
+--chart-6: hsl(25 75% 62%);
+--chart-7: hsl(280 60% 68%);
+--chart-8: hsl(175 60% 55%);
+--chart-9: hsl(58 85% 60%);
+--chart-10: hsl(330 65% 65%);
+--chart-11: hsl(142 70% 50%);
+--chart-12: hsl(0 70% 58%);
+--shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.10);
+--shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.20);
+--shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.25), 0 1px 2px -1px hsl(0 0% 0% / 0.20);
+--shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.28), 0 2px 4px -2px hsl(0 0% 0% / 0.20);
+--shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.32), 0 4px 6px -4px hsl(0 0% 0% / 0.22);
+--shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.40), 0 8px 10px -6px hsl(0 0% 0% / 0.28);
+--shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.55);
+--shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.20);
+}
+@theme inline {
+--color-background: var(--background);
+--color-foreground: var(--foreground);
+--color-card: var(--card);
+--color-card-foreground: var(--card-foreground);
+--color-popover: var(--popover);
+--color-popover-foreground: var(--popover-foreground);
+--color-primary: var(--primary);
+--color-primary-foreground: var(--primary-foreground);
+--color-secondary: var(--secondary);
+--color-secondary-foreground: var(--secondary-foreground);
+--color-muted: var(--muted);
+--color-muted-foreground: var(--muted-foreground);
+--color-accent: var(--accent);
+--color-accent-foreground: var(--accent-foreground);
+--color-destructive: var(--destructive);
+--color-destructive-foreground: var(--destructive-foreground);
+--color-success: var(--success);
+--color-success-foreground: var(--success-foreground);
+--color-warning: var(--warning);
+--color-warning-foreground: var(--warning-foreground);
+--color-info: var(--info);
+--color-info-foreground: var(--info-foreground);
+--color-border: var(--border);
+--color-input: var(--input);
+--color-ring: var(--ring);
+--color-sidebar: var(--sidebar);
+--color-sidebar-foreground: var(--sidebar-foreground);
+--color-sidebar-primary: var(--sidebar-primary);
+--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+--color-sidebar-accent: var(--sidebar-accent);
+--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+--color-sidebar-border: var(--sidebar-border);
+--color-sidebar-ring: var(--sidebar-ring);
+--color-chart-1: var(--chart-1);
+--color-chart-2: var(--chart-2);
+--color-chart-3: var(--chart-3);
+--color-chart-4: var(--chart-4);
+--color-chart-5: var(--chart-5);
+--color-chart-6: var(--chart-6);
+--color-chart-7: var(--chart-7);
+--color-chart-8: var(--chart-8);
+--color-chart-9: var(--chart-9);
+--color-chart-10: var(--chart-10);
+--color-chart-11: var(--chart-11);
+--color-chart-12: var(--chart-12);
+--font-sans: var(--font-sans);
+--font-serif: var(--font-serif);
+--font-mono: var(--font-mono);
+--radius-sm: calc(var(--radius) - 4px);
+--radius-md: calc(var(--radius) - 2px);
+--radius-lg: var(--radius);
+--radius-xl: calc(var(--radius) + 4px);
+--shadow-2xs: var(--shadow-2xs);
+--shadow-xs: var(--shadow-xs);
+--shadow-sm: var(--shadow-sm);
+--shadow-md: var(--shadow-md);
+--shadow-lg: var(--shadow-lg);
+--shadow-xl: var(--shadow-xl);
+--shadow-2xl: var(--shadow-2xl);
+--shadow-inner: var(--shadow-inner);
+}
+@theme {
 --duration-instant: 75ms;
 --duration-fast: 150ms;
 --duration-normal: 250ms;
@@ -79,18 +205,23 @@
 }
 @utility border-ui {
 border-width: var(--ui-border-width, 2px);
+border-style: solid;
 }
 @utility border-t-ui {
 border-top-width: var(--ui-border-width, 2px);
+border-top-style: solid;
 }
 @utility border-r-ui {
 border-right-width: var(--ui-border-width, 2px);
+border-right-style: solid;
 }
 @utility border-b-ui {
 border-bottom-width: var(--ui-border-width, 2px);
+border-bottom-style: solid;
 }
 @utility border-l-ui {
 border-left-width: var(--ui-border-width, 2px);
+border-left-style: solid;
 }
 @keyframes fade-in {
 from { opacity: 0; }
@@ -123,739 +254,4 @@ to { opacity: 0; transform: scale(0.95); }
 @keyframes pulse-soft {
 0%, 100% { opacity: 1; }
 50% { opacity: 0.55; }
-}
-.dark {
-color-scheme: dark;
---color-background: hsl(0 0% 2%);
---color-foreground: hsl(0 0% 100%);
---color-card: hsl(0 0% 4%);
---color-card-foreground: hsl(0 0% 100%);
---color-popover: hsl(0 0% 5%);
---color-popover-foreground: hsl(0 0% 100%);
---color-primary: hsl(0 0% 100%);
---color-primary-foreground: hsl(0 0% 0%);
---color-secondary: hsl(0 0% 12%);
---color-secondary-foreground: hsl(0 0% 100%);
---color-muted: hsl(0 0% 10%);
---color-muted-foreground: hsl(0 0% 64%);
---color-accent: hsl(0 0% 16%);
---color-accent-foreground: hsl(0 0% 100%);
---color-destructive: hsl(0 72% 51%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(213 94% 68%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(0 0% 20%);
---color-input: hsl(0 0% 20%);
---color-ring: hsl(0 0% 30%);
---color-sidebar: hsl(0 0% 4%);
---color-sidebar-foreground: hsl(0 0% 100%);
---color-sidebar-primary: hsl(0 0% 100%);
---color-sidebar-primary-foreground: hsl(0 0% 0%);
---color-sidebar-accent: hsl(0 0% 16%);
---color-sidebar-accent-foreground: hsl(0 0% 100%);
---color-sidebar-border: hsl(0 0% 20%);
---color-sidebar-ring: hsl(0 0% 30%);
---color-chart-1: hsl(215 20% 55%);
---color-chart-2: hsl(215 12% 45%);
---color-chart-3: hsl(170 22% 48%);
---color-chart-4: hsl(340 16% 56%);
---color-chart-5: hsl(255 16% 62%);
---color-chart-6: hsl(25 75% 62%);
---color-chart-7: hsl(280 60% 68%);
---color-chart-8: hsl(175 60% 55%);
---color-chart-9: hsl(58 85% 60%);
---color-chart-10: hsl(330 65% 65%);
---color-chart-11: hsl(142 70% 50%);
---color-chart-12: hsl(0 70% 58%);
---shadow-2xs: 0 1px 0 0 hsl(0 0% 0% / 0.10);
---shadow-xs: 0 1px 2px 0 hsl(0 0% 0% / 0.20);
---shadow-sm: 0 1px 3px 0 hsl(0 0% 0% / 0.25), 0 1px 2px -1px hsl(0 0% 0% / 0.20);
---shadow-md: 0 4px 6px -1px hsl(0 0% 0% / 0.28), 0 2px 4px -2px hsl(0 0% 0% / 0.20);
---shadow-lg: 0 10px 15px -3px hsl(0 0% 0% / 0.32), 0 4px 6px -4px hsl(0 0% 0% / 0.22);
---shadow-xl: 0 20px 25px -5px hsl(0 0% 0% / 0.40), 0 8px 10px -6px hsl(0 0% 0% / 0.28);
---shadow-2xl: 0 25px 50px -12px hsl(0 0% 0% / 0.55);
---shadow-inner: inset 0 2px 4px 0 hsl(0 0% 0% / 0.20);
-}
-.light-3df {
-color-scheme: light;
---color-background: hsl(140 20% 98%);
---color-foreground: hsl(160 50% 5%);
---color-card: hsl(140 20% 96%);
---color-card-foreground: hsl(160 50% 10%);
---color-popover: hsl(140 15% 99%);
---color-popover-foreground: hsl(160 50% 5%);
---color-primary: hsl(45 95% 47%);
---color-primary-foreground: hsl(45 10% 5%);
---color-secondary: hsl(160 30% 20%);
---color-secondary-foreground: hsl(160 10% 98%);
---color-muted: hsl(140 10% 90%);
---color-muted-foreground: hsl(160 10% 35%);
---color-accent: hsl(178 75% 40%);
---color-accent-foreground: hsl(160 50% 5%);
---color-destructive: hsl(0 84% 50%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(200 80% 50%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(140 15% 85%);
---color-input: hsl(140 15% 85%);
---color-ring: hsl(45 90% 45%);
---color-sidebar: hsl(140 20% 96%);
---color-sidebar-foreground: hsl(160 50% 5%);
---color-sidebar-primary: hsl(45 90% 45%);
---color-sidebar-primary-foreground: hsl(45 10% 5%);
---color-sidebar-accent: hsl(140 15% 90%);
---color-sidebar-accent-foreground: hsl(160 50% 5%);
---color-sidebar-border: hsl(140 15% 85%);
---color-sidebar-ring: hsl(45 90% 45%);
---color-chart-1: hsl(45 90% 45%);
---color-chart-2: hsl(160 40% 30%);
---color-chart-3: hsl(180 60% 40%);
---color-chart-4: hsl(25 70% 50%);
---color-chart-5: hsl(140 20% 50%);
---color-chart-6: hsl(35 80% 52%);
---color-chart-7: hsl(280 40% 52%);
---color-chart-8: hsl(178 65% 40%);
---color-chart-9: hsl(60 85% 48%);
---color-chart-10: hsl(335 55% 52%);
---color-chart-11: hsl(150 65% 40%);
---color-chart-12: hsl(0 75% 50%);
---shadow-2xs: 0 1px 0 0 hsl(45 80% 30% / 0.06);
---shadow-xs: 0 1px 2px 0 hsl(45 80% 30% / 0.08);
---shadow-sm: 0 1px 3px 0 hsl(45 80% 30% / 0.10), 0 1px 2px -1px hsl(45 80% 30% / 0.08);
---shadow-md: 0 4px 6px -1px hsl(45 80% 30% / 0.12), 0 2px 4px -2px hsl(45 80% 30% / 0.08);
---shadow-lg: 0 10px 15px -3px hsl(45 80% 30% / 0.14), 0 4px 6px -4px hsl(45 80% 30% / 0.08);
---shadow-xl: 0 20px 25px -5px hsl(45 80% 30% / 0.16), 0 8px 10px -6px hsl(45 80% 30% / 0.10);
---shadow-2xl: 0 25px 50px -12px hsl(45 80% 30% / 0.25);
---shadow-inner: inset 0 2px 4px 0 hsl(45 80% 30% / 0.08);
-}
-.dark-3df {
-color-scheme: dark;
---color-background: hsl(160 25% 4%);
---color-foreground: hsl(140 10% 95%);
---color-card: hsl(160 20% 8%);
---color-card-foreground: hsl(140 10% 95%);
---color-popover: hsl(160 15% 12%);
---color-popover-foreground: hsl(140 10% 98%);
---color-primary: hsl(45 100% 50%);
---color-primary-foreground: hsl(160 40% 2%);
---color-secondary: hsl(160 50% 15%);
---color-secondary-foreground: hsl(140 20% 90%);
---color-muted: hsl(160 30% 8%);
---color-muted-foreground: hsl(160 10% 65%);
---color-accent: hsl(180 85% 50%);
---color-accent-foreground: hsl(160 40% 2%);
---color-destructive: hsl(0 70% 35%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(200 85% 60%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(160 15% 15%);
---color-input: hsl(160 30% 15%);
---color-ring: hsl(45 100% 50%);
---color-sidebar: hsl(160 40% 3%);
---color-sidebar-foreground: hsl(140 10% 95%);
---color-sidebar-primary: hsl(45 100% 50%);
---color-sidebar-primary-foreground: hsl(160 40% 2%);
---color-sidebar-accent: hsl(160 30% 10%);
---color-sidebar-accent-foreground: hsl(140 10% 95%);
---color-sidebar-border: hsl(160 30% 15%);
---color-sidebar-ring: hsl(45 100% 50%);
---color-chart-1: hsl(45 100% 50%);
---color-chart-2: hsl(180 80% 50%);
---color-chart-3: hsl(150 60% 50%);
---color-chart-4: hsl(30 90% 60%);
---color-chart-5: hsl(200 70% 60%);
---color-chart-6: hsl(35 90% 62%);
---color-chart-7: hsl(280 70% 70%);
---color-chart-8: hsl(178 75% 60%);
---color-chart-9: hsl(60 90% 60%);
---color-chart-10: hsl(335 65% 65%);
---color-chart-11: hsl(150 70% 55%);
---color-chart-12: hsl(0 70% 60%);
---shadow-2xs: 0 1px 0 0 hsl(45 100% 30% / 0.15);
---shadow-xs: 0 1px 2px 0 hsl(45 100% 20% / 0.30);
---shadow-sm: 0 1px 3px 0 hsl(45 100% 20% / 0.35), 0 1px 2px -1px hsl(45 100% 20% / 0.25);
---shadow-md: 0 4px 6px -1px hsl(45 100% 20% / 0.40), 0 2px 4px -2px hsl(45 100% 20% / 0.28);
---shadow-lg: 0 10px 15px -3px hsl(45 100% 20% / 0.45), 0 4px 6px -4px hsl(45 100% 20% / 0.30);
---shadow-xl: 0 20px 25px -5px hsl(45 100% 20% / 0.55), 0 8px 10px -6px hsl(45 100% 20% / 0.35);
---shadow-2xl: 0 25px 50px -12px hsl(45 100% 20% / 0.65);
---shadow-inner: inset 0 2px 4px 0 hsl(45 100% 20% / 0.25);
-}
-.light-coffee {
-color-scheme: light;
---color-background: hsl(36 30% 98%);
---color-foreground: hsl(25 20% 15%);
---color-card: hsl(36 30% 96%);
---color-card-foreground: hsl(25 20% 15%);
---color-popover: hsl(36 30% 98%);
---color-popover-foreground: hsl(25 20% 15%);
---color-primary: hsl(28 50% 45%);
---color-primary-foreground: hsl(36 30% 98%);
---color-secondary: hsl(30 25% 90%);
---color-secondary-foreground: hsl(25 30% 20%);
---color-muted: hsl(30 20% 94%);
---color-muted-foreground: hsl(25 10% 45%);
---color-accent: hsl(35 40% 92%);
---color-accent-foreground: hsl(28 50% 45%);
---color-destructive: hsl(0 84% 60%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(217 91% 60%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(30 15% 88%);
---color-input: hsl(30 15% 88%);
---color-ring: hsl(28 50% 45%);
---color-sidebar: hsl(36 25% 95%);
---color-sidebar-foreground: hsl(25 20% 15%);
---color-sidebar-primary: hsl(28 50% 45%);
---color-sidebar-primary-foreground: hsl(36 30% 98%);
---color-sidebar-accent: hsl(35 30% 88%);
---color-sidebar-accent-foreground: hsl(28 50% 45%);
---color-sidebar-border: hsl(30 15% 85%);
---color-sidebar-ring: hsl(28 50% 45%);
---color-chart-1: hsl(28 60% 50%);
---color-chart-2: hsl(150 30% 40%);
---color-chart-3: hsl(35 80% 45%);
---color-chart-4: hsl(10 60% 55%);
---color-chart-5: hsl(200 40% 50%);
---color-chart-6: hsl(25 75% 55%);
---color-chart-7: hsl(275 35% 52%);
---color-chart-8: hsl(172 45% 42%);
---color-chart-9: hsl(42 85% 52%);
---color-chart-10: hsl(350 55% 55%);
---color-chart-11: hsl(148 60% 38%);
---color-chart-12: hsl(5 70% 52%);
---shadow-2xs: 0 1px 0 0 hsl(28 50% 25% / 0.06);
---shadow-xs: 0 1px 2px 0 hsl(28 50% 25% / 0.08);
---shadow-sm: 0 1px 3px 0 hsl(28 50% 25% / 0.10), 0 1px 2px -1px hsl(28 50% 25% / 0.08);
---shadow-md: 0 4px 6px -1px hsl(28 50% 25% / 0.12), 0 2px 4px -2px hsl(28 50% 25% / 0.08);
---shadow-lg: 0 10px 15px -3px hsl(28 50% 25% / 0.14), 0 4px 6px -4px hsl(28 50% 25% / 0.08);
---shadow-xl: 0 20px 25px -5px hsl(28 50% 25% / 0.16), 0 8px 10px -6px hsl(28 50% 25% / 0.10);
---shadow-2xl: 0 25px 50px -12px hsl(28 50% 25% / 0.25);
---shadow-inner: inset 0 2px 4px 0 hsl(28 50% 25% / 0.08);
-}
-.dark-coffee {
-color-scheme: dark;
---color-background: hsl(24 25% 6%);
---color-foreground: hsl(36 20% 90%);
---color-card: hsl(24 15% 12%);
---color-card-foreground: hsl(36 20% 90%);
---color-popover: hsl(24 15% 12%);
---color-popover-foreground: hsl(36 20% 90%);
---color-primary: hsl(33 90% 52%);
---color-primary-foreground: hsl(24 30% 10%);
---color-secondary: hsl(24 20% 18%);
---color-secondary-foreground: hsl(36 20% 90%);
---color-muted: hsl(24 15% 16%);
---color-muted-foreground: hsl(36 10% 65%);
---color-accent: hsl(24 25% 20%);
---color-accent-foreground: hsl(35 85% 55%);
---color-destructive: hsl(0 62% 30%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(213 94% 68%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(24 15% 20%);
---color-input: hsl(24 15% 20%);
---color-ring: hsl(35 85% 55%);
---color-sidebar: hsl(24 20% 6%);
---color-sidebar-foreground: hsl(36 20% 90%);
---color-sidebar-primary: hsl(35 85% 55%);
---color-sidebar-primary-foreground: hsl(24 30% 10%);
---color-sidebar-accent: hsl(24 20% 16%);
---color-sidebar-accent-foreground: hsl(35 85% 55%);
---color-sidebar-border: hsl(24 15% 18%);
---color-sidebar-ring: hsl(35 85% 55%);
---color-chart-1: hsl(35 90% 55%);
---color-chart-2: hsl(150 40% 50%);
---color-chart-3: hsl(28 80% 60%);
---color-chart-4: hsl(340 60% 60%);
---color-chart-5: hsl(200 60% 60%);
---color-chart-6: hsl(25 80% 65%);
---color-chart-7: hsl(275 50% 65%);
---color-chart-8: hsl(172 55% 55%);
---color-chart-9: hsl(42 90% 62%);
---color-chart-10: hsl(350 65% 65%);
---color-chart-11: hsl(148 65% 52%);
---color-chart-12: hsl(5 68% 60%);
---shadow-2xs: 0 1px 0 0 hsl(24 30% 5% / 0.30);
---shadow-xs: 0 1px 2px 0 hsl(24 30% 5% / 0.40);
---shadow-sm: 0 1px 3px 0 hsl(24 30% 5% / 0.45), 0 1px 2px -1px hsl(24 30% 5% / 0.35);
---shadow-md: 0 4px 6px -1px hsl(24 30% 5% / 0.50), 0 2px 4px -2px hsl(24 30% 5% / 0.38);
---shadow-lg: 0 10px 15px -3px hsl(24 30% 5% / 0.55), 0 4px 6px -4px hsl(24 30% 5% / 0.40);
---shadow-xl: 0 20px 25px -5px hsl(24 30% 5% / 0.62), 0 8px 10px -6px hsl(24 30% 5% / 0.44);
---shadow-2xl: 0 25px 50px -12px hsl(24 30% 5% / 0.70);
---shadow-inner: inset 0 2px 4px 0 hsl(24 30% 5% / 0.30);
-}
-.light-ocean {
-color-scheme: light;
---color-background: hsl(210 40% 98%);
---color-foreground: hsl(222 47% 8%);
---color-card: hsl(210 40% 100%);
---color-card-foreground: hsl(222 47% 8%);
---color-popover: hsl(210 40% 100%);
---color-popover-foreground: hsl(222 47% 8%);
---color-primary: hsl(221 83% 53%);
---color-primary-foreground: hsl(0 0% 100%);
---color-secondary: hsl(210 30% 92%);
---color-secondary-foreground: hsl(222 47% 15%);
---color-muted: hsl(210 30% 95%);
---color-muted-foreground: hsl(215 20% 45%);
---color-accent: hsl(191 91% 37%);
---color-accent-foreground: hsl(0 0% 100%);
---color-destructive: hsl(0 84% 50%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(221 83% 53%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(214 32% 88%);
---color-input: hsl(214 32% 88%);
---color-ring: hsl(221 83% 53%);
---color-sidebar: hsl(210 40% 97%);
---color-sidebar-foreground: hsl(222 47% 8%);
---color-sidebar-primary: hsl(221 83% 53%);
---color-sidebar-primary-foreground: hsl(0 0% 100%);
---color-sidebar-accent: hsl(210 30% 92%);
---color-sidebar-accent-foreground: hsl(222 47% 15%);
---color-sidebar-border: hsl(214 32% 88%);
---color-sidebar-ring: hsl(221 83% 53%);
---color-chart-1: hsl(221 83% 53%);
---color-chart-2: hsl(191 91% 37%);
---color-chart-3: hsl(199 89% 48%);
---color-chart-4: hsl(250 75% 58%);
---color-chart-5: hsl(175 60% 42%);
---color-chart-6: hsl(217 70% 65%);
---color-chart-7: hsl(260 65% 62%);
---color-chart-8: hsl(185 75% 48%);
---color-chart-9: hsl(45 85% 55%);
---color-chart-10: hsl(350 60% 58%);
---color-chart-11: hsl(142 71% 45%);
---color-chart-12: hsl(0 72% 51%);
---shadow-2xs: 0 1px 0 0 hsl(221 83% 30% / 0.06);
---shadow-xs: 0 1px 2px 0 hsl(221 83% 30% / 0.08);
---shadow-sm: 0 1px 3px 0 hsl(221 83% 30% / 0.10), 0 1px 2px -1px hsl(221 83% 30% / 0.08);
---shadow-md: 0 4px 6px -1px hsl(221 83% 30% / 0.12), 0 2px 4px -2px hsl(221 83% 30% / 0.08);
---shadow-lg: 0 10px 15px -3px hsl(221 83% 30% / 0.14), 0 4px 6px -4px hsl(221 83% 30% / 0.08);
---shadow-xl: 0 20px 25px -5px hsl(221 83% 30% / 0.18), 0 8px 10px -6px hsl(221 83% 30% / 0.10);
---shadow-2xl: 0 25px 50px -12px hsl(221 83% 30% / 0.28);
---shadow-inner: inset 0 2px 4px 0 hsl(221 83% 30% / 0.08);
-}
-.dark-ocean {
-color-scheme: dark;
---color-background: hsl(222 47% 5%);
---color-foreground: hsl(210 40% 96%);
---color-card: hsl(222 47% 8%);
---color-card-foreground: hsl(210 40% 96%);
---color-popover: hsl(222 47% 10%);
---color-popover-foreground: hsl(210 40% 98%);
---color-primary: hsl(217 91% 60%);
---color-primary-foreground: hsl(222 47% 4%);
---color-secondary: hsl(222 30% 15%);
---color-secondary-foreground: hsl(210 40% 90%);
---color-muted: hsl(222 30% 12%);
---color-muted-foreground: hsl(215 20% 60%);
---color-accent: hsl(191 95% 45%);
---color-accent-foreground: hsl(222 47% 4%);
---color-destructive: hsl(0 72% 51%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(213 94% 68%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(222 30% 18%);
---color-input: hsl(222 30% 18%);
---color-ring: hsl(217 91% 60%);
---color-sidebar: hsl(222 47% 3%);
---color-sidebar-foreground: hsl(210 40% 96%);
---color-sidebar-primary: hsl(217 91% 60%);
---color-sidebar-primary-foreground: hsl(222 47% 4%);
---color-sidebar-accent: hsl(222 30% 14%);
---color-sidebar-accent-foreground: hsl(210 40% 90%);
---color-sidebar-border: hsl(222 30% 18%);
---color-sidebar-ring: hsl(217 91% 60%);
---color-chart-1: hsl(217 91% 60%);
---color-chart-2: hsl(191 95% 50%);
---color-chart-3: hsl(199 89% 58%);
---color-chart-4: hsl(250 80% 68%);
---color-chart-5: hsl(175 65% 52%);
---color-chart-6: hsl(217 75% 70%);
---color-chart-7: hsl(260 70% 72%);
---color-chart-8: hsl(185 80% 58%);
---color-chart-9: hsl(45 90% 62%);
---color-chart-10: hsl(350 65% 65%);
---color-chart-11: hsl(142 70% 50%);
---color-chart-12: hsl(0 70% 58%);
---shadow-2xs: 0 1px 0 0 hsl(221 83% 10% / 0.30);
---shadow-xs: 0 1px 2px 0 hsl(221 83% 10% / 0.40);
---shadow-sm: 0 1px 3px 0 hsl(221 83% 10% / 0.45), 0 1px 2px -1px hsl(221 83% 10% / 0.35);
---shadow-md: 0 4px 6px -1px hsl(221 83% 10% / 0.50), 0 2px 4px -2px hsl(221 83% 10% / 0.38);
---shadow-lg: 0 10px 15px -3px hsl(221 83% 10% / 0.55), 0 4px 6px -4px hsl(221 83% 10% / 0.40);
---shadow-xl: 0 20px 25px -5px hsl(221 83% 10% / 0.62), 0 8px 10px -6px hsl(221 83% 10% / 0.44);
---shadow-2xl: 0 25px 50px -12px hsl(221 83% 10% / 0.70);
---shadow-inner: inset 0 2px 4px 0 hsl(221 83% 10% / 0.30);
-}
-.light-aurora {
-color-scheme: light;
---color-background: hsl(270 30% 98%);
---color-foreground: hsl(270 50% 8%);
---color-card: hsl(270 30% 100%);
---color-card-foreground: hsl(270 50% 8%);
---color-popover: hsl(270 30% 100%);
---color-popover-foreground: hsl(270 50% 8%);
---color-primary: hsl(262 83% 58%);
---color-primary-foreground: hsl(0 0% 100%);
---color-secondary: hsl(270 25% 92%);
---color-secondary-foreground: hsl(270 50% 15%);
---color-muted: hsl(270 20% 95%);
---color-muted-foreground: hsl(270 15% 45%);
---color-accent: hsl(316 72% 55%);
---color-accent-foreground: hsl(0 0% 100%);
---color-destructive: hsl(0 84% 50%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(221 83% 53%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(270 20% 88%);
---color-input: hsl(270 20% 88%);
---color-ring: hsl(262 83% 58%);
---color-sidebar: hsl(270 30% 97%);
---color-sidebar-foreground: hsl(270 50% 8%);
---color-sidebar-primary: hsl(262 83% 58%);
---color-sidebar-primary-foreground: hsl(0 0% 100%);
---color-sidebar-accent: hsl(270 25% 92%);
---color-sidebar-accent-foreground: hsl(270 50% 15%);
---color-sidebar-border: hsl(270 20% 88%);
---color-sidebar-ring: hsl(262 83% 58%);
---color-chart-1: hsl(262 83% 58%);
---color-chart-2: hsl(316 72% 55%);
---color-chart-3: hsl(240 75% 60%);
---color-chart-4: hsl(291 64% 58%);
---color-chart-5: hsl(199 89% 48%);
---color-chart-6: hsl(280 70% 65%);
---color-chart-7: hsl(330 65% 60%);
---color-chart-8: hsl(220 80% 62%);
---color-chart-9: hsl(58 80% 52%);
---color-chart-10: hsl(175 60% 45%);
---color-chart-11: hsl(142 71% 45%);
---color-chart-12: hsl(0 72% 51%);
---shadow-2xs: 0 1px 0 0 hsl(262 83% 30% / 0.06);
---shadow-xs: 0 1px 2px 0 hsl(262 83% 30% / 0.08);
---shadow-sm: 0 1px 3px 0 hsl(262 83% 30% / 0.10), 0 1px 2px -1px hsl(262 83% 30% / 0.08);
---shadow-md: 0 4px 6px -1px hsl(262 83% 30% / 0.12), 0 2px 4px -2px hsl(262 83% 30% / 0.08);
---shadow-lg: 0 10px 15px -3px hsl(262 83% 30% / 0.14), 0 4px 6px -4px hsl(262 83% 30% / 0.08);
---shadow-xl: 0 20px 25px -5px hsl(262 83% 30% / 0.18), 0 8px 10px -6px hsl(262 83% 30% / 0.10);
---shadow-2xl: 0 25px 50px -12px hsl(262 83% 30% / 0.28);
---shadow-inner: inset 0 2px 4px 0 hsl(262 83% 30% / 0.08);
-}
-.dark-aurora {
-color-scheme: dark;
---color-background: hsl(270 50% 4%);
---color-foreground: hsl(270 30% 96%);
---color-card: hsl(270 45% 7%);
---color-card-foreground: hsl(270 30% 96%);
---color-popover: hsl(270 45% 9%);
---color-popover-foreground: hsl(270 30% 98%);
---color-primary: hsl(262 83% 70%);
---color-primary-foreground: hsl(270 50% 4%);
---color-secondary: hsl(270 30% 14%);
---color-secondary-foreground: hsl(270 30% 90%);
---color-muted: hsl(270 30% 11%);
---color-muted-foreground: hsl(270 20% 60%);
---color-accent: hsl(316 72% 65%);
---color-accent-foreground: hsl(270 50% 4%);
---color-destructive: hsl(0 72% 51%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(213 94% 68%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(270 30% 16%);
---color-input: hsl(270 30% 16%);
---color-ring: hsl(262 83% 70%);
---color-sidebar: hsl(270 50% 3%);
---color-sidebar-foreground: hsl(270 30% 96%);
---color-sidebar-primary: hsl(262 83% 70%);
---color-sidebar-primary-foreground: hsl(270 50% 4%);
---color-sidebar-accent: hsl(270 30% 13%);
---color-sidebar-accent-foreground: hsl(270 30% 90%);
---color-sidebar-border: hsl(270 30% 16%);
---color-sidebar-ring: hsl(262 83% 70%);
---color-chart-1: hsl(262 83% 70%);
---color-chart-2: hsl(316 72% 68%);
---color-chart-3: hsl(240 75% 72%);
---color-chart-4: hsl(291 64% 68%);
---color-chart-5: hsl(199 89% 60%);
---color-chart-6: hsl(280 70% 75%);
---color-chart-7: hsl(330 65% 70%);
---color-chart-8: hsl(220 80% 72%);
---color-chart-9: hsl(58 85% 62%);
---color-chart-10: hsl(175 65% 55%);
---color-chart-11: hsl(142 70% 50%);
---color-chart-12: hsl(0 70% 58%);
---shadow-2xs: 0 1px 0 0 hsl(262 83% 10% / 0.30);
---shadow-xs: 0 1px 2px 0 hsl(262 83% 10% / 0.40);
---shadow-sm: 0 1px 3px 0 hsl(262 83% 10% / 0.45), 0 1px 2px -1px hsl(262 83% 10% / 0.35);
---shadow-md: 0 4px 6px -1px hsl(262 83% 10% / 0.50), 0 2px 4px -2px hsl(262 83% 10% / 0.38);
---shadow-lg: 0 10px 15px -3px hsl(262 83% 10% / 0.55), 0 4px 6px -4px hsl(262 83% 10% / 0.40);
---shadow-xl: 0 20px 25px -5px hsl(262 83% 10% / 0.62), 0 8px 10px -6px hsl(262 83% 10% / 0.44);
---shadow-2xl: 0 25px 50px -12px hsl(262 83% 10% / 0.70);
---shadow-inner: inset 0 2px 4px 0 hsl(262 83% 10% / 0.30);
-}
-.light-ember {
-color-scheme: light;
---color-background: hsl(15 30% 98%);
---color-foreground: hsl(15 50% 8%);
---color-card: hsl(15 30% 100%);
---color-card-foreground: hsl(15 50% 8%);
---color-popover: hsl(15 30% 100%);
---color-popover-foreground: hsl(15 50% 8%);
---color-primary: hsl(16 90% 50%);
---color-primary-foreground: hsl(0 0% 100%);
---color-secondary: hsl(15 25% 92%);
---color-secondary-foreground: hsl(15 50% 15%);
---color-muted: hsl(15 20% 95%);
---color-muted-foreground: hsl(15 15% 45%);
---color-accent: hsl(35 95% 52%);
---color-accent-foreground: hsl(15 50% 8%);
---color-destructive: hsl(0 84% 50%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(217 91% 60%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(15 20% 88%);
---color-input: hsl(15 20% 88%);
---color-ring: hsl(16 90% 50%);
---color-sidebar: hsl(15 30% 97%);
---color-sidebar-foreground: hsl(15 50% 8%);
---color-sidebar-primary: hsl(16 90% 50%);
---color-sidebar-primary-foreground: hsl(0 0% 100%);
---color-sidebar-accent: hsl(15 25% 92%);
---color-sidebar-accent-foreground: hsl(15 50% 15%);
---color-sidebar-border: hsl(15 20% 88%);
---color-sidebar-ring: hsl(16 90% 50%);
---color-chart-1: hsl(16 90% 50%);
---color-chart-2: hsl(35 95% 52%);
---color-chart-3: hsl(0 80% 55%);
---color-chart-4: hsl(50 90% 50%);
---color-chart-5: hsl(350 75% 48%);
---color-chart-6: hsl(25 85% 55%);
---color-chart-7: hsl(280 45% 55%);
---color-chart-8: hsl(175 50% 45%);
---color-chart-9: hsl(58 80% 52%);
---color-chart-10: hsl(330 60% 55%);
---color-chart-11: hsl(142 71% 45%);
---color-chart-12: hsl(0 72% 51%);
---shadow-2xs: 0 1px 0 0 hsl(16 90% 25% / 0.06);
---shadow-xs: 0 1px 2px 0 hsl(16 90% 25% / 0.08);
---shadow-sm: 0 1px 3px 0 hsl(16 90% 25% / 0.10), 0 1px 2px -1px hsl(16 90% 25% / 0.08);
---shadow-md: 0 4px 6px -1px hsl(16 90% 25% / 0.12), 0 2px 4px -2px hsl(16 90% 25% / 0.08);
---shadow-lg: 0 10px 15px -3px hsl(16 90% 25% / 0.14), 0 4px 6px -4px hsl(16 90% 25% / 0.08);
---shadow-xl: 0 20px 25px -5px hsl(16 90% 25% / 0.18), 0 8px 10px -6px hsl(16 90% 25% / 0.10);
---shadow-2xl: 0 25px 50px -12px hsl(16 90% 25% / 0.28);
---shadow-inner: inset 0 2px 4px 0 hsl(16 90% 25% / 0.08);
-}
-.dark-ember {
-color-scheme: dark;
---color-background: hsl(15 40% 4%);
---color-foreground: hsl(15 30% 95%);
---color-card: hsl(15 35% 7%);
---color-card-foreground: hsl(15 30% 95%);
---color-popover: hsl(15 35% 9%);
---color-popover-foreground: hsl(15 30% 98%);
---color-primary: hsl(16 90% 58%);
---color-primary-foreground: hsl(15 40% 4%);
---color-secondary: hsl(15 25% 15%);
---color-secondary-foreground: hsl(15 30% 88%);
---color-muted: hsl(15 25% 12%);
---color-muted-foreground: hsl(15 15% 58%);
---color-accent: hsl(35 95% 55%);
---color-accent-foreground: hsl(15 40% 4%);
---color-destructive: hsl(0 72% 51%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(213 94% 68%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(15 25% 18%);
---color-input: hsl(15 25% 18%);
---color-ring: hsl(16 90% 58%);
---color-sidebar: hsl(15 40% 3%);
---color-sidebar-foreground: hsl(15 30% 95%);
---color-sidebar-primary: hsl(16 90% 58%);
---color-sidebar-primary-foreground: hsl(15 40% 4%);
---color-sidebar-accent: hsl(15 25% 14%);
---color-sidebar-accent-foreground: hsl(15 30% 88%);
---color-sidebar-border: hsl(15 25% 18%);
---color-sidebar-ring: hsl(16 90% 58%);
---color-chart-1: hsl(16 90% 60%);
---color-chart-2: hsl(35 95% 60%);
---color-chart-3: hsl(0 80% 62%);
---color-chart-4: hsl(50 90% 58%);
---color-chart-5: hsl(350 75% 58%);
---color-chart-6: hsl(25 85% 65%);
---color-chart-7: hsl(280 50% 65%);
---color-chart-8: hsl(175 55% 55%);
---color-chart-9: hsl(58 85% 60%);
---color-chart-10: hsl(330 65% 65%);
---color-chart-11: hsl(142 70% 50%);
---color-chart-12: hsl(0 70% 58%);
---shadow-2xs: 0 1px 0 0 hsl(15 50% 5% / 0.30);
---shadow-xs: 0 1px 2px 0 hsl(15 50% 5% / 0.40);
---shadow-sm: 0 1px 3px 0 hsl(15 50% 5% / 0.45), 0 1px 2px -1px hsl(15 50% 5% / 0.35);
---shadow-md: 0 4px 6px -1px hsl(15 50% 5% / 0.50), 0 2px 4px -2px hsl(15 50% 5% / 0.38);
---shadow-lg: 0 10px 15px -3px hsl(15 50% 5% / 0.55), 0 4px 6px -4px hsl(15 50% 5% / 0.40);
---shadow-xl: 0 20px 25px -5px hsl(15 50% 5% / 0.62), 0 8px 10px -6px hsl(15 50% 5% / 0.44);
---shadow-2xl: 0 25px 50px -12px hsl(15 50% 5% / 0.70);
---shadow-inner: inset 0 2px 4px 0 hsl(15 50% 5% / 0.30);
-}
-.light-sakura {
-color-scheme: light;
---color-background: hsl(340 30% 98%);
---color-foreground: hsl(340 40% 8%);
---color-card: hsl(340 30% 100%);
---color-card-foreground: hsl(340 40% 8%);
---color-popover: hsl(340 30% 100%);
---color-popover-foreground: hsl(340 40% 8%);
---color-primary: hsl(340 75% 55%);
---color-primary-foreground: hsl(0 0% 100%);
---color-secondary: hsl(340 25% 92%);
---color-secondary-foreground: hsl(340 40% 15%);
---color-muted: hsl(340 20% 95%);
---color-muted-foreground: hsl(340 15% 45%);
---color-accent: hsl(355 80% 60%);
---color-accent-foreground: hsl(0 0% 100%);
---color-destructive: hsl(0 84% 50%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(152 69% 31%);
---color-success-foreground: hsl(0 0% 100%);
---color-warning: hsl(38 92% 50%);
---color-warning-foreground: hsl(0 0% 100%);
---color-info: hsl(217 91% 60%);
---color-info-foreground: hsl(0 0% 100%);
---color-border: hsl(340 20% 88%);
---color-input: hsl(340 20% 88%);
---color-ring: hsl(340 75% 55%);
---color-sidebar: hsl(340 30% 97%);
---color-sidebar-foreground: hsl(340 40% 8%);
---color-sidebar-primary: hsl(340 75% 55%);
---color-sidebar-primary-foreground: hsl(0 0% 100%);
---color-sidebar-accent: hsl(340 25% 92%);
---color-sidebar-accent-foreground: hsl(340 40% 15%);
---color-sidebar-border: hsl(340 20% 88%);
---color-sidebar-ring: hsl(340 75% 55%);
---color-chart-1: hsl(340 75% 55%);
---color-chart-2: hsl(355 80% 60%);
---color-chart-3: hsl(320 65% 55%);
---color-chart-4: hsl(280 55% 58%);
---color-chart-5: hsl(10 75% 55%);
---color-chart-6: hsl(350 70% 65%);
---color-chart-7: hsl(300 50% 60%);
---color-chart-8: hsl(175 50% 45%);
---color-chart-9: hsl(45 80% 55%);
---color-chart-10: hsl(220 65% 58%);
---color-chart-11: hsl(142 71% 45%);
---color-chart-12: hsl(0 72% 51%);
---shadow-2xs: 0 1px 0 0 hsl(340 75% 30% / 0.06);
---shadow-xs: 0 1px 2px 0 hsl(340 75% 30% / 0.08);
---shadow-sm: 0 1px 3px 0 hsl(340 75% 30% / 0.10), 0 1px 2px -1px hsl(340 75% 30% / 0.08);
---shadow-md: 0 4px 6px -1px hsl(340 75% 30% / 0.12), 0 2px 4px -2px hsl(340 75% 30% / 0.08);
---shadow-lg: 0 10px 15px -3px hsl(340 75% 30% / 0.14), 0 4px 6px -4px hsl(340 75% 30% / 0.08);
---shadow-xl: 0 20px 25px -5px hsl(340 75% 30% / 0.18), 0 8px 10px -6px hsl(340 75% 30% / 0.10);
---shadow-2xl: 0 25px 50px -12px hsl(340 75% 30% / 0.28);
---shadow-inner: inset 0 2px 4px 0 hsl(340 75% 30% / 0.08);
-}
-.dark-sakura {
-color-scheme: dark;
---color-background: hsl(340 40% 4%);
---color-foreground: hsl(340 25% 95%);
---color-card: hsl(340 35% 7%);
---color-card-foreground: hsl(340 25% 95%);
---color-popover: hsl(340 35% 9%);
---color-popover-foreground: hsl(340 25% 98%);
---color-primary: hsl(340 75% 65%);
---color-primary-foreground: hsl(340 40% 4%);
---color-secondary: hsl(340 25% 14%);
---color-secondary-foreground: hsl(340 25% 88%);
---color-muted: hsl(340 25% 11%);
---color-muted-foreground: hsl(340 15% 58%);
---color-accent: hsl(355 80% 68%);
---color-accent-foreground: hsl(340 40% 4%);
---color-destructive: hsl(0 72% 51%);
---color-destructive-foreground: hsl(0 0% 100%);
---color-success: hsl(160 84% 39%);
---color-success-foreground: hsl(0 0% 0%);
---color-warning: hsl(45 93% 47%);
---color-warning-foreground: hsl(0 0% 0%);
---color-info: hsl(213 94% 68%);
---color-info-foreground: hsl(0 0% 0%);
---color-border: hsl(340 25% 16%);
---color-input: hsl(340 25% 16%);
---color-ring: hsl(340 75% 65%);
---color-sidebar: hsl(340 40% 3%);
---color-sidebar-foreground: hsl(340 25% 95%);
---color-sidebar-primary: hsl(340 75% 65%);
---color-sidebar-primary-foreground: hsl(340 40% 4%);
---color-sidebar-accent: hsl(340 25% 13%);
---color-sidebar-accent-foreground: hsl(340 25% 88%);
---color-sidebar-border: hsl(340 25% 16%);
---color-sidebar-ring: hsl(340 75% 65%);
---color-chart-1: hsl(340 75% 65%);
---color-chart-2: hsl(355 80% 68%);
---color-chart-3: hsl(320 65% 65%);
---color-chart-4: hsl(280 55% 68%);
---color-chart-5: hsl(10 75% 65%);
---color-chart-6: hsl(350 70% 72%);
---color-chart-7: hsl(300 50% 68%);
---color-chart-8: hsl(175 55% 55%);
---color-chart-9: hsl(45 85% 62%);
---color-chart-10: hsl(220 65% 68%);
---color-chart-11: hsl(142 70% 50%);
---color-chart-12: hsl(0 70% 58%);
---shadow-2xs: 0 1px 0 0 hsl(340 50% 5% / 0.30);
---shadow-xs: 0 1px 2px 0 hsl(340 50% 5% / 0.40);
---shadow-sm: 0 1px 3px 0 hsl(340 50% 5% / 0.45), 0 1px 2px -1px hsl(340 50% 5% / 0.35);
---shadow-md: 0 4px 6px -1px hsl(340 50% 5% / 0.50), 0 2px 4px -2px hsl(340 50% 5% / 0.38);
---shadow-lg: 0 10px 15px -3px hsl(340 50% 5% / 0.55), 0 4px 6px -4px hsl(340 50% 5% / 0.40);
---shadow-xl: 0 20px 25px -5px hsl(340 50% 5% / 0.62), 0 8px 10px -6px hsl(340 50% 5% / 0.44);
---shadow-2xl: 0 25px 50px -12px hsl(340 50% 5% / 0.70);
---shadow-inner: inset 0 2px 4px 0 hsl(340 50% 5% / 0.30);
-}
-:root {
-color-scheme: light;
-}
-body {
-background: var(--color-background);
-color: var(--color-foreground);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@3df-spa/ui",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vue 3 component library — TypeScript strict, Tailwind CSS v4, accessible, zero-runtime",
   "keywords": [
     "vue",
@@ -71,12 +71,12 @@
     }
   },
   "devDependencies": {
+    "@tailwindcss/cli": "^4.1.18",
     "@vitejs/plugin-vue": "^6.0.3",
     "date-fns": "^4.1.0",
     "embla-carousel": "^8.6.0",
-    "vite": "^7.3.1",
-    "@tailwindcss/cli": "^4.1.18",
     "tailwindcss": "^4.1.18",
+    "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",
     "vue": "^3.5.27"
   },