@helpwave/hightide 0.1.25 → 0.1.27

package/dist/{css → style}/uncompiled/globals.css

@@ -7,7 +7,7 @@
 @import './theme/index.css';
 
 /* components */
-@import './textstyles.css';
+@import './typography.css';
 
 /* The theme variables */
 @theme {
@@ -16,15 +16,8 @@
    */
   --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
   --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
-
-  /*
-   * fonts
-   */
-  --font-inter: 'Inter', sans-serif;
-  --font-space: 'Space Grotesk', sans-serif;
 }
 
-/* Styles that can be overwritten by utils */
 @layer components {
   .btn-sm {
     @apply flex-row-1 items-center justify-center px-1.5 py-1 rounded-1.5 h-8 min-h-8;
@@ -85,11 +78,13 @@
   .section-padding {
     @apply px-6 tablet:px-12 desktop:px-24 py-16;
   }
-}
 
-@layer components {
+  .link {
+    @apply decoration-3 p-2 hover:underline focus:underline font-bold text-lg rounded;
+  }
+
   * {
-    @apply border-border;
+    @apply border-border list-none;
   }
 
   html {
@@ -100,28 +95,38 @@
     @apply cursor-pointer text-nowrap;
   }
 
-  input {
-    @apply block;
-  }
-
   *:disabled {
     @apply cursor-not-allowed;
   }
 
+
+  /* move the focus styles into its own file and utilities */
   *:focus {
-    @apply outline-none ring-0;
+    @apply outline-0 ring-0;
   }
 
   *:focus-visible {
     @apply ring-2 ring-focus;
   }
 
+  .focus-style-within:focus-within {
+    @apply ring-2 ring-focus;
+  }
+
+  .focus-style-none {
+    @apply focus-visible:ring-0 focus-within:ring-0;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     * {
-      @apply !transition-none !animate-none;
+      @apply transition-none animate-none;
     }
   }
 
+  /**
+   * Table
+   */
+
   table {
     @apply table-fixed border-separate border-spacing-0 bg-table-background text-table-text;
   }
@@ -149,4 +154,62 @@
   th:last-child > .table-resize-indicator {
     @apply right-6;
   }
+
+  /**
+   * Scrollbar
+   */
+  @supports (scrollbar-color: auto) {
+    * {
+      scrollbar-color: var(--color-gray-500) transparent;
+    }
+  }
+
+  /* Otherwise, use `::-webkit-scrollbar-*` pseudo-elements */
+
+  @supports selector(::-webkit-scrollbar) {
+    * {
+      scrollbar-color: initial;
+    }
+
+    :root{
+      --scrollbar-width: 10px;
+      --scrollbar-padding: 1px;
+    }
+
+    *::-webkit-scrollbar {
+      width: var(--scrollbar-width);
+      height: var(--scrollbar-width);
+    }
+
+    *::-webkit-scrollbar-track {
+      border-radius: 9999px;
+      background: transparent;
+      cursor: default;
+    }
+
+    *::-webkit-scrollbar-thumb {
+      background-color: var(--color-gray-500);
+      border-radius: 9999px;
+      border: var(--scrollbar-padding) solid transparent;
+      background-clip: padding-box;
+      cursor: default;
+      transition: background-color 0.2s ease;
+    }
+
+    *::-webkit-scrollbar-thumb:active {
+      background-color: var(--color-gray-600);
+    }
+
+    *::-webkit-scrollbar-thumb:vertical {
+      min-height: calc(var(--scrollbar-width) * 3);
+    }
+
+    *::-webkit-scrollbar-thumb:horizontal {
+      min-width: calc(var(--scrollbar-width) * 3);
+    }
+
+    *::-webkit-scrollbar-corner {
+      background: transparent;
+    }
+  }
 }

package/dist/{css → style}/uncompiled/theme/colors-component.css

@@ -60,6 +60,9 @@
   --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);
