@mdigital_ui/ui 0.2.2 → 0.2.3

package/dist/styles/global.css

@@ -20,9 +20,12 @@
     --color-gray-50: oklch(98% 0 0);
     --color-gray-100: oklch(96% 0 0);
     --color-gray-200: oklch(92% 0 0);
+    --color-gray-300: oklch(87% 0 0);
     --color-gray-400: oklch(71% 0 0);
+    --color-gray-500: oklch(55% 0 0);
     --color-gray-600: oklch(45% 0 0);
     --color-gray-700: oklch(35% 0 0);
+    --color-gray-800: oklch(25% 0 0);
     --color-gray-900: oklch(15% 0 0);
     --color-gray-950: oklch(10% 0 0);
     --color-black: oklch(0% 0 0);
@@ -84,30 +87,34 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: ui-sans-serif, system-ui, sans-serif;
     --default-mono-font-family: ui-monospace, 'SF Mono', monospace;
-    --color-primary: oklch(0.6029 0.15 239.2065);
-    --color-primary-hover: oklch(0.5029 0.2 239.2065);
-    --color-primary-active: oklch(0.4529 0.2 239.2065);
+    --color-primary: oklch(60.29% 0.15 239.2065);
+    --color-primary-hover: oklch(50.29% 0.2 239.2065);
+    --color-primary-active: oklch(45.29% 0.2 239.2065);
     --color-primary-foreground: oklch(100% 0 0);
     --color-secondary: oklch(50% 0.05 240);
     --color-secondary-hover: oklch(45% 0.06 240);
     --color-secondary-active: oklch(40% 0.07 240);
     --color-secondary-foreground: oklch(100% 0 0);
-    --color-accent: oklch(0.8 0.1737 67);
-    --color-accent-hover: oklch(0.75 0.237 67);
-    --color-accent-active: oklch(0.7 0.1937 67);
+    --color-accent: oklch(80% 0.1737 67);
+    --color-accent-hover: oklch(75% 0.237 67);
+    --color-accent-active: oklch(70% 0.1937 67);
     --color-accent-foreground: oklch(15% 0 0);
-    --color-success: oklch(0.7 0.2 145);
-    --color-success-hover: oklch(0.65 0.22 145);
-    --color-success-active: oklch(0.5 0.24 145);
+    --color-success: oklch(70% 0.2 145);
+    --color-success-hover: oklch(65% 0.22 145);
+    --color-success-active: oklch(50% 0.24 145);
+    --color-success-foreground: oklch(100% 0 0);
     --color-error: oklch(65% 0.2 25);
     --color-error-hover: oklch(75% 0.2 25);
     --color-error-active: oklch(80% 0.2 25);
+    --color-error-foreground: oklch(100% 0 0);
     --color-warning: oklch(75% 0.15 85);
     --color-warning-hover: oklch(70% 0.17 85);
     --color-warning-active: oklch(65% 0.19 85);
+    --color-warning-foreground: oklch(15% 0 0);
     --color-info: oklch(60% 0.19 255);
     --color-info-hover: oklch(55% 0.21 255);
     --color-info-active: oklch(50% 0.23 255);
+    --color-info-foreground: oklch(100% 0 0);
     --color-background: oklch(100% 0 0);
     --color-background-secondary: oklch(98% 0 0);
     --color-surface: oklch(96% 0 0);
@@ -129,14 +136,27 @@
     --input-height-md: 2.25rem;
     --input-height-lg: 2.75rem;
     --input-padding-x-xs: 0.5rem;
+    --input-padding-x-sm: 0.75rem;
+    --input-padding-x-md: 0.875rem;
     --input-padding-x-lg: 1.125rem;
+    --color-input-border: oklch(87% 0 0);
+    --color-input-border-focus: oklch(55% 0.25 255);
+    --color-input-border-error: oklch(60% 0.25 25);
+    --color-input-bg: oklch(100% 0 0);
+    --color-input-text: oklch(15% 0 0);
+    --color-input-placeholder: oklch(60% 0 0);
+    --overlay-stripe: oklch(100% 0 0 / 0.15);
     --textarea-min-height: 5rem;
     --textarea-padding-sm: 0.625rem;
     --textarea-padding-md: 0.6875rem;
     --textarea-padding-lg: 0.875rem;
     --select-height-xs: 1.75rem;
