@helpwave/hightide 0.1.22 → 0.1.23

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

@@ -4,30 +4,40 @@
  * default light-theme basic colors
  */
 @theme {
+  /* Basic */
   --color-white: #FFFFFF;
   --color-black: #000000;
   --color-gray-25: #F8F8F8;
   --color-gray-50: #F2F2F2;
+  --color-gray-75: #EEEEEE;
   --color-gray-100: #E6E6E6;
+  --color-gray-150: #D8D8D8;
   --color-gray-200: #CCCCCC;
   --color-gray-300: #B3B3B3;
   --color-gray-400: #999999;
   --color-gray-500: #888888;
+  --color-gray-550: #777777;
   --color-gray-600: #666666;
+  --color-gray-650: #555555;
   --color-gray-700: #4D4D4D;
+  --color-gray-750: #3F3F3F;
   --color-gray-800: #333333;
+  --color-gray-850: #222222;
   --color-gray-900: #1A1A1A;
   --color-gray-950: #0D0D0D;
 
+  /* Green */
   --color-green-100: #D1EFD8;
   --color-green-500: #69CB81;
   --color-green-700: #53a567;
   --color-green-900: #2C5536;
 
+  /* Orange */
   --color-orange-100: #FBECD9;
   --color-orange-200: #F7D8B3;
   --color-orange-500: #EA9E40;
 
+  /* Purple */
   --color-purple-50: #EFE6FD;
   --color-purple-100: #CEB0FA;
   --color-purple-200: #B892F3;
@@ -40,13 +50,16 @@
   --color-purple-900: #27144A;
   --color-purple-950: #1B0D33;
 
+  /* Blue */
   --color-blue-50: #F6FAFF;
   --color-blue-100: #D6E3F9;
   --color-blue-200: #99B9EF;
   --color-blue-500: #3272DF;
   --color-blue-600: #285BB2;
   --color-blue-800: #1A4080;
+  --color-blue-900: #11243E;
 
+  /* Red */
   --color-red-50: #FFF9F9;
   --color-red-100: #FBE0E2;
   --color-red-200: #F7C2C5;
@@ -62,11 +75,6 @@
 @layer base {
   /* dark theme */
   @variant dark {
-    --color-primary: var(--color-purple-400);
-    --color-positive: var(--color-green-700);
-    --color-negative: var(--color-red-500);
-    --color-negative-border-hover: var(--color-red-600);
 
-    --color-focus: var(--color-purple-500);
   }
 }

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

@@ -5,6 +5,11 @@
  * 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);
+
   /* Button Outline */
   --color-button-outline-primary-outline: var(--color-primary);
   --color-button-outline-primary-icon: var(--color-primary);
@@ -17,12 +22,12 @@
   --color-button-solid-secondary-background: var(--color-purple-50);
   --color-button-solid-secondary-text: var(--color-primary);
   --color-button-solid-secondary-icon: var(--color-primary);
-  --color-button-solid-tertiary-background: #F2F2F2;
-  --color-button-solid-tertiary-icon: #888888;
-  --color-button-solid-tertiary-text: #888888;
-  --color-button-solid-neutral-background: #D6D6D6;
-  --color-button-solid-neutral-icon: #1A1A1A;
-  --color-button-solid-neutral-text: #1A1A1A;
+  --color-button-solid-tertiary-background: var(--color-gray-50);
+  --color-button-solid-tertiary-icon: var(--color-gray-500);
+  --color-button-solid-tertiary-text: var(--color-gray-500);
+  --color-button-solid-neutral-background: var(--color-gray-150);
+  --color-button-solid-neutral-icon: var(--color-text-primary);
+  --color-button-solid-neutral-text: var(--color-text-primary);
   --color-button-solid-positive-background: var(--color-positive);
   --color-button-solid-positive-icon: var(--color-on-positive);
   --color-button-solid-positive-text: var(--color-on-positive);
@@ -35,8 +40,8 @@
 
   /* Button Text */
   --color-button-text-hover-background: #77777733;
