@helpwave/hightide 0.2.0 → 0.4.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);
@@ -157,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);
@@ -389,6 +342,9 @@
   .right-0\.5 {
     right: calc(var(--spacing) * 0.5);
   }
+  .right-1 {
+    right: calc(var(--spacing) * 1);
+  }
   .right-2 {
     right: calc(var(--spacing) * 2);
   }
@@ -422,15 +378,6 @@
   .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;
   }
@@ -470,9 +417,6 @@
       max-width: 96rem;
     }
   }
-  .\!m-0 {
-    margin: calc(var(--spacing) * 0) !important;
-  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
@@ -500,9 +444,6 @@
   .mt-\[6px\] {
     margin-top: 6px;
   }
-  .mr-3 {
-    margin-right: calc(var(--spacing) * 3);
-  }
   .mr-8 {
     margin-right: calc(var(--spacing) * 8);
   }
@@ -518,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;
   }
@@ -615,9 +553,13 @@
     min-width: calc(var(--spacing) * 4);
     max-width: calc(var(--spacing) * 4);
   }
-  .size-4 {
-    width: calc(var(--spacing) * 4);
-    height: calc(var(--spacing) * 4);
+  .size-3\.5 {
+    width: calc(var(--spacing) * 3.5);
+    height: calc(var(--spacing) * 3.5);
+  }
+  .size-4\.5 {
+    width: calc(var(--spacing) * 4.5);
+    height: calc(var(--spacing) * 4.5);
   }
   .size-5 {
     width: calc(var(--spacing) * 5);
@@ -627,14 +569,14 @@
     width: calc(var(--spacing) * 6);
     height: calc(var(--spacing) * 6);
   }
-  .size-7 {
-    width: calc(var(--spacing) * 7);
-    height: calc(var(--spacing) * 7);
-  }
   .size-8 {
     width: calc(var(--spacing) * 8);
     height: calc(var(--spacing) * 8);
   }
+  .size-9 {
+    width: calc(var(--spacing) * 9);
+    height: calc(var(--spacing) * 9);
+  }
   .h-0 {
     height: calc(var(--spacing) * 0);
   }
@@ -647,15 +589,9 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-5 {
-    height: calc(var(--spacing) * 5);
-  }
   .h-6 {
     height: calc(var(--spacing) * 6);
   }
-  .h-7 {
-    height: calc(var(--spacing) * 7);
-  }
   .h-10 {
     height: calc(var(--spacing) * 10);
   }
@@ -695,6 +631,9 @@
   .max-h-16 {
     max-height: calc(var(--spacing) * 16);
   }
+  .max-h-71 {
+    max-height: calc(var(--spacing) * 71);
+  }
   .max-h-96 {
     max-height: calc(var(--spacing) * 96);
   }
@@ -722,15 +661,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;
   }
-  .\!w-fit {
-    width: fit-content !important;
-  }
   .w-0 {
     width: calc(var(--spacing) * 0);
   }
@@ -743,9 +679,6 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-5 {
-    width: calc(var(--spacing) * 5);
-  }
   .w-6 {
     width: calc(var(--spacing) * 6);
   }
@@ -812,6 +745,9 @@
   .max-w-48 {
     max-width: calc(var(--spacing) * 48);
   }
+  .max-w-56 {
+    max-width: calc(var(--spacing) * 56);
+  }
   .max-w-64 {
     max-width: calc(var(--spacing) * 64);
   }
@@ -830,6 +766,9 @@
   .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);
   }
@@ -842,6 +781,9 @@
   .min-w-56 {
     min-width: calc(var(--spacing) * 56);
   }
+  .min-w-80 {
+    min-width: calc(var(--spacing) * 80);
+  }
   .min-w-\[40px\] {
     min-width: 40px;
   }
@@ -851,9 +793,6 @@
   .min-w-\[220px\] {
     min-width: 220px;
   }
-  .min-w-\[320px\] {
-    min-width: 320px;
-  }
   .flex-1 {
     flex: 1;
   }
@@ -978,9 +917,6 @@
   .justify-start {
     justify-content: flex-start;
   }
-  .gap-2 {
-    gap: calc(var(--spacing) * 2);
-  }
   .gap-x-1 {
     column-gap: calc(var(--spacing) * 1);
   }
@@ -1016,12 +952,6 @@
   .overflow-y-hidden {
     overflow-y: hidden;
   }
