@helpwave/hightide 0.5.3 → 0.6.0

package/dist/style/uncompiled/theme/colors/basic.css

@@ -38,6 +38,7 @@
   --color-orange-200: #F7D8B3;
   --color-orange-500: #EA9E40;
   --color-orange-600: #c18133;
+  --color-orange-900: #4A2F1A;
 
   /* Purple */
   --color-purple-50: #EFE6FD;

package/dist/style/uncompiled/theme/colors/component.css

@@ -1,4 +1,4 @@
-@import './semantic.css';
+@import "./semantic.css";
 
 /*
  * default light-theme component colors
@@ -22,9 +22,6 @@
   --color-menu-text: var(--color-on-surface);
   --color-menu-border: var(--color-border);
 
-  /* Label */
-  --color-label-text: var(--color-text-secondary);
-
   /* Overlay, Dialog, Modal */
   --color-overlay-background: var(--color-surface);
   --color-overlay-text: var(--color-on-surface);
@@ -50,8 +47,8 @@
   /* Table */
   --color-table-background: var(--color-surface);
   --color-table-text: var(--color-on-surface);
-  --color-table-header-background: color-mix(in srgb, var(--color-blue-500) 15%, var(--color-surface));
-  --color-table-row-hover-background: color-mix(in srgb, var(--color-purple-500) 15%, var(--color-surface));
+  --color-table-header-background: var(--color-surface-variant);
+  --color-table-row-hover-background: var(--color-surface-hover);
 
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
@@ -87,7 +84,7 @@
     --color-overlay-shadow: #00000060;
 
     /* Scrollbar */
-    --color-scrollbar-track: #FFFFFF33;
+    --color-scrollbar-track: #ffffff33;
     --color-scrollbar-thumb: var(--color-gray-300);
 
     /* Other */
@@ -97,4 +94,4 @@
     --color-outline: var(--color-gray-700);
     --color-outline-variant: var(--color-gray-600);
   }
-}
+}

package/dist/style/uncompiled/theme/colors/semantic.css

@@ -49,13 +49,15 @@
   --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-neutral: var(--color-gray-150);
+  --color-on-neutral: var(--color-black);
+  --color-neutral-hover: var(--color-gray-200);
+  --color-neutral-text: var(--color-black);
+  --color-neutral-text-hover: var(--color-gray-500);
+  --color-neutral-outline: var(--color-black);
+  --color-neutral-outline-hover: var(--color-gray-600);
+  --color-neutral-tonal-text: var(--color-black);
+  --color-neutral-tonal-background: var(--color-gray-300);
 
   --color-highlight:  var(--color-blue-500);
 }
@@ -80,6 +82,7 @@
     --color-surface: var(--color-gray-800);
     --color-surface-hover: var(--color-gray-700);
     --color-surface-variant: var(--color-gray-900);
+    --color-surface-warning: var(--color-orange-900);
 
     /* Text */
     --color-text-primary: var(--color-gray-100);
@@ -92,8 +95,13 @@
     /* Other */
     --color-primary: var(--color-purple-400);
 
-    --color-neutral: var(--color-gray-700);
+    --color-neutral: var(--color-gray-750);
     --color-neutral-hover: var(--color-gray-600);
-    --color-neutral-outline-hover: var(--color-gray-200);
+    --color-on-neutral: var(--color-white);
+    --color-neutral-text: var(--color-white);
+    --color-neutral-outline: var(--color-gray-200);
+    --color-neutral-outline-hover: var(--color-gray-400);
+    --color-neutral-tonal-text: var(--color-white);
+    --color-neutral-tonal-background: var(--color-gray-400);
   }
 }

package/dist/style/uncompiled/theme/colors/utilities.css

@@ -1,40 +1,40 @@
 @utility primary {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-primary);
   --coloring-on-color: var(--color-on-primary);
   --coloring-hover: var(--color-primary-hover);
 }
 
 @utility secondary {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-secondary);
   --coloring-on-color: var(--color-on-secondary);
   --coloring-hover: var(--color-secondary-hover);
 }
 
 @utility positive {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-positive);
   --coloring-on-color: var(--color-on-positive);
   --coloring-hover: var(--color-positive-hover);
 }
 
 @utility negative {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-negative);
   --coloring-on-color: var(--color-on-negative);
   --coloring-hover: var(--color-negative-hover);
 }
 
 @utility warning {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-warning);
   --coloring-on-color: var(--color-on-warning);
   --coloring-hover: var(--color-warning-hover);
 }
 
 @utility neutral {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-neutral);
   --coloring-on-color: var(--color-on-neutral);
   --coloring-hover: var(--color-neutral-hover);
