auxalia-ui-kit 1.5.6 → 1.5.7

package/dist/chunk-LSMVZLQD.js

@@ -0,0 +1,96 @@
+// src/tailwind.preset.ts
+var auxaliaColors = {
+  // Primary brand: Brand Green
+  "auxalia-green": {
+    50: "#F8FBF0",
+    100: "#F0F7E1",
+    200: "#DDF0C0",
+    300: "#C3E88A",
+    400: "#A7D500",
+    500: "#8DB800",
+    600: "#749400",
+    700: "#5A7600",
+    800: "#3D5000",
+    900: "#283400"
+  },
+  // Secondary brand: Dark Blue
+  "auxalia-blue": {
+    50: "#F5F7F9",
+    100: "#EDF6FB",
+    200: "#C0D6E6",
+    300: "#204760",
+    400: "#1C3D52",
+    500: "#00263E",
+    600: "#001928"
+  }
+};
+var preset = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      fontFamily: {
+        sans: ["Inter", "sans-serif"],
+        display: ["Inter", "sans-serif"],
+        body: ["Inter", "sans-serif"]
+      },
+      colors: {
+        // ─── Brand semantic tokens (map to CSS vars in tokens.css) ───
+        primary: "var(--color-primary)",
+        "primary-hover": "var(--color-primary-hover)",
+        "primary-foreground": "var(--color-primary-foreground)",
+        secondary: "var(--color-secondary)",
+        "secondary-hover": "var(--color-secondary-hover)",
+        "secondary-foreground": "var(--color-secondary-foreground)",
+        accent: "var(--color-accent)",
+        "accent-foreground": "var(--color-accent-foreground)",
+        surface: "var(--color-surface)",
+        "surface-hover": "var(--color-surface-hover)",
+        "surface-foreground": "var(--color-surface-foreground)",
+        destructive: "var(--color-destructive)",
+        "destructive-hover": "var(--color-destructive-hover)",
+        "destructive-foreground": "var(--color-destructive-foreground)",
+        "destructive-background": "var(--color-destructive-background)",
+        success: "var(--color-success)",
+        "success-foreground": "var(--color-success-foreground)",
+        "success-background": "var(--color-success-background)",
+        warning: "var(--color-warning)",
+        "warning-foreground": "var(--color-warning-foreground)",
+        "warning-background": "var(--color-warning-background)",
+        info: "var(--color-info)",
+        "info-foreground": "var(--color-info-foreground)",
+        // ─── Border tokens ───────────────────────────────────────────
+        border: "var(--color-border)",
+        "border-input": "var(--color-border-input)",
+        // ─── Surface / background tokens ─────────────────────────────
+        card: "var(--color-card)",
+        "card-hover": "var(--color-card-hover)",
+        hero: "var(--color-bg-hero)",
+        popover: "var(--color-popover)",
+        // ─── Text tokens (non-conflicting names) ─────────────────────
+        // Usage: text-content, text-dim, text-muted
+        content: "var(--color-text)",
+        dim: "var(--color-text-secondary)",
+        muted: "var(--color-text-muted)",
+        // ─── Static palette (for precise palette-level overrides) ─────
+        ...auxaliaColors
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+        full: "var(--radius-full)"
+      },
+      backgroundImage: {
+        "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
+        "gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(0, 38, 62, 0.1), transparent 40%)",
+        "gradient-glow": "linear-gradient(to bottom right, rgba(0, 38, 62, 0.1), transparent, rgba(255, 255, 255, 0.05))"
+      }
+    }
+  }
+};
+var tailwind_preset_default = preset;
+
+export {
+  tailwind_preset_default
+};

package/dist/index.cjs

