@hpe-web/design-tokens 1.0.0 → 1.2.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 (77) hide show
  1. package/README.md +22 -13
  2. package/dist/css/fonts/de.css +0 -164
  3. package/dist/css/fonts/en.css +0 -164
  4. package/dist/css/fonts/es.css +0 -164
  5. package/dist/css/fonts/fr.css +0 -164
  6. package/dist/css/fonts/it.css +0 -164
  7. package/dist/css/fonts/zh.css +1 -1
  8. package/dist/css/tokens.css +343 -264
  9. package/dist/css/tokens.dark.css +46 -63
  10. package/dist/css/tokens.md-lg.css +113 -103
  11. package/dist/css/tokens.xl.css +109 -86
  12. package/package.json +4 -8
  13. package/src/breakpoints.json +14 -0
  14. package/src/component/button.json +1382 -0
  15. package/{static → src}/fonts.json +17 -17
  16. package/src/hpe.resolver.json +94 -0
  17. package/{static → src}/locales.json +6 -6
  18. package/{dtcg/foundation/color.tokens.json → src/primitive/primitives.json} +874 -1172
  19. package/src/semantic/color.dark.json +414 -0
  20. package/src/semantic/color.light.json +415 -0
  21. package/src/semantic/dimension.md-lg.json +764 -0
  22. package/src/semantic/dimension.xl.json +764 -0
  23. package/src/semantic/dimension.xs-sm.json +764 -0
  24. package/transforms.mjs +7 -7
  25. package/dist/css/locales/de.tokens.css +0 -65
  26. package/dist/css/locales/es.tokens.css +0 -65
  27. package/dist/css/locales/fr.tokens.css +0 -65
  28. package/dist/css/locales/it.tokens.css +0 -65
  29. package/dist/css/locales/ja.tokens.css +0 -84
  30. package/dist/css/locales/ko.tokens.css +0 -84
  31. package/dist/css/locales/zh.tokens.css +0 -11
  32. package/dtcg/foundation/border-radius.tokens.json +0 -239
  33. package/dtcg/foundation/border-width.tokens.json +0 -103
  34. package/dtcg/foundation/breakpoint.tokens.json +0 -27
  35. package/dtcg/foundation/dimension.tokens.json +0 -258
  36. package/dtcg/foundation/font-family.tokens.json +0 -53
  37. package/dtcg/foundation/font-size.tokens.json +0 -408
  38. package/dtcg/foundation/font-weight.tokens.json +0 -214
  39. package/dtcg/foundation/letter-spacing.tokens.json +0 -203
  40. package/dtcg/foundation/line-height.tokens.json +0 -408
  41. package/dtcg/foundation/size.tokens.json +0 -191
  42. package/dtcg/foundation/space.tokens.json +0 -431
  43. package/dtcg/foundation/typography.tokens.json +0 -625
  44. package/dtcg/hpe.resolver.json +0 -178
  45. package/dtcg/semantic/border-radius.tokens.json +0 -149
  46. package/dtcg/semantic/border-width.tokens.json +0 -50
  47. package/dtcg/semantic/font-family.tokens.json +0 -42
  48. package/dtcg/semantic/font-size.tokens.json +0 -285
  49. package/dtcg/semantic/font-weight.tokens.json +0 -134
  50. package/dtcg/semantic/letter-spacing.tokens.json +0 -203
  51. package/dtcg/semantic/line-height.tokens.json +0 -285
  52. package/dtcg/semantic/size.tokens.json +0 -120
  53. package/dtcg/semantic/space.tokens.json +0 -275
  54. package/dtcg/semantic/typography.tokens.json +0 -536
  55. package/dtcg/theme/dark/color.tokens.json +0 -698
  56. package/dtcg/theme/light/color.tokens.json +0 -722
  57. package/dtcg/viewport/md-lg/font-size.tokens.json +0 -189
  58. package/dtcg/viewport/md-lg/font-weight.tokens.json +0 -11
  59. package/dtcg/viewport/md-lg/letter-spacing.tokens.json +0 -88
  60. package/dtcg/viewport/md-lg/line-height.tokens.json +0 -125
  61. package/dtcg/viewport/md-lg/size.tokens.json +0 -20
  62. package/dtcg/viewport/md-lg/space.tokens.json +0 -36
  63. package/dtcg/viewport/sm-xs/border-radius.tokens.json +0 -48
  64. package/dtcg/viewport/sm-xs/border-width.tokens.json +0 -15
  65. package/dtcg/viewport/sm-xs/font-size.tokens.json +0 -236
  66. package/dtcg/viewport/sm-xs/font-weight.tokens.json +0 -18
  67. package/dtcg/viewport/sm-xs/letter-spacing.tokens.json +0 -130
  68. package/dtcg/viewport/sm-xs/line-height.tokens.json +0 -236
  69. package/dtcg/viewport/sm-xs/size.tokens.json +0 -39
  70. package/dtcg/viewport/sm-xs/space.tokens.json +0 -46
  71. package/dtcg/viewport/xl/border-radius.tokens.json +0 -48
  72. package/dtcg/viewport/xl/font-size.tokens.json +0 -236
  73. package/dtcg/viewport/xl/letter-spacing.tokens.json +0 -122
  74. package/dtcg/viewport/xl/line-height.tokens.json +0 -178
  75. package/dtcg/viewport/xl/size.tokens.json +0 -84
  76. package/dtcg/viewport/xl/space.tokens.json +0 -68
  77. package/static/breakpoints.json +0 -23
