@helpwave/hightide 0.1.48 → 0.3.0

package/dist/style/globals.css

@@ -7,26 +7,23 @@
       "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
     --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
       "Courier New", monospace;
-    --color-red-50: #FFF9F9;
-    --color-red-100: #FBE0E2;
-    --color-red-300: #F4A3A7;
     --color-red-400: #E3798A;
     --color-red-500: #DC576D;
+    --color-red-600: #D53550;
     --color-orange-100: #FBECD9;
     --color-orange-500: #EA9E40;
+    --color-orange-600: #c18133;
     --color-green-500: #69CB81;
+    --color-green-600: #61bf78;
     --color-green-700: #53a567;
-    --color-blue-50: #F6FAFF;
-    --color-blue-100: #D6E3F9;
-    --color-blue-200: #99B9EF;
     --color-blue-400: oklch(70.7% 0.165 254.624);
     --color-blue-500: #3272DF;
-    --color-blue-800: #1A4080;
+    --color-blue-600: #285BB2;
     --color-blue-900: #11243E;
-    --color-purple-50: #EFE6FD;
     --color-purple-100: #CEB0FA;
     --color-purple-400: #8470C5;
     --color-purple-500: #694BB4;
+    --color-purple-600: #56389B;
     --color-gray-50: #F2F2F2;
     --color-gray-100: #E6E6E6;
     --color-gray-200: #CCCCCC;
@@ -37,7 +34,6 @@
     --color-gray-700: #4D4D4D;
     --color-gray-800: #333333;
     --color-gray-900: #1A1A1A;
-    --color-black: #000000;
     --color-white: #FFFFFF;
     --spacing: 0.25rem;
     --text-xs: calc(12 / 16 * 1rem);
@@ -72,23 +68,25 @@
     --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     --default-font-family: var(--font-sans);
     --default-mono-font-family: var(--font-mono);
-    --color-gray-25: #F8F8F8;
     --color-gray-75: #EEEEEE;
-    --color-gray-150: #D8D8D8;
     --color-gray-750: #3F3F3F;
     --color-gray-850: #222222;
     --color-background: var(--color-gray-75);
     --color-on-background: var(--color-text-primary);
     --color-warning: var(--color-orange-500);
     --color-on-warning: var(--color-white);
+    --color-warning-hover: var(--color-orange-600);
     --color-positive: var(--color-green-500);
     --color-on-positive: var(--color-white);
+    --color-positive-hover: var(--color-green-600);
     --color-negative: var(--color-red-500);
     --color-on-negative: var(--color-white);
+    --color-negative-hover: var(--color-red-600);
     --color-disabled: var(--color-gray-300);
-    --color-disabled-background: var(--color-gray-100);
+    --color-on-disabled: var(--color-gray-500);
     --color-surface: var(--color-gray-50);
     --color-on-surface: var(--color-text-primary);
+    --color-surface-hover: var(--color-gray-100);
     --color-surface-variant: var(--color-white);
     --color-surface-warning: var(--color-orange-100);
     --color-text-primary: var(--color-gray-900);
@@ -98,41 +96,20 @@
     --color-label: var(--color-gray-700);
     --color-primary: var(--color-purple-500);
     --color-on-primary: var(--color-white);
-    --color-secondary: var(--color-blue-800);
+    --color-primary-hover: var(--color-purple-600);
+    --color-secondary: var(--color-blue-500);
     --color-on-secondary: var(--color-white);
+    --color-secondary-hover: var(--color-blue-600);
+    --color-neutral: var(--color-gray-50);
+    --color-on-neutral: var(--color-text-primary);
+    --color-neutral-hover: var(--color-gray-100);
+    --color-neutral-text: var(--color-text-primary);
+    --color-neutral-text-hover: var(--color-text-primary);
+    --color-neutral-outline: var(--color-text-primary);
+    --color-neutral-outline-hover: var(--color-gray-700);
     --color-highlight: var(--color-blue-500);
-    --color-button-outline-primary-icon: var(--color-primary);
-    --color-button-outline-primary-text: var(--color-primary);
-    --color-button-solid-primary-background: var(--color-primary);
-    --color-button-solid-primary-text: var(--color-on-primary);
-    --color-button-solid-primary-icon: var(--color-on-primary);
-    --color-button-solid-secondary-background: var(--color-purple-50);
-    --color-button-solid-secondary-text: var(--color-primary);
-    --color-button-solid-secondary-icon: var(--color-primary);
-    --color-button-solid-tertiary-background: var(--color-gray-50);
-    --color-button-solid-tertiary-icon: var(--color-gray-500);
-    --color-button-solid-tertiary-text: var(--color-gray-500);
-    --color-button-solid-neutral-background: var(--color-gray-150);
-    --color-button-solid-neutral-icon: var(--color-text-primary);
-    --color-button-solid-neutral-text: var(--color-text-primary);
-    --color-button-solid-positive-background: var(--color-positive);
-    --color-button-solid-positive-icon: var(--color-on-positive);
-    --color-button-solid-positive-text: var(--color-on-positive);
-    --color-button-solid-warning-background: var(--color-warning);
-    --color-button-solid-warning-icon: var(--color-on-warning);
-    --color-button-solid-warning-text: var(--color-on-warning);
-    --color-button-solid-negative-background: var(--color-negative);
-    --color-button-solid-negative-icon: var(--color-on-negative);
-    --color-button-solid-negative-text: var(--color-on-negative);
-    --color-button-text-hover-background: #77777733;
-    --color-button-text-neutral-text: var(--color-gray-800);
-    --color-button-text-neutral-icon: var(--color-gray-800);
-    --color-button-text-negative-text: var(--color-negative);
-    --color-button-text-negative-icon: var(--color-negative);
-    --color-button-text-primary-text: var(--color-primary);
-    --color-button-text-primary-icon: var(--color-primary);
     --color-carousel-dot-active: var(--color-primary);
