@helpwave/hightide 0.1.7 → 0.1.9

package/dist/css/globals.css

@@ -7,21 +7,28 @@
       "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-700: oklch(50.5% 0.213 27.518);
     --color-yellow-200: oklch(94.5% 0.129 101.54);
+    --color-yellow-500: oklch(79.5% 0.184 86.047);
     --color-green-200: oklch(92.5% 0.084 155.995);
     --color-green-300: oklch(87.1% 0.15 154.449);
+    --color-green-500: #69CB81;
     --color-green-700: #53a567;
+    --color-blue-50: #F6FAFF;
+    --color-blue-100: #D6E3F9;
+    --color-blue-300: oklch(80.9% 0.105 251.813);
+    --color-blue-400: oklch(70.7% 0.165 254.624);
+    --color-blue-800: #1A4080;
     --color-purple-50: #EFE6FD;
+    --color-purple-100: #CEB0FA;
     --color-purple-400: #8470c5;
     --color-purple-500: #694BB4;
-    --color-slate-900: oklch(20.8% 0.042 265.755);
-    --color-gray-50: #F2F2F2;
-    --color-gray-100: #E6E6E6;
-    --color-gray-200: #CCCCCC;
     --color-gray-300: #B3B3B3;
-    --color-gray-500: #888888;
-    --color-gray-600: #666666;
     --color-gray-700: #4D4D4D;
     --color-black: #000000;
     --color-white: #FFFFFF;
@@ -59,20 +66,27 @@
     --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-text-dark: #1A1A1A;
+    --color-text-light: #E6E6E6;
+    --color-text-default: var(--color-text-dark);
     --color-primary: var(--color-purple-500);
-    --color-on-primary: #FFFFFF;
+    --color-on-primary: var(--color-text-light);
     --color-secondary: #11243E;
-    --color-warning: #EA9E40;
-    --color-on-warning: #FFFFFF;
-    --color-positive: #69CB81;
-    --color-on-positive: #FFFFFF;
-    --color-negative: #DC576D;
-    --color-on-negative: #FFFFFF;
+    --color-warning: var(--color-yellow-500);
+    --color-on-warning: var(--color-text-light);
+    --color-positive: var(--color-green-500);
+    --color-on-positive: var(--color-text-light);
+    --color-negative: var(--color-red-500);
+    --color-on-negative: var(--color-text-light);
     --color-surface: #FFFFFF;
-    --color-on-surface: #1A1A1A;
+    --color-on-surface: var(--color-text-dark);
     --color-surface-warning: #FBECD9;
     --color-background: #EEEEEE;
-    --color-on-background: #1A1A1A;
+    --color-on-background: var(--color-text-dark);
+    --color-neutral: #4D4D4D;
+    --color-text-primary: var(--color-text-default);
+    --color-text-secondary: #666666;
+    --color-text-highlight: #3272DF;
     --color-text-label: #4D4D4D;
     --color-divider: #E6E6E6;
     --color-description: #555555;
@@ -81,6 +95,8 @@
     --color-disabled-icon: #555555;
     --color-disabled-outline: #555555;
     --color-border: #CCCCCC;
+    --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);
@@ -102,8 +118,6 @@
     --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-outline-primary-icon: var(--color-primary);
-    --color-button-outline-primary-text: var(--color-primary);
     --color-button-text-hover-background: #77777733;
     --color-button-text-neutral-text: #333333;
     --color-button-text-neutral-icon: #333333;
@@ -111,16 +125,22 @@
     --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-menu-background: var(--color-surface);
     --color-menu-text: var(--color-on-surface);
     --color-menu-border: var(--color-border);
+    --color-overlay-background: #FFFFFF;
+    --color-overlay-text: var(--color-text-dark);
+    --color-progress-indicator-fill: var(--color-primary);
+    --color-progress-indicator-background: var(--color-gray-300);
     --color-property-title-background: #E6E6E6;
