@mdigital_ui/ui 0.4.1 → 0.4.3

package/styles/global.css

@@ -1688,6 +1688,9 @@
   .cursor-text {
     cursor: text;
   }
+  .touch-manipulation {
+    touch-action: manipulation;
+  }
   .touch-none {
     touch-action: none;
   }
@@ -1733,12 +1736,6 @@
   .grid-cols-\[1fr_auto_1fr\] {
     grid-template-columns: 1fr auto 1fr;
   }
-  .grid-rows-\[0fr\] {
-    grid-template-rows: 0fr;
-  }
-  .grid-rows-\[1fr\] {
-    grid-template-rows: 1fr;
-  }
   .flex-col {
     flex-direction: column;
   }
@@ -1955,14 +1952,6 @@
       border-bottom-width: calc(0px * calc(1 - var(--tw-divide-y-reverse)));
     }
   }
-  .divide-accent\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-      }
-    }
-  }
   .divide-border {
     :where(& > :not(:last-child)) {
       border-color: var(--color-border);
@@ -1984,54 +1973,6 @@
       }
     }
   }
-  .divide-error\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-error) 20%, transparent);
-      }
-    }
-  }
-  .divide-info\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-info) 20%, transparent);
-      }
-    }
-  }
-  .divide-primary\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
-    }
-  }
-  .divide-secondary\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-      }
-    }
-  }
-  .divide-success\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-      }
-    }
-  }
-  .divide-warning\/20 {
-    :where(& > :not(:last-child)) {
-      border-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        border-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-      }
-    }
-  }
   .self-center {
     align-self: center;
   }
@@ -2142,10 +2083,6 @@
     border-left-style: var(--tw-border-style);
     border-left-width: 4px;
   }
-  .border-l-6 {
-    border-left-style: var(--tw-border-style);
-    border-left-width: 6px;
-  }
   .border-dashed {
     --tw-border-style: dashed;
     border-style: dashed;
@@ -2162,18 +2099,6 @@
     --tw-border-style: solid;
     border-style: solid;
   }
-  .\!border-error {
-    border-color: var(--color-error) !important;
-  }
-  .\!border-info {
-    border-color: var(--color-info) !important;
-  }
-  .\!border-success {
-    border-color: var(--color-success) !important;
-  }
-  .\!border-warning {
-    border-color: var(--color-warning) !important;
-  }
   .border-accent {
     border-color: var(--color-accent);
   }
@@ -2189,27 +2114,9 @@
       border-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
     }
   }
-  .border-accent\/50 {
-    border-color: color-mix(in srgb, oklch(80% 0.1737 67) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
-    }
-  }
-  .border-accent\/60 {
-    border-color: color-mix(in srgb, oklch(80% 0.1737 67) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-accent) 60%, transparent);
-    }
-  }
   .border-border {
     border-color: var(--color-border);
   }
-  .border-border\/30 {
-    border-color: color-mix(in srgb, oklch(93% 0 0) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-border) 30%, transparent);
-    }
-  }
   .border-border\/50 {
     border-color: color-mix(in srgb, oklch(93% 0 0) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2240,12 +2147,6 @@
       border-color: color-mix(in oklab, var(--color-error) 50%, transparent);
     }
   }
-  .border-error\/60 {
-    border-color: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-error) 60%, transparent);
-    }
-  }
   .border-info {
     border-color: var(--color-info);
   }
@@ -2261,18 +2162,6 @@
       border-color: color-mix(in oklab, var(--color-info) 30%, transparent);
     }
   }
-  .border-info\/50 {
-    border-color: color-mix(in srgb, oklch(60% 0.19 255) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-info) 50%, transparent);
-    }
-  }
-  .border-info\/60 {
-    border-color: color-mix(in srgb, oklch(60% 0.19 255) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-info) 60%, transparent);
-    }
-  }
   .border-primary {
     border-color: var(--color-primary);
   }
@@ -2288,18 +2177,6 @@
       border-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
     }
   }
-  .border-primary\/50 {
-    border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-    }
-  }
-  .border-primary\/60 {
-    border-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .border-secondary {
     border-color: var(--color-secondary);
   }
@@ -2315,16 +2192,25 @@
       border-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
     }
   }
-  .border-secondary\/50 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 50%, transparent);
+  .border-slot {
+    border-color: var(--_c-border);
+  }
+  .border-slot-20 {
+    border-color: var(--_c-border);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklch, var(--_c-border) 20%, transparent);
+    }
+  }
+  .border-slot-30 {
+    border-color: var(--_c-border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+      border-color: color-mix(in oklch, var(--_c-border) 30%, transparent);
     }
   }
-  .border-secondary\/60 {
-    border-color: color-mix(in srgb, oklch(50% 0.05 240) 60%, transparent);
+  .border-slot-50 {
+    border-color: var(--_c-border);
     @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
+      border-color: color-mix(in oklch, var(--_c-border) 50%, transparent);
     }
   }
   .border-success {
@@ -2342,27 +2228,6 @@
       border-color: color-mix(in oklab, var(--color-success) 30%, transparent);
     }
   }
