@hirobius/design-system 0.13.0 → 0.14.0

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 (74) hide show
  1. package/NOTICE.md +9 -0
  2. package/README.md +109 -43
  3. package/dist/contexts.js +62 -60
  4. package/dist/hirobius-ui.js +6810 -5807
  5. package/dist/manifest.js +5 -5
  6. package/dist/static.css +1 -1
  7. package/dist/styles.css +1 -1
  8. package/dist/tokens.css +1 -1
  9. package/dist/tokens.js +2 -2
  10. package/dist/types/src/app/components/activity-feed.d.ts +6 -0
  11. package/dist/types/src/app/components/alert.d.ts +1 -0
  12. package/dist/types/src/app/components/avatar.d.ts +1 -0
  13. package/dist/types/src/app/components/badge.d.ts +1 -0
  14. package/dist/types/src/app/components/box.d.ts +2 -2
  15. package/dist/types/src/app/components/breadcrumb.d.ts +1 -0
  16. package/dist/types/src/app/components/button.d.ts +1 -0
  17. package/dist/types/src/app/components/callout.d.ts +1 -0
  18. package/dist/types/src/app/components/card.d.ts +7 -2
  19. package/dist/types/src/app/components/checkbox.d.ts +1 -0
  20. package/dist/types/src/app/components/code-block.d.ts +1 -0
  21. package/dist/types/src/app/components/combobox.d.ts +1 -0
  22. package/dist/types/src/app/components/dialog.d.ts +5 -0
  23. package/dist/types/src/app/components/disclosure.d.ts +1 -0
  24. package/dist/types/src/app/components/divider.d.ts +4 -0
  25. package/dist/types/src/app/components/empty-state.d.ts +1 -0
  26. package/dist/types/src/app/components/field.d.ts +1 -0
  27. package/dist/types/src/app/components/form.d.ts +7 -1
  28. package/dist/types/src/app/components/icon-button.d.ts +2 -2
  29. package/dist/types/src/app/components/icon.d.ts +1 -1
  30. package/dist/types/src/app/components/inline-code.d.ts +3 -0
  31. package/dist/types/src/app/components/inline-link.d.ts +1 -0
  32. package/dist/types/src/app/components/input.d.ts +1 -0
  33. package/dist/types/src/app/components/menu.d.ts +1 -0
  34. package/dist/types/src/app/components/nav-group.d.ts +2 -2
  35. package/dist/types/src/app/components/nav-item.d.ts +1 -1
  36. package/dist/types/src/app/components/pagination.d.ts +1 -0
  37. package/dist/types/src/app/components/popover.d.ts +1 -0
  38. package/dist/types/src/app/components/progress.d.ts +1 -0
  39. package/dist/types/src/app/components/radio.d.ts +1 -0
  40. package/dist/types/src/app/components/skeleton.d.ts +1 -0
  41. package/dist/types/src/app/components/slider.d.ts +1 -0
  42. package/dist/types/src/app/components/spinner.d.ts +1 -0
  43. package/dist/types/src/app/components/stack.d.ts +1 -1
  44. package/dist/types/src/app/components/stat.d.ts +1 -0
  45. package/dist/types/src/app/components/status-list-item.d.ts +1 -0
  46. package/dist/types/src/app/components/status-tile.d.ts +1 -0
  47. package/dist/types/src/app/components/surface.d.ts +1 -1
  48. package/dist/types/src/app/components/table.d.ts +1 -0
  49. package/dist/types/src/app/components/tabs.d.ts +6 -0
  50. package/dist/types/src/app/components/tag.d.ts +1 -0
  51. package/dist/types/src/app/components/textarea.d.ts +1 -0
  52. package/dist/types/src/app/components/toast.d.ts +1 -0
  53. package/dist/types/src/app/components/toggle.d.ts +1 -0
  54. package/dist/types/src/app/context/TenantContext.d.ts +20 -6
  55. package/dist/types/src/app/context/index.d.ts +7 -7
  56. package/dist/types/src/app/design-system/generated-token-refs.d.ts +13 -2
  57. package/dist/types/src/app/design-system/generated-token-values.d.ts +3 -3
  58. package/dist/types/src/app/design-system/theme.d.ts +1 -1
  59. package/dist/types/src/app/design-system/tokens.d.ts +2 -2
  60. package/dist/types/src/app/hooks/useHdsMotion.d.ts +16 -0
  61. package/dist/types/src/app/hooks/useReducedMotion.d.ts +1 -0
  62. package/dist/types/src/app/layouts/HdsSystemDocLayout.d.ts +1 -1
  63. package/dist/types/src/app/lib/hds-search.d.ts +1 -1
  64. package/dist/types/src/brand/index.d.ts +1 -1
  65. package/dist/types/src/form/index.d.ts +3 -3
  66. package/dist/types/src/index.d.ts +253 -118
  67. package/dist/types/src/lib/env.d.ts +31 -0
  68. package/dist/types/src/lib/manifest-entry.d.ts +1 -1
  69. package/dist/types/src/scroll/index.d.ts +2 -2
  70. package/dist/variables.css +56 -34
  71. package/hirobius.tokens.json +200 -65
  72. package/package.json +56 -17
  73. package/public/hds-manifest.json +1575 -696
  74. /package/{LICENSE/main.tsx → LICENSE} +0 -0