-    --color-tag-default-background: #F6FAFF;
-    --color-tag-default-text: #1A4080;
-    --color-tag-default-icon: #1A4080;
+    --color-stepperbar-dot-active: var(--color-primary);
+    --color-stepperbar-dot-normal: var(--color-purple-100);
+    --color-stepperbar-dot-disabled: var(--color-disabled-background);
     --color-tag-dark-background: #333333;
-    --color-tag-dark-text: #FFFFFF;
-    --color-tag-dark-icon: #FFFFFF;
+    --color-tag-dark-text: var(--color-text-light);
+    --color-tag-dark-icon: var(--color-text-light);
     --color-tag-green-background: #E2E9DB;
     --color-tag-green-text: #7A977E;
     --color-tag-green-icon: #7A977E;
@@ -130,20 +150,18 @@
     --color-tag-red-background: #FEE0DD;
     --color-tag-red-text: #D67268;
     --color-tag-red-icon: #D67268;
-    --color-tag-blue-background: #F6FAFF;
-    --color-tag-blue-text: #1A4080;
-    --color-tag-blue-icon: #1A4080;
+    --color-tag-blue-background: var(--color-blue-50);
+    --color-tag-blue-text: var(--color-blue-800);
+    --color-tag-blue-icon: var(--color-blue-800);
     --color-tag-pink-background: #CEA3B8;
     --color-tag-pink-text: #CE75A0;
     --color-tag-pink-icon: #CE75A0;
     --color-text-image-primary-background: var(--color-primary);
-    --color-text-image-primary-text: var(--color-on-primary);
+    --color-text-image-primary-text: var(--color-white);
     --color-text-image-secondary-background: #3171DE;
-    --color-text-image-secondary-text: #FFFFFF;
+    --color-text-image-secondary-text: var(--color-white);
     --color-text-image-dark-background: #11243E;
-    --color-text-image-dark-text: #FFFFFF;
-    --color-overlay-background: #FFFFFF;
-    --color-overlay-text: #1A1A1A;
+    --color-text-image-dark-text: var(--color-white);
     --color-tooltip-background: var(--color-overlay-background);
     --color-tooltip-text: var(--color-description);
     --font-space: 'Space Grotesk', sans-serif;
@@ -313,26 +331,23 @@
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }
+  .top-0 {
+    top: calc(var(--spacing) * 0);
+  }
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-\[8px\] {
-    top: 8px;
-  }
   .top-full {
     top: 100%;
   }
   .right-0 {
     right: calc(var(--spacing) * 0);
   }
-  .right-\[-8px\] {
-    right: -8px;
-  }
   .right-full {
     right: 100%;
   }
