@hotosm/ui 0.9.0 → 0.9.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (48) hide show
  1. package/README.md +91 -66
  2. package/dist/chunks/{chunk.P6GWPFCT.js → chunk.24HG5LKA.js} +1 -1
  3. package/dist/chunks/{chunk.WELXILIP.js → chunk.3AWIVJTF.js} +1 -1
  4. package/dist/chunks/{chunk.FN6G7X23.js → chunk.AA57UJ2D.js} +21 -11
  5. package/dist/chunks/{chunk.JYPMFVPO.js → chunk.CCOEI6XU.js} +1 -1
  6. package/dist/chunks/{chunk.LXN3PNAP.js → chunk.DCR6GEE6.js} +3 -4
  7. package/dist/chunks/{chunk.252GL6HT.js → chunk.L7KUSNV7.js} +1 -1
  8. package/dist/chunks/{chunk.IILWGAOM.js → chunk.MKQTK2RW.js} +1 -1
  9. package/dist/chunks/{chunk.M3LK72JN.js → chunk.N7SRHM5F.js} +1 -1
  10. package/dist/chunks/{chunk.LKMWWUYT.js → chunk.NCBKWO6J.js} +1 -1
  11. package/dist/chunks/{chunk.6JUW2IZJ.js → chunk.PESN3BZK.js} +4 -2
  12. package/dist/chunks/{chunk.ZGC6XD6L.js → chunk.TUEFHEUN.js} +7 -2
  13. package/dist/chunks/{chunk.X354U5TL.js → chunk.UVBWHOA2.js} +3 -1
  14. package/dist/chunks/{chunk.5QY2VLMG.js → chunk.V7C4W6GD.js} +1 -1
  15. package/dist/chunks/{chunk.LVC64FO7.js → chunk.ZZ7X3H3S.js} +1 -1
  16. package/dist/components/consent/consent.component.d.ts +1 -1
  17. package/dist/components/consent/consent.component.js +1 -1
  18. package/dist/components/consent/consent.d.ts +2 -2
  19. package/dist/components/consent/consent.js +1 -1
  20. package/dist/components/consent/consent.styles.js +1 -1
  21. package/dist/components/file-input-dropzone/file-input-dropzone.component.d.ts +3 -3
  22. package/dist/components/file-input-dropzone/file-input-dropzone.component.js +1 -1
  23. package/dist/components/file-input-dropzone/file-input-dropzone.d.ts +3 -3
  24. package/dist/components/file-input-dropzone/file-input-dropzone.js +1 -1
  25. package/dist/components/file-input-dropzone/file-input-dropzone.styles.js +1 -1
  26. package/dist/components/header/header.component.d.ts +2 -2
  27. package/dist/components/header/header.d.ts +2 -2
  28. package/dist/components/list-card/list-card.component.d.ts +1 -1
  29. package/dist/components/list-card/list-card.component.js +1 -1
  30. package/dist/components/list-card/list-card.d.ts +2 -2
  31. package/dist/components/list-card/list-card.js +1 -1
  32. package/dist/components/list-card/list-card.styles.js +1 -1
  33. package/dist/components/logo/logo.component.d.ts +1 -1
  34. package/dist/components/logo/logo.d.ts +2 -2
  35. package/dist/components/tool-menu/tool-menu.component.js +1 -1
  36. package/dist/components/tool-menu/tool-menu.d.ts +2 -2
  37. package/dist/components/tool-menu/tool-menu.js +1 -1
  38. package/dist/components/tool-menu/tool-menu.styles.js +1 -1
  39. package/dist/components/tracking/tracking.component.d.ts +3 -0
  40. package/dist/components/tracking/tracking.component.js +1 -1
  41. package/dist/components/tracking/tracking.d.ts +2 -2
  42. package/dist/components/tracking/tracking.js +1 -1
  43. package/dist/hotosm-ui.js +1 -1
  44. package/dist/style-core.css +1 -1
  45. package/dist/style.css +1 -1
  46. package/dist/themes/hot-wa.css +61 -61
  47. package/dist/themes/hot.css +256 -249
  48. package/package.json +15 -15
package/dist/themes/hot-wa.css CHANGED
@@ -274,16 +274,8 @@
274
274
  --wa-color-text-quiet: var(--hot-color-neutral-600);
275
275
  --wa-color-text-link: var(--hot-color-primary-600);
276
276
 
277
- --wa-color-overlay-modal: color-mix(
278
- in oklab,
279
- var(--hot-color-neutral-950) 50%,
280
- transparent
281
- );
282
- --wa-color-overlay-inline: color-mix(
283
- in oklab,
284
- var(--hot-color-neutral-200) 25%,
285
- transparent
286
- );
277
+ --wa-color-overlay-modal: color-mix(in oklab, var(--hot-color-neutral-950) 50%, transparent);
278
+ --wa-color-overlay-inline: color-mix(in oklab, var(--hot-color-neutral-200) 25%, transparent);
287
279
 
