@health-samurai/react-components 0.0.0-alpha.13 → 0.0.0-alpha.14

package/dist/bundle.css

@@ -16,6 +16,8 @@
     --color-red-600: #d7270f;
     --color-red-700: #c31b03;
     --color-red-800: #a72d22;
+    --color-red-900: #7a0d00;
+    --color-red-950: #410801;
     --color-orange-200: oklch(90.1% 0.076 70.697);
     --color-yellow-50: #fffdf2;
     --color-yellow-100: #fffbe5;
@@ -25,12 +27,17 @@
     --color-yellow-500: #ffd400;
     --color-yellow-600: #dfa400;
     --color-yellow-700: #855600;
+    --color-yellow-900: #341900;
+    --color-yellow-950: #200900;
     --color-green-50: #fbfdf8;
     --color-green-100: #f8fbf3;
     --color-green-200: #f1f8e6;
+    --color-green-300: #e3efcb;
     --color-green-400: #c9e19b;
     --color-green-500: #78b506;
     --color-green-600: #558300;
+    --color-green-900: #090d04;
+    --color-green-950: #090d04;
     --color-blue-50: #f9fbfe;
     --color-blue-100: #f4f8fc;
     --color-blue-200: #e9f2fc;
@@ -39,6 +46,8 @@
     --color-blue-500: #2378e1;
     --color-blue-600: #045ac3;
     --color-blue-700: #014391;
+    --color-blue-800: #053775;
+    --color-blue-900: #052040;
     --color-violet-500: oklch(60.6% 0.25 292.717);
     --color-purple-200: oklch(90.2% 0.063 306.703);
     --color-pink-200: oklch(89.9% 0.061 343.231);
@@ -56,7 +65,6 @@
     --color-neutral-800: #1e2938;
     --color-neutral-900: #1d2331;
     --color-black: #000;
-    --color-white: #ffffff;
     --spacing: 0.25rem;
     --container-xs: 20rem;
     --container-sm: 24rem;
@@ -106,6 +114,9 @@
     --color-brand-500: #ea4a35;
     --color-brand-600: #d72710;
     --color-brand-700: #c31a03;
+    --color-brand-800: #78190c;
+    --color-brand-900: #4a0f08;
+    --color-brand-950: #2e0a05;
     --font-size-xxs: 10px;
     --font-size-xs: 12px;
     --font-size-sm: 14px;
@@ -133,91 +144,28 @@
     --spacing-x1point5: 12px;
     --spacing-x2: 16px;
     --corner-corner-m: 6px;
-    --color-elements-readable: var(--color-neutral-900);
     --color-cta: var(--color-brand-600);
     --color-critical-default: var(--color-red-600);
-    --color-elements-disabled: var(--color-neutral-300);
-    --color-elements-assistive: var(--color-neutral-500);
-    --color-surface-0: var(--color-neutral-50);
-    --color-border-default: var(--color-neutral-200);
-    --color-surface-1: var(--color-neutral-100);
-    --color-elements-readable-inv: var(--color-neutral-50);
-    --color-selection: var(--color-blue-300);
-    --color-ring-red: var(--color-red-200);
-    --color-ring-blue: var(--color-blue-300);
-    --color-text-primary: var(--color-neutral-900);
-    --color-text-secondary: var(--color-neutral-500);
-    --color-text-secondary_hover: var(--color-neutral-600);
-    --color-text-primary_on-brand: var(--color-neutral-50);
-    --color-text-tertiary: var(--color-neutral-400);
-    --color-text-tertiary_hover: var(--color-neutral-500);
-    --color-text-quternary: var(--color-neutral-400);
-    --color-text-quternary_on-brand: var(--color-neutral-200);
-    --color-text-disabled: var(--color-neutral-300);
-    --color-text-link: var(--color-blue-500);
-    --color-text-brand-primary: var(--color-brand-500);
-    --color-text-error-primary: var(--color-red-500);
-    --color-text-error-secondary: var(--color-red-400);
-    --color-text-success-primary: var(--color-green-500);
-    --color-text-warning-primary: var(--color-yellow-700);
-    --color-text-info-primary: var(--color-blue-600);
-    --color-border-primary: var(--color-neutral-300);
-    --color-border-primary_hover: var(--color-neutral-400);
-    --color-border-secondary: var(--color-neutral-200);
-    --color-border-separator: var(--color-neutral-200);
-    --color-border-disabled: var(--color-neutral-100);
-    --color-border-dark: var(--color-neutral-500);
-    --color-border-brand: var(--color-brand-500);
+    --color-elements-readable: var(--hs-elements-readable);
+    --color-elements-readable-inv: var(--hs-elements-readable-inv);
+    --color-elements-assistive: var(--hs-elements-assistive);
+    --color-elements-disabled: var(--hs-elements-disabled);
+    --color-surface-0: var(--hs-surface-0);
+    --color-surface-1: var(--hs-surface-1);
+    --color-border-default: var(--hs-border-default);
+    --color-text-primary: var(--hs-text-primary);
+    --color-text-secondary: var(--hs-text-secondary);
+    --color-text-tertiary: var(--hs-text-tertiary);
+    --color-text-link: var(--hs-text-link);
+    --color-text-error-primary: var(--hs-text-error-primary);
+    --color-border-primary: var(--hs-border-primary);
+    --color-border-separator: var(--hs-border-separator);
     --color-border-link: var(--color-blue-500);
-    --color-border-error: var(--color-red-500);
-    --color-border-error_inverse: var(--color-red-400);
-    --color-border-success: var(--color-green-500);
-    --color-bg-primary: #ffffff;
-    --color-bg-primary_inverse: var(--color-neutral-900);
-    --color-bg-secondary: var(--color-neutral-50);
-    --color-bg-secondary_inverse: var(--color-neutral-500);
-    --color-bg-secondary_inverse_hover: var(--color-neutral-600);
-    --color-bg-tertiary: var(--color-neutral-100);
-    --color-bg-quaternary: var(--color-neutral-200);
-    --color-bg-overlay: var(--color-neutral-900);
-    --color-bg-disabled: var(--color-neutral-300);
-    --color-bg-hover: var(--color-blue-200);
-    --color-bg-dark_tertiary: var(--color-neutral-400);
-    --color-bg-brand-secondary: var(--color-brand-100);
-    --color-bg-link: var(--color-blue-500);
-    --color-bg-link_disabled: var(--color-blue-400);
-    --color-bg-link_hover: var(--color-blue-600);
-    --color-bg-error-primary: var(--color-red-50);
-    --color-bg-error-primary_inverse: var(--color-red-500);
-    --color-bg-error-primary_inverse_hover: var(--color-red-700);
-    --color-bg-error-secondary: var(--color-red-100);
-    --color-bg-error-tertiary: var(--color-red-200);
-    --color-bg-success-primary_inverse: var(--color-green-500);
-    --color-bg-success-secondary: var(--color-green-100);
-    --color-bg-warning-primary: var(--color-yellow-50);
-    --color-bg-warning-primary_inverse: #f4cb00;
-    --color-bg-warning-secondary: var(--color-yellow-100);
-    --color-bg-info-primary: var(--color-blue-100);
-    --color-bg-info-primary_inverse: var(--color-blue-500);
-    --color-bg-neutral-primary: var(--color-neutral-100);
-    --color-bg-neutral-primary_inverse: var(--color-neutral-900);
-    --color-fg-primary: var(--color-neutral-900);
-    --color-fg-primary_on-brand: var(--color-neutral-50);
-    --color-fg-secondary: var(--color-neutral-700);
-    --color-fg-tertiary: var(--color-neutral-500);
-    --color-fg-tertiary_hover: var(--color-neutral-600);
-    --color-fg-disabled: var(--color-neutral-300);
-    --color-fg-link: var(--color-blue-500);
-    --color-fg-error-primary: var(--color-red-500);
-    --color-fg-success-primary: var(--color-green-500);
-    --color-fg-warning-primary: var(--color-yellow-700);
-    --color-fg-info-primary: var(--color-blue-600);
-    --color-fg-neutral-primary: var(--color-neutral-500);
-    --color-utility-green: var(--color-green-500);
-    --color-utility-yellow: var(--color-yellow-600);
-    --color-utility-blue: var(--color-blue-500);
-    --color-utility-violet: var(--color-violet-500);
-    --color-utility-red: var(--color-red-500);
+    --color-bg-primary: var(--hs-bg-primary);
+    --color-bg-secondary: var(--hs-bg-secondary);
+    --color-fg-secondary: var(--hs-fg-secondary);
+    --color-fg-disabled: var(--hs-fg-disabled);
+    --color-fg-link: var(--hs-fg-link);
     --font-leading-14: 56px;
   }
 }