-    --color-carousel-dot-disabled: var(--color-disabled-background);
+    --color-carousel-dot-disabled: var(--color-disabled);
     --color-input-background: var(--color-surface-variant);
     --color-input-text: var(--color-on-surface);
     --color-menu-background: var(--color-surface-variant);
@@ -144,8 +121,6 @@
     --color-progress-indicator-background: var(--color-gray-300);
     --color-property-title-background: var(--color-gray-100);
     --color-property-title-text: var(--color-text-secondary);
-    --color-scrollbar-track: #00000033;
-    --color-scrollbar-thumb: var(--color-gray-600);
     --color-stepperbar-dot-active: var(--color-primary);
     --color-stepperbar-dot-normal: var(--color-purple-100);
     --color-stepperbar-dot-disabled: var(--color-description);
@@ -159,30 +134,6 @@
     @supports (color: color-mix(in lab, red, red)) {
       --color-table-row-hover-background: color-mix(in srgb, var(--color-purple-500) 15%, var(--color-surface));
     }
-    --color-tag-dark-background: var(--color-gray-800);
-    --color-tag-dark-text: var(--color-gray-100);
-    --color-tag-dark-icon: var(--color-gray-100);
-    --color-tag-default-background: #50687C;
-    --color-tag-default-text: var(--color-gray-100);
-    --color-tag-default-icon: var(--color-gray-100);
-    --color-tag-green-background: #E2E9DB;
-    --color-tag-green-text: #7A977E;
-    --color-tag-green-icon: #7A977E;
-    --color-tag-yellow-background: #FEEACB;
-    --color-tag-yellow-text: #C79345;
-    --color-tag-yellow-icon: #C79345;
-    --color-tag-red-background: #FEE0DD;
-    --color-tag-red-text: #D67268;
-    --color-tag-red-icon: #D67268;
-    --color-tag-blue-background: #DBE2F3;
-    --color-tag-blue-text: #758ECE;
-    --color-tag-blue-icon: #758ECE;
-    --color-tag-pink-background: #F3DBE7;
-    --color-tag-pink-text: #CE75A0;
-    --color-tag-pink-icon: #CE75A0;
-    --color-tag-orange-background: #FEEACB;
-    --color-tag-orange-text: #EA8E00;
-    --color-tag-orange-icon: #EA8E00;
     --color-text-image-primary-background: var(--color-primary);
     --color-text-image-primary-text: var(--color-white);
     --color-text-image-secondary-background: var(--color-blue-500);
@@ -418,18 +369,12 @@
   .left-full {
     left: 100%;
   }
+  .z-1 {
+    z-index: 1;
+  }
   .z-10 {
     z-index: 10;
   }
-  .z-200 {
-    z-index: 200;
-  }
-  .z-2000 {
-    z-index: 2000;
-  }
-  .z-2001 {
-    z-index: 2001;
-  }
   .z-\[1\] {
     z-index: 1;
   }
@@ -472,9 +417,6 @@
   .\!m-0 {
     margin: calc(var(--spacing) * 0) !important;
   }
-  .mx-1 {
-    margin-inline: calc(var(--spacing) * 1);
-  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -502,18 +444,12 @@
   .mt-\[6px\] {
     margin-top: 6px;
   }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .mr-8 {
     margin-right: calc(var(--spacing) * 8);
   }
   .mr-\[6px\] {
     margin-right: 6px;
   }
-  .mb-1 {
-    margin-bottom: calc(var(--spacing) * 1);
-  }
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
@@ -523,9 +459,6 @@
   .ml-0\.5 {
     margin-left: calc(var(--spacing) * 0.5);
   }
-  .ml-1 {
-    margin-left: calc(var(--spacing) * 1);
-  }
   .ml-\[6px\] {
     margin-left: 6px;
   }
@@ -559,11 +492,6 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 6);
   }
-  .row {
-    display: flex;
-    flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
-  }
   .flex-col-0 {
     display: flex;
     flex-direction: column;
@@ -663,9 +591,6 @@
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -687,12 +612,6 @@
   .h-128 {
     height: calc(var(--spacing) * 128);
   }
-  .h-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    height: calc(100% - var(--scrollbar-size));
-  }
-  .h-\[var\(--scrollbar-size\)\] {
-    height: var(--scrollbar-size);
-  }
   .h-full {
     height: 100%;
   }
@@ -711,8 +630,8 @@
   .max-h-16 {
     max-height: calc(var(--spacing) * 16);
   }
