@helpwave/hightide 0.12.5 → 0.12.7

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

@@ -53,6 +53,10 @@
   --color-stepperbar-dot-normal: var(--color-purple-100);
   --color-stepperbar-dot-disabled: var(--color-description);
 
+  /* Switch */
+  --color-switch-thumb-inactive: var(--color-on-surface);
+  --color-switch-thumb-active: var(--color-white);
+
   /* Table */
   --color-table-background: var(--color-surface);
   --color-table-text: var(--color-on-surface);
@@ -102,6 +106,9 @@
     --color-scrollbar-track: #ffffff33;
     --color-scrollbar-thumb: var(--color-gray-300);
 
+    /* Switch */
+    --color-switch-thumb-active: var(--color-on-surface);
+
     /* Other */
     --color-border: var(--color-gray-600);
     --color-divider: var(--color-gray-700);

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

@@ -25,9 +25,9 @@
   --color-on-disabled: var(--color-gray-500);
 
   /* Surface */
-  --color-surface:  var(--color-gray-50);
+  --color-surface:  var(--color-gray-25);
   --color-on-surface: var(--color-text-primary);
-  --color-surface-hover: var(--color-gray-100);
+  --color-surface-hover: var(--color-white);
   --color-surface-variant: var(--color-white);
   --color-surface-warning: var(--color-orange-100);
 
@@ -93,8 +93,8 @@
     --color-label: var(--color-gray-300);
 
     /* Other */
-    --color-primary: var(--color-purple-500);
-    --color-primary-hover: var(--color-purple-400);
+    --color-primary: var(--color-purple-400);
+    --color-primary-hover: var(--color-purple-500);
 
     --color-neutral: var(--color-gray-750);
     --color-neutral-hover: var(--color-gray-600);

package/dist/style/uncompiled/theme/components/app-page.css