-  --color-button-text-neutral-text: #333333;
-  --color-button-text-neutral-icon: #333333;
+  --color-button-text-neutral-text: var(--color-gray-800);
+  --color-button-text-neutral-icon: var(--color-gray-800);
   --color-button-text-negative-text: var(--color-negative);
   --color-button-text-negative-icon: var(--color-negative);
   --color-button-text-primary-text: var(--color-primary);
@@ -46,14 +51,18 @@
   --color-carousel-dot-active: var(--color-primary);
   --color-carousel-dot-disabled: var(--color-disabled-background);
 
+  /* Input */
+  --color-input-background: var(--color-surface);
+  --color-input-text: var(--color-on-surface);
+
   /* Menu */
-  --color-menu-background: #F2F2F2;
-  --color-menu-text: var(--color-text-default);
+  --color-menu-background: var(--color-surface-variant);
+  --color-menu-text: var(--color-on-surface);
   --color-menu-border: var(--color-border);
 
   /* Overlay, Dialog, Modal */
-  --color-overlay-background: #FAFAFA;
-  --color-overlay-text: var(--color-text-default);
+  --color-overlay-background: var(--color-surface);
+  --color-overlay-text: var(--color-on-surface);
   --color-overlay-shadow: #00000039;
 
   /* ProgressIndicator */
@@ -61,7 +70,7 @@
   --color-progress-indicator-background: var(--color-gray-300);
 
   /* Property */
-  --color-property-title-background: #EDEDED;
+  --color-property-title-background: var(--color-gray-100);
   --color-property-title-text: var(--color-text-secondary);
 
   /* Stepper Bar */
@@ -70,14 +79,18 @@
   --color-stepperbar-dot-disabled: var(--color-description);
 
   /* Table */
-  --color-tabel-header-background: #F6FAFF;
-  --color-table-row-hover-background: var(--color-purple-50);
-  --color-table-row-hover-text: var(--color-text-default);
+  --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));
 
   /* Tag */
-  --color-tag-dark-background: #333333;
-  --color-tag-dark-text: var(--color-text-light);
-  --color-tag-dark-icon: var(--color-text-light);
+  --color-tag-dark-background: var(--color-gray-800);
+  --color-tag-dark-text: var(--color-gray-100);
+  --color-tag-dark-icon: var(--color-gray-100);
+  --color-tag-default-background: #50687C;
+  --color-tag-default-text: var(--color-gray-100);
+  --color-tag-default-icon: var(--color-gray-100);
   --color-tag-green-background: #E2E9DB;
   --color-tag-green-text: #7A977E;
   --color-tag-green-icon: #7A977E;
@@ -97,14 +110,21 @@
   /* TextImage */
   --color-text-image-primary-background: var(--color-primary);
   --color-text-image-primary-text: var(--color-white);
-  --color-text-image-secondary-background: #3171DE;
+  --color-text-image-secondary-background: var(--color-blue-500);
   --color-text-image-secondary-text: var(--color-white);
-  --color-text-image-dark-background: #11243E;
+  --color-text-image-dark-background: var(--color-blue-900);
   --color-text-image-dark-text: var(--color-white);
 
   /* Tooltip */
   --color-tooltip-background: var(--color-menu-background);
   --color-tooltip-text: var(--color-description);
+
+  /* Other */
+  --color-border: var(--color-gray-200);
+  --color-divider: var(--color-gray-100);
+  --color-focus: var(--color-purple-400);
+  --color-outline: var(--color-gray-100);
+  --color-outline-variant: var(--color-gray-200);
 }
 
 /* non light-theme overrides */