-  .border-success\/50 {
-    border-color: color-mix(in srgb, oklch(70% 0.2 145) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-success) 50%, transparent);
-    }
-  }
-  .border-success\/60 {
-    border-color: color-mix(in srgb, oklch(70% 0.2 145) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-success) 60%, transparent);
-    }
-  }
-  .border-surface {
-    border-color: var(--color-surface);
-  }
-  .border-text-primary {
-    border-color: var(--color-text-primary);
-  }
-  .border-text-secondary {
-    border-color: var(--color-text-secondary);
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -2381,44 +2246,11 @@
       border-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
     }
   }
-  .border-warning\/50 {
-    border-color: color-mix(in srgb, oklch(75% 0.15 85) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-warning) 50%, transparent);
-    }
-  }
-  .border-warning\/60 {
-    border-color: color-mix(in srgb, oklch(75% 0.15 85) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      border-color: color-mix(in oklab, var(--color-warning) 60%, transparent);
-    }
-  }
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .border-l-accent {
-    border-left-color: var(--color-accent);
-  }
-  .border-l-border {
-    border-left-color: var(--color-border);
-  }
-  .border-l-error {
-    border-left-color: var(--color-error);
-  }
-  .border-l-info {
-    border-left-color: var(--color-info);
-  }
-  .border-l-primary {
-    border-left-color: var(--color-primary);
-  }
-  .border-l-secondary {
-    border-left-color: var(--color-secondary);
-  }
-  .border-l-success {
-    border-left-color: var(--color-success);
-  }
-  .border-l-warning {
-    border-left-color: var(--color-warning);
+  .border-l-slot {
+    border-left-color: var(--_c-border);
   }
   .bg-accent {
     background-color: var(--color-accent);
@@ -2441,66 +2273,12 @@
       background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
     }
   }
-  .bg-accent\/20 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
-  .bg-accent\/30 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 30%, transparent);
-    }
-  }
-  .bg-accent\/50 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
-    }
-  }
-  .bg-accent\/60 {
-    background-color: color-mix(in srgb, oklch(80% 0.1737 67) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-accent) 60%, transparent);
-    }
-  }
   .bg-background {
     background-color: var(--color-background);
   }
   .bg-background-secondary {
     background-color: var(--color-background-secondary);
   }
-  .bg-black\/10 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 10%, transparent);
-    }
-  }
-  .bg-black\/20 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 20%, transparent);
-    }
-  }
-  .bg-black\/30 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
-    }
-  }
-  .bg-black\/40 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 40%, transparent);
-    }
-  }
-  .bg-black\/50 {
-    background-color: color-mix(in srgb, oklch(0% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 50%, transparent);
-    }
-  }
   .bg-blue-600 {
     background-color: var(--color-blue-600);
   }
@@ -2510,12 +2288,6 @@
   .bg-border-primary {
     background-color: var(--color-border-primary);
   }
-  .bg-border\/20 {
-    background-color: color-mix(in srgb, oklch(93% 0 0) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-border) 20%, transparent);
-    }
-  }
   .bg-border\/50 {
     background-color: color-mix(in srgb, oklch(93% 0 0) 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2555,18 +2327,6 @@
       background-color: color-mix(in oklab, var(--color-error) 30%, transparent);
     }
   }
-  .bg-error\/50 {
-    background-color: color-mix(in srgb, oklch(63% 0.22 25) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-error) 50%, transparent);
-    }
-  }
-  .bg-error\/60 {
-    background-color: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-error) 60%, transparent);
-    }
-  }
   .bg-gray-50 {
     background-color: var(--color-gray-50);
   }
@@ -2600,26 +2360,38 @@
       background-color: color-mix(in oklab, var(--color-info) 20%, transparent);
     }
   }
-  .bg-info\/30 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 30%, transparent);
+  .bg-overlay {
+    background-color: var(--color-overlay);
+  }
+  .bg-overlay\/20 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 30%, transparent);
+      background-color: color-mix(in oklab, var(--color-overlay) 20%, transparent);
     }
   }
-  .bg-info\/50 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 50%, transparent);
+  .bg-overlay\/30 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 50%, transparent);
+      background-color: color-mix(in oklab, var(--color-overlay) 30%, transparent);
     }
   }
-  .bg-info\/60 {
-    background-color: color-mix(in srgb, oklch(60% 0.19 255) 60%, transparent);
+  .bg-overlay\/40 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-info) 60%, transparent);
+      background-color: color-mix(in oklab, var(--color-overlay) 40%, transparent);
     }
   }