@@ -1517,7 +1465,7 @@
     border-style: solid;
   }
   .\!border-border-primary {
-    border-color: var(--color-border-primary) !important;
+    border-color: var(--hs-border-primary) !important;
   }
   .border-\(--color-border\) {
     border-color: var(--color-border);
@@ -1529,34 +1477,34 @@
     border-color: var(--border);
   }
   .border-border-dark {
-    border-color: var(--color-border-dark);
+    border-color: var(--hs-border-dark);
   }
   .border-border-default {
-    border-color: var(--color-border-default);
+    border-color: var(--hs-border-default);
   }
   .border-border-error {
-    border-color: var(--color-border-error);
+    border-color: var(--color-red-500);
   }
   .border-border-error_inverse {
-    border-color: var(--color-border-error_inverse);
+    border-color: var(--color-red-400);
   }
   .border-border-link {
-    border-color: var(--color-border-link);
+    border-color: var(--color-blue-500);
   }
   .border-border-primary {
-    border-color: var(--color-border-primary);
+    border-color: var(--hs-border-primary);
   }
   .border-border-primary_hover {
-    border-color: var(--color-border-primary_hover);
+    border-color: var(--hs-border-primary-hover);
   }
   .border-border-secondary {
-    border-color: var(--color-border-secondary);
+    border-color: var(--hs-border-secondary);
   }
   .border-border-separator {
-    border-color: var(--color-border-separator);
+    border-color: var(--hs-border-separator);
   }
   .border-border-success {
-    border-color: var(--color-border-success);
+    border-color: var(--color-green-500);
   }
   .border-border\/50 {
     border-color: var(--border);
@@ -1565,7 +1513,7 @@
     }
   }
   .border-fg-warning-primary {
-    border-color: var(--color-fg-warning-primary);
+    border-color: var(--hs-fg-warning-primary);
   }
   .border-gray-200 {
     border-color: var(--color-gray-200);
@@ -1589,7 +1537,7 @@
     border-left-color: transparent;
   }
   .\!bg-bg-primary {
-    background-color: var(--color-bg-primary) !important;
+    background-color: var(--hs-bg-primary) !important;
   }
   .bg-\(--color-bg\) {
     background-color: var(--color-bg);
@@ -1601,70 +1549,70 @@
     background-color: var(--background);
   }
   .bg-bg-error-primary {
-    background-color: var(--color-bg-error-primary);
+    background-color: var(--hs-bg-error-primary);
   }
   .bg-bg-error-primary_inverse {
-    background-color: var(--color-bg-error-primary_inverse);
+    background-color: var(--hs-bg-error-primary-inverse);
   }
   .bg-bg-error-secondary {
-    background-color: var(--color-bg-error-secondary);
+    background-color: var(--hs-bg-error-secondary);
   }
   .bg-bg-error-tertiary {
-    background-color: var(--color-bg-error-tertiary);
+    background-color: var(--hs-bg-error-tertiary);
   }
   .bg-bg-hover {
-    background-color: var(--color-bg-hover);
+    background-color: var(--hs-bg-hover);
   }
   .bg-bg-info-primary {
-    background-color: var(--color-bg-info-primary);
+    background-color: var(--hs-bg-info-primary);
   }
   .bg-bg-info-primary_inverse {
-    background-color: var(--color-bg-info-primary_inverse);
+    background-color: var(--hs-bg-info-primary-inverse);
   }
   .bg-bg-link {
-    background-color: var(--color-bg-link);
+    background-color: var(--hs-bg-link);
   }
   .bg-bg-neutral-primary {
-    background-color: var(--color-bg-neutral-primary);
+    background-color: var(--hs-bg-neutral-primary);
   }
   .bg-bg-neutral-primary_inverse {
-    background-color: var(--color-bg-neutral-primary_inverse);
+    background-color: var(--hs-bg-neutral-primary-inverse);
   }
   .bg-bg-overlay {
-    background-color: var(--color-bg-overlay);
+    background-color: var(--hs-bg-overlay);
   }
   .bg-bg-primary {
-    background-color: var(--color-bg-primary);
+    background-color: var(--hs-bg-primary);
   }
   .bg-bg-primary_inverse {
-    background-color: var(--color-bg-primary_inverse);
+    background-color: var(--hs-bg-primary-inverse);
   }
   .bg-bg-quaternary {
-    background-color: var(--color-bg-quaternary);
+    background-color: var(--hs-bg-quaternary);
   }
   .bg-bg-secondary {
-    background-color: var(--color-bg-secondary);
+    background-color: var(--hs-bg-secondary);
   }
   .bg-bg-secondary_inverse {
-    background-color: var(--color-bg-secondary_inverse);
+    background-color: var(--hs-bg-secondary-inverse);
   }
   .bg-bg-success-primary_inverse {
-    background-color: var(--color-bg-success-primary_inverse);
+    background-color: var(--hs-bg-success-primary-inverse);
   }
   .bg-bg-success-secondary {
-    background-color: var(--color-bg-success-secondary);
+    background-color: var(--hs-bg-success-secondary);
   }
   .bg-bg-tertiary {
-    background-color: var(--color-bg-tertiary);
+    background-color: var(--hs-bg-tertiary);
   }
   .bg-bg-warning-primary {
-    background-color: var(--color-bg-warning-primary);
+    background-color: var(--hs-bg-warning-primary);
   }
   .bg-bg-warning-primary_inverse {
-    background-color: var(--color-bg-warning-primary_inverse);
+    background-color: var(--hs-bg-warning-primary-inverse);
   }
   .bg-bg-warning-secondary {
-    background-color: var(--color-bg-warning-secondary);
+    background-color: var(--hs-bg-warning-secondary);
   }
   .bg-black {
     background-color: var(--color-black);
@@ -1682,19 +1630,19 @@
     background-color: var(--border);
   }
   .bg-border-primary {
-    background-color: var(--color-border-primary);
+    background-color: var(--hs-border-primary);
   }
   .bg-border-secondary {
-    background-color: var(--color-border-secondary);
+    background-color: var(--hs-border-secondary);
   }
   .bg-border-separator {
-    background-color: var(--color-border-separator);
+    background-color: var(--hs-border-separator);
   }
   .bg-fg-success-primary {
-    background-color: var(--color-fg-success-primary);
+    background-color: var(--hs-fg-success-primary);
   }
   .bg-fg-tertiary {
-    background-color: var(--color-fg-tertiary);
+    background-color: var(--hs-fg-tertiary);
   }
   .bg-foreground {
     background-color: var(--foreground);
@@ -1736,7 +1684,7 @@
     background-color: transparent;
   }
   .bg-white {
-    background-color: var(--color-white);
+    background-color: #ffffff;
   }
   .bg-linear-to-b {
     --tw-gradient-position: to bottom;
@@ -2049,31 +1997,31 @@
     color: var(--accent-foreground);
   }
   .text-elements-assistive {
-    color: var(--color-elements-assistive);
+    color: var(--hs-elements-assistive);
   }
   .text-fg-error-primary {
-    color: var(--color-fg-error-primary);
+    color: var(--hs-fg-error-primary);
   }
   .text-fg-info-primary {
-    color: var(--color-fg-info-primary);
+    color: var(--hs-fg-info-primary);
   }
   .text-fg-link {
-    color: var(--color-fg-link);
+    color: var(--hs-fg-link);
   }
   .text-fg-primary {
-    color: var(--color-fg-primary);
+    color: var(--hs-fg-primary);
   }
   .text-fg-primary_on-brand {
-    color: var(--color-fg-primary_on-brand);
+    color: var(--hs-fg-primary-on-brand);
   }
   .text-fg-secondary {
-    color: var(--color-fg-secondary);
+    color: var(--hs-fg-secondary);
   }
   .text-fg-success-primary {
-    color: var(--color-fg-success-primary);
+    color: var(--hs-fg-success-primary);
   }
   .text-fg-warning-primary {
-    color: var(--color-fg-warning-primary);
+    color: var(--hs-fg-warning-primary);
   }
   .text-foreground {
     color: var(--foreground);
@@ -2097,67 +2045,64 @@
     color: var(--sidebar-primary-foreground);
   }
   .text-text-disabled {
-    color: var(--color-text-disabled);
+    color: var(--hs-text-disabled);
   }
   .text-text-error-primary {
-    color: var(--color-text-error-primary);
+    color: var(--hs-text-error-primary);
   }
   .text-text-error-secondary {
-    color: var(--color-text-error-secondary);
+    color: var(--hs-text-error-secondary);
   }
   .text-text-info-primary {
-    color: var(--color-text-info-primary);
+    color: var(--hs-text-info-primary);
   }
   .text-text-link {
-    color: var(--color-text-link);
+    color: var(--hs-text-link);
   }
   .text-text-primary {
-    color: var(--color-text-primary);
+    color: var(--hs-text-primary);
   }
   .text-text-primary_on-brand {
-    color: var(--color-text-primary_on-brand);
+    color: var(--hs-text-primary-on-brand);
   }
   .text-text-quternary_on-brand {
-    color: var(--color-text-quternary_on-brand);
+    color: var(--hs-text-quaternary-on-brand);
   }
   .text-text-secondary {
-    color: var(--color-text-secondary);
+    color: var(--hs-text-secondary);
   }
   .text-text-secondary_hover {
-    color: var(--color-text-secondary_hover);
+    color: var(--hs-text-secondary-hover);
   }
   .text-text-success-primary {
-    color: var(--color-text-success-primary);
+    color: var(--hs-text-success-primary);
   }
   .text-text-tertiary {
-    color: var(--color-text-tertiary);
+    color: var(--hs-text-tertiary);
   }
   .text-text-warning-primary {
-    color: var(--color-text-warning-primary);
+    color: var(--hs-text-warning-primary);
   }
   .text-utility-blue {
-    color: var(--color-utility-blue);
+    color: var(--color-blue-500);
   }
   .text-utility-green {
-    color: var(--color-utility-green);
+    color: var(--color-green-500);
   }
   .text-utility-red {
-    color: var(--color-utility-red);
+    color: var(--color-red-500);
   }
   .text-utility-violet {
-    color: var(--color-utility-violet);
+    color: var(--color-violet-500);
   }
   .text-utility-yellow {
-    color: var(--color-utility-yellow);
+    color: var(--color-yellow-600);
   }
   .text-white {
-    color: var(--color-white);
+    color: #ffffff;
   }
   .text-white\/70 {
-    color: color-mix(in srgb, #ffffff 70%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-white) 70%, transparent);
-    }
+    color: color-mix(in oklab, #ffffff 70%, transparent);
   }
   .uppercase {
     text-transform: uppercase;
@@ -2691,26 +2636,26 @@
   }
   .selection\:bg-bg-primary {
     & *::selection {
-      background-color: var(--color-bg-primary);
+      background-color: var(--hs-bg-primary);
     }
     &::selection {
-      background-color: var(--color-bg-primary);
+      background-color: var(--hs-bg-primary);
     }
   }
   .selection\:bg-selection {
     & *::selection {
-      background-color: var(--color-selection);
+      background-color: var(--hs-selection);
     }
     &::selection {
-      background-color: var(--color-selection);
+      background-color: var(--hs-selection);
     }
   }
   .selection\:text-text-primary {
     & *::selection {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
     &::selection {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .file\:inline-flex {
@@ -2742,17 +2687,17 @@
   }
   .file\:text-text-primary {
     &::file-selector-button {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .placeholder\:text-text-quternary {
     &::placeholder {
-      color: var(--color-text-quternary);
+      color: var(--hs-text-quaternary);
     }
   }
   .placeholder\:text-text-tertiary {
     &::placeholder {
-      color: var(--color-text-tertiary);
+      color: var(--hs-text-tertiary);
     }
   }
   .before\:absolute {
@@ -2935,7 +2880,7 @@
   }
   .even\:bg-bg-secondary {
     &:nth-child(even) {
-      background-color: var(--color-bg-secondary);
+      background-color: var(--hs-bg-secondary);
     }
   }
   .hover\:cursor-not-allowed {
@@ -2948,28 +2893,28 @@
   .hover\:border-bg-link {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-bg-link);
+        border-color: var(--hs-bg-link);
       }
     }
   }
   .hover\:border-border-error_inverse {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-error_inverse);
+        border-color: var(--color-red-400);
       }
     }
   }
   .hover\:border-border-primary_hover {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-border-primary_hover);
+        border-color: var(--hs-border-primary-hover);
       }
     }
   }
   .hover\:\!bg-bg-secondary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-secondary) !important;
