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