-  .bottom-\[8px\] {
-    bottom: 8px;
+  .bottom-0 {
+    bottom: calc(var(--spacing) * 0);
   }
   .bottom-full {
     bottom: 100%;
@@ -343,9 +358,6 @@
   .left-1\/2 {
     left: calc(1/2 * 100%);
   }
-  .left-\[-8px\] {
-    left: -8px;
-  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -406,9 +418,15 @@
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
+  .mx-4 {
+    margin-inline: calc(var(--spacing) * 4);
+  }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
+  .mt-0\.5 {
+    margin-top: calc(var(--spacing) * 0.5);
+  }
   .mt-1 {
     margin-top: calc(var(--spacing) * 1);
   }
@@ -455,6 +473,9 @@
     flex-direction: column;
     row-gap: calc(var(--spacing) * 2);
   }
+  .\!block {
+    display: block !important;
+  }
   .block {
     display: block;
   }
@@ -470,9 +491,6 @@
   .inline-block {
     display: inline-block;
   }
-  .inline-flex {
-    display: inline-flex;
-  }
   .table {
     display: table;
   }
@@ -518,27 +536,27 @@
   .h-\[0\.75rem\] {
     height: 0.75rem;
   }
+  .h-\[16rem\] {
+    height: 16rem;
+  }
   .h-\[24rem\] {
     height: 24rem;
   }
+  .h-auto {
+    height: auto;
+  }
   .h-full {
     height: 100%;
   }
   .h-screen {
     height: 100vh;
   }
-  .\!max-h-\[500px\] {
-    max-height: 500px !important;
-  }
   .max-h-\[500px\] {
     max-height: 500px;
   }
   .min-h-\[0\.75rem\] {
     min-height: 0.75rem;
   }
-  .min-h-\[1\.5rem\] {
-    min-height: 1.5rem;
-  }
   .min-h-\[250px\] {
     min-height: 250px;
   }
@@ -560,9 +578,6 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-60 {
-    width: calc(var(--spacing) * 60);
-  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -596,20 +611,17 @@
   .w-screen {
     width: 100vw;
   }
-  .\!max-w-\[70vh\] {
-    max-width: 70vh !important;
-  }
-  .max-w-\[200px\] {
-    max-width: 200px;
+  .max-w-64 {
+    max-width: calc(var(--spacing) * 64);
   }
   .max-w-xs {
     max-width: var(--container-xs);
   }
-  .\!min-w-\[400px\] {
-    min-width: 400px !important;
+  .min-w-6 {
+    min-width: calc(var(--spacing) * 6);
   }
-  .min-w-\[1\.5rem\] {
-    min-width: 1.5rem;
+  .min-w-40 {
+    min-width: calc(var(--spacing) * 40);
   }
   .min-w-\[2rem\] {
     min-width: 2rem;
@@ -744,15 +756,9 @@
   .overflow-hidden {
     overflow: hidden;
   }
-  .\!overflow-y-auto {
-    overflow-y: auto !important;
-  }
   .overflow-y-auto {
     overflow-y: auto;
   }
-  .\!rounded-lg {
-    border-radius: var(--radius-lg) !important;
-  }
   .\!rounded-none {
     border-radius: 0 !important;
   }
@@ -777,10 +783,6 @@
   .rounded-xl {
     border-radius: var(--radius-xl);
   }
-  .rounded-t-lg {
-    border-top-left-radius: var(--radius-lg);
-    border-top-right-radius: var(--radius-lg);
-  }
   .rounded-l-xl {
     border-top-left-radius: var(--radius-xl);
     border-bottom-left-radius: var(--radius-xl);
@@ -793,18 +795,10 @@
     border-bottom-right-radius: var(--radius-lg);
     border-bottom-left-radius: var(--radius-lg);
   }
-  .\!border {
-    border-style: var(--tw-border-style) !important;
-    border-width: 1px !important;
-  }
   .\!border-0 {
     border-style: var(--tw-border-style) !important;
     border-width: 0px !important;
   }
-  .\!border-2 {
-    border-style: var(--tw-border-style) !important;
-    border-width: 2px !important;
-  }
   .border {
     border-style: var(--tw-border-style);
     border-width: 1px;
@@ -825,18 +819,10 @@
     border-block-style: var(--tw-border-style);
     border-block-width: 2px;
   }
-  .border-t-0 {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 0px;
-  }
   .border-r-0 {
     border-right-style: var(--tw-border-style);
     border-right-width: 0px;
   }
-  .border-b-0 {
-    border-bottom-style: var(--tw-border-style);
-    border-bottom-width: 0px;
-  }
   .border-b-2 {
     border-bottom-style: var(--tw-border-style);
     border-bottom-width: 2px;
@@ -849,12 +835,12 @@
     --tw-border-style: none;
     border-style: none;
   }
-  .border-black {
-    border-color: var(--color-black);
-  }
   .border-button-outline-primary-text {
     border-color: var(--color-button-outline-primary-text);
   }
+  .border-disabled-background {
+    border-color: var(--color-disabled-background);
+  }
   .border-disabled-outline {
     border-color: var(--color-disabled-outline);
   }
@@ -867,26 +853,20 @@
       border-color: color-mix(in oklab, var(--color-divider) 30%, transparent);
     }
   }
-  .border-gray-200 {
-    border-color: var(--color-gray-200);
-  }
-  .border-gray-300 {
-    border-color: var(--color-gray-300);
-  }
   .border-menu-border {
     border-color: var(--color-menu-border);
   }
   .border-primary {
     border-color: var(--color-primary);
   }
+  .border-secondary {
+    border-color: var(--color-secondary);
+  }
   .border-transparent {
     border-color: transparent;
   }
-  .border-warning {
-    border-color: var(--color-warning);
-  }
   .border-warning\/90 {
-    border-color: color-mix(in srgb, #EA9E40 90%, transparent);
+    border-color: color-mix(in srgb, oklch(79.5% 0.184 86.047) 90%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       border-color: color-mix(in oklab, var(--color-warning) 90%, transparent);
     }
@@ -915,9 +895,6 @@
   .border-l-transparent {
     border-left-color: transparent;
   }
-  .\!bg-disabled-background {
-    background-color: var(--color-disabled-background) !important;
-  }
   .\!bg-green-200 {
     background-color: var(--color-green-200) !important;
   }
@@ -954,17 +931,14 @@
   .bg-button-solid-warning-background {
     background-color: var(--color-button-solid-warning-background);
   }
-  .bg-disabled-background {
-    background-color: var(--color-disabled-background);
-  }
-  .bg-gray-50 {
-    background-color: var(--color-gray-50);
+  .bg-carousel-dot-active {
+    background-color: var(--color-carousel-dot-active);
   }
-  .bg-gray-100 {
-    background-color: var(--color-gray-100);
+  .bg-carousel-dot-disabled {
+    background-color: var(--color-carousel-dot-disabled);
   }
-  .bg-gray-200 {
-    background-color: var(--color-gray-200);
+  .bg-disabled-background {
+    background-color: var(--color-disabled-background);
   }
   .bg-green-300 {
     background-color: var(--color-green-300);
@@ -975,12 +949,27 @@
   .bg-menu-background {
     background-color: var(--color-menu-background);
   }
+  .bg-negative {
+    background-color: var(--color-negative);
+  }
+  .bg-neutral {
+    background-color: var(--color-neutral);
+  }
   .bg-overlay-background {
     background-color: var(--color-overlay-background);
   }
+  .bg-positive {
+    background-color: var(--color-positive);
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
+  .bg-primary\/20 {
+    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);
+    }
+  }
   .bg-primary\/30 {
     background-color: color-mix(in srgb, #694BB4 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
@@ -1008,6 +997,15 @@
   .bg-property-title-background {
     background-color: var(--color-property-title-background);
   }
+  .bg-stepperbar-dot-active {
+    background-color: var(--color-stepperbar-dot-active);
+  }
+  .bg-stepperbar-dot-disabled {
+    background-color: var(--color-stepperbar-dot-disabled);
+  }
+  .bg-stepperbar-dot-normal {
+    background-color: var(--color-stepperbar-dot-normal);
+  }
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -1020,9 +1018,6 @@
   .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);
   }
@@ -1035,6 +1030,15 @@
   .bg-tag-yellow-background {
     background-color: var(--color-tag-yellow-background);
   }
+  .bg-text-image-dark-text {
+    background-color: var(--color-text-image-dark-text);
+  }
+  .bg-text-image-primary-text {
+    background-color: var(--color-text-image-primary-text);
+  }
+  .bg-text-image-secondary-text {
+    background-color: var(--color-text-image-secondary-text);
+  }
   .bg-tooltip-background {
     background-color: var(--color-tooltip-background);
   }
@@ -1068,6 +1072,10 @@
     --tw-gradient-position: to right in oklab;
     background-image: linear-gradient(var(--tw-gradient-stops));
   }
+  .from-background {
+    --tw-gradient-from: var(--color-background);
+    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
+  }
   .from-text-image-dark-background {
     --tw-gradient-from: var(--color-text-image-dark-background);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
@@ -1080,8 +1088,8 @@
     --tw-gradient-from: var(--color-text-image-secondary-background);
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .from-white {
-    --tw-gradient-from: var(--color-white);
+  .from-transparent {
+    --tw-gradient-from: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
   .from-30\% {
@@ -1112,11 +1120,11 @@
     --tw-gradient-to: transparent;
     --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
   }
-  .stroke-gray-300 {
-    stroke: var(--color-gray-300);
+  .stroke-progress-indicator-background {
+    stroke: var(--color-progress-indicator-background);
   }
-  .stroke-primary {
-    stroke: var(--color-primary);
+  .stroke-progress-indicator-fill {
+    stroke: var(--color-progress-indicator-fill);
   }
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
@@ -1127,6 +1135,9 @@
   .p-1 {
     padding: calc(var(--spacing) * 1);
   }
+  .p-2 {
+    padding: calc(var(--spacing) * 2);
+  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1148,12 +1159,12 @@
   .px-16 {
     padding-inline: calc(var(--spacing) * 16);
   }
-  .\!py-0 {
-    padding-block: calc(var(--spacing) * 0) !important;
-  }
   .py-1 {
     padding-block: calc(var(--spacing) * 1);
   }
+  .py-1\.5 {
+    padding-block: calc(var(--spacing) * 1.5);
+  }
   .py-2 {
     padding-block: calc(var(--spacing) * 2);
   }
@@ -1169,9 +1180,6 @@
   .pr-4 {
     padding-right: calc(var(--spacing) * 4);
   }
-  .\!pb-0 {
-    padding-bottom: calc(var(--spacing) * 0) !important;
-  }
   .pb-1 {
     padding-bottom: calc(var(--spacing) * 1);
   }
@@ -1206,10 +1214,6 @@
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
   }
-  .leading-6 {
-    --tw-leading: calc(var(--spacing) * 6);
-    line-height: calc(var(--spacing) * 6);
-  }
   .leading-tight {
     --tw-leading: var(--leading-tight);
     line-height: var(--leading-tight);
@@ -1218,10 +1222,6 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
-  .font-medium {
-    --tw-font-weight: var(--font-weight-medium);
-    font-weight: var(--font-weight-medium);
-  }
   .font-semibold {
     --tw-font-weight: var(--font-weight-semibold);
     font-weight: var(--font-weight-semibold);
@@ -1238,9 +1238,6 @@
   .\!text-black {
     color: var(--color-black) !important;
   }
-  .\!text-disabled-text {
-    color: var(--color-disabled-text) !important;
-  }
   .\!text-red-400 {
     color: var(--color-red-400) !important;
   }
@@ -1328,9 +1325,6 @@
   .text-disabled-text {
     color: var(--color-disabled-text);
   }
-  .text-gray-700 {
-    color: var(--color-gray-700);
-  }
   .text-inherit {
     color: inherit;
   }
@@ -1376,12 +1370,6 @@
   .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);
   }
@@ -1468,10 +1456,6 @@
   .opacity-30 {
     opacity: 30%;
   }
-  .\!shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1)) !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-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;
@@ -1480,10 +1464,6 @@
     --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
-  .shadow-lg {
-    --tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / 0.1));
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
-  }
   .shadow-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);
@@ -1512,22 +1492,12 @@
     --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);
   }
-  .ring-1 {
-    --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);
-  }
   .shadow-transparent {
     --tw-shadow-color: transparent;
     @supports (color: color-mix(in lab, red, red)) {
       --tw-shadow-color: color-mix(in oklab, transparent var(--tw-shadow-alpha), transparent);
     }
   }
-  .ring-slate-900\/5 {
-    --tw-ring-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 5%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      --tw-ring-color: color-mix(in oklab, var(--color-slate-900) 5%, transparent);
-    }
-  }
   .\!outline-0 {
     outline-style: var(--tw-outline-style) !important;
     outline-width: 0px !important;
@@ -1561,23 +1531,12 @@
       outline-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
     }
   }
-  .outline-transparent {
-    outline-color: transparent;
-  }
   .outline-white\/20 {
     outline-color: color-mix(in srgb, #FFFFFF 20%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
       outline-color: color-mix(in oklab, var(--color-white) 20%, transparent);
     }
   }
-  .brightness-90 {
-    --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,);
-  }
-  .brightness-95 {
-    --tw-brightness: brightness(95%);
-    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,);
-  }
   .transition {
     transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;
     transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
@@ -1613,6 +1572,12 @@
       }
     }
   }