+        background-color: var(--hs-bg-secondary) !important;
       }
     }
   }
@@ -2983,51 +2928,53 @@
   .hover\:bg-bg-dark_tertiary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-dark_tertiary);
+        background-color: var(--hs-bg-dark-tertiary);
       }
     }
   }
   .hover\:bg-bg-error-primary_inverse_hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-error-primary_inverse_hover);
+        background-color: var(
+		--hs-bg-error-primary-inverse-hover
+	);
       }
     }
   }
   .hover\:bg-bg-error-secondary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-error-secondary);
+        background-color: var(--hs-bg-error-secondary);
       }
     }
   }
   .hover\:bg-bg-link {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-link);
+        background-color: var(--hs-bg-link);
       }
     }
   }
   .hover\:bg-bg-link_hover {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-link_hover);
+        background-color: var(--hs-bg-link-hover);
       }
     }
   }
   .hover\:bg-bg-secondary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-secondary);
+        background-color: var(--hs-bg-secondary);
       }
     }
   }
   .hover\:bg-bg-secondary\/60 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #f9f9f9 60%, transparent);
+        background-color: var(--hs-bg-secondary);
         @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-bg-secondary) 60%, transparent);
+          background-color: color-mix(in oklab, var(--hs-bg-secondary) 60%, transparent);
         }
       }
     }
@@ -3035,14 +2982,14 @@
   .hover\:bg-bg-tertiary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-bg-tertiary);
+        background-color: var(--hs-bg-tertiary);
       }
     }
   }
   .hover\:bg-border-secondary {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-border-secondary);
+        background-color: var(--hs-border-secondary);
       }
     }
   }
@@ -3063,10 +3010,7 @@
   .hover\:bg-white\/20 {
     &:hover {
       @media (hover: hover) {
-        background-color: color-mix(in srgb, #ffffff 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-white) 20%, transparent);
-        }
+        background-color: color-mix(in oklab, #ffffff 20%, transparent);
       }
     }
   }
@@ -3087,35 +3031,35 @@
   .hover\:text-text-error-primary {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-error-primary);
+        color: var(--hs-text-error-primary);
       }
     }
   }
   .hover\:text-text-primary {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-primary);
+        color: var(--hs-text-primary);
       }
     }
   }
   .hover\:text-text-primary_on-brand {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-primary_on-brand);
+        color: var(--hs-text-primary-on-brand);
       }
     }
   }
   .hover\:text-text-secondary {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-secondary);
+        color: var(--hs-text-secondary);
       }
     }
   }
   .hover\:text-text-tertiary_hover {
     &:hover {
       @media (hover: hover) {
-        color: var(--color-text-tertiary_hover);
+        color: var(--hs-text-tertiary-hover);
       }
     }
   }
@@ -3168,7 +3112,7 @@
       @media (hover: hover) {
         --tw-ring-color: color-mix(in srgb, #2378e1 70%, transparent);
         @supports (color: color-mix(in lab, red, red)) {
-          --tw-ring-color: color-mix(in oklab, var(--color-utility-blue) 70%, transparent);
+          --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 70%, transparent);
         }
       }
     }