@@ -73,6 +76,10 @@
   --color-property-title-background: var(--color-gray-100);
   --color-property-title-text: var(--color-text-secondary);
 
+  /* Scrollbar */
+  --color-scrollbar-track: #00000033;
+  --color-scrollbar-thumb: var(--color-gray-600);
+
   /* Stepper Bar */
   --color-stepperbar-dot-active: var(--color-primary);
   --color-stepperbar-dot-normal: var(--color-purple-100);
@@ -100,12 +107,15 @@
   --color-tag-red-background: #FEE0DD;
   --color-tag-red-text: #D67268;
   --color-tag-red-icon: #D67268;
-  --color-tag-blue-background: var(--color-blue-50);
-  --color-tag-blue-text: var(--color-blue-800);
-  --color-tag-blue-icon: var(--color-blue-800);
-  --color-tag-pink-background: #CEA3B8;
+  --color-tag-blue-background: #DBE2F3;
+  --color-tag-blue-text: #758ECE;
+  --color-tag-blue-icon: #758ECE;
+  --color-tag-pink-background: #F3DBE7;
   --color-tag-pink-text: #CE75A0;
   --color-tag-pink-icon: #CE75A0;
+  --color-tag-orange-background: #FEEACB;
+  --color-tag-orange-text: #EA8E00;
+  --color-tag-orange-icon: #EA8E00;
 
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
@@ -150,6 +160,10 @@
     /* Overlay, Dialog, Modal */
     --color-overlay-shadow: #00000060;
 
+    /* Scrollbar */
+    --color-scrollbar-track: #FFFFFF33;
+    --color-scrollbar-thumb: var(--color-gray-300);
+
     /* Tag */
     --color-tag-dark-background: var(--color-gray-900);
 

package/dist/{css → style}/uncompiled/theme/colors-semantic.css

@@ -37,11 +37,8 @@
   --color-negative-border: var(--color-negative);
   --color-negative-border-hover: var(--color-red-700);
 
-  --color-disabled-background: var(--color-gray-200);
-  --color-disabled-text: var(--color-gray-400);
-  --color-disabled-icon: var(--color-disabled-text);
-  --color-disabled-border: var(--color-gray-300);
-  --color-disabled-outline: var(--color-disabled-border);
+  --color-disabled: var(--color-gray-300);
+  --color-disabled-background: var(--color-gray-100);
 
   /* Surface */
   --color-surface:  var(--color-white);
@@ -79,10 +76,6 @@
     --color-negative: var(--color-red-500);
     --color-negative-border-hover: var(--color-red-600);
 
-    --color-disabled-background: var(--color-gray-800);
-    --color-disabled-text: var(--color-gray-600);
-    --color-disabled-border: var(--color-gray-850);
-
     /* Surface */
     --color-surface: var(--color-gray-800);
     --color-surface-variant: var(--color-gray-700);

package/dist/style/uncompiled/typography.css