+    --select-height-sm: 2rem;
+    --select-height-md: 2.25rem;
     --select-height-lg: 2.75rem;
     --select-padding-x-xs: 0.5rem;
+    --select-padding-x-sm: 0.75rem;
+    --select-padding-x-md: 0.875rem;
     --select-padding-x-lg: 1.125rem;
     --checkbox-size-xs: 0.875rem;
     --checkbox-size-sm: 1rem;
@@ -761,6 +781,9 @@
   .h-\[var\(--checkbox-size-sm\)\] {
     height: var(--checkbox-size-sm);
   }
+  .h-\[var\(--checkbox-size-xs\)\] {
+    height: var(--checkbox-size-xs);
+  }
   .h-\[var\(--input-height-lg\)\] {
     height: var(--input-height-lg);
   }
@@ -773,6 +796,21 @@
   .h-\[var\(--input-height-xl\)\] {
     height: var(--input-height-xl);
   }
+  .h-\[var\(--input-height-xs\)\] {
+    height: var(--input-height-xs);
+  }
+  .h-\[var\(--select-height-lg\)\] {
+    height: var(--select-height-lg);
+  }
+  .h-\[var\(--select-height-md\)\] {
+    height: var(--select-height-md);
+  }
+  .h-\[var\(--select-height-sm\)\] {
+    height: var(--select-height-sm);
+  }
+  .h-\[var\(--select-height-xs\)\] {
+    height: var(--select-height-xs);
+  }
   .h-\[var\(--switch-height-lg\)\] {
     height: var(--switch-height-lg);
   }
@@ -782,6 +820,9 @@
   .h-\[var\(--switch-height-sm\)\] {
     height: var(--switch-height-sm);
   }
+  .h-\[var\(--switch-height-xs\)\] {
+    height: var(--switch-height-xs);
+  }
   .h-auto {
     height: auto;
   }
@@ -926,9 +967,6 @@
   .w-6 {
     width: 1.5rem;
   }
-  .w-7 {
-    width: calc(var(--spacing) * 7);
-  }
   .w-8 {
     width: 2rem;
   }
@@ -1007,6 +1045,9 @@
   .w-\[var\(--checkbox-size-sm\)\] {
     width: var(--checkbox-size-sm);
   }
+  .w-\[var\(--checkbox-size-xs\)\] {
+    width: var(--checkbox-size-xs);
+  }
   .w-\[var\(--radix-popover-trigger-width\)\] {
     width: var(--radix-popover-trigger-width);
   }
@@ -1019,6 +1060,9 @@
   .w-\[var\(--switch-width-sm\)\] {
     width: var(--switch-width-sm);
   }
+  .w-\[var\(--switch-width-xs\)\] {
+    width: var(--switch-width-xs);
+  }
   .w-auto {
     width: auto;
   }
@@ -1412,9 +1456,6 @@
   .rounded-3xl {
     border-radius: 1rem;
   }
-  .rounded-\[var\(--radius-lg\)\] {
-    border-radius: var(--radius-lg);
-  }
   .rounded-full {
     border-radius: 9999px;
   }
