@helpwave/hightide 0.1.7-alpha.1 → 0.1.7

package/dist/css/globals.css

@@ -20,7 +20,6 @@
     --color-gray-100: #E6E6E6;
     --color-gray-200: #CCCCCC;
     --color-gray-300: #B3B3B3;
-    --color-gray-400: #999999;
     --color-gray-500: #888888;
     --color-gray-600: #666666;
     --color-gray-700: #4D4D4D;
@@ -75,11 +74,13 @@
     --color-background: #EEEEEE;
     --color-on-background: #1A1A1A;
     --color-text-label: #4D4D4D;
+    --color-divider: #E6E6E6;
     --color-description: #555555;
     --color-disabled-background: #BBBBBB;
     --color-disabled-text: #555555;
     --color-disabled-icon: #555555;
     --color-disabled-outline: #555555;
+    --color-border: #CCCCCC;
     --color-button-solid-primary-background: var(--color-primary);
     --color-button-solid-primary-text: var(--color-on-primary);
     --color-button-solid-primary-icon: var(--color-on-primary);
@@ -110,9 +111,10 @@
     --color-button-text-negative-icon: var(--color-negative);
     --color-button-text-primary-text: var(--color-primary);
     --color-button-text-primary-icon: var(--color-primary);
-    --color-menu-background: #FFFFFF;
-    --color-menu-text: #1A1A1A;
-    --color-menu-border: #999999;
+    --color-menu-background: var(--color-surface);
+    --color-menu-text: var(--color-on-surface);
+    --color-menu-border: var(--color-border);
+    --color-property-title-background: #E6E6E6;
     --color-tag-default-background: #F6FAFF;
     --color-tag-default-text: #1A4080;
     --color-tag-default-icon: #1A4080;
@@ -534,6 +536,9 @@
   .min-h-\[0\.75rem\] {
     min-height: 0.75rem;
   }
+  .min-h-\[1\.5rem\] {
+    min-height: 1.5rem;
+  }
   .min-h-\[250px\] {
     min-height: 250px;
   }
@@ -603,6 +608,9 @@
   .\!min-w-\[400px\] {
     min-width: 400px !important;
   }
+  .min-w-\[1\.5rem\] {
+    min-width: 1.5rem;
+  }
   .min-w-\[2rem\] {
     min-width: 2rem;
   }
@@ -841,9 +849,6 @@
     --tw-border-style: none;
     border-style: none;
   }
-  .border-\[\#00000033\] {
-    border-color: #00000033;
-  }
   .border-black {
     border-color: var(--color-black);
   }
@@ -856,21 +861,21 @@
   .border-disabled-text {
     border-color: var(--color-disabled-text);
   }
+  .border-divider\/30 {
+    border-color: color-mix(in srgb, #E6E6E6 30%, transparent);
+    @supports (color: color-mix(in lab, red, red)) {
+      border-color: color-mix(in oklab, var(--color-divider) 30%, transparent);
+    }
+  }
   .border-gray-200 {
     border-color: var(--color-gray-200);
   }
   .border-gray-300 {
     border-color: var(--color-gray-300);
   }
-  .border-gray-400 {
-    border-color: var(--color-gray-400);
-  }
   .border-menu-border {
     border-color: var(--color-menu-border);
   }
-  .border-on-background {
-    border-color: var(--color-on-background);
-  }
   .border-primary {
     border-color: var(--color-primary);
   }
@@ -1000,6 +1005,9 @@
       background-color: color-mix(in oklab, var(--color-primary) 90%, transparent);
     }
   }
+  .bg-property-title-background {
+    background-color: var(--color-property-title-background);
+  }
   .bg-surface {
     background-color: var(--color-surface);
   }
@@ -1242,6 +1250,9 @@
   .text-black {
     color: var(--color-black);
   }
+  .text-border {
+    color: var(--color-border);
+  }
   .text-button-outline-primary-icon {
     color: var(--color-button-outline-primary-icon);
   }
@@ -1619,13 +1630,6 @@
       border-color: var(--color-primary);
     }
   }