@@ -0,0 +1,171 @@
+@theme {
+  /*
+   * text
+   */
+  --text-xs: calc(12 / 16 * 1rem);
+  --text-xs--line-height: calc(15 / 12);
+
+  --text-sm: calc(14 / 16 * 1rem);
+  --text-sm--line-height: calc(17 / 14);
+
+  --text-base: 1rem;
+  --text-base--line-height: calc(19 / 16);
+
+  --text-lg: calc(18 / 16 * 1rem);
+  --text-lg--line-height: calc(23 / 18);
+
+  --text-xl: calc(20 / 16 * 1rem);
+  --text-xl--line-height: calc(26 / 20);
+
+  --text-2xl: calc(22 / 16 * 1rem);
+  --text-2xl--line-height: calc(28 / 22);
+
+  --text-3xl: calc(24 / 16 * 1rem);
+  --text-3xl--line-height: calc(30 / 24);
+
+  --text-4xl: calc(32 / 16 * 1rem);
+  --text-4xl--line-height: calc(40 / 32);
+
+  --text-5xl: 3rem;
+  --text-5xl--line-height: 1;
+
+  --text-6xl: 3.75rem;
+  --text-6xl--line-height: 1;
+
+  --text-7xl: 4.5rem;
+  --text-7xl--line-height: 1;
+
+  --text-8xl: 6rem;
+  --text-8xl--line-height: 1;
+
+  --text-9xl: 8rem;
+  --text-9xl--line-height: 1;
+
+  /*
+   * fonts
+   */
+  --font-inter: 'Inter', sans-serif;
+  --font-space: 'Space Grotesk', sans-serif;
+}
+
+/* Headline */
+@utility typography-headline-lg-bold {
+  @apply text-4xl font-space font-bold;
+}
+
+@utility typography-headline-md-semibold {
+  @apply text-3xl font-space font-semibold;
+}
+
+@utility typography-headline-sm-bold {
+  @apply text-2xl font-space font-bold;
+}
+
+/* Title */
+@utility typography-title-lg-semibold {
+  @apply text-2xl font-space font-semibold;
+}
+
+@utility typography-title-md-semibold {
+  @apply text-lg font-space font-semibold;
+}
+
+@utility typography-title-sm-medium {
+  @apply text-base font-space font-medium;
+}
+
+@utility typography-title-sm-semibold {
+  @apply text-base font-space font-semibold;
+}
+
+/* Body */
+@utility typography-body-lg-regular {
+  @apply text-lg font-normal;
+}
+
+@utility typography-body-lg-medium {
+  @apply text-lg font-medium;
+}
+
+@utility typography-body-lg-semibold {
+  @apply text-lg font-semibold;
+}
+
+@utility typography-body-md-light {
+  @apply text-base font-light;
+}
+
+@utility typography-body-md-regular {
+  @apply text-base font-normal;
+}
+
+@utility typography-body-md-medium {
+  @apply text-base font-medium;
+}
+
+@utility typography-body-md-bold {
+  @apply text-base font-bold;
+}
+
+/* Label */
+@utility typography-label-lg-regular {
+  @apply text-base font-normal;
+}
+
+@utility typography-label-lg-semibold {
+  @apply text-base font-semibold;
+}
+
+@utility typography-label-lg-bold {
+  @apply text-base font-bold;
+}
+
+@utility typography-label-md-regular {
+  @apply text-sm font-normal;
+}
+
+@utility typography-label-md-medium {
+  @apply text-sm font-medium;
+}
+
+@utility typography-label-md-bold {
+  @apply text-sm font-bold;
+}
+
+/* Caption */
+@utility typography-caption-lg-regular {
+  @apply text-lg font-normal;
+}
+
+@utility typography-caption-md-medium {
+  @apply text-base font-medium;
+}
+
+@utility typography-caption-md-bold {
+  @apply text-base font-bold;
+}
+
+@utility typography-caption-sm-regular {
+  @apply text-sm font-normal;
+}
+
+@utility typography-caption-sm-medium {
+  @apply text-sm font-medium;
+}
+
+/* Button */
+@utility typography-button-lg-semibold {
+  @apply text-lg font-semibold;
+}
+
+@utility typography-button-md-semibold {
+  @apply text-base font-semibold;
+}
+
+@utility typography-button-sm-regular {
+  @apply text-sm font-normal;
+}
+
+@utility typography-button-sm-semibold {
+  @apply text-sm font-semibold;
+}

package/dist/{css → style}/uncompiled/utitlity/animation.css

@@ -2,6 +2,56 @@
   animation-delay: calc(--value(number) * 1ms);
 }
 