@@ -51,7 +51,7 @@
   }
 
   .app-sidebar-close-button {
-    @apply absolute top-0.5 right-0.5 z-10;
+    @apply absolute top-1 right-1 z-10;
 
     @variant desktop {
       @apply hidden;
@@ -71,7 +71,7 @@
   }
 
   .app-page-sidebar-with-navigation-scroll {
-    @apply flex-1 min-h-0 pl-3.25 pr-0.75 py-0.75 overflow-y-scroll overscroll-y-contain;
+    @apply flex-1 min-h-0 pl-3.25 pr-1 py-1 overflow-y-scroll overscroll-y-contain;
     scrollbar-gutter: stable;
   }
 

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

@@ -77,7 +77,7 @@
   }
 
   [data-name="avatar-with-status-dot"] {
-    @apply absolute right-0 bottom-0 z-1 rounded-full border-solid;
+    @apply absolute right-0 bottom-0 z-1 rounded-full border-solid transition-colors;
     border-color: var(--color-background);
 
     &[data-size="xs"] {
@@ -96,12 +96,21 @@
       @apply size-5 border-2;
     }
 
-    &[data-online] {
+    &[data-status="online"] {
       background-color: var(--color-positive);
     }
 
-    &:not([data-online]) {
+    &[data-status="offline"],
+    &[data-status="unknown"] {
+      background-color: var(--color-gray-500);
+    }
+
+    &[data-status="busy"] {
       background-color: var(--color-negative);
     }
+
+    &[data-status="away"] {
+      background-color: var(--color-warning);
+    }
   }
 }

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

@@ -2,6 +2,7 @@
   [data-name="button"] {
     @apply flex flex-row items-center justify-center element;
     @apply: font-semibold whitespace-nowrap w-fit;
+    transition: var(--coloring-transitions), var(--focus-transitions);
 
     &:not([data-disabled]) {
       @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;

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

@@ -17,7 +17,9 @@
 
   [data-name="action-card"],
   [data-name="navigation-card"] {
-    @apply flex-col-1 w-full min-w-0 surface coloring-solid-hover shadow-md;
+    @apply flex-col-1 w-full min-w-0 surface coloring-solid-hover shadow-md focusable focus-style-outline;
+
+    transition: var(--coloring-transitions), var(--focus-transitions);
 
     &[data-size="sm"] {
       @apply px-2 py-1 rounded;
@@ -33,15 +35,16 @@
   }
 
   [data-name="card-header"] {
-    @apply flex-row-2 items-center w-full min-w-0;
+    @apply flex-row-4 items-center w-full min-w-0;
   }
 
   [data-name="card-content"] {
     @apply flex-col-1 min-w-0 flex-1;
   }
 
-  [data-name="card-action"] {
-    @apply flex-col-0 items-center justify-center shrink-0 text-description;
+  [data-name="card-leading"],
+  [data-name="card-trailing"] {
+    @apply flex-col-0 items-center justify-center shrink-0 self-center text-description;
   }
 
   [data-name="navigation-card-action"] {
@@ -49,7 +52,7 @@
   }
 
   [data-name="card-title"] {
-    @apply typography-title-md;
+    @apply typography-title-md min-w-0;
   }
 
   [data-name="card"][data-size="sm"] [data-name="card-title"],
@@ -71,6 +74,10 @@
   [data-name="action-card"] {
     &:not([data-disabled]) {
       @apply cursor-pointer;
+
+      &:hover {
+        @apply shadow-lg;
+      }
     }
 
     &[data-disabled] {
@@ -80,5 +87,9 @@
 
   [data-name="navigation-card"] {
     @apply cursor-pointer;
+
+    &:hover {
+      @apply shadow-lg;
+    }
   }
 }

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

@@ -2,13 +2,7 @@
   [data-name="checkbox"] {
     @apply flex-col-0 items-center justify-center border-2;
     @apply rounded data-[rounded]:rounded-full;
-    transition: 
-      border-color var(--animation-duration-in, 250ms) ease-in-out, 
-      box-shadow var(--animation-duration-in, 250ms) ease-in-out,
-      outline-color var(--animation-duration-in, 250ms) ease-in-out,
-      outline-offset var(--animation-duration-in, 250ms) ease-in-out,
-      color 100ms ease-in-out,
-      background-color 100ms ease-in-out;
+    transition: var(--coloring-transitions), var(--focus-transitions);
 
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;

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

@@ -6,6 +6,10 @@
       box-shadow: var(--focus-box-shadow);
       border-color: var(--focus-border-color);
     }
+
+    &[data-has-actions] {
+      @apply pr-0.5;
+    }
   }
 
   [data-name="date-time-field"] {

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

@@ -23,6 +23,7 @@
   }
 
   * {
+    transition: var(--focus-transitions);
     @apply focus-style-outline focusable outline-focus;
   }
 }

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

@@ -1,6 +1,7 @@
 @layer components {
   [data-name="icon-button"] {
     @apply flex-col-0 items-center justify-center element-square;
+    transition: var(--coloring-transitions), var(--focus-transitions);
     
     &:not([data-disabled]) {
         @apply cursor-pointer coloring-color-detect coloring-style-hover-detect;

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

@@ -2,6 +2,7 @@
   [data-name="switch"] {
     @apply flex-col-0 items-center justify-center;
     @apply h-7 w-12 rounded-full border-2 p-1;
+    transition: var(--coloring-transitions), var(--focus-transitions);
 
     &:not([data-disabled]) {
       @apply hover:cursor-pointer;
@@ -43,12 +44,15 @@
   }
 
   [data-name="switch-thumb"] {
-    @apply bg-on-surface rounded-full transition-all duration-[var(--animation-duration-in,250ms)] h-3 w-3;
+    @apply 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;
 
+    background-color: var(--color-switch-thumb-inactive, var(--color-on-surface));
+
     &[data-active] {
       @apply w-4 h-4;
       left: calc(100% - 4 * var(--spacing));
+      background-color: var(--color-switch-thumb-active, var(--color-on-surface));
     }
   }
 }

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

@@ -18,7 +18,7 @@
 
   [data-name="table-header-cell"] {
     @apply relative;
-    @apply px-3 first:pl-6 last:pr-6 py-2.5;
+    @apply first:pl-3 last:pr-3;
     @apply border-y-1 first:border-l-1 last:border-r-1;
     @apply first:rounded-tl-lg last:rounded-tr-lg;
     @apply bg-table-header-background text-description font-bold;
@@ -28,6 +28,10 @@
     }
   }
 
+  .table-header-cell-content {
+    @apply px-3 py-2.5 flex-row-1 items-center truncate;
+  }
+
   [data-name="table-body-row"] {
     @apply hover:bg-table-row-hover-background;
     &[data-clickable] {

package/dist/style/uncompiled/theme/components/vertical-navigation.css

@@ -14,7 +14,8 @@
   [data-name="vertical-navigation-node-header"],
   [data-name="vertical-navigation-item"] {
     @apply flex-row-1 items-center rounded-md min-h-9 min-w-0 px-2.5 py-1.5;
-  
+    transition: var(--focus-transitions);
+
     &:hover, &:focus-visible {
       @apply bg-primary/15;
     }
@@ -22,7 +23,7 @@
 
   [data-name="vertical-navigation-node-header"] {
     @apply justify-between;
-    transition: var(--focus-outline-transition);
+    transition: var(--focus-transitions);
     
     &[data-focused] {
       @apply bg-primary/15;

package/dist/style/uncompiled/utitlity/coloring.css

@@ -1,15 +1,14 @@
-@utility coloring-transition {
-  transition: 
+:root {
+  --coloring-transitions:
     border-color var(--animation-duration-in, 250ms) ease-in-out, 
     box-shadow var(--animation-duration-in, 250ms) ease-in-out,
     outline-color var(--animation-duration-in, 250ms) ease-in-out,
-    outline-offset var(--animation-duration-in, 250ms) ease-in-out,
+    outline-offset var(--animation-duration-in, 250ms),
     color var(--animation-duration-in, 250ms) ease-in-out,
     background-color var(--animation-duration-in, 250ms) ease-in-out;
 }
 
 @utility coloring-solid {
-  @apply coloring-transition;
   @apply bg-[var(--coloring-solid-color,var(--coloring-color))]
   text-[var(--coloring-solid-text,var(--coloring-on-color))];
 }
@@ -20,7 +19,6 @@
 }
 
 @utility coloring-tonal {
-  @apply coloring-transition;
   @apply bg-[var(--coloring-tonal-background,var(--coloring-tonal,var(--coloring-color)))]/20
   text-[var(--coloring-tonal-text,var(--coloring-tonal,var(--coloring-color)))];
 }
@@ -31,7 +29,6 @@
 }
 
 @utility coloring-text {
-  @apply coloring-transition;
   @apply text-[var(--coloring-text,var(--coloring-color))];
 }
 
@@ -41,7 +38,6 @@
 }
 
 @utility coloring-outline {
-  @apply coloring-transition;
   border-width: var(--coloring-outline-width, 0.125rem);
   @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
   @apply text-[var(--coloring-outline,var(--coloring-color))];
@@ -54,7 +50,7 @@
 }
 
 @utility coloring-tonal-outline {
-  @apply coloring-transition coloring-tonal;
+  @apply coloring-tonal;
   border-width: var(--coloring-outline-width, 0.125rem);
   @apply border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))];
 }

package/dist/style/uncompiled/utitlity/focus.css

@@ -1,7 +1,14 @@
+:root {
+  --focus-transitions:
+    outline-offset var(--animation-duration-in, 250ms) ease-in-out, 
+    outline-color var(--animation-duration-in, 250ms) ease-in-out,
+    border-color var(--animation-duration-in, 250ms) ease-in-out,
+    shadow var(--animation-duration-in, 250ms) ease-in-out;
+}
+
 @utility focus-style-outline {
   --focus-outline: 2px solid var(--color-focus);
-  --focus-outline-offset: calc(var(--spacing) * 0.25);
-  --focus-outline-transition: outline-offset var(--animation-duration-in, 250ms);
+  --focus-outline-offset: calc(var(--spacing) * 0.5);
 }
 
 @utility focus-style-border {
@@ -9,21 +16,22 @@
 }
 
 @utility focus-style-shadow {
-  --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.5) color-mix(in srgb, var(--color-focus) 70%, transparent);
+  --focus-box-shadow: 0 0 calc(var(--spacing) * 1) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 35%, transparent);
+
+  @variant dark {
+    --focus-box-shadow: 0 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 0.8) color-mix(in srgb, var(--color-focus) 60%, transparent);
+  }
 }
 
 @utility focus-style-none {
   --focus-outline: none;
   --focus-outline-offset: 0;
-  --focus-outline-transition: none;
   --focus-box-shadow: none;
   --focus-border-color: inherit;
 }
 
 
 @utility focusable {
-  transition: var(--focus-outline-transition);
-
   &:focus-visible {
     outline: var(--focus-outline);
     outline-offset: var(--focus-outline-offset);

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "MPL-2.0",
-  "version": "0.12.5",
+  "version": "0.12.7",
   "files": [
     "dist"
   ],