+  .first\:rounded-t-lg {
+    &:first-child {
+      border-top-left-radius: var(--radius-lg);
+      border-top-right-radius: var(--radius-lg);
+    }
+  }
   .first\:rounded-l-md {
     &:first-child {
       border-top-left-radius: var(--radius-md);
@@ -1625,6 +1590,12 @@
       border-bottom-right-radius: var(--radius-md);
     }
   }
+  .last\:rounded-b-lg {
+    &:last-child {
+      border-bottom-right-radius: var(--radius-lg);
+      border-bottom-left-radius: var(--radius-lg);
+    }
+  }
   .focus-within\:border-primary {
     &:focus-within {
       border-color: var(--color-primary);
@@ -1637,6 +1608,13 @@
       }
     }
   }
+  .hover\:bg-button-solid-primary-background {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-button-solid-primary-background);
+      }
+    }
+  }
   .hover\:bg-button-text-hover-background {
     &:hover {
       @media (hover: hover) {
@@ -1644,10 +1622,10 @@
       }
     }
   }
-  .hover\:bg-gray-300 {
+  .hover\:bg-carousel-dot-active {
     &:hover {
       @media (hover: hover) {
-        background-color: var(--color-gray-300);
+        background-color: var(--color-carousel-dot-active);
       }
     }
   }
@@ -1658,6 +1636,40 @@
       }
     }
   }