-  .overflow-y-scroll {
-    overflow-y: scroll;
-  }
-  .\!rounded-none {
-    border-radius: 0 !important;
-  }
   .rounded {
     border-radius: 0.25rem;
   }
@@ -1051,15 +981,75 @@
     border-top-right-radius: var(--radius-xl);
     border-bottom-right-radius: var(--radius-xl);
   }
-  .\!border-0 {
-    border-style: var(--tw-border-style) !important;
-    border-width: 0px !important;
+  .input-element {
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
   }
-  .border {
+  .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-1 {
+  .focus-style-border {
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+  }
+  .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
@@ -1099,22 +1089,18 @@
     --tw-border-style: dashed;
     border-style: dashed;
   }
-  .border-none {
-    --tw-border-style: none;
-    border-style: none;
-  }
   .border-divider\/50 {
     border-color: color-mix(in srgb, #E6E6E6 50%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-divider) 50%, transparent);
     }
   }
+  .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;
   }
@@ -1148,8 +1134,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;
@@ -1157,20 +1179,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);
@@ -1181,12 +1200,6 @@
   .bg-negative {
     background-color: var(--color-negative);
   }
-  .bg-negative\/20 {
-    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-negative) 20%, transparent);
-    }
-  }
   .bg-overlay-background {
     background-color: var(--color-overlay-background);
   }
@@ -1247,30 +1260,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);
   }
@@ -1289,9 +1278,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)) {
@@ -1370,12 +1356,6 @@
   .stroke-3 {
     stroke-width: 3;
   }
-  .\!p-0 {
-    padding: calc(var(--spacing) * 0) !important;
-  }
-  .p-0\.5 {
-    padding: calc(var(--spacing) * 0.5);
-  }
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
@@ -1388,18 +1368,12 @@
   .p-8 {
     padding: calc(var(--spacing) * 8);
   }
-  .px-0\.5 {
-    padding-inline: calc(var(--spacing) * 0.5);
-  }
   .px-1 {
     padding-inline: calc(var(--spacing) * 1);
   }
   .px-2 {
     padding-inline: calc(var(--spacing) * 2);
   }
-  .px-2\.5 {
-    padding-inline: calc(var(--spacing) * 2.5);
-  }
   .px-3 {
     padding-inline: calc(var(--spacing) * 3);
   }
@@ -1412,9 +1386,6 @@
   .px-16 {
     padding-inline: calc(var(--spacing) * 16);
   }
-  .py-0\.5 {
-    padding-block: calc(var(--spacing) * 0.5);
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
@@ -1424,21 +1395,24 @@
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
-  .py-2\.5 {
-    padding-block: calc(var(--spacing) * 2.5);
-  }
   .py-6\.5 {
     padding-block: calc(var(--spacing) * 6.5);
   }
   .py-12 {
     padding-block: calc(var(--spacing) * 12);
   }
-  .pb-1 {
-    padding-bottom: calc(var(--spacing) * 1);
+  .pr-8 {
+    padding-right: calc(var(--spacing) * 8);
+  }
+  .pr-10 {
+    padding-right: calc(var(--spacing) * 10);
   }
   .pb-2 {
     padding-bottom: calc(var(--spacing) * 2);
   }
+  .pb-2\.25 {
+    padding-bottom: calc(var(--spacing) * 2.25);
+  }
   .pl-2 {
     padding-left: calc(var(--spacing) * 2);
   }
@@ -1603,18 +1577,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);
   }
@@ -1648,9 +1610,6 @@
   .text-overlay-text {
     color: var(--color-overlay-text);
   }
-  .text-placeholder {
-    color: var(--color-placeholder);
-  }
   .text-positive {
     color: var(--color-positive);
   }
@@ -1666,54 +1625,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);
   }
@@ -1756,12 +1667,6 @@
   .underline {
     text-decoration-line: underline;
   }