@@ -140,12 +140,12 @@ var alertVariants = (0, import_class_variance_authority.cva)(
   {
     variants: {
       variant: {
-        default: "bg-surface text-content border-border dark:bg-surface/50",
-        primary: "bg-primary/5 text-content border-primary/20 dark:bg-primary/10 dark:border-primary/25 [&>svg]:text-primary",
-        destructive: "bg-destructive/5 text-content border-destructive/20 dark:bg-destructive/10 dark:border-destructive/25 [&>svg]:text-destructive",
-        success: "bg-auxalia-green-50 text-content border-auxalia-green-200 dark:bg-auxalia-green-500/10 dark:border-auxalia-green-500/25 [&>svg]:text-auxalia-green-600 dark:[&>svg]:text-auxalia-green-400",
-        warning: "bg-yellow-50 text-content border-yellow-200 dark:bg-yellow-500/10 dark:border-yellow-500/25 [&>svg]:text-yellow-600 dark:[&>svg]:text-yellow-400",
-        info: "bg-accent/5 text-content border-accent/20 dark:bg-accent/10 dark:border-accent/25 [&>svg]:text-accent"
+        default: "bg-surface text-content border-border",
+        primary: "bg-primary/5 text-content border-primary/20 [&>svg]:text-primary",
+        destructive: "bg-destructive/5 text-content border-destructive/20 [&>svg]:text-destructive",
+        success: "bg-success/10 text-content border-success/25 [&>svg]:text-success",
+        warning: "bg-warning/10 text-content border-warning/25 [&>svg]:text-warning",
+        info: "bg-info/10 text-content border-info/25 [&>svg]:text-info"
       }
     },
     defaultVariants: {
@@ -243,12 +243,14 @@ var badgeVariants = (0, import_class_variance_authority3.cva)(
   {
     variants: {
       variant: {
-        default: "bg-primary/10 text-primary border-primary/20 dark:bg-primary/15 dark:border-primary/25",
-        secondary: "bg-secondary/10 text-secondary border-secondary/20 dark:bg-secondary/15 dark:border-secondary/25",
-        accent: "bg-accent/10 text-accent border-accent/20 dark:bg-accent/15 dark:border-accent/25",
-        destructive: "bg-destructive/10 text-destructive border-destructive/20 dark:bg-destructive/15 dark:border-destructive/25",
-        success: "bg-auxalia-green-50 text-auxalia-green-700 border-auxalia-green-200 dark:bg-auxalia-green-500/15 dark:text-auxalia-green-400 dark:border-auxalia-green-500/25",
-        outline: "bg-transparent text-content border-border dark:border-white/15",
+        default: "bg-primary/10 text-primary border-primary/20",
+        secondary: "bg-secondary/10 text-secondary border-secondary/20",
+        accent: "bg-accent/10 text-accent border-accent/20",
+        destructive: "bg-destructive/10 text-destructive border-destructive/20",
+        success: "bg-success/10 text-success border-success/25",
+        warning: "bg-warning/10 text-warning border-warning/25",
+        info: "bg-info/10 text-info border-info/25",
+        outline: "bg-transparent text-content border-border",
         solid: "bg-primary text-primary-foreground border-transparent"
       }
     },
@@ -624,11 +626,11 @@ var dropdownMenuItemVariants = (0, import_class_variance_authority6.cva)(
   {
     variants: {
       variant: {
-        default: "focus:bg-black/5 dark:focus:bg-white/6 focus:text-primary",
-        primary: "focus:bg-primary/10 dark:focus:bg-primary/15 focus:text-primary",
-        secondary: "focus:bg-secondary/10 dark:focus:bg-secondary/15 focus:text-primary",
-        accent: "focus:bg-accent/10 dark:focus:bg-accent/15 focus:text-primary",
-        destructive: "focus:bg-destructive/10 dark:focus:bg-destructive/15 focus:text-destructive"
+        default: "focus:bg-surface-hover focus:text-primary",
+        primary: "focus:bg-primary/10 focus:text-primary",
+        secondary: "focus:bg-secondary/10 focus:text-primary",
+        accent: "focus:bg-accent/10 focus:text-primary",
+        destructive: "focus:bg-destructive/10 focus:text-destructive"
       }
     },
     defaultVariants: {
@@ -1200,18 +1202,17 @@ function TooltipContent({
 // src/components/Card/card.styles.ts
 var import_class_variance_authority8 = require("class-variance-authority");
 var cardVariants = (0, import_class_variance_authority8.cva)(
-  `
-  rounded-lg border p-4 transition-all duration-300
-  `,
+  "rounded-lg border p-4 transition-all duration-300",
   {
     variants: {
       variant: {
-        default: "bg-card border border-border dark:bg-auxalia-blue-500/10 dark:border-auxalia-blue-500/30 shadow-sm hover:shadow-md",
-        primary: "bg-card border-primary/10  hover:border-primary/20 dark:border-primary/20 shadow-sm hover:shadow-md",
-        outlined: "border-2 border-primary/30 bg-transparent hover:border-primary/50 dark:border-primary/40",
-        elevated: "bg-secondary border border-accent/10 shadow-lg hover:shadow-xl",
-        success: "bg-auxalia-green-50 border border-auxalia-green-200 dark:bg-auxalia-green-500/10 dark:border-auxalia-green-500/30",
-        accent: "bg-auxalia-petrol-50 border border-auxalia-petrol-200 dark:bg-auxalia-petrol-500/10 dark:border-auxalia-petrol-500/30"
+        // bg-card token handles light/dark automatically
+        default: "bg-card border-border shadow-sm hover:shadow-md",
+        primary: "bg-card border-primary/10 hover:border-primary/20 shadow-sm hover:shadow-md",
+        outlined: "border-2 border-primary/30 bg-transparent hover:border-primary/50",
+        elevated: "bg-card border-border shadow-lg hover:shadow-xl",
+        success: "bg-success/10 border-success/25",
+        accent: "bg-accent/10 border-accent/25"
       }
     },
     defaultVariants: {
@@ -1229,27 +1230,12 @@ function Card({ variant, className, ...props }) {
 // src/components/Input/input.styles.ts
 var import_class_variance_authority9 = require("class-variance-authority");
 var inputVariants = (0, import_class_variance_authority9.cva)(
-  `
-  w-full rounded-md border transition-colors
-  bg-white dark:bg-white/5
-  text-slate-900 dark:text-white
-  placeholder:text-slate-400 dark:placeholder:text-slate-500
-  focus:outline-none focus:ring-2 focus:ring-offset-0
-  disabled:cursor-not-allowed disabled:opacity-50
-  `,
+  "w-full rounded-md border transition-colors bg-card text-content placeholder:text-muted focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: `
-          border-black/10 dark:border-white/10
-          focus:border-black/20 dark:focus:border-white/20
-          focus:ring-black/10 dark:focus:ring-white/10
-        `,
-        error: `
-          border-red-500 dark:border-red-400
-          focus:border-red-600 dark:focus:border-red-500
-          focus:ring-red-500/20 dark:focus:ring-red-400/20
-        `
+        default: "border-border hover:border-border-input focus:border-border-input focus:ring-border-input/20",
+        error: "border-destructive hover:border-destructive focus:border-destructive focus:ring-destructive/20"
       },
       size: {
         sm: "h-8 px-2.5 text-sm",
@@ -6375,53 +6361,16 @@ var import_lucide_react4 = require("lucide-react");
 // src/components/Select/select.styles.ts
 var import_class_variance_authority10 = require("class-variance-authority");
 var selectTriggerVariants = (0, import_class_variance_authority10.cva)(
-  `
-  flex w-full items-center justify-between gap-2 rounded-md border transition-colors
-  bg-white dark:bg-white/5
-  text-slate-900 dark:text-white
-  focus:outline-none focus:ring-2 focus:ring-offset-0
-  disabled:cursor-not-allowed disabled:opacity-50
-  data-[placeholder]:text-slate-400 dark:data-[placeholder]:text-slate-500
-  [&>span]:truncate
-  `,
+  "flex w-full items-center justify-between gap-2 rounded-md border transition-colors bg-card text-content focus:outline-none focus:ring-2 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 data-[placeholder]:text-muted [&>span]:truncate",
   {
     variants: {
       variant: {
-        default: `
-          border-black/10 dark:border-white/10
-          hover:border-black/20 dark:hover:border-white/20
-          focus:border-black/20 dark:focus:border-white/20
-          focus:ring-black/10 dark:focus:ring-white/10
-        `,
-        primary: `
-          border-primary/30 dark:border-primary/25
-          hover:border-primary/50 dark:hover:border-primary/40
-          focus:border-primary/50 dark:focus:border-primary/40
-          focus:ring-primary/20 dark:focus:ring-primary/15
-        `,
-        secondary: `
-          border-secondary/30 dark:border-secondary/25
-          hover:border-secondary/50 dark:hover:border-secondary/40
-          focus:border-secondary/50 dark:focus:border-secondary/40
-          focus:ring-secondary/20 dark:focus:ring-secondary/15
-        `,
-        accent: `
-          border-accent/30 dark:border-accent/25
-          hover:border-accent/50 dark:hover:border-accent/40
-          focus:border-accent/50 dark:focus:border-accent/40
-          focus:ring-accent/20 dark:focus:ring-accent/15
-        `,
-        destructive: `
-          border-destructive/40 dark:border-destructive/35
-          hover:border-destructive/60 dark:hover:border-destructive/50
-          focus:border-destructive/60 dark:focus:border-destructive/50
-          focus:ring-destructive/20 dark:focus:ring-destructive/15
-        `,
-        error: `
-          border-red-500 dark:border-red-400
-          focus:border-red-600 dark:focus:border-red-500
-          focus:ring-red-500/20 dark:focus:ring-red-400/20
-        `
+        default: "border-border hover:border-border-input focus:border-border-input focus:ring-border-input/20",
+        primary: "border-primary/30 hover:border-primary/50 focus:border-primary/50 focus:ring-primary/20",
+        secondary: "border-secondary/30 hover:border-secondary/50 focus:border-secondary/50 focus:ring-secondary/20",
+        accent: "border-accent/30 hover:border-accent/50 focus:border-accent/50 focus:ring-accent/20",
+        destructive: "border-destructive/40 hover:border-destructive/60 focus:border-destructive/60 focus:ring-destructive/20",
+        error: "border-destructive hover:border-destructive focus:border-destructive focus:ring-destructive/20"
       },
       size: {
         sm: "h-8 px-3 text-sm",
@@ -6440,11 +6389,12 @@ var selectItemVariants = (0, import_class_variance_authority10.cva)(
   {
     variants: {
       variant: {
-        default: "focus:bg-black/5 dark:focus:bg-white/6 focus:text-primary",
-        primary: "focus:bg-primary/10 dark:focus:bg-primary/15 focus:text-primary",
-        secondary: "focus:bg-secondary/10 dark:focus:bg-secondary/15 focus:text-primary",
-        accent: "focus:bg-accent/10 dark:focus:bg-accent/15 focus:text-primary",
-        destructive: "focus:bg-destructive/10 dark:focus:bg-destructive/15 focus:text-destructive"
+        default: "focus:bg-surface-hover focus:text-primary",
+        primary: "focus:bg-primary/10 focus:text-primary",
+        secondary: "focus:bg-secondary/10 focus:text-primary",
+        accent: "focus:bg-accent/10 focus:text-primary",
+        destructive: "focus:bg-destructive/10 focus:text-destructive",
+        error: "focus:bg-destructive/10 focus:text-destructive"
       }
     },
     defaultVariants: {
@@ -7328,63 +7278,41 @@ var ControlledTable_default = ControlledTable;
 
 // src/tailwind.preset.ts
 var auxaliaColors = {
-  // Primary Brand Color - Fresh Green
+  // Primary brand: Brand Green
   "auxalia-green": {
-    50: "#f8fbf0",
-    100: "#f0f7e1",
-    200: "#ddf0c0",
-    300: "#c3e88a",
-    400: "#a7d500",
-    // Brand primary
-    500: "#93b800",
+    50: "#F8FBF0",
+    100: "#F0F7E1",
+    200: "#DDF0C0",
+    300: "#C3E88A",
+    400: "#A7D500",
+    500: "#8DB800",
     600: "#749400",
-    700: "#5a7600",
-    800: "#3d5000",
-    900: "#1f2800"
+    700: "#5A7600",
+    800: "#3D5000",
+    900: "#283400"
   },
-  // Secondary Brand Color - Dark Blue
+  // Secondary brand: Dark Blue
   "auxalia-blue": {
-    50: "#f0f4f8",
-    100: "#e0eaf3",
-    200: "#c0d6e6",
-    300: "#8fb3d1",
-    400: "#5c8fb5",
-    500: "#3e6897",
-    // Brand secondary
-    600: "#2d5080",
-    700: "#1f3860",
-    800: "#142a47",
-    900: "#0a1628"
-  },
-  // Accent - Petrol Green
-  "auxalia-petrol": {
-    50: "#f0fbfc",
-    100: "#dff8f9",
-    200: "#bef1f3",
-    300: "#7fe6eb",
-    400: "#3fd9e1",
-    500: "#0f868b",
-    // Auxalia petrol
-    600: "#0a646b",
-    700: "#064952",
-    800: "#033539",
-    900: "#011f22"
-  },
-  // Supporting Colors
-  "auxalia-orange": "#dc6b39",
-  "auxalia-yellow": "#cfd12d",
-  "auxalia-red": "#93383a",
-  "auxalia-cyan": "#abbfbd"
+    50: "#F5F7F9",
+    100: "#EDF6FB",
+    200: "#C0D6E6",
+    300: "#204760",
+    400: "#1C3D52",
+    500: "#00263E",
+    600: "#001928"
+  }
 };
 var preset = {
   darkMode: "class",
   theme: {
     extend: {
       fontFamily: {
-        display: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"],
-        body: ['"Weissenhof Grotesk"', '"Calibri"', "sans-serif"]
+        sans: ["Inter", "sans-serif"],
+        display: ["Inter", "sans-serif"],
+        body: ["Inter", "sans-serif"]
       },
       colors: {
+        // ─── Brand semantic tokens (map to CSS vars in tokens.css) ───
         primary: "var(--color-primary)",
         "primary-hover": "var(--color-primary-hover)",
         "primary-foreground": "var(--color-primary-foreground)",
@@ -7399,27 +7327,42 @@ var preset = {
         destructive: "var(--color-destructive)",
         "destructive-hover": "var(--color-destructive-hover)",
         "destructive-foreground": "var(--color-destructive-foreground)",
+        "destructive-background": "var(--color-destructive-background)",
+        success: "var(--color-success)",
+        "success-foreground": "var(--color-success-foreground)",
+        "success-background": "var(--color-success-background)",
+        warning: "var(--color-warning)",
+        "warning-foreground": "var(--color-warning-foreground)",
+        "warning-background": "var(--color-warning-background)",
+        info: "var(--color-info)",
+        "info-foreground": "var(--color-info-foreground)",
+        // ─── Border tokens ───────────────────────────────────────────
         border: "var(--color-border)",
         "border-input": "var(--color-border-input)",
-        // Auxalia specific colors for direct use
-        "auxalia-green": auxaliaColors["auxalia-green"],
-        "auxalia-blue": auxaliaColors["auxalia-blue"],
-        "auxalia-petrol": auxaliaColors["auxalia-petrol"],
-        // Background surface tokens (bg-card, bg-hero, bg-popover, bg-card-hover)
-        card: "var(--card)",
-        "card-hover": "var(--card-hover)",
+        // ─── Surface / background tokens ─────────────────────────────
+        card: "var(--color-card)",
+        "card-hover": "var(--color-card-hover)",
         hero: "var(--color-bg-hero)",
-        popover: "var(--popover)",
-        // Semantic text tokens — non-conflicting names so default palette is preserved
-        // Use as: text-content, text-dim, text-muted
+        popover: "var(--color-popover)",
+        // ─── Text tokens (non-conflicting names) ─────────────────────
+        // Usage: text-content, text-dim, text-muted
         content: "var(--color-text)",
         dim: "var(--color-text-secondary)",
-        muted: "var(--color-text-muted)"
+        muted: "var(--color-text-muted)",
+        // ─── Static palette (for precise palette-level overrides) ─────
+        ...auxaliaColors
+      },
+      borderRadius: {
+        sm: "var(--radius-sm)",
+        md: "var(--radius-md)",
+        lg: "var(--radius-lg)",
+        xl: "var(--radius-xl)",
+        full: "var(--radius-full)"
       },
       backgroundImage: {
         "gradient-radial-green": "radial-gradient(circle at 20% 20%, rgba(167, 213, 0, 0.15), transparent 35%)",
-        "gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(62, 104, 151, 0.1), transparent 40%)",
-        "gradient-glow": "linear-gradient(to bottom right, rgba(6, 182, 212, 0.1), transparent, rgba(255, 255, 255, 0.05))"
+        "gradient-radial-blue": "radial-gradient(circle at 80% 0%, rgba(0, 38, 62, 0.1), transparent 40%)",
+        "gradient-glow": "linear-gradient(to bottom right, rgba(0, 38, 62, 0.1), transparent, rgba(255, 255, 255, 0.05))"
       }
     }
   }
@@ -7428,92 +7371,67 @@ var tailwind_preset_default = preset;
 
 // src/lib/tokens.ts
 var AuxaliaTokens = {
-  // PRIMARY: BRAND GREEN
+  // ─── PRIMARY: BRAND GREEN ─────────────────────────────────────────
   primary: {
-    50: "#f8fbf0",
-    100: "#f0f7e1",
-    200: "#ddf0c0",
-    300: "#c3e88a",
-    400: "#a7d500",
-    // Main brand color
-    500: "#93b800",
+    50: "#F8FBF0",
+    100: "#F0F7E1",
+    200: "#DDF0C0",
+    300: "#C3E88A",
+    400: "#A7D500",
+    500: "#8DB800",
     600: "#749400",
-    700: "#5a7600",
-    800: "#3d5000",
-    900: "#1f2800",
-    default: "#a7d500"
+    700: "#5A7600",
+    800: "#3D5000",
+    900: "#283400",
+    default: "#A7D500"
   },
-  // SECONDARY: DARK BLUE
+  // ─── SECONDARY: DARK BLUE ─────────────────────────────────────────
   secondary: {
-    50: "#f0f4f8",
-    100: "#e0eaf3",
-    200: "#c0d6e6",
-    300: "#8fb3d1",
-    400: "#5c8fb5",
-    500: "#3e6897",
-    // Main secondary color
-    600: "#2d5080",
-    700: "#1f3860",
-    800: "#142a47",
-    900: "#0a1628",
-    default: "#3e6897"
-  },
-  // ACCENT: PETROL GREEN
-  accent: {
-    50: "#f0fbfc",
-    100: "#dff8f9",
-    200: "#bef1f3",
-    300: "#7fe6eb",
-    400: "#3fd9e1",
-    500: "#0f868b",
-    // Main accent color (petrol)
-    600: "#0a646b",
-    700: "#064952",
-    800: "#033539",
-    900: "#011f22",
-    default: "#0f868b"
+    50: "#F5F7F9",
+    100: "#EDF6FB",
+    200: "#C0D6E6",
+    300: "#204760",
+    400: "#1C3D52",
+    500: "#00263E",
+    600: "#001928",
+    default: "#00263E"
   },
-  // SUPPORTING COLORS
-  supporting: {
-    orange: "#dc6b39",
-    yellow: "#cfd12d",
-    red: "#93383a",
-    cyan: "#abbfbd"
-  },
-  // NEUTRAL COLORS
+  // ─── NEUTRAL ──────────────────────────────────────────────────────
   neutral: {
     white: "#ffffff",
     black: "#000000",
-    gray: {
-      50: "#f9f9f9",
-      100: "#f5f5f5",
-      200: "#e8e8e8",
-      300: "#d4d4d4",
-      400: "#a1a1a1",
-      500: "#808080",
-      600: "#666666",
-      700: "#4d4d4d",
-      800: "#333333",
-      900: "#1a1a1a"
+    surface: {
+      50: "#F0F4F8",
+      100: "#DDE3E7",
+      200: "#131927"
+    },
+    text: {
+      300: "#131927",
+      200: "#4F697C",
+      100: "#9B9DB0"
     }
   },
-  // SEMANTIC COLORS
+  // ─── SEMANTIC COLORS ──────────────────────────────────────────────
+  // Mirror of the CSS --color-{name} tokens (light-mode values)
   semantic: {
-    success: "#1da842",
-    // Green from palette
-    warning: "#cfd12d",
-    // Yellow from palette
-    error: "#93383a",
-    // Red from palette
-    info: "#3e98d0"
-    // Light blue
-  },
-  // STATES
-  states: {
-    hover: "opacity-90",
-    active: "opacity-100",
-    disabled: "opacity-50",
-    focus: "ring-2 ring-primary/50"
+    success: "#22C55E",
+    // hsl(142 71% 45%)
+    successForeground: "#ffffff",
+    successBackground: "#E1F5EE",
+    // hsl(159 50% 92%)
+    warning: "#F59E0B",
+    // hsl(38 92% 50%)
+    warningForeground: "#000000",
+    warningBackground: "#FEF3C7",
+    // hsl(48 96% 89%)
+    destructive: "#FF383C",
+    // hsl(359 100% 61%)
+    destructiveForeground: "#ffffff",
+    destructiveBackground: "#FCEBEB",
+    // hsl(0 74% 95%)
+    info: "#1C3D52",
+    // hsl(203 49% 22%)
+    infoForeground: "#ffffff"
   }
 };
 // Annotate the CommonJS export names for ESM import in node: