@hpe-web/design-tokens 1.3.0 → 2.0.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/README.md +33 -6
  2. package/dist/css/locales/de.tokens.css +42 -21
  3. package/dist/css/locales/es.tokens.css +42 -21
  4. package/dist/css/locales/fr.tokens.css +42 -21
  5. package/dist/css/locales/it.tokens.css +42 -21
  6. package/dist/css/locales/ja.tokens.css +41 -19
  7. package/dist/css/locales/ko.tokens.css +41 -19
  8. package/dist/css/locales/zh.tokens.css +3 -0
  9. package/dist/css/tokens.css +128 -36
  10. package/dist/css/tokens.dark.css +195 -2
  11. package/dist/css/tokens.md-lg.css +83 -29
  12. package/dist/css/tokens.xl.css +84 -30
  13. package/package.json +25 -3
  14. package/src/component/{button.json → component.json} +244 -6
  15. package/src/hpe.resolver.json +2 -2
  16. package/src/primitive/primitives.json +1 -1
  17. package/src/semantic/color.dark.json +48 -6
  18. package/src/semantic/color.light.json +48 -6
  19. package/src/semantic/dimension.md-lg.json +436 -49
  20. package/src/semantic/dimension.xl.json +439 -52
  21. package/src/semantic/dimension.xs-sm.json +435 -48
  22. package/src/snapshots/component/5fc94136d48c018dba9a72a28d52a9ff9f7b19b607453ecfddef7467ca039c9b.json +5580 -0
  23. package/src/snapshots/current.json +8 -0
  24. package/src/snapshots/primitive/7e878b4264ed525786e7a59d0e578dc1bcb9aefb149679741793c283c7e7918e.json +7234 -0
  25. package/src/snapshots/semantic/afc82e5feb03f3c4d976dff4bcd4cedd1a5c674198d7ae3b4b4164e8694e3fc6.json +9576 -0
package/dist/css/tokens.md-lg.css CHANGED
@@ -11,6 +11,8 @@
11
11
  --hpe-web-border-width-none: var(--hpe-web-static-border-width-none);
12
12
  --hpe-web-border-width-small: var(--hpe-web-static-border-width-small);
13
13
  --hpe-web-border-width-xsmall: var(--hpe-web-static-border-width-xsmall);
14
+ --hpe-web-heading-display: "HPE Graphik XXCondensed";
15
+ --hpe-web-heading-font: "HPE Graphik", Arial, sans-serif;
14
16
  --hpe-web-heading-h1-condensed-bold-font-size: 5rem;
15
17
  --hpe-web-heading-h1-condensed-bold-font-weight: 700;
16
18
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
@@ -23,10 +25,14 @@
23
25
  --hpe-web-heading-h1-condensed-medium-font-weight: 500;
24
26
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
25
27
  --hpe-web-heading-h1-condensed-medium-line-height: 1;
26
- --hpe-web-heading-h1-default-font-size: 3.5rem;
27
- --hpe-web-heading-h1-default-font-weight: 500;
28
- --hpe-web-heading-h1-default-letter-spacing: -0.03em;
29
- --hpe-web-heading-h1-default-line-height: 1.107;
28
+ --hpe-web-heading-h1-light-font-size: 3.5rem;
29
+ --hpe-web-heading-h1-light-font-weight: 300;
30
+ --hpe-web-heading-h1-light-letter-spacing: -0.03em;
31
+ --hpe-web-heading-h1-light-line-height: 1.107;
32
+ --hpe-web-heading-h1-medium-font-size: 3.5rem;
33
+ --hpe-web-heading-h1-medium-font-weight: 500;
34
+ --hpe-web-heading-h1-medium-letter-spacing: -0.03em;
35
+ --hpe-web-heading-h1-medium-line-height: 1.107;
30
36
  --hpe-web-heading-h1-large-condensed-bold-font-size: 6rem;
31
37
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
32
38
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.0208em;
@@ -39,36 +45,63 @@
39
45
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
40
46
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.0208em;
41
47
  --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