-  .decoration-primary {
-    text-decoration-color: var(--color-primary);
-  }
-  .underline-offset-4 {
-    text-underline-offset: 4px;
-  }
   .placeholder-warning {
     &::placeholder {
       color: var(--color-warning);
@@ -1782,10 +1687,6 @@
   .opacity-100 {
     opacity: 100%;
   }
-  .\!shadow-none {
-    --tw-shadow: 0 0 #0000 !important;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  }
   .shadow-md {
     --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
@@ -1794,18 +1695,10 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .\!ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor) !important;
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow) !important;
-  }
   .ring {
     --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .ring-0 {
-    --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-side {
     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);
   }
@@ -1815,18 +1708,32 @@
   .shadow-strong {
     --tw-shadow-color: rgba(0, 0, 0, 0.05);
   }
-  .\!outline-0 {
-    outline-style: var(--tw-outline-style) !important;
-    outline-width: 0px !important;
+  .focus-style-default {
+    &:focus-visible:not(.focus-style-none) {
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--color-focus);
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
+    }
+  }
+  .focus-style-outline {
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--color-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
   }
   .outline {
     outline-style: var(--tw-outline-style);
     outline-width: 1px;
   }
-  .outline-0 {
-    outline-style: var(--tw-outline-style);
-    outline-width: 0px;
-  }
   .outline-primary {
     outline-color: var(--color-primary);
   }
@@ -1896,6 +1803,145 @@
     --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);
+  }
+  .reset-coloring-variables {
+    --coloring-color: initial;
+    --coloring-on-color: initial;
+    --coloring-hover: initial;
+    --coloring-text: initial;
+    --coloring-text-hover: initial;
+    --coloring-outline: initial;
+    --coloring-outline-hover: initial;
+  }
+  .focus-style-none {
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .select-none {
     -webkit-user-select: none;
     user-select: none;
@@ -1909,166 +1955,16 @@
   .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;
     }
   }
+  .group-focus-within\:border-primary {
+    &:is(:where(.group):focus-within *) {
+      border-color: var(--color-primary);
+    }
+  }
   .group-focus-within\/slide\:border-primary {
     &:is(:where(.group\/slide):focus-within *) {
       border-color: var(--color-primary);
@@ -2132,10 +2028,10 @@
       border-color: var(--color-primary);
     }
   }
-  .hover\:border-negative {
+  .hover\:cursor-pointer {
     &:hover {
       @media (hover: hover) {
-        border-color: var(--color-negative);
+        cursor: pointer;
       }
     }
   }
@@ -2146,13 +2042,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) {
@@ -2160,23 +2049,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) {
@@ -2194,13 +2066,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) {
@@ -2208,13 +2073,6 @@
       }
     }
   }
-  .hover\:text-on-primary {
-    &:hover {
-      @media (hover: hover) {
-        color: var(--color-on-primary);
-      }
-    }
-  }
   .hover\:brightness-75 {
     &:hover {
       @media (hover: hover) {
@@ -2239,159 +2097,18 @@
       }
     }
   }
-  .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\: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);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .focus-visible\:border-negative {
-    &:focus-visible {
-      border-color: var(--color-negative);
-    }
-  }
   .focus-visible\:ring-0 {
     &:focus-visible {
       --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
-  .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;
@@ -2633,158 +2350,10 @@
     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;
   }
 }
-@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 utilities {
   .shadow-around {
     --shadow-right: calc(2 * 1px) 0 calc(2 * 1px) 0 var(--tw-shadow-color, rgb(0 0 0 / 2%));
@@ -2824,8 +2393,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);
@@ -2834,6 +2404,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;
@@ -2844,8 +2417,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);
@@ -2854,22 +2428,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);
@@ -2878,6 +2448,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;
@@ -2955,6 +2538,8 @@
     border-radius: calc(var(--spacing) * 1.5);
     padding: calc(var(--spacing) * 3);
   }
+}
+@layer components {
   .card-sm {
     display: flex;
     flex-direction: column;
@@ -2985,48 +2570,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) * 1);
     align-items: center;
     justify-content: center;
     border-radius: var(--radius-md);
-    padding-inline: calc(var(--spacing) * 2);
-    padding-block: calc(var(--spacing) * 1);
+    padding-inline: calc(var(--spacing) * 1);
+    padding-block: calc(var(--spacing) * 0.5);
   }
-  .chip-full {
+  .chip-md {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 1);
     align-items: center;
     justify-content: center;
-    border-radius: calc(infinity * 1px);
+    border-radius: var(--radius-md);
     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);
-    }
+  .chip-lg {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    align-items: center;
+    justify-content: center;
+    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);
@@ -3044,9 +2621,318 @@
       text-decoration-line: underline;
     }
   }