@@ -42,10 +42,14 @@
   --coloring-text-hover: var(--color-neutral-text-hover);
   --coloring-outline: var(--color-neutral-outline);
   --coloring-outline-hover: var(--color-neutral-outline-hover);
+  --coloring-tonal: var(--color-neutral-tonal);
+  --coloring-tonal-text: var(--color-neutral-tonal-text);
+  --coloring-tonal-background: var(--color-neutral-tonal-background);
+  --coloring-tonal-hover: var(--color-neutral-tonal-hover);
 }
 
 @utility disabled {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-disabled);
   --coloring-on-color: var(--color-on-disabled);
   --coloring-hover: var(--color-disabled);
@@ -53,13 +57,39 @@
 }
 
 @utility description {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-description);
 }
 
 @utility surface {
-  @apply reset-coloring-variables;
+  @apply coloring-reset-variables;
   --coloring-color: var(--color-surface);
   --coloring-on-color: var(--color-on-surface);
   --coloring-hover: var(--color-surface-hover);
-}
+}
+
+@utility coloring-style-detect {
+  @apply data-[coloringstyle=solid]:coloring-solid;
+  @apply data-[coloringstyle=text]:coloring-text;
+  @apply data-[coloringstyle=outline]:coloring-outline;
+  @apply data-[coloringstyle=tonal]:coloring-tonal;
+}
+
+@utility coloring-style-hover-detect {
+  @apply data-[coloringstyle=solid]:coloring-solid-hover;
+  @apply data-[coloringstyle=text]:coloring-text-hover;
+  @apply data-[coloringstyle=outline]:coloring-outline-hover;
+  @apply data-[coloringstyle=tonal]:coloring-tonal-hover;
+}
+
+@utility coloring-color-detect {
+  @apply data-[color=primary]:primary;
+  @apply data-[color=secondary]:secondary;
+  @apply data-[color=positive]:positive;
+  @apply data-[color=warning]:warning;
+  @apply data-[color=negative]:negative;
+  @apply data-[color=neutral]:neutral;
+  @apply data-[color=description]:description;
+  @apply data-[color=surface]:surface;
+  @apply data-[color=disabled]:disabled;
+}

package/dist/style/uncompiled/theme/components/avatar.css

@@ -0,0 +1,74 @@
+@layer components {
+  *[data-name="avatar"] {
+    @apply relative flex-row-0 items-center justify-center primary coloring-solid rounded-full;
+    &[data-group] {
+      @apply absolute shadow-side shadow-r-4 shadow-hard;
+    }
+    &[data-size="xs"] {
+      @apply size-6 p-0.5 text-xs font-semibold;
+    }
+    &[data-size="sm"] {
+      @apply size-8 p-1 text-xs font-semibold;
+    }
+    &[data-size="md"] {
+      @apply size-10 p-1.5 text-lg font-semibold;
+    }
+    &[data-size="lg"] {
+      @apply size-12 p-2 text-2xl font-bold;
+    }
+
+    &[data-group]:nth-child(1) {
+      left: calc(0 * var(--size) * var(--overlap));
+      z-index: 5;
+    }
+    &[data-group]:nth-child(2) {
+      left: calc(1 * var(--size) * var(--overlap));
+      z-index: 4;
+    }
+    &[data-group]:nth-child(3) {
+      left: calc(2 * var(--size) * var(--overlap));
+      z-index: 3;
+    }
+    &[data-group]:nth-child(4) {
+      left: calc(3 * var(--size) * var(--overlap));
+      z-index: 2;
+    }
+    &[data-group]:nth-child(5) {
+      left: calc(4 * var(--size) * var(--overlap));
+      z-index: 1;
+    }
+  }
+
+  *[data-name="avatar-image"] {
+    @apply absolute left-0 top-0 z-1 rounded-[inherit] size-[inherit];
+    &:not([data-loaded]) {
+      @apply opacity-0;
+    }
+  }
+
+  *[data-name="avatar-group"] {
+    @apply flex-row-2 items-center h-[var(--size)] w-fit;
+    --overlap: 0.5;
+    --count: 5;
+    &[data-size="xs"] {
+      --size: calc(var(--spacing) * 6);
+    }
+    &[data-size="sm"] {
+      --size: calc(var(--spacing) * 8);
+    }
+    &[data-size="md"] {
+      --size: calc(var(--spacing) * 10);
+    }
+    &[data-size="lg"] {
+      --size: calc(var(--spacing) * 12);
+    }
+  }
+
+  *[data-name="avatar-group-container"] {
+    @apply relative w-[calc(var(--size)*(0.5*4+1))] h-[var(--size)];
+  }
+
+  *[data-name="avatar-group-more"] {
+    @apply flex-row-2 truncate items-center text-[calc(var(--size)*2/3)];
+  }
+}