42
- --hpe-web-heading-h1-large-default-font-size: 4.25rem;
43
- --hpe-web-heading-h1-large-default-font-weight: 500;
44
- --hpe-web-heading-h1-large-default-letter-spacing: -0.0401em;
45
- --hpe-web-heading-h1-large-default-line-height: 1.088;
46
- --hpe-web-heading-h2-default-font-size: 2.5rem;
47
- --hpe-web-heading-h2-default-font-weight: 500;
48
- --hpe-web-heading-h2-default-letter-spacing: -0.02em;
49
- --hpe-web-heading-h2-default-line-height: 1.15;
50
- --hpe-web-heading-h3-default-font-size: 2rem;
51
- --hpe-web-heading-h3-default-font-weight: 500;
52
- --hpe-web-heading-h3-default-letter-spacing: -0.01em;
53
- --hpe-web-heading-h3-default-line-height: 1.188;
54
- --hpe-web-heading-h4-default-font-size: 1.5rem;
55
- --hpe-web-heading-h4-default-font-weight: 500;
56
- --hpe-web-heading-h4-default-letter-spacing: 0em;
57
- --hpe-web-heading-h4-default-line-height: 1.25;
58
- --hpe-web-heading-h5-default-font-size: 1.125rem;
59
- --hpe-web-heading-h5-default-font-weight: 500;
60
- --hpe-web-heading-h5-default-letter-spacing: 0em;
61
- --hpe-web-heading-h5-default-line-height: 1.333;
62
- --hpe-web-heading-h6-default-font-size: 1rem;
63
- --hpe-web-heading-h6-default-font-weight: 500;
64
- --hpe-web-heading-h6-default-letter-spacing: 0em;
65
- --hpe-web-heading-h6-default-line-height: 1.375;
48
+ --hpe-web-heading-h1-large-light-font-size: 4.25rem;
49
+ --hpe-web-heading-h1-large-light-font-weight: 300;
50
+ --hpe-web-heading-h1-large-light-letter-spacing: -0.0401em;
51
+ --hpe-web-heading-h1-large-light-line-height: 1.088;
52
+ --hpe-web-heading-h1-large-medium-font-size: 4.25rem;
53
+ --hpe-web-heading-h1-large-medium-font-weight: 500;
54
+ --hpe-web-heading-h1-large-medium-letter-spacing: -0.0401em;
55
+ --hpe-web-heading-h1-large-medium-line-height: 1.088;
56
+ --hpe-web-heading-h2-light-font-size: 2.5rem;
57
+ --hpe-web-heading-h2-light-font-weight: 300;
58
+ --hpe-web-heading-h2-light-letter-spacing: -0.02em;
59
+ --hpe-web-heading-h2-light-line-height: 1.15;
60
+ --hpe-web-heading-h2-medium-font-size: 2.5rem;
61
+ --hpe-web-heading-h2-medium-font-weight: 500;
62
+ --hpe-web-heading-h2-medium-letter-spacing: -0.02em;
63
+ --hpe-web-heading-h2-medium-line-height: 1.15;
64
+ --hpe-web-heading-h3-light-font-size: 2rem;
65
+ --hpe-web-heading-h3-light-font-weight: 300;
66
+ --hpe-web-heading-h3-light-letter-spacing: -0.01em;
67
+ --hpe-web-heading-h3-light-line-height: 1.188;
68
+ --hpe-web-heading-h3-medium-font-size: 2rem;
69
+ --hpe-web-heading-h3-medium-font-weight: 500;
70
+ --hpe-web-heading-h3-medium-letter-spacing: -0.01em;
71
+ --hpe-web-heading-h3-medium-line-height: 1.188;
72
+ --hpe-web-heading-h4-light-font-size: 1.5rem;
73
+ --hpe-web-heading-h4-light-font-weight: 300;
74
+ --hpe-web-heading-h4-light-letter-spacing: 0em;
75
+ --hpe-web-heading-h4-light-line-height: 1.25;
76
+ --hpe-web-heading-h4-medium-font-size: 1.5rem;
77
+ --hpe-web-heading-h4-medium-font-weight: 500;
78
+ --hpe-web-heading-h4-medium-letter-spacing: 0em;
79
+ --hpe-web-heading-h4-medium-line-height: 1.25;
80
+ --hpe-web-heading-h5-light-font-size: 1.125rem;
81
+ --hpe-web-heading-h5-light-font-weight: 300;
82
+ --hpe-web-heading-h5-light-letter-spacing: 0em;
83
+ --hpe-web-heading-h5-light-line-height: 1.333;
84
+ --hpe-web-heading-h5-medium-font-size: 1.125rem;
85
+ --hpe-web-heading-h5-medium-font-weight: 500;
86
+ --hpe-web-heading-h5-medium-letter-spacing: 0em;
87
+ --hpe-web-heading-h5-medium-line-height: 1.333;
88
+ --hpe-web-heading-h6-light-font-size: 1rem;
89
+ --hpe-web-heading-h6-light-font-weight: 300;
90
+ --hpe-web-heading-h6-light-letter-spacing: 0em;
91
+ --hpe-web-heading-h6-light-line-height: 1.375;
92
+ --hpe-web-heading-h6-medium-font-size: 1rem;
93
+ --hpe-web-heading-h6-medium-font-weight: 500;
94
+ --hpe-web-heading-h6-medium-letter-spacing: 0em;
95
+ --hpe-web-heading-h6-medium-line-height: 1.375;
66
96
  --hpe-web-icon-large-size: var(--hpe-web-base-dimension-450);