@@ -3219,12 +3163,12 @@
   }
   .focus\:bg-bg-secondary {
     &:focus {
-      background-color: var(--color-bg-secondary);
+      background-color: var(--hs-bg-secondary);
     }
   }
   .focus\:bg-bg-tertiary {
     &:focus {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--hs-bg-tertiary);
     }
   }
   .focus\:text-accent-foreground {
@@ -3234,7 +3178,7 @@
   }
   .focus\:text-text-primary {
     &:focus {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .focus\:shadow-md {
@@ -3258,7 +3202,7 @@
     &:focus {
       --tw-ring-color: color-mix(in srgb, #2378e1 70%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-utility-blue) 70%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 70%, transparent);
       }
     }
   }
@@ -3297,17 +3241,17 @@
   }
   .focus-visible\:border-border-error {
     &:focus-visible {
-      border-color: var(--color-border-error);
+      border-color: var(--color-red-500);
     }
   }
   .focus-visible\:border-border-link {
     &:focus-visible {
-      border-color: var(--color-border-link);
+      border-color: var(--color-blue-500);
     }
   }
   .focus-visible\:bg-bg-tertiary {
     &:focus-visible {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--hs-bg-tertiary);
     }
   }
   .focus-visible\:ring-1 {
@@ -3347,12 +3291,12 @@
   }
   .focus-visible\:ring-ring-blue {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring-blue);
+      --tw-ring-color: var(--color-blue-300);
     }
   }
   .focus-visible\:ring-ring-red {
     &:focus-visible {
-      --tw-ring-color: var(--color-ring-red);
+      --tw-ring-color: var(--color-red-200);
     }
   }
   .focus-visible\:ring-ring\/50 {
@@ -3367,7 +3311,7 @@
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, #2378e1 70%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-utility-blue) 70%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--color-blue-500) 70%, transparent);
       }
     }
   }
@@ -3375,7 +3319,7 @@
     &:focus-visible {
       --tw-ring-color: color-mix(in srgb, #d7270f 70%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-utility-red) 70%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
       }
     }
   }