-  .max-h-32 {
-    max-height: calc(var(--spacing) * 32);
+  .max-h-71 {
+    max-height: calc(var(--spacing) * 71);
   }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
@@ -741,15 +660,12 @@
   .min-h-60 {
     min-height: calc(var(--spacing) * 60);
   }
-  .min-h-\[250px\] {
-    min-height: 250px;
+  .min-h-71 {
+    min-height: calc(var(--spacing) * 71);
   }
   .min-h-\[400px\] {
     min-height: 400px;
   }
-  .min-h-\[var\(--scrollbar-size\)\] {
-    min-height: var(--scrollbar-size);
-  }
   .\!w-fit {
     width: fit-content !important;
   }
@@ -777,6 +693,9 @@
   .w-10 {
     width: calc(var(--spacing) * 10);
   }
+  .w-24 {
+    width: calc(var(--spacing) * 24);
+  }
   .w-40 {
     width: calc(var(--spacing) * 40);
   }
@@ -801,12 +720,6 @@
   .w-\[400px\] {
     width: 400px;
   }
-  .w-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    width: calc(100% - var(--scrollbar-size));
-  }
-  .w-\[var\(--scrollbar-size\)\] {
-    width: var(--scrollbar-size);
-  }
   .w-fit {
     width: fit-content;
   }
@@ -834,14 +747,11 @@
   .max-w-20 {
     max-width: calc(var(--spacing) * 20);
   }
-  .max-w-40 {
-    max-width: calc(var(--spacing) * 40);
-  }
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
-  .max-w-60 {
-    max-width: calc(var(--spacing) * 60);
+  .max-w-56 {
+    max-width: calc(var(--spacing) * 56);
   }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
@@ -861,21 +771,24 @@
   .min-w-8 {
     min-width: calc(var(--spacing) * 8);
   }
+  .min-w-16 {
+    min-width: calc(var(--spacing) * 16);
+  }
   .min-w-20 {
     min-width: calc(var(--spacing) * 20);
   }
   .min-w-32 {
     min-width: calc(var(--spacing) * 32);
   }
-  .min-w-40 {
-    min-width: calc(var(--spacing) * 40);
-  }
   .min-w-48 {
     min-width: calc(var(--spacing) * 48);
   }
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
+  .min-w-80 {
+    min-width: calc(var(--spacing) * 80);
+  }
   .min-w-\[40px\] {
     min-width: 40px;
   }
@@ -885,12 +798,6 @@
   .min-w-\[220px\] {
     min-width: 220px;
   }
-  .min-w-\[320px\] {
-    min-width: 320px;
-  }
-  .min-w-\[var\(--scrollbar-size\)\] {
-    min-width: var(--scrollbar-size);
-  }
   .flex-1 {
     flex: 1;
   }
@@ -903,6 +810,11 @@
   .grow {
     flex-grow: 1;
   }
+  .-translate-1\/2 {
+    --tw-translate-x: calc(calc(1/2 * 100%) * -1);
+    --tw-translate-y: calc(calc(1/2 * 100%) * -1);
+    translate: var(--tw-translate-x) var(--tw-translate-y);
+  }
   .-translate-x-1\/2 {
     --tw-translate-x: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
@@ -1083,6 +995,22 @@
     border-top-right-radius: var(--radius-xl);
     border-bottom-right-radius: var(--radius-xl);
   }
+  .coloring-outline-hover {
+    border-style: var(--tw-border-style);
+    border-width: 1px;
+    border-color: var(--coloring-border,var(--coloring-outline,var(--coloring-color)));
+    color: var(--coloring-outline,var(--coloring-color));
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--coloring-border-hover,--coloring-hover);
+      }
+    }
+    &:hover {
+      @media (hover: hover) {
+        color: var(--coloring-outline-hover,var(--coloring-hover));
+      }
+    }
+  }
   .\!border-0 {
     border-style: var(--tw-border-style) !important;
     border-width: 0px !important;
@@ -1141,15 +1069,12 @@
       border-color: color-mix(in oklab, var(--color-divider) 50%, transparent);
     }
   }