+  .hover\:bg-primary\/20 {
+    &: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-primary) 20%, transparent);
+        }
+      }
+    }
+  }
+  .hover\:bg-primary\/40 {
+    &:hover {
+      @media (hover: hover) {
+        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);
+        }
+      }
+    }
+  }
+  .hover\:bg-stepperbar-dot-active {
+    &:hover {
+      @media (hover: hover) {
+        background-color: var(--color-stepperbar-dot-active);
+      }
+    }
+  }
+  .hover\:text-button-solid-primary-text {
+    &:hover {
+      @media (hover: hover) {
+        color: var(--color-button-solid-primary-text);
+      }
+    }
+  }
   .hover\:text-on-primary {
     &:hover {
       @media (hover: hover) {
@@ -1705,14 +1717,6 @@
       }
     }
   }
-  .hover\:brightness-100 {
-    &:hover {
-      @media (hover: hover) {
-        --tw-brightness: brightness(100%);
-        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-negative {
     &:focus {
       border-color: var(--color-negative);
@@ -1878,42 +1882,42 @@
   &:where([data-theme=dark], [data-theme=dark] *) {
     --color-primary: var(--color-purple-400);
     --color-positive: var(--color-green-700);
+    --color-negative: var(--color-red-700);
+    --color-text-default: var(--color-text-light);
     --color-surface: #333333;
-    --color-on-surface: #EEEEEE;
+    --color-on-surface: var(--color-text-light);
     --color-surface-variant: #494949;
     --color-surface-warning: #FBECD9;
     --color-text-label: #CFCFCF;
     --color-highlight: #3272DF;
-    --color-background: #1A1A1A;
-    --color-on-background: #EEEEEE;
+    --color-background: #222222;
+    --color-on-background: var(--color-text-light);
     --color-border: #444444;
     --color-neutral: #4D4D4D;
     --color-neutral-outline: #B3B3B3;
     --color-neutral-surface: #E6E6E6;
     --color-neutral-background: #F8F8F8;
-    --color-text-primary: #EEEEEE;
+    --color-text-primary: var(--color-text-light);
     --color-text-secondary: #666666;
     --color-text-tertiary: #B3B3B3;
     --color-text-highlight: #3272DF;
-    --color-icon-primary: #EEEEEE;
-    --color-icon-secondary: #666666;
-    --color-icon-highlight: #3272DF;
     --color-description: #999999;
     --color-disabled-background: #555555;
     --color-disabled-text: #999999;
     --color-button-solid-neutral-background: #424242;
-    --color-button-solid-neutral-icon: #EEEEEE;
-    --color-button-solid-neutral-text: #EEEEEE;
+    --color-button-solid-neutral-icon: var(--color-text-light);
+    --color-button-solid-neutral-text: var(--color-text-light);
     --color-button-text-hover-background: #3F3F3F;
-    --color-button-text-neutral-text: #EEEEEE;
-    --color-button-text-neutral-icon: #EEEEEE;
+    --color-button-text-neutral-text: var(--color-text-light);
+    --color-button-text-neutral-icon: var(--color-text-light);
     --color-menu-background: #333333;
-    --color-menu-text: #EEEEEE;
+    --color-menu-text: var(--color-text-light);
     --color-menu-border: var(--color-border);
     --color-property-title-background: #393939;
     --color-property-title-text: var(--color-on-surface);
-    --color-overlay-background: #222222;
-    --color-overlay-text: #FFFFFF;
+    --color-progress-indicator-background: var(--color-gray-700);
+    --color-overlay-background: #2A2A2A;
+    --color-overlay-text: var(--color-text-light);
     --color-tabel-header-background: #F6FAFF;
   }
 }
@@ -1923,6 +1927,7 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 8);
+    min-height: calc(var(--spacing) * 8);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 1);
@@ -1935,6 +1940,7 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 10);
+    min-height: calc(var(--spacing) * 10);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
@@ -1947,6 +1953,7 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 12);
+    min-height: calc(var(--spacing) * 12);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
@@ -1959,6 +1966,9 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 8);
+    min-height: calc(var(--spacing) * 8);
+    width: calc(var(--spacing) * 8);
+    min-width: calc(var(--spacing) * 8);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 1);
@@ -1970,6 +1980,9 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 10);
+    min-height: calc(var(--spacing) * 10);
+    width: calc(var(--spacing) * 10);
+    min-width: calc(var(--spacing) * 10);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
@@ -1981,6 +1994,9 @@
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
     height: calc(var(--spacing) * 12);