67
97
  --hpe-web-icon-medium-size: var(--hpe-web-base-dimension-400);
68
98
  --hpe-web-icon-small-size: var(--hpe-web-base-dimension-350);
69
99
  --hpe-web-icon-xlarge-size: var(--hpe-web-base-dimension-500);
70
100
  --hpe-web-icon-xsmall-size: var(--hpe-web-base-dimension-300);
71
101
  --hpe-web-icon-xxlarge-size: var(--hpe-web-base-dimension-800);
102
+ --hpe-web-multi-mode-avatar-height: 0px;
103
+ --hpe-web-multi-mode-bento-box-bento-x: 0px;
104
+ --hpe-web-multi-mode-bento-box-bento-y: 0px;
72
105
  --hpe-web-multi-mode-button-link-large-border-radius: 9999px;
73
106
  --hpe-web-multi-mode-button-link-large-border-width: 4px;
74
107
  --hpe-web-multi-mode-button-link-large-font-size: 1.25rem;
@@ -159,6 +192,25 @@
159
192
  --hpe-web-multi-mode-button-secondary-small-min-height: 3rem;
160
193
  --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
161
194
  --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
195
+ --hpe-web-multi-mode-icon-height: 0px;
196
+ --hpe-web-multi-mode-layout-gap-x: 0px;
197
+ --hpe-web-multi-mode-layout-gap-y: 0px;
198
+ --hpe-web-multi-mode-layout-padding-y: 0px;
199
+ --hpe-web-multi-mode-live-player-gap-x: 0px;
200
+ --hpe-web-multi-mode-live-player-padding-x: 0px;
201
+ --hpe-web-multi-mode-live-player-padding-y: 0px;
202
+ --hpe-web-multi-mode-logo-collage-group-gap-x: 2.5rem;
203
+ --hpe-web-multi-mode-logo-collage-group-gap-y: 2.5rem;
204
+ --hpe-web-multi-mode-logo-collage-max-height: 3rem;
205
+ --hpe-web-multi-mode-logo-grid-padding-x: 2rem;
206
+ --hpe-web-multi-mode-logo-grid-padding-y: 2rem;
207
+ --hpe-web-multi-mode-logo-grid-width: 0px;
208
+ --hpe-web-multi-mode-logo-height: 0px;
209
+ --hpe-web-multi-mode-marquee-gap-x: 6rem;
210
+ --hpe-web-multi-mode-marquee-gap-y: 2.5rem;
211
+ --hpe-web-multi-mode-marquee-padding-y: 10rem;
212
+ --hpe-web-multi-mode-simple-marquee-padding-y: 0px;
213
+ --hpe-web-multi-mode-text-recipe-gap-y: 0px;
162
214
  --hpe-web-paragraph-body-copy-font-size: 1.125rem;
163
215
  --hpe-web-paragraph-body-copy-font-weight: 400;
164
216
  --hpe-web-paragraph-body-copy-letter-spacing: 0em;
@@ -167,6 +219,7 @@
167
219
  --hpe-web-paragraph-disclaimer-font-weight: 400;
168
220
  --hpe-web-paragraph-disclaimer-letter-spacing: 0em;
169
221
  --hpe-web-paragraph-disclaimer-line-height: 1.429;
222
+ --hpe-web-paragraph-font: "HPE Graphik", Arial, sans-serif;
170
223
  --hpe-web-paragraph-large-body-copy-font-size: 1.5rem;
171
224
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
172
225
  --hpe-web-paragraph-large-body-copy-letter-spacing: -0.01em;
@@ -175,6 +228,7 @@
175
228
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
176
229
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0em;
177
230
  --hpe-web-paragraph-small-body-copy-line-height: 1.5;
231
+ --hpe-web-quote-font: "HPE Graphik", Arial, sans-serif;
178
232
  --hpe-web-quote-large-font-size: 3rem;
179
233
  --hpe-web-quote-large-font-weight: 400;
180
234
  --hpe-web-quote-large-letter-spacing: -0.04em;
@@ -187,7 +241,7 @@
187
241
  --hpe-web-quote-small-font-weight: 400;
188
242
  --hpe-web-quote-small-letter-spacing: -0.02em;
189
243
  --hpe-web-quote-small-line-height: 1.313;