288
280
  --wa-color-shadow: color-mix(
289
281
  in oklab,
@@ -297,64 +289,72 @@
297
289
  --wa-color-mix-active: black 20%;
298
290
 
299
291
  /* Brand = HOT primary (red) */
300
- --wa-color-brand-fill-quiet: var(--wa-color-brand-95); /* primary-50 */
301
- --wa-color-brand-fill-normal: var(--wa-color-brand-90); /* primary-100 */
302
- --wa-color-brand-fill-loud: var(--wa-color-brand-50); /* primary-500 */
292
+ --wa-color-brand-fill-quiet: var(--wa-color-brand-95); /* primary-50 */
293
+ --wa-color-brand-fill-normal: var(--wa-color-brand-90); /* primary-100 */
294
+ --wa-color-brand-fill-loud: var(--wa-color-brand-50); /* primary-500 */
303
295
  --wa-color-brand-border-quiet: var(--wa-color-brand-90); /* primary-100 */
304
296
  --wa-color-brand-border-normal: var(--wa-color-brand-80); /* primary-200 */
305
- --wa-color-brand-border-loud: var(--wa-color-brand-60); /* primary-400 */
306
- --wa-color-brand-on-quiet: var(--wa-color-brand-40); /* primary-600 */
307
- --wa-color-brand-on-normal: var(--wa-color-brand-30); /* primary-700 */
297
+ --wa-color-brand-border-loud: var(--wa-color-brand-60); /* primary-400 */
298
+ --wa-color-brand-on-quiet: var(--wa-color-brand-40); /* primary-600 */
299
+ --wa-color-brand-on-normal: var(--wa-color-brand-30); /* primary-700 */
308
300
  --wa-color-brand-on-loud: white;
309
301
 
310
302
  /* Success = HOT cyan
311
303
  on-quiet/normal use darker values for sufficient contrast on light backgrounds */
312
- --wa-color-success-fill-quiet: var(--wa-color-success-95); /* success-50 */
313
- --wa-color-success-fill-normal: var(--wa-color-success-90); /* success-100 */
314
- --wa-color-success-fill-loud: var(--wa-color-success-50); /* success-500 */
304
+ --wa-color-success-fill-quiet: var(--wa-color-success-95); /* success-50 */
305
+ --wa-color-success-fill-normal: var(--wa-color-success-90); /* success-100 */
306
+ --wa-color-success-fill-loud: var(--wa-color-success-50); /* success-500 */
315
307
  --wa-color-success-border-quiet: var(--wa-color-success-90); /* success-100 */
316
308
  --wa-color-success-border-normal: var(--wa-color-success-80); /* success-200 */
317
- --wa-color-success-border-loud: var(--wa-color-success-60); /* success-400 */
318
- --wa-color-success-on-quiet: var(--wa-color-success-20); /* success-800 - a11y: cyan needs dark text */
319
- --wa-color-success-on-normal: var(--wa-color-success-20); /* success-800 */
309
+ --wa-color-success-border-loud: var(--wa-color-success-60); /* success-400 */
310
+ --wa-color-success-on-quiet: var(
311
+ --wa-color-success-20
312
+ ); /* success-800 - a11y: cyan needs dark text */
313
+ --wa-color-success-on-normal: var(--wa-color-success-20); /* success-800 */
320
314
  --wa-color-success-on-loud: white;
321
315
 
322
316
  /* Warning = HOT yellow
323
317
  on-* and on-loud use dark amber for contrast - white on bright yellow is unreadable */
324
- --wa-color-warning-fill-quiet: var(--wa-color-warning-95); /* warning-50 */
325
- --wa-color-warning-fill-normal: var(--wa-color-warning-90); /* warning-100 */
326
- --wa-color-warning-fill-loud: var(--wa-color-warning-50); /* warning-500 (#FED82E) */
318
+ --wa-color-warning-fill-quiet: var(--wa-color-warning-95); /* warning-50 */
319
+ --wa-color-warning-fill-normal: var(--wa-color-warning-90); /* warning-100 */
320
+ --wa-color-warning-fill-loud: var(--wa-color-warning-50); /* warning-500 (#FED82E) */
327
321
  --wa-color-warning-border-quiet: var(--wa-color-warning-90); /* warning-100 */
328
322
  --wa-color-warning-border-normal: var(--wa-color-warning-80); /* warning-200 */
329
- --wa-color-warning-border-loud: var(--wa-color-warning-40); /* warning-600 (amber) */
330
- --wa-color-warning-on-quiet: var(--wa-color-warning-05); /* warning-950 - a11y: yellow needs dark text */
331
- --wa-color-warning-on-normal: var(--wa-color-warning-05); /* warning-950 */
332
- --wa-color-warning-on-loud: var(--wa-color-warning-05); /* warning-950 - white on yellow = ~1:1 contrast */
323
+ --wa-color-warning-border-loud: var(--wa-color-warning-40); /* warning-600 (amber) */
324
+ --wa-color-warning-on-quiet: var(
325
+ --wa-color-warning-05
326
+ ); /* warning-950 - a11y: yellow needs dark text */
327
+ --wa-color-warning-on-normal: var(--wa-color-warning-05); /* warning-950 */
328
+ --wa-color-warning-on-loud: var(
329
+ --wa-color-warning-05
330
+ ); /* warning-950 - white on yellow = ~1:1 contrast */
333
331
 
334
332
  /* Danger = HOT red
335
333
  on-quiet/normal use darker values for accessibility */
336
- --wa-color-danger-fill-quiet: var(--wa-color-danger-95); /* danger-50 */
337
- --wa-color-danger-fill-normal: var(--wa-color-danger-90); /* danger-100 */
338
- --wa-color-danger-fill-loud: var(--wa-color-danger-50); /* danger-500 */
334
+ --wa-color-danger-fill-quiet: var(--wa-color-danger-95); /* danger-50 */
335
+ --wa-color-danger-fill-normal: var(--wa-color-danger-90); /* danger-100 */
336
+ --wa-color-danger-fill-loud: var(--wa-color-danger-50); /* danger-500 */
339
337
  --wa-color-danger-border-quiet: var(--wa-color-danger-90); /* danger-100 */
340
338
  --wa-color-danger-border-normal: var(--wa-color-danger-80); /* danger-200 */
341
- --wa-color-danger-border-loud: var(--wa-color-danger-60); /* danger-400 */
342
- --wa-color-danger-on-quiet: var(--wa-color-danger-05); /* danger-950 - a11y */
343
- --wa-color-danger-on-normal: var(--wa-color-danger-05); /* danger-950 */
339
+ --wa-color-danger-border-loud: var(--wa-color-danger-60); /* danger-400 */
340
+ --wa-color-danger-on-quiet: var(--wa-color-danger-05); /* danger-950 - a11y */
341
+ --wa-color-danger-on-normal: var(--wa-color-danger-05); /* danger-950 */
344
342
  --wa-color-danger-on-loud: white;
345
343
 
346
344
  /* Neutral = HOT gray (secondary button colour)
347
345
  fill-loud uses neutral-200 (light gray) for a secondary button feel;
348
346
  on-loud uses neutral-950 (dark text) for contrast on light fill */
349
- --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); /* neutral-50 */
350
- --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); /* neutral-100 */
351
- --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); /* neutral-200 */
347
+ --wa-color-neutral-fill-quiet: var(--wa-color-neutral-95); /* neutral-50 */
348
+ --wa-color-neutral-fill-normal: var(--wa-color-neutral-90); /* neutral-100 */
349
+ --wa-color-neutral-fill-loud: var(--wa-color-neutral-80); /* neutral-200 */
352
350
  --wa-color-neutral-border-quiet: var(--wa-color-neutral-90); /* neutral-100 */