-  .bg-overlay {
-    background-color: var(--color-overlay);
+  .bg-overlay\/50 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 50%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-overlay) 50%, transparent);
+    }
+  }
+  .bg-overlay\/80 {
+    background-color: color-mix(in srgb, oklch(0% 0 0 / 50%) 80%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-overlay) 80%, transparent);
+    }
   }
   .bg-primary {
     background-color: var(--color-primary);
@@ -2654,24 +2426,6 @@
       background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
     }
   }
-  .bg-primary\/30 {
-    background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 30%, transparent);
-    }
-  }
-  .bg-primary\/50 {
-    background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 50%, transparent);
-    }
-  }
-  .bg-primary\/60 {
-    background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .bg-red-600 {
     background-color: var(--color-red-600);
   }
@@ -2696,28 +2450,25 @@
       background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
     }
   }
-  .bg-secondary\/20 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
+  .bg-slot {
+    background-color: var(--_c-bg);
   }
-  .bg-secondary\/30 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 30%, transparent);
+  .bg-slot-10 {
+    background-color: var(--_c);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 30%, transparent);
+      background-color: color-mix(in oklch, var(--_c) 10%, transparent);
     }
   }
-  .bg-secondary\/50 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 50%, transparent);
+  .bg-slot-20 {
+    background-color: var(--_c);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 50%, transparent);
+      background-color: color-mix(in oklch, var(--_c) 20%, transparent);
     }
   }
-  .bg-secondary\/60 {
-    background-color: color-mix(in srgb, oklch(50% 0.05 240) 60%, transparent);
+  .bg-slot-50 {
+    background-color: var(--_c);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-secondary) 60%, transparent);
+      background-color: color-mix(in oklch, var(--_c) 50%, transparent);
     }
   }
   .bg-success {
@@ -2735,30 +2486,6 @@
       background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
     }
   }
-  .bg-success\/20 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 20%, transparent);
-    }
-  }
-  .bg-success\/30 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 30%, transparent);
-    }
-  }
-  .bg-success\/50 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 50%, transparent);
-    }
-  }
-  .bg-success\/60 {
-    background-color: color-mix(in srgb, oklch(70% 0.2 145) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-success) 60%, transparent);
-    }
-  }
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -2789,9 +2516,6 @@
   .bg-text-primary {
     background-color: var(--color-text-primary);
   }
-  .bg-text-secondary {
-    background-color: var(--color-text-secondary);
-  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -2810,30 +2534,6 @@
       background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
     }
   }
-  .bg-warning\/20 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
-    }
-  }
-  .bg-warning\/30 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 30%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 30%, transparent);
-    }
-  }
-  .bg-warning\/50 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 50%, transparent);
-    }
-  }
-  .bg-warning\/60 {
-    background-color: color-mix(in srgb, oklch(75% 0.15 85) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-warning) 60%, transparent);
-    }
-  }
   .bg-white\/80 {
     background-color: color-mix(in srgb, oklch(100% 0 0) 80%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -2926,24 +2626,6 @@
   .stroke-accent {
     stroke: var(--color-accent);
   }
-  .stroke-accent\/10 {
-    stroke: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-accent) 10%, transparent);
-    }
-  }
-  .stroke-accent\/20 {
-    stroke: color-mix(in srgb, oklch(80% 0.1737 67) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-accent) 20%, transparent);
-    }
-  }
-  .stroke-accent\/60 {
-    stroke: color-mix(in srgb, oklch(80% 0.1737 67) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-accent) 60%, transparent);
-    }
-  }
   .stroke-border {
     stroke: var(--color-border);
   }
@@ -2956,144 +2638,21 @@
   .stroke-error {
     stroke: var(--color-error);
   }
-  .stroke-error\/10 {
-    stroke: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-error) 10%, transparent);
-    }
-  }
-  .stroke-error\/20 {
-    stroke: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-error) 20%, transparent);
-    }
-  }
-  .stroke-error\/60 {
-    stroke: color-mix(in srgb, oklch(63% 0.22 25) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-error) 60%, transparent);
-    }
-  }
   .stroke-info {
     stroke: var(--color-info);
   }
-  .stroke-info\/10 {
-    stroke: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-info) 10%, transparent);
-    }
-  }
-  .stroke-info\/20 {
-    stroke: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-info) 20%, transparent);
-    }
-  }
-  .stroke-info\/60 {
-    stroke: color-mix(in srgb, oklch(60% 0.19 255) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-info) 60%, transparent);
-    }
-  }
   .stroke-primary {
     stroke: var(--color-primary);
   }
-  .stroke-primary\/10 {
-    stroke: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-primary) 10%, transparent);
-    }
-  }
-  .stroke-primary\/20 {
-    stroke: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-primary) 20%, transparent);
-    }
-  }
-  .stroke-primary\/60 {
-    stroke: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-primary) 60%, transparent);
-    }
-  }
   .stroke-secondary {
     stroke: var(--color-secondary);
   }
