@helpwave/hightide 0.2.0 → 0.4.0

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

@@ -0,0 +1,290 @@
+/* Button */
+@layer components {
+  .btn-xs {
+    @apply flex-row-1 items-center justify-center px-1 py-0.75 rounded-1 h-7 text-sm;
+  }
+
+  .btn-sm {
+    @apply flex-row-1 items-center justify-center px-1.5 py-1 rounded-1.5 h-8;
+  }
+
+  .btn-md {
+    @apply flex-row-2 items-center justify-center px-3 py-2 rounded-1.5 h-10;
+  }
+
+  .btn-lg {
+    @apply flex-row-2 items-center justify-center px-4 py-2.5 rounded-1.5 h-12;
+  }
+
+  .icon-btn-xs {
+    @apply flex-row-0 items-center justify-center p-1 rounded-1 h-6 w-6;
+  }
+
+  .icon-btn-sm {
+    @apply flex-row-0 items-center justify-center p-1.5 rounded-1.5 h-8 w-8;
+  }
+
+  .icon-btn-md {
+    @apply flex-row-0 items-center justify-center p-2 rounded-1.5 h-10 w-10;
+  }
+
+  .icon-btn-lg {
+    @apply flex-row-0 items-center justify-center p-3 rounded-1.5 h-12 w-12;
+  }
+}
+
+/* Card */
+@layer components {
+  .card-sm {
+    @apply flex-col-2 bg-surface text-on-surface px-2 py-1 rounded;
+  }
+
+  .card-md {
+    @apply flex-col-2 bg-surface text-on-surface px-4 py-2 rounded-md;
+  }
+
+  .card-lg {
+    @apply flex-col-2 bg-surface text-on-surface px-8 py-4 rounded-lg;
+  }
+}
+
+/* Chip */
+@layer components {
+  .chip-sm {
+    @apply flex-row-1 items-center justify-center px-1 py-0.5 rounded-md;
+  }
+
+  .chip-md {
+    @apply flex-row-1 items-center justify-center px-2 py-1 rounded-md;
+  }
+
+  .chip-lg {
+    @apply flex-row-2 items-center justify-center px-4 py-2 rounded-md;
+  }
+}
+
+/* Link */
+@layer components {
+  .link {
+    @apply decoration-3 p-2 hover:underline focus:underline font-bold text-lg rounded;
+  }
+}
+
+/* Focus */
+@utility focus-style-outline {
+  &:focus-visible {
+    @apply outline-solid outline-2 outline-focus outline-offset-2;
+  }
+}
+
+@utility focus-style-border {
+  &:focus-visible {
+    @apply border-2 border-focus;
+  }
+}
+
+@utility focus-style-default {
+  &:focus-visible:not(.focus-style-none) {
+    @apply focus-style-outline;
+  }
+}
+
+@utility focus-style-none {
+  &:focus-visible {
+    @apply outline-none;
+  }
+}
+
+@utility input-element {
+  @apply border-2 border-transparent focus-style-none focus-style-border;
+  &:not([data-disabled]):not([data-invalid]) {
+    @apply bg-input-background hover:border-primary;
+
+    &:not([data-value]) {
+      @apply text-placeholder;
+    }
+
+    &[data-value] {
+      @apply text-input-text;
+    }
+  }
+
+  &:not([data-disabled])[data-invalid] {
+    @apply bg-negative/20;
+
+    --color-focus: var(--color-negative);
+
+    &[data-value] {
+      @apply text-negative;
+    }
+
+    &:not([data-value]) {
+      @apply text-placeholder;
+    }
+  }
+
+  &[data-disabled] {
+    @apply bg-disabled text-on-disabled;
+  }
+}
+
+/* input-elements */
+@layer components {
+  *[data-name="input"]:not(.default-style-none) {
+    @apply px-3 py-2 rounded-md h-10 input-element;
+  }
+
+  *[data-name="textarea"]:not(.default-style-none) {
+    @apply w-full h-32 py-2 px-3 rounded-md resize-none overflow-y-scroll input-element;
+  }
+
+  *[data-name="select-button"]:not(.default-style-none) {
+    @apply flex-row-2 items-center justify-between rounded-md px-3 py-2 input-element;
+  }
+
+  *[data-name="select-button-chips"]:not(.default-style-none) {
+    @apply flex flex-wrap gap-2 items-center rounded-md px-2.5 py-2.5 input-element;
+    &:not([data-disabled]){
+      @apply hover:cursor-pointer;
+    }
+  }
+
+  *[data-name="checkbox"]:not(.default-style-none) {
+    @apply flex-col-0 items-center justify-center rounded input-element focus-style-outline;
+    &:not([data-disabled]){
+      @apply hover:cursor-pointer;
+    }
+    &:not([data-disabled]):not([data-invalid]):not([data-value='false']) {
+      @apply bg-primary/40 border-primary text-primary;
+    }
+    &:not([data-disabled]):not([data-invalid])[data-value='false'] {
+      @apply border-border text-border hover:border-primary hover:text-primary bg-transparent;
+    }
+  }
+}
+
+/* HTML Element defaults */
+@layer components {
+  * {
+    @apply border-border list-none placeholder-placeholder;
+
+    @variant dark {
+      color-scheme: dark;
+    }
+  }
+
+  html {
+    @apply bg-background text-on-background;
+  }
+
+  button {
+    @apply cursor-pointer text-nowrap;
+  }
+
+  *:disabled {
+    @apply cursor-not-allowed;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    * {
+      @apply transition-none animate-none;
+    }
+  }
+
+  /* move the focus styles into its own file and utilities */
+  *:focus {
+    @apply outline-0 ring-0;
+  }
+
+  * {
+    @apply focus-style-default;
+  }
+
+  /**
+   * Table
+   */
+  table {
+    @apply table-fixed border-separate border-spacing-0 bg-table-background text-table-text;
+  }
+
+  th {
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-y-1 first:border-l-1 last:border-r-1 first:rounded-tl-lg last:rounded-tr-lg bg-table-header-background text-label font-bold;
+  }
+
+  tbody > tr {
+    @apply hover:bg-table-row-hover-background;
+  }
+
+  td {
+    @apply px-3 first:pl-6 last:pr-6 py-2.5 border-b-1 first:border-l-1 last:border-r-1 [nth-last-child(1)]:first:rounded-bl-lg [nth-last-child(1)]:last:rounded-br-lg;
+  }
+
+  tbody > tr:last-child > td {
+    @apply first:rounded-bl-lg last:rounded-br-lg;
+  }
+
+  .table-resize-indicator {
+    @apply absolute top-2 bottom-2 right-0;
+  }
+
+  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/style/uncompiled/theme/index.css

@@ -1,4 +1,5 @@
-@import './variants.css';
-@import './colors-basic.css';
-@import './colors-semantic.css';
-@import './colors-component.css';
+@import './colors/index.css';
+@import './typography.css';
+@import './breakpoints.css';
+@import './components.css';
+@import './shadow.css';

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

@@ -0,0 +1,7 @@
+@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%));
+  }
+}

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