+}
+@layer components {
+  *[data-name="input"]:not(.default-style-none) {
+    height: calc(var(--spacing) * 10);
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  *[data-name="textarea"]:not(.default-style-none) {
+    height: calc(var(--spacing) * 32);
+    width: 100%;
+    resize: none;
+    overflow-y: scroll;
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  *[data-name="select-button"]:not(.default-style-none) {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    align-items: center;
+    justify-content: space-between;
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+  }
+  *[data-name="select-button-chips"]:not(.default-style-none) {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    border-radius: var(--radius-md);
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    padding-inline: calc(var(--spacing) * 2.5);
+    padding-block: calc(var(--spacing) * 2.5);
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+  }
+  *[data-name="checkbox"]:not(.default-style-none) {
+    display: flex;
+    flex-direction: column;
+    row-gap: calc(var(--spacing) * 0);
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.25rem;
+    &:focus-visible {
+      border-style: var(--tw-border-style);
+      border-width: 2px;
+      border-color: var(--color-focus);
+    }
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: transparent;
+    &:focus-visible {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+    &:not([data-disabled]):not([data-invalid]) {
+      background-color: var(--color-input-background);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+      &[data-value] {
+        color: var(--color-input-text);
+      }
+    }
+    &:not([data-disabled])[data-invalid] {
+      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-negative) 20%, transparent);
+      }
+      --color-focus: var(--color-negative);
+      &[data-value] {
+        color: var(--color-negative);
+      }
+      &:not([data-value]) {
+        color: var(--color-placeholder);
+      }
+    }
+    &[data-disabled] {
+      background-color: var(--color-disabled);
+      color: var(--color-on-disabled);
+    }
+    &:focus-visible {
+      outline-style: var(--tw-outline-style);
+      outline-width: 2px;
+      outline-offset: 2px;
+      outline-color: var(--color-focus);
+      --tw-outline-style: solid;
+      outline-style: solid;
+    }
+    &:not([data-disabled]) {
+      &:hover {
+        @media (hover: hover) {
+          cursor: pointer;
+        }
+      }
+    }
+    &:not([data-disabled]):not([data-invalid]):not([data-value='false']) {
+      border-color: var(--color-primary);
+      background-color: color-mix(in srgb, #694BB4 40%, transparent);
+      @supports (color: color-mix(in lab, red, red)) {
+        background-color: color-mix(in oklab, var(--color-primary) 40%, transparent);
+      }
+      color: var(--color-primary);
+    }
+    &:not([data-disabled]):not([data-invalid])[data-value='false'] {
+      border-color: var(--color-border);
+      background-color: transparent;
+      color: var(--color-border);
+      &:hover {
+        @media (hover: hover) {
+          border-color: var(--color-primary);
+        }
+      }
+      &:hover {
+        @media (hover: hover) {
+          color: var(--color-primary);
+        }
+      }
+    }
+  }
+}
+@layer components {
   * {
     list-style-type: none;
     border-color: var(--color-border);
+    &::placeholder {
+      color: var(--color-placeholder);
+    }
     &:where([data-theme=dark], [data-theme=dark] *) {
       color-scheme: dark;
     }
@@ -3059,11 +2945,6 @@
     cursor: pointer;
     text-wrap: nowrap;
   }
-  input {
-    &::placeholder {
-      color: var(--color-placeholder);
-    }
-  }
   *:disabled {
     cursor: not-allowed;
   }
@@ -3079,26 +2960,16 @@
     outline-style: var(--tw-outline-style);
     outline-width: 0px;
   }
-  *:focus-visible {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-    outline-offset: 2px;
-    outline-color: var(--color-focus);
-  }
-  .focus-style-within:focus-within {
-    outline-style: var(--tw-outline-style);
-    outline-width: 2px;
-    outline-color: var(--color-focus);
-  }
-  .focus-style-none {
-    outline-offset: 0px;
-    &:focus-within {
-      outline-style: var(--tw-outline-style);
-      outline-width: 0px;
-    }
-    &:focus-visible {
-      outline-style: var(--tw-outline-style);
-      outline-width: 0px;
+  * {
+    &:focus-visible:not(.focus-style-none) {
+      &:focus-visible {
+        outline-style: var(--tw-outline-style);
+        outline-width: 2px;
+        outline-offset: 2px;
+        outline-color: var(--color-focus);
+        --tw-outline-style: solid;
+        outline-style: solid;
+      }
     }
   }
   table {
@@ -3480,21 +3351,6 @@
     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 {