-  .stroke-secondary\/10 {
-    stroke: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-    }
-  }
-  .stroke-secondary\/20 {
-    stroke: color-mix(in srgb, oklch(50% 0.05 240) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-secondary) 20%, transparent);
-    }
-  }
-  .stroke-secondary\/60 {
-    stroke: color-mix(in srgb, oklch(50% 0.05 240) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-secondary) 60%, transparent);
-    }
-  }
   .stroke-success {
     stroke: var(--color-success);
   }
-  .stroke-success\/10 {
-    stroke: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-success) 10%, transparent);
-    }
-  }
-  .stroke-success\/20 {
-    stroke: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-success) 20%, transparent);
-    }
-  }
-  .stroke-success\/60 {
-    stroke: color-mix(in srgb, oklch(70% 0.2 145) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-success) 60%, transparent);
-    }
-  }
-  .stroke-surface {
-    stroke: var(--color-surface);
-  }
-  .stroke-surface\/50 {
-    stroke: color-mix(in srgb, oklch(96% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-surface) 50%, transparent);
-    }
-  }
-  .stroke-surface\/80 {
-    stroke: color-mix(in srgb, oklch(96% 0 0) 80%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-surface) 80%, transparent);
-    }
-  }
   .stroke-warning {
     stroke: var(--color-warning);
   }
-  .stroke-warning\/10 {
-    stroke: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-warning) 10%, transparent);
-    }
-  }
-  .stroke-warning\/20 {
-    stroke: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-warning) 20%, transparent);
-    }
-  }
-  .stroke-warning\/60 {
-    stroke: color-mix(in srgb, oklch(75% 0.15 85) 60%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      stroke: color-mix(in oklab, var(--color-warning) 60%, transparent);
-    }
-  }
   .object-contain {
     object-fit: contain;
   }
@@ -3591,15 +3150,6 @@
   .text-accent {
     color: var(--color-accent);
   }
-  .text-accent-foreground {
-    color: var(--color-accent-foreground);
-  }
-  .text-accent-foreground\/50 {
-    color: color-mix(in srgb, oklch(15% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-accent-foreground) 50%, transparent);
-    }
-  }
   .text-background {
     color: var(--color-background);
   }
@@ -3621,12 +3171,6 @@
   .text-error-foreground {
     color: var(--color-error-foreground);
   }
-  .text-error-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-error-foreground) 50%, transparent);
-    }
-  }
   .text-gray-400 {
     color: var(--color-gray-400);
   }
@@ -3645,17 +3189,8 @@
   .text-info {
     color: var(--color-info);
   }
-  .text-info-foreground {
-    color: var(--color-info-foreground);
-  }
-  .text-info-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-info-foreground) 50%, transparent);
-    }
-  }
-  .text-inherit {
-    color: inherit;
+  .text-inherit {
+    color: inherit;
   }
   .text-orange-500 {
     color: var(--color-orange-500);
@@ -3669,12 +3204,6 @@
   .text-primary-foreground {
     color: var(--color-primary-foreground);
   }
-  .text-primary-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-primary-foreground) 50%, transparent);
-    }
-  }
   .text-purple-500 {
     color: var(--color-purple-500);
   }
@@ -3687,14 +3216,11 @@
   .text-secondary {
     color: var(--color-secondary);
   }
-  .text-secondary-foreground {
-    color: var(--color-secondary-foreground);
+  .text-slot {
+    color: var(--_c);
   }
-  .text-secondary-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-secondary-foreground) 50%, transparent);
-    }
+  .text-slot-fg {
+    color: var(--_c-fg);
   }
   .text-success {
     color: var(--color-success);
@@ -3702,12 +3228,6 @@
   .text-success-foreground {
     color: var(--color-success-foreground);
   }
-  .text-success-foreground\/50 {
-    color: color-mix(in srgb, oklch(100% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-success-foreground) 50%, transparent);
-    }
-  }
   .text-text-disabled {
     color: var(--color-text-disabled);
   }
@@ -3726,12 +3246,6 @@
   .text-warning-foreground {
     color: var(--color-warning-foreground);
   }
-  .text-warning-foreground\/50 {
-    color: color-mix(in srgb, oklch(15% 0 0) 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-warning-foreground) 50%, transparent);
-    }
-  }
   .text-white {
     color: var(--color-white);
   }
@@ -3865,6 +3379,9 @@
       --tw-ring-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
     }
   }