190
- --hpe-web-radius-full: 9999px;
244
+ --hpe-web-radius-full: var(--hpe-web-static-radius-full);
191
245
  --hpe-web-radius-hair: 1px;
192
246
  --hpe-web-radius-large: 16px;
193
247
  --hpe-web-radius-medium: 12px;
package/dist/css/tokens.xl.css CHANGED
@@ -11,6 +11,8 @@
11
11
  --hpe-web-border-width-none: var(--hpe-web-static-border-width-none);
12
12
  --hpe-web-border-width-small: var(--hpe-web-static-border-width-small);
13
13
  --hpe-web-border-width-xsmall: var(--hpe-web-static-border-width-xsmall);
14
+ --hpe-web-heading-display: "HPE Graphik XXCondensed";
15
+ --hpe-web-heading-font: "HPE Graphik", Arial, sans-serif;
14
16
  --hpe-web-heading-h1-condensed-bold-font-size: 6rem;
15
17
  --hpe-web-heading-h1-condensed-bold-font-weight: 700;
16
18
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
@@ -23,10 +25,14 @@
23
25
  --hpe-web-heading-h1-condensed-medium-font-weight: 500;
24
26
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
25
27
  --hpe-web-heading-h1-condensed-medium-line-height: 1;
26
- --hpe-web-heading-h1-default-font-size: 4.25rem;
27
- --hpe-web-heading-h1-default-font-weight: 500;
28
- --hpe-web-heading-h1-default-letter-spacing: -0.04em;
29
- --hpe-web-heading-h1-default-line-height: 1.088;
28
+ --hpe-web-heading-h1-light-font-size: 4.25rem;
29
+ --hpe-web-heading-h1-light-font-weight: 300;
30
+ --hpe-web-heading-h1-light-letter-spacing: -0.04em;
31
+ --hpe-web-heading-h1-light-line-height: 1.088;
32
+ --hpe-web-heading-h1-medium-font-size: 4.25rem;
33
+ --hpe-web-heading-h1-medium-font-weight: 500;
34
+ --hpe-web-heading-h1-medium-letter-spacing: -0.04em;
35
+ --hpe-web-heading-h1-medium-line-height: 1.088;
30
36
  --hpe-web-heading-h1-large-condensed-bold-font-size: 7rem;
31
37
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
32
38
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.0179em;
@@ -39,36 +45,63 @@
39
45
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
40
46
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.0179em;
41
47
  --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