@@ -1512,25 +1553,25 @@
     border-color: oklch(60% 0.19 255) !important;
   }
   .\!border-success {
-    border-color: oklch(0.7 0.2 145) !important;
+    border-color: oklch(70% 0.2 145) !important;
   }
   .\!border-warning {
     border-color: oklch(75% 0.15 85) !important;
   }
   .border-accent {
-    border-color: oklch(0.8 0.1737 67);
+    border-color: oklch(80% 0.1737 67);
   }
   .border-accent\/20 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
   }
   .border-accent\/30 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 30%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 30%, transparent);
   }
   .border-accent\/50 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 50%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 50%, transparent);
   }
   .border-accent\/60 {
-    border-color: color-mix(in oklab, oklch(0.8 0.1737 67) 60%, transparent);
+    border-color: color-mix(in oklab, oklch(80% 0.1737 67) 60%, transparent);
   }
   .border-background {
     border-color: oklch(100% 0 0);
@@ -1587,19 +1628,19 @@
     border-color: color-mix(in oklab, oklch(60% 0.19 255) 60%, transparent);
   }
   .border-primary {
-    border-color: oklch(0.6029 0.15 239.2065);
+    border-color: oklch(60.29% 0.15 239.2065);
   }
   .border-primary\/20 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
   }
   .border-primary\/30 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 30%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 30%, transparent);
   }
   .border-primary\/50 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent);
   }
   .border-primary\/60 {
-    border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
   }
   .border-secondary {
     border-color: oklch(50% 0.05 240);
@@ -1617,19 +1658,19 @@
     border-color: color-mix(in oklab, oklch(50% 0.05 240) 60%, transparent);
   }
   .border-success {
-    border-color: oklch(0.7 0.2 145);
+    border-color: oklch(70% 0.2 145);
   }
   .border-success\/20 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
   }
   .border-success\/30 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 30%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 30%, transparent);
   }
   .border-success\/50 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 50%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 50%, transparent);
   }
   .border-success\/60 {
-    border-color: color-mix(in oklab, oklch(0.7 0.2 145) 60%, transparent);
+    border-color: color-mix(in oklab, oklch(70% 0.2 145) 60%, transparent);
   }
   .border-surface {
     border-color: oklch(96% 0 0);
@@ -1662,7 +1703,7 @@
     border-top-color: transparent;
   }
   .border-l-accent {
-    border-left-color: oklch(0.8 0.1737 67);
+    border-left-color: oklch(80% 0.1737 67);
   }
   .border-l-border {
     border-left-color: oklch(93% 0 0);
@@ -1674,43 +1715,37 @@
     border-left-color: oklch(60% 0.19 255);
   }
   .border-l-primary {
-    border-left-color: oklch(0.6029 0.15 239.2065);
+    border-left-color: oklch(60.29% 0.15 239.2065);
   }
   .border-l-secondary {
     border-left-color: oklch(50% 0.05 240);
   }
   .border-l-success {
-    border-left-color: oklch(0.7 0.2 145);
+    border-left-color: oklch(70% 0.2 145);
   }
   .border-l-warning {
     border-left-color: oklch(75% 0.15 85);
   }