+  .ring-offset-background {
+    --tw-ring-offset-color: var(--color-background);
+  }
   .outline-hidden {
     --tw-outline-style: none;
     outline-style: none;
@@ -3927,11 +3444,6 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
-  .transition-\[grid-template-rows\] {
-    transition-property: grid-template-rows;
-    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
-    transition-duration: var(--tw-duration, var(--default-transition-duration));
-  }
   .transition-\[left\] {
     transition-property: left;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -3952,6 +3464,11 @@
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
     transition-duration: var(--tw-duration, var(--default-transition-duration));
   }
+  .transition-\[stroke-dashoffset\] {
+    transition-property: stroke-dashoffset;
+    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
+    transition-duration: var(--tw-duration, var(--default-transition-duration));
+  }
   .transition-\[top\,font-size\,color\] {
     transition-property: top,font-size,color;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -4054,6 +3571,102 @@
     --tw-enter-scale: calc(95*1%);
     --tw-enter-scale: .95;
   }
+  .\[--_c-bg\:var\(--color-accent\)\] {
+    --_c-bg: var(--color-accent);
+  }
+  .\[--_c-bg\:var\(--color-error\)\] {
+    --_c-bg: var(--color-error);
+  }
+  .\[--_c-bg\:var\(--color-info\)\] {
+    --_c-bg: var(--color-info);
+  }
+  .\[--_c-bg\:var\(--color-primary\)\] {
+    --_c-bg: var(--color-primary);
+  }
+  .\[--_c-bg\:var\(--color-secondary\)\] {
+    --_c-bg: var(--color-secondary);
+  }
+  .\[--_c-bg\:var\(--color-success\)\] {
+    --_c-bg: var(--color-success);
+  }
+  .\[--_c-bg\:var\(--color-surface\)\] {
+    --_c-bg: var(--color-surface);
+  }
+  .\[--_c-bg\:var\(--color-warning\)\] {
+    --_c-bg: var(--color-warning);
+  }
+  .\[--_c-border\:var\(--color-accent\)\] {
+    --_c-border: var(--color-accent);
+  }
+  .\[--_c-border\:var\(--color-border\)\] {
+    --_c-border: var(--color-border);
+  }
+  .\[--_c-border\:var\(--color-error\)\] {
+    --_c-border: var(--color-error);
+  }
+  .\[--_c-border\:var\(--color-info\)\] {
+    --_c-border: var(--color-info);
+  }
+  .\[--_c-border\:var\(--color-primary\)\] {
+    --_c-border: var(--color-primary);
+  }
+  .\[--_c-border\:var\(--color-secondary\)\] {
+    --_c-border: var(--color-secondary);
+  }
+  .\[--_c-border\:var\(--color-success\)\] {
+    --_c-border: var(--color-success);
+  }
+  .\[--_c-border\:var\(--color-warning\)\] {
+    --_c-border: var(--color-warning);
+  }
+  .\[--_c-fg\:var\(--color-accent-foreground\)\] {
+    --_c-fg: var(--color-accent-foreground);
+  }
+  .\[--_c-fg\:var\(--color-error-foreground\)\] {
+    --_c-fg: var(--color-error-foreground);
+  }
+  .\[--_c-fg\:var\(--color-info-foreground\)\] {
+    --_c-fg: var(--color-info-foreground);
+  }
+  .\[--_c-fg\:var\(--color-primary-foreground\)\] {
+    --_c-fg: var(--color-primary-foreground);
+  }
+  .\[--_c-fg\:var\(--color-secondary-foreground\)\] {
+    --_c-fg: var(--color-secondary-foreground);
+  }
+  .\[--_c-fg\:var\(--color-success-foreground\)\] {
+    --_c-fg: var(--color-success-foreground);
+  }
+  .\[--_c-fg\:var\(--color-text-primary\)\] {
+    --_c-fg: var(--color-text-primary);
+  }
+  .\[--_c-fg\:var\(--color-warning-foreground\)\] {
+    --_c-fg: var(--color-warning-foreground);
+  }
+  .\[--_c\:var\(--color-accent\)\] {
+    --_c: var(--color-accent);
+  }
+  .\[--_c\:var\(--color-error\)\] {
+    --_c: var(--color-error);
+  }
+  .\[--_c\:var\(--color-info\)\] {
+    --_c: var(--color-info);
+  }
+  .\[--_c\:var\(--color-primary\)\] {
+    --_c: var(--color-primary);
+  }
+  .\[--_c\:var\(--color-secondary\)\] {
+    --_c: var(--color-secondary);
+  }
+  .\[--_c\:var\(--color-success\)\] {
+    --_c: var(--color-success);
+  }
+  .\[--_c\:var\(--color-text-primary\)\] {
+    --_c: var(--color-text-primary);
+  }
+  .\[--_c\:var\(--color-warning\)\] {
+    --_c: var(--color-warning);
+  }
   .\[--card-content-padding\:0\.5rem\] {
     --card-content-padding: 0.5rem;
   }
@@ -4130,39 +3743,14 @@
       translate: var(--tw-translate-x) var(--tw-translate-y);
     }
   }
-  .peer-checked\:bg-accent {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-accent);
-    }
-  }
   .peer-checked\:bg-error {
     &:is(:where(.peer):checked ~ *) {
       background-color: var(--color-error);
     }
   }