package/dist/style/uncompiled/theme/components/breadcrumb.css

@@ -0,0 +1,15 @@
+@layer components {
+  [data-name="breadcrumb"] {
+    @apply flex-row-2 items-center;
+  }
+  [data-name="breadcrumb-item"] {
+    @apply flex-row-1 items-center;
+  }
+  [data-name="breadcrumb-link"] {
+    @apply flex-row-1 px-1.5 py-1 rounded-1.5 h-8;
+    @apply description last:neutral coloring-text-hover;
+  }
+  [data-name="breadcrumb-divider"] {
+    @apply px-1 text-description;
+  }
+}

package/dist/style/uncompiled/theme/components/button.css

@@ -0,0 +1,65 @@
+@layer components {
+  [data-name="button"] {
+    @apply: font-semibold whitespace-nowrap;
+    &:not([data-disabled]) {
+      @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
+    }
+    &[data-disabled] {
+      @apply disabled coloring-style-detect cursor-not-allowed;
+    }
+    &[data-layout="icon"] {
+      @apply flex-col-0 items-center justify-center;
+      &[data-size="xs"] {
+        @apply p-1 rounded-1 size-6;
+        &[data-coloringstyle="outline"] {
+          @apply p-0.5;
+        }
+      }
+      &[data-size="sm"] {
+        @apply p-1.5 rounded-1.5 size-8;
+        &[data-coloringstyle="outline"] {
+          @apply p-1;
+        }
+      }
+      &[data-size="md"] {
+        @apply p-2 rounded-1.5 size-10;
+        &[data-coloringstyle="outline"] {
+          @apply p-1.5;
+        }
+      }
+      &[data-size="lg"] {
+        @apply p-2 rounded-1.5 size-12;
+        &[data-coloringstyle="outline"] {
+          @apply p-1.5;
+        }
+      }
+    }
+    &[data-layout="default"] {
+      @apply flex flex-row items-center justify-center;
+      &[data-size="xs"] {
+        @apply gap-x-1 px-1 py-0.75 rounded-1 h-6 text-sm;
+        &[data-coloringstyle="outline"] {
+          @apply px-0.5 py-0.25;
+        }
+      }
+      &[data-size="sm"] {
+        @apply gap-x-1 px-1.5 py-1 rounded-1.5 h-8;
+        &[data-coloringstyle="outline"] {
+          @apply px-1 py-0.5;
+        }
+      }
+      &[data-size="md"] {
+        @apply gap-x-2 px-3 py-2 rounded-1.5 h-10;
+        &[data-coloringstyle="outline"] {
+          @apply px-2.5 py-1.5;
+        }
+      }
+      &[data-size="lg"] {
+        @apply gap-x-2 px-4 py-2.5 rounded-1.5 h-12;
+        &[data-coloringstyle="outline"] {
+          @apply px-3.5 py-2;
+        }
+      }
+    }
+  }
+}

package/dist/style/uncompiled/theme/components/card.css

@@ -0,0 +1,13 @@
+@layer components {
+  .card-sm {
+    @apply flex-col-2 surface coloring-solid px-2 py-1 rounded;
+  }
+
+  .card-md {
+    @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
+  }
+
+  .card-lg {
+    @apply flex-col-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
+  }
+}

package/dist/style/uncompiled/theme/components/checkbox.css