-  .bg-\[var\(--color-accent\)\] {
-    background-color: var(--color-accent);
-  }
-  .bg-\[var\(--color-primary\)\] {
-    background-color: var(--color-primary);
-  }
   .bg-accent {
-    background-color: oklch(0.8 0.1737 67);
+    background-color: oklch(80% 0.1737 67);
   }
   .bg-accent\/5 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 5%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 5%, transparent);
   }
   .bg-accent\/10 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 10%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 10%, transparent);
   }
   .bg-accent\/20 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
   }
   .bg-accent\/30 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 30%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 30%, transparent);
   }
   .bg-accent\/50 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 50%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 50%, transparent);
   }
   .bg-accent\/60 {
-    background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 60%, transparent);
+    background-color: color-mix(in oklab, oklch(80% 0.1737 67) 60%, transparent);
   }
   .bg-background {
     background-color: oklch(100% 0 0);
@@ -1803,28 +1838,28 @@
     background-color: color-mix(in oklab, oklch(60% 0.19 255) 60%, transparent);
   }
   .bg-primary {
-    background-color: oklch(0.6029 0.15 239.2065);
+    background-color: oklch(60.29% 0.15 239.2065);
   }
   .bg-primary-hover {
-    background-color: oklch(0.5029 0.2 239.2065);
+    background-color: oklch(50.29% 0.2 239.2065);
   }
   .bg-primary\/5 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 5%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 5%, transparent);
   }
   .bg-primary\/10 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
   }
   .bg-primary\/20 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
   }
   .bg-primary\/30 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 30%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 30%, transparent);
   }
   .bg-primary\/50 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent);
   }
   .bg-primary\/60 {
-    background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
   }
   .bg-red-600 {
     background-color: var(--color-red-600);
@@ -1851,25 +1886,25 @@
     background-color: color-mix(in oklab, oklch(50% 0.05 240) 60%, transparent);
   }
   .bg-success {
-    background-color: oklch(0.7 0.2 145);
+    background-color: oklch(70% 0.2 145);
   }
   .bg-success\/5 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 5%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 5%, transparent);
   }
   .bg-success\/10 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 10%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 10%, transparent);
   }
   .bg-success\/20 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
   }
   .bg-success\/30 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 30%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 30%, transparent);
   }
   .bg-success\/50 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 50%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 50%, transparent);
   }
   .bg-success\/60 {
-    background-color: color-mix(in oklab, oklch(0.7 0.2 145) 60%, transparent);
+    background-color: color-mix(in oklab, oklch(70% 0.2 145) 60%, transparent);
   }
   .bg-surface {
     background-color: oklch(96% 0 0);
@@ -1943,11 +1978,11 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-primary {
-    --tw-gradient-from: oklch(0.6029 0.15 239.2065);
+    --tw-gradient-from: oklch(60.29% 0.15 239.2065);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-primary\/20 {
-    --tw-gradient-from: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    --tw-gradient-from: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .via-gray-100 {
@@ -1956,7 +1991,7 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops);
   }
   .to-accent\/20 {
-    --tw-gradient-to: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    --tw-gradient-to: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-gray-200 {
@@ -1964,7 +1999,7 @@
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-primary\/60 {
-    --tw-gradient-to: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    --tw-gradient-to: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .to-transparent {
@@ -1981,16 +2016,16 @@
     fill: transparent;
   }
   .stroke-accent {
-    stroke: oklch(0.8 0.1737 67);
+    stroke: oklch(80% 0.1737 67);
   }
   .stroke-accent\/10 {
-    stroke: color-mix(in oklab, oklch(0.8 0.1737 67) 10%, transparent);
+    stroke: color-mix(in oklab, oklch(80% 0.1737 67) 10%, transparent);
   }
   .stroke-accent\/20 {
-    stroke: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+    stroke: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
   }
   .stroke-accent\/60 {
-    stroke: color-mix(in oklab, oklch(0.8 0.1737 67) 60%, transparent);
+    stroke: color-mix(in oklab, oklch(80% 0.1737 67) 60%, transparent);
   }
   .stroke-border {
     stroke: oklch(93% 0 0);
@@ -2023,16 +2058,16 @@
     stroke: color-mix(in oklab, oklch(60% 0.19 255) 60%, transparent);
   }
   .stroke-primary {
-    stroke: oklch(0.6029 0.15 239.2065);
+    stroke: oklch(60.29% 0.15 239.2065);
   }
   .stroke-primary\/10 {
-    stroke: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+    stroke: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
   }
   .stroke-primary\/20 {
-    stroke: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+    stroke: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
   }
   .stroke-primary\/60 {
-    stroke: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 60%, transparent);
+    stroke: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 60%, transparent);
   }
   .stroke-secondary {
     stroke: oklch(50% 0.05 240);
@@ -2047,16 +2082,16 @@
     stroke: color-mix(in oklab, oklch(50% 0.05 240) 60%, transparent);
   }
   .stroke-success {
-    stroke: oklch(0.7 0.2 145);
+    stroke: oklch(70% 0.2 145);
   }
   .stroke-success\/10 {
-    stroke: color-mix(in oklab, oklch(0.7 0.2 145) 10%, transparent);
+    stroke: color-mix(in oklab, oklch(70% 0.2 145) 10%, transparent);
   }
   .stroke-success\/20 {
-    stroke: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+    stroke: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
   }
   .stroke-success\/60 {
-    stroke: color-mix(in oklab, oklch(0.7 0.2 145) 60%, transparent);
+    stroke: color-mix(in oklab, oklch(70% 0.2 145) 60%, transparent);
   }
   .stroke-surface {
     stroke: oklch(96% 0 0);
@@ -2175,6 +2210,30 @@
   .px-\[var\(--button-padding-x-xs\)\] {
     padding-inline: var(--button-padding-x-xs);
   }
+  .px-\[var\(--input-padding-x-lg\)\] {
+    padding-inline: var(--input-padding-x-lg);
+  }
+  .px-\[var\(--input-padding-x-md\)\] {
+    padding-inline: var(--input-padding-x-md);
+  }
+  .px-\[var\(--input-padding-x-sm\)\] {
+    padding-inline: var(--input-padding-x-sm);
+  }
+  .px-\[var\(--input-padding-x-xs\)\] {
+    padding-inline: var(--input-padding-x-xs);
+  }
+  .px-\[var\(--select-padding-x-lg\)\] {
+    padding-inline: var(--select-padding-x-lg);
+  }
+  .px-\[var\(--select-padding-x-md\)\] {
+    padding-inline: var(--select-padding-x-md);
+  }
+  .px-\[var\(--select-padding-x-sm\)\] {
+    padding-inline: var(--select-padding-x-sm);
+  }
+  .px-\[var\(--select-padding-x-xs\)\] {
+    padding-inline: var(--select-padding-x-xs);
+  }
   .py-0 {
     padding-block: 0px;
   }
@@ -2256,6 +2315,18 @@
   .pr-24 {
     padding-right: calc(var(--spacing) * 24);
   }
+  .pr-\[calc\(var\(--select-padding-x-lg\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-lg) * 2);
+  }
+  .pr-\[calc\(var\(--select-padding-x-md\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-md) * 2);
+  }
+  .pr-\[calc\(var\(--select-padding-x-sm\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-sm) * 2);
+  }
+  .pr-\[calc\(var\(--select-padding-x-xs\)\*2\)\] {
+    padding-right: calc(var(--select-padding-x-xs) * 2);
+  }
   .pb-0 {
     padding-bottom: 0px;
   }
@@ -2277,9 +2348,6 @@
   .pb-8 {
     padding-bottom: 2rem;
   }
-  .pl-1 {
-    padding-left: 0.25rem;
-  }
   .pl-8 {
     padding-left: 2rem;
   }
@@ -2304,6 +2372,18 @@
   .pl-36 {
     padding-left: calc(var(--spacing) * 36);
   }
+  .pl-\[var\(--select-padding-x-lg\)\] {
+    padding-left: var(--select-padding-x-lg);
+  }
+  .pl-\[var\(--select-padding-x-md\)\] {
+    padding-left: var(--select-padding-x-md);
+  }
+  .pl-\[var\(--select-padding-x-sm\)\] {
+    padding-left: var(--select-padding-x-sm);
+  }
+  .pl-\[var\(--select-padding-x-xs\)\] {
+    padding-left: var(--select-padding-x-xs);
+  }
   .text-center {
     text-align: center;
   }
@@ -2361,10 +2441,6 @@
     --tw-leading: 1;
     line-height: 1;
   }
-  .font-\[var\(--font-weight-semibold\)\] {
-    --tw-font-weight: var(--font-weight-semibold);
-    font-weight: var(--font-weight-semibold);
-  }
   .font-bold {
     --tw-font-weight: 700;
     font-weight: 700;
@@ -2395,11 +2471,8 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
-  .text-\[var\(--text-lg\)\] {
-    color: var(--text-lg);
-  }
   .text-accent {
-    color: oklch(0.8 0.1737 67);
+    color: oklch(80% 0.1737 67);
   }
   .text-accent-foreground {
     color: oklch(15% 0 0);
@@ -2462,7 +2535,7 @@
     color: var(--color-pink-500);
   }
   .text-primary {
-    color: oklch(0.6029 0.15 239.2065);
+    color: oklch(60.29% 0.15 239.2065);
   }
   .text-primary-foreground {
     color: oklch(100% 0 0);
@@ -2489,7 +2562,7 @@
     color: color-mix(in oklab, oklch(100% 0 0) 50%, transparent);
   }
   .text-success {
-    color: oklch(0.7 0.2 145);
+    color: oklch(70% 0.2 145);
   }
   .text-success-foreground {
     color: oklch(100% 0 0);
@@ -2567,10 +2640,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-\[var\(--shadow-md\)\] {
-    --tw-shadow: var(--shadow-md);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-lg {
     --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -2716,7 +2785,7 @@
   }
   .peer-checked\:bg-accent {
     &:is(:where(.peer):checked ~ *) {
-      background-color: oklch(0.8 0.1737 67);
+      background-color: oklch(80% 0.1737 67);
     }
   }
   .peer-checked\:bg-error {
@@ -2731,7 +2800,7 @@
   }
   .peer-checked\:bg-primary {
     &:is(:where(.peer):checked ~ *) {
-      background-color: oklch(0.6029 0.15 239.2065);
+      background-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .peer-checked\:bg-secondary {
@@ -2741,7 +2810,7 @@
   }
   .peer-checked\:bg-success {
     &:is(:where(.peer):checked ~ *) {
-      background-color: oklch(0.7 0.2 145);
+      background-color: oklch(70% 0.2 145);
     }
   }
   .peer-checked\:bg-warning {
@@ -2784,7 +2853,7 @@
   }
   .checked\:border-accent {
     &:checked {
-      border-color: oklch(0.8 0.1737 67);
+      border-color: oklch(80% 0.1737 67);
     }
   }
   .checked\:border-error {
@@ -2799,7 +2868,7 @@
   }
   .checked\:border-primary {
     &:checked {
-      border-color: oklch(0.6029 0.15 239.2065);
+      border-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .checked\:border-secondary {
@@ -2809,7 +2878,7 @@
   }
   .checked\:border-success {
     &:checked {
-      border-color: oklch(0.7 0.2 145);
+      border-color: oklch(70% 0.2 145);
     }
   }
   .checked\:border-warning {
@@ -2892,7 +2961,7 @@
   .hover\:border-accent {
     &:hover {
       @media (hover: hover) {
-        border-color: oklch(0.8 0.1737 67);
+        border-color: oklch(80% 0.1737 67);
       }
     }
   }
@@ -2920,14 +2989,14 @@
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
-        border-color: oklch(0.6029 0.15 239.2065);
+        border-color: oklch(60.29% 0.15 239.2065);
       }
     }
   }
   .hover\:border-primary\/50 {
     &:hover {
       @media (hover: hover) {
-        border-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent);
+        border-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent);
       }
     }
   }
@@ -2941,7 +3010,7 @@
   .hover\:border-success {
     &:hover {
       @media (hover: hover) {
-        border-color: oklch(0.7 0.2 145);
+        border-color: oklch(70% 0.2 145);
       }
     }
   }
@@ -2959,38 +3028,31 @@
       }
     }
   }
-  .hover\:bg-\[var\(--color-accent-hover\)\] {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-accent-hover);
-      }
-    }
-  }
   .hover\:bg-accent\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 5%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 5%, transparent);
       }
     }
   }
   .hover\:bg-accent\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 10%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 10%, transparent);
       }
     }
   }
   .hover\:bg-accent\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 20%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 20%, transparent);
       }
     }
   }
   .hover\:bg-accent\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.8 0.1737 67) 90%, transparent);
