@hirobius/design-system 0.23.1 → 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.
- package/AGENTS.md +1 -1
- package/CHANGELOG.md +57 -0
- package/DESIGN.md +8 -9
- package/README.md +29 -21
- package/UPGRADING.md +55 -1
- package/codemods/hds-prefix.mjs +0 -1
- package/codemods/jsx-fold.mjs +0 -1
- package/codemods/lib/scan.mjs +0 -1
- package/codemods/patterns-subpath.mjs +0 -1
- package/dist/chunks/{empty-state-ChC_xZfg.js → empty-state-BQ1v7ZIx.js} +15 -15
- package/dist/css-contract.json +1 -1
- package/dist/hirobius-ui.js +274 -273
- package/dist/manifest.js +9 -9
- package/dist/patterns.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/tokens.css +1 -1
- package/dist/tokens.js +25 -12
- package/dist/types/src/app/design-system/generated-token-refs.d.ts +25 -12
- package/dist/types/src/app/design-system/generated-token-values.d.ts +25 -12
- package/dist/types/src/index.d.ts +48 -9
- package/dist/types/src/lib/deprecation.d.ts +1 -1
- package/dist/variables.css +48 -37
- package/docs/CONSUMING.md +7 -7
- package/hirobius.tokens.json +113 -74
- package/llms.txt +5 -14
- package/package.json +5 -26
- package/public/hds-manifest.json +360 -1342
- package/public/llms/scroll.txt +2 -2
- package/public/llms-full.txt +13 -23
- package/public/llms.txt +5 -14
- package/src/app/data/component-api.json +1 -1
- package/upgrade/index.json +15 -1
- package/upgrade/releases/0.23.2.json +47 -0
- 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
|
-
|
|
46
|
-
50: "#
|
|
47
|
-
100: "#
|
|
48
|
-
200: "#
|
|
49
|
-
300: "#
|
|
50
|
-
400: "#
|
|
51
|
-
500: "#
|
|
52
|
-
600: "#
|
|
53
|
-
700: "#
|
|
54
|
-
800: "#
|
|
55
|
-
900: "#
|
|
56
|
-
950: "#
|
|
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",
|
|
@@ -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
|
|
59
|
-
readonly "50": "var(--primitive-color-
|
|
60
|
-
readonly "100": "var(--primitive-color-
|
|
61
|
-
readonly "200": "var(--primitive-color-
|
|
62
|
-
readonly "300": "var(--primitive-color-
|
|
63
|
-
readonly "400": "var(--primitive-color-
|
|
64
|
-
readonly "500": "var(--primitive-color-
|
|
65
|
-
readonly "600": "var(--primitive-color-
|
|
66
|
-
readonly "700": "var(--primitive-color-
|
|
67
|
-
readonly "800": "var(--primitive-color-
|
|
68
|
-
readonly "900": "var(--primitive-color-
|
|
69
|
-
readonly "950": "var(--primitive-color-
|
|
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)";
|
|
@@ -56,18 +56,31 @@ export declare const tokenValues: {
|
|
|
56
56
|
readonly "700": "#047857";
|
|
57
57
|
readonly "950": "#022c22";
|
|
58
58
|
};
|
|
59
|
-
readonly
|
|
60
|
-
readonly "50": "#
|
|
61
|
-
readonly "100": "#
|
|
62
|
-
readonly "200": "#
|
|
63
|
-
readonly "300": "#
|
|
64
|
-
readonly "400": "#
|
|
65
|
-
readonly "500": "#
|
|
66
|
-
readonly "600": "#
|
|
67
|
-
readonly "700": "#
|
|
68
|
-
readonly "800": "#
|
|
69
|
-
readonly "900": "#
|
|
70
|
-
readonly "950": "#
|
|
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";
|
|
@@ -204,7 +204,54 @@ export declare const tokens: {
|
|
|
204
204
|
};
|
|
205
205
|
$description: string;
|
|
206
206
|
};
|
|
207
|
-
|
|
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;
|
|
@@ -2517,14 +2564,6 @@ export declare const tokens: {
|
|
|
2517
2564
|
textDisabled: {
|
|
2518
2565
|
$type: string;
|
|
2519
2566
|
$value: string;
|
|
2520
|
-
$extensions: {
|
|
2521
|
-
"com.figma.variables": {
|
|
2522
|
-
modes: {
|
|
2523
|
-
Light: string;
|
|
2524
|
-
Dark: string;
|
|
2525
|
-
};
|
|
2526
|
-
};
|
|
2527
|
-
};
|
|
2528
2567
|
$description: string;
|
|
2529
2568
|
};
|
|
2530
2569
|
bgDisabled: {
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
/** Emit a deprecation warning once per unique `code` (dev only). */
|
|
2
2
|
export declare function warnOnce(code: string, message: string): void;
|
|
3
|
-
/** Test
|
|
3
|
+
/** Test helper to reset the once-per-session guard. */
|
|
4
4
|
export declare function __resetDeprecationWarnings(): void;
|
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-
|
|
52
|
-
--primitive-color-
|
|
53
|
-
--primitive-color-
|
|
54
|
-
--primitive-color-
|
|
55
|
-
--primitive-color-
|
|
56
|
-
--primitive-color-
|
|
57
|
-
--primitive-color-
|
|
58
|
-
--primitive-color-
|
|
59
|
-
--primitive-color-
|
|
60
|
-
--primitive-color-
|
|
61
|
-
--primitive-color-
|
|
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-
|
|
212
|
-
--semantic-color-surface-accentSubtle: var(--primitive-color-
|
|
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-
|
|
223
|
-
--semantic-color-content-onAccent: var(--primitive-color-neutral-
|
|
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-
|
|
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-
|
|
350
|
-
--semantic-accent-hover: var(--primitive-color-
|
|
351
|
-
--semantic-accent-pressed: var(--primitive-color-
|
|
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-
|
|
355
|
-
--semantic-accent-contentHover: var(--primitive-color-
|
|
356
|
-
--semantic-accent-subtle: var(--primitive-color-
|
|
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);
|
|
@@ -447,8 +458,8 @@
|
|
|
447
458
|
--component-button-size-lg-iconSize: var(--primitive-size-20);
|
|
448
459
|
--component-button-size-lg-height: var(--primitive-size-48);
|
|
449
460
|
--component-button-size-lg-itemSpacing: var(--primitive-space-2);
|
|
450
|
-
--component-button-primary-textDisabled: var(--semantic-color-content-
|
|
451
|
-
--component-button-primary-bgDisabled: var(--semantic-color-surface-
|
|
461
|
+
--component-button-primary-textDisabled: var(--semantic-color-content-disabled);
|
|
462
|
+
--component-button-primary-bgDisabled: var(--semantic-color-surface-muted);
|
|
452
463
|
--component-button-secondary-bg-rest: var(--semantic-color-surface-page);
|
|
453
464
|
--component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
|
|
454
465
|
--component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
|
|
@@ -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-
|
|
508
|
-
--semantic-color-surface-accentSubtle: var(--primitive-color-
|
|
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-
|
|
519
|
-
--semantic-color-content-onAccent: var(--primitive-color-
|
|
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-
|
|
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,16 +550,15 @@
|
|
|
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-
|
|
543
|
-
--semantic-accent-hover: var(--primitive-color-
|
|
544
|
-
--semantic-accent-pressed: var(--primitive-color-
|
|
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-
|
|
548
|
-
--semantic-accent-contentHover: var(--primitive-color-
|
|
549
|
-
--semantic-accent-subtle: var(--primitive-color-
|
|
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
|
-
--component-button-primary-textDisabled: var(--semantic-color-content-disabled);
|
|
552
562
|
--semantic-elevation-flat-surface: var(--semantic-color-surface-page);
|
|
553
563
|
--semantic-elevation-flat-border: var(--semantic-color-border-subtle);
|
|
554
564
|
--semantic-elevation-raised-surface: var(--semantic-color-surface-raised);
|
|
@@ -570,7 +580,8 @@
|
|
|
570
580
|
--component-button-bg: var(--semantic-color-surface-accent);
|
|
571
581
|
--component-button-bgHover: var(--semantic-accent-hover);
|
|
572
582
|
--component-button-text: var(--semantic-color-content-onAccent);
|
|
573
|
-
--component-button-primary-
|
|
583
|
+
--component-button-primary-textDisabled: var(--semantic-color-content-disabled);
|
|
584
|
+
--component-button-primary-bgDisabled: var(--semantic-color-surface-muted);
|
|
574
585
|
--component-button-secondary-bg-rest: var(--semantic-color-surface-page);
|
|
575
586
|
--component-button-secondary-bg-hover: var(--semantic-color-surface-raised);
|
|
576
587
|
--component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
|
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: `
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
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
|
|
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
|
|
373
|
-
|
|
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
|