42
- --hpe-web-heading-h1-large-default-font-size: 5.25rem;
43
- --hpe-web-heading-h1-large-default-font-weight: 500;
44
- --hpe-web-heading-h1-large-default-letter-spacing: -0.04em;
45
- --hpe-web-heading-h1-large-default-line-height: 1.071;
46
- --hpe-web-heading-h2-default-font-size: 3.25rem;
47
- --hpe-web-heading-h2-default-font-weight: 500;
48
- --hpe-web-heading-h2-default-letter-spacing: -0.02em;
49
- --hpe-web-heading-h2-default-line-height: 1.115;
50
- --hpe-web-heading-h3-default-font-size: 2.25rem;
51
- --hpe-web-heading-h3-default-font-weight: 500;
52
- --hpe-web-heading-h3-default-letter-spacing: -0.01em;
53
- --hpe-web-heading-h3-default-line-height: 1.167;
54
- --hpe-web-heading-h4-default-font-size: 1.75rem;
55
- --hpe-web-heading-h4-default-font-weight: 500;
56
- --hpe-web-heading-h4-default-letter-spacing: -0.01em;
57
- --hpe-web-heading-h4-default-line-height: 1.214;
58
- --hpe-web-heading-h5-default-font-size: 1.25rem;
59
- --hpe-web-heading-h5-default-font-weight: 500;
60
- --hpe-web-heading-h5-default-letter-spacing: 0em;
61
- --hpe-web-heading-h5-default-line-height: 1.3;
62
- --hpe-web-heading-h6-default-font-size: 1rem;
63
- --hpe-web-heading-h6-default-font-weight: 500;
64
- --hpe-web-heading-h6-default-letter-spacing: 0em;
65
- --hpe-web-heading-h6-default-line-height: 1.375;
48
+ --hpe-web-heading-h1-large-light-font-size: 5.25rem;
49
+ --hpe-web-heading-h1-large-light-font-weight: 300;
50
+ --hpe-web-heading-h1-large-light-letter-spacing: -0.04em;
51
+ --hpe-web-heading-h1-large-light-line-height: 1.071;
52
+ --hpe-web-heading-h1-large-medium-font-size: 5.25rem;
53
+ --hpe-web-heading-h1-large-medium-font-weight: 500;
54
+ --hpe-web-heading-h1-large-medium-letter-spacing: -0.04em;
55
+ --hpe-web-heading-h1-large-medium-line-height: 1.071;
56
+ --hpe-web-heading-h2-light-font-size: 3.25rem;
57
+ --hpe-web-heading-h2-light-font-weight: 300;
58
+ --hpe-web-heading-h2-light-letter-spacing: -0.02em;
59
+ --hpe-web-heading-h2-light-line-height: 1.115;
60
+ --hpe-web-heading-h2-medium-font-size: 3.25rem;
61
+ --hpe-web-heading-h2-medium-font-weight: 500;
62
+ --hpe-web-heading-h2-medium-letter-spacing: -0.02em;
63
+ --hpe-web-heading-h2-medium-line-height: 1.115;
64
+ --hpe-web-heading-h3-light-font-size: 2.25rem;
65
+ --hpe-web-heading-h3-light-font-weight: 300;
66
+ --hpe-web-heading-h3-light-letter-spacing: -0.01em;
67
+ --hpe-web-heading-h3-light-line-height: 1.167;
68
+ --hpe-web-heading-h3-medium-font-size: 2.25rem;
69
+ --hpe-web-heading-h3-medium-font-weight: 500;
70
+ --hpe-web-heading-h3-medium-letter-spacing: -0.01em;
71
+ --hpe-web-heading-h3-medium-line-height: 1.167;
72
+ --hpe-web-heading-h4-light-font-size: 1.75rem;
73
+ --hpe-web-heading-h4-light-font-weight: 300;
74
+ --hpe-web-heading-h4-light-letter-spacing: -0.01em;
75
+ --hpe-web-heading-h4-light-line-height: 1.214;
76
+ --hpe-web-heading-h4-medium-font-size: 1.75rem;
77
+ --hpe-web-heading-h4-medium-font-weight: 500;
78
+ --hpe-web-heading-h4-medium-letter-spacing: -0.01em;
79
+ --hpe-web-heading-h4-medium-line-height: 1.214;
80
+ --hpe-web-heading-h5-light-font-size: 1.25rem;
81
+ --hpe-web-heading-h5-light-font-weight: 300;
82
+ --hpe-web-heading-h5-light-letter-spacing: 0em;
83
+ --hpe-web-heading-h5-light-line-height: 1.3;
84
+ --hpe-web-heading-h5-medium-font-size: 1.25rem;
85
+ --hpe-web-heading-h5-medium-font-weight: 500;
86
+ --hpe-web-heading-h5-medium-letter-spacing: 0em;
87
+ --hpe-web-heading-h5-medium-line-height: 1.3;
88
+ --hpe-web-heading-h6-light-font-size: 1rem;
89
+ --hpe-web-heading-h6-light-font-weight: 300;
90
+ --hpe-web-heading-h6-light-letter-spacing: 0em;
91
+ --hpe-web-heading-h6-light-line-height: 1.375;
92
+ --hpe-web-heading-h6-medium-font-size: 1rem;
93
+ --hpe-web-heading-h6-medium-font-weight: 500;
94
+ --hpe-web-heading-h6-medium-letter-spacing: 0em;
95
+ --hpe-web-heading-h6-medium-line-height: 1.375;
66
96
  --hpe-web-icon-large-size: var(--hpe-web-base-dimension-450);
67
97
  --hpe-web-icon-medium-size: var(--hpe-web-base-dimension-400);
68
98
  --hpe-web-icon-small-size: var(--hpe-web-base-dimension-350);
69
99
  --hpe-web-icon-xlarge-size: var(--hpe-web-base-dimension-500);
70
100
  --hpe-web-icon-xsmall-size: var(--hpe-web-base-dimension-300);
71
101
  --hpe-web-icon-xxlarge-size: var(--hpe-web-base-dimension-800);
102
+ --hpe-web-multi-mode-avatar-height: 6rem;
103
+ --hpe-web-multi-mode-bento-box-bento-x: 2rem;
104
+ --hpe-web-multi-mode-bento-box-bento-y: 2rem;
72
105
  --hpe-web-multi-mode-button-link-large-border-radius: 9999px;
73
106
  --hpe-web-multi-mode-button-link-large-border-width: 4px;
74
107
  --hpe-web-multi-mode-button-link-large-font-size: 1.5rem;
@@ -136,7 +169,7 @@
136
169
  --hpe-web-multi-mode-button-secondary-large-icon-height: 1.5rem;