+        background-color: color-mix(in oklab, oklch(80% 0.1737 67) 90%, transparent);
       }
     }
   }
@@ -3088,35 +3150,35 @@
   .hover\:bg-primary {
     &:hover {
       @media (hover: hover) {
-        background-color: oklch(0.6029 0.15 239.2065);
+        background-color: oklch(60.29% 0.15 239.2065);
       }
     }
   }
   .hover\:bg-primary\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 5%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 5%, transparent);
       }
     }
   }
   .hover\:bg-primary\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
       }
     }
   }
   .hover\:bg-primary\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
       }
     }
   }
   .hover\:bg-primary\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 90%, transparent);
+        background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 90%, transparent);
       }
     }
   }
@@ -3151,28 +3213,28 @@
   .hover\:bg-success\/5 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 5%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 5%, transparent);
       }
     }
   }
   .hover\:bg-success\/10 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 10%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 10%, transparent);
       }
     }
   }
   .hover\:bg-success\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 20%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 20%, transparent);
       }
     }
   }
   .hover\:bg-success\/90 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in oklab, oklch(0.7 0.2 145) 90%, transparent);
+        background-color: color-mix(in oklab, oklch(70% 0.2 145) 90%, transparent);
       }
     }
   }
@@ -3242,7 +3304,7 @@
   .hover\:text-accent {
     &:hover {
       @media (hover: hover) {
-        color: oklch(0.8 0.1737 67);
+        color: oklch(80% 0.1737 67);
       }
     }
   }