353
351
  --wa-color-neutral-border-normal: var(--wa-color-neutral-80); /* neutral-200 */
354
- --wa-color-neutral-border-loud: var(--wa-color-neutral-60); /* neutral-400 */
355
- --wa-color-neutral-on-quiet: var(--wa-color-neutral-05); /* neutral-950 */
356
- --wa-color-neutral-on-normal: var(--wa-color-neutral-05); /* neutral-950 */
357
- --wa-color-neutral-on-loud: var(--wa-color-neutral-05); /* neutral-950 - dark text on light gray fill */
352
+ --wa-color-neutral-border-loud: var(--wa-color-neutral-60); /* neutral-400 */
353
+ --wa-color-neutral-on-quiet: var(--wa-color-neutral-05); /* neutral-950 */
354
+ --wa-color-neutral-on-normal: var(--wa-color-neutral-05); /* neutral-950 */
355
+ --wa-color-neutral-on-loud: var(
356
+ --wa-color-neutral-05
357
+ ); /* neutral-950 - dark text on light gray fill */
358
358
  /* #endregion */
359
359
  }
360
360
 
@@ -375,21 +375,21 @@
375
375
 
376
376
  /* Font sizes - fixed values to match HOT scale */
377
377
  --wa-font-size-2xs: var(--hot-font-size-2x-small); /* 10px */