package/dtcg/hpe.resolver.json DELETED
@@ -1,178 +0,0 @@
1
- {
2
- "$schema": "https://www.designtokens.org/schemas/2025.10/resolver.json",
3
- "name": "HPE Digital Design System",
4
- "version": "2025.10",
5
- "description": "Resolver for HPE design tokens across themes and viewports",
6
- "sets": {
7
- "foundation": {
8
- "description": "Primitive tokens — color ramps, dimension scales, font stacks",
9
- "sources": [
10
- {
11
- "$ref": "foundation/border-radius.tokens.json"
12
- },
13
- {
14
- "$ref": "foundation/border-width.tokens.json"
15
- },
16
- {
17
- "$ref": "foundation/color.tokens.json"
18
- },
19
- {
20
- "$ref": "foundation/dimension.tokens.json"
21
- },
22
- {
23
- "$ref": "foundation/font-family.tokens.json"
24
- },
25
- {
26
- "$ref": "foundation/font-size.tokens.json"
27
- },
28
- {
29
- "$ref": "foundation/font-weight.tokens.json"
30
- },
31
- {
32
- "$ref": "foundation/letter-spacing.tokens.json"
33
- },
34
- {
35
- "$ref": "foundation/line-height.tokens.json"
36
- },
37
- {
38
- "$ref": "foundation/size.tokens.json"
39
- },
40
- {
41
- "$ref": "foundation/space.tokens.json"
42
- },
43
- {
44
- "$ref": "foundation/typography.tokens.json"
45
- }
46
- ]
47
- },
48
- "semantic": {
49
- "description": "Semantic tokens — lg-md (992px+) scale; sm-xs viewport modifier reduces these for mobile",
50
- "sources": [
51
- {
52
- "$ref": "semantic/border-radius.tokens.json"
53
- },
54
- {
55
- "$ref": "semantic/border-width.tokens.json"
56
- },
57
- {
58
- "$ref": "semantic/font-family.tokens.json"
59
- },
60
- {
61
- "$ref": "semantic/font-size.tokens.json"
62
- },
63
- {
64
- "$ref": "semantic/font-weight.tokens.json"
65
- },
66
- {
67
- "$ref": "semantic/letter-spacing.tokens.json"
68
- },
69
- {
70
- "$ref": "semantic/line-height.tokens.json"
71
- },
72
- {
73
- "$ref": "semantic/size.tokens.json"
74
- },
75
- {
76
- "$ref": "semantic/space.tokens.json"
77
- },
78
- {
79
- "$ref": "semantic/typography.tokens.json"
80
- }
81
- ]
82
- }
83
- },
84
- "modifiers": {
85
- "theme": {
86
- "description": "Color theme — affects semantic color tokens",
87
- "contexts": {
88
- "light": [
89
- {
90
- "$ref": "theme/light/color.tokens.json"
91
- }
92
- ],
93
- "dark": [
94
- {
95
- "$ref": "theme/dark/color.tokens.json"
96
- }
97
- ]
98
- },
99
- "default": "light"
100
- },
101
- "viewport": {
102
- "description": "Viewport size — mobile-first. sm-xs is the mobile base (reduces from semantic). lg-md restores semantic values at 992px+. xl adds larger values at 1600px+.",
103
- "contexts": {
104
- "sm-xs": [
105
- {
106
- "$ref": "viewport/sm-xs/border-radius.tokens.json"
107
- },
108
- {
109
- "$ref": "viewport/sm-xs/border-width.tokens.json"
110
- },
111
- {
112
- "$ref": "viewport/sm-xs/font-size.tokens.json"
113
- },
114
- {
115
- "$ref": "viewport/sm-xs/font-weight.tokens.json"
116
- },
117
- {
118
- "$ref": "viewport/sm-xs/letter-spacing.tokens.json"
119
- },
120
- {
121
- "$ref": "viewport/sm-xs/line-height.tokens.json"
122
- },
123
- {
124
- "$ref": "viewport/sm-xs/size.tokens.json"
125
- },
126
- {
127
- "$ref": "viewport/sm-xs/space.tokens.json"
128
- }
129
- ],
130
- "lg-md": [
131
- { "$ref": "viewport/md-lg/border-radius.tokens.json" },
132
- { "$ref": "viewport/md-lg/border-width.tokens.json" },
133
- { "$ref": "viewport/md-lg/font-size.tokens.json" },
134
- { "$ref": "viewport/md-lg/font-weight.tokens.json" },
135
- { "$ref": "viewport/md-lg/letter-spacing.tokens.json" },
136
- { "$ref": "viewport/md-lg/line-height.tokens.json" },
137
- { "$ref": "viewport/md-lg/size.tokens.json" },
138
- { "$ref": "viewport/md-lg/space.tokens.json" }
139
- ],
140
- "xl": [
141
- {
142
- "$ref": "viewport/xl/border-radius.tokens.json"
143
- },
144
- {
145
- "$ref": "viewport/xl/font-size.tokens.json"
146
- },
147
- {
148
- "$ref": "viewport/xl/letter-spacing.tokens.json"
149
- },
150
- {
151
- "$ref": "viewport/xl/line-height.tokens.json"
152
- },
153
- {
154
- "$ref": "viewport/xl/size.tokens.json"
155
- },
156
- {
157
- "$ref": "viewport/xl/space.tokens.json"
158
- }
159
- ]
160
- },
161
- "default": "lg-md"
162
- }
163
- },
164
- "resolutionOrder": [
165
- {
166
- "$ref": "#/sets/foundation"
167
- },
168
- {
169
- "$ref": "#/sets/semantic"
170
- },
171
- {
172
- "$ref": "#/modifiers/theme"
173
- },
174
- {
175
- "$ref": "#/modifiers/viewport"
176
- }
177
- ]
178
- }
package/dtcg/semantic/border-radius.tokens.json DELETED
@@ -1,149 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "multi-mode": {
4
- "button": {
5
- "anchor": {
6
- "large": {
7
- "border-radius": {
8
- "$value": {
9
- "value": 9999,
10
- "unit": "px"
11
- }
12
- }
13
- },
14
- "medium": {
15
- "border-radius": {
16
- "$value": {
17
- "value": 9999,
18
- "unit": "px"
19
- }
20
- }
21
- },
22
- "small": {
23
- "border-radius": {
24
- "$value": {
25
- "value": 9999,
26
- "unit": "px"
27
- }
28
- }
29
- }
30
- },
31
- "primary": {
32
- "large": {
33
- "border-radius": {
34
- "$value": {
35
- "value": 9999,
36
- "unit": "px"
37
- }
38
- }
39
- },
40
- "medium": {
41
- "border-radius": {
42
- "$value": {
43
- "value": 9999,
44
- "unit": "px"
45
- }
46
- }
47
- },
48
- "small": {
49
- "border-radius": {
50
- "$value": {
51
- "value": 9999,
52
- "unit": "px"
53
- }
54
- }
55
- }
56
- },
57
- "secondary": {
58
- "large": {
59
- "border-radius": {
60
- "$value": {
61
- "value": 9999,
62
- "unit": "px"
63
- }
64
- }
65
- },
66
- "medium": {
67
- "border-radius": {
68
- "$value": {
69
- "value": 9999,
70
- "unit": "px"
71
- }
72
- }
73
- },
74
- "small": {
75
- "border-radius": {
76
- "$value": {
77
- "value": 9999,
78
- "unit": "px"
79
- }
80
- }
81
- }
82
- }
83
- }
84
- },
85
- "radius": {
86
- "full": {
87
- "$value": {
88
- "value": 9999,
89
- "unit": "px"
90
- }
91
- },
92
- "hair": {
93
- "$value": {
94
- "value": 1,
95
- "unit": "px"
96
- }
97
- },
98
- "large": {
99
- "$value": {
100
- "value": 12,
101
- "unit": "px"
102
- }
103
- },
104
- "medium": {
105
- "$value": {
106
- "value": 8,
107
- "unit": "px"
108
- }
109
- },
110
- "none": {
111
- "$value": {
112
- "value": 0,
113
- "unit": "px"
114
- }
115
- },
116
- "small": {
117
- "$value": {
118
- "value": 6,
119
- "unit": "px"
120
- }
121
- },
122
- "xlarge": {
123
- "$value": {
124
- "value": 16,
125
- "unit": "px"
126
- }
127
- },
128
- "xsmall": {
129
- "$value": {
130
- "value": 4,
131
- "unit": "px"
132
- }
133
- },
134
- "xxlarge": {
135
- "$value": {
136
- "value": 24,
137
- "unit": "px"
138
- }
139
- },
140
- "xxsmall": {
141
- "$value": {
142
- "value": 1,
143
- "unit": "px"
144
- }
145
- }
146
- }
147
- },
148
- "$type": "dimension"
149
- }
package/dtcg/semantic/border-width.tokens.json DELETED
@@ -1,50 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "multi-mode": {
4
- "button": {
5
- "anchor": {
6
- "medium": {
7
- "border-width": {
8
- "$value": "4px"
9
- }
10
- },
11
- "small": {
12
- "border-width": {
13
- "$value": "4px"
14
- }
15
- }
16
- },
17
- "primary": {
18
- "medium": {
19
- "border-width": {
20
- "$value": "0px"
21
- }
22
- },
23
- "small": {
24
- "border-width": {
25
- "$value": "0px"
26
- }
27
- }
28
- },
29
- "secondary": {
30
- "large": {
31
- "border-width": {
32
- "$value": "4px"
33
- }
34
- },
35
- "medium": {
36
- "border-width": {
37
- "$value": "4px"
38
- }
39
- },
40
- "small": {
41
- "border-width": {
42
- "$value": "3px"
43
- }
44
- }
45
- }
46
- }
47
- }
48
- },
49
- "$type": "borderWidth"
50
- }
package/dtcg/semantic/font-family.tokens.json DELETED
@@ -1,42 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "display": {
4
- "font": {
5
- "$value": [
6
- "HPE Graphik XXCondensed",
7
- "Arial Narrow",
8
- "Arial",
9
- "sans-serif"
10
- ]
11
- }
12
- },
13
- "heading": {
14
- "font": {
15
- "$value": [
16
- "HPE Graphik",
17
- "Arial",
18
- "sans-serif"
19
- ]
20
- }
21
- },
22
- "quote": {
23
- "font": {
24
- "$value": [
25
- "HPE Graphik",
26
- "Arial",
27
- "sans-serif"
28
- ]
29
- }
30
- },
31
- "text": {
32
- "font": {
33
- "$value": [
34
- "HPE Graphik",
35
- "Arial",
36
- "sans-serif"
37
- ]
38
- }
39
- }
40
- },
41
- "$type": "fontFamily"
42
- }
package/dtcg/semantic/font-size.tokens.json DELETED
@@ -1,285 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "display": {
4
- "bold": {
5
- "_2xlarge": {
6
- "font-size": {
7
- "$value": {
8
- "value": 144,
9
- "unit": "px"
10
- }
11
- }
12
- },
13
- "large": {
14
- "font-size": {
15
- "$value": {
16
- "value": 80,
17
- "unit": "px"
18
- }
19
- }
20
- },
21
- "xlarge": {
22
- "font-size": {
23
- "$value": {
24
- "value": 96,
25
- "unit": "px"
26
- }
27
- }
28
- }
29
- },
30
- "light": {
31
- "_2xlarge": {
32
- "font-size": {
33
- "$value": {
34
- "value": 144,
35
- "unit": "px"
36
- }
37
- }
38
- },
39
- "large": {
40
- "font-size": {
41
- "$value": {
42
- "value": 80,
43
- "unit": "px"
44
- }
45
- }
46
- },
47
- "xlarge": {
48
- "font-size": {
49
- "$value": {
50
- "value": 96,
51
- "unit": "px"
52
- }
53
- }
54
- }
55
- },
56
- "regular": {
57
- "_2xlarge": {
58
- "font-size": {
59
- "$value": {
60
- "value": 144,
61
- "unit": "px"
62
- }
63
- }
64
- },
65
- "large": {
66
- "font-size": {
67
- "$value": {
68
- "value": 80,
69
- "unit": "px"
70
- }
71
- }
72
- },
73
- "xlarge": {
74
- "font-size": {
75
- "$value": {
76
- "value": 96,
77
- "unit": "px"
78
- }
79
- }
80
- }
81
- }
82
- },
83
- "heading": {
84
- "_3xsmall": {
85
- "font-size": {
86
- "$value": {
87
- "value": 16,
88
- "unit": "px"
89
- }
90
- }
91
- },
92
- "large": {
93
- "font-size": {
94
- "$value": {
95
- "value": 56,
96
- "unit": "px"
97
- }
98
- }
99
- },
100
- "medium": {
101
- "font-size": {
102
- "$value": {
103
- "value": 40,
104
- "unit": "px"
105
- }
106
- }
107
- },
108
- "small": {
109
- "font-size": {
110
- "$value": {
111
- "value": 32,
112
- "unit": "px"
113
- }
114
- }
115
- },
116
- "xlarge": {
117
- "font-size": {
118
- "$value": {
119
- "value": 68,
120
- "unit": "px"
121
- }
122
- }
123
- },
124
- "xsmall": {
125
- "font-size": {
126
- "$value": {
127
- "value": 24,
128
- "unit": "px"
129
- }
130
- }
131
- },
132
- "xxsmall": {
133
- "font-size": {
134
- "$value": {
135
- "value": 18,
136
- "unit": "px"
137
- }
138
- }
139
- }
140
- },
141
- "multi-mode": {
142
- "button": {
143
- "anchor": {
144
- "large": {
145
- "font-size": {
146
- "$value": {
147
- "value": 20,
148
- "unit": "px"
149
- }
150
- }
151
- },
152
- "medium": {
153
- "font-size": {
154
- "$value": {
155
- "value": 18,
156
- "unit": "px"
157
- }
158
- }
159
- },
160
- "small": {
161
- "font-size": {
162
- "$value": {
163
- "value": 16,
164
- "unit": "px"
165
- }
166
- }
167
- }
168
- },
169
- "primary": {
170
- "large": {
171
- "font-size": {
172
- "$value": {
173
- "value": 20,
174
- "unit": "px"
175
- }
176
- }
177
- },
178
- "medium": {
179
- "font-size": {
180
- "$value": {
181
- "value": 18,
182
- "unit": "px"
183
- }
184
- }
185
- },
186
- "small": {
187
- "font-size": {
188
- "$value": {
189
- "value": 16,
190
- "unit": "px"
191
- }
192
- }
193
- }
194
- },
195
- "secondary": {
196
- "large": {
197
- "font-size": {
198
- "$value": {
199
- "value": 20,
200
- "unit": "px"
201
- }
202
- }
203
- },
204
- "medium": {
205
- "font-size": {
206
- "$value": {
207
- "value": 18,
208
- "unit": "px"
209
- }
210
- }
211
- },
212
- "small": {
213
- "font-size": {
214
- "$value": {
215
- "value": 16,
216
- "unit": "px"
217
- }
218
- }
219
- }
220
- }
221
- }
222
- },
223
- "quote": {
224
- "large": {
225
- "font-size": {
226
- "$value": {
227
- "value": 48,
228
- "unit": "px"
229
- }
230
- }
231
- },
232
- "medium": {
233
- "font-size": {
234
- "$value": {
235
- "value": 40,
236
- "unit": "px"
237
- }
238
- }
239
- },
240
- "small": {
241
- "font-size": {
242
- "$value": {
243
- "value": 32,
244
- "unit": "px"
245
- }
246
- }
247
- }
248
- },
249
- "text": {
250
- "large": {
251
- "font-size": {
252
- "$value": {
253
- "value": 24,
254
- "unit": "px"
255
- }
256
- }
257
- },
258
- "medium": {
259
- "font-size": {
260
- "$value": {
261
- "value": 18,
262
- "unit": "px"
263
- }
264
- }
265
- },
266
- "small": {
267
- "font-size": {
268
- "$value": {
269
- "value": 16,
270
- "unit": "px"
271
- }
272
- }
273
- },
274
- "xsmall": {
275
- "font-size": {
276
- "$value": {
277
- "value": 14,
278
- "unit": "px"
279
- }
280
- }
281
- }
282
- }
283
- },
284
- "$type": "dimension"
285
- }