@@ -3270,7 +3332,7 @@
   .hover\:text-primary {
     &:hover {
       @media (hover: hover) {
-        color: oklch(0.6029 0.15 239.2065);
+        color: oklch(60.29% 0.15 239.2065);
       }
     }
   }
@@ -3284,7 +3346,7 @@
   .hover\:text-success {
     &:hover {
       @media (hover: hover) {
-        color: oklch(0.7 0.2 145);
+        color: oklch(70% 0.2 145);
       }
     }
   }
@@ -3380,7 +3442,7 @@
   }
   .focus\:\!border-success {
     &:focus {
-      border-color: oklch(0.7 0.2 145) !important;
+      border-color: oklch(70% 0.2 145) !important;
     }
   }
   .focus\:\!border-warning {
@@ -3400,12 +3462,12 @@
   }
   .focus\:border-primary {
     &:focus {
-      border-color: oklch(0.6029 0.15 239.2065);
+      border-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .focus\:border-success {
     &:focus {
-      border-color: oklch(0.7 0.2 145);
+      border-color: oklch(70% 0.2 145);
     }
   }
   .focus\:border-warning {
@@ -3421,12 +3483,12 @@
   }
   .focus\:ring-primary {
     &:focus {
-      --tw-ring-color: oklch(0.6029 0.15 239.2065);
+      --tw-ring-color: oklch(60.29% 0.15 239.2065);
     }
   }
   .focus\:ring-primary\/20 {
     &:focus {
-      --tw-ring-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 20%, transparent);
+      --tw-ring-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 20%, transparent);
     }
   }
   .focus\:ring-offset-2 {
@@ -3518,12 +3580,12 @@
   }
   .data-\[selected\=true\]\:bg-primary\/10 {
     &[data-selected="true"] {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent);
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent);
     }
   }
   .data-\[selected\=true\]\:text-primary {
     &[data-selected="true"] {
-      color: oklch(0.6029 0.15 239.2065);
+      color: oklch(60.29% 0.15 239.2065);
     }
   }
   .sm\:max-w-lg {
@@ -3647,22 +3709,22 @@
   }
   .\[\&_\.react-datepicker__day--in-range\]\:\!bg-primary\/10 {
     & .react-datepicker  day--in-range {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 10%, transparent) !important;
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 10%, transparent) !important;
     }
   }
   .\[\&_\.react-datepicker__day--in-selecting-range\]\:\!bg-primary\/30 {
     & .react-datepicker  day--in-selecting-range {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 30%, transparent) !important;
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 30%, transparent) !important;
     }
   }
   .\[\&_\.react-datepicker__day--keyboard-selected\]\:\!bg-primary\/50 {
     & .react-datepicker  day--keyboard-selected {
-      background-color: color-mix(in oklab, oklch(0.6029 0.15 239.2065) 50%, transparent) !important;
+      background-color: color-mix(in oklab, oklch(60.29% 0.15 239.2065) 50%, transparent) !important;
     }
   }
   .\[\&_\.react-datepicker__day--selected\]\:\!bg-primary {
     & .react-datepicker  day--selected {
-      background-color: oklch(0.6029 0.15 239.2065) !important;
+      background-color: oklch(60.29% 0.15 239.2065) !important;
     }
   }
   .\[\&_\.react-datepicker__day-name\]\:\!text-text-muted {
@@ -3722,7 +3784,7 @@
   }
   .\[\&_\.react-datepicker__time-list-item--selected\]\:\!bg-primary {
     & .react-datepicker  time-list-item--selected {
-      background-color: oklch(0.6029 0.15 239.2065) !important;
+      background-color: oklch(60.29% 0.15 239.2065) !important;
     }
   }
   .\[\&_\.react-datepicker__time-list-item--selected\]\:\!text-white {
@@ -3897,45 +3959,49 @@
     }
   }
 }