-  .border-inherit {
-    border-color: inherit;
+  .border-on-background {
+    border-color: var(--color-on-background);
   }
   .border-primary {
     border-color: var(--color-primary);
   }
-  .border-secondary {
-    border-color: var(--color-secondary);
-  }
   .border-transparent {
     border-color: transparent;
   }
@@ -1183,8 +1108,44 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
-  .\!bg-red-400 {
-    background-color: var(--color-red-400) !important;
+  .coloring-solid-hover {
+    background-color: var(--coloring-solid-color,var(--coloring-color));
+    color: var(--coloring-solid-text,var(--coloring-on-color));
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--coloring-solid-hover,var(--coloring-hover));
+      }
+    }
+  }
+  .coloring-tonal-hover {
+    background-color: var(--coloring-color);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--coloring-color) 20%, transparent);
+    }
+    color: var(--coloring-color);
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--coloring-color);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--coloring-color) 30%, transparent);
+        }
+      }
+    }
+  }
+  .coloring-solid {
+    background-color: var(--coloring-solid-color,var(--coloring-color));
+    color: var(--coloring-solid-text,var(--coloring-on-color));
+  }
+  .coloring-text-hover {
+    color: var(--coloring-text,var(--coloring-color));
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)));
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--coloring-text-hover,var(--coloring-text,var(--coloring-color))) 20%, transparent);
+        }
+      }
+    }
   }
   .\!bg-warning {
     background-color: var(--color-warning) !important;
@@ -1192,20 +1153,17 @@
   .bg-blue-400 {
     background-color: var(--color-blue-400);
   }
-  .bg-button-solid-neutral-background {
-    background-color: var(--color-button-solid-neutral-background);
-  }
-  .bg-button-solid-primary-background {
-    background-color: var(--color-button-solid-primary-background);
-  }
   .bg-carousel-dot-active {
     background-color: var(--color-carousel-dot-active);
   }
   .bg-carousel-dot-disabled {
     background-color: var(--color-carousel-dot-disabled);
   }
-  .bg-disabled-background {
-    background-color: var(--color-disabled-background);
+  .bg-disabled\/30 {
+    background-color: color-mix(in srgb, #B3B3B3 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      background-color: color-mix(in oklab, var(--color-disabled) 30%, transparent);
+    }
   }
   .bg-input-background {
     background-color: var(--color-input-background);
@@ -1264,18 +1222,6 @@
   .bg-red-400 {
     background-color: var(--color-red-400);
   }
-  .bg-scrollbar-thumb {
-    background-color: var(--color-scrollbar-thumb);
-  }
-  .bg-scrollbar-track {
-    background-color: var(--color-scrollbar-track);
-  }
-  .bg-scrollbar-track\/50 {
-    background-color: color-mix(in srgb, #00000033 50%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-scrollbar-track) 50%, transparent);
-    }
-  }
   .bg-secondary {
     background-color: var(--color-secondary);
   }
@@ -1294,30 +1240,6 @@
   .bg-surface-warning {
     background-color: var(--color-surface-warning);
   }
-  .bg-tag-blue-background {
-    background-color: var(--color-tag-blue-background);
-  }
-  .bg-tag-dark-background {
-    background-color: var(--color-tag-dark-background);
-  }
-  .bg-tag-default-background {
-    background-color: var(--color-tag-default-background);
-  }
-  .bg-tag-green-background {
-    background-color: var(--color-tag-green-background);
-  }
-  .bg-tag-orange-background {
-    background-color: var(--color-tag-orange-background);
-  }
-  .bg-tag-pink-background {
-    background-color: var(--color-tag-pink-background);
-  }
-  .bg-tag-red-background {
-    background-color: var(--color-tag-red-background);
-  }
-  .bg-tag-yellow-background {
-    background-color: var(--color-tag-yellow-background);
-  }
   .bg-text-image-dark-text {
     background-color: var(--color-text-image-dark-text);
   }
@@ -1336,9 +1258,6 @@
   .bg-warning {
     background-color: var(--color-warning);
   }
-  .bg-white {
-    background-color: var(--color-white);
-  }
   .bg-white\/40 {
     background-color: color-mix(in srgb, #FFFFFF 40%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1420,9 +1339,6 @@
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
   }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1459,6 +1375,9 @@
   .px-16 {
     padding-inline: calc(var(--spacing) * 16);
   }
+  .\!py-0 {
+    padding-block: calc(var(--spacing) * 0) !important;
+  }
   .py-0\.5 {
     padding-block: calc(var(--spacing) * 0.5);
   }
@@ -1480,12 +1399,18 @@
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
   }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-2\.25 {
+    padding-bottom: calc(var(--spacing) * 2.25);
+  }
+  .pl-0 {
+    padding-left: calc(var(--spacing) * 0);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1650,18 +1575,6 @@
   .\!text-surface-warning {
     color: var(--color-surface-warning) !important;
   }
-  .text-black {
-    color: var(--color-black);
-  }
-  .text-border {
-    color: var(--color-border);
-  }
-  .text-button-solid-neutral-text {
-    color: var(--color-button-solid-neutral-text);
-  }
-  .text-button-solid-primary-text {
-    color: var(--color-button-solid-primary-text);
-  }
   .text-description {
     color: var(--color-description);
   }
@@ -1713,54 +1626,6 @@
   .text-surface-warning {
     color: var(--color-surface-warning);
   }
-  .text-tag-blue-icon {
-    color: var(--color-tag-blue-icon);
-  }
-  .text-tag-blue-text {
-    color: var(--color-tag-blue-text);
-  }
-  .text-tag-dark-icon {
-    color: var(--color-tag-dark-icon);
-  }
-  .text-tag-dark-text {
-    color: var(--color-tag-dark-text);
-  }
-  .text-tag-default-icon {
-    color: var(--color-tag-default-icon);
-  }
-  .text-tag-default-text {
-    color: var(--color-tag-default-text);
-  }
-  .text-tag-green-icon {
-    color: var(--color-tag-green-icon);
-  }
-  .text-tag-green-text {
-    color: var(--color-tag-green-text);
-  }
-  .text-tag-orange-icon {
-    color: var(--color-tag-orange-icon);
-  }
-  .text-tag-orange-text {
-    color: var(--color-tag-orange-text);
-  }
-  .text-tag-pink-icon {
-    color: var(--color-tag-pink-icon);
-  }
-  .text-tag-pink-text {
-    color: var(--color-tag-pink-text);
-  }
-  .text-tag-red-icon {
-    color: var(--color-tag-red-icon);
-  }
-  .text-tag-red-text {
-    color: var(--color-tag-red-text);
-  }
-  .text-tag-yellow-icon {
-    color: var(--color-tag-yellow-icon);
-  }
-  .text-tag-yellow-text {
-    color: var(--color-tag-yellow-text);
-  }
   .text-text-image-dark-background {
     color: var(--color-text-image-dark-background);
   }
@@ -1943,6 +1808,130 @@
     --tw-ease: var(--ease-in-out);
     transition-timing-function: var(--ease-in-out);
   }
+  .neutral {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-neutral);
+    --coloring-on-color: var(--color-on-neutral);
+    --coloring-hover: var(--color-neutral-hover);
+    --coloring-text: var(--color-neutral-text);
+    --coloring-text-hover: var(--color-neutral-text-hover);
+    --coloring-outline: var(--color-neutral-outline);
+    --coloring-outline-hover: var(--color-neutral-outline-hover);
+  }
+  .\!disabled {
+    --coloring-color: initial !important;
+    --coloring-on-color: initial !important;
+    --coloring-hover: initial !important;
+    --coloring-text: initial !important;
+    --coloring-text-hover: initial !important;
+    --coloring-outline: initial !important;
+    --coloring-outline-hover: initial !important;
+    --coloring-color: var(--color-disabled) !important;
+    --coloring-on-color: var(--color-on-disabled) !important;
+    --coloring-hover: var(--color-disabled) !important;
+    --coloring-text-hover: transparent !important;
+  }
+  .disabled {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-disabled);
+    --coloring-on-color: var(--color-on-disabled);
+    --coloring-hover: var(--color-disabled);
+    --coloring-text-hover: transparent;
+  }
+  .negative {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-negative);
+    --coloring-on-color: var(--color-on-negative);
+    --coloring-hover: var(--color-negative-hover);
+  }
+  .positive {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-positive);
+    --coloring-on-color: var(--color-on-positive);
+    --coloring-hover: var(--color-positive-hover);
+  }
+  .primary {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-primary);
+    --coloring-on-color: var(--color-on-primary);
+    --coloring-hover: var(--color-primary-hover);
+  }
+  .secondary {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-secondary);
+    --coloring-on-color: var(--color-on-secondary);
+    --coloring-hover: var(--color-secondary-hover);
+  }
+  .surface {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-surface);
+    --coloring-on-color: var(--color-on-surface);
+    --coloring-hover: var(--color-surface-hover);
+  }
+  .warning {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-warning);
+    --coloring-on-color: var(--color-on-warning);
+    --coloring-hover: var(--color-warning-hover);
+  }
+  .description {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+    --coloring-color: var(--color-description);
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1956,161 +1945,6 @@
   .shadow-r-4 {
     --shadow-right: calc(4 * 1px) 0 calc(4 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
   }
-  .not-group-disabled\:text-button-outline-primary-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-outline-primary-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-negative-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-negative-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-neutral-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-neutral-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-positive-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-positive-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-primary-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-primary-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-secondary-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-secondary-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-tertiary-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-tertiary-icon);
-    }
-  }
-  .not-group-disabled\:text-button-solid-warning-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-solid-warning-icon);
-    }
-  }
-  .not-group-disabled\:text-button-text-negative-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-text-negative-icon);
-    }
-  }
-  .not-group-disabled\:text-button-text-neutral-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-text-neutral-icon);
-    }
-  }
-  .not-group-disabled\:text-button-text-primary-icon {
-    &:not(*:is(:where(.group):disabled *)) {
-      color: var(--color-button-text-primary-icon);
-    }
-  }
-  .not-disabled\:border-button-outline-primary-text {
-    &:not(*:disabled) {
-      border-color: var(--color-button-outline-primary-text);
-    }
-  }
-  .not-disabled\:bg-button-solid-negative-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-negative-background);
-    }
-  }
-  .not-disabled\:bg-button-solid-neutral-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-neutral-background);
-    }
-  }
-  .not-disabled\:bg-button-solid-positive-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-positive-background);
-    }
-  }
-  .not-disabled\:bg-button-solid-primary-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-primary-background);
-    }
-  }
-  .not-disabled\:bg-button-solid-secondary-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-secondary-background);
-    }
-  }
-  .not-disabled\:bg-button-solid-tertiary-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-tertiary-background);
-    }
-  }
-  .not-disabled\:bg-button-solid-warning-background {
-    &:not(*:disabled) {
-      background-color: var(--color-button-solid-warning-background);
-    }
-  }
-  .not-disabled\:bg-transparent {
-    &:not(*:disabled) {
-      background-color: transparent;
-    }
-  }
-  .not-disabled\:text-button-outline-primary-text {
-    &:not(*:disabled) {
-      color: var(--color-button-outline-primary-text);
-    }
-  }
-  .not-disabled\:text-button-solid-negative-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-negative-text);
-    }
-  }
-  .not-disabled\:text-button-solid-neutral-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-neutral-text);
-    }
-  }
-  .not-disabled\:text-button-solid-positive-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-positive-text);
-    }
-  }
-  .not-disabled\:text-button-solid-primary-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-primary-text);
-    }
-  }
-  .not-disabled\:text-button-solid-secondary-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-secondary-text);
-    }
-  }
-  .not-disabled\:text-button-solid-tertiary-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-tertiary-text);
-    }
-  }
-  .not-disabled\:text-button-solid-warning-text {
-    &:not(*:disabled) {
-      color: var(--color-button-solid-warning-text);
-    }
-  }
-  .not-disabled\:text-button-text-negative-text {
-    &:not(*:disabled) {
-      color: var(--color-button-text-negative-text);
-    }
-  }
-  .not-disabled\:text-button-text-neutral-text {
-    &:not(*:disabled) {
-      color: var(--color-button-text-neutral-text);
-    }
-  }
-  .not-disabled\:text-button-text-primary-text {
-    &:not(*:disabled) {
-      color: var(--color-button-text-primary-text);
-    }
-  }
   .not-data-disabled\:cursor-pointer {
     &:not(*[data-disabled]) {
       cursor: pointer;
@@ -2150,28 +1984,6 @@
       }
     }
   }
