@hirobius/design-system 0.23.2 → 0.24.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.
- package/CHANGELOG.md +57 -0
- package/DESIGN.md +8 -9
- package/README.md +24 -14
- package/UPGRADING.md +69 -1
- package/dist/css-contract.json +1 -1
- package/dist/hirobius-ui.js +253 -252
- package/dist/manifest.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 +54 -7
- package/dist/variables.css +67 -56
- package/docs/CONSUMING.md +7 -7
- package/hirobius.tokens.json +147 -100
- package/llms.txt +4 -13
- package/package.json +3 -2
- package/public/hds-manifest.json +230 -153
- package/public/llms/scroll.txt +2 -2
- package/public/llms-full.txt +12 -22
- package/public/llms.txt +4 -13
- package/src/app/data/component-api.json +1 -1
- package/upgrade/index.json +15 -1
- package/upgrade/releases/0.24.0.json +661 -0
- package/upgrade/releases/0.24.1.json +311 -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;
|
|
@@ -337,7 +384,6 @@ export declare const tokens: {
|
|
|
337
384
|
$description: string;
|
|
338
385
|
};
|
|
339
386
|
stone: {
|
|
340
|
-
$description: string;
|
|
341
387
|
"100": {
|
|
342
388
|
$value: string;
|
|
343
389
|
$description: string;
|
|
@@ -370,6 +416,7 @@ export declare const tokens: {
|
|
|
370
416
|
$value: string;
|
|
371
417
|
$description: string;
|
|
372
418
|
};
|
|
419
|
+
$description: string;
|
|
373
420
|
};
|
|
374
421
|
projectBrand: {
|
|
375
422
|
microsoftGameDev: {
|
|
@@ -976,34 +1023,34 @@ export declare const tokens: {
|
|
|
976
1023
|
};
|
|
977
1024
|
$description: string;
|
|
978
1025
|
};
|
|
979
|
-
"
|
|
1026
|
+
"280": {
|
|
980
1027
|
$type: string;
|
|
981
1028
|
$value: {
|
|
982
1029
|
value: number;
|
|
983
1030
|
unit: string;
|
|
984
1031
|
};
|
|
1032
|
+
$description: string;
|
|
985
1033
|
};
|
|
986
|
-
"
|
|
1034
|
+
"760": {
|
|
987
1035
|
$type: string;
|
|
988
1036
|
$value: {
|
|
989
1037
|
value: number;
|
|
990
1038
|
unit: string;
|
|
991
1039
|
};
|
|
992
1040
|
};
|
|
993
|
-
"
|
|
1041
|
+
"1200": {
|
|
994
1042
|
$type: string;
|
|
995
1043
|
$value: {
|
|
996
1044
|
value: number;
|
|
997
1045
|
unit: string;
|
|
998
1046
|
};
|
|
999
1047
|
};
|
|
1000
|
-
"
|
|
1048
|
+
"50ch": {
|
|
1001
1049
|
$type: string;
|
|
1002
1050
|
$value: {
|
|
1003
1051
|
value: number;
|
|
1004
1052
|
unit: string;
|
|
1005
1053
|
};
|
|
1006
|
-
$description: string;
|
|
1007
1054
|
};
|
|
1008
1055
|
};
|
|
1009
1056
|
};
|
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);
|
|
@@ -399,8 +410,8 @@
|
|
|
399
410
|
--component-nav-height: var(--primitive-space-16);
|
|
400
411
|
--component-nav-paddingX: var(--primitive-space-6);
|
|
401
412
|
--component-nav-paddingY: var(--primitive-space-2);
|
|
402
|
-
--component-tag-background: var(--semantic-
|
|
403
|
-
--component-tag-text: var(--semantic-color-content-
|
|
413
|
+
--component-tag-background: var(--semantic-color-surface-raised);
|
|
414
|
+
--component-tag-text: var(--semantic-color-content-secondary);
|
|
404
415
|
--component-tag-border: var(--semantic-color-border-default);
|
|
405
416
|
--component-tag-radius: var(--primitive-radius-full);
|
|
406
417
|
--component-tag-fontSize: var(--primitive-typography-size-xs);
|
|
@@ -428,47 +439,47 @@
|
|
|
428
439
|
--component-button-text: var(--semantic-color-content-onAccent);
|
|
429
440
|
--component-button-radius: var(--semantic-radius-action);
|
|
430
441
|
--component-button-paddingX: var(--primitive-space-4);
|
|
431
|
-
--component-button-paddingY: var(--primitive-space-
|
|
432
|
-
--component-button-size-sm-paddingX: var(--primitive-space-
|
|
442
|
+
--component-button-paddingY: var(--primitive-space-2);
|
|
443
|
+
--component-button-size-sm-paddingX: var(--primitive-space-3);
|
|
433
444
|
--component-button-size-sm-paddingY: var(--primitive-space-1);
|
|
434
445
|
--component-button-size-sm-fontSize: var(--primitive-typography-size-xs);
|
|
435
446
|
--component-button-size-sm-iconSize: var(--primitive-size-12);
|
|
436
|
-
--component-button-size-sm-height: var(--primitive-
|
|
437
|
-
--component-button-size-sm-itemSpacing: var(--primitive-space-
|
|
447
|
+
--component-button-size-sm-height: var(--primitive-size-32);
|
|
448
|
+
--component-button-size-sm-itemSpacing: var(--primitive-space-2);
|
|
438
449
|
--component-button-size-md-paddingX: var(--primitive-space-4);
|
|
439
|
-
--component-button-size-md-paddingY: var(--primitive-space-
|
|
450
|
+
--component-button-size-md-paddingY: var(--primitive-space-2);
|
|
440
451
|
--component-button-size-md-fontSize: var(--primitive-typography-size-sm);
|
|
441
452
|
--component-button-size-md-iconSize: var(--primitive-size-16);
|
|
442
453
|
--component-button-size-md-height: var(--primitive-size-40);
|
|
443
454
|
--component-button-size-md-itemSpacing: var(--primitive-space-2);
|
|
444
455
|
--component-button-size-lg-paddingX: var(--primitive-space-6);
|
|
445
456
|
--component-button-size-lg-paddingY: var(--primitive-space-4);
|
|
446
|
-
--component-button-size-lg-fontSize: var(--primitive-typography-size-
|
|
457
|
+
--component-button-size-lg-fontSize: var(--primitive-typography-size-sm);
|
|
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
461
|
--component-button-primary-textDisabled: var(--semantic-color-content-disabled);
|
|
451
462
|
--component-button-primary-bgDisabled: var(--semantic-color-surface-muted);
|
|
452
463
|
--component-button-secondary-bg-rest: var(--semantic-color-surface-page);
|
|
453
|
-
--component-button-secondary-bg-hover: var(--semantic-color-surface-
|
|
464
|
+
--component-button-secondary-bg-hover: var(--semantic-color-surface-accentSubtle);
|
|
454
465
|
--component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
|
|
455
466
|
--component-button-secondary-border-rest: var(--semantic-color-border-interactive);
|
|
456
|
-
--component-button-secondary-border-hover: var(--semantic-color-border-
|
|
457
|
-
--component-button-secondary-border-pressed: var(--semantic-color-border-
|
|
458
|
-
--component-button-secondary-border-disabled: var(--semantic-color-border-
|
|
467
|
+
--component-button-secondary-border-hover: var(--semantic-color-border-accent);
|
|
468
|
+
--component-button-secondary-border-pressed: var(--semantic-color-border-accent);
|
|
469
|
+
--component-button-secondary-border-disabled: var(--semantic-color-border-interactive);
|
|
459
470
|
--component-button-secondary-text: var(--semantic-color-content-primary);
|
|
460
|
-
--component-input-bg: var(--semantic-color-surface-
|
|
471
|
+
--component-input-bg: var(--semantic-color-surface-page);
|
|
461
472
|
--component-input-text: var(--semantic-color-content-primary);
|
|
462
473
|
--component-input-border: var(--semantic-color-border-interactive);
|
|
463
474
|
--component-input-borderError: var(--semantic-color-feedback-error);
|
|
464
475
|
--component-input-radius: var(--semantic-radius-action);
|
|
465
|
-
--component-input-paddingX: var(--primitive-space-
|
|
476
|
+
--component-input-paddingX: var(--primitive-space-3);
|
|
466
477
|
--component-input-paddingY: var(--primitive-space-3);
|
|
467
478
|
--component-card-bg: var(--semantic-color-surface-raised);
|
|
468
479
|
--component-card-border: var(--semantic-color-border-default);
|
|
469
|
-
--component-card-radius: var(--primitive-radius-
|
|
480
|
+
--component-card-radius: var(--primitive-radius-12);
|
|
470
481
|
--component-card-padding: var(--primitive-space-6);
|
|
471
|
-
--component-card-gap: var(--
|
|
482
|
+
--component-card-gap: var(--semantic-space-scale-sm);
|
|
472
483
|
--component-lightbox-backdrop-blur: var(--primitive-blur-16);
|
|
473
484
|
|
|
474
485
|
/* ── Role aliases (shadcn vocabulary) ──────────────────────────────────── */
|
|
@@ -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,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-
|
|
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
562
|
--semantic-elevation-flat-surface: var(--semantic-color-surface-page);
|
|
552
563
|
--semantic-elevation-flat-border: var(--semantic-color-border-subtle);
|
|
@@ -558,8 +569,8 @@
|
|
|
558
569
|
--component-nav-borderActive: var(--semantic-color-surface-accent);
|
|
559
570
|
--component-nav-text: var(--semantic-color-content-secondary);
|
|
560
571
|
--component-nav-textActive: var(--semantic-color-content-primary);
|
|
561
|
-
--component-tag-background: var(--semantic-
|
|
562
|
-
--component-tag-text: var(--semantic-color-content-
|
|
572
|
+
--component-tag-background: var(--semantic-color-surface-raised);
|
|
573
|
+
--component-tag-text: var(--semantic-color-content-secondary);
|
|
563
574
|
--component-tag-border: var(--semantic-color-border-default);
|
|
564
575
|
--component-tag-activeText: var(--semantic-color-content-onAccent);
|
|
565
576
|
--component-tag-activeBackground: var(--semantic-accent-rest);
|
|
@@ -572,14 +583,14 @@
|
|
|
572
583
|
--component-button-primary-textDisabled: var(--semantic-color-content-disabled);
|
|
573
584
|
--component-button-primary-bgDisabled: var(--semantic-color-surface-muted);
|
|
574
585
|
--component-button-secondary-bg-rest: var(--semantic-color-surface-page);
|
|
575
|
-
--component-button-secondary-bg-hover: var(--semantic-color-surface-
|
|
586
|
+
--component-button-secondary-bg-hover: var(--semantic-color-surface-accentSubtle);
|
|
576
587
|
--component-button-secondary-bg-pressed: var(--semantic-color-surface-overlay);
|
|
577
588
|
--component-button-secondary-border-rest: var(--semantic-color-border-interactive);
|
|
578
|
-
--component-button-secondary-border-hover: var(--semantic-color-border-
|
|
579
|
-
--component-button-secondary-border-pressed: var(--semantic-color-border-
|
|
580
|
-
--component-button-secondary-border-disabled: var(--semantic-color-border-
|
|
589
|
+
--component-button-secondary-border-hover: var(--semantic-color-border-accent);
|
|
590
|
+
--component-button-secondary-border-pressed: var(--semantic-color-border-accent);
|
|
591
|
+
--component-button-secondary-border-disabled: var(--semantic-color-border-interactive);
|
|
581
592
|
--component-button-secondary-text: var(--semantic-color-content-primary);
|
|
582
|
-
--component-input-bg: var(--semantic-color-surface-
|
|
593
|
+
--component-input-bg: var(--semantic-color-surface-page);
|
|
583
594
|
--component-input-text: var(--semantic-color-content-primary);
|
|
584
595
|
--component-input-border: var(--semantic-color-border-interactive);
|
|
585
596
|
--component-input-borderError: var(--semantic-color-feedback-error);
|
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
|