@helpwave/hightide 0.7.0 → 0.8.0

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

@@ -4,11 +4,6 @@
  * default light-theme component colors
  */
 @theme {
-  /* Icon */
-  --color-icon-primary: var(--color-text-primary);
-  --color-icon-secondary: var(--color-text-secondary);
-  --color-icon-highlight: var(--color-highlight);
-
   /* Carousel */
   --color-carousel-dot-active: var(--color-primary);
   --color-carousel-dot-disabled: var(--color-disabled);

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

@@ -93,7 +93,8 @@
     --color-label: var(--color-gray-300);
 
     /* Other */
-    --color-primary: var(--color-purple-400);
+    --color-primary: var(--color-purple-500);
+    --color-primary-hover: var(--color-purple-400);
 
     --color-neutral: var(--color-gray-750);
     --color-neutral-hover: var(--color-gray-600);

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

@@ -1,5 +1,5 @@
 @layer components {
-  *[data-name="avatar"] {
+  [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;
@@ -39,14 +39,14 @@
     }
   }
 
-  *[data-name="avatar-image"] {
+  [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"] {
+  [data-name="avatar-group"] {
     @apply flex-row-2 items-center h-[var(--size)] w-fit;
     --overlap: 0.5;
     --count: 5;
@@ -64,11 +64,11 @@
     }
   }
 
-  *[data-name="avatar-group-container"] {
+  [data-name="avatar-group-container"] {
     @apply relative w-[calc(var(--size)*(0.5*4+1))] h-[var(--size)];
   }
 
-  *[data-name="avatar-group-more"] {
+  [data-name="avatar-group-more"] {
     @apply flex-row-2 truncate items-center text-[calc(var(--size)*2/3)];
   }
 }

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

@@ -1,64 +1,50 @@
 @layer components {
   [data-name="button"] {
-    @apply: font-semibold whitespace-nowrap;
+    @apply flex flex-row items-center justify-center element;
+    @apply: font-semibold whitespace-nowrap w-fit;
+
     &: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-size="xs"] {
+      @apply gap-x-1 sizing-xs;
+      @apply text-xs min-w-20;
+      &[data-coloringstyle="outline"] {
+        padding: 
+          calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)) 
+          calc(var(--spacing-element-padding-direction-xs) - var(--coloring-outline-width));
       }
     }
-    &[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 sizing-sm;
+      @apply min-w-28;
+      &[data-coloringstyle="outline"] {
+        padding: 
+          calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)) 
+          calc(var(--spacing-element-padding-direction-sm) - var(--coloring-outline-width));
       }
-      &[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="md"] {
+      @apply gap-x-2 sizing-md;
+      @apply min-w-36;
+      &[data-coloringstyle="outline"] {
+        padding: 
+          calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)) 
+          calc(var(--spacing-element-padding-direction-md) - var(--coloring-outline-width));
       }
-      &[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;
-        }
+    }
+    &[data-size="lg"] {
+      @apply gap-x-2 sizing-lg;
+      @apply text-lg min-w-45;
+      &[data-coloringstyle="outline"] {
+        padding: 
+          calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)) 
+          calc(var(--spacing-element-padding-direction-lg) - var(--coloring-outline-width));
       }
     }
   }

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