@@ -184,9 +184,9 @@
     background: linear-gradient(
       120deg,
       transparent 0%,
-      transparent 30%,
-      rgba(255, 255, 255, 0.1) 50%,
-      transparent 70%,
+      transparent 25%,
+      rgba(255, 255, 255, 0.15) 50%,
+      transparent 75%,
       transparent 100%
     );
     animation: shimmer 2s infinite;

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

@@ -0,0 +1,58 @@
+@utility coloring-solid {
+  @apply
+  bg-[var(--coloring-solid-color,var(--coloring-color))]
+  text-[var(--coloring-solid-text,var(--coloring-on-color))];
+}
+
+@utility coloring-solid-hover {
+  @apply
+  coloring-solid
+  hover:bg-[var(--coloring-solid-hover,var(--coloring-hover))];
+}
+
+@utility coloring-tonal {
+  @apply
+  bg-[var(--coloring-color)]/20
+  text-[var(--coloring-color)];
+}
+
+@utility coloring-tonal-hover {
+  @apply
+  coloring-tonal
+  hover:bg-[var(--coloring-color)]/30;
+}
+
+@utility coloring-text {
+  @apply
+  text-[var(--coloring-text,var(--coloring-color))];
+}
+
+@utility coloring-text-hover {
+  @apply
+  coloring-text
+  hover:bg-[var(--coloring-text-hover,var(--coloring-text,var(--coloring-color)))]/20;
+}
+
+@utility coloring-outline {
+  @apply
+  border-1
+  border-[var(--coloring-border,var(--coloring-outline,var(--coloring-color)))]
+  text-[var(--coloring-outline,var(--coloring-color))];
+}
+
+@utility coloring-outline-hover {
+  @apply
+  coloring-outline
+  hover:border-[var(--coloring-border-hover,--coloring-hover)]
+  hover:text-[var(--coloring-outline-hover,var(--coloring-hover))];
+}
+
+@utility reset-coloring-variables {
+  --coloring-color: initial;
+  --coloring-on-color: initial;
+  --coloring-hover: initial;
+  --coloring-text: initial;
+  --coloring-text-hover: initial;
+  --coloring-outline: initial;
+  --coloring-outline-hover: initial;
+}

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

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

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

