@helpwave/hightide 0.2.0 → 0.4.0

package/dist/style/uncompiled/globals.css

@@ -5,218 +5,3 @@
 
 /* theme */
 @import './theme/index.css';
-
-/* components */
-@import './typography.css';
-
-/* The theme variables */
-@theme {
-  /*
-   * breakpoints
-   */
-  --breakpoint-tablet: 48rem; /* 768px for 16px font-size */
-  --breakpoint-desktop: 64rem; /* 1024px for 16px font-size*/
-}
-
-@layer components {
-  .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-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 {
-    @apply flex-row-1 items-center justify-center px-2 py-1 rounded-md;
-  }
-
-  .chip-full {
-    @apply flex-row-1 items-center justify-center px-2 py-1 rounded-full;
-  }
-
-  .section-padding-x {
-    @apply px-6 tablet:px-12 desktop:px-24;
-  }
-
-  .section-padding-y {
-    @apply py-16;
-  }
-
-  .section-padding {
-    @apply px-6 tablet:px-12 desktop:px-24 py-16;
-  }
-
-  .link {
-    @apply decoration-3 p-2 hover:underline focus:underline font-bold text-lg rounded;
-  }
-
-  * {
-    @apply border-border list-none;
-
-    @variant dark {
-      color-scheme: dark;
-    }
-  }
-
-  html {
-    @apply bg-background text-on-background;
-  }
-
-  button {
-    @apply cursor-pointer text-nowrap;
-  }
-
-  input {
-    @apply placeholder-placeholder
-  }
-
-  *: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;
-  }
-
-  *:focus-visible {
-    @apply outline-2 outline-focus outline-offset-2;
-  }
-
-  .focus-style-within:focus-within {
-    @apply outline-2 outline-focus;
-  }
-
-  .focus-style-none {
-    @apply focus-visible:outline-0 focus-within:outline-0 outline-offset-0;
-  }
-
-  /**
-   * 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/breakpoints.css

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

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

@@ -29,6 +29,7 @@
   /* Green */
   --color-green-100: #D1EFD8;
   --color-green-500: #69CB81;
+  --color-green-600: #61bf78;
   --color-green-700: #53a567;
   --color-green-900: #2C5536;
 
@@ -36,6 +37,7 @@
   --color-orange-100: #FBECD9;
   --color-orange-200: #F7D8B3;
   --color-orange-500: #EA9E40;
+  --color-orange-600: #c18133;
 
   /* Purple */
   --color-purple-50: #EFE6FD;

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

@@ -0,0 +1,100 @@
+@import './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);
+
+  /* Carousel */
+  --color-carousel-dot-active: var(--color-primary);
+  --color-carousel-dot-disabled: var(--color-disabled);
+
+  /* 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));
+
+  /* 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 {
+    /* 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);
+
+    /* 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);
+  }
+}

package/dist/style/uncompiled/theme/colors/index.css

@@ -0,0 +1,5 @@
+@import "./variants.css";
+@import "./basic.css";
+@import "./semantic.css";
+@import "./component.css";
+@import "./utilities.css";

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

@@ -1,5 +1,4 @@
-@import './variants.css';
-@import './colors-basic.css';
+@import './basic.css';
 
 /*
  * default light-theme sematic colors
@@ -9,39 +8,26 @@
   --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-warning-hover: var(--color-orange-600);
 
   --color-positive: var(--color-green-500);
   --color-on-positive:  var(--color-white);
+  --color-positive-hover: var(--color-green-600);
 
   --color-negative: var(--color-red-500);
   --color-on-negative:  var(--color-white);
-  --color-negative-border: var(--color-negative);
+  --color-negative-hover: var(--color-red-600);
 
   --color-disabled: var(--color-gray-300);
-  --color-disabled-background: var(--color-gray-100);
+  --color-on-disabled: var(--color-gray-500);
 
   /* Surface */
   --color-surface:  var(--color-gray-50);
   --color-on-surface: var(--color-text-primary);
+  --color-surface-hover: var(--color-gray-100);
   --color-surface-variant: var(--color-white);
   --color-surface-warning: var(--color-orange-100);
 
@@ -57,8 +43,20 @@
   /* Other */
   --color-primary: var(--color-purple-500);
   --color-on-primary: var(--color-white);
-  --color-secondary: var(--color-blue-800);
+  --color-primary-hover: var(--color-purple-600);
+
+  --color-secondary: var(--color-blue-500);
   --color-on-secondary:  var(--color-white);
+  --color-secondary-hover:  var(--color-blue-600);
+
+  --color-neutral: var(--color-gray-50);
+  --color-on-neutral: var(--color-text-primary);
+  --color-neutral-hover: var(--color-gray-100);
+  --color-neutral-text: var(--color-text-primary);
+  --color-neutral-text-hover: var(--color-text-primary);
+  --color-neutral-outline: var(--color-text-primary);
+  --color-neutral-outline-hover: var(--color-gray-700);
+
   --color-highlight:  var(--color-blue-500);
 }
 
@@ -76,10 +74,11 @@
     --color-negative: var(--color-red-500);
 
     --color-disabled: var(--color-gray-500);
-    --color-disabled-background: var(--color-gray-700);
+    --color-on-disabled: var(--color-gray-300);
 
     /* Surface */
     --color-surface: var(--color-gray-800);
+    --color-surface-hover: var(--color-gray-700);
     --color-surface-variant: var(--color-gray-900);
 
     /* Text */
@@ -92,5 +91,9 @@
 
     /* Other */
     --color-primary: var(--color-purple-400);
+
+    --color-neutral: var(--color-gray-700);
+    --color-neutral-hover: var(--color-gray-800);
+    --color-neutral-outline-hover: var(--color-gray-200);
   }
 }

package/dist/style/uncompiled/theme/colors/utilities.css

@@ -0,0 +1,65 @@
+@utility primary {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-primary);
+  --coloring-on-color: var(--color-on-primary);
+  --coloring-hover: var(--color-primary-hover);
+}
+
+@utility secondary {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-secondary);
+  --coloring-on-color: var(--color-on-secondary);
+  --coloring-hover: var(--color-secondary-hover);
+}
+
+@utility positive {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-positive);
+  --coloring-on-color: var(--color-on-positive);
+  --coloring-hover: var(--color-positive-hover);
+}
+
+@utility negative {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-negative);
+  --coloring-on-color: var(--color-on-negative);
+  --coloring-hover: var(--color-negative-hover);
+}
+
+@utility warning {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-warning);
+  --coloring-on-color: var(--color-on-warning);
+  --coloring-hover: var(--color-warning-hover);
+}
+
+@utility neutral {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-neutral);
+  --coloring-on-color: var(--color-on-neutral);
+  --coloring-hover: var(--color-neutral-hover);
+  --coloring-text: var(--color-neutral-text);
+  --coloring-text-hover: var(--color-neutral-text-hover);
+  --coloring-outline: var(--color-neutral-outline);
+  --coloring-outline-hover: var(--color-neutral-outline-hover);
+}
+
+@utility disabled {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-disabled);
+  --coloring-on-color: var(--color-on-disabled);
+  --coloring-hover: var(--color-disabled);
+  --coloring-text-hover: transparent;
+}
+
+@utility description {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-description);
+}
+
+@utility surface {
+  @apply reset-coloring-variables;
+  --coloring-color: var(--color-surface);
+  --coloring-on-color: var(--color-on-surface);
+  --coloring-hover: var(--color-surface-hover);
+}