137
170
  --hpe-web-multi-mode-button-secondary-large-icon-width: 1.5rem;
138
171
  --hpe-web-multi-mode-button-secondary-large-line-height: 1.167;
139
- --hpe-web-multi-mode-button-secondary-large-min-height: 4.75rem;
172
+ --hpe-web-multi-mode-button-secondary-large-min-height: 4.5rem;
140
173
  --hpe-web-multi-mode-button-secondary-large-padding-x: 2.5rem;
141
174
  --hpe-web-multi-mode-button-secondary-large-padding-y: 1.375rem;
142
175
  --hpe-web-multi-mode-button-secondary-medium-border-radius: 9999px;
@@ -159,6 +192,25 @@
159
192
  --hpe-web-multi-mode-button-secondary-small-min-height: 3.5rem;
160
193
  --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
161
194
  --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
195
+ --hpe-web-multi-mode-icon-height: 3rem;
196
+ --hpe-web-multi-mode-layout-gap-x: 2.5rem;
197
+ --hpe-web-multi-mode-layout-gap-y: 2.5rem;
198
+ --hpe-web-multi-mode-layout-padding-y: 4rem;
199
+ --hpe-web-multi-mode-live-player-gap-x: 3rem;
200
+ --hpe-web-multi-mode-live-player-padding-x: 22.5rem;
201
+ --hpe-web-multi-mode-live-player-padding-y: 10rem;
202
+ --hpe-web-multi-mode-logo-collage-group-gap-x: 2.5rem;
203
+ --hpe-web-multi-mode-logo-collage-group-gap-y: 2.5rem;
204
+ --hpe-web-multi-mode-logo-collage-max-height: 4rem;
205
+ --hpe-web-multi-mode-logo-grid-padding-x: 2rem;
206
+ --hpe-web-multi-mode-logo-grid-padding-y: 2rem;
207
+ --hpe-web-multi-mode-logo-grid-width: 18rem;
208
+ --hpe-web-multi-mode-logo-height: 4rem;
209
+ --hpe-web-multi-mode-marquee-gap-x: 6rem;
210
+ --hpe-web-multi-mode-marquee-gap-y: 2.5rem;
211
+ --hpe-web-multi-mode-marquee-padding-y: 10rem;
212
+ --hpe-web-multi-mode-simple-marquee-padding-y: 6rem;
213
+ --hpe-web-multi-mode-text-recipe-gap-y: 0px;
162
214
  --hpe-web-paragraph-body-copy-font-size: 1.25rem;
163
215
  --hpe-web-paragraph-body-copy-font-weight: 400;
164
216
  --hpe-web-paragraph-body-copy-letter-spacing: -0.01em;
@@ -167,6 +219,7 @@
167
219
  --hpe-web-paragraph-disclaimer-font-weight: 400;
168
220
  --hpe-web-paragraph-disclaimer-letter-spacing: 0em;
169
221
  --hpe-web-paragraph-disclaimer-line-height: 1.429;
222
+ --hpe-web-paragraph-font: "HPE Graphik", Arial, sans-serif;
170
223
  --hpe-web-paragraph-large-body-copy-font-size: 1.75rem;
171
224
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
172
225
  --hpe-web-paragraph-large-body-copy-letter-spacing: -0.01em;
@@ -175,6 +228,7 @@
175
228
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
176
229
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0em;
177
230
  --hpe-web-paragraph-small-body-copy-line-height: 1.5;
231
+ --hpe-web-quote-font: "HPE Graphik", Arial, sans-serif;
178
232
  --hpe-web-quote-large-font-size: 3.25rem;
179
233
  --hpe-web-quote-large-font-weight: 400;
180
234
  --hpe-web-quote-large-letter-spacing: -0.04em;
@@ -187,7 +241,7 @@
187
241
  --hpe-web-quote-small-font-weight: 400;
188
242
  --hpe-web-quote-small-letter-spacing: -0.02em;
189
243
  --hpe-web-quote-small-line-height: 1.278;
190
- --hpe-web-radius-full: 9999px;
244
+ --hpe-web-radius-full: var(--hpe-web-static-radius-full);
191
245
  --hpe-web-radius-hair: 1px;
192
246
  --hpe-web-radius-large: 16px;
193
247
  --hpe-web-radius-medium: 12px;
