@helpwave/hightide 0.0.18 → 0.1.0

package/dist/css/globals.css

@@ -10,7 +10,9 @@
     --color-red-400: #E3798A;
     --color-yellow-200: oklch(94.5% 0.129 101.54);
     --color-green-200: oklch(92.5% 0.084 155.995);
+    --color-green-300: oklch(87.1% 0.15 154.449);
     --color-sky-900: oklch(39.1% 0.09 240.876);
+    --color-purple-50: #EFE6FD;
     --color-purple-400: #8470c5;
     --color-purple-500: #694BB4;
     --color-slate-900: oklch(20.8% 0.042 265.755);
@@ -22,7 +24,6 @@
     --color-gray-500: #888888;
     --color-gray-600: #666666;
     --color-gray-700: #4D4D4D;
-    --color-gray-900: #1A1A1A;
     --color-black: #000000;
     --color-white: #FFFFFF;
     --spacing: 0.25rem;
@@ -53,7 +54,6 @@
     --radius-lg: 0.5rem;
     --radius-xl: 0.75rem;
     --radius-2xl: 1rem;
-    --radius-3xl: 1.5rem;
     --animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
     --animate-bounce: bounce 1s infinite;
     --default-transition-duration: 150ms;
@@ -64,8 +64,11 @@
     --color-on-primary: #FFFFFF;
     --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-surface: #FFFFFF;
     --color-on-surface: #1A1A1A;
     --color-surface-warning: #FBECD9;
@@ -75,31 +78,37 @@
     --color-disabled-background: #BBBBBB;
     --color-disabled-text: #555555;
     --color-disabled-icon: #555555;
-    --color-button-solid-primary-background: var(--color-purple-500);
-    --color-button-solid-primary-text: #FFFFFF;
-    --color-button-solid-primary-icon: #FFFFFF;
-    --color-button-solid-secondary-background: #EFE6FD;
-    --color-button-solid-secondary-text: var(--color-purple-500);
-    --color-button-solid-secondary-icon: var(--color-purple-500);
+    --color-disabled-outline: #555555;
+    --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: #F2F2F2;
     --color-button-solid-tertiary-icon: #888888;
     --color-button-solid-tertiary-text: #888888;
-    --color-button-outline-primary-icon: var(--color-purple-500);
-    --color-button-outline-primary-text: var(--color-purple-500);
-    --color-button-solid-positive-background: #69CB81;
-    --color-button-solid-positive-icon: #FFFFFF;
-    --color-button-solid-positive-text: #FFFFFF;
-    --color-button-solid-warning-background: #EA9E40;
-    --color-button-solid-warning-icon: #FFFFFF;
-    --color-button-solid-warning-text: #FFFFFF;
-    --color-button-solid-negative-background: #DC576D;
-    --color-button-solid-negative-icon: #FFFFFF;
-    --color-button-solid-negative-text: #FFFFFF;
-    --color-button-text-hover-background: #E1E1E1;
+    --color-button-solid-neutral-background: #D6D6D6;
+    --color-button-solid-neutral-icon: #1A1A1A;
+    --color-button-solid-neutral-text: #1A1A1A;
+    --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-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;
-    --color-button-text-negative-text: #DC576D;
-    --color-button-text-negative-icon: #DC576D;
+    --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-menu-background: #FFFFFF;
     --color-menu-text: #1A1A1A;
     --color-menu-border: #999999;
@@ -124,12 +133,16 @@
     --color-tag-pink-background: #CEA3B8;
     --color-tag-pink-text: #CE75A0;
     --color-tag-pink-icon: #CE75A0;
-    --color-text-image-primary-background: var(--color-purple-500);
-    --color-text-image-primary-text: #FFFFFF;
+    --color-text-image-primary-background: var(--color-primary);
+    --color-text-image-primary-text: var(--color-on-primary);
     --color-text-image-secondary-background: #3171DE;
     --color-text-image-secondary-text: #FFFFFF;
     --color-text-image-dark-background: #11243E;
     --color-text-image-dark-text: #FFFFFF;