+    min-height: calc(var(--spacing) * 12);
+    width: calc(var(--spacing) * 12);
+    min-width: calc(var(--spacing) * 12);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
@@ -2069,12 +2085,13 @@
   * {
     border-color: var(--color-border);
   }
-  html, main {
+  html {
     background-color: var(--color-background);
     color: var(--color-on-background);
   }
   button {
     cursor: pointer;
+    text-wrap: nowrap;
   }
   input {
     display: block;
@@ -2082,8 +2099,8 @@
     border-style: var(--tw-border-style);
     border-width: 2px;
     background-color: var(--color-surface);
-    padding-inline: calc(var(--spacing) * 3);
-    padding-block: calc(var(--spacing) * 2);
+    padding-inline: calc(var(--spacing) * 2);
+    padding-block: 0.375rem;
     color: var(--color-on-surface);
     &:hover {
       @media (hover: hover) {
@@ -2152,7 +2169,7 @@
     line-height: var(--tw-leading, var(--text-sm--line-height));
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
-    color: var(--color-gray-600);
+    color: var(--color-text-label);
   }
   .textstyle-description {
     color: var(--color-description);
@@ -2186,7 +2203,7 @@
   .textstyle-table-header {
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
-    color: var(--color-gray-600);
+    color: var(--color-text-label);
   }
   .textstyle-navigation-item {
     font-family: var(--font-space);
@@ -2201,7 +2218,7 @@
   .textstyle-form-description {
     font-size: var(--text-sm);
     line-height: var(--tw-leading, var(--text-sm--line-height));
-    color: var(--color-gray-500);
+    color: var(--color-description);
   }
 }
 @property --tw-translate-x {