@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
@@ -1,536 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "multi-mode": {
4
- "button": {
5
- "anchor": {
6
- "large": {
7
- "$typography": {
8
- "$value": {
9
- "fontSize": {
10
- "value": 20,
11
- "unit": "px"
12
- },
13
- "fontWeight": 400,
14
- "lineHeight": 1.4
15
- },
16
- "$type": "typography"
17
- }
18
- },
19
- "medium": {
20
- "$typography": {
21
- "$value": {
22
- "fontSize": {
23
- "value": 18,
24
- "unit": "px"
25
- },
26
- "fontWeight": 400,
27
- "lineHeight": 1.3333
28
- },
29
- "$type": "typography"
30
- }
31
- },
32
- "small": {
33
- "$typography": {
34
- "$value": {
35
- "fontSize": {
36
- "value": 16,
37
- "unit": "px"
38
- },
39
- "fontWeight": 400,
40
- "lineHeight": 1.5
41
- },
42
- "$type": "typography"
43
- }
44
- }
45
- },
46
- "primary": {
47
- "large": {
48
- "$typography": {
49
- "$value": {
50
- "fontSize": {
51
- "value": 20,
52
- "unit": "px"
53
- },
54
- "fontWeight": 400,
55
- "lineHeight": 1.4
56
- },
57
- "$type": "typography"
58
- }
59
- },
60
- "medium": {
61
- "$typography": {
62
- "$value": {
63
- "fontSize": {
64
- "value": 18,
65
- "unit": "px"
66
- },
67
- "fontWeight": 400,
68
- "lineHeight": 1.3333
69
- },
70
- "$type": "typography"
71
- }
72
- },
73
- "small": {
74
- "$typography": {
75
- "$value": {
76
- "fontSize": {
77
- "value": 16,
78
- "unit": "px"
79
- },
80
- "fontWeight": 400,
81
- "lineHeight": 1.5
82
- },
83
- "$type": "typography"
84
- }
85
- }
86
- },
87
- "secondary": {
88
- "large": {
89
- "$typography": {
90
- "$value": {
91
- "fontSize": {
92
- "value": 20,
93
- "unit": "px"
94
- },
95
- "fontWeight": 400,
96
- "lineHeight": 1.4
97
- },
98
- "$type": "typography"
99
- }
100
- },
101
- "medium": {
102
- "$typography": {
103
- "$value": {
104
- "fontSize": {
105
- "value": 18,
106
- "unit": "px"
107
- },
108
- "fontWeight": 400,
109
- "lineHeight": 1.3333
110
- },
111
- "$type": "typography"
112
- }
113
- },
114
- "small": {
115
- "$typography": {
116
- "$value": {
117
- "fontSize": {
118
- "value": 16,
119
- "unit": "px"
120
- },
121
- "fontWeight": 400,
122
- "lineHeight": 1.5
123
- },
124
- "$type": "typography"
125
- }
126
- }
127
- }
128
- }
129
- },
130
- "display": {
131
- "bold": {
132
- "_2xlarge": {
133
- "$typography": {
134
- "$value": {
135
- "fontSize": {
136
- "value": 144,
137
- "unit": "px"
138
- },
139
- "fontWeight": 700,
140
- "lineHeight": 1,
141
- "letterSpacing": {
142
- "value": 2,
143
- "unit": "px"
144
- }
145
- },
146
- "$type": "typography"
147
- }
148
- },
149
- "large": {
150
- "$typography": {
151
- "$value": {
152
- "fontSize": {
153
- "value": 80,
154
- "unit": "px"
155
- },
156
- "fontWeight": 700,
157
- "lineHeight": 1,
158
- "letterSpacing": {
159
- "value": 1.6,
160
- "unit": "px"
161
- }
162
- },
163
- "$type": "typography"
164
- }
165
- },
166
- "xlarge": {
167
- "$typography": {
168
- "$value": {
169
- "fontSize": {
170
- "value": 96,
171
- "unit": "px"
172
- },
173
- "fontWeight": 700,
174
- "lineHeight": 1,
175
- "letterSpacing": {
176
- "value": 2,
177
- "unit": "px"
178
- }
179
- },
180
- "$type": "typography"
181
- }
182
- }
183
- },
184
- "light": {
185
- "_2xlarge": {
186
- "$typography": {
187
- "$value": {
188
- "fontSize": {
189
- "value": 144,
190
- "unit": "px"
191
- },
192
- "fontWeight": 300,
193
- "lineHeight": 1,
194
- "letterSpacing": {
195
- "value": 2,
196
- "unit": "px"
197
- }
198
- },
199
- "$type": "typography"
200
- }
201
- },
202
- "large": {
203
- "$typography": {
204
- "$value": {
205
- "fontSize": {
206
- "value": 80,
207
- "unit": "px"
208
- },
209
- "fontWeight": 300,
210
- "lineHeight": 1,
211
- "letterSpacing": {
212
- "value": 1.6,
213
- "unit": "px"
214
- }
215
- },
216
- "$type": "typography"
217
- }
218
- },
219
- "xlarge": {
220
- "$typography": {
221
- "$value": {
222
- "fontSize": {
223
- "value": 96,
224
- "unit": "px"
225
- },
226
- "fontWeight": 300,
227
- "lineHeight": 1,
228
- "letterSpacing": {
229
- "value": 2,
230
- "unit": "px"
231
- }
232
- },
233
- "$type": "typography"
234
- }
235
- }
236
- },
237
- "regular": {
238
- "_2xlarge": {
239
- "$typography": {
240
- "$value": {
241
- "fontSize": {
242
- "value": 144,
243
- "unit": "px"
244
- },
245
- "fontWeight": 400,
246
- "lineHeight": 1,
247
- "letterSpacing": {
248
- "value": 2,
249
- "unit": "px"
250
- }
251
- },
252
- "$type": "typography"
253
- }
254
- },
255
- "large": {
256
- "$typography": {
257
- "$value": {
258
- "fontSize": {
259
- "value": 80,
260
- "unit": "px"
261
- },
262
- "fontWeight": 500,
263
- "lineHeight": 1,
264
- "letterSpacing": {
265
- "value": 1.6,
266
- "unit": "px"
267
- }
268
- },
269
- "$type": "typography"
270
- }
271
- },
272
- "xlarge": {
273
- "$typography": {
274
- "$value": {
275
- "fontSize": {
276
- "value": 96,
277
- "unit": "px"
278
- },
279
- "fontWeight": 500,
280
- "lineHeight": 1,
281
- "letterSpacing": {
282
- "value": 2,
283
- "unit": "px"
284
- }
285
- },
286
- "$type": "typography"
287
- }
288
- }
289
- }
290
- },
291
- "heading": {
292
- "_3xsmall": {
293
- "$typography": {
294
- "$value": {
295
- "fontSize": {
296
- "value": 16,
297
- "unit": "px"
298
- },
299
- "fontWeight": 500,
300
- "lineHeight": 1.375,
301
- "letterSpacing": {
302
- "value": 0,
303
- "unit": "px"
304
- }
305
- },
306
- "$type": "typography"
307
- }
308
- },
309
- "large": {
310
- "$typography": {
311
- "$value": {
312
- "fontSize": {
313
- "value": 56,
314
- "unit": "px"
315
- },
316
- "fontWeight": 500,
317
- "lineHeight": 1.1071,
318
- "letterSpacing": {
319
- "value": -1.68,
320
- "unit": "px"
321
- }
322
- },
323
- "$type": "typography"
324
- }
325
- },
326
- "medium": {
327
- "$typography": {
328
- "$value": {
329
- "fontSize": {
330
- "value": 40,
331
- "unit": "px"
332
- },
333
- "fontWeight": 500,
334
- "lineHeight": 1.15,
335
- "letterSpacing": {
336
- "value": -0.8,
337
- "unit": "px"
338
- }
339
- },
340
- "$type": "typography"
341
- }
342
- },
343
- "small": {
344
- "$typography": {
345
- "$value": {
346
- "fontSize": {
347
- "value": 32,
348
- "unit": "px"
349
- },
350
- "fontWeight": 500,
351
- "lineHeight": 1.1875,
352
- "letterSpacing": {
353
- "value": -0.32,
354
- "unit": "px"
355
- }
356
- },
357
- "$type": "typography"
358
- }
359
- },
360
- "xlarge": {
361
- "$typography": {
362
- "$value": {
363
- "fontSize": {
364
- "value": 68,
365
- "unit": "px"
366
- },
367
- "fontWeight": 500,
368
- "lineHeight": 1.0882,
369
- "letterSpacing": {
370
- "value": -2.73,
371
- "unit": "px"
372
- }
373
- },
374
- "$type": "typography"
375
- }
376
- },
377
- "xsmall": {
378
- "$typography": {
379
- "$value": {
380
- "fontSize": {
381
- "value": 24,
382
- "unit": "px"
383
- },
384
- "fontWeight": 500,
385
- "lineHeight": 1.25,
386
- "letterSpacing": {
387
- "value": 0,
388
- "unit": "px"
389
- }
390
- },
391
- "$type": "typography"
392
- }
393
- },
394
- "xxsmall": {
395
- "$typography": {
396
- "$value": {
397
- "fontSize": {
398
- "value": 18,
399
- "unit": "px"
400
- },
401
- "fontWeight": 500,
402
- "lineHeight": 1.3333,
403
- "letterSpacing": {
404
- "value": 0,
405
- "unit": "px"
406
- }
407
- },
408
- "$type": "typography"
409
- }
410
- }
411
- },
412
- "quote": {
413
- "large": {
414
- "$typography": {
415
- "$value": {
416
- "fontSize": {
417
- "value": 48,
418
- "unit": "px"
419
- },
420
- "fontWeight": 400,
421
- "lineHeight": 1.2083,
422
- "letterSpacing": {
423
- "value": -1.92,
424
- "unit": "px"
425
- }
426
- },
427
- "$type": "typography"
428
- }
429
- },
430
- "medium": {
431
- "$typography": {
432
- "$value": {
433
- "fontSize": {
434
- "value": 40,
435
- "unit": "px"
436
- },
437
- "fontWeight": 400,
438
- "lineHeight": 1.25,
439
- "letterSpacing": {
440
- "value": -1.2,
441
- "unit": "px"
442
- }
443
- },
444
- "$type": "typography"
445
- }
446
- },
447
- "small": {
448
- "$typography": {
449
- "$value": {
450
- "fontSize": {
451
- "value": 32,
452
- "unit": "px"
453
- },
454
- "fontWeight": 400,
455
- "lineHeight": 1.3125,
456
- "letterSpacing": {
457
- "value": -0.64,
458
- "unit": "px"
459
- }
460
- },
461
- "$type": "typography"
462
- }
463
- }
464
- },
465
- "text": {
466
- "large": {
467
- "$typography": {
468
- "$value": {
469
- "fontSize": {
470
- "value": 24,
471
- "unit": "px"
472
- },
473
- "fontWeight": 400,
474
- "lineHeight": 1.4167,
475
- "letterSpacing": {
476
- "value": -0.24,
477
- "unit": "px"
478
- }
479
- },
480
- "$type": "typography"
481
- }
482
- },
483
- "medium": {
484
- "$typography": {
485
- "$value": {
486
- "fontSize": {
487
- "value": 18,
488
- "unit": "px"
489
- },
490
- "fontWeight": 400,
491
- "lineHeight": 1.4444,
492
- "letterSpacing": {
493
- "value": 0,
494
- "unit": "px"
495
- }
496
- },
497
- "$type": "typography"
498
- }
499
- },
500
- "small": {
501
- "$typography": {
502
- "$value": {
503
- "fontSize": {
504
- "value": 16,
505
- "unit": "px"
506
- },
507
- "fontWeight": 400,
508
- "lineHeight": 1.5,
509
- "letterSpacing": {
510
- "value": 0,
511
- "unit": "px"
512
- }
513
- },
514
- "$type": "typography"
515
- }
516
- },
517
- "xsmall": {
518
- "$typography": {
519
- "$value": {
520
- "fontSize": {
521
- "value": 14,
522
- "unit": "px"
523
- },
524
- "fontWeight": 400,
525
- "lineHeight": 1.4286,
526
- "letterSpacing": {
527
- "value": 0,
528
- "unit": "px"
529
- }
530
- },
531
- "$type": "typography"
532
- }
533
- }
534
- }
535
- }
536
- }