@@ -112,37 +132,32 @@
   /* dark theme */
   @variant dark {
     /* Button Solid */
-    --color-button-solid-neutral-background: #424242;
-    --color-button-solid-neutral-icon: var(--color-text-light);
-    --color-button-solid-neutral-text: var(--color-text-light);
+    --color-button-solid-neutral-background: var(--color-gray-750);
+    --color-button-solid-neutral-icon: var(--color-gray-100);
+    --color-button-solid-neutral-text: var(--color-gray-100);
 
     /* Button Text */
-    --color-button-text-hover-background: #3F3F3F;
-    --color-button-text-neutral-text: var(--color-text-light);
-    --color-button-text-neutral-icon: var(--color-text-light);
-
-    /* Menu */
-    --color-menu-background: #333333;
-    --color-menu-text: var(--color-text-light);
-    --color-menu-border: var(--color-border);
+    --color-button-text-hover-background: #3F3F3F33;
+    --color-button-text-neutral-text: var(--color-gray-100);
+    --color-button-text-neutral-icon: var(--color-gray-100);
 
     /* Property */
-    --color-property-title-background: #393939;
-    --color-property-title-text: var(--color-on-surface);
+    --color-property-title-background: var(--color-gray-750);
 
     /* ProgressIndicator */
     --color-progress-indicator-background: var(--color-gray-700);
 
     /* Overlay, Dialog, Modal */
-    --color-overlay-background: #2A2A2A;
-    --color-overlay-text: var(--color-text-light);
     --color-overlay-shadow: #00000060;
 
-    /* Table */
-    --color-tabel-header-background: #2F2F2F;
-    --color-table-row-hover-background: #2f2841;
-
     /* Tag */
-    --color-tag-dark-background: #1A1A1A;
+    --color-tag-dark-background: var(--color-gray-900);
+
+    /* Other */
+    --color-border: var(--color-gray-600);
+    --color-divider: var(--color-gray-700);
+    --color-focus: var(--color-purple-500);
+    --color-outline: var(--color-gray-700);
+    --color-outline-variant: var(--color-gray-600);
   }
 }

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

