@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/foundation/size.tokens.json DELETED
@@ -1,191 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "button": {
4
- "anchor": {
5
- "large": {
6
- "min-height": {
7
- "$value": "{hpe-web.multi-mode.button.anchor.large.min-height}"
8
- }
9
- },
10
- "medium": {
11
- "min-height": {
12
- "$value": "{hpe-web.multi-mode.button.anchor.medium.min-height}"
13
- }
14
- },
15
- "small": {
16
- "min-height": {
17
- "$value": "{hpe-web.multi-mode.button.anchor.small.min-height}"
18
- }
19
- }
20
- },
21
- "primary": {
22
- "large": {
23
- "icon-width": {
24
- "$value": "{hpe-web.multi-mode.button.primary.large.icon-width}"
25
- },
26
- "min-height": {
27
- "$value": "{hpe-web.multi-mode.button.primary.large.min-height}"
28
- }
29
- },
30
- "medium": {
31
- "icon-width": {
32
- "$value": "{hpe-web.multi-mode.button.primary.medium.icon-width}"
33
- },
34
- "min-height": {
35
- "$value": "{hpe-web.multi-mode.button.primary.medium.min-height}"
36
- }
37
- },
38
- "small": {
39
- "icon-width": {
40
- "$value": "{hpe-web.multi-mode.button.primary.small.icon-width}"
41
- },
42
- "min-height": {
43
- "$value": "{hpe-web.multi-mode.button.primary.small.min-height}"
44
- }
45
- }
46
- },
47
- "secondary": {
48
- "large": {
49
- "icon-height": {
50
- "$value": "{hpe-web.multi-mode.button.secondary.large.icon-height}"
51
- },
52
- "min-height": {
53
- "$value": "{hpe-web.multi-mode.button.secondary.large.min-height}"
54
- }
55
- },
56
- "medium": {
57
- "icon-height": {
58
- "$value": "{hpe-web.multi-mode.button.secondary.medium.icon-height}"
59
- },
60
- "min-height": {
61
- "$value": "{hpe-web.multi-mode.button.secondary.medium.min-height}"
62
- }
63
- },
64
- "small": {
65
- "icon-height": {
66
- "$value": "{hpe-web.multi-mode.button.secondary.small.icon-height}"
67
- },
68
- "min-height": {
69
- "$value": "{hpe-web.multi-mode.button.secondary.small.min-height}"
70
- }
71
- }
72
- }
73
- },
74
- "multi-mode": {
75
- "button": {
76
- "anchor": {
77
- "large": {
78
- "border-width": {
79
- "$value": "4px"
80
- },
81
- "icon-height": {
82
- "$value": "24px"
83
- },
84
- "icon-width": {
85
- "$value": "24px"
86
- },
87
- "min-height": {
88
- "$value": "20px"
89
- }
90
- },
91
- "medium": {
92
- "icon-height": {
93
- "$value": "20px"
94
- },
95
- "icon-width": {
96
- "$value": "20px"
97
- },
98
- "min-height": {
99
- "$value": "24px"
100
- }
101
- },
102
- "small": {
103
- "icon-height": {
104
- "$value": "16px"
105
- },
106
- "icon-width": {
107
- "$value": "16px"
108
- },
109
- "min-height": {
110
- "$value": "14px"
111
- }
112
- }
113
- },
114
- "primary": {
115
- "large": {
116
- "border-width": {
117
- "$value": "0px"
118
- },
119
- "icon-height": {
120
- "$value": "24px"
121
- },
122
- "icon-width": {
123
- "$value": "24px"
124
- },
125
- "min-height": {
126
- "$value": "72px"
127
- }
128
- },
129
- "medium": {
130
- "icon-height": {
131
- "$value": "20px"
132
- },
133
- "icon-width": {
134
- "$value": "20px"
135
- },
136
- "min-height": {
137
- "$value": "64px"
138
- }
139
- },
140
- "small": {
141
- "icon-height": {
142
- "$value": "16px"
143
- },
144
- "icon-width": {
145
- "$value": "16px"
146
- },
147
- "min-height": {
148
- "$value": "56px"
149
- }
150
- }
151
- },
152
- "secondary": {
153
- "large": {
154
- "icon-height": {
155
- "$value": "24px"
156
- },
157
- "icon-width": {
158
- "$value": "24px"
159
- },
160
- "min-height": {
161
- "$value": "76px"
162
- }
163
- },
164
- "medium": {
165
- "icon-height": {
166
- "$value": "20px"
167
- },
168
- "icon-width": {
169
- "$value": "20px"
170
- },
171
- "min-height": {
172
- "$value": "64px"
173
- }
174
- },
175
- "small": {
176
- "icon-height": {
177
- "$value": "16px"
178
- },
179
- "icon-width": {
180
- "$value": "16px"
181
- },
182
- "min-height": {
183
- "$value": "56px"
184
- }
185
- }
186
- }
187
- }
188
- }
189
- },
190
- "$type": "size"
191
- }
package/dtcg/foundation/space.tokens.json DELETED
@@ -1,431 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "button": {
4
- "anchor": {
5
- "large": {
6
- "gap-x": {
7
- "$value": "{hpe-web.multi-mode.button.anchor.large.gap-x}"
8
- },
9
- "padding-x": {
10
- "$value": "{hpe-web.multi-mode.button.anchor.large.padding-x}"
11
- },
12
- "padding-y": {
13
- "$value": "{hpe-web.multi-mode.button.anchor.large.padding-y}"
14
- }
15
- },
16
- "medium": {
17
- "gap-x": {
18
- "$value": "{hpe-web.multi-mode.button.anchor.medium.gap-x}"
19
- },
20
- "padding-x": {
21
- "$value": "{hpe-web.multi-mode.button.anchor.medium.padding-x}"
22
- },
23
- "padding-y": {
24
- "$value": "{hpe-web.multi-mode.button.anchor.medium.padding-y}"
25
- }
26
- },
27
- "small": {
28
- "gap-x": {
29
- "$value": "{hpe-web.multi-mode.button.anchor.small.gap-x}"
30
- },
31
- "padding-x": {
32
- "$value": "{hpe-web.multi-mode.button.anchor.small.padding-x}"
33
- },
34
- "padding-y": {
35
- "$value": "{hpe-web.multi-mode.button.anchor.small.padding-y}"
36
- }
37
- }
38
- },
39
- "primary": {
40
- "large": {
41
- "gap-x": {
42
- "$value": "{hpe-web.multi-mode.button.primary.large.gap-x}"
43
- },
44
- "padding-x": {
45
- "$value": "{hpe-web.multi-mode.button.primary.large.padding-x}"
46
- },
47
- "padding-y": {
48
- "$value": "{hpe-web.multi-mode.button.primary.large.padding-y}"
49
- }
50
- },
51
- "medium": {
52
- "gap-x": {
53
- "$value": "{hpe-web.multi-mode.button.primary.medium.gap-x}"
54
- },
55
- "padding-x": {
56
- "$value": "{hpe-web.multi-mode.button.primary.medium.padding-x}"
57
- },
58
- "padding-y": {
59
- "$value": "{hpe-web.multi-mode.button.primary.medium.padding-y}"
60
- }
61
- },
62
- "small": {
63
- "gap-x": {
64
- "$value": "{hpe-web.multi-mode.button.primary.small.gap-x}"
65
- },
66
- "padding-x": {
67
- "$value": "{hpe-web.multi-mode.button.primary.small.padding-x}"
68
- },
69
- "padding-y": {
70
- "$value": "{hpe-web.multi-mode.button.primary.small.padding-y}"
71
- }
72
- }
73
- },
74
- "secondary": {
75
- "large": {
76
- "gap-x": {
77
- "$value": "{hpe-web.multi-mode.button.secondary.large.gap-x}"
78
- },
79
- "padding-x": {
80
- "$value": "{hpe-web.multi-mode.button.secondary.large.padding-x}"
81
- },
82
- "padding-y": {
83
- "$value": "{hpe-web.multi-mode.button.secondary.large.padding-y}"
84
- }
85
- },
86
- "medium": {
87
- "gap-x": {
88
- "$value": "{hpe-web.multi-mode.button.secondary.medium.gap-x}"
89
- },
90
- "padding-x": {
91
- "$value": "{hpe-web.multi-mode.button.secondary.medium.padding-x}"
92
- },
93
- "padding-y": {
94
- "$value": "{hpe-web.multi-mode.button.secondary.medium.padding-y}"
95
- }
96
- },
97
- "small": {
98
- "gap-x": {
99
- "$value": "{hpe-web.multi-mode.button.secondary.small.gap-x}"
100
- },
101
- "padding-x": {
102
- "$value": "{hpe-web.multi-mode.button.secondary.small.padding-x}"
103
- },
104
- "padding-y": {
105
- "$value": "{hpe-web.multi-mode.button.secondary.small.padding-y}"
106
- }
107
- }
108
- }
109
- },
110
- "multi-mode": {
111
- "button": {
112
- "anchor": {
113
- "large": {
114
- "gap-x": {
115
- "$value": {
116
- "value": 12,
117
- "unit": "px"
118
- }
119
- },
120
- "padding-x": {
121
- "$value": {
122
- "value": 0,
123
- "unit": "px"
124
- }
125
- },
126
- "padding-y": {
127
- "$value": {
128
- "value": 0,
129
- "unit": "px"
130
- }
131
- }
132
- },
133
- "medium": {
134
- "gap-x": {
135
- "$value": {
136
- "value": 12,
137
- "unit": "px"
138
- }
139
- },
140
- "padding-x": {
141
- "$value": {
142
- "value": 0,
143
- "unit": "px"
144
- }
145
- },
146
- "padding-y": {
147
- "$value": {
148
- "value": 0,
149
- "unit": "px"
150
- }
151
- }
152
- },
153
- "small": {
154
- "gap-x": {
155
- "$value": {
156
- "value": 8,
157
- "unit": "px"
158
- }
159
- },
160
- "padding-x": {
161
- "$value": {
162
- "value": 0,
163
- "unit": "px"
164
- }
165
- },
166
- "padding-y": {
167
- "$value": {
168
- "value": 0,
169
- "unit": "px"
170
- }
171
- }
172
- }
173
- },
174
- "primary": {
175
- "large": {
176
- "gap-x": {
177
- "$value": {
178
- "value": 12,
179
- "unit": "px"
180
- }
181
- },
182
- "padding-x": {
183
- "$value": {
184
- "value": 40,
185
- "unit": "px"
186
- }
187
- },
188
- "padding-y": {
189
- "$value": {
190
- "value": 22,
191
- "unit": "px"
192
- }
193
- }
194
- },
195
- "medium": {
196
- "gap-x": {
197
- "$value": {
198
- "value": 12,
199
- "unit": "px"
200
- }
201
- },
202
- "padding-x": {
203
- "$value": {
204
- "value": 36,
205
- "unit": "px"
206
- }
207
- },
208
- "padding-y": {
209
- "$value": {
210
- "value": 20,
211
- "unit": "px"
212
- }
213
- }
214
- },
215
- "small": {
216
- "gap-x": {
217
- "$value": {
218
- "value": 8,
219
- "unit": "px"
220
- }
221
- },
222
- "padding-x": {
223
- "$value": {
224
- "value": 24,
225
- "unit": "px"
226
- }
227
- },
228
- "padding-y": {
229
- "$value": {
230
- "value": 12,
231
- "unit": "px"
232
- }
233
- }
234
- }
235
- },
236
- "secondary": {
237
- "large": {
238
- "gap-x": {
239
- "$value": {
240
- "value": 12,
241
- "unit": "px"
242
- }
243
- },
244
- "padding-x": {
245
- "$value": {
246
- "value": 40,
247
- "unit": "px"
248
- }
249
- },
250
- "padding-y": {
251
- "$value": {
252
- "value": 22,
253
- "unit": "px"
254
- }
255
- }
256
- },
257
- "medium": {
258
- "gap-x": {
259
- "$value": {
260
- "value": 12,
261
- "unit": "px"
262
- }
263
- },
264
- "padding-x": {
265
- "$value": {
266
- "value": 36,
267
- "unit": "px"
268
- }
269
- },
270
- "padding-y": {
271
- "$value": {
272
- "value": 20,
273
- "unit": "px"
274
- }
275
- }
276
- },
277
- "small": {
278
- "gap-x": {
279
- "$value": {
280
- "value": 8,
281
- "unit": "px"
282
- }
283
- },
284
- "padding-x": {
285
- "$value": {
286
- "value": 24,
287
- "unit": "px"
288
- }
289
- },
290
- "padding-y": {
291
- "$value": {
292
- "value": 12,
293
- "unit": "px"
294
- }
295
- }
296
- }
297
- }
298
- }
299
- },
300
- "spacing": {
301
- "3xlarge": {
302
- "$value": {
303
- "value": 96,
304
- "unit": "px"
305
- }
306
- },
307
- "3xsmall": {
308
- "$value": {
309
- "value": 8,
310
- "unit": "px"
311
- }
312
- },
313
- "4xlarge": {
314
- "$value": {
315
- "value": 160,
316
- "unit": "px"
317
- }
318
- },
319
- "4xsmall": {
320
- "$value": {
321
- "value": 4,
322
- "unit": "px"
323
- }
324
- },
325
- "hair": {
326
- "$value": {
327
- "value": 1,
328
- "unit": "px"
329
- }
330
- },
331
- "large": {
332
- "$value": {
333
- "value": 40,
334
- "unit": "px"
335
- }
336
- },
337
- "medium": {
338
- "$value": {
339
- "value": 32,
340
- "unit": "px"
341
- }
342
- },
343
- "none": {
344
- "$value": {
345
- "value": 0,
346
- "unit": "px"
347
- }
348
- },
349
- "small": {
350
- "$value": {
351
- "value": 24,
352
- "unit": "px"
353
- }
354
- },
355
- "xlarge": {
356
- "$value": {
357
- "value": 48,
358
- "unit": "px"
359
- }
360
- },
361
- "xsmall": {
362
- "$value": {
363
- "value": 16,
364
- "unit": "px"
365
- }
366
- },
367
- "xxlarge": {
368
- "$value": {
369
- "value": 64,
370
- "unit": "px"
371
- }
372
- },
373
- "xxsmall": {
374
- "$value": {
375
- "value": 12,
376
- "unit": "px"
377
- }
378
- }
379
- },
380
- "static": {
381
- "spacing": {
382
- "3xlarge": {
383
- "$value": "{hpe-web.base.dimension.2400}"
384
- },
385
- "3xsmall": {
386
- "$value": "{hpe-web.base.dimension.150}"
387
- },
388
- "4xlarge": {
389
- "$value": "{hpe-web.base.dimension.3200}"
390
- },
391
- "4xsmall": {
392
- "$value": "{hpe-web.base.dimension.100}"
393
- },
394
- "5xsmall": {
395
- "$value": "{hpe-web.base.dimension.75}"
396
- },
397
- "6xsmall": {
398
- "$value": "{hpe-web.base.dimension.50}"
399
- },
400
- "hair": {
401
- "$value": "{hpe-web.base.dimension.25}"
402
- },
403
- "large": {
404
- "$value": "{hpe-web.base.dimension.800}"
405
- },
406
- "medium": {
407
- "$value": "{hpe-web.base.dimension.600}"
408
- },
409
- "none": {
410
- "$value": "{hpe-web.base.dimension.0}"
411
- },
412
- "small": {
413
- "$value": "{hpe-web.base.dimension.400}"
414
- },
415
- "xlarge": {
416
- "$value": "{hpe-web.base.dimension.1200}"
417
- },
418
- "xsmall": {
419
- "$value": "{hpe-web.base.dimension.300}"
420
- },
421
- "xxlarge": {
422
- "$value": "{hpe-web.base.dimension.1600}"
423
- },
424
- "xxsmall": {
425
- "$value": "{hpe-web.base.dimension.200}"
426
- }
427
- }
428
- }
429
- },
430
- "$type": "dimension"
431
- }