-  .peer-checked\:bg-info {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-info);
-    }
-  }
-  .peer-checked\:bg-primary {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-primary);
-    }
-  }
-  .peer-checked\:bg-secondary {
+  .peer-checked\:bg-slot {
     &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-secondary);
-    }
-  }
-  .peer-checked\:bg-success {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-success);
-    }
-  }
-  .peer-checked\:bg-warning {
-    &:is(:where(.peer):checked ~ *) {
-      background-color: var(--color-warning);
+      background-color: var(--_c-bg);
     }
   }
   .peer-focus\:top-1 {
@@ -4222,39 +3810,14 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .peer-focus-visible\:ring-accent {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-accent);
-    }
-  }
   .peer-focus-visible\:ring-error {
     &:is(:where(.peer):focus-visible ~ *) {
       --tw-ring-color: var(--color-error);
     }
   }
-  .peer-focus-visible\:ring-info {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-info);
-    }
-  }
-  .peer-focus-visible\:ring-primary {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-primary);
-    }
-  }
-  .peer-focus-visible\:ring-secondary {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-secondary);
-    }
-  }
-  .peer-focus-visible\:ring-success {
-    &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-success);
-    }
-  }
-  .peer-focus-visible\:ring-warning {
+  .peer-focus-visible\:ring-slot {
     &:is(:where(.peer):focus-visible ~ *) {
-      --tw-ring-color: var(--color-warning);
+      --tw-ring-color: var(--_c);
     }
   }
   .peer-focus-visible\:ring-offset-2 {
@@ -4365,116 +3928,25 @@
       padding-right: var(--spacing-4);
     }
   }
-  .checked\:border-accent {
-    &:checked {
-      border-color: var(--color-accent);
-    }
-  }
   .checked\:border-error {
     &:checked {
       border-color: var(--color-error);
     }
   }
-  .checked\:border-info {
+  .checked\:border-slot {
     &:checked {
-      border-color: var(--color-info);
-    }
-  }
-  .checked\:border-primary {
-    &:checked {
-      border-color: var(--color-primary);
-    }
-  }
-  .checked\:border-secondary {
-    &:checked {
-      border-color: var(--color-secondary);
-    }
-  }
-  .checked\:border-success {
-    &:checked {
-      border-color: var(--color-success);
-    }
-  }
-  .checked\:border-warning {
-    &:checked {
-      border-color: var(--color-warning);
-    }
-  }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-accent\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-accent));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      border-color: var(--_c-border);
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-error\)\] {
+  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--_c\)\] {
     &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-error));
+      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--_c));
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-info\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-info));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-primary\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-primary));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-secondary\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-secondary));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-success\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-success));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .checked\:shadow-\[inset_0_0_0_2px_var\(--color-background\)\,inset_0_0_0_13px_var\(--color-warning\)\] {
-    &:checked {
-      --tw-shadow: inset 0 0 0 2px var(--tw-shadow-color, var(--color-background)), inset 0 0 0 13px var(--tw-shadow-color, var(--color-warning));
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-    }
-  }
-  .indeterminate\:border-accent {
-    &:indeterminate {
-      border-color: var(--color-accent);
-    }
-  }
-  .indeterminate\:border-error {
-    &:indeterminate {
-      border-color: var(--color-error);
-    }
-  }
-  .indeterminate\:border-info {
+  .indeterminate\:border-slot {
     &:indeterminate {
-      border-color: var(--color-info);
-    }
-  }
-  .indeterminate\:border-primary {
-    &:indeterminate {
-      border-color: var(--color-primary);
-    }
-  }
-  .indeterminate\:border-secondary {
-    &:indeterminate {
-      border-color: var(--color-secondary);
-    }
-  }
-  .indeterminate\:border-success {
-    &:indeterminate {
-      border-color: var(--color-success);
-    }
-  }
-  .indeterminate\:border-warning {
-    &:indeterminate {
-      border-color: var(--color-warning);
+      border-color: var(--_c-border);
     }
   }
   .read-only\:cursor-default {
@@ -4520,27 +3992,6 @@
       }
     }
   }
-  .hover\:border-accent {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-accent);
-      }
-    }
-  }
-  .hover\:border-error {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-error);
-      }
-    }
-  }
-  .hover\:border-info {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-info);
-      }
-    }
-  }
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
@@ -4558,41 +4009,10 @@
       }
     }
   }
-  .hover\:border-secondary {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-secondary);
-      }
-    }
-  }
-  .hover\:border-success {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-success);
-      }
-    }
-  }
-  .hover\:border-text-primary {
+  .hover\:border-slot {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-text-primary);
-      }
-    }
-  }
-  .hover\:border-warning {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-warning);
-      }
-    }
-  }
-  .hover\:bg-accent\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(80% 0.1737 67) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-accent) 5%, transparent);
-        }
+        border-color: var(--_c-border);
       }
     }
   }
@@ -4653,16 +4073,6 @@
       }
     }
   }
