@hirobius/design-system 0.23.2 → 0.24.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 (25) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/DESIGN.md +8 -9
  3. package/README.md +24 -14
  4. package/UPGRADING.md +46 -1
  5. package/dist/css-contract.json +1 -1
  6. package/dist/hirobius-ui.js +253 -252
  7. package/dist/manifest.js +1 -1
  8. package/dist/styles.css +1 -1
  9. package/dist/tokens.css +1 -1
  10. package/dist/tokens.js +25 -12
  11. package/dist/types/src/app/design-system/generated-token-refs.d.ts +25 -12
  12. package/dist/types/src/app/design-system/generated-token-values.d.ts +25 -12
  13. package/dist/types/src/index.d.ts +48 -1
  14. package/dist/variables.css +44 -33
  15. package/docs/CONSUMING.md +7 -7
  16. package/hirobius.tokens.json +111 -64
  17. package/llms.txt +4 -13
  18. package/package.json +3 -2
  19. package/public/hds-manifest.json +189 -112
  20. package/public/llms/scroll.txt +2 -2
  21. package/public/llms-full.txt +12 -22
  22. package/public/llms.txt +4 -13
  23. package/src/app/data/component-api.json +1 -1
  24. package/upgrade/index.json +8 -1
  25. package/upgrade/releases/0.24.0.json +661 -0
package/dist/tokens.js CHANGED
@@ -42,18 +42,31 @@ const a = {
42
42
  700: "#047857",
43
43
  950: "#022c22"
44
44
  },