@@ -1,5 +1,3 @@
-@import "tailwindcss";
-
 @utility shadow-side {
   box-shadow: var(--shadow-right, 0 0 0 transparent),
     var(--shadow-left, 0 0 0 transparent),
@@ -39,14 +37,6 @@
   --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/package.json

@@ -7,7 +7,7 @@
     "url": "git+https://github.com/helpwave/hightide.git"
   },
   "license": "MPL-2.0",
-  "version": "0.2.0",
+  "version": "0.4.0",
   "files": [
     "dist"
   ],
@@ -44,10 +44,8 @@
     "lucide-react": "0.468.0",
     "postcss": "8.5.3",
     "react": "18.3.1",
-    "react-custom-scrollbars-2": "4.5.0",
     "react-dom": "18.3.1",
     "tailwindcss": "4.1.3",
-    "tinycolor2": "1.6.0",
     "@helpwave/internationalization": "0.4.0"
   },
   "devDependencies": {
@@ -66,7 +64,6 @@
     "@types/react": "18.3.17",
     "@types/react-dom": "18.3.5",
     "@types/tinycolor2": "1.4.6",
-    "barrelsby": "2.8.1",
     "eslint": "9.31.0",
     "eslint-plugin-storybook": "9.0.12",
     "jest": "30.2.0",

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

@@ -1,177 +0,0 @@
-@import './variants.css';
-@import './colors-semantic.css';
-
-/*
- * 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);
-  --color-button-outline-primary-text: var(--color-primary);
-
-  /* Button Solid */
-  --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);
-  --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: 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);
-  --color-button-solid-warning-background: var(--color-warning);
-  --color-button-solid-warning-icon: var(--color-on-warning);
-  --color-button-solid-warning-text: var(--color-on-warning);
-  --color-button-solid-negative-background: var(--color-negative);
-  --color-button-solid-negative-icon: var(--color-on-negative);
-  --color-button-solid-negative-text: var(--color-on-negative);
-
-  /* Button Text */
-  --color-button-text-hover-background: #77777733;
-  --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);
-  --color-button-text-primary-icon: var(--color-primary);
-
-  /* Carousel */
-  --color-carousel-dot-active: var(--color-primary);
-  --color-carousel-dot-disabled: var(--color-disabled-background);
-
-  /* Input */
-  --color-input-background: var(--color-surface-variant);
-  --color-input-text: var(--color-on-surface);
-
-  /* Menu */
-  --color-menu-background: var(--color-surface-variant);
-  --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);
-  --color-overlay-shadow: #00000039;
-
-  /* ProgressIndicator */
-  --color-progress-indicator-fill: var(--color-primary);
-  --color-progress-indicator-background: var(--color-gray-300);
-
-  /* Property */
-  --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);
-  --color-stepperbar-dot-disabled: var(--color-description);
-
-  /* Table */
-  --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: 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;
-  --color-tag-yellow-background: #FEEACB;
-  --color-tag-yellow-text: #C79345;
-  --color-tag-yellow-icon: #C79345;
-  --color-tag-red-background: #FEE0DD;
-  --color-tag-red-text: #D67268;
-  --color-tag-red-icon: #D67268;
-  --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);
-  --color-text-image-primary-text: var(--color-white);
-  --color-text-image-secondary-background: var(--color-blue-500);
-  --color-text-image-secondary-text: var(--color-white);
-  --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-primary);
-  --color-outline: var(--color-gray-100);
-  --color-outline-variant: var(--color-gray-200);
-}
-
-/* non light-theme overrides */
-@layer base {
-  /* dark theme */
-  @variant dark {
-    /* Button Solid */
-    --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: #3F3F3F33;
-    --color-button-text-neutral-text: var(--color-gray-100);
-    --color-button-text-neutral-icon: var(--color-gray-100);
-
-    /* Property */
-    --color-property-title-background: var(--color-gray-750);
-
-    /* ProgressIndicator */
-    --color-progress-indicator-background: var(--color-gray-700);
-
-    /* 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);
-
-    /* Other */
-    --color-border: var(--color-gray-600);
-    --color-divider: var(--color-gray-700);
-    --color-focus: var(--color-primary);
-    --color-outline: var(--color-gray-700);
-    --color-outline-variant: var(--color-gray-600);
-  }
-}