package/dist/variables.css CHANGED
@@ -117,8 +117,8 @@
117
117
  --primitive-typography-size-2xl: 30px;
118
118
  --primitive-typography-size-3xl: 36px;
119
119
  --primitive-typography-size-4xl: 48px;
120
- --primitive-typography-size-5xl: 80px;
121
- --primitive-typography-size-7xl: 72px;
120
+ --primitive-typography-size-5xl: 72px;
121
+ --primitive-typography-size-6xl: 80px;
122
122
  --primitive-typography-weight-light: 300;
123
123
  --primitive-typography-weight-regular: 400;
124
124
  --primitive-typography-weight-medium: 500;
@@ -195,19 +195,30 @@
195
195
  --semantic-color-surface-raised: var(--primitive-color-neutral-50);
196
196
  --semantic-color-surface-overlay: var(--primitive-color-neutral-100);
197
197
  --semantic-color-surface-inverse: var(--primitive-color-neutral-black);
198
- --semantic-color-surface-accent: var(--primitive-color-blue-500);
199
- --semantic-color-surface-accentSubtle: var(--primitive-color-blue-50);
198
+ --semantic-color-surface-accent: var(--primitive-color-neutral-900);
199
+ --semantic-color-surface-accentSubtle: var(--primitive-color-neutral-100);
200
+ --semantic-color-surface-hover: var(--primitive-color-neutral-100);
201
+ --semantic-color-surface-pressed: var(--primitive-color-neutral-50);
202
+ --semantic-color-surface-selected: var(--primitive-color-neutral-200);
203
+ --semantic-color-surface-muted: var(--primitive-color-neutral-100);
204
+ --semantic-color-surface-sunken: var(--primitive-color-neutral-200);
200
205
  --semantic-color-content-primary: var(--primitive-color-neutral-900);
201
206
  --semantic-color-content-secondary: var(--primitive-color-neutral-600);
202
207
  --semantic-color-content-disabled: var(--primitive-color-neutral-300);
203
208
  --semantic-color-content-inverse: var(--primitive-color-neutral-100);
204
- --semantic-color-content-accent: var(--primitive-color-blue-500);
209
+ --semantic-color-content-accent: var(--primitive-color-neutral-900);
205
210
  --semantic-color-content-onAccent: var(--primitive-color-neutral-white);
211
+ --semantic-color-content-success: var(--primitive-color-green-700);
212
+ --semantic-color-content-warning: var(--primitive-color-amber-800);
213
+ --semantic-color-content-danger: var(--primitive-color-red-700);
206
214
  --semantic-color-border-default: var(--primitive-color-neutral-200);
215
+ --semantic-color-border-interactive: var(--primitive-color-neutral-500);
207
216
  --semantic-color-border-subdued: var(--primitive-color-neutral-200);
208
217
  --semantic-color-border-subtle: var(--primitive-color-neutral-100);
209
218
  --semantic-color-border-strong: var(--primitive-color-neutral-300);
210
- --semantic-color-border-accent: var(--primitive-color-blue-500);
219
+ --semantic-color-border-accent: var(--primitive-color-neutral-900);
220
+ --semantic-color-border-success: var(--primitive-color-green-400);
221
+ --semantic-color-border-warning: var(--primitive-color-amber-400);
211
222
  --semantic-color-feedback-error: var(--primitive-color-red-700);
212
223
  --semantic-color-feedback-success: var(--primitive-color-green-700);
213
224
  --semantic-color-feedback-warning: var(--primitive-color-amber-800);
@@ -248,7 +259,7 @@
248
259
  --semantic-layout-grid-columns-desktop: var(--primitive-grid-columns-3);