+:root.dark,
 .dark {
-  --color-primary: oklch(65% 0.25 255);
-  --color-primary-hover: oklch(70% 0.27 255);
-  --color-primary-active: oklch(75% 0.29 255);
-  --color-secondary: oklch(60% 0.15 30);
-  --color-secondary-hover: oklch(65% 0.17 30);
-  --color-secondary-active: oklch(70% 0.19 30);
-  --color-accent: oklch(70% 0.22 310);
-  --color-accent-hover: oklch(75% 0.24 310);
-  --color-accent-active: oklch(80% 0.26 310);
-  --color-success: oklch(65% 0.2 145);
-  --color-success-hover: oklch(70% 0.22 145);
-  --color-success-active: oklch(75% 0.24 145);
-  --color-error: oklch(65% 0.2 25);
-  --color-error-hover: oklch(75% 0.2 25);
-  --color-error-active: oklch(80% 0.2 25);
-  --color-warning: oklch(75% 0.15 85);
-  --color-warning-hover: oklch(80% 0.17 85);
-  --color-warning-active: oklch(85% 0.19 85);
-  --color-info: oklch(65% 0.19 255);
-  --color-info-hover: oklch(70% 0.21 255);
-  --color-info-active: oklch(75% 0.23 255);
-  --color-background: oklch(15% 0 0);
-  --color-background-secondary: oklch(18% 0 0);
-  --color-surface: oklch(20% 0 0);
-  --color-border: oklch(30% 0 0);
-  --color-border-primary: oklch(35% 0 0);
-  --color-text-primary: oklch(95% 0 0);
-  --color-text-secondary: oklch(70% 0 0);
-  --color-text-muted: oklch(55% 0 0);
-  --color-input-border: oklch(30% 0 0);
-  --color-input-border-focus: oklch(65% 0.25 255);
-  --color-input-border-error: oklch(65% 0.25 25);
-  --color-input-bg: oklch(18% 0 0);
-  --color-input-text: oklch(95% 0 0);
-  --color-input-placeholder: oklch(55% 0 0);
+  --color-primary: oklch(70% 0.19 255);
+  --color-primary-hover: oklch(75% 0.21 255);
+  --color-primary-active: oklch(78% 0.23 255);
+  --color-secondary: oklch(68% 0.12 260);
+  --color-secondary-hover: oklch(72% 0.14 260);
+  --color-secondary-active: oklch(76% 0.16 260);
+  --color-accent: oklch(75% 0.18 140);
+  --color-accent-hover: oklch(78% 0.2 140);
+  --color-accent-active: oklch(82% 0.22 140);
+  --color-success: oklch(72% 0.18 150);
+  --color-success-hover: oklch(76% 0.2 150);
+  --color-success-active: oklch(80% 0.22 150);
+  --color-error: oklch(70% 0.22 25);
+  --color-error-hover: oklch(74% 0.24 25);
+  --color-error-active: oklch(78% 0.26 25);
+  --color-warning: oklch(78% 0.16 75);
+  --color-warning-hover: oklch(82% 0.18 75);
+  --color-warning-active: oklch(85% 0.2 75);
+  --color-info: oklch(72% 0.16 230);
+  --color-info-hover: oklch(76% 0.18 230);
+  --color-info-active: oklch(80% 0.2 230);
+  --color-background: oklch(17% 0.01 240);
+  --color-background-secondary: oklch(20% 0.01 240);
+  --color-surface: oklch(23% 0.01 240);
+  --color-border: oklch(32% 0.01 240);
+  --color-border-primary: oklch(42% 0.02 240);
+  --color-text-primary: oklch(96% 0 0);
+  --color-text-secondary: oklch(75% 0 0);
+  --color-text-muted: oklch(60% 0 0);
+  --color-input-border: oklch(32% 0.01 240);
+  --color-input-border-focus: oklch(70% 0.19 255);
+  --color-input-border-error: oklch(70% 0.22 25);
+  --color-input-bg: oklch(20% 0.01 240);
+  --color-input-text: oklch(96% 0 0);
+  --color-input-placeholder: oklch(60% 0 0);
+  --overlay-stripe: oklch(0% 0 0 / 0.2);
 }
 html,
 body {
+  background-color: var(--color-background);
+  color: var(--color-text-primary);
   overscroll-behavior: none;
 }
 @layer components {