@@ -1,13 +1,13 @@
 @layer components {
-  .card-sm {
+  [data-name="card-sm"] {
     @apply flex-col-2 surface coloring-solid px-2 py-1 rounded;
   }
 
-  .card-md {
+  [data-name="card-md"] {
     @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
   }
 
-  .card-lg {
+  [data-name="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

@@ -1,5 +1,5 @@
 @layer components {
-  .checkbox {
+  [data-name="checkbox"] {
     @apply flex-col-0 items-center justify-center rounded border-2;
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
@@ -35,7 +35,7 @@
     }
   }
   
-  .checkbox-indicator{
+  [data-name="checkbox-indicator"]{
     @apply w-full h-full;
     &[data-size="sm"] {
       @apply stroke-3;

package/dist/style/uncompiled/theme/components/date-time-input.css

@@ -0,0 +1,9 @@
+@layer components {
+  [data-name="date-time-input"] {
+    @apply input-element flex-row-2 px-3 pr-10 h-element-md rounded-md w-full items-center justify-between;
+
+    &:hover {
+      @apply cursor-pointer;
+    }
+  }
+}

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

@@ -16,10 +16,10 @@
   }
 
   [data-name="day-picker-body-item"] {
-    @apply flex-row-0 items-center justify-center rounded-full border-2 border-transparent h-8;
+    @apply flex-row-0 items-center justify-center rounded-full h-8;
 
     &[data-today] {
-      @apply border-on-background;
+      @apply border-2 border-on-background;
     }
     &:not([data-invalid]) {
       @apply hover:cursor-pointer;

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

@@ -1,12 +1,12 @@
 @layer components {
-  .dialog-container {
+  [data-name="dialog-container"] {
     @apply fixed inset-0 h-screen w-screen;
     &:not([data-open]) {
       @apply touch-none pointer-events-none;
     }
   }
 
-  .dialog-background {
+  [data-name="dialog-background"] {
     @apply fixed inset-0 h-screen w-screen bg-overlay-shadow;
     animation-fill-mode: forwards;
 
@@ -25,7 +25,7 @@
     }
   }
 
-  .dialog-content {
+  [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;

package/dist/style/uncompiled/theme/components/form-field.css

@@ -1,17 +1,17 @@
 @layer components {
-  .form-field-container {
+  [data-name="form-field-container"] {
     @apply relative flex-col-1;
   }
 
-  .form-field-description {
+  [data-name="form-field-description"] {
     @apply text-description text-sm;
   }
 
-  .form-field-error {
+  [data-name="form-field-error"] {
     @apply absolute top-[calc(100%_+_0.25rem)] left-0 text-negative text-sm font-medium;
   }
 
-  .form-field-label {
+  [data-name="form-field-label"] {
     @apply flex-row-1 items-start typography-label-lg text-label;
   }
 }

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

@@ -23,6 +23,6 @@
   }
 
   * {
-    @apply focus-style-default;
+    @apply focus-style-outline focusable;
   }
 }

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

@@ -0,0 +1,38 @@
+@layer components {
+  [data-name="icon-button"] {
+    @apply flex-col-0 items-center justify-center element-square;
+    
+    &:not([data-disabled]) {
+        @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;
+    }
+    
+    &[data-disabled] {
+        @apply disabled coloring-style-detect cursor-not-allowed;
+    }
+
+    &[data-size="xs"] {
+        @apply sizing-xs;
+        &[data-coloringstyle="outline"] {
+            padding: calc(var(--spacing-element-padding-xs) - var(--coloring-outline-width)); 
+        }
+    }
+    &[data-size="sm"] {
+        @apply sizing-sm;
+        &[data-coloringstyle="outline"] {
+            padding: calc(var(--spacing-element-padding-sm) - var(--coloring-outline-width)); 
+        }
+    }
+    &[data-size="md"] {
+        @apply sizing-md;
+        &[data-coloringstyle="outline"] {
+            padding: calc(var(--spacing-element-padding-md) - var(--coloring-outline-width)); 
+        }
+    }
+    &[data-size="lg"] {
+        @apply sizing-lg;
+        &[data-coloringstyle="outline"] {
+            padding: calc(var(--spacing-element-padding-lg) - var(--coloring-outline-width)); 
+        }
+    }
+  }
+}

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

@@ -2,6 +2,7 @@
 @import "./card.css";
 @import "./chip.css";
 @import "./input-elements.css";
+@import "./toggleable-intput.css";
 @import "./table.css";
 @import "./scrollbar.css";
 @import "./link.css";
@@ -12,6 +13,7 @@
 @import "./expandable.css";
 @import "./expansion-icon.css";
 @import "./checkbox.css";
+@import "./switch.css";
 @import "./tooltip.css";
 @import "./drawer.css";
 @import "./dialog.css";
@@ -21,4 +23,6 @@
 @import "./time-picker.css";
 @import "./property.css";
 @import "./pop-up.css";
+@import "./select.css";
 @import "./general.css";
+@import "./icon-button.css";

package/dist/style/uncompiled/theme/components/input-elements.css

@@ -1,5 +1,5 @@
 @utility input-element {
-  @apply border-2 focus-style-none focus-style-border;
+  @apply border-2 focus-style-none focus-style-border focus-style-shadow;
   &:not([data-disabled]):not([data-invalid]) {
     @apply bg-input-background hover:border-primary-hover;
 
@@ -34,20 +34,6 @@
 /* input-elements */
 @layer components {
   [data-name="input"] {
-    @apply px-3 py-2 rounded-md h-10 input-element;
-  }
-
-  [data-name="select-button"] {
-    @apply flex-row-2 items-center justify-between rounded-md px-3 py-2 input-element;
-    &:not([data-disabled]) {
-      @apply hover:cursor-pointer;
-    }
-  }
-
-  [data-name="select-button-chips"] {
-    @apply flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5 input-element;
-    &:not([data-disabled]) {
-      @apply hover:cursor-pointer;
-    }
+    @apply input-element px-3 py-2 rounded-md h-element-md;
   }
 }

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

@@ -1,5 +1,5 @@
 @layer components {
-  .link {
+  [data-name="link"] {
     @apply decoration-3 p-2 hover:underline focus:underline font-bold text-lg rounded;
   }
 }

package/dist/style/uncompiled/theme/components/pop-up.css

@@ -1,4 +1,4 @@
-.pop-up {
+[data-name="pop-up"] {
     @apply surface coloring-solid rounded-md border-2 border-outline-variant shadow-md;
     @apply focus-within:border-primary;
 

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

@@ -78,7 +78,7 @@
       @apply text-warning;
 
       [data-name="select-button"],
-      [data-name="select-button-chips"] {
+      [data-name="select-chip-display"] {
         @apply !bg-warning !text-surface-warning;
       }
     }

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

@@ -0,0 +1,19 @@
+@layer components {
+    [data-name="select-button"] {
+      @apply input-element flex-row-2 items-center justify-between rounded-md px-3 py-2;
+      &:not([data-disabled]) {
+        @apply hover:cursor-pointer;
+      }
+    }
+  
+    [data-name="select-chip-display"] {
+      @apply input-element flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5;
+      &:not([data-disabled]) {
+        @apply hover:cursor-pointer;
+      }
+    }
+
+    [data-name="select-chip-display-chip"] {
+      @apply flex-row-1 items-center pl-2 pr-1 coloring-solid neutral rounded-md h-9;
+    }
+  }

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

@@ -0,0 +1,56 @@
+@layer components {
+  [data-name="switch"] {
+    @apply flex-col-0 items-center justify-center;
+    @apply h-7 w-12 rounded-full border-2 p-1;
+
+    &:not([data-disabled]) {
+      @apply hover:cursor-pointer;
+    }
+
+    &[data-disabled] {
+      @apply border-on-disabled bg-disabled cursor-not-allowed;
+    }
+
+    &:not([data-disabled]) {
+      [data-invalid] {
+        @apply border-negative;
+
+        &:hover {
+          @apply border-negative-hover bg-negative/10;
+        }
+      }
+
+      &:not([data-invalid]) {
+        @apply bg-input-background border-border;
+
+        &:hover {
+          @apply border-primary-hover bg-primary/10;
+        }
+
+        &[data-active] {
+          @apply bg-primary border-primary;
+
+          &:hover {
+            @apply bg-primary-hover border-primary-hover;
+          }
+        }
+      }
+    }
+  }
+
+  [data-name="switch-track"] {
+    @apply w-full h-full rounded-full flex items-center relative;
+  }
+
+  [data-name="switch-thumb"] {
+    @apply bg-on-surface rounded-full transition-all duration-[var(--animation-duration-in,250ms)] h-3 w-3;
+    @apply absolute top-1/2 -translate-y-1/2 left-0.5;
+
+    &[data-active] {
+      @apply w-4 h-4;
+      left: calc(100% - 4 * var(--spacing));
+    }
+  }
+}
+
+

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

@@ -1,22 +1,22 @@
 @layer components {
-  .table-container {
+  [data-name="table-container"] {
     @apply flex-col-0 w-full overflow-auto;
   }
 
-  .table {
+  [data-name="table"] {
     @apply table-fixed border-separate border-spacing-0 rounded-lg;
     @apply bg-table-background text-table-text;
   }
 
-  .table-filler-cell {
+  [data-name="table-filler-cell"] {
     @apply flex flex-row items-center w-1/2 h-6 text-disabled font-bold;
   }
 
-  .table-default-cell {
+  [data-name="table-default-cell"] {
     @apply block max-w-full overflow-ellipsis truncate;
   }
 
-  .table-header-cell {
+  [data-name="table-header-cell"] {
     @apply relative;
     @apply px-3 first:pl-6 last:pr-6 py-2.5;
     @apply border-y-1 first:border-l-1 last:border-r-1;
@@ -28,27 +28,27 @@
     }
   }
 
-  .table-body-row {
+  [data-name="table-body-row"] {
     @apply hover:bg-table-row-hover-background;
     &[data-clickable] {
       @apply hover:cursor-pointer;
     }
   }
 
-  .table-body-filler-row {
+  [data-name="table-body-filler-row"] {
     @apply hover:cursor-not-allowed;
     &[data-clickable] {
       @apply hover:cursor-pointer hover:bg-table-row-hover-background;
     }
   }
 
-  .table-body-cell, .table-body-filler-cell {
+  [data-name="table-body-cell"], [data-name="table-body-filler-cell"] {
     @apply px-3 first:pl-6 last:pr-6 py-2.5;
     @apply border-b-1 first:border-l-1 last:border-r-1;
     @apply [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
   }
 
-  .table-resize-indicator {
+  [data-name="table-resize-indicator"] {
     @apply absolute right-1 top-1/2 -translate-y-1/2;
     @apply h-6 w-2 rounded bg-primary;
     @apply cursor-col-resize;
@@ -67,7 +67,8 @@
     }
   }
 
-  .table-body-row:last-child > .table-body-cell, .table-body-filler-row:last-child > .table-body-filler-cell {
+  [data-name="table-body-row"]:last-child > [data-name="table-body-cell"],
+  [data-name="table-body-filler-row"]:last-child > [data-name="table-body-filler-cell"] {
     @apply first:rounded-bl-lg last:rounded-br-lg;
   }
 }

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

@@ -1,15 +1,23 @@
 @layer components {
   [data-name="tab-list"] {
-    @apply flex-row-0;
+    display: grid;
+    grid-template-columns: repeat(var(--tab-count), 1fr);
   }
 
   [data-name="tab-list-item"] {
-    @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md font-bold border-b-2 transition-colors neutral coloring-text-hover;
-    &[data-active] {
-      @apply border-primary;
+    @apply flex-row-0 grow justify-center px-3 py-2 typography-label-md border-b-4 transition-colors neutral coloring-text-hover;
+    
+    &[data-disabled] {
+      @apply cursor-not-allowed disabled coloring-text;
     }
-    &:not([data-active]) {
-      @apply text-description hover:cursor-pointer;
+
+    &:not([data-disabled]) {
+      &[data-active] {
+        @apply border-primary font-bold;
+      }
+      &:not([data-active]) {
+        @apply hover:cursor-pointer;
+      }
     }
   }
 

package/dist/style/uncompiled/theme/components/toggleable-intput.css

@@ -0,0 +1,10 @@
+@layer components {
+    [data-name="togglable-input"] {
+        all: unset;
+        @apply w-full rounded-md focus-style-none focus-style-outline focusable;
+
+        &:not([data-isediting]) {
+            @apply text-transparent;
+        }
+    }
+}

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

@@ -1,4 +1,4 @@
-  @utility animate-tooltip-fade-in {
+@utility animate-tooltip-fade-in {
   animation: fade-in calc(var(--animation-duration-in, 250ms) * 2) ease-in-out 1 forwards;
 }
 
@@ -8,7 +8,7 @@
 }
 
 @layer components {
-  .tooltip {
+  [data-name="tooltip"] {
     @apply absolute px-2 py-1 rounded shadow-around-md;
     @apply text-xs font-semibold text-tooltip-text bg-tooltip-background truncate;
 

package/dist/style/uncompiled/theme/element.css

@@ -0,0 +1,50 @@
+@utility element {
+  padding: 
+    var(--element-padding, var(--spacing-element-padding-md)) 
+    var(--element-padding-direction, var(--spacing-element-padding-direction-md));
+  border-radius: var(--element-border-radius, 0.375rem);
+  height: var(--element-height, var(--spacing-element-md));
+}
+
+@utility element-square {
+  padding: var(--element-padding, var(--spacing-element-padding-md));
+  border-radius: var(--element-border-radius, 0.375rem);
+  height: var(--element-height, var(--spacing-element-height-md));
+  width: var(--element-height, var(--spacing-element-md));
+}
+
+
+@utility sizing-xs {
+  --element-padding: var(--spacing-element-padding-xs);
+  --element-padding-direction: var(--spacing-element-padding-direction-xs);
+  --element-border-radius: 0.25rem;
+  --element-height: var(--spacing-element-xs);
+}
+
+@utility sizing-sm {
+  --element-padding: var(--spacing-element-padding-sm);
+  --element-padding-direction: var(--spacing-element-padding-direction-sm);
+  --element-border-radius: 0.375rem;
+  --element-height: var(--spacing-element-sm);
+}
+
+@utility sizing-md {
+  --element-padding: var(--spacing-element-padding-md);
+  --element-padding-direction: var(--spacing-element-padding-direction-md);
+  --element-border-radius: 0.375rem;
+  --element-height: var(--spacing-element-md);
+}
+
+@utility sizing-lg {
+  --element-padding: var(--spacing-element-padding-lg);
+  --element-padding-direction: var(--spacing-element-padding-direction-lg);
+  --element-border-radius: 0.5rem;
+  --element-height: var(--spacing-element-lg);
+}
+
+@utility sizing-none {
+  --element-padding: 0;
+  --element-padding-direction: 0;
+  --element-border-radius: 0;
+  --element-height: auto;
+}

package/dist/style/uncompiled/theme/index.css

@@ -1,6 +1,6 @@
 @import "./colors/index.css";
 @import "./typography.css";
-@import "./breakpoints.css";
 @import "./components/index.css";
 @import "./shadow.css";
-@import "./variables.css";
+@import "./element.css";
+@import "./variables.css";