package/package.json CHANGED
@@ -1,7 +1,26 @@
1
1
  {
2
2
  "name": "@hpe-web/design-tokens",
3
- "version": "1.3.0",
4
- "description": "HPE Design System — design tokens (CSS, JSON)",
3
+ "version": "2.0.0",
4
+ "description": "HPE Design System design tokens — CSS custom properties, DTCG 2025.10 source, locale overrides, and Style Dictionary transforms. Three-tier aliased architecture (primitive → semantic → component) preserved end-to-end as CSS var() chains.",
5
+ "keywords": [
6
+ "design-tokens",
7
+ "design-system",
8
+ "hpe",
9
+ "css-variables",
10
+ "custom-properties",
11
+ "dtcg",
12
+ "w3c-dtcg",
13
+ "style-dictionary",
14
+ "tokens",
15
+ "theming",
16
+ "dark-mode"
17
+ ],
18
+ "homepage": "https://github.com/HPE-EMU/design-system/tree/main/packages/tokens#readme",
19
+ "bugs": {
20
+ "url": "https://github.com/HPE-EMU/design-system/issues"
21
+ },
22
+ "author": "HPE Digital Design System",
23
+ "license": "UNLICENSED",
5
24
  "type": "module",
6
25
  "repository": {
7
26
  "type": "git",
@@ -21,8 +40,11 @@
21
40
  "src/",
22
41
  "transforms.mjs"
23
42
  ],
43
+ "sideEffects": [
44
+ "dist/css/*.css"
45
+ ],
24
46
  "scripts": {
25
- "build": "node sd.config.mjs"
47
+ "build": "node sd.config.mjs && node scripts/assert-dark-tokens.mjs"
26
48
  },
27
49
  "devDependencies": {
28
50
  "style-dictionary": "^5.2.0"
package/src/component/{button.json → component.json} RENAMED
@@ -46,6 +46,44 @@
46
46
  }
47
47
  },
48
48
  "link": {
49
+ "inline": {
50
+ "hover": {
51
+ "background": {
52
+ "$type": "color",
53
+ "$value": "{hpe-web.color.transparent}"
54
+ },
55
+ "borderColor": {
56
+ "$type": "color",
57
+ "$value": "{hpe-web.color.border.primary-hover}"
58
+ },
59
+ "iconColor": {
60
+ "$type": "color",
61
+ "$value": "{hpe-web.color.icon.strong}"
62
+ },
63
+ "textColor": {
64
+ "$type": "color",
65
+ "$value": "{hpe-web.color.text.strong}"
66
+ }
67
+ },
68
+ "rest": {
69
+ "background": {
70
+ "$type": "color",
71
+ "$value": "{hpe-web.color.transparent}"
72
+ },
73
+ "borderColor": {
74
+ "$type": "color",
75
+ "$value": "{hpe-web.color.border.primary}"
76
+ },
77
+ "iconColor": {
78
+ "$type": "color",
79
+ "$value": "{hpe-web.color.icon.default}"
80
+ },
81
+ "textColor": {
82
+ "$type": "color",
83
+ "$value": "{hpe-web.color.text.default}"
84
+ }
85
+ }
86
+ },
49
87
  "large": {
50
88
  "borderRadius": {
51
89
  "$type": "dimension",
@@ -220,15 +258,15 @@
220
258
  },
221
259
  "fontWeight": {
222
260
  "$type": "fontWeight",
223
- "$value": 700
261
+ "$value": 500
224
262
  },
225
263
  "iconColor": {
226
264
  "$type": "color",
227
- "$value": "{hpe-web.color.text.primary-strong}"
265
+ "$value": "{hpe-web.color.icon.primary-strong-hover}"
228
266
  },
229
267
  "textColor": {
230
268
  "$type": "color",
231
- "$value": "{hpe-web.color.text.primary-strong}"
269
+ "$value": "{hpe-web.color.text.primary-strong-hover}"
232
270
  }
233
271
  },
234
272
  "rest": {
@@ -246,11 +284,11 @@
246
284
  },
247
285
  "iconColor": {
248
286
  "$type": "color",
249
- "$value": "{hpe-web.color.text.primary}"
287
+ "$value": "{hpe-web.color.text.primary-strong}"
250
288
  },
251
289
  "textColor": {
252
290
  "$type": "color",
253
- "$value": "{hpe-web.color.text.primary}"
291
+ "$value": "{hpe-web.color.text.primary-strong}"
254
292
  }
255
293
  }
256
294
  },
@@ -703,6 +741,206 @@
703
741
  }
704
742
  }
705
743
  }