@@ -0,0 +1,49 @@
+@layer components {
+  [data-name="checkbox"]:not(.default-style-none) {
+    @apply flex-col-0 items-center justify-center rounded border-2;
+    &:not([data-disabled]) {
+      @apply hover:cursor-pointer;
+    }
+    &[data-disabled] {
+      @apply border-on-disabled bg-disabled cursor-not-allowed;
+      @apply data-[checked=false]:text-transparent text-on-disabled;
+    }
+    &:not([data-disabled])[data-invalid] {
+      @apply border-negative hover:border-negative-hover;
+    }
+    &:not([data-disabled])[data-invalid]:not([data-checked="false"]) {
+      @apply text-negative bg-negative/20;
+    }
+    &:not([data-disabled])[data-invalid][data-checked="false"] {
+      @apply text-border bg-transparent;
+    }
+    &:not([data-disabled]):not([data-invalid]):not([data-checked="false"]) {
+      @apply bg-primary/40 border-primary text-primary hover:border-primary-hover hover:bg-primary/20;
+    }
+    &:not([data-disabled]):not([data-invalid])[data-checked="false"] {
+      @apply border-border text-border bg-transparent hover:border-primary-hover;
+    }
+
+    &[data-size="sm"] {
+      @apply size-5;
+    }
+    &[data-size="md"] {
+      @apply size-6;
+    }
+    &[data-size="lg"] {
+      @apply size-8;
+    }
+  }
+  [data-name="checkbox-indicator"]:not(.default-style-none) {
+    @apply w-full h-full;
+    &[data-size="sm"] {
+      @apply stroke-3;
+    }
+    &[data-size="md"] {
+      @apply stroke-3;
+    }
+    &[data-size="lg"] {
+      @apply stroke-3;
+    }
+  }
+}

package/dist/style/uncompiled/theme/components/chip.css

@@ -0,0 +1,22 @@
+@layer components {
+  [data-name="chip"] {
+    @apply flex flex-row items-center justify-center w-fit font-semibold coloring-color-detect coloring-style-detect;
+
+    &[data-size="xs"] {
+      @apply gap-x-1 px-1 py-0.75 rounded-1 h-6 text-sm;
+    }
+    &[data-size="sm"] {
+      @apply gap-x-1 px-1.5 py-1 rounded-1.5 h-8;
+    }
+    &[data-size="md"] {
+      @apply gap-x-2 px-3 py-2 rounded-1.5 h-10;
+    }
+    &[data-size="lg"] {
+      @apply gap-x-2 px-4 py-2.5 rounded-1.5 h-12;
+    }
+  }
+
+  [data-name="chip-list"] {
+    @apply flex flex-wrap gap-x-2 gap-y-2;
+  }
+}

package/dist/style/uncompiled/theme/components/day-picker.css

@@ -0,0 +1,46 @@
+@layer components {
+  [data-name="day-picker-container"] {
+    @apply flex-col-1 min-w-64 select-none;
+  }
+
+  [data-name="day-picker-header-row"] {
+    @apply grid grid-cols-7 gap-2;
+  }
+
+  [data-name="day-picker-header-item"] {
+    @apply flex items-center justify-center grow font-semibold;
+  }
+
+  [data-name="day-picker-body-row"] {
+    @apply grid grid-cols-7 gap-2;
+  }
+
+  [data-name="day-picker-body-item"] {
+    @apply flex-row-0 items-center justify-center rounded-full border-2 border-transparent h-8;
+
+    &[data-today] {
+      @apply border-on-background;
+    }
+    &:not([data-invalid]) {
+      @apply hover:cursor-pointer;
+      &[data-selected] {
+        @apply coloring-solid-hover primary;
+      }
+      &:not([data-selected]) {
+        @apply coloring-text-hover neutral;
+      }
+      &:not([data-selected]):not([data-samemonth]) {
+        @apply text-description;
+      }
+    }
+    &[data-invalid] {
+      @apply hover:cursor-not-allowed disabled;
+      &[data-selected] {
+        @apply coloring-solid;
+      }
+      &:not([data-selected]) {
+        @apply coloring-text;
+      }
+    }
+  }
+}

package/dist/style/uncompiled/theme/components/dialog.css