-  .group-hover\/scrollbar\:bg-primary {
-    &:is(:where(.group\/scrollbar):hover *) {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-      }
-    }
-  }
-  .peer-\[\&\:where\(\[data-state\=visible\]\)\]\/horizontal\:h-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    &:is(:where(.peer\/horizontal):where([data-state=visible]) ~ *) {
-      height: calc(100% - var(--scrollbar-size));
-    }
-  }
-  .peer-\[\&\:where\(\[data-state\=visible\]\)\]\/vertical\:w-\[calc\(100\%_-_var\(--scrollbar-size\)\)\] {
-    &:is(:where(.peer\/vertical):where([data-state=visible]) ~ *) {
-      width: calc(100% - var(--scrollbar-size));
-    }
-  }
-  .first\:mt-1 {
-    &:first-child {
-      margin-top: calc(var(--spacing) * 1);
-    }
-  }
   .first\:rounded-t-md {
     &:first-child {
       border-top-left-radius: var(--radius-md);
@@ -2215,13 +2027,6 @@
       }
     }
   }
-  .hover\:bg-button-solid-primary-background {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-button-solid-primary-background);
-      }
-    }
-  }
   .hover\:bg-carousel-dot-active {
     &:hover {
       @media (hover: hover) {
@@ -2229,23 +2034,6 @@
       }
     }
   }