@@ -3423,32 +3367,32 @@
   }
   .active\:bg-bg-error-primary_inverse {
     &:active {
-      background-color: var(--color-bg-error-primary_inverse);
+      background-color: var(--hs-bg-error-primary-inverse);
     }
   }
   .active\:bg-bg-error-tertiary {
     &:active {
-      background-color: var(--color-bg-error-tertiary);
+      background-color: var(--hs-bg-error-tertiary);
     }
   }
   .active\:bg-bg-link {
     &:active {
-      background-color: var(--color-bg-link);
+      background-color: var(--hs-bg-link);
     }
   }
   .active\:bg-bg-primary {
     &:active {
-      background-color: var(--color-bg-primary);
+      background-color: var(--hs-bg-primary);
     }
   }
   .active\:bg-bg-quaternary {
     &:active {
-      background-color: var(--color-bg-quaternary);
+      background-color: var(--hs-bg-quaternary);
     }
   }
   .active\:bg-bg-tertiary {
     &:active {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--hs-bg-tertiary);
     }
   }
   .active\:bg-sidebar-accent {
@@ -3463,17 +3407,17 @@
   }
   .active\:text-text-error-primary {
     &:active {
-      color: var(--color-text-error-primary);
+      color: var(--hs-text-error-primary);
     }
   }
   .active\:text-text-primary {
     &:active {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .active\:text-text-tertiary {
     &:active {
-      color: var(--color-text-tertiary);
+      color: var(--hs-text-tertiary);
     }
   }
   .active\:duration-75 {
@@ -3499,37 +3443,32 @@
   }
   .disabled\:border-border-disabled {
     &:disabled {
-      border-color: var(--color-border-disabled);
+      border-color: var(--hs-border-disabled);
     }
   }
   .disabled\:border-border-primary {
     &:disabled {
-      border-color: var(--color-border-primary);
+      border-color: var(--hs-border-primary);
     }
   }
   .disabled\:border-border-secondary {
     &:disabled {
-      border-color: var(--color-border-secondary);
+      border-color: var(--hs-border-secondary);
     }
   }
   .disabled\:bg-bg-disabled {
     &:disabled {
-      background-color: var(--color-bg-disabled);
+      background-color: var(--hs-bg-disabled);
     }
   }
   .disabled\:bg-bg-primary {
     &:disabled {
-      background-color: var(--color-bg-primary);
+      background-color: var(--hs-bg-primary);
     }
   }
   .disabled\:bg-bg-secondary {
     &:disabled {
-      background-color: var(--color-bg-secondary);
-    }
-  }
-  .disabled\:bg-white {
-    &:disabled {
-      background-color: var(--color-white);
+      background-color: var(--hs-bg-secondary);
     }
   }
   .disabled\:text-\[var\(--color-fg-secondary\)\] {
@@ -3539,12 +3478,12 @@
   }
   .disabled\:text-text-disabled {
     &:disabled {
-      color: var(--color-text-disabled);
+      color: var(--hs-text-disabled);
     }
   }
   .disabled\:text-white {
     &:disabled {
-      color: var(--color-white);
+      color: #ffffff;
     }
   }
   .disabled\:opacity-50 {
@@ -3555,7 +3494,7 @@
   .disabled\:placeholder\:text-text-disabled {
     &:disabled {
       &::placeholder {
-        color: var(--color-text-disabled);
+        color: var(--hs-text-disabled);
       }
     }
   }
@@ -3605,12 +3544,12 @@
   }
   .in-data-\[focus\=true\]\:bg-bg-secondary {
     :where(*[data-focus="true"]) & {
-      background-color: var(--color-bg-secondary);
+      background-color: var(--hs-bg-secondary);
     }
   }
   .in-data-\[focus\=true\]\:text-text-primary {
     :where(*[data-focus="true"]) & {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .in-data-\[folder\=true\]\:w-\[calc\(260px-var\(--tree-padding\)\)\] {
@@ -3692,7 +3631,7 @@
   }
   .aria-invalid\:border-border-error {
     &[aria-invalid="true"] {
-      border-color: var(--color-border-error);
+      border-color: var(--color-red-500);
     }
   }
   .aria-invalid\:border-destructive {
@@ -3702,7 +3641,7 @@
   }
   .aria-invalid\:text-text-error-primary {
     &[aria-invalid="true"] {
-      color: var(--color-text-error-primary);
+      color: var(--hs-text-error-primary);
     }
   }
   .aria-invalid\:ring-2 {
@@ -3720,18 +3659,18 @@
     &[aria-invalid="true"] {
       --tw-ring-color: color-mix(in srgb, #d7270f 70%, transparent);
       @supports (color: color-mix(in lab, red, red)) {
-        --tw-ring-color: color-mix(in oklab, var(--color-utility-red) 70%, transparent);
+        --tw-ring-color: color-mix(in oklab, var(--color-red-500) 70%, transparent);
       }
     }
   }
   .aria-selected\:\!bg-bg-quaternary {
     &[aria-selected="true"] {
-      background-color: var(--color-bg-quaternary) !important;
+      background-color: var(--hs-bg-quaternary) !important;
     }
   }
   .aria-selected\:\!text-text-primary {
     &[aria-selected="true"] {
-      color: var(--color-text-primary) !important;
+      color: var(--hs-text-primary) !important;
     }
   }
   .aria-selected\:text-muted-foreground {
@@ -3759,7 +3698,7 @@
   }
   .data-\[active\=true\]\:bg-bg-brand-secondary {
     &[data-active="true"] {
-      background-color: var(--color-bg-brand-secondary);
+      background-color: var(--hs-bg-brand-secondary);
     }
   }
   .data-\[active\=true\]\:bg-sidebar-accent {
@@ -3779,7 +3718,7 @@
   }
   .data-\[active\=true\]\:text-text-primary {
     &[data-active="true"] {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .data-\[active\=true\]\:ring-\[3px\] {
@@ -3851,7 +3790,7 @@
   }
   .data-\[error\=true\]\:text-text-error-primary {
     &[data-error="true"] {
-      color: var(--color-text-error-primary);
+      color: var(--hs-text-error-primary);
     }
   }
   .data-\[inset\]\:pl-8 {
@@ -4030,7 +3969,7 @@
   }
   .data-\[placeholder\]\:text-text-tertiary {
     &[data-placeholder] {
-      color: var(--color-text-tertiary);
+      color: var(--hs-text-tertiary);
     }
   }
   .data-\[range-end\=true\]\:rounded-md {
@@ -4219,7 +4158,7 @@
     :is(& > *) {
       &[data-slot="button"] {
         &:disabled {
-          border-color: var(--color-border-disabled);
+          border-color: var(--hs-border-disabled);
         }
       }
     }
@@ -4228,7 +4167,7 @@
     :is(& > *) {
       &[data-slot="button"] {
         &:disabled {
-          background-color: var(--color-bg-primary);
+          background-color: var(--hs-bg-primary);
         }
       }
     }
@@ -4237,7 +4176,7 @@
     :is(& > *) {
       &[data-slot="button"] {
         &:disabled {
-          color: var(--color-text-disabled);
+          color: var(--hs-text-disabled);
         }
       }
     }
@@ -4304,7 +4243,7 @@
     :is(& > *) {
       &[data-slot="dropdown-menu-trigger"] {
         &:disabled {
-          border-color: var(--color-border-disabled);
+          border-color: var(--hs-border-disabled);
         }
       }
     }
@@ -4313,7 +4252,7 @@
     :is(& > *) {
       &[data-slot="dropdown-menu-trigger"] {
         &:disabled {
-          background-color: var(--color-bg-primary);
+          background-color: var(--hs-bg-primary);
         }
       }
     }
@@ -4322,7 +4261,7 @@
     :is(& > *) {
       &[data-slot="dropdown-menu-trigger"] {
         &:disabled {
-          color: var(--color-text-disabled);
+          color: var(--hs-text-disabled);
         }
       }
     }
@@ -4422,21 +4361,21 @@
   .\*\*\:data-\[slot\=tabs-list\]\:border-b-border-separator {
     :is(& *) {
       &[data-slot="tabs-list"] {
-        border-bottom-color: var(--color-border-separator);
+        border-bottom-color: var(--hs-border-separator);
       }
     }
   }
   .\*\*\:data-\[slot\=tabs-list\]\:bg-bg-secondary {
     :is(& *) {
       &[data-slot="tabs-list"] {
-        background-color: var(--color-bg-secondary);
+        background-color: var(--hs-bg-secondary);
       }
     }
   }
   .\*\*\:data-\[slot\=tabs-list\]\:bg-bg-tertiary {
     :is(& *) {
       &[data-slot="tabs-list"] {
-        background-color: var(--color-bg-tertiary);
+        background-color: var(--hs-bg-tertiary);
       }
     }
   }
@@ -4543,7 +4482,7 @@
   .\*\*\:data-\[slot\=tabs-trigger\]\:text-text-secondary {
     :is(& *) {
       &[data-slot="tabs-trigger"] {
-        color: var(--color-text-secondary);
+        color: var(--hs-text-secondary);
       }
     }
   }
@@ -4552,7 +4491,7 @@
       &[data-slot="tabs-trigger"] {
         &:hover {
           @media (hover: hover) {
-            color: var(--color-text-primary);
+            color: var(--hs-text-primary);
           }
         }
       }
@@ -4560,12 +4499,12 @@
   }
   .data-\[state\=active\]\:border-b-border-brand {
     &[data-state="active"] {
-      border-bottom-color: var(--color-border-brand);
+      border-bottom-color: var(--color-brand-500);
     }
   }
   .data-\[state\=active\]\:text-text-primary {
     &[data-state="active"] {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .\*\*\:data-\[slot\=tabs-trigger\]\:data-\[state\=active\]\:border-b-2 {
@@ -4582,7 +4521,7 @@
     :is(& *) {
       &[data-slot="tabs-trigger"] {
         &[data-state="active"] {
-          border-color: var(--color-border-secondary);
+          border-color: var(--hs-border-secondary);
         }
       }
     }
@@ -4591,7 +4530,7 @@
     :is(& *) {
       &[data-slot="tabs-trigger"] {
         &[data-state="active"] {
-          border-bottom-color: var(--color-border-dark);
+          border-bottom-color: var(--hs-border-dark);
         }
       }
     }
@@ -4600,7 +4539,7 @@
     :is(& *) {
       &[data-slot="tabs-trigger"] {
         &[data-state="active"] {
-          background-color: var(--color-bg-primary);
+          background-color: var(--hs-bg-primary);
         }
       }
     }
@@ -4609,7 +4548,7 @@
     :is(& *) {
       &[data-slot="tabs-trigger"] {
         &[data-state="active"] {
-          color: var(--color-text-primary);
+          color: var(--hs-text-primary);
         }
       }
     }
@@ -4633,7 +4572,7 @@
   }
   .data-\[state\=checked\]\:border-bg-link {
     &[data-state="checked"] {
-      border-color: var(--color-bg-link);
+      border-color: var(--hs-bg-link);
     }
   }
   .data-\[state\=checked\]\:bg-\[var\(--color-fg-link\)\] {
@@ -4643,22 +4582,22 @@
   }
   .data-\[state\=checked\]\:bg-bg-link {
     &[data-state="checked"] {
-      background-color: var(--color-bg-link);
+      background-color: var(--hs-bg-link);
     }
   }
   .data-\[state\=checked\]\:bg-bg-tertiary {
     &[data-state="checked"] {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--hs-bg-tertiary);
     }
   }
   .data-\[state\=checked\]\:text-text-primary {
     &[data-state="checked"] {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .data-\[state\=checked\]\:text-white {
     &[data-state="checked"] {
-      color: var(--color-white);
+      color: #ffffff;
     }
   }
   .group-hover\:data-\[state\=checked\]\:bg-transparent {
@@ -4674,7 +4613,7 @@
     &[data-state="checked"] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-secondary);
+          background-color: var(--hs-bg-secondary);
         }
       }
     }
@@ -4683,7 +4622,7 @@
     &:hover {
       @media (hover: hover) {
         &[data-state="checked"] {
-          background-color: var(--color-bg-link_hover);
+          background-color: var(--hs-bg-link-hover);
         }
       }
     }
@@ -4698,7 +4637,7 @@
   .disabled\:data-\[state\=checked\]\:border-border-secondary {
     &:disabled {
       &[data-state="checked"] {
-        border-color: var(--color-border-secondary);
+        border-color: var(--hs-border-secondary);
       }
     }
   }
@@ -4712,14 +4651,14 @@
   .disabled\:data-\[state\=checked\]\:bg-bg-link_disabled {
     &:disabled {
       &[data-state="checked"] {
-        background-color: var(--color-bg-link_disabled);
+        background-color: var(--hs-bg-link-disabled);
       }
     }
   }
   .disabled\:data-\[state\=checked\]\:bg-border-secondary {
     &:disabled {
       &[data-state="checked"] {
-        background-color: var(--color-border-secondary);
+        background-color: var(--hs-border-secondary);
       }
     }
   }
@@ -4735,7 +4674,7 @@
       &:hover {
         @media (hover: hover) {
           &[data-state="checked"] {
-            background-color: var(--color-bg-link_disabled);
+            background-color: var(--hs-bg-link-disabled);
           }
         }
       }
@@ -4836,7 +4775,7 @@
     :is(& *) {
       &[data-slot="tabs-trigger"] {
         &[data-state="inactive"] {
-          border-bottom-color: var(--color-border-secondary);
+          border-bottom-color: var(--hs-border-secondary);
         }
       }
     }
@@ -4854,7 +4793,7 @@
     :is(& *) {
       &[data-slot="tabs-trigger"] {
         &[data-state="inactive"] {
-          color: var(--color-text-secondary);
+          color: var(--hs-text-secondary);
         }
       }
     }
@@ -4871,7 +4810,7 @@
   }
   .data-\[state\=indeterminate\]\:text-white {
     &[data-state="indeterminate"] {
-      color: var(--color-white);
+      color: #ffffff;
     }
   }
   .disabled\:data-\[state\=indeterminate\]\:border-\[var\(--color-fg-disabled\)\] {
@@ -4897,17 +4836,17 @@
   }
   .data-\[state\=on\]\:border-border-separator {
     &[data-state="on"] {
-      border-color: var(--color-border-separator);
+      border-color: var(--hs-border-separator);
     }
   }
   .data-\[state\=on\]\:bg-bg-secondary {
     &[data-state="on"] {
-      background-color: var(--color-bg-secondary);
+      background-color: var(--hs-bg-secondary);
     }
   }
   .data-\[state\=on\]\:bg-bg-tertiary {
     &[data-state="on"] {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--hs-bg-tertiary);
     }
   }
   .data-\[state\=open\]\:animate-accordion-down {
@@ -4940,7 +4879,7 @@
   }
   .data-\[state\=open\]\:bg-bg-secondary {
     &[data-state="open"] {
-      background-color: var(--color-bg-secondary);
+      background-color: var(--hs-bg-secondary);
     }
   }
   .data-\[state\=open\]\:bg-secondary {
@@ -4955,12 +4894,12 @@
   }
   .data-\[state\=open\]\:text-text-primary {
     &[data-state="open"] {
-      color: var(--color-text-primary);
+      color: var(--hs-text-primary);
     }
   }
   .data-\[state\=open\]\:text-text-secondary {
     &[data-state="open"] {
-      color: var(--color-text-secondary);
+      color: var(--hs-text-secondary);
     }
   }
   .data-\[state\=open\]\:opacity-100 {
@@ -5048,7 +4987,7 @@
     &[data-state="open"] {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-secondary);
+          background-color: var(--hs-bg-secondary);
         }
       }
     }
@@ -5057,7 +4996,7 @@
     &[data-state="open"] {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-text-primary);
+          color: var(--hs-text-primary);
         }
       }
     }