@@ -5,103 +5,96 @@
  * default light-theme sematic colors
  */
 @theme {
-  --color-text-dark: #1A1A1A;
-  --color-text-light: #E6E6E6;
-  --color-text-default: var(--color-text-dark);
+  /* Background */
+  --color-background: var(--color-gray-75);
+  --color-on-background: var(--color-text-primary);
+
+  /* Gender */
+  --color-gender-female: var(--color-red-400);
+  --color-gender-female-outline: var(--color-red-300);
+  --color-gender-female-surface: var(--color-red-100);
+  --color-gender-female-background: var(--color-red-50);
+
+  --color-gender-male: var(--color-blue-500);
+  --color-gender-male-outline: var(--color-blue-200);
+  --color-gender-male-surface: var(--color-blue-100);
+  --color-gender-male-background: var(--color-blue-50);
+
+  --color-gender-neutral: var(--color-gray-700);
+  --color-gender-neutral-outline: var(--color-gray-300);
+  --color-gender-neutral-surface: var(--color-gray-100);
+  --color-gender-neutral-background: var(--color-gray-25);
+
+  /* States */
+  --color-warning: var(--color-orange-500);
+  --color-on-warning:  var(--color-white);
 
-  --color-primary: var(--color-purple-500);
-  --color-on-primary: #FFFFFF;
-  --color-secondary: #11243E;
-  --color-on-secondary: #FFFFFF;
-  --color-warning: var(--color-yellow-500);
-  --color-on-warning: #FFFFFF;
   --color-positive: var(--color-green-500);
-  --color-on-positive: #FFFFFF;
+  --color-on-positive:  var(--color-white);
+
   --color-negative: var(--color-red-500);
-  --color-on-negative: #FFFFFF;
+  --color-on-negative:  var(--color-white);
   --color-negative-border: var(--color-negative);
   --color-negative-border-hover: var(--color-red-700);
 
-  --color-surface: #FFFFFF;
-  --color-on-surface: var(--color-text-dark);
-
-  --color-input-background: var(--color-surface);
-  --color-input-text: var(--color-on-surface);
-
-  --color-surface-variant: #F8F8F8;
-  --color-surface-warning: #FBECD9;
-  --color-highlight: #3272DF;
-  --color-background: #EEEEEE;
-  --color-on-background: var(--color-text-dark);
-
-  --color-female: var(--color-red-400);
-  --color-female-outline: var(--color-red-300);
-  --color-female-surface: var(--color-red-100);
-  --color-female-background: var(--color-red-50);
-
-  --color-male: var(--color-blue-400);
-  --color-male-outline: var(--color-blue-300);
-  --color-male-surface: var(--color-blue-100);
-  --color-male-background: var(--color-blue-50);
-
-  --color-neutral: #4D4D4D;
-  --color-neutral-outline: #B3B3B3;
-  --color-neutral-surface: #E6E6E6;
-  --color-neutral-background: #F8F8F8;
-
-  --color-text-primary: var(--color-text-default);
-  --color-text-secondary: #666666;
-  --color-text-tertiary: #B3B3B3;
-  --color-text-highlight: #3272DF;
-  --color-text-label: #4D4D4D;
-  --color-icon-primary: var(--color-text-primary);
-  --color-icon-secondary: var(--color-text-secondary);
-  --color-icon-highlight: var(--color-text-highlight);
-  --color-divider: #E6E6E6;
-  --color-description: #555555;
-  --color-outline: #E6E6E6;
-  --color-outline-variant: #CCCCCC;
-
-  --color-disabled-background: #E2E2E2;
-  --color-disabled-text: #888888;
+  --color-disabled-background: var(--color-gray-200);
+  --color-disabled-text: var(--color-gray-400);
   --color-disabled-icon: var(--color-disabled-text);
-  --color-disabled-border: #CFCFCF;
+  --color-disabled-border: var(--color-gray-300);
   --color-disabled-outline: var(--color-disabled-border);
 
-  --color-border: #CCCCCC;
-
-  --color-focus: var(--color-purple-400);
+  /* Surface */
+  --color-surface:  var(--color-white);
+  --color-on-surface: var(--color-text-primary);
+  --color-surface-variant: var(--color-gray-25);
+  --color-surface-warning: var(--color-orange-100);
+
+  /* Text */
+  --color-text-primary: var(--color-gray-900);
+  --color-text-secondary: var(--color-gray-600);
+  --color-text-tertiary: var(--color-gray-300);
+  --color-text-highlight: var(--color-highlight);
+  --color-description: var(--color-gray-600);
+  --color-label: var(--color-gray-700);
+
+  /* Other */
+  --color-primary: var(--color-purple-500);
+  --color-on-primary: var(--color-white);
+  --color-secondary: var(--color-blue-800);
+  --color-on-secondary:  var(--color-white);
+  --color-highlight:  var(--color-blue-500);
 }
 
 /* non light-theme overrides */
 @layer base {
   /* dark theme */
   @variant dark {
-    --color-text-default: var(--color-text-light);
-
-    --color-surface: #363636;
-    --color-on-surface: var(--color-text-light);
-    --color-surface-variant: #494949;
-    --color-surface-warning: #FBECD9;
-    --color-text-label: #CFCFCF;
-    --color-highlight: #3272DF;
-    --color-background: #222222;
-    --color-on-background: var(--color-text-light);
-    --color-border: #444444;
-
-    --color-neutral: #4D4D4D;
-    --color-neutral-outline: #B3B3B3;
-    --color-neutral-surface: #E6E6E6;
-    --color-neutral-background: #F8F8F8;
-
-    --color-text-primary: var(--color-text-light);
-    --color-text-secondary: #666666;
-    --color-text-tertiary: #B3B3B3;
-    --color-text-highlight: #3272DF;
-    --color-description: #999999;
-
-    --color-disabled-background: #2C2C2C;
-    --color-disabled-text: #666666;
-    --color-disabled-border: #3D3D3D;
+    /* Background */
+    --color-background: var(--color-gray-850);
+    --color-on-background: var(--color-text-primary);
+
+    /* States */
+    --color-positive: var(--color-green-700);
+
+    --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);
+
+    /* Text */
+    --color-text-primary: var(--color-gray-100);
+    --color-text-secondary: var(--color-gray-400);
+    --color-text-tertiary: var(--color-gray-600);
+    --color-description: var(--color-gray-400);
+    --color-label: var(--color-gray-300);
+
+    /* Other */
+    --color-primary: var(--color-purple-400);
   }
 }