-  .hover\:border-gray-400 {
-    &:hover {
-      @media (hover: hover) {
-        border-color: var(--color-gray-400);
-      }
-    }
-  }
   .hover\:border-primary {
     &:hover {
       @media (hover: hover) {
@@ -1882,6 +1886,7 @@
     --color-highlight: #3272DF;
     --color-background: #1A1A1A;
     --color-on-background: #EEEEEE;
+    --color-border: #444444;
     --color-neutral: #4D4D4D;
     --color-neutral-outline: #B3B3B3;
     --color-neutral-surface: #E6E6E6;
@@ -1895,7 +1900,7 @@
     --color-icon-highlight: #3272DF;
     --color-description: #999999;
     --color-disabled-background: #555555;
-    --color-disabled-text: #888888;
+    --color-disabled-text: #999999;
     --color-button-solid-neutral-background: #424242;
     --color-button-solid-neutral-icon: #EEEEEE;
     --color-button-solid-neutral-text: #EEEEEE;
@@ -1904,10 +1909,12 @@
     --color-button-text-neutral-icon: #EEEEEE;
     --color-menu-background: #333333;
     --color-menu-text: #EEEEEE;
-    --color-menu-border: #999999;
-    --color-tabel-header-background: #F6FAFF;
+    --color-menu-border: var(--color-border);
+    --color-property-title-background: #393939;
+    --color-property-title-text: var(--color-on-surface);
     --color-overlay-background: #222222;
     --color-overlay-text: #FFFFFF;
+    --color-tabel-header-background: #F6FAFF;
   }
 }
 @layer components {
@@ -2059,6 +2066,9 @@
   }
 }
 @layer components {
+  * {
+    border-color: var(--color-border);
+  }
   html, main {
     background-color: var(--color-background);
     color: var(--color-on-background);
@@ -2071,7 +2081,6 @@
     border-radius: var(--radius-md);
     border-style: var(--tw-border-style);
     border-width: 2px;
-    border-color: var(--color-gray-200);
     background-color: var(--color-surface);
     padding-inline: calc(var(--spacing) * 3);
     padding-block: calc(var(--spacing) * 2);

package/dist/css/uncompiled/globals.css

@@ -249,6 +249,7 @@
   --color-disabled-text: #555555;
   --color-disabled-icon: #555555;
   --color-disabled-outline: #555555;
+  --color-border: #CCCCCC;
 
   --color-button-solid-primary-background: var(--color-primary);
   --color-button-solid-primary-text: var(--color-on-primary);
@@ -284,9 +285,12 @@
   --color-button-text-primary-text: var(--color-primary);
   --color-button-text-primary-icon: var(--color-primary);
 
-  --color-menu-background: #FFFFFF;
-  --color-menu-text: #1A1A1A;
-  --color-menu-border: #999999;
+  --color-menu-background: var(--color-surface);
+  --color-menu-text: var(--color-on-surface);
+  --color-menu-border: var(--color-border);
+
+  --color-property-title-background: #E6E6E6;
+  --color-property-title-text: var(--color-on-surface);
 
   --color-tag-default-background: #F6FAFF;
   --color-tag-default-text: #1A4080;
@@ -348,6 +352,7 @@
     --color-highlight: #3272DF;
     --color-background: #1A1A1A;
     --color-on-background: #EEEEEE;
+    --color-border: #444444;
 
     --color-neutral: #4D4D4D;
     --color-neutral-outline: #B3B3B3;
@@ -364,7 +369,7 @@
     --color-description: #999999;
 
     --color-disabled-background: #555555;
-    --color-disabled-text: #888888;
+    --color-disabled-text: #999999;
 
     --color-button-solid-neutral-background: #424242;
     --color-button-solid-neutral-icon: #EEEEEE;
@@ -376,12 +381,15 @@
 
     --color-menu-background: #333333;
     --color-menu-text: #EEEEEE;
-    --color-menu-border: #999999;
+    --color-menu-border: var(--color-border);
 
-    --color-tabel-header-background: #F6FAFF;
+    --color-property-title-background: #393939;
+    --color-property-title-text: var(--color-on-surface);
 
     --color-overlay-background: #222222;
     --color-overlay-text: #FFFFFF;
+
+    --color-tabel-header-background: #F6FAFF;
   }
 }
 
@@ -445,6 +453,10 @@
 }
 
 @layer components {
+  * {
+    @apply border-border;
+  }
+
   html, main {
     @apply bg-background text-on-background;
   }
@@ -454,7 +466,7 @@
   }
 
   input {
-    @apply block bg-surface text-on-surface px-3 py-2 rounded-md border-2 border-gray-200 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary;
+    @apply block bg-surface text-on-surface px-3 py-2 rounded-md border-2 hover:border-primary focus:outline-none focus:border-primary focus:ring-primary;
   }
 
   .textstyle-title-3xl {

package/dist/index.js

@@ -3873,7 +3873,7 @@ var YearMonthPicker = ({
         ref: (displayedYearMonth.getFullYear() ?? (/* @__PURE__ */ new Date()).getFullYear()) === year ? ref : void 0,
         label: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: (0, import_clsx6.default)({ "text-primary font-bold": selectedYear }), children: year }),
         isExpanded: showValueOpen && selectedYear,
-        children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "col gap-y-1 px-2 pb-2", children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "row", children: monthList.map((month) => {
+        children: equalSizeGroups([...monthsList], 3).map((monthList, index) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "row", children: monthList.map((month) => {
           const monthIndex = monthsList.indexOf(month);
           const newDate = new Date(year, monthIndex);
           const selectedMonth = selectedYear && monthIndex === displayedYearMonth.getMonth();
@@ -3901,7 +3901,7 @@ var YearMonthPicker = ({
             },
             month
           );
-        }) }, index)) })
+        }) }, index))
       },
       year
     );