@@ -5077,7 +5016,7 @@
   }
   .data-\[state\=unchecked\]\:bg-bg-secondary_inverse {
     &[data-state="unchecked"] {
-      background-color: var(--color-bg-secondary_inverse);
+      background-color: var(--hs-bg-secondary-inverse);
     }
   }
   .data-\[state\=unchecked\]\:opacity-0 {
@@ -5089,7 +5028,7 @@
     &:hover {
       @media (hover: hover) {
         &[data-state="unchecked"] {
-          background-color: var(--color-bg-secondary_inverse_hover);
+          background-color: var(--hs-bg-secondary-inverse-hover);
         }
       }
     }
@@ -5097,14 +5036,14 @@
   .focus-visible\:data-\[state\=unchecked\]\:border-bg-link {
     &:focus-visible {
       &[data-state="unchecked"] {
-        border-color: var(--color-bg-link);
+        border-color: var(--hs-bg-link);
       }
     }
   }
   .disabled\:data-\[state\=unchecked\]\:bg-bg-disabled {
     &:disabled {
       &[data-state="unchecked"] {
-        background-color: var(--color-bg-disabled);
+        background-color: var(--hs-bg-disabled);
       }
     }
   }
@@ -5113,7 +5052,7 @@
       &:hover {
         @media (hover: hover) {
           &[data-state="unchecked"] {
-            background-color: var(--color-bg-disabled);
+            background-color: var(--hs-bg-disabled);
           }
         }
       }
@@ -5136,13 +5075,13 @@
   }
   .data-\[variant\=destructive\]\:text-text-error-primary {
     &[data-variant="destructive"] {
-      color: var(--color-text-error-primary);
+      color: var(--hs-text-error-primary);
     }
   }
   .data-\[variant\=destructive\]\:focus\:bg-bg-error-tertiary {
     &[data-variant="destructive"] {
       &:focus {
-        background-color: var(--color-bg-error-tertiary);
+        background-color: var(--hs-bg-error-tertiary);
       }
     }
   }
@@ -5166,7 +5105,7 @@
   .data-\[variant\=destructive\]\:focus\:text-text-error-primary {
     &[data-variant="destructive"] {
       &:focus {
-        color: var(--color-text-error-primary);
+        color: var(--hs-text-error-primary);
       }
     }
   }
@@ -5210,7 +5149,7 @@
   }
   .data-\[vaul-drawer-direction\=bottom\]\:border-border-primary {
     &[data-vaul-drawer-direction="bottom"] {
-      border-color: var(--color-border-primary);
+      border-color: var(--hs-border-primary);
     }
   }
   .data-\[vaul-drawer-direction\=left\]\:inset-y-0 {
@@ -5236,7 +5175,7 @@
   }
   .data-\[vaul-drawer-direction\=left\]\:border-border-primary {
     &[data-vaul-drawer-direction="left"] {
-      border-color: var(--color-border-primary);
+      border-color: var(--hs-border-primary);
     }
   }
   .data-\[vaul-drawer-direction\=right\]\:inset-y-0 {
@@ -5262,7 +5201,7 @@
   }
   .data-\[vaul-drawer-direction\=right\]\:border-border-primary {
     &[data-vaul-drawer-direction="right"] {
-      border-color: var(--color-border-primary);
+      border-color: var(--hs-border-primary);
     }
   }
   .data-\[vaul-drawer-direction\=top\]\:inset-x-0 {
@@ -5299,7 +5238,7 @@
   }
   .data-\[vaul-drawer-direction\=top\]\:border-border-primary {
     &[data-vaul-drawer-direction="top"] {
-      border-color: var(--color-border-primary);
+      border-color: var(--hs-border-primary);
     }
   }
   .sm\:flex {
@@ -5721,7 +5660,7 @@
   }
   .\[\&_\[cmdk-group-heading\]\]\:text-text-secondary {
     & [cmdk-group-heading] {
-      color: var(--color-text-secondary);
+      color: var(--hs-text-secondary);
     }
   }
   .\[\&_\[cmdk-group\]\]\:flex {
@@ -5797,7 +5736,7 @@
   .even\:\[\&_\[data-slot\=tree-item-label\]\]\:bg-bg-secondary {
     &:nth-child(even) {
       & [data-slot=tree-item-label] {
-        background-color: var(--color-bg-secondary);
+        background-color: var(--hs-bg-secondary);
       }
     }
   }
@@ -5813,43 +5752,43 @@
   }
   .\[\&_svg\]\:text-text-link {
     & svg {
-      color: var(--color-text-link);
+      color: var(--hs-text-link);
     }
   }
   .\[\&_svg\]\:text-text-secondary {
     & svg {
-      color: var(--color-text-secondary);
+      color: var(--hs-text-secondary);
     }
   }
   .\[\&_svg\]\:text-utility-blue {
     & svg {
-      color: var(--color-utility-blue);
+      color: var(--color-blue-500);
     }
   }
   .\[\&_svg\]\:text-utility-green {
     & svg {
-      color: var(--color-utility-green);
+      color: var(--color-green-500);
     }
   }
   .\[\&_svg\]\:text-utility-red {
     & svg {
-      color: var(--color-utility-red);
+      color: var(--color-red-500);
     }
   }
   .\[\&_svg\]\:text-utility-violet {
     & svg {
-      color: var(--color-utility-violet);
+      color: var(--color-violet-500);
     }
   }
   .\[\&_svg\]\:text-utility-yellow {
     & svg {
-      color: var(--color-utility-yellow);
+      color: var(--color-yellow-600);
     }
   }
   .data-\[state\=on\]\:\[\&_svg\]\:text-text-primary {
     &[data-state="on"] {
       & svg {
-        color: var(--color-text-primary);
+        color: var(--hs-text-primary);
       }
     }
   }
@@ -5861,12 +5800,12 @@
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-fg-secondary {
     & svg:not([class*='text-']) {
-      color: var(--color-fg-secondary);
+      color: var(--hs-fg-secondary);
     }
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-fg-tertiary {
     & svg:not([class*='text-']) {
-      color: var(--color-fg-tertiary);
+      color: var(--hs-fg-tertiary);
     }
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground {
@@ -5876,14 +5815,14 @@
   }
   .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-text-tertiary {
     & svg:not([class*='text-']) {
-      color: var(--color-text-tertiary);
+      color: var(--hs-text-tertiary);
     }
   }
   .hover\:\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-fg-tertiary_hover {
     &:hover {
       @media (hover: hover) {
         & svg:not([class*='text-']) {
-          color: var(--color-fg-tertiary_hover);
+          color: var(--hs-fg-tertiary-hover);
         }
       }
     }
@@ -5901,14 +5840,14 @@
   }
   .\[\&_tr\]\:border-border-secondary {
     & tr {
-      border-color: var(--color-border-secondary);
+      border-color: var(--hs-border-secondary);
     }
   }
   .\[\&_tr\]\:hover\:bg-bg-hover {
     & tr {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-hover);
+          background-color: var(--hs-bg-hover);
         }
       }
     }