-  .hover\:bg-description\/20 {
-    &:hover {
-      @media (hover: hover) {
-        background-color: color-mix(in srgb, #666666 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-description) 20%, transparent);
-        }
-      }
-    }
-  }
-  .hover\:bg-primary {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-primary);
-      }
-    }
-  }
   .hover\:bg-primary\/20 {
     &:hover {
       @media (hover: hover) {
@@ -2256,13 +2044,6 @@
       }
     }
   }
-  .hover\:bg-scrollbar-track {
-    &:hover {
-      @media (hover: hover) {
-        background-color: var(--color-scrollbar-track);
-      }
-    }
-  }
   .hover\:bg-stepperbar-dot-active {
     &:hover {
       @media (hover: hover) {
@@ -2270,13 +2051,6 @@
       }
     }
   }
-  .hover\:text-button-solid-primary-text {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-button-solid-primary-text);
-      }
-    }
-  }
   .hover\:text-on-background {
     &:hover {
       @media (hover: hover) {
@@ -2284,13 +2058,6 @@
       }
     }
   }
-  .hover\:text-on-primary {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-on-primary);
-      }
-    }
-  }
   .hover\:brightness-75 {
     &:hover {
       @media (hover: hover) {
@@ -2315,84 +2082,11 @@
       }
     }
   }
-  .not-disabled\:hover\:bg-button-text-hover-background {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: var(--color-button-text-hover-background);
-        }
-      }
-    }
-  }
-  .not-disabled\:hover\:bg-button-text-negative-text\/20 {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #DC576D 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-button-text-negative-text) 20%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .not-disabled\:hover\:bg-button-text-neutral-text\/20 {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #333333 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-button-text-neutral-text) 20%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .not-disabled\:hover\:bg-button-text-primary-text\/20 {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          background-color: color-mix(in srgb, #694BB4 20%, transparent);
-          @supports (color: color-mix(in lab, red, red)) {
-            background-color: color-mix(in oklab, var(--color-button-text-primary-text) 20%, transparent);
-          }
-        }
-      }
-    }
-  }
-  .not-disabled\:hover\:brightness-80 {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          --tw-brightness: brightness(80%);
-          filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-        }
-      }
-    }
-  }
-  .not-disabled\:hover\:brightness-90 {
-    &:not(*:disabled) {
-      &:hover {
-        @media (hover: hover) {
-          --tw-brightness: brightness(90%);
-          filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
-        }
-      }
-    }
-  }
   .focus\:border-primary {
     &:focus {
       border-color: var(--color-primary);
     }
   }
-  .focus\:bg-primary\/20 {
-    &:focus {
-      background-color: color-mix(in srgb, #694BB4 20%, transparent);
-      @supports (color: color-mix(in lab, red, red)) {
-        background-color: color-mix(in oklab, var(--color-primary) 20%, transparent);
-      }
-    }
-  }
   .focus\:ring-0 {
     &:focus {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
@@ -2410,72 +2104,6 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .not-disabled\:focus-visible\:bg-button-text-negative-text\/20 {
-    &:not(*:disabled) {
-      &:focus-visible {
-        background-color: color-mix(in srgb, #DC576D 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-button-text-negative-text) 20%, transparent);
-        }
-      }
-    }
-  }
-  .not-disabled\:focus-visible\:bg-button-text-neutral-text\/20 {
-    &:not(*:disabled) {
-      &:focus-visible {
-        background-color: color-mix(in srgb, #333333 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-button-text-neutral-text) 20%, transparent);
-        }
-      }
-    }
-  }
-  .not-disabled\:focus-visible\:bg-button-text-primary-text\/20 {
-    &:not(*:disabled) {
-      &:focus-visible {
-        background-color: color-mix(in srgb, #694BB4 20%, transparent);
-        @supports (color: color-mix(in lab, red, red)) {
-          background-color: color-mix(in oklab, var(--color-button-text-primary-text) 20%, transparent);
-        }
-      }
-    }
-  }
-  .not-disabled\:focus-visible\:outline-button-text-negative-text {
-    &:not(*:disabled) {
-      &:focus-visible {
-        outline-color: var(--color-button-text-negative-text);
-      }
-    }
-  }
-  .not-disabled\:focus-visible\:outline-button-text-neutral-text {
-    &:not(*:disabled) {
-      &:focus-visible {
-        outline-color: var(--color-button-text-neutral-text);
-      }
-    }
-  }
-  .not-disabled\:focus-visible\:outline-button-text-primary-text {
-    &:not(*:disabled) {
-      &:focus-visible {
-        outline-color: var(--color-button-text-primary-text);
-      }
-    }
-  }
-  .disabled\:bg-disabled-background {
-    &:disabled {
-      background-color: var(--color-disabled-background);
-    }
-  }
-  .disabled\:text-disabled {
-    &:disabled {
-      color: var(--color-disabled);
-    }
-  }
-  .disabled\:opacity-70 {
-    &:disabled {
-      opacity: 70%;
-    }
-  }
   .data-disabled\:cursor-not-allowed {
     &[data-disabled] {
       cursor: not-allowed;
@@ -2538,26 +2166,6 @@
       font-weight: var(--font-weight-normal);
     }
   }
-  .data-\[state\=visible\]\:h-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      height: var(--scrollbar-size);
-    }
-  }
-  .data-\[state\=visible\]\:min-h-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      min-height: var(--scrollbar-size);
-    }
-  }
-  .data-\[state\=visible\]\:w-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      width: var(--scrollbar-size);
-    }
-  }
-  .data-\[state\=visible\]\:min-w-\[var\(--scrollbar-size\)\] {
-    &[data-state="visible"] {
-      min-width: var(--scrollbar-size);
-    }
-  }
   .motion-safe\:animate-fade-in {
     @media (prefers-reduced-motion: no-preference) {
       animation: fade-in 0.2s ease-in-out;
@@ -2737,7 +2345,7 @@
     left: -100%;
     height: 100%;
     width: 200%;
-    background: linear-gradient( 120deg, transparent 0%, transparent 30%, rgba(255, 255, 255, 0.1) 50%, transparent 70%, transparent 100% );
+    background: linear-gradient( 120deg, transparent 0%, transparent 25%, rgba(255, 255, 255, 0.15) 50%, transparent 75%, transparent 100% );
     animation: shimmer 2s infinite;
   }
 }