package/dist/index.d.mts

@@ -24,7 +24,7 @@ export { Pagination, PaginationProps } from './components/layout-and-navigation/
 export { SearchableList, SearchableListProps } from './components/layout-and-navigation/SearchableList.mjs';
 export { StepperBar, StepperBarProps, StepperBarUncontrolled, StepperState } from './components/layout-and-navigation/StepperBar.mjs';
 export { TextImage, TextImageProps } from './components/layout-and-navigation/TextImage.mjs';
-export { Tile, TileProps } from './components/layout-and-navigation/Tile.mjs';
+export { ListTile, ListTileProps, Tile, TileProps } from './components/layout-and-navigation/Tile.mjs';
 export { VerticalDivider, VerticalDividerProps } from './components/layout-and-navigation/VerticalDivider.mjs';
 export { ErrorComponent, ErrorComponentProps } from './components/loading-states/ErrorComponent.mjs';
 export { LoadingAndErrorComponent, LoadingAndErrorComponentProps } from './components/loading-states/LoadingAndErrorComponent.mjs';
@@ -60,7 +60,7 @@ export { Menu, MenuBag, MenuItem, MenuItemProps, MenuProps } from './components/
 export { MultiSelect, MultiSelectBag, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.mjs';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.mjs';
 export { SearchBar, SearchBarProps } from './components/user-action/SearchBar.mjs';
-export { Select, SelectBag, SelectOption, SelectProps, SelectTile, SelectTileProps, SelectUncontrolled } from './components/user-action/Select.mjs';
+export { Select, SelectBag, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.mjs';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.mjs';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.mjs';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.mjs';

package/dist/index.d.ts

@@ -24,7 +24,7 @@ export { Pagination, PaginationProps } from './components/layout-and-navigation/
 export { SearchableList, SearchableListProps } from './components/layout-and-navigation/SearchableList.js';
 export { StepperBar, StepperBarProps, StepperBarUncontrolled, StepperState } from './components/layout-and-navigation/StepperBar.js';
 export { TextImage, TextImageProps } from './components/layout-and-navigation/TextImage.js';
-export { Tile, TileProps } from './components/layout-and-navigation/Tile.js';
+export { ListTile, ListTileProps, Tile, TileProps } from './components/layout-and-navigation/Tile.js';
 export { VerticalDivider, VerticalDividerProps } from './components/layout-and-navigation/VerticalDivider.js';
 export { ErrorComponent, ErrorComponentProps } from './components/loading-states/ErrorComponent.js';
 export { LoadingAndErrorComponent, LoadingAndErrorComponentProps } from './components/loading-states/LoadingAndErrorComponent.js';
@@ -60,7 +60,7 @@ export { Menu, MenuBag, MenuItem, MenuItemProps, MenuProps } from './components/
 export { MultiSelect, MultiSelectBag, MultiSelectOption, MultiSelectProps, MultiSelectUncontrolled } from './components/user-action/MultiSelect.js';
 export { ScrollPicker, ScrollPickerProps } from './components/user-action/ScrollPicker.js';
 export { SearchBar, SearchBarProps } from './components/user-action/SearchBar.js';
-export { Select, SelectBag, SelectOption, SelectProps, SelectTile, SelectTileProps, SelectUncontrolled } from './components/user-action/Select.js';
+export { Select, SelectBag, SelectOption, SelectProps, SelectUncontrolled } from './components/user-action/Select.js';
 export { Textarea, TextareaProps, TextareaUncontrolled } from './components/user-action/Textarea.js';
 export { ToggleableInput, ToggleableInputUncontrolled } from './components/user-action/ToggleableInput.js';
 export { Tooltip, TooltipProps } from './components/user-action/Tooltip.js';