249
260
  /* semantic.typography.display */
250
261
  --semantic-typography-display-font-family: var(--primitive-typography-family-display);
251
- --semantic-typography-display-font-size: var(--primitive-typography-size-7xl);
262
+ --semantic-typography-display-font-size: var(--primitive-typography-size-5xl);
252
263
  --semantic-typography-display-font-weight: var(--primitive-typography-weight-bold);
253
264
  --semantic-typography-display-letter-spacing: var(--primitive-typography-letterSpacing-tight);
254
265
  --semantic-typography-display-line-height: var(--primitive-typography-lineHeight-none);
@@ -308,15 +319,15 @@
308
319
  --semantic-docs-space-section: var(--primitive-space-12);
309
320
  --semantic-docs-space-paragraph: var(--primitive-space-6);
310
321
  --semantic-docs-space-inline: var(--primitive-space-2);
311
- --semantic-accent-rest: var(--primitive-color-blue-500);
312
- --semantic-accent-hover: var(--primitive-color-blue-600);
313
- --semantic-accent-pressed: var(--primitive-color-blue-700);
314
- --semantic-accent-inactive: var(--primitive-color-blue-200);
315
- --semantic-accent-disabled: var(--primitive-color-blue-100);
316
- --semantic-accent-content: var(--primitive-color-blue-500);
317
- --semantic-accent-contentHover: var(--primitive-color-blue-600);
318
- --semantic-accent-subtle: var(--primitive-color-blue-50);
319
- --semantic-radius-action: var(--primitive-radius-12);
322
+ --semantic-accent-rest: var(--primitive-color-neutral-900);
323
+ --semantic-accent-hover: var(--primitive-color-neutral-800);
324
+ --semantic-accent-pressed: var(--primitive-color-neutral-950);
325
+ --semantic-accent-inactive: var(--primitive-color-neutral-400);
326
+ --semantic-accent-disabled: var(--primitive-color-neutral-300);
327
+ --semantic-accent-content: var(--primitive-color-neutral-900);
328
+ --semantic-accent-contentHover: var(--primitive-color-neutral-700);
329
+ --semantic-accent-subtle: var(--primitive-color-neutral-100);
330
+ --semantic-radius-action: var(--primitive-radius-8);
320
331
  --semantic-borderWidth-default: var(--primitive-borderWidth-xs);
321
332
  --semantic-borderWidth-emphasis: var(--primitive-borderWidth-sm);
322
333
  --semantic-shadow-subtle: 0 1px 2px hsl(var(--primitive-shadow-color) / 0.04), 0 1px 1px hsl(var(--primitive-shadow-color) / 0.06);
@@ -401,14 +412,14 @@
401
412
  --component-button-secondary-bg-rest: var(--semantic-color-surface-page);
402
413
  --component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
403
414
  --component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
404
- --component-button-secondary-border-rest: var(--semantic-color-border-default);
405
- --component-button-secondary-border-hover: var(--semantic-color-border-default);
406
- --component-button-secondary-border-pressed: var(--semantic-color-border-default);
415
+ --component-button-secondary-border-rest: var(--semantic-color-border-interactive);
416
+ --component-button-secondary-border-hover: var(--semantic-color-border-interactive);
417
+ --component-button-secondary-border-pressed: var(--semantic-color-border-interactive);
407
418
  --component-button-secondary-border-disabled: var(--semantic-color-border-subdued);
408
419
  --component-button-secondary-text: var(--semantic-color-content-primary);
409
420
  --component-input-bg: var(--semantic-color-surface-raised);
410
421
  --component-input-text: var(--semantic-color-content-primary);
411
- --component-input-border: var(--semantic-color-border-default);
422
+ --component-input-border: var(--semantic-color-border-interactive);
412
423
  --component-input-borderError: var(--semantic-color-feedback-error);
413
424
  --component-input-radius: var(--semantic-radius-action);
414
425
  --component-input-paddingX: var(--primitive-space-4);
@@ -438,7 +449,7 @@
438
449
  --role-destructive: var(--semantic-color-feedback-error);
439
450
  --role-destructive-foreground: var(--semantic-color-content-inverse);
440
451
  --role-border: var(--semantic-color-border-default);
441
- --role-input: var(--semantic-color-border-default);
452
+ --role-input: var(--semantic-color-border-interactive);
442
453
  --role-ring: var(--semantic-color-border-accent);
443
454
  --role-radius: var(--semantic-radius-action);
444
455
  }
