@hotosm/ui 0.8.1 → 0.9.1

package/dist/themes/hot.css

@@ -6,278 +6,285 @@
 :host,
 /* .hot-theme-light allows scoping if you apply that class conditionally */
 .hot-theme-light {
-   /*
+  /*
   * Color primitives
   */
 
-   /* red - red */
-
-   --hot-color-red-950: #A52A28;
-   --hot-color-red-900: #B9302D;
-   --hot-color-red-800: #B83032;
-   --hot-color-red-700: #C53639;
-   --hot-color-red-600: #D73F3F;
-   --hot-color-red-500: #D43F3F;
-   --hot-color-red-400: #ED5C5E;
-   --hot-color-red-300: #E27A7D;
-   --hot-color-red-200: #EC9EA1;
-  --hot-color-red-100: #FED1D7;
-   --hot-color-red-50: #FEECEF;
-
-   /* rose - persian plum */
-
-   --hot-color-rose-950: #3E030B;
-   --hot-color-rose-900: #4B040E;
-   --hot-color-rose-800: #5C1517;
-   --hot-color-rose-700: #6B231D;
-   --hot-color-rose-600: #7C2E26;
-   --hot-color-rose-500: #7D463F;
-   --hot-color-rose-400: #9E6960;
-   --hot-color-rose-300: #B3837B;
-   --hot-color-rose-200: #CFA59E;
-   --hot-color-rose-100: #EAC7C0;
-   --hot-color-rose-50: #FFE6DE;
-
-   /* yellow - bright yellow */
-
-   --hot-color-yellow-950: #CC6508;
-   --hot-color-yellow-900: #E8750C;
-   --hot-color-yellow-800: #F77D0F;
-   --hot-color-yellow-700: #FAA71E;
-   --hot-color-yellow-600: #FCBF26;
-   --hot-color-yellow-500: #FED82E;
-   --hot-color-yellow-400: #FAE62E;
-   --hot-color-yellow-300: #FDEB51;
-   --hot-color-yellow-200: #FFF072;
-  --hot-color-yellow-100: #FFEBCF;
-   --hot-color-yellow-50: #FFF9C3;
-
-   /* blue - space cadet */
-
-   --hot-color-blue-950: #111C31;
-   --hot-color-blue-900: #182642;
-   --hot-color-blue-800: #20365B;
-   --hot-color-blue-700: #263F68;
-   --hot-color-blue-600: #2E4873;
-   --hot-color-blue-500: #344F7B;
-   --hot-color-blue-400: #53688B;
-   --hot-color-blue-300: #71829E;
-   --hot-color-blue-200: #97A5BA;
-   --hot-color-blue-100: #BFC8D6;
-   --hot-color-blue-50: #E6E9EE;
-
-   /* cyan - cadet blue */
-
-   --hot-color-cyan-950: #2B514F;
-   --hot-color-cyan-900: #366361;
-   --hot-color-cyan-800: #408789;
-   --hot-color-cyan-700: #459BA0;
-   --hot-color-cyan-600: #4BB1B9;
-   --hot-color-cyan-500: #50C1CB;
-   --hot-color-cyan-400: #58CBD1;
-   --hot-color-cyan-300: #6AD4D9;
-   --hot-color-cyan-200: #8FE1E3;
-   --hot-color-cyan-100: #B9EDED;
-   --hot-color-cyan-50: #E3F8F8;
-
-   /* gray - dark slate gray */
-
-   --hot-color-gray-950: #2C3038;
-   --hot-color-gray-900: #404248;
-   --hot-color-gray-800: #515057;
-   --hot-color-gray-700: #615F66;
-   --hot-color-gray-600: #716F73;
-   --hot-color-gray-500: #828085;
-   --hot-color-gray-400: #9A969B;
-   --hot-color-gray-300: #B3B0B3;
-   --hot-color-gray-200: #C4C3C5;
-   --hot-color-gray-100: #E1E0E1;
-   --hot-color-gray-50: #F3F3F3;
-
-      /*
+  /* red - red */
+
+  --hot-color-red-950: #a52a28;
+  --hot-color-red-900: #b9302d;
+  --hot-color-red-800: #b83032;
+  --hot-color-red-700: #c53639;
+  --hot-color-red-600: #d73f3f;
+  --hot-color-red-500: #d43f3f;
+  --hot-color-red-400: #ed5c5e;
+  --hot-color-red-300: #e27a7d;
+  --hot-color-red-200: #ec9ea1;
+  --hot-color-red-100: #fed1d7;
+  --hot-color-red-50: #feecef;
+
+  /* rose - persian plum */
+
+  --hot-color-rose-950: #3e030b;
+  --hot-color-rose-900: #4b040e;
+  --hot-color-rose-800: #5c1517;
+  --hot-color-rose-700: #6b231d;
+  --hot-color-rose-600: #7c2e26;
+  --hot-color-rose-500: #7d463f;
+  --hot-color-rose-400: #9e6960;
+  --hot-color-rose-300: #b3837b;
+  --hot-color-rose-200: #cfa59e;
+  --hot-color-rose-100: #eac7c0;
+  --hot-color-rose-50: #ffe6de;
+
+  /* yellow - bright yellow */
+
+  --hot-color-yellow-950: #cc6508;
+  --hot-color-yellow-900: #e8750c;
+  --hot-color-yellow-800: #f77d0f;
+  --hot-color-yellow-700: #faa71e;
+  --hot-color-yellow-600: #fcbf26;
+  --hot-color-yellow-500: #fed82e;
+  --hot-color-yellow-400: #fae62e;
+  --hot-color-yellow-300: #fdeb51;
+  --hot-color-yellow-200: #fff072;
+  --hot-color-yellow-100: #ffebcf;
+  --hot-color-yellow-50: #fff9c3;
+
+  /* blue - space cadet */
+
+  --hot-color-blue-950: #111c31;
+  --hot-color-blue-900: #182642;
+  --hot-color-blue-800: #20365b;
+  --hot-color-blue-700: #263f68;
+  --hot-color-blue-600: #2e4873;
+  --hot-color-blue-500: #344f7b;
+  --hot-color-blue-400: #53688b;
+  --hot-color-blue-300: #71829e;
+  --hot-color-blue-200: #97a5ba;
+  --hot-color-blue-100: #bfc8d6;
+  --hot-color-blue-50: #e6e9ee;
+
+  /* cyan - cadet blue */
+
+  --hot-color-cyan-950: #2b514f;
+  --hot-color-cyan-900: #366361;
+  --hot-color-cyan-800: #408789;
+  --hot-color-cyan-700: #459ba0;
+  --hot-color-cyan-600: #4bb1b9;
+  --hot-color-cyan-500: #50c1cb;
+  --hot-color-cyan-400: #58cbd1;
+  --hot-color-cyan-300: #6ad4d9;
+  --hot-color-cyan-200: #8fe1e3;
+  --hot-color-cyan-100: #b9eded;
+  --hot-color-cyan-50: #e3f8f8;
+
+  /* gray - dark slate gray */
+
+  --hot-color-gray-950: #2c3038;
+  --hot-color-gray-900: #404248;
+  --hot-color-gray-800: #515057;
+  --hot-color-gray-700: #615f66;
+  --hot-color-gray-600: #716f73;
+  --hot-color-gray-500: #828085;
+  --hot-color-gray-400: #9a969b;
+  --hot-color-gray-300: #b3b0b3;
+  --hot-color-gray-200: #c4c3c5;
+  --hot-color-gray-100: #e1e0e1;
+  --hot-color-gray-50: #f3f3f3;
+
+  /*
    * Semantic Colors
    * These map primitive colors to semantic meanings
    */
 
-   /* Primary colors (HOT brand color - red) */
-   --hot-color-primary-950: var(--hot-color-red-950);
-   --hot-color-primary-900: var(--hot-color-red-900);
-   --hot-color-primary-800: var(--hot-color-red-800);
-   --hot-color-primary-700: var(--hot-color-red-700);
-   --hot-color-primary-600: var(--hot-color-red-600);
-   --hot-color-primary-500: var(--hot-color-red-500);
-   --hot-color-primary-400: var(--hot-color-red-400);
-   --hot-color-primary-300: var(--hot-color-red-300);
-   --hot-color-primary-200: var(--hot-color-red-200);
-   --hot-color-primary-100: var(--hot-color-red-100);
-   --hot-color-primary-50: var(--hot-color-red-50);
-
-   /* Danger colors (red) */
-   --hot-color-danger-950: var(--hot-color-red-950);
-   --hot-color-danger-900: var(--hot-color-red-900);
-   --hot-color-danger-800: var(--hot-color-red-800);
-   --hot-color-danger-700: var(--hot-color-red-700);
-   --hot-color-danger-600: var(--hot-color-red-600);
-   --hot-color-danger-500: var(--hot-color-red-500);
-   --hot-color-danger-400: var(--hot-color-red-400);
-   --hot-color-danger-300: var(--hot-color-red-300);
-   --hot-color-danger-200: var(--hot-color-red-200);
-   --hot-color-danger-100: var(--hot-color-red-100);
-   --hot-color-danger-50: var(--hot-color-red-50);
-
-   /* Warning colors (yellow) */
-   --hot-color-warning-950: var(--hot-color-yellow-950);
-   --hot-color-warning-900: var(--hot-color-yellow-900);
-   --hot-color-warning-800: var(--hot-color-yellow-800);
-   --hot-color-warning-700: var(--hot-color-yellow-700);
-   --hot-color-warning-600: var(--hot-color-yellow-600);
-   --hot-color-warning-500: var(--hot-color-yellow-500);
-   --hot-color-warning-400: var(--hot-color-yellow-400);
-   --hot-color-warning-300: var(--hot-color-yellow-300);
-   --hot-color-warning-200: var(--hot-color-yellow-200);
-   --hot-color-warning-100: var(--hot-color-yellow-100);
-   --hot-color-warning-50: var(--hot-color-yellow-50);
+  /* Primary colors (HOT brand color - red) */
+  --hot-color-primary-950: var(--hot-color-red-950);
+  --hot-color-primary-900: var(--hot-color-red-900);
+  --hot-color-primary-800: var(--hot-color-red-800);
+  --hot-color-primary-700: var(--hot-color-red-700);
+  --hot-color-primary-600: var(--hot-color-red-600);
+  --hot-color-primary-500: var(--hot-color-red-500);
+  --hot-color-primary-400: var(--hot-color-red-400);
+  --hot-color-primary-300: var(--hot-color-red-300);
+  --hot-color-primary-200: var(--hot-color-red-200);
+  --hot-color-primary-100: var(--hot-color-red-100);
+  --hot-color-primary-50: var(--hot-color-red-50);
+
+  /* Danger colors (red) */
+  --hot-color-danger-950: var(--hot-color-red-950);
+  --hot-color-danger-900: var(--hot-color-red-900);
+  --hot-color-danger-800: var(--hot-color-red-800);
+  --hot-color-danger-700: var(--hot-color-red-700);
+  --hot-color-danger-600: var(--hot-color-red-600);
+  --hot-color-danger-500: var(--hot-color-red-500);
+  --hot-color-danger-400: var(--hot-color-red-400);
+  --hot-color-danger-300: var(--hot-color-red-300);
+  --hot-color-danger-200: var(--hot-color-red-200);
+  --hot-color-danger-100: var(--hot-color-red-100);
+  --hot-color-danger-50: var(--hot-color-red-50);
+
+  /* Warning colors (yellow) */
+  --hot-color-warning-950: var(--hot-color-yellow-950);
+  --hot-color-warning-900: var(--hot-color-yellow-900);
+  --hot-color-warning-800: var(--hot-color-yellow-800);
+  --hot-color-warning-700: var(--hot-color-yellow-700);
+  --hot-color-warning-600: var(--hot-color-yellow-600);
+  --hot-color-warning-500: var(--hot-color-yellow-500);
+  --hot-color-warning-400: var(--hot-color-yellow-400);
+  --hot-color-warning-300: var(--hot-color-yellow-300);
+  --hot-color-warning-200: var(--hot-color-yellow-200);
+  --hot-color-warning-100: var(--hot-color-yellow-100);
+  --hot-color-warning-50: var(--hot-color-yellow-50);
 
   /* Success colors (green) */
-  --hot-color-success-950: #2B514F;
+  --hot-color-success-950: #2b514f;
   --hot-color-success-900: #366361;
   --hot-color-success-800: #408789;
-  --hot-color-success-700: #459BA0;
-  --hot-color-success-600: #4BB1B9;
-  --hot-color-success-500: #50C1CB;
-  --hot-color-success-400: #58CBD1;
-  --hot-color-success-300: #6AD4D9;
-  --hot-color-success-200: #8FE1E3;
-  --hot-color-success-100: #B9EDED;
-  --hot-color-success-50: #E3F8F8;
-
-   /* Neutral colors (gray) */
-   --hot-color-neutral-1000: #ffffff;
-   --hot-color-neutral-950: var(--hot-color-gray-950);
-   --hot-color-neutral-900: var(--hot-color-gray-900);
-   --hot-color-neutral-800: var(--hot-color-gray-800);
-   --hot-color-neutral-700: var(--hot-color-gray-700);
-   --hot-color-neutral-600: var(--hot-color-gray-600);
-   --hot-color-neutral-500: var(--hot-color-gray-500);
-   --hot-color-neutral-400: var(--hot-color-gray-400);
-   --hot-color-neutral-300: var(--hot-color-gray-300);
-   --hot-color-neutral-200: var(--hot-color-gray-200);
-   --hot-color-neutral-100: var(--hot-color-gray-100);
-   --hot-color-neutral-50: var(--hot-color-gray-50);
-   --hot-color-neutral-0: #000000;
-
-
-   /*
+  --hot-color-success-700: #459ba0;
+  --hot-color-success-600: #4bb1b9;
+  --hot-color-success-500: #50c1cb;
+  --hot-color-success-400: #58cbd1;
+  --hot-color-success-300: #6ad4d9;
+  --hot-color-success-200: #8fe1e3;
+  --hot-color-success-100: #b9eded;
+  --hot-color-success-50: #e3f8f8;
+
+  /* Neutral colors (gray) */
+  --hot-color-neutral-1000: #ffffff;
+  --hot-color-neutral-950: var(--hot-color-gray-950);
+  --hot-color-neutral-900: var(--hot-color-gray-900);
+  --hot-color-neutral-800: var(--hot-color-gray-800);
+  --hot-color-neutral-700: var(--hot-color-gray-700);
+  --hot-color-neutral-600: var(--hot-color-gray-600);
+  --hot-color-neutral-500: var(--hot-color-gray-500);
+  --hot-color-neutral-400: var(--hot-color-gray-400);
+  --hot-color-neutral-300: var(--hot-color-gray-300);
+  --hot-color-neutral-200: var(--hot-color-gray-200);
+  --hot-color-neutral-100: var(--hot-color-gray-100);
+  --hot-color-neutral-50: var(--hot-color-gray-50);
+  --hot-color-neutral-0: #000000;
+
+  /*
    * Typography
    */
 
-   /* Fonts */
-   --hot-font-sans: Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
-   --hot-font-sans-variant: 'Barlow';
-   --hot-font-sans-variant-condensed: 'Barlow Condensed';
-   --hot-font-serif: Georgia, 'Times New Roman', serif;
-   --hot-font-mono: Menlo, Monaco, Consolas, 'Courier New', monospace, Consolas, 'Liberation Mono', Menlo, monospace;
-
-   /* Font sizes */
-   --hot-font-size-2x-small: 0.625rem;
-   /* 10px */
-   --hot-font-size-x-small: 0.75rem;
-   /* 12px */
-   --hot-font-size-small: 0.875rem;
-   /* 14px */
-   --hot-font-size-medium: 1rem;
-   /* 16px */
-   --hot-font-size-large: 1.25rem;
-   /* 20px */
-   --hot-font-size-x-large: 1.5rem;
-   /* 24px */
-   --hot-font-size-2x-large: 2.25rem;
-   /* 36px */
-   --hot-font-size-3x-large: 3rem;
-   /* 48px */
-   --hot-font-size-4x-large: 4.5rem;
-   /* 72px */
-
-   /* Font weights */
-   --hot-font-weight-light: 300;
-   --hot-font-weight-normal: 400;
-   --hot-font-weight-semibold: 500;
-   --hot-font-weight-bold: 700;
-
-   /* Letter spacings */
-   --hot-letter-spacing-denser: -0.03em;
-   --hot-letter-spacing-dense: -0.015em;
-   --hot-letter-spacing-normal: normal;
-   --hot-letter-spacing-loose: 0.075em;
-   --hot-letter-spacing-looser: 0.15em;
-
-   /* Line heights */
-   --hot-line-height-denser: 1;
-   --hot-line-height-dense: 1.4;
-   --hot-line-height-normal: 1.8;
-   --hot-line-height-loose: 2.2;
-   --hot-line-height-looser: 2.6;
-
-   /*
+  /* Fonts */
+  --hot-font-sans:
+    Archivo, -apple-system, Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol";
+  --hot-font-sans-variant: "Barlow";
+  --hot-font-sans-variant-condensed: "Barlow Condensed";
+  --hot-font-serif: Georgia, "Times New Roman", serif;
+  --hot-font-mono:
+    Menlo, Monaco, Consolas, "Courier New", monospace, Consolas, "Liberation Mono", Menlo, monospace;
+
+  /* Font sizes */
+  --hot-font-size-2x-small: 0.625rem;
+  /* 10px */
+  --hot-font-size-x-small: 0.75rem;
+  /* 12px */
+  --hot-font-size-small: 0.875rem;
+  /* 14px */
+  --hot-font-size-medium: 1rem;
+  /* 16px */
+  --hot-font-size-large: 1.25rem;
+  /* 20px */
+  --hot-font-size-x-large: 1.5rem;
+  /* 24px */
+  --hot-font-size-2x-large: 2.25rem;
+  /* 36px */
+  --hot-font-size-3x-large: 3rem;
+  /* 48px */
+  --hot-font-size-4x-large: 4.5rem;
+  /* 72px */
+
+  /* Font weights */
+  --hot-font-weight-light: 300;
+  --hot-font-weight-normal: 400;
+  --hot-font-weight-semibold: 500;
+  --hot-font-weight-bold: 700;
+
+  /* Letter spacings */
+  --hot-letter-spacing-denser: -0.03em;
+  --hot-letter-spacing-dense: -0.015em;
+  --hot-letter-spacing-normal: normal;
+  --hot-letter-spacing-loose: 0.075em;
+  --hot-letter-spacing-looser: 0.15em;
+
+  /* Line heights */
+  --hot-line-height-denser: 1;
+  --hot-line-height-dense: 1.4;
+  --hot-line-height-normal: 1.8;
+  --hot-line-height-loose: 2.2;
+  --hot-line-height-looser: 2.6;
+
+  /*
    * Spacings
    */
 
-   --hot-spacing-3x-small: 0.125rem;
-   /* 2px */
-   --hot-spacing-2x-small: 0.25rem;
-   /* 4px */
-   --hot-spacing-x-small: 0.5rem;
-   /* 8px */
-   --hot-spacing-small: 0.75rem;
-   /* 12px */
-   --hot-spacing-medium: 1rem;
-   /* 16px */
-   --hot-spacing-large: 1.25rem;
-   /* 20px */
-   --hot-spacing-x-large: 1.75rem;
-   /* 28px */
-   --hot-spacing-2x-large: 2.25rem;
-   /* 36px */
-   --hot-spacing-3x-large: 3rem;
-   /* 48px */
-   --hot-spacing-4x-large: 4.5rem;
-   /* 72px */
-
-   /*
+  --hot-spacing-3x-small: 0.125rem;
+  /* 2px */
+  --hot-spacing-2x-small: 0.25rem;
+  /* 4px */
+  --hot-spacing-x-small: 0.5rem;
+  /* 8px */
+  --hot-spacing-small: 0.75rem;
+  /* 12px */
+  --hot-spacing-medium: 1rem;
+  /* 16px */
+  --hot-spacing-large: 1.25rem;
+  /* 20px */
+  --hot-spacing-x-large: 1.75rem;
+  /* 28px */
+  --hot-spacing-2x-large: 2.25rem;
+  /* 36px */
+  --hot-spacing-3x-large: 3rem;
+  /* 48px */
+  --hot-spacing-4x-large: 4.5rem;
+  /* 72px */
+
+  /*
    * Border radius
    */
 
-   --hot-border-radius-small: 0.1875rem;
-   /* 3px */
-   --hot-border-radius-medium: 0.25rem;
-   /* 4px */
-   --hot-border-radius-large: 0.5rem;
-   /* 8px */
-   --hot-border-radius-x-large: 1rem;
-   /* 16px */
-   --hot-border-radius-circle: 50%;
-   --hot-border-radius-pill: 9999px;
+  --hot-border-radius-small: 0.1875rem;
+  /* 3px */
+  --hot-border-radius-medium: 0.25rem;
+  /* 4px */
+  --hot-border-radius-large: 0.5rem;
+  /* 8px */
+  --hot-border-radius-x-large: 1rem;
+  /* 16px */
+  --hot-border-radius-circle: 50%;
+  --hot-border-radius-pill: 9999px;
 }
 
 .gradient-button::part(base) {
-   background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
-   border: solid 1px var(--wa-color-purple-50);
-   transition: transform 100ms, box-shadow 100ms;
- }
-
- .gradient-button::part(base):hover {
-   box-shadow: var(--wa-shadow-m);
-   transform: translateY(-3px);
- }
-
- .gradient-button::part(base):active {
-   box-shadow: inset var(--wa-shadow-s);
-   transform: translateY(0);
- }
+  background: linear-gradient(
+    217deg,
+    var(--wa-color-indigo-50),
+    var(--wa-color-purple-50),
+    var(--wa-color-red-50)
+  );
+  border: solid 1px var(--wa-color-purple-50);
+  transition:
+    transform 100ms,
+    box-shadow 100ms;
+}
 