@@ -2919,6 +2527,154 @@
     box-shadow: var(--shadow-right, 0 0 0 transparent), var(--shadow-left, 0 0 0 transparent), var(--shadow-top, 0 0 0 transparent), var(--shadow-bottom, 0 0 0 transparent);
   }
 }
+@layer theme, base, components, utilities;
+@layer theme;
+@layer base {
+  *, ::after, ::before, ::backdrop, ::file-selector-button {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+    border: 0 solid;
+  }
+  html, :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
+    font-feature-settings: var(--default-font-feature-settings, normal);
+    font-variation-settings: var(--default-font-variation-settings, normal);
+    -webkit-tap-highlight-color: transparent;
+  }
+  hr {
+    height: 0;
+    color: inherit;
+    border-top-width: 1px;
+  }
+  abbr:where([title]) {
+    -webkit-text-decoration: underline dotted;
+    text-decoration: underline dotted;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    font-size: inherit;
+    font-weight: inherit;
+  }
+  a {
+    color: inherit;
+    -webkit-text-decoration: inherit;
+    text-decoration: inherit;
+  }
+  b, strong {
+    font-weight: bolder;
+  }
+  code, kbd, samp, pre {
+    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
+    font-feature-settings: var(--default-mono-font-feature-settings, normal);
+    font-variation-settings: var(--default-mono-font-variation-settings, normal);
+    font-size: 1em;
+  }
+  small {
+    font-size: 80%;
+  }
+  sub, sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+  }
+  sub {
+    bottom: -0.25em;
+  }
+  sup {
+    top: -0.5em;
+  }
+  table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+  }
+  :-moz-focusring {
+    outline: auto;
+  }
+  progress {
+    vertical-align: baseline;
+  }
+  summary {
+    display: list-item;
+  }
+  ol, ul, menu {
+    list-style: none;
+  }
+  img, svg, video, canvas, audio, iframe, embed, object {
+    display: block;
+    vertical-align: middle;
+  }
+  img, video {
+    max-width: 100%;
+    height: auto;
+  }
+  button, input, select, optgroup, textarea, ::file-selector-button {
+    font: inherit;
+    font-feature-settings: inherit;
+    font-variation-settings: inherit;
+    letter-spacing: inherit;
+    color: inherit;
+    border-radius: 0;
+    background-color: transparent;
+    opacity: 1;
+  }
+  :where(select:is([multiple], [size])) optgroup {
+    font-weight: bolder;
+  }
+  :where(select:is([multiple], [size])) optgroup option {
+    padding-inline-start: 20px;
+  }
+  ::file-selector-button {
+    margin-inline-end: 4px;
+  }
+  ::placeholder {
+    opacity: 1;
+  }
+  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {
+    ::placeholder {
+      color: currentcolor;
+      @supports (color: color-mix(in lab, red, red)) {
+        color: color-mix(in oklab, currentcolor 50%, transparent);
+      }
+    }
+  }
+  textarea {
+    resize: vertical;
+  }
+  ::-webkit-search-decoration {
+    -webkit-appearance: none;
+  }
+  ::-webkit-date-and-time-value {
+    min-height: 1lh;
+    text-align: inherit;
+  }
+  ::-webkit-datetime-edit {
+    display: inline-flex;
+  }
+  ::-webkit-datetime-edit-fields-wrapper {
+    padding: 0;
+  }
+  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {
+    padding-block: 0;
+  }
+  :-moz-ui-invalid {
+    box-shadow: none;
+  }
+  button, input:where([type="button"], [type="reset"], [type="submit"]), ::file-selector-button {
+    appearance: button;
+  }
+  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
+    height: auto;
+  }
+  [hidden]:where(:not([hidden="until-found"])) {
+    display: none !important;
+  }
+}
+@layer utilities;
 @layer base;
 @layer base;
 @layer base {
@@ -2928,8 +2684,9 @@
     --color-positive: var(--color-green-700);
     --color-negative: var(--color-red-500);
     --color-disabled: var(--color-gray-500);
-    --color-disabled-background: var(--color-gray-700);
+    --color-on-disabled: var(--color-gray-300);
     --color-surface: var(--color-gray-800);
+    --color-surface-hover: var(--color-gray-700);
     --color-surface-variant: var(--color-gray-900);
     --color-text-primary: var(--color-gray-100);
     --color-text-secondary: var(--color-gray-400);
@@ -2938,6 +2695,9 @@
     --color-description: var(--color-gray-400);
     --color-label: var(--color-gray-300);
     --color-primary: var(--color-purple-400);
+    --color-neutral: var(--color-gray-700);
+    --color-neutral-hover: var(--color-gray-800);
+    --color-neutral-outline-hover: var(--color-gray-200);
   }
 }
 @layer base;