-  .hover\:bg-error\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(63% 0.22 25) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-error) 5%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-error\/10 {
     &:hover {
       @media (hover: hover) {
@@ -4707,16 +4117,6 @@
       }
     }
   }
-  .hover\:bg-info\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(60% 0.19 255) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-info) 5%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-info\/10 {
     &:hover {
       @media (hover: hover) {
@@ -4794,16 +4194,6 @@
       }
     }
   }
-  .hover\:bg-secondary\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(50% 0.05 240) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-secondary) 5%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-secondary\/10 {
     &:hover {
       @media (hover: hover) {
@@ -4834,12 +4224,32 @@
       }
     }
   }
-  .hover\:bg-success\/5 {
+  .hover\:bg-slot-10 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--_c);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklch, var(--_c) 10%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-slot-20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(70% 0.2 145) 5%, transparent);
+        background-color: var(--_c);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-success) 5%, transparent);
+          background-color: color-mix(in oklch, var(--_c) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-slot-90 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--_c-bg);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklch, var(--_c-bg) 90%, var(--color-background));
         }
       }
     }
@@ -4908,16 +4318,6 @@
       }
     }
   }
-  .hover\:bg-warning\/5 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, oklch(75% 0.15 85) 5%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-warning) 5%, transparent);
-        }
-      }
-    }
-  }
   .hover\:bg-warning\/10 {
     &:hover {
       @media (hover: hover) {
@@ -5040,6 +4440,23 @@
       }
     }
   }
+  .hover\:text-slot {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--_c);
+      }
+    }
+  }
+  .hover\:text-slot-80 {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--_c);
+        @supports (color: color-mix(in lab, red, red)) {
+          color: color-mix(in oklch, var(--_c) 80%, transparent);
+        }
+      }
+    }
+  }
   .hover\:text-success {
     &:hover {
       @media (hover: hover) {
@@ -5134,26 +4551,6 @@
       }
     }
   }
-  .focus\:\!border-error {
-    &:focus {
-      border-color: var(--color-error) !important;
-    }
-  }
-  .focus\:\!border-info {
-    &:focus {
-      border-color: var(--color-info) !important;
-    }
-  }
-  .focus\:\!border-success {
-    &:focus {
-      border-color: var(--color-success) !important;
-    }
-  }
-  .focus\:\!border-warning {
-    &:focus {
-      border-color: var(--color-warning) !important;
-    }
-  }
   .focus\:border-error {
     &:focus {
       border-color: var(--color-error);
@@ -5179,250 +4576,184 @@
       border-color: var(--color-warning);
     }
   }
-  .focus\:bg-accent\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-error\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-info\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-info) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-primary\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-secondary\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
-      }
-    }
-  }
-  .focus\:bg-success\/10 {
-    &:focus {
-      background-color: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
-      }
-    }
-  }
   .focus\:bg-surface {
     &:focus {
       background-color: var(--color-surface);
     }
   }
-  .focus\:bg-warning\/10 {
+  .focus\:ring-2 {
     &:focus {
-      background-color: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
-      }
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus\:text-accent {
+  .focus\:ring-current {
     &:focus {
-      color: var(--color-accent);
+      --tw-ring-color: currentcolor;
     }
   }
-  .focus\:text-error {
+  .focus\:ring-primary {
     &:focus {
-      color: var(--color-error);
+      --tw-ring-color: var(--color-primary);
     }
   }
-  .focus\:text-info {
+  .focus\:ring-offset-1 {
     &:focus {
-      color: var(--color-info);
+      --tw-ring-offset-width: 1px;
+      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
     }
   }
-  .focus\:text-primary {
+  .focus\:outline-hidden {
     &:focus {
-      color: var(--color-primary);
+      --tw-outline-style: none;
+      outline-style: none;
+      @media (forced-colors: active) {
+        outline: 2px solid transparent;
+        outline-offset: 2px;
+      }
     }
   }
-  .focus\:text-secondary {
+  .focus\:outline-none {
     &:focus {
-      color: var(--color-secondary);
+      --tw-outline-style: none;
+      outline-style: none;
     }
   }
-  .focus\:text-success {
-    &:focus {
-      color: var(--color-success);
+  .focus-visible\:border-error {
+    &:focus-visible {
+      border-color: var(--color-error);
     }
   }
-  .focus\:text-warning {
-    &:focus {
-      color: var(--color-warning);
+  .focus-visible\:border-info {
+    &:focus-visible {
+      border-color: var(--color-info);
     }
   }
-  .focus\:ring-1 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .focus-visible\:border-primary {
+    &:focus-visible {
+      border-color: var(--color-primary);
     }
   }
-  .focus\:ring-2 {
-    &:focus {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  .focus-visible\:border-success {
+    &:focus-visible {
+      border-color: var(--color-success);
     }
   }
-  .focus\:ring-current {
-    &:focus {
-      --tw-ring-color: currentcolor;
+  .focus-visible\:border-warning {
+    &:focus-visible {
+      border-color: var(--color-warning);
     }
   }
-  .focus\:ring-error\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(63% 0.22 25) 20%, transparent);
+  .focus-visible\:bg-accent\/10 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, oklch(80% 0.1737 67) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-error) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-accent) 10%, transparent);
       }
     }
   }
-  .focus\:ring-info\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(60% 0.19 255) 20%, transparent);
+  .focus-visible\:bg-error\/10 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, oklch(63% 0.22 25) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-info) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-error) 10%, transparent);
       }
     }
   }
-  .focus\:ring-primary {
-    &:focus {
-      --tw-ring-color: var(--color-primary);
-    }
-  }
-  .focus\:ring-primary\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
+  .focus-visible\:bg-info\/10 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, oklch(60% 0.19 255) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-info) 10%, transparent);
       }
     }
   }