@@ -4089,6 +4089,7 @@ var DatePicker = ({
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         TextButton,
         {
+          color: "primary",
           onClick: () => {
             const newDate = /* @__PURE__ */ new Date();
             newDate.setHours(value.getHours(), value.getMinutes());
@@ -6336,10 +6337,10 @@ var Checkbox = ({
         disabled,
         id,
         className: (0, import_clsx26.default)(usedSizeClass, `items-center border-2 rounded outline-none focus:border-primary`, {
-          "text-disabled-text border-disabled-text": disabled,
-          "border-on-background": !disabled,
+          "text-disabled-text border-disabled-text bg-disabled-background": disabled,
+          "bg-surface": !disabled && !checked,
           "bg-primary/30 border-primary text-primary": checked === true || checked === "indeterminate",
-          "hover:border-gray-400 focus:hover:border-primary": !checked
+          "hover:border-primary focus:hover:border-primary": !checked
         }, className),
         children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(CheckboxPrimitive.Indicator, { children: [
           checked === true && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react9.Check, { className: innerIconSize }),
@@ -7022,7 +7023,6 @@ var Select = ({
   isDisabled,
   className,
   textColor = "text-menu-text",
-  hoverColor = "hover:brightness-90",
   additionalItems,
   selectedDisplayOverwrite
 }) => {
@@ -7047,7 +7047,7 @@ var Select = ({
             borderColor,
             {
               "rounded-b-lg": !open,
-              [hoverColor]: !isDisabled,
+              "hover:border-primary": !isDisabled,
               "bg-disabled-background cursor-not-allowed text-disabled": isDisabled
             }
           ),
@@ -7143,8 +7143,8 @@ var SearchableSelect = ({
       value,
       options: filteredOptions,
       additionalItems: [/* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "row gap-x-2 items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Input, { autoFocus: true, value: search, onChangeText: setSearch }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.Search, {})
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Input, { autoFocus: true, value: search, onChangeText: setSearch, className: "w-full" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react12.Search, { className: "min-w-[1.5rem] min-h-[1.5rem]" })
       ] }, "selectSearch")],
       ...selectProps
     }
@@ -7321,7 +7321,7 @@ var PropertyBase = ({
       "div",
       {
         className: (0, import_clsx34.default)("row gap-x-2 !w-[200px] px-4 py-2 items-center rounded-l-xl border-2 border-r-0", {
-          "bg-gray-100 text-black group-hover:border-primary border-gray-400": !requiredAndNoValue,
+          "bg-property-title-background property-title-text group-hover:border-primary": !requiredAndNoValue,
           "bg-warning text-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
         }, className),
         children: [
@@ -7334,7 +7334,7 @@ var PropertyBase = ({
       "div",
       {
         className: (0, import_clsx34.default)("row grow justify-between items-center rounded-r-xl border-2 border-l-0", {
-          "bg-white group-hover:border-primary border-gray-400": !requiredAndNoValue,
+          "bg-surface group-hover:border-primary": !requiredAndNoValue,
           "bg-surface-warning group-hover:border-warning border-warning/90": requiredAndNoValue
         }, className),
         children: [
@@ -7600,7 +7600,7 @@ var MultiSelect = ({
               borderColor,
               "bg-menu-background text-menu-text inline-w-full justify-between items-center rounded-lg border-2 px-4 py-2 font-medium",
               {
-                "hover:brightness-90 hover:border-primary cursor-pointer": !disabled,
+                "hover:border-primary cursor-pointer": !disabled,
                 "bg-disabled-background text-disabled cursor-not-allowed": disabled
               },
               triggerClassName
@@ -7880,9 +7880,9 @@ var Textarea = ({
     /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(
       "div",
       {
-        className: `${(0, import_clsx41.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 border-gray-300 hover:border-primary rounded-lg": defaultStyle })}`,
+        className: `${(0, import_clsx41.default)(" bg-surface text-on-surface focus-within:border-primary relative", { "shadow border-2 hover:border-primary rounded-lg": defaultStyle })}`,
         children: [
-          headline && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "mx-3 mt-3 block text-gray-700 font-bold", children: headline }),
+          headline && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "mx-3 mt-3 block textstyle-label-md", children: headline }),
           /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
             "textarea",
             {
@@ -8263,7 +8263,7 @@ var ScrollPicker = ({
         /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
           "div",
           {
-            className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-y-2 border-x-0 border-[#00000033]",
+            className: "absolute z-[1] top-1/2 -translate-y-1/2 -translate-x-1/2 left-1/2 w-full min-w-[40px] border border-divider/30 border-y-2 border-x-0 ",
             style: { height: `${itemHeight}px` }
           }
         ),