+@utility animate-pop-in {
+  animation: pop-in 0.2s ease-in-out;
+}
+
+@utility animate-pop-out {
+  animation: pop-out 0.2s ease-in-out forwards;
+}
+
+@utility animate-fade-in {
+  animation: fade-in 0.2s ease-in-out;
+}
+
+@utility animate-fade-out {
+  animation: fade-out 0.2s ease-in-out;
+}
+
+@utility animate-fade {
+  animation: fade-out 3s ease-in-out;
+}
+
+@utility animate-wave-big-left-up {
+  animation: bigLeftUp 1.7s ease-in infinite normal;
+  -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
+}
+
+@utility animate-wave-big-right-down {
+  animation: bigRightDown 1.7s ease-in infinite reverse;
+  -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
+}
+
+@utility animate-wave-small-left-up {
+  animation: smallLeftUp 1.7s ease-in infinite normal;
+  -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
+}
+
+@utility animate-wave-small-right-down {
+  animation: smallRightDown 1.7s ease-in infinite reverse;
+  -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
+}
+
+@utility animate-tooltip-fade-in {
+  animation: fade-in 0.2s ease-in-out forwards;
+  -webkit-animation: fade-in 0.2s ease-in-out forwards;
+}
+
+@utility animate-tooltip-fade-out {
+  animation: fade-in 0.2s ease-in-out forwards;
+  -webkit-animation: fade-in 0.2s ease-in-out forwards;
+}
+
 @layer utilities {
   @keyframes fade-in {
     0% {
@@ -91,6 +141,10 @@
 
   @keyframes pop-in {
     0% {
+      opacity: 0;
+      scale: 100%; /* Necessary so that the FloatingContainer picks up the correct position */
+    }
+    1% {
       opacity: 0;
       scale: 80%;
     }
@@ -120,14 +174,6 @@
     }
   }
 
-  .animate-pop-in {
-    animation: pop-in 0.2s ease-in-out;
-  }
-
-  .animate-pop-out {
-    animation: pop-out 0.2s ease-in-out forwards;
-  }
-
   .shimmer::before {
     content: '';
     position: absolute;
@@ -145,38 +191,4 @@
     );
     animation: shimmer 2s infinite;
   }
-
-  .animate-fade {
-    animation: fade-out 3s ease-in-out;
-  }
-
-  .animate-wave-big-left-up {
-    animation: bigLeftUp 1.7s ease-in infinite normal;
-    -webkit-animation: bigLeftUp 1.7s ease-in infinite normal;
-  }
-
-  .animate-wave-big-right-down {
-    animation: bigRightDown 1.7s ease-in infinite reverse;
-    -webkit-animation: bigRightDown 1.7s ease-in infinite reverse;
-  }
-
-  .animate-wave-small-left-up {
-    animation: smallLeftUp 1.7s ease-in infinite normal;
-    -webkit-animation: smallLeftUp 1.7s ease-in infinite normal;
-  }
-
-  .animate-wave-small-right-down {
-    animation: smallRightDown 1.7s ease-in infinite reverse;
-    -webkit-animation: smallRightDown 1.7s ease-in infinite reverse;
-  }
-
-  .animate-tooltip-fade-in {
-    animation: fade-in 0.2s ease-in-out forwards;
-    -webkit-animation: fade-in 0.2s ease-in-out forwards;
-  }
-
-  .animate-tooltip-fade-out {
-    animation: fade-in 0.2s ease-in-out forwards;
-    -webkit-animation: fade-in 0.2s ease-in-out forwards;
-  }
 }

package/dist/{css → style}/uncompiled/utitlity/index.css

@@ -1,4 +1,5 @@
 @import "./general.css";
 @import "./borderradius.css";
 @import "./animation.css";
-@import "./shadow.css";
+@import "./shadow.css";
+@import "./sizing.css";

package/dist/{css → style}/uncompiled/utitlity/shadow.css

@@ -32,13 +32,21 @@
 }
 
 @utility shadow-strong {
-  --tw-shadow-color: rgba(0, 0, 0, 0.06);
+  --tw-shadow-color: rgba(0, 0, 0, 0.05);
 }
 
 @utility shadow-hard {
   --tw-shadow-color: rgba(0, 0, 0, 0.10);
 }
 