@@ -5927,7 +5866,7 @@
   }
   .\[\&\:has\(\[data-state\=checked\]\)\]\:bg-bg-tertiary {
     &:has([data-state=checked]) {
-      background-color: var(--color-bg-tertiary);
+      background-color: var(--hs-bg-tertiary);
     }
   }
   .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0 {
@@ -6003,7 +5942,7 @@
     &[data-variant="destructive"] {
       :is(& > *) {
         &:is(svg) {
-          color: var(--color-text-error-primary) !important;
+          color: var(--hs-text-error-primary) !important;
         }
       }
     }
@@ -6030,7 +5969,7 @@
   .data-\[variant\=outline\]\:\[\&\:not\(\:last-child\)\]\:border-r-border-primary {
     &[data-variant="outline"] {
       &:not(:last-child) {
-        border-right-color: var(--color-border-primary);
+        border-right-color: var(--hs-border-primary);
       }
     }
   }
@@ -6139,32 +6078,32 @@
   }
   .\[\&\>svg\]\:text-fg-error-primary {
     &>svg {
-      color: var(--color-fg-error-primary);
+      color: var(--hs-fg-error-primary);
     }
   }
   .\[\&\>svg\]\:text-fg-info-primary {
     &>svg {
-      color: var(--color-fg-info-primary);
+      color: var(--hs-fg-info-primary);
     }
   }
   .\[\&\>svg\]\:text-fg-neutral-primary {
     &>svg {
-      color: var(--color-fg-neutral-primary);
+      color: var(--hs-fg-neutral-primary);
     }
   }
   .\[\&\>svg\]\:text-fg-primary_on-brand {
     &>svg {
-      color: var(--color-fg-primary_on-brand);
+      color: var(--hs-fg-primary-on-brand);
     }
   }
   .\[\&\>svg\]\:text-fg-success-primary {
     &>svg {
-      color: var(--color-fg-success-primary);
+      color: var(--hs-fg-success-primary);
     }
   }
   .\[\&\>svg\]\:text-fg-warning-primary {
     &>svg {
-      color: var(--color-fg-warning-primary);
+      color: var(--hs-fg-warning-primary);
     }
   }
   .\[\&\>svg\]\:text-muted-foreground {
@@ -6180,7 +6119,7 @@
   .data-\[active\=true\]\:\[\&\>svg\]\:text-text-brand-primary {
     &[data-active="true"] {
       &>svg {
-        color: var(--color-text-brand-primary);
+        color: var(--hs-text-brand-primary);
       }
     }
   }
@@ -6236,7 +6175,9 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-error-primary_inverse_hover);
+          background-color: var(
+		--hs-bg-error-primary-inverse-hover
+	);
         }
       }
     }
@@ -6245,7 +6186,7 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-link_hover);
+          background-color: var(--hs-bg-link-hover);
         }
       }
     }
@@ -6254,7 +6195,7 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-secondary);
+          background-color: var(--hs-bg-secondary);
         }
       }
     }
@@ -6263,7 +6204,7 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-bg-tertiary);
+          background-color: var(--hs-bg-tertiary);
         }
       }
     }
@@ -6272,7 +6213,7 @@
     a& {
       &:hover {
         @media (hover: hover) {
-          color: var(--color-text-primary);
+          color: var(--hs-text-primary);
         }
       }
     }
@@ -6386,7 +6327,7 @@
   --sidebar-ring: oklch(0.708 0 0);
 }
 .dark {
-  --background: oklch(0.145 0 0);
+  --background: var(--color-bg-primary);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);
   --card-foreground: oklch(0.985 0 0);
@@ -6409,11 +6350,11 @@
   --chart-3: oklch(0.769 0.188 70.08);
   --chart-4: oklch(0.627 0.265 303.9);
   --chart-5: oklch(0.645 0.246 16.439);
-  --sidebar: oklch(0.205 0 0);
+  --sidebar: var(--color-bg-primary);
   --sidebar-foreground: oklch(0.985 0 0);
   --sidebar-primary: oklch(0.488 0.243 264.376);
   --sidebar-primary-foreground: oklch(0.985 0 0);
-  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent: oklch(0.205 0 0);
   --sidebar-accent-foreground: oklch(0.985 0 0);
   --sidebar-border: oklch(1 0 0 / 10%);
   --sidebar-ring: oklch(0.556 0 0);
@@ -6429,9 +6370,21 @@
   body {
     background-color: var(--background);
     color: var(--foreground);
+    caret-color: var(--foreground);
     font-family: "Inter", system-ui, sans-serif;
   }
 }
+:root {
+  --hs-elements-readable: var(--color-neutral-900);
+  --hs-elements-readable-inv: var(--color-neutral-50);
+  --hs-elements-assistive: var(--color-neutral-500);
+  --hs-elements-disabled: var(--color-neutral-300);
+  --hs-surface-0: var(--color-neutral-50);
+  --hs-surface-1: var(--color-neutral-100);
+  --hs-surface-selected: var(--color-neutral-200);
+  --hs-border-default: var(--color-neutral-200);
+  --hs-separator: var(--color-neutral-200);
+}
 body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