+    --color-overlay-background: #FFFFFF;
+    --color-overlay-text: #1A1A1A;
+    --color-tooltip-background: var(--color-overlay-background);
+    --color-tooltip-text: var(--color-description);
     --font-space: 'Space Grotesk', sans-serif;
   }
 }
@@ -303,9 +316,6 @@
   .top-1\/2 {
     top: calc(1/2 * 100%);
   }
-  .top-\[6px\] {
-    top: 6px;
-  }
   .top-\[8px\] {
     top: 8px;
   }
@@ -321,9 +331,6 @@
   .right-full {
     right: 100%;
   }
-  .bottom-0 {
-    bottom: calc(var(--spacing) * 0);
-  }
   .bottom-\[8px\] {
     bottom: 8px;
   }
@@ -339,9 +346,6 @@
   .left-\[-8px\] {
     left: -8px;
   }
-  .left-\[6px\] {
-    left: 6px;
-  }
   .left-\[50\%\] {
     left: 50%;
   }
@@ -354,15 +358,6 @@
   .z-\[1\] {
     z-index: 1;
   }
-  .z-\[2\] {
-    z-index: 2;
-  }
-  .z-\[3\] {
-    z-index: 3;
-  }
-  .z-\[4\] {
-    z-index: 4;
-  }
   .z-\[6\] {
     z-index: 6;
   }
@@ -372,8 +367,8 @@
   .z-\[10\] {
     z-index: 10;
   }