744
+ },
745
+ "card": {
746
+ "bento-box": {
747
+ "bentoX": {
748
+ "$type": "dimension",
749
+ "$value": {
750
+ "value": 32,
751
+ "unit": "px"
752
+ }
753
+ },
754
+ "bentoY": {
755
+ "$type": "dimension",
756
+ "$value": {
757
+ "value": 32,
758
+ "unit": "px"
759
+ }
760
+ }
761
+ },
762
+ "elements": {
763
+ "avatar": {
764
+ "height": {
765
+ "$type": "dimension",
766
+ "$value": {
767
+ "value": 96,
768
+ "unit": "px"
769
+ }
770
+ }
771
+ },
772
+ "icon": {
773
+ "height": {
774
+ "$type": "dimension",
775
+ "$value": {
776
+ "value": 48,
777
+ "unit": "px"
778
+ }
779
+ }
780
+ },
781
+ "logo": {
782
+ "height": {
783
+ "$type": "dimension",
784
+ "$value": {
785
+ "value": 64,
786
+ "unit": "px"
787
+ }
788
+ }
789
+ }
790
+ },
791
+ "layout": {
792
+ "gapX": {
793
+ "$type": "dimension",
794
+ "$value": {
795
+ "value": 40,
796
+ "unit": "px"
797
+ }
798
+ },
799
+ "gapY": {
800
+ "$type": "dimension",
801
+ "$value": {
802
+ "value": 40,
803
+ "unit": "px"
804
+ }
805
+ },
806
+ "paddingY": {
807
+ "$type": "dimension",
808
+ "$value": {
809
+ "value": 64,
810
+ "unit": "px"
811
+ }
812
+ }
813
+ }
814
+ },
815
+ "content-block": {
816
+ "text-recipe": {
817
+ "gapY": {
818
+ "$type": "dimension",
819
+ "$value": {
820
+ "value": 0,
821
+ "unit": "px"
822
+ }
823
+ }
824
+ }
825
+ },
826
+ "global-nav": {
827
+ "background": {
828
+ "$type": "color",
829
+ "$value": {
830
+ "colorSpace": "srgb",
831
+ "components": [
832
+ 1,
833
+ 1,
834
+ 1
835
+ ],
836
+ "hex": "#ffffff"
837
+ }
838
+ }
839
+ },
840
+ "live-player": {
841
+ "gapX": {
842
+ "$type": "dimension",
843
+ "$value": {
844
+ "value": 48,
845
+ "unit": "px"
846
+ }
847
+ },
848
+ "paddingX": {
849
+ "$type": "dimension",
850
+ "$value": {
851
+ "value": 360,
852
+ "unit": "px"
853
+ }
854
+ },
855
+ "paddingY": {
856
+ "$type": "dimension",
857
+ "$value": {
858
+ "value": 160,
859
+ "unit": "px"
860
+ }
861
+ }
862
+ },
863
+ "logo": {
864
+ "collage": {
865
+ "group": {
866
+ "gapX": {
867
+ "$type": "dimension",
868
+ "$value": {
869
+ "value": 40,
870
+ "unit": "px"
871
+ }
872
+ },
873
+ "gapY": {
874
+ "$type": "dimension",
875
+ "$value": {
876
+ "value": 40,
877
+ "unit": "px"
878
+ }
879
+ }
880
+ },
881
+ "maxHeight": {
882
+ "$type": "dimension",
883
+ "$value": {
884
+ "value": 64,
885
+ "unit": "px"
886
+ }
887
+ }
888
+ },
889
+ "grid": {
890
+ "paddingX": {
891
+ "$type": "dimension",
892
+ "$value": {
893
+ "value": 32,
894
+ "unit": "px"
895
+ }
896
+ },
897
+ "paddingY": {
898
+ "$type": "dimension",
899
+ "$value": {
900
+ "value": 32,
901
+ "unit": "px"
902
+ }
903
+ },
904
+ "width": {
905
+ "$type": "dimension",
906
+ "$value": {
907
+ "value": 288,
908
+ "unit": "px"
909
+ }
910
+ }
911
+ }
912
+ },
913
+ "marquee": {
914
+ "gapX": {
915
+ "$type": "dimension",
916
+ "$value": {
917
+ "value": 96,
918
+ "unit": "px"
919
+ }
920
+ },
921
+ "gapY": {
922
+ "$type": "dimension",
923
+ "$value": {
924
+ "value": 40,
925
+ "unit": "px"
926
+ }
927
+ },
928
+ "paddingY": {
929
+ "$type": "dimension",
930
+ "$value": {
931
+ "value": 160,
932
+ "unit": "px"
933
+ }
934
+ },
935
+ "simple-marquee": {
936
+ "paddingY": {
937
+ "$type": "dimension",
938
+ "$value": {
939
+ "value": 96,
940
+ "unit": "px"
941
+ }
942
+ }
943
+ }
706
944
  }
707
945
  }
708
- }
946
+ }