@@ -6576,6 +6529,198 @@ body {
 .lucide {
   stroke-width: 1.5px;
 }
+:root {
+  --hs-selection: var(--color-blue-300);
+  --hs-text-primary: var(--color-neutral-900);
+  --hs-text-secondary: var(--color-neutral-500);
+  --hs-text-secondary-hover: var(--color-neutral-600);
+  --hs-text-primary-on-brand: var(--color-neutral-50);
+  --hs-text-secondary-on-brand: var(--color-neutral-100);
+  --hs-text-tertiary: var(--color-neutral-400);
+  --hs-text-tertiary-hover: var(--color-neutral-500);
+  --hs-text-quaternary: var(--color-neutral-400);
+  --hs-text-quaternary-hover: var(--color-neutral-500);
+  --hs-text-quaternary-on-brand: var(--color-neutral-200);
+  --hs-text-disabled: var(--color-neutral-300);
+  --hs-text-link: var(--color-blue-500);
+  --hs-text-link-hover: var(--color-blue-700);
+  --hs-text-link-disabled: var(--color-blue-400);
+  --hs-text-brand-primary: var(--color-brand-500);
+  --hs-text-brand-secondary: var(--color-brand-300);
+  --hs-text-brand-secondary-hover: var(--color-brand-400);
+  --hs-text-error-primary: var(--color-red-500);
+  --hs-text-error-secondary: var(--color-red-400);
+  --hs-text-success-primary: var(--color-green-500);
+  --hs-text-warning-primary: var(--color-yellow-700);
+  --hs-text-info-primary: var(--color-blue-600);
+  --hs-border-primary: var(--color-neutral-300);
+  --hs-border-primary-hover: var(--color-neutral-400);
+  --hs-border-secondary: var(--color-neutral-200);
+  --hs-border-separator: var(--color-neutral-200);
+  --hs-border-disabled: var(--color-neutral-100);
+  --hs-border-dark: var(--color-neutral-500);
+  --hs-bg-primary: #ffffff;
+  --hs-bg-primary-inverse: var(--color-neutral-900);
+  --hs-bg-secondary: var(--color-neutral-50);
+  --hs-bg-secondary-inverse: var(--color-neutral-500);
+  --hs-bg-secondary-inverse-hover: var(--color-neutral-600);
+  --hs-bg-tertiary: var(--color-neutral-100);
+  --hs-bg-tertiary-inverse: var(--color-neutral-400);
+  --hs-bg-quaternary: var(--color-neutral-200);
+  --hs-bg-overlay: var(--color-neutral-900);
+  --hs-bg-disabled: var(--color-neutral-300);
+  --hs-bg-hover: var(--color-blue-200);
+  --hs-bg-dark-tertiary: var(--color-neutral-400);
+  --hs-bg-brand-primary: var(--color-brand-50);
+  --hs-bg-brand-primary-inverse: var(--color-brand-500);
+  --hs-bg-brand-secondary: var(--color-brand-100);
+  --hs-bg-brand-tertiary: var(--color-brand-200);
+  --hs-bg-link: var(--color-blue-500);
+  --hs-bg-link-disabled: var(--color-blue-400);
+  --hs-bg-link-hover: var(--color-blue-600);
+  --hs-bg-error-primary: var(--color-red-50);
+  --hs-bg-error-primary-inverse: var(--color-red-500);
+  --hs-bg-error-primary-inverse-hover: var(--color-red-700);
+  --hs-bg-error-secondary: var(--color-red-100);
+  --hs-bg-error-tertiary: var(--color-red-200);
+  --hs-bg-success-primary: var(--color-green-50);
+  --hs-bg-success-primary-inverse: var(--color-green-500);
+  --hs-bg-success-secondary: var(--color-green-100);
+  --hs-bg-warning-primary: var(--color-yellow-50);
+  --hs-bg-warning-primary-inverse: #f4cb00;
+  --hs-bg-warning-secondary: var(--color-yellow-100);
+  --hs-bg-info-primary: var(--color-blue-100);
+  --hs-bg-info-primary-inverse: var(--color-blue-500);
+  --hs-bg-neutral-primary: var(--color-neutral-100);
+  --hs-bg-neutral-primary-inverse: var(--color-neutral-900);
+  --hs-fg-primary: var(--color-neutral-900);
+  --hs-fg-primary-inverse: #ffffff;
+  --hs-fg-primary-on-brand: var(--color-neutral-50);
+  --hs-fg-secondary: var(--color-neutral-700);
+  --hs-fg-secondary-inverse: var(--color-neutral-400);
+  --hs-fg-secondary-hover: var(--color-neutral-800);
+  --hs-fg-secondary-on-brand: var(--color-neutral-100);
+  --hs-fg-tertiary: var(--color-neutral-500);
+  --hs-fg-tertiary-hover: var(--color-neutral-600);
+  --hs-fg-tertiary-on-brand: var(--color-neutral-200);
+  --hs-fg-disabled: var(--color-neutral-300);
+  --hs-fg-brand-primary: var(--color-brand-500);
+  --hs-fg-brand-secondary: var(--color-brand-300);
+  --hs-fg-link: var(--color-blue-500);
+  --hs-fg-error-primary: var(--color-red-500);
+  --hs-fg-error-secondary: var(--color-red-400);
+  --hs-fg-success-primary: var(--color-green-500);
+  --hs-fg-success-secondary: var(--color-green-400);
+  --hs-fg-warning-primary: var(--color-yellow-700);
+  --hs-fg-warning-secondary: var(--color-yellow-400);
+  --hs-fg-info-primary: var(--color-blue-600);
+  --hs-fg-neutral-primary: var(--color-neutral-500);
+  --hs-syntax-property: #ea4a35;
+  --hs-syntax-string: #405cbf;
+  --hs-syntax-number: #00a984;
+  --hs-syntax-keyword: #569cd6;
+  --hs-syntax-comment: #00a984;
+}
+.dark {
+  --hs-elements-readable: oklch(0.985 0 0);
+  --hs-elements-readable-inv: oklch(0.205 0 0);
+  --hs-elements-assistive: oklch(0.556 0 0);
+  --hs-elements-disabled: oklch(0.371 0 0);
+  --hs-surface-0: oklch(0.178 0 0);
+  --hs-surface-1: oklch(0.205 0 0);
+  --hs-surface-selected: oklch(0.269 0 0);
+  --hs-border-default: oklch(1 0 0 / 10%);
+  --hs-separator: oklch(1 0 0 / 8%);
+  --hs-selection: var(--color-blue-800);
+  --hs-text-primary: oklch(0.985 0 0);
+  --hs-text-secondary: oklch(0.556 0 0);
+  --hs-text-secondary-hover: oklch(0.708 0 0);
+  --hs-text-primary-on-brand: oklch(0.985 0 0);
+  --hs-text-secondary-on-brand: oklch(0.87 0 0);
+  --hs-text-tertiary: oklch(0.45 0 0);
+  --hs-text-tertiary-hover: oklch(0.556 0 0);
+  --hs-text-quaternary: oklch(0.45 0 0);
+  --hs-text-quaternary-hover: oklch(0.556 0 0);
+  --hs-text-disabled: oklch(0.371 0 0);
+  --hs-text-link: var(--color-blue-400);
+  --hs-text-link-hover: var(--color-blue-300);
+  --hs-text-link-disabled: var(--color-blue-600);
+  --hs-text-brand-primary: var(--color-brand-400);
+  --hs-text-brand-secondary: var(--color-brand-300);
+  --hs-text-brand-secondary-hover: var(--color-brand-200);
+  --hs-text-error-primary: var(--color-red-400);
+  --hs-text-error-secondary: var(--color-red-300);
+  --hs-text-success-primary: var(--color-green-400);
+  --hs-text-warning-primary: var(--color-yellow-500);
+  --hs-text-info-primary: var(--color-blue-400);
+  --hs-border-primary: oklch(1 0 0 / 12%);
+  --hs-border-primary-hover: oklch(1 0 0 / 18%);
+  --hs-border-secondary: oklch(1 0 0 / 8%);
+  --hs-border-separator: oklch(1 0 0 / 8%);
+  --hs-border-disabled: oklch(1 0 0 / 5%);
+  --hs-border-dark: oklch(0.556 0 0);
+  --hs-bg-primary: #1a1a1a;
+  --hs-bg-primary-inverse: oklch(0.985 0 0);
+  --hs-bg-secondary: oklch(0.188 0 0);
+  --hs-bg-secondary-inverse: oklch(0.556 0 0);
+  --hs-bg-secondary-inverse-hover: oklch(0.708 0 0);
+  --hs-bg-tertiary: oklch(0.198 0 0);
+  --hs-bg-tertiary-inverse: oklch(0.45 0 0);
+  --hs-bg-quaternary: oklch(0.269 0 0);
+  --hs-bg-overlay: oklch(0.1 0 0);
+  --hs-bg-disabled: oklch(0.269 0 0);
+  --hs-bg-hover: var(--color-blue-900);
+  --hs-bg-dark-tertiary: oklch(0.371 0 0);
+  --hs-bg-brand-primary: var(--color-brand-950);
+  --hs-bg-brand-primary-inverse: var(--color-brand-400);
+  --hs-bg-brand-secondary: var(--color-brand-900);
+  --hs-bg-brand-tertiary: var(--color-brand-800);
+  --hs-bg-link: var(--color-blue-500);
+  --hs-bg-link-hover: var(--color-blue-400);
+  --hs-bg-link-disabled: var(--color-blue-600);
+  --hs-bg-error-primary: var(--color-red-950);
+  --hs-bg-error-primary-inverse: var(--color-red-500);
+  --hs-bg-error-primary-inverse-hover: var(--color-red-400);
+  --hs-bg-error-secondary: var(--color-red-900);
+  --hs-bg-error-tertiary: var(--color-red-800);
+  --hs-bg-success-primary: var(--color-green-950);
+  --hs-bg-success-primary-inverse: var(--color-green-500);
+  --hs-bg-success-secondary: var(--color-green-900);
+  --hs-bg-warning-primary: var(--color-yellow-950);
+  --hs-bg-warning-primary-inverse: var(--color-yellow-500);
+  --hs-bg-warning-secondary: var(--color-yellow-900);
+  --hs-bg-info-primary: var(--color-blue-900);
+  --hs-bg-info-primary-inverse: var(--color-blue-400);
+  --hs-bg-neutral-primary: oklch(0.205 0 0);
+  --hs-bg-neutral-primary-inverse: oklch(0.985 0 0);
+  --hs-fg-primary: oklch(0.985 0 0);
+  --hs-fg-primary-inverse: oklch(0.205 0 0);
+  --hs-fg-primary-on-brand: oklch(0.985 0 0);
+  --hs-fg-secondary: oklch(0.708 0 0);
+  --hs-fg-secondary-inverse: oklch(0.371 0 0);
+  --hs-fg-secondary-hover: oklch(0.87 0 0);
+  --hs-fg-secondary-on-brand: oklch(0.87 0 0);
+  --hs-fg-tertiary: oklch(0.556 0 0);
+  --hs-fg-tertiary-hover: oklch(0.708 0 0);
+  --hs-fg-tertiary-on-brand: oklch(0.708 0 0);
+  --hs-fg-disabled: oklch(0.371 0 0);
+  --hs-fg-brand-primary: var(--color-brand-400);
+  --hs-fg-brand-secondary: var(--color-brand-300);
+  --hs-fg-link: var(--color-blue-400);
+  --hs-fg-error-primary: var(--color-red-400);
+  --hs-fg-error-secondary: var(--color-red-300);
+  --hs-fg-success-primary: var(--color-green-400);
+  --hs-fg-success-secondary: var(--color-green-300);
+  --hs-fg-warning-primary: var(--color-yellow-500);
+  --hs-fg-warning-secondary: var(--color-yellow-400);
+  --hs-fg-info-primary: var(--color-blue-400);
+  --hs-fg-neutral-primary: oklch(0.556 0 0);
+  --hs-syntax-property: #f87171;
+  --hs-syntax-string: #7cacf8;
+  --hs-syntax-number: #34d399;
+  --hs-syntax-keyword: #7cacf8;
+  --hs-syntax-comment: #6b7280;
+}
 .no-scrollbar::-webkit-scrollbar {
   display: none;
 }