45
- apple: {
46
- 50: "#f2faeb",
47
- 100: "#e2f3cf",
48
- 200: "#c7e7a4",
49
- 300: "#a6d873",
50
- 400: "#85c84c",
51
- 500: "#66b239",
52
- 600: "#54922d",
53
- 700: "#416f20",
54
- 800: "#34571b",
55
- 900: "#2b4518",
56
- 950: "#16250c"
45
+ graphite: {
46
+ 50: "#f5f4f4",
47
+ 100: "#e9e7e8",
48
+ 200: "#d4d0d2",
49
+ 300: "#b2abae",
50
+ 400: "#8b8488",
51
+ 500: "#655e62",
52
+ 600: "#544d51",
53
+ 700: "#433a3f",
54
+ 800: "#352e32",
55
+ 900: "#2a2428",
56
+ 950: "#19161a"
57
+ },
58
+ mauve: {
59
+ 50: "#fff0f6",
60
+ 100: "#f4e2ea",
61
+ 200: "#e1cad4",
62
+ 300: "#c0a4b1",
63
+ 400: "#9d7b8a",
64
+ 500: "#734b5e",
65
+ 600: "#674254",
66
+ 700: "#523141",
67
+ 800: "#432634",
68
+ 900: "#361d29",
69
+ 950: "#240f1a"
57
70
  },
58
71
  violet: {
59
72
  50: "#f5f3ff",
package/dist/types/src/app/design-system/generated-token-refs.d.ts CHANGED
@@ -55,18 +55,31 @@ export declare const tokenRefs: {
55
55
  readonly "700": "var(--primitive-color-green-700)";
56
56
  readonly "950": "var(--primitive-color-green-950)";
57
57
  };
58
- readonly apple: {
59
- readonly "50": "var(--primitive-color-apple-50)";
60
- readonly "100": "var(--primitive-color-apple-100)";
61
- readonly "200": "var(--primitive-color-apple-200)";
62
- readonly "300": "var(--primitive-color-apple-300)";
63
- readonly "400": "var(--primitive-color-apple-400)";
64
- readonly "500": "var(--primitive-color-apple-500)";
65
- readonly "600": "var(--primitive-color-apple-600)";
66
- readonly "700": "var(--primitive-color-apple-700)";
67
- readonly "800": "var(--primitive-color-apple-800)";
68
- readonly "900": "var(--primitive-color-apple-900)";
69
- readonly "950": "var(--primitive-color-apple-950)";
58
+ readonly graphite: {
59
+ readonly "50": "var(--primitive-color-graphite-50)";
60
+ readonly "100": "var(--primitive-color-graphite-100)";
61
+ readonly "200": "var(--primitive-color-graphite-200)";
62
+ readonly "300": "var(--primitive-color-graphite-300)";
63
+ readonly "400": "var(--primitive-color-graphite-400)";
64
+ readonly "500": "var(--primitive-color-graphite-500)";
65
+ readonly "600": "var(--primitive-color-graphite-600)";
66
+ readonly "700": "var(--primitive-color-graphite-700)";
67
+ readonly "800": "var(--primitive-color-graphite-800)";
68
+ readonly "900": "var(--primitive-color-graphite-900)";
69
+ readonly "950": "var(--primitive-color-graphite-950)";
70
+ };
71
+ readonly mauve: {
72
+ readonly "50": "var(--primitive-color-mauve-50)";
73
+ readonly "100": "var(--primitive-color-mauve-100)";
74
+ readonly "200": "var(--primitive-color-mauve-200)";
75
+ readonly "300": "var(--primitive-color-mauve-300)";
76
+ readonly "400": "var(--primitive-color-mauve-400)";
77
+ readonly "500": "var(--primitive-color-mauve-500)";
78
+ readonly "600": "var(--primitive-color-mauve-600)";
79
+ readonly "700": "var(--primitive-color-mauve-700)";
80
+ readonly "800": "var(--primitive-color-mauve-800)";
81
+ readonly "900": "var(--primitive-color-mauve-900)";
82
+ readonly "950": "var(--primitive-color-mauve-950)";
70
83
  };
71
84
  readonly violet: {
72
85
  readonly "50": "var(--primitive-color-violet-50)";
package/dist/types/src/app/design-system/generated-token-values.d.ts CHANGED
@@ -56,18 +56,31 @@ export declare const tokenValues: {
56
56
  readonly "700": "#047857";
57
57
  readonly "950": "#022c22";
58
58
  };
59
- readonly apple: {
60
- readonly "50": "#f2faeb";
61
- readonly "100": "#e2f3cf";
62
- readonly "200": "#c7e7a4";
63
- readonly "300": "#a6d873";
64
- readonly "400": "#85c84c";
65
- readonly "500": "#66b239";
66
- readonly "600": "#54922d";
67
- readonly "700": "#416f20";
68
- readonly "800": "#34571b";
69
- readonly "900": "#2b4518";
70
- readonly "950": "#16250c";
59
+ readonly graphite: {
60
+ readonly "50": "#f5f4f4";
61
+ readonly "100": "#e9e7e8";
62
+ readonly "200": "#d4d0d2";
63
+ readonly "300": "#b2abae";
64
+ readonly "400": "#8b8488";
65
+ readonly "500": "#655e62";
66
+ readonly "600": "#544d51";
67
+ readonly "700": "#433a3f";
68
+ readonly "800": "#352e32";
69
+ readonly "900": "#2a2428";
70
+ readonly "950": "#19161a";
71
+ };
72
+ readonly mauve: {
73
+ readonly "50": "#fff0f6";
74
+ readonly "100": "#f4e2ea";
75
+ readonly "200": "#e1cad4";
76
+ readonly "300": "#c0a4b1";
77
+ readonly "400": "#9d7b8a";
78
+ readonly "500": "#734b5e";
79
+ readonly "600": "#674254";
80
+ readonly "700": "#523141";
81
+ readonly "800": "#432634";
82
+ readonly "900": "#361d29";
83
+ readonly "950": "#240f1a";
71
84
  };
72
85
  readonly violet: {
73
86
  readonly "50": "#f5f3ff";
package/dist/types/src/index.d.ts CHANGED
@@ -204,7 +204,54 @@ export declare const tokens: {
204
204
  };
205
205
  $description: string;
206
206
  };
207
- apple: {
207
+ graphite: {
208
+ "50": {
209
+ $value: string;
210
+ $description: string;
211
+ };
212
+ "100": {
213
+ $value: string;
214
+ $description: string;
215
+ };
216
+ "200": {
217
+ $value: string;
218
+ $description: string;
219
+ };
220
+ "300": {
221
+ $value: string;
222
+ $description: string;
223
+ };
224
+ "400": {
225
+ $value: string;
226
+ $description: string;
227
+ };
228
+ "500": {
229
+ $value: string;
230
+ $description: string;
231
+ };
232
+ "600": {
233
+ $value: string;
234
+ $description: string;
235
+ };
236
+ "700": {
237
+ $value: string;
238
+ $description: string;
239
+ };
240
+ "800": {
241
+ $value: string;
242
+ $description: string;
243
+ };
244
+ "900": {
245
+ $value: string;
246
+ $description: string;
247
+ };
248
+ "950": {
249
+ $value: string;
250
+ $description: string;
251
+ };
252
+ $description: string;
253
+ };
254
+ mauve: {
208
255
  "50": {
209
256
  $value: string;
210
257
  $description: string;
package/dist/variables.css CHANGED
@@ -48,17 +48,28 @@
48
48
  --primitive-color-green-400: #34d399;
49
49
  --primitive-color-green-700: #047857;
50
50
  --primitive-color-green-950: #022c22;
51
- --primitive-color-apple-50: #f2faeb;
52
- --primitive-color-apple-100: #e2f3cf;
53
- --primitive-color-apple-200: #c7e7a4;
54
- --primitive-color-apple-300: #a6d873;
55
- --primitive-color-apple-400: #85c84c;
56
- --primitive-color-apple-500: #66b239;
57
- --primitive-color-apple-600: #54922d;
58
- --primitive-color-apple-700: #416f20;
59
- --primitive-color-apple-800: #34571b;
60
- --primitive-color-apple-900: #2b4518;
61
- --primitive-color-apple-950: #16250c;
51
+ --primitive-color-graphite-50: #f5f4f4;
52
+ --primitive-color-graphite-100: #e9e7e8;
53
+ --primitive-color-graphite-200: #d4d0d2;
54
+ --primitive-color-graphite-300: #b2abae;
55
+ --primitive-color-graphite-400: #8b8488;
56
+ --primitive-color-graphite-500: #655e62;
57
+ --primitive-color-graphite-600: #544d51;
58
+ --primitive-color-graphite-700: #433a3f;
59
+ --primitive-color-graphite-800: #352e32;
60
+ --primitive-color-graphite-900: #2a2428;
61
+ --primitive-color-graphite-950: #19161a;
62
+ --primitive-color-mauve-50: #fff0f6;
63
+ --primitive-color-mauve-100: #f4e2ea;
64
+ --primitive-color-mauve-200: #e1cad4;
65
+ --primitive-color-mauve-300: #c0a4b1;
66
+ --primitive-color-mauve-400: #9d7b8a;
67
+ --primitive-color-mauve-500: #734b5e;
68
+ --primitive-color-mauve-600: #674254;
69
+ --primitive-color-mauve-700: #523141;
70
+ --primitive-color-mauve-800: #432634;
71
+ --primitive-color-mauve-900: #361d29;
72
+ --primitive-color-mauve-950: #240f1a;
62
73
  --primitive-color-violet-50: #f5f3ff;
63
74
  --primitive-color-violet-400: #a78bfa;
64
75
  --primitive-color-violet-700: #6d28d9;
@@ -208,8 +219,8 @@
208
219
  --semantic-color-surface-overlay: var(--primitive-color-neutral-100);
209
220
  --semantic-color-surface-scrim: var(--primitive-color-neutral-900);
210
221
  --semantic-color-surface-inverse: var(--primitive-color-neutral-black);
211
- --semantic-color-surface-accent: var(--primitive-color-apple-500);
212
- --semantic-color-surface-accentSubtle: var(--primitive-color-apple-50);
222
+ --semantic-color-surface-accent: var(--primitive-color-graphite-700);
223
+ --semantic-color-surface-accentSubtle: var(--primitive-color-graphite-50);
213
224
  --semantic-color-surface-hover: var(--primitive-color-neutral-100);
214
225
  --semantic-color-surface-pressed: var(--primitive-color-neutral-50);
215
226
  --semantic-color-surface-selected: var(--primitive-color-neutral-200);
@@ -219,8 +230,8 @@
219
230
  --semantic-color-content-secondary: var(--primitive-color-neutral-600);
220
231
  --semantic-color-content-disabled: var(--primitive-color-neutral-300);
221
232
  --semantic-color-content-inverse: var(--primitive-color-neutral-100);
222
- --semantic-color-content-accent: var(--primitive-color-apple-700);
223
- --semantic-color-content-onAccent: var(--primitive-color-neutral-900);
233
+ --semantic-color-content-accent: var(--primitive-color-graphite-700);
234
+ --semantic-color-content-onAccent: var(--primitive-color-neutral-50);
224
235
  --semantic-color-content-success: var(--primitive-color-green-700);
225
236
  --semantic-color-content-warning: var(--primitive-color-amber-800);
226
237
  --semantic-color-content-danger: var(--primitive-color-red-700);
@@ -229,7 +240,7 @@
229
240
  --semantic-color-border-subdued: var(--primitive-color-neutral-200);
230
241
  --semantic-color-border-subtle: var(--primitive-color-neutral-100);
231
242
  --semantic-color-border-strong: var(--primitive-color-neutral-300);
232
- --semantic-color-border-accent: var(--primitive-color-apple-600);
243
+ --semantic-color-border-accent: var(--primitive-color-graphite-700);
233
244
  --semantic-color-border-success: var(--primitive-color-green-400);
234
245
  --semantic-color-border-warning: var(--primitive-color-amber-400);
235
246
  --semantic-color-feedback-error: var(--primitive-color-red-700);
@@ -346,14 +357,14 @@
346
357
  --semantic-docs-space-section: var(--primitive-space-12);
347
358
  --semantic-docs-space-paragraph: var(--primitive-space-6);
348
359
  --semantic-docs-space-inline: var(--primitive-space-2);
349
- --semantic-accent-rest: var(--primitive-color-apple-500);
350
- --semantic-accent-hover: var(--primitive-color-apple-600);
351
- --semantic-accent-pressed: var(--primitive-color-apple-700);
360
+ --semantic-accent-rest: var(--primitive-color-graphite-700);
361
+ --semantic-accent-hover: var(--primitive-color-graphite-800);
362
+ --semantic-accent-pressed: var(--primitive-color-graphite-900);
352
363
  --semantic-accent-inactive: var(--primitive-color-neutral-400);
353
364
  --semantic-accent-disabled: var(--primitive-color-neutral-300);
354
- --semantic-accent-content: var(--primitive-color-apple-700);
355
- --semantic-accent-contentHover: var(--primitive-color-apple-800);
356
- --semantic-accent-subtle: var(--primitive-color-apple-50);
365
+ --semantic-accent-content: var(--primitive-color-graphite-700);
366
+ --semantic-accent-contentHover: var(--primitive-color-graphite-800);
367
+ --semantic-accent-subtle: var(--primitive-color-graphite-50);
357
368
  --semantic-radius-action: var(--primitive-radius-8);
358
369
  --semantic-radius-control: var(--primitive-radius-4);
359
370
  --semantic-borderWidth-default: var(--primitive-borderWidth-xs);
@@ -504,8 +515,8 @@
504
515
  --semantic-color-surface-overlay: var(--primitive-color-neutral-850);
505
516
  --semantic-color-surface-scrim: var(--primitive-color-neutral-black);
506
517
  --semantic-color-surface-inverse: var(--primitive-color-neutral-white);
507
- --semantic-color-surface-accent: var(--primitive-color-apple-400);
508
- --semantic-color-surface-accentSubtle: var(--primitive-color-apple-900);
518
+ --semantic-color-surface-accent: var(--primitive-color-graphite-200);
519
+ --semantic-color-surface-accentSubtle: var(--primitive-color-graphite-800);
509
520
  --semantic-color-surface-hover: var(--primitive-color-neutral-900);
510
521
  --semantic-color-surface-pressed: var(--primitive-color-neutral-950);
511
522
  --semantic-color-surface-selected: var(--primitive-color-neutral-800);
@@ -515,8 +526,8 @@
515
526
  --semantic-color-content-secondary: var(--primitive-color-neutral-400);
516
527
  --semantic-color-content-disabled: var(--primitive-color-neutral-600);
517
528
  --semantic-color-content-inverse: var(--primitive-color-neutral-900);
518
- --semantic-color-content-accent: var(--primitive-color-apple-400);
519
- --semantic-color-content-onAccent: var(--primitive-color-neutral-900);
529
+ --semantic-color-content-accent: var(--primitive-color-graphite-300);
530
+ --semantic-color-content-onAccent: var(--primitive-color-graphite-900);
520
531
  --semantic-color-content-success: var(--primitive-color-green-400);
521
532
  --semantic-color-content-warning: var(--primitive-color-amber-400);
522
533
  --semantic-color-content-danger: var(--primitive-color-red-400);
@@ -525,7 +536,7 @@
525
536
  --semantic-color-border-subdued: var(--primitive-color-neutral-800);
526
537
  --semantic-color-border-subtle: var(--primitive-color-neutral-850);
527
538
  --semantic-color-border-strong: var(--primitive-color-neutral-600);
528
- --semantic-color-border-accent: var(--primitive-color-apple-400);
539
+ --semantic-color-border-accent: var(--primitive-color-graphite-300);
529
540
  --semantic-color-border-success: var(--primitive-color-green-400);
530
541
  --semantic-color-border-warning: var(--primitive-color-amber-400);
531
542
  --semantic-color-feedback-error: var(--primitive-color-red-400);
@@ -539,14 +550,14 @@
539
550
  --semantic-color-feedback-bg-info: var(--primitive-color-blue-900);
540
551
  --semantic-color-feedback-bg-inProgress: var(--primitive-color-violet-950);
541
552
  --semantic-color-state-pressed-overlay: var(--primitive-color-neutral-white);
542
- --semantic-accent-rest: var(--primitive-color-apple-400);
543
- --semantic-accent-hover: var(--primitive-color-apple-500);
544
- --semantic-accent-pressed: var(--primitive-color-apple-600);
553
+ --semantic-accent-rest: var(--primitive-color-graphite-200);
554
+ --semantic-accent-hover: var(--primitive-color-graphite-300);
555
+ --semantic-accent-pressed: var(--primitive-color-graphite-400);
545
556
  --semantic-accent-inactive: var(--primitive-color-neutral-600);
546
557
  --semantic-accent-disabled: var(--primitive-color-neutral-700);
547
- --semantic-accent-content: var(--primitive-color-apple-400);
548
- --semantic-accent-contentHover: var(--primitive-color-apple-300);
549
- --semantic-accent-subtle: var(--primitive-color-apple-900);
558
+ --semantic-accent-content: var(--primitive-color-graphite-300);
559
+ --semantic-accent-contentHover: var(--primitive-color-graphite-200);
560
+ --semantic-accent-subtle: var(--primitive-color-graphite-800);
550
561
  --component-badge-bg: var(--semantic-color-feedback-bg-info);
551
562
  --semantic-elevation-flat-surface: var(--semantic-color-surface-page);
552
563
  --semantic-elevation-flat-border: var(--semantic-color-border-subtle);
package/docs/CONSUMING.md CHANGED
@@ -77,10 +77,10 @@ import '@hirobius/design-system/fonts.css'; // Plus Jakarta Sans 400/500/700 + I
77
77
  URLs are relative (`./fonts/plus-jakarta-sans-400.woff2`), and the woff2 files ship in the
78
78
  package, so Vite, Next and webpack resolve and hash them; there is nothing to
79
79
  copy. Import it alongside one of the stylesheets above to keep the HDS fonts.
80
- Skip it to bring your own: `tokens.css` and `styles.css` keep the
81
- `--hds-font-family*` variables, so text falls back to the family stack
82
- (`"Plus Jakarta Sans", system-ui, …`) and uses your font if you declare that family
83
- yourself.
80
+ Skip it to bring your own: set `--hds-font-family` (and `--hds-font-family-mono`
81
+ for code) to your font stack on any element — every HDS type role inside it
82
+ follows. Without an override, text falls back to the brand stack
83
+ (`"Plus Jakarta Sans", system-ui, …`).
84
84
 
85
85
  HDS's own base styles (type baseline, resets) are scoped to the `[data-hds]`
86
86
  subtree (§4) in **all** bundles, so they never touch host elements. The only
@@ -241,7 +241,7 @@ export function Example() {
241
241
  | `@hirobius/design-system/brand` | Framework-free palette → HDS-semantic overlay bridge for static/SSR targets (see §12) |
242
242
  | `@hirobius/design-system/scroll` | Opt-in scroll-motion: `SmoothScroll` (Lenis) + `useScrollProgress` (Motion). Optional peer `lenis` (see §13) |
243
243
  | `@hirobius/design-system/static.css` | CSS-only static-primitive layer — `.hds-badge`/`.hds-card`/`.hds-alert`/`.hds-divider`/`.hds-tag` classes, no React (see §14) |
244
- | `@hirobius/design-system/patterns` | The 12 pattern modules (`Page`, `PageHeader`, `Form`, `FormField`, `CodeBlock`, …); root copies removed in 0.20.0 |
244
+ | `@hirobius/design-system/patterns` | The 12 pattern modules (`Page`, `PageHeader`, `Form` with its `FormField`, `CodeBlock`, …); root copies removed in 0.20.0 |
245
245
  | `@hirobius/design-system/icons` | Curated Lucide icon set for `Icon` and `Button iconOnly` (see §15) |
246
246
  | `@hirobius/design-system/eslint-plugin` | The consumer ESLint plugin; spread `configs.recommended` into `eslint.config.mjs` (see §11) |
247
247
 
@@ -369,8 +369,8 @@ the form inside a hydrated island (e.g. `client:load`).
369
369
 
370
370
  - **ESM-only.** Use a modern bundler (Vite, Next, Rspack, etc.). `require()` /
371
371
  CommonJS resolution will not work.
372
- - **Types ship from source.** The package serves types directly from its `src/`
373
- TypeScript (no emitted `.d.ts`), so the consuming `tsconfig.json` should use
372
+ - **Types ship as `.d.ts`** in `dist/types/`, resolved through the package
373
+ `exports` map, so the consuming `tsconfig.json` should use
374
374
  `"moduleResolution": "bundler"` (or `"node16"`/`"nodenext"`).
375
375
 
376
376
  ## 10. Extending HDS — the consumption contract