@@ -2948,8 +2708,9 @@
     --color-positive: var(--color-green-700);
     --color-negative: var(--color-red-500);
     --color-disabled: var(--color-gray-500);
-    --color-disabled-background: var(--color-gray-700);
+    --color-on-disabled: var(--color-gray-300);
     --color-surface: var(--color-gray-800);
+    --color-surface-hover: var(--color-gray-700);
     --color-surface-variant: var(--color-gray-900);
     --color-text-primary: var(--color-gray-100);
     --color-text-secondary: var(--color-gray-400);
@@ -2958,22 +2719,18 @@
     --color-description: var(--color-gray-400);
     --color-label: var(--color-gray-300);
     --color-primary: var(--color-purple-400);
+    --color-neutral: var(--color-gray-700);
+    --color-neutral-hover: var(--color-gray-800);
+    --color-neutral-outline-hover: var(--color-gray-200);
   }
 }
 @layer base {
   &:where([data-theme=dark], [data-theme=dark] *) {
-    --color-button-solid-neutral-background: var(--color-gray-750);
-    --color-button-solid-neutral-icon: var(--color-gray-100);
-    --color-button-solid-neutral-text: var(--color-gray-100);
-    --color-button-text-hover-background: #3F3F3F33;
-    --color-button-text-neutral-text: var(--color-gray-100);
-    --color-button-text-neutral-icon: var(--color-gray-100);
     --color-property-title-background: var(--color-gray-750);
     --color-progress-indicator-background: var(--color-gray-700);
     --color-overlay-shadow: #00000060;
     --color-scrollbar-track: #FFFFFF33;
     --color-scrollbar-thumb: var(--color-gray-300);
-    --color-tag-dark-background: var(--color-gray-900);
     --color-border: var(--color-gray-600);
     --color-divider: var(--color-gray-700);
     --color-focus: var(--color-primary);
@@ -2982,6 +2739,19 @@
   }
 }
 @layer components {
+  .btn-xs {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 1);
+    height: calc(var(--spacing) * 7);
+    align-items: center;
+    justify-content: center;
+    border-radius: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: calc(var(--spacing) * 0.75);
+    font-size: var(--text-sm);
+    line-height: var(--tw-leading, var(--text-sm--line-height));
+  }
   .btn-sm {
     display: flex;
     flex-direction: row;
@@ -3059,6 +2829,8 @@
     border-radius: calc(var(--spacing) * 1.5);
     padding: calc(var(--spacing) * 3);
   }
+}
+@layer components {
   .card-sm {
     display: flex;
     flex-direction: column;
@@ -3089,50 +2861,40 @@
     padding-block: calc(var(--spacing) * 4);
     color: var(--color-on-surface);
   }
-  .chip {
+}
+@layer components {
+  .chip-sm {
     display: flex;
     flex-direction: row;
-    column-gap: calc(var(--spacing) * 2);
+    column-gap: calc(var(--spacing) * 1);
     align-items: center;
     justify-content: center;
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: calc(var(--spacing) * 0.5);
+  }
+  .chip-md {
+    display: flex;
+    flex-direction: row;
     column-gap: calc(var(--spacing) * 1);
+    align-items: center;
+    justify-content: center;
     border-radius: var(--radius-md);
     padding-inline: calc(var(--spacing) * 2);
     padding-block: calc(var(--spacing) * 1);
   }
-  .chip-full {
+  .chip-lg {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     align-items: center;
     justify-content: center;
-    column-gap: calc(var(--spacing) * 1);
-    border-radius: calc(infinity * 1px);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
-  }
-  .section-padding-x {
-    padding-inline: calc(var(--spacing) * 6);
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 12);
-    }
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 24);
-    }
-  }
-  .section-padding-y {
-    padding-block: calc(var(--spacing) * 16);
-  }
-  .section-padding {
-    padding-inline: calc(var(--spacing) * 6);
-    padding-block: calc(var(--spacing) * 16);
-    @media (width >= 48rem) {
-      padding-inline: calc(var(--spacing) * 12);
-    }
-    @media (width >= 64rem) {
-      padding-inline: calc(var(--spacing) * 24);
-    }
+    border-radius: var(--radius-md);
+    padding-inline: calc(var(--spacing) * 4);
+    padding-block: calc(var(--spacing) * 2);
   }
+}
+@layer components {
   .link {
     border-radius: 0.25rem;
     padding: calc(var(--spacing) * 2);
@@ -3150,6 +2912,8 @@
       text-decoration-line: underline;
     }
   }
+}
+@layer components {
   * {
     list-style-type: none;
     border-color: var(--color-border);
@@ -3601,6 +3365,21 @@
     animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
   }
 }
+@keyframes pulse {
+  50% {
+    opacity: 0.5;
+  }
+}
+@keyframes bounce {
+  0%, 100% {
+    transform: translateY(-25%);
+    animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
+  }
+  50% {
+    transform: none;
+    animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+}
 @layer properties {
   @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {
     *, ::before, ::after, ::backdrop {