@@ -0,0 +1,52 @@
+@layer components {
+  [data-name="dialog-container"] {
+    @apply fixed inset-0 h-screen w-screen;
+    @apply fixed inset-0 h-screen w-screen;
+    &:not([data-open]) {
+      @apply touch-none pointer-events-none;
+    }
+  }
+
+  [data-name="dialog-background"] {
+    @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
+    &[data-state="opening"] {
+      animation-duration: var(--animation-duration-in);
+    }
+
+    &[data-state="closing"] {
+      animation-duration: var(--animation-duration-out);
+      animation-direction: reverse;
+    }
+
+    &[data-state="opening"],
+    &[data-state="closing"] {
+      animation-name: fade-in;
+    }
+  }
+
+  [data-name="dialog-content"] {
+    @apply flex-col-2 p-4 bg-overlay-background text-overlay-text rounded-xl shadow-hw-bottom max-w-[calc(100vw_-_2rem)] max-h-[calc(100vh_-_2rem)];
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+
+    &[data-state="opening"],
+    &[data-state="opened"] {
+      animation-duration: var(--animation-duration-in);
+    }
+    &[data-state="closing"] {
+      animation-duration: var(--animation-duration-out);
+      animation-direction: reverse;
+    }
+    &[data-state="opening"],
+    &[data-state="closing"] {
+      animation-name: pop-in;
+    }
+
+    &[data-position="top"] {
+      @apply fixed top-8 left-1/2 -translate-x-1/2;
+    }
+    &[data-position="center"] {
+      @apply fixed left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2;
+    }
+  }
+}

package/dist/style/uncompiled/theme/components/drawer.css

@@ -0,0 +1,150 @@
+@keyframes expand-top {
+  from {
+    transform: translateY(-100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes expand-bottom {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes expand-left {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes expand-right {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: translateX(0);
+  }
+}
+
+@layer components {
+  [data-name="drawer-container"] {
+    @apply fixed inset-0 h-screen w-screen;
+    &:not([data-open]) {
+      @apply touch-none pointer-events-none;
+    }
+  }
+
+  [data-name="drawer-background"] {
+    @apply fixed inset-0 w-screen h-screen bg-overlay-shadow;
+    &[data-state="opening"] {
+      animation-duration: var(--animation-duration-in);
+    }
+
+    &[data-state="closing"] {
+      animation-duration: var(--animation-duration-out);
+      animation-direction: reverse;
+    }
+
+    &[data-state="opening"],
+    &[data-state="closing"] {
+      animation-name: fade-in;
+      animation-fill-mode: forwards;
+    }
+  }
+
+  [data-name="drawer-content"] {
+    @apply relative flex-col-2 p-4 bg-overlay-background text-overlay-text;
+    animation-timing-function: ease-out;
+    animation-fill-mode: forwards;
+
+    &[data-state="opening"] {
+      animation-duration: var(--animation-duration-in);
+    }
+
+    &[data-state="closing"] {
+      animation-duration: var(--animation-duration-out);
+      animation-direction: reverse;
+    }
+
+    &[data-alignment="top"], &[data-alignment="bottom"] {
+      height: calc(95vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
+      @variant tablet {
+        height: calc(70vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
+      }
+      @variant desktop {
+        height: calc(50vh - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
+      }
+    }
+
+    &[data-alignment="right"], &[data-alignment="left"] {
+      width: calc(95vw - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
+      @variant tablet {
+        width: calc(70vw - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
+      }
+      @variant desktop {
+        width: calc(50vw - var(--drawer-depth, 0) * var(--drawer-indent, 0px));
+      }
+    }
+
+    &[data-alignment="top"] {
+      @apply fixed top-0 left-0 w-screen rounded-b-lg;
+      
+      transform: translateY(-100%);
+
+      &[data-state="opening"],
+      &[data-state="closing"] {
+        animation-name: expand-top;
+      }
+      &[data-state="opened"] {
+        transform: translateY(0);
+      }
+    }
+
+    &[data-alignment="bottom"] {
+      @apply fixed bottom-0 left-0 w-screen rounded-t-lg;
+      transform: translateY(100%);
+
+      &[data-state="opening"],
+      &[data-state="closing"] {
+        animation-name: expand-bottom;
+      }
+      &[data-state="opened"] {
+        transform: translateY(0);
+      }
+    }
+
+    &[data-alignment="left"] {
+      @apply fixed top-0 left-0 h-screen rounded-r-lg;
+      transform: translateX(-100%);
+
+      &[data-state="opening"],
+      &[data-state="closing"] {
+        animation-name: expand-left;
+      }
+      &[data-state="opened"] {
+        transform: translateX(0);
+      }
+    }
+
+    &[data-alignment="right"] {
+      @apply fixed top-0 right-0 h-screen rounded-l-lg;
+      transform: translateX(100%);
+
+      &[data-state="opening"],
+      &[data-state="closing"] {
+        animation-name: expand-right;
+      }
+      &[data-state="opened"] {
+        transform: translateX(0);
+      }
+    }
+  }
+}