@helpwave/hightide 0.7.0 → 0.8.0

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

@@ -3,4 +3,29 @@
   --drawer-indent: calc(4 * var(--spacing));
   --animation-duration-in: 250ms;
   --animation-duration-out: 170ms;
+
+  --coloring-outline-width: calc(0.5 * var(--spacing));
 }
+
+@theme {
+  /*
+   * breakpoints
+   */
+  --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
+  --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
+
+  --spacing-element-xs: calc(7 * var(--spacing));
+  --spacing-element-sm: calc(9 * var(--spacing));
+  --spacing-element-md: calc(11 * var(--spacing)); /* This should always be at least 44px on standard settings */
+  --spacing-element-lg: calc(13 * var(--spacing));
+
+  --spacing-element-padding-xs: calc((var(--spacing-element-xs) - 4 * var(--spacing)) / 2);
+  --spacing-element-padding-sm: calc((var(--spacing-element-sm) - 6 * var(--spacing)) / 2);
+  --spacing-element-padding-md: calc((var(--spacing-element-md) - 6 * var(--spacing)) / 2);
+  --spacing-element-padding-lg: calc((var(--spacing-element-lg) - 8 * var(--spacing)) / 2);
+
+  --spacing-element-padding-direction-xs: calc(var(--spacing-element-padding-xs) * 1.5);
+  --spacing-element-padding-direction-sm: calc(var(--spacing-element-padding-sm) * 2);
+  --spacing-element-padding-direction-md: calc(var(--spacing-element-padding-md) * 2);
+  --spacing-element-padding-direction-lg: calc(var(--spacing-element-padding-lg) * 3);
+}

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

@@ -25,7 +25,7 @@
   50% {
     stroke-dashoffset: 0;
   }
-  75%,
+  70%,
   100% {
     stroke-dashoffset: -1000;
   }
@@ -116,19 +116,19 @@
 }
 
 @utility animate-wave-big-left-up {
-  animation: bigLeftUp 1.7s ease-in infinite normal;
+  animation: bigLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
 }
 
 @utility animate-wave-big-right-down {
-  animation: bigRightDown 1.7s ease-in infinite reverse;
+  animation: bigRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
 }
 
 @utility animate-wave-small-left-up {
-  animation: smallLeftUp 1.7s ease-in infinite normal;
+  animation: smallLeftUp var(--helpwave-loading-duration, 1.7s) ease-in infinite normal;
 }
 
 @utility animate-wave-small-right-down {
-  animation: smallRightDown 1.7s ease-in infinite reverse;
+  animation: smallRightDown var(--helpwave-loading-duration, 1.7s) ease-in infinite reverse;
 }
 
 @layer utilities {

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

@@ -28,9 +28,9 @@
 }
 
 @utility coloring-outline {
-  @apply border-2
-  border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))]
-  text-[var(--coloring-outline,var(--coloring-color))];
+  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))];
 }
 
 @utility coloring-outline-hover {

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

@@ -1,27 +1,33 @@
 @utility focus-style-outline {
-  transition: outline-offset var(--animation-duration-in, 250ms);
-  outline-offset: 0;
-
-  &:focus-visible {
-    @apply outline-solid outline-2 outline-focus;
-    outline-offset: calc(var(--spacing) * 0.25);
-  }
+  --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);
 }
 
 @utility focus-style-border {
-  &:focus-visible {
-    @apply border-2 border-focus;
-  }
+  --focus-border-color: var(--color-focus);
 }
 
-@utility focus-style-default {
-  &:focus-visible:not(.focus-style-none) {
-    @apply focus-style-outline;
-  }
+@utility focus-style-shadow {
+  --focus-box-shadow: 0 0 8px 2px color-mix(in srgb, var(--color-focus) 70%, 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 {
-    @apply outline-none;
+    outline: var(--focus-outline);
+    outline-offset: var(--focus-outline-offset);
+    box-shadow: var(--focus-box-shadow);
+    border-color: var(--focus-border-color);
   }
 }

package/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "files": [
     "dist"
   ],
@@ -54,9 +54,9 @@
     "@babel/preset-typescript": "7.26.0",
     "@faker-js/faker": "10.1.0",
     "@helpwave/eslint-config": "0.0.11",
-    "@storybook/addon-docs": "10.1.9",
-    "@storybook/addon-links": "10.1.9",
-    "@storybook/nextjs": "10.1.9",
+    "@storybook/addon-docs": "10.2.3",
+    "@storybook/addon-links": "10.2.3",
+    "@storybook/nextjs": "^10.2.3",
     "@tailwindcss/postcss": "4.1.18",
     "@types/jest": "30.0.0",
     "@types/node": "20.17.10",
@@ -66,11 +66,10 @@
     "@vitest/mocker": "4.0.16",
     "autoprefixer": "10.4.23",
     "eslint": "9.31.0",
-    "eslint-plugin-storybook": "10.1.9",
+    "eslint-plugin-storybook": "10.2.3",
     "jest": "30.2.0",
-    "postcss": "^8.5.6",
-    "react-devtools": "7.0.1",
-    "storybook": "10.1.10",
+    "postcss": "8.5.6",
+    "storybook": "10.2.3",
     "ts-jest": "29.4.5",
     "tsup": "8.5.0",
     "typescript": "5.7.2",

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

@@ -1,7 +0,0 @@
-@theme {
-  /*
-   * breakpoints
-   */
-  --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
-  --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
-}