@@ -450,19 +461,30 @@
450
461
  --semantic-color-surface-raised: var(--primitive-color-neutral-950);
451
462
  --semantic-color-surface-overlay: var(--primitive-color-neutral-850);
452
463
  --semantic-color-surface-inverse: var(--primitive-color-neutral-white);
453
- --semantic-color-surface-accent: var(--primitive-color-blue-500);
454
- --semantic-color-surface-accentSubtle: var(--primitive-color-blue-900);
464
+ --semantic-color-surface-accent: var(--primitive-color-neutral-100);
465
+ --semantic-color-surface-accentSubtle: var(--primitive-color-neutral-900);
466
+ --semantic-color-surface-hover: var(--primitive-color-neutral-900);
467
+ --semantic-color-surface-pressed: var(--primitive-color-neutral-950);
468
+ --semantic-color-surface-selected: var(--primitive-color-neutral-800);
469
+ --semantic-color-surface-muted: var(--primitive-color-neutral-900);
470
+ --semantic-color-surface-sunken: var(--primitive-color-neutral-850);
455
471
  --semantic-color-content-primary: var(--primitive-color-neutral-100);
456
472
  --semantic-color-content-secondary: var(--primitive-color-neutral-400);
457
473
  --semantic-color-content-disabled: var(--primitive-color-neutral-600);
458
474
  --semantic-color-content-inverse: var(--primitive-color-neutral-900);
459
- --semantic-color-content-accent: var(--primitive-color-blue-300);
460
- --semantic-color-content-onAccent: var(--primitive-color-neutral-white);
475
+ --semantic-color-content-accent: var(--primitive-color-neutral-100);
476
+ --semantic-color-content-onAccent: var(--primitive-color-neutral-900);
477
+ --semantic-color-content-success: var(--primitive-color-green-400);
478
+ --semantic-color-content-warning: var(--primitive-color-amber-400);
479
+ --semantic-color-content-danger: var(--primitive-color-red-400);
461
480
  --semantic-color-border-default: var(--primitive-color-neutral-700);
481
+ --semantic-color-border-interactive: var(--primitive-color-neutral-500);
462
482
  --semantic-color-border-subdued: var(--primitive-color-neutral-800);
463
483
  --semantic-color-border-subtle: var(--primitive-color-neutral-850);
464
484
  --semantic-color-border-strong: var(--primitive-color-neutral-600);
465
- --semantic-color-border-accent: var(--primitive-color-blue-500);
485
+ --semantic-color-border-accent: var(--primitive-color-neutral-100);
486
+ --semantic-color-border-success: var(--primitive-color-green-400);
487
+ --semantic-color-border-warning: var(--primitive-color-amber-400);
466
488
  --semantic-color-feedback-error: var(--primitive-color-red-400);
467
489
  --semantic-color-feedback-success: var(--primitive-color-green-400);
468
490
  --semantic-color-feedback-warning: var(--primitive-color-amber-400);
@@ -473,14 +495,14 @@
473
495
  --semantic-color-feedback-bg-warning: var(--primitive-color-amber-950);
474
496
  --semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
475
497
  --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-950);
476
- --semantic-accent-rest: var(--primitive-color-blue-500);
477
- --semantic-accent-hover: var(--primitive-color-blue-450);
478
- --semantic-accent-pressed: var(--primitive-color-blue-400);
479
- --semantic-accent-inactive: var(--primitive-color-blue-200);
480
- --semantic-accent-disabled: var(--primitive-color-blue-100);
481
- --semantic-accent-content: var(--primitive-color-blue-300);
482
- --semantic-accent-contentHover: var(--primitive-color-blue-200);
483
- --semantic-accent-subtle: var(--primitive-color-blue-900);
498
+ --semantic-accent-rest: var(--primitive-color-neutral-100);
499
+ --semantic-accent-hover: var(--primitive-color-neutral-200);
500
+ --semantic-accent-pressed: var(--primitive-color-neutral-300);
501
+ --semantic-accent-inactive: var(--primitive-color-neutral-600);
502
+ --semantic-accent-disabled: var(--primitive-color-neutral-700);
503
+ --semantic-accent-content: var(--primitive-color-neutral-100);
504
+ --semantic-accent-contentHover: var(--primitive-color-neutral-300);
505
+ --semantic-accent-subtle: var(--primitive-color-neutral-800);
484
506
  --component-badge-bg: var(--semantic-color-feedback-bg-info);
485
507
  --component-button-primary-textDisabled: var(--semantic-color-content-disabled);
486
508
  }