- .gradient-button::part(label) {
-   color: white;
-   text-shadow: rgb(0 0 0 / 0.3) 0 -1px;
- }
+.gradient-button::part(base):hover {
+  box-shadow: var(--wa-shadow-m);
+  transform: translateY(-3px);
+}
 
+.gradient-button::part(base):active {
+  box-shadow: inset var(--wa-shadow-s);
+  transform: translateY(0);
+}
 
+.gradient-button::part(label) {
+  color: white;
+  text-shadow: rgb(0 0 0 / 0.3) 0 -1px;
+}

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.8.1",
+  "version": "0.9.1",
   "description": "Shared UI components with HOT theming.",
   "homepage": "https://github.com/hotosm/ui#readme",
+  "license": "AGPL-3.0-only",
   "author": {
     "name": "HOTOSM",
     "email": "sysadmin@hotosm.org"
@@ -29,7 +30,13 @@
       "url": "https://github.com/tbssnch"
     }
   ],
-  "license": "AGPL-3.0-only",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/hotosm/ui.git"
+  },
+  "files": [
+    "dist"
+  ],
   "type": "module",
   "types": "dist/hotosm-ui.d.ts",
   "exports": {
@@ -43,19 +50,6 @@
     "./dist/style.css": "./dist/style.css",
     "./dist/style-core.css": "./dist/style-core.css"
   },
-  "files": [
-    "dist"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/hotosm/ui.git"
-  },
-  "engines": {
-    "node": ">=18.0.0"
-  },
-  "peerDependencies": {
-    "@awesome.me/webawesome": "3.2.1"
-  },
   "devDependencies": {
     "@awesome.me/webawesome": "3.2.1",
     "@storybook/addon-docs": "^9.0.18",
@@ -79,6 +73,12 @@
     "user-agent-data-types": "^0.4.2",
     "vitest": "^4.0.10"
   },
+  "peerDependencies": {
+    "@awesome.me/webawesome": "3.2.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
   "scripts": {
     "dev": "storybook dev -p 3001 --no-open",
     "build:docs": "storybook build --output-dir docs",