378
- --wa-font-size-xs: var(--hot-font-size-x-small); /* 12px */
379
- --wa-font-size-s: var(--hot-font-size-small); /* 14px */
380
- --wa-font-size-m: var(--hot-font-size-medium); /* 16px */
381
- --wa-font-size-l: var(--hot-font-size-large); /* 20px */
382
- --wa-font-size-xl: var(--hot-font-size-x-large); /* 24px */
378
+ --wa-font-size-xs: var(--hot-font-size-x-small); /* 12px */
379
+ --wa-font-size-s: var(--hot-font-size-small); /* 14px */
380
+ --wa-font-size-m: var(--hot-font-size-medium); /* 16px */
381
+ --wa-font-size-l: var(--hot-font-size-large); /* 20px */
382
+ --wa-font-size-xl: var(--hot-font-size-x-large); /* 24px */
383
383
  --wa-font-size-2xl: var(--hot-font-size-2x-large); /* 36px */
384
384
  --wa-font-size-3xl: var(--hot-font-size-3x-large); /* 48px */
385
385
  --wa-font-size-4xl: var(--hot-font-size-4x-large); /* 72px */
386
386
  /* wa-font-size-scale, wa-font-size-smaller/larger use calc() - no override */
387
387
 
388
388
  /* Font weights */
389
- --wa-font-weight-light: var(--hot-font-weight-light); /* 300 */
390
- --wa-font-weight-normal: var(--hot-font-weight-normal); /* 400 */
389
+ --wa-font-weight-light: var(--hot-font-weight-light); /* 300 */
390
+ --wa-font-weight-normal: var(--hot-font-weight-normal); /* 400 */
391
391
  --wa-font-weight-semibold: var(--hot-font-weight-semibold); /* 500 */
392
- --wa-font-weight-bold: var(--hot-font-weight-bold); /* 700 */
392
+ --wa-font-weight-bold: var(--hot-font-weight-bold); /* 700 */
393
393
 
394
394
  /* Functional font weights */
395
395
  --wa-font-weight-body: var(--wa-font-weight-normal);
@@ -399,28 +399,28 @@
399
399
  --wa-font-weight-action: var(--wa-font-weight-semibold);
400
400
 
401
401
  /* Line heights */
402
- --wa-line-height-condensed: var(--hot-line-height-dense); /* 1.4 */
403
- --wa-line-height-normal: var(--hot-line-height-normal); /* 1.8 */
404
- --wa-line-height-expanded: var(--hot-line-height-loose); /* 2.2 */
402
+ --wa-line-height-condensed: var(--hot-line-height-dense); /* 1.4 */
403
+ --wa-line-height-normal: var(--hot-line-height-normal); /* 1.8 */
404
+ --wa-line-height-expanded: var(--hot-line-height-loose); /* 2.2 */
405
405
  /* #endregion */
406
406
 
407
407
  /* #region Spacing */
408
408
  --wa-space-3xs: var(--hot-spacing-3x-small); /* 2px */
409
409
  --wa-space-2xs: var(--hot-spacing-2x-small); /* 4px */
410
- --wa-space-xs: var(--hot-spacing-x-small); /* 8px */
411
- --wa-space-s: var(--hot-spacing-small); /* 12px */
412
- --wa-space-m: var(--hot-spacing-medium); /* 16px */
413
- --wa-space-l: var(--hot-spacing-large); /* 20px */
414
- --wa-space-xl: var(--hot-spacing-x-large); /* 28px */
410
+ --wa-space-xs: var(--hot-spacing-x-small); /* 8px */
411
+ --wa-space-s: var(--hot-spacing-small); /* 12px */
412
+ --wa-space-m: var(--hot-spacing-medium); /* 16px */
413
+ --wa-space-l: var(--hot-spacing-large); /* 20px */
414
+ --wa-space-xl: var(--hot-spacing-x-large); /* 28px */
415
415
  --wa-space-2xl: var(--hot-spacing-2x-large); /* 36px */
416
416
  --wa-space-3xl: var(--hot-spacing-3x-large); /* 48px */
417
417
  --wa-space-4xl: var(--hot-spacing-4x-large); /* 72px */
418
418
  /* #endregion */
419
419
 
420
420
  /* #region Border radius */
421
- --wa-border-radius-s: var(--hot-border-radius-small); /* 3px */
422
- --wa-border-radius-m: var(--hot-border-radius-medium); /* 4px */
423
- --wa-border-radius-l: var(--hot-border-radius-large); /* 8px */
421
+ --wa-border-radius-s: var(--hot-border-radius-small); /* 3px */
422
+ --wa-border-radius-m: var(--hot-border-radius-medium); /* 4px */
423
+ --wa-border-radius-l: var(--hot-border-radius-large); /* 8px */
424
424
  --wa-border-radius-pill: var(--hot-border-radius-pill); /* 9999px */
425
425
  --wa-border-radius-circle: var(--hot-border-radius-circle); /* 50% */
426
426
  /* #endregion */