-  .z-\[99\] {
-    z-index: 99;
+  .z-\[9999\] {
+    z-index: 9999;
   }
   .container {
     width: 100%;
@@ -402,15 +397,15 @@
   .\!m-0 {
     margin: calc(var(--spacing) * 0) !important;
   }
+  .m-0 {
+    margin: calc(var(--spacing) * 0);
+  }
   .mx-2 {
     margin-inline: calc(var(--spacing) * 2);
   }
   .mx-3 {
     margin-inline: calc(var(--spacing) * 3);
   }
-  .mx-4 {
-    margin-inline: calc(var(--spacing) * 4);
-  }
   .my-2 {
     margin-block: calc(var(--spacing) * 2);
   }
@@ -423,9 +418,6 @@
   .mt-3 {
     margin-top: calc(var(--spacing) * 3);
   }
-  .mt-4 {
-    margin-top: calc(var(--spacing) * 4);
-  }
   .mt-\[6px\] {
     margin-top: 6px;
   }
@@ -441,9 +433,6 @@
   .mb-2 {
     margin-bottom: calc(var(--spacing) * 2);
   }
-  .mb-6 {
-    margin-bottom: calc(var(--spacing) * 6);
-  }
   .mb-\[6px\] {
     margin-bottom: 6px;
   }
@@ -475,9 +464,6 @@
   .flex {
     display: flex;
   }
-  .grid {
-    display: grid;
-  }
   .hidden {
     display: none;
   }
@@ -520,9 +506,6 @@
   .h-4 {
     height: calc(var(--spacing) * 4);
   }
-  .h-6 {
-    height: calc(var(--spacing) * 6);
-  }
   .h-7 {
     height: calc(var(--spacing) * 7);
   }
@@ -538,9 +521,6 @@
   .h-\[24rem\] {
     height: 24rem;
   }
-  .h-\[200px\] {
-    height: 200px;
-  }
   .h-full {
     height: 100%;
   }
@@ -580,12 +560,12 @@
   .w-4 {
     width: calc(var(--spacing) * 4);
   }
-  .w-6 {
-    width: calc(var(--spacing) * 6);
-  }
   .w-60 {
     width: calc(var(--spacing) * 60);
   }
+  .w-64 {
+    width: calc(var(--spacing) * 64);
+  }
   .w-\[2rem\] {
     width: 2rem;
   }
@@ -598,11 +578,11 @@
   .w-\[100px\] {
     width: 100px;
   }
-  .w-\[200px\] {
-    width: 200px;
+  .w-\[300px\] {
+    width: 300px;
   }
-  .w-\[320px\] {
-    width: 320px;
+  .w-\[400px\] {
+    width: 400px;
   }
   .w-auto {
     width: auto;
@@ -613,9 +593,6 @@
   .w-full {
     width: 100%;
   }
-  .w-min {
-    width: min-content;
-  }
   .w-screen {
     width: 100vw;
   }
@@ -675,18 +652,6 @@
     --tw-translate-y: calc(calc(1/2 * 100%) * -1);
     translate: var(--tw-translate-x) var(--tw-translate-y);
   }
-  .-translate-y-\[1px\] {
-    --tw-translate-y: calc(1px * -1);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-2\/3 {
-    --tw-translate-y: calc(2/3 * 100%);
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
-  .translate-y-\[1px\] {
-    --tw-translate-y: 1px;
-    translate: var(--tw-translate-x) var(--tw-translate-y);
-  }
   .transform {
     transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);
   }
@@ -723,9 +688,6 @@
   .items-center {
     align-items: center;
   }
-  .items-end {
-    align-items: flex-end;
-  }
   .items-start {
     align-items: flex-start;
   }
@@ -797,9 +759,6 @@
   .rounded-2xl {
     border-radius: var(--radius-2xl);
   }
-  .rounded-3xl {
-    border-radius: var(--radius-3xl);
-  }
   .rounded-full {
     border-radius: calc(infinity * 1px);
   }
@@ -847,6 +806,10 @@
     border-style: var(--tw-border-style);
     border-width: 1px;
   }
+  .border-0 {
+    border-style: var(--tw-border-style);
+    border-width: 0px;
+  }
   .border-2 {
     border-style: var(--tw-border-style);
     border-width: 2px;
@@ -892,6 +855,9 @@
   .border-button-outline-primary-text {
     border-color: var(--color-button-outline-primary-text);
   }
+  .border-disabled-outline {
+    border-color: var(--color-disabled-outline);
+  }
   .border-disabled-text {
     border-color: var(--color-disabled-text);
   }
@@ -904,9 +870,6 @@
   .border-gray-400 {
     border-color: var(--color-gray-400);
   }
-  .border-gray-600 {
-    border-color: var(--color-gray-600);
-  }
   .border-menu-border {
     border-color: var(--color-menu-border);
   }
@@ -928,26 +891,26 @@
       border-color: color-mix(in oklab, var(--color-warning) 90%, transparent);
     }
   }
-  .border-t-gray-600 {
-    border-top-color: var(--color-gray-600);
+  .border-t-tooltip-background {
+    border-top-color: var(--color-tooltip-background);
   }
   .border-t-transparent {
     border-top-color: transparent;
   }
-  .border-r-gray-600 {
-    border-right-color: var(--color-gray-600);
+  .border-r-tooltip-background {
+    border-right-color: var(--color-tooltip-background);
   }
   .border-r-transparent {
     border-right-color: transparent;
   }
-  .border-b-gray-600 {
-    border-bottom-color: var(--color-gray-600);
+  .border-b-tooltip-background {
+    border-bottom-color: var(--color-tooltip-background);
   }
   .border-b-transparent {
     border-bottom-color: transparent;
   }
-  .border-l-gray-600 {
-    border-left-color: var(--color-gray-600);
+  .border-l-tooltip-background {
+    border-left-color: var(--color-tooltip-background);
   }
   .border-l-transparent {
     border-left-color: transparent;
@@ -964,15 +927,18 @@
   .\!bg-yellow-200 {
     background-color: var(--color-yellow-200) !important;
   }
-  .bg-black\/70 {
-    background-color: color-mix(in srgb, #000000 70%, transparent);
+  .bg-black\/30 {
+    background-color: color-mix(in srgb, #000000 30%, transparent);
     @supports (color: color-mix(in lab, red, red)) {
-      background-color: color-mix(in oklab, var(--color-black) 70%, transparent);
+      background-color: color-mix(in oklab, var(--color-black) 30%, transparent);
     }
   }
   .bg-button-solid-negative-background {
     background-color: var(--color-button-solid-negative-background);
   }
+  .bg-button-solid-neutral-background {
+    background-color: var(--color-button-solid-neutral-background);
+  }
   .bg-button-solid-positive-background {
     background-color: var(--color-button-solid-positive-background);
   }
@@ -1000,9 +966,18 @@
   .bg-gray-200 {
     background-color: var(--color-gray-200);
   }
+  .bg-green-300 {
+    background-color: var(--color-green-300);
+  }
+  .bg-inherit {
+    background-color: inherit;
+  }
   .bg-menu-background {
     background-color: var(--color-menu-background);
   }
+  .bg-overlay-background {
+    background-color: var(--color-overlay-background);
+  }
   .bg-primary {
     background-color: var(--color-primary);
   }
@@ -1060,6 +1035,9 @@
   .bg-tag-yellow-background {
     background-color: var(--color-tag-yellow-background);
   }
+  .bg-tooltip-background {
+    background-color: var(--color-tooltip-background);
+  }
   .bg-transparent {
     background-color: transparent;
   }
@@ -1140,15 +1118,9 @@
   .stroke-primary {
     stroke: var(--color-primary);
   }
-  .object-cover {
-    object-fit: cover;
-  }
   .\!p-0 {
     padding: calc(var(--spacing) * 0) !important;
   }
-  .\!p-2 {
-    padding: calc(var(--spacing) * 2) !important;
-  }
   .p-0 {
     padding: calc(var(--spacing) * 0);
   }
@@ -1158,9 +1130,6 @@
   .p-2 {
     padding: calc(var(--spacing) * 2);
   }
-  .p-3 {
-    padding: calc(var(--spacing) * 3);
-  }
   .p-4 {
     padding: calc(var(--spacing) * 4);
   }
@@ -1281,6 +1250,9 @@
   .whitespace-nowrap {
     white-space: nowrap;
   }
+  .\!text-black {
+    color: var(--color-black) !important;
+  }
   .\!text-disabled-text {
     color: var(--color-disabled-text) !important;
   }
@@ -1308,6 +1280,12 @@
   .text-button-solid-negative-text {
     color: var(--color-button-solid-negative-text);
   }
+  .text-button-solid-neutral-icon {
+    color: var(--color-button-solid-neutral-icon);
+  }
+  .text-button-solid-neutral-text {
+    color: var(--color-button-solid-neutral-text);
+  }
   .text-button-solid-positive-icon {
     color: var(--color-button-solid-positive-icon);
   }
@@ -1350,6 +1328,12 @@
   .text-button-text-neutral-text {
     color: var(--color-button-text-neutral-text);
   }
+  .text-button-text-primary-icon {
+    color: var(--color-button-text-primary-icon);
+  }
+  .text-button-text-primary-text {
+    color: var(--color-button-text-primary-text);
+  }
   .text-description {
     color: var(--color-description);
   }
@@ -1359,14 +1343,11 @@
   .text-disabled-text {
     color: var(--color-disabled-text);
   }
-  .text-gray-600 {
-    color: var(--color-gray-600);
-  }
   .text-gray-700 {
     color: var(--color-gray-700);
   }
-  .text-gray-900 {
-    color: var(--color-gray-900);
+  .text-inherit {
+    color: inherit;
   }
   .text-menu-text {
     color: var(--color-menu-text);
@@ -1383,18 +1364,15 @@
   .text-on-surface {
     color: var(--color-on-surface);
   }
+  .text-overlay-text {
+    color: var(--color-overlay-text);
+  }
   .text-positive {
     color: var(--color-positive);
   }
   .text-primary {
     color: var(--color-primary);
   }
-  .text-primary\/40 {
-    color: color-mix(in srgb, #694BB4 40%, transparent);
-    @supports (color: color-mix(in lab, red, red)) {
-      color: color-mix(in oklab, var(--color-primary) 40%, transparent);
-    }
-  }
   .text-secondary {
     color: var(--color-secondary);
   }
@@ -1461,6 +1439,9 @@
   .text-text-image-secondary-text {
     color: var(--color-text-image-secondary-text);
   }
+  .text-tooltip-text {
+    color: var(--color-tooltip-text);
+  }
   .text-transparent {
     color: transparent;
   }
@@ -1522,6 +1503,10 @@
     --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);
   }
+  .shadow-none {
+    --tw-shadow: 0 0 #0000;
+    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  }
   .shadow-sm {
     --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);
@@ -1942,13 +1927,18 @@
     --color-description: #999999;
     --color-disabled-background: #555555;
     --color-disabled-text: #888888;
-    --color-button-text-hover-background: #383838;
+    --color-button-solid-neutral-background: #3F3F3F;
+    --color-button-solid-neutral-icon: #EEEEEE;
+    --color-button-solid-neutral-text: #EEEEEE;
+    --color-button-text-hover-background: #3F3F3F;
     --color-button-text-neutral-text: #EEEEEE;
     --color-button-text-neutral-icon: #EEEEEE;
     --color-menu-background: #333333;
     --color-menu-text: #EEEEEE;
     --color-menu-border: #999999;
     --color-tabel-header-background: #F6FAFF;
+    --color-overlay-background: #222222;
+    --color-overlay-text: #FFFFFF;
   }
 }
 @layer components {
@@ -1956,6 +1946,7 @@
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 8);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 1);
@@ -1967,6 +1958,7 @@
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 10);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
@@ -1978,6 +1970,7 @@
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 12);
     align-items: center;
     justify-content: center;
     column-gap: calc(var(--spacing) * 2);
@@ -1985,6 +1978,39 @@
     padding-inline: 1rem;
     padding-block: 0.675rem;
   }
+  .icon-btn-sm {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 8);
+    align-items: center;
+    justify-content: center;
+    column-gap: calc(var(--spacing) * 1);
+    border-radius: 0.375rem;
+    padding: 0.375rem;
+  }
+  .icon-btn-md {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 10);
+    align-items: center;
+    justify-content: center;
+    column-gap: calc(var(--spacing) * 2);
+    border-radius: 0.375rem;
+    padding: 0.5rem;
+  }
+  .icon-btn-lg {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    height: calc(var(--spacing) * 12);
+    align-items: center;
+    justify-content: center;
+    column-gap: calc(var(--spacing) * 2);
+    border-radius: 0.375rem;
+    padding: 0.75rem;
+  }
   .card-sm {
     display: flex;
     flex-direction: column;
@@ -2071,6 +2097,32 @@
   button {
     cursor: pointer;
   }
+  input {
+    display: block;
+    border-radius: var(--radius-md);
+    border-style: var(--tw-border-style);
+    border-width: 2px;
+    border-color: var(--color-gray-200);
+    background-color: var(--color-surface);
+    padding-inline: calc(var(--spacing) * 3);
+    padding-block: calc(var(--spacing) * 2);
+    color: var(--color-on-surface);
+    &:hover {
+      @media (hover: hover) {
+        border-color: var(--color-primary);
+      }
+    }
+    &:focus {
+      border-color: var(--color-primary);
+    }
+    &:focus {
+      --tw-ring-color: var(--color-primary);
+    }
+    &:focus {
+      --tw-outline-style: none;
+      outline-style: none;
+    }
+  }
   .textstyle-title-3xl {
     font-family: var(--font-space);
     font-size: var(--text-5xl);
@@ -2125,7 +2177,7 @@
     color: var(--color-gray-600);
   }
   .textstyle-description {
-    color: var(--color-gray-400);
+    color: var(--color-description);
   }
   .textstyle-label-lg {
     font-size: var(--text-lg);