+@utility shadow-hw-bottom {
+  --shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 10%));
+
+  @variant dark {
+    --shadow-bottom: 0 calc(1rem/16) calc(20rem/16) 0 var(--tw-shadow-color, rgb(0 0 0 / 20%));
+  }
+}
+
 @layer utilities {
   .shadow-around {
     @apply shadow-around-2;

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

@@ -0,0 +1,29 @@
+@utility h-force-* {
+  height: calc(var(--spacing) * --value(number));
+  min-height: calc(var(--spacing) * --value(number));
+  max-height: calc(var(--spacing) * --value(number));
+}
+
+@utility w-force-* {
+  width: calc(var(--spacing) * --value(number));
+  min-width: calc(var(--spacing) * --value(number));
+  max-width: calc(var(--spacing) * --value(number));
+}
+
+@utility size-force-* {
+  height: calc(var(--spacing) * --value(number));
+  min-height: calc(var(--spacing) * --value(number));
+  max-height: calc(var(--spacing) * --value(number));
+  width: calc(var(--spacing) * --value(number));
+  min-width: calc(var(--spacing) * --value(number));
+  max-width: calc(var(--spacing) * --value(number));
+}
+
+@utility size-force-nonscaling-* {
+  height: calc(--value(number));
+  width: calc(--value(number));
+  min-height: calc(--value(number));
+  min-width: calc(--value(number));
+  max-height: calc(--value(number));
+  max-width: calc(--value(number));
+}

package/dist/theming/useTheme.d.mts

@@ -1,11 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import * as React from 'react';
 import { Dispatch, SetStateAction, PropsWithChildren } from 'react';
 import { TranslationPlural, Translation } from '../localization/useTranslation.mjs';
 import '../localization/util.mjs';
 
 declare const themes: readonly ["light", "dark", "system"];
 type ThemeType = typeof themes[number];
+type ResolvedTheme = Exclude<ThemeType, 'system'>;
 type ThemeTypeTranslation = Record<ThemeType, string> & {
     theme: TranslationPlural;
 };
@@ -15,13 +16,14 @@ declare const ThemeUtil: {
 };
 type ThemeContextType = {
     theme: ThemeType;
+    resolvedTheme: ResolvedTheme;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
-declare const ThemeContext: react.Context<ThemeContextType>;
+declare const ThemeContext: React.Context<ThemeContextType>;
 type ThemeProviderProps = {
     initialTheme?: ThemeType;
 };
 declare const ThemeProvider: ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
 declare const useTheme: () => ThemeContextType;
 
-export { ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };
+export { type ResolvedTheme, ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };

package/dist/theming/useTheme.d.ts

@@ -1,11 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import * as react from 'react';
+import * as React from 'react';
 import { Dispatch, SetStateAction, PropsWithChildren } from 'react';
 import { TranslationPlural, Translation } from '../localization/useTranslation.js';
 import '../localization/util.js';
 
 declare const themes: readonly ["light", "dark", "system"];
 type ThemeType = typeof themes[number];
+type ResolvedTheme = Exclude<ThemeType, 'system'>;
 type ThemeTypeTranslation = Record<ThemeType, string> & {
     theme: TranslationPlural;
 };
@@ -15,13 +16,14 @@ declare const ThemeUtil: {
 };
 type ThemeContextType = {
     theme: ThemeType;
+    resolvedTheme: ResolvedTheme;
     setTheme: Dispatch<SetStateAction<ThemeType>>;
 };
-declare const ThemeContext: react.Context<ThemeContextType>;
+declare const ThemeContext: React.Context<ThemeContextType>;
 type ThemeProviderProps = {
     initialTheme?: ThemeType;
 };
 declare const ThemeProvider: ({ children, initialTheme }: PropsWithChildren<ThemeProviderProps>) => react_jsx_runtime.JSX.Element;
 declare const useTheme: () => ThemeContextType;
 
-export { ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };
+export { type ResolvedTheme, ThemeContext, ThemeProvider, type ThemeType, type ThemeTypeTranslation, ThemeUtil, useTheme };