-  .focus\:ring-success\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(70% 0.2 145) 20%, transparent);
+  .focus-visible\:bg-primary\/10 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-success) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-primary) 10%, transparent);
       }
     }
   }
-  .focus\:ring-warning\/20 {
-    &:focus {
-      --tw-ring-color: color-mix(in srgb, oklch(75% 0.15 85) 20%, transparent);
+  .focus-visible\:bg-secondary\/10 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, oklch(50% 0.05 240) 10%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-warning) 20%, transparent);
+        background-color: color-mix(in oklab, var(--color-secondary) 10%, transparent);
       }
     }
   }
-  .focus\:ring-offset-1 {
-    &:focus {
-      --tw-ring-offset-width: 1px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus\:ring-offset-2 {
-    &:focus {
-      --tw-ring-offset-width: 2px;
-      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
-    }
-  }
-  .focus\:outline-hidden {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
-      @media (forced-colors: active) {
-        outline: 2px solid transparent;
-        outline-offset: 2px;
+  .focus-visible\:bg-success\/10 {
+    &:focus-visible {
+      background-color: color-mix(in srgb, oklch(70% 0.2 145) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-success) 10%, transparent);
       }
     }
   }
-  .focus\:outline-none {
-    &:focus {
-      --tw-outline-style: none;
-      outline-style: none;
+  .focus-visible\:bg-surface {
+    &:focus-visible {
+      background-color: var(--color-surface);
     }
   }
-  .focus-visible\:ring-1 {
+  .focus-visible\:bg-warning\/10 {
     &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      background-color: color-mix(in srgb, oklch(75% 0.15 85) 10%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-warning) 10%, transparent);
+      }
     }
   }
-  .focus-visible\:ring-2 {
+  .focus-visible\:text-accent {
     &:focus-visible {
-      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+      color: var(--color-accent);
     }
   }
-  .focus-visible\:ring-accent {
+  .focus-visible\:text-error {
     &:focus-visible {
-      --tw-ring-color: var(--color-accent);
+      color: var(--color-error);
     }
   }
-  .focus-visible\:ring-border {
+  .focus-visible\:text-info {
     &:focus-visible {
-      --tw-ring-color: var(--color-border);
+      color: var(--color-info);
     }
   }
-  .focus-visible\:ring-error {
+  .focus-visible\:text-primary {
     &:focus-visible {
-      --tw-ring-color: var(--color-error);
+      color: var(--color-primary);
     }
   }
-  .focus-visible\:ring-info {
+  .focus-visible\:text-secondary {
     &:focus-visible {
-      --tw-ring-color: var(--color-info);
+      color: var(--color-secondary);
     }
   }
-  .focus-visible\:ring-primary {
+  .focus-visible\:text-success {
     &:focus-visible {
-      --tw-ring-color: var(--color-primary);
+      color: var(--color-success);
     }
   }
-  .focus-visible\:ring-primary\/20 {
+  .focus-visible\:text-warning {
     &:focus-visible {
-      --tw-ring-color: color-mix(in srgb, oklch(60.29% 0.15 239.2065) 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
+      color: var(--color-warning);
     }
   }
-  .focus-visible\:ring-secondary {
+  .focus-visible\:ring-2 {
     &:focus-visible {
-      --tw-ring-color: var(--color-secondary);
+      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
+      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-visible\:ring-success {
+  .focus-visible\:ring-primary {
     &:focus-visible {
-      --tw-ring-color: var(--color-success);
+      --tw-ring-color: var(--color-primary);
     }
   }
-  .focus-visible\:ring-warning {
+  .focus-visible\:ring-slot {
     &:focus-visible {
-      --tw-ring-color: var(--color-warning);
+      --tw-ring-color: var(--_c);
     }
   }
   .focus-visible\:ring-offset-1 {
@@ -5483,11 +4814,6 @@
       cursor: not-allowed;
     }
   }
-  .disabled\:opacity-30 {
-    &:disabled {
-      opacity: 30%;
-    }
-  }
   .disabled\:opacity-50 {
     &:disabled {
       opacity: 50%;