@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/theme/dark/color.tokens.json DELETED
@@ -1,698 +0,0 @@
1
- {
2
- "hpe-web": {
3
- "button": {
4
- "play": {
5
- "rest": {
6
- "icon-color": {
7
- "$value": {
8
- "colorSpace": "srgb",
9
- "components": [
10
- 0.024,
11
- 0.525,
12
- 0.404
13
- ],
14
- "hex": "#068667"
15
- }
16
- }
17
- }
18
- }
19
- },
20
- "color": {
21
- "background": {
22
- "card": {
23
- "$value": "{hpe-web.base.color.grey.1000}"
24
- },
25
- "card-hover": {
26
- "$value": {
27
- "colorSpace": "srgb",
28
- "components": [
29
- 0.129,
30
- 0.141,
31
- 0.18
32
- ],
33
- "hex": "#21242e"
34
- }
35
- },
36
- "component": {
37
- "$value": "{hpe-web.base.color.grey.1000}"
38
- },
39
- "component-disabled": {
40
- "$value": "{hpe-web.base.color.grey.400}"
41
- },
42
- "component-hover": {
43
- "$value": "{hpe-web.base.color.grey.700}"
44
- },
45
- "contrast": {
46
- "$value": "{hpe-web.base.color.black.opacity4}"
47
- },
48
- "critical": {
49
- "$value": "{hpe-web.base.color.red.800}"
50
- },
51
- "default": {
52
- "$value": "{hpe-web.base.color.grey.1300}"
53
- },
54
- "focus": {
55
- "$value": {
56
- "colorSpace": "srgb",
57
- "components": [
58
- 0.165,
59
- 0.824,
60
- 0.788
61
- ],
62
- "hex": "#2ad2c9"
63
- }
64
- },
65
- "neutral": {
66
- "$value": "{hpe-web.base.color.grey.400}"
67
- },
68
- "neutral-strong": {
69
- "$value": "{hpe-web.base.color.white.100}"
70
- },
71
- "neutral-weak": {
72
- "$value": "{hpe-web.base.color.grey.400}"
73
- },
74
- "ok": {
75
- "$value": {
76
- "colorSpace": "srgb",
77
- "components": [
78
- 0.118,
79
- 0.847,
80
- 0.682
81
- ],
82
- "hex": "#1ed8ae"
83
- }
84
- },
85
- "primary": {
86
- "$value": "{hpe-web.base.color.green.600}"
87
- },
88
- "primary-strong": {
89
- "$value": "{hpe-web.base.color.green.700}"
90
- },
91
- "warning": {
92
- "$value": {
93
- "colorSpace": "srgb",
94
- "components": [
95
- 0.827,
96
- 0.427,
97
- 0
98
- ],
99
- "hex": "#d36d00"
100
- }
101
- }
102
- },
103
- "border": {
104
- "critical": {
105
- "$value": "{hpe-web.base.color.red.800}"
106
- },
107
- "default": {
108
- "$value": "{hpe-web.base.color.grey.600}"
109
- },
110
- "focus": {
111
- "$value": {
112
- "colorSpace": "srgb",
113
- "components": [
114
- 0.165,
115
- 0.824,
116
- 0.788
117
- ],
118
- "hex": "#2ad2c9"
119
- }
120
- },
121
- "ok": {
122
- "$value": "{hpe-web.deprecated.base.color.green.400}"
123
- },
124
- "primary": {
125
- "$value": "{hpe-web.base.color.green.600}"
126
- },
127
- "primary-strong": {
128
- "$value": "{hpe-web.base.color.green.700}"
129
- },
130
- "warning": {
131
- "$value": {
132
- "colorSpace": "srgb",
133
- "components": [
134
- 0.827,
135
- 0.427,
136
- 0
137
- ],
138
- "hex": "#d36d00"
139
- }
140
- },
141
- "weak": {
142
- "$value": "{hpe-web.base.color.grey.700}"
143
- }
144
- },
145
- "decorative": {
146
- "black": {
147
- "$value": "{hpe-web.base.color.black.opacity100}"
148
- },
149
- "blue": {
150
- "$value": "{hpe-web.base.color.blue.500}"
151
- },
152
- "brand": {
153
- "$value": "{hpe-web.base.color.green.600}"
154
- },
155
- "cyan": {
156
- "$value": "{hpe-web.base.color.cyan.400}"
157
- },
158
- "green": {
159
- "$value": "{hpe-web.base.color.green.700}"
160
- },
161
- "neutral": {
162
- "$value": "{hpe-web.base.color.grey.500}"
163
- },
164
- "neutral-hover": {
165
- "$value": "{hpe-web.base.color.grey.400}"
166
- },
167
- "purple": {
168
- "$value": "{hpe-web.base.color.purple.400}"
169
- },
170
- "white": {
171
- "$value": "{hpe-web.base.color.white.100}"
172
- }
173
- },
174
- "gradient": {
175
- "element-green": {
176
- "stop0": {
177
- "$value": "{hpe-web.base.color.green.550}"
178
- },
179
- "stop100": {
180
- "$value": {
181
- "colorSpace": "srgb",
182
- "components": [
183
- 0.059,
184
- 0.063,
185
- 0.086
186
- ],
187
- "hex": "#0f1016",
188
- "alpha": 0
189
- }
190
- }
191
- },
192
- "element-neutral": {
193
- "stop0": {
194
- "$value": {
195
- "colorSpace": "srgb",
196
- "components": [
197
- 0.361,
198
- 0.4,
199
- 0.447
200
- ],
201
- "hex": "#5c6672"
202
- }
203
- },
204
- "stop100": {
205
- "$value": {
206
- "colorSpace": "srgb",
207
- "components": [
208
- 0.361,
209
- 0.4,
210
- 0.447
211
- ],
212
- "hex": "#5c6672",
213
- "alpha": 0
214
- }
215
- },
216
- "stop15": {
217
- "$value": {
218
- "colorSpace": "srgb",
219
- "components": [
220
- 0.361,
221
- 0.4,
222
- 0.447
223
- ],
224
- "hex": "#5c6672",
225
- "alpha": 0.988
226
- }
227
- },
228
- "stop28": {
229
- "$value": {
230
- "colorSpace": "srgb",
231
- "components": [
232
- 0.361,
233
- 0.4,
234
- 0.447
235
- ],
236
- "hex": "#5c6672",
237
- "alpha": 0.961
238
- }
239
- },
240
- "stop38": {
241
- "$value": {
242
- "colorSpace": "srgb",
243
- "components": [
244
- 0.361,
245
- 0.4,
246
- 0.447
247
- ],
248
- "hex": "#5c6672",
249
- "alpha": 0.91
250
- }
251
- },
252
- "stop47": {
253
- "$value": {
254
- "colorSpace": "srgb",
255
- "components": [
256
- 0.361,
257
- 0.4,
258
- 0.447
259
- ],
260
- "hex": "#5c6672",
261
- "alpha": 0.851
262
- }
263
- },
264
- "stop54": {
265
- "$value": {
266
- "colorSpace": "srgb",
267
- "components": [
268
- 0.361,
269
- 0.4,
270
- 0.447
271
- ],
272
- "hex": "#5c6672",
273
- "alpha": 0.78
274
- }
275
- },
276
- "stop60": {
277
- "$value": {
278
- "colorSpace": "srgb",
279
- "components": [
280
- 0.361,
281
- 0.4,
282
- 0.447
283
- ],
284
- "hex": "#5c6672",
285
- "alpha": 0.698
286
- }
287
- },
288
- "stop65": {
289
- "$value": {
290
- "colorSpace": "srgb",
291
- "components": [
292
- 0.361,
293
- 0.4,
294
- 0.447
295
- ],
296
- "hex": "#5c6672",
297
- "alpha": 0.62
298
- }
299
- },
300
- "stop70": {
301
- "$value": {
302
- "colorSpace": "srgb",
303
- "components": [
304
- 0.361,
305
- 0.4,
306
- 0.447
307
- ],
308
- "hex": "#5c6672",
309
- "alpha": 0.522
310
- }
311
- },
312
- "stop73": {
313
- "$value": {
314
- "colorSpace": "srgb",
315
- "components": [
316
- 0.361,
317
- 0.4,
318
- 0.447
319
- ],
320
- "hex": "#5c6672",
321
- "alpha": 0.431
322
- }
323
- },
324
- "stop77": {
325
- "$value": {
326
- "colorSpace": "srgb",
327
- "components": [
328
- 0.361,
329
- 0.4,
330
- 0.447
331
- ],
332
- "hex": "#5c6672",
333
- "alpha": 0.341
334
- }
335
- },
336
- "stop80": {
337
- "$value": {
338
- "colorSpace": "srgb",
339
- "components": [
340
- 0.361,
341
- 0.4,
342
- 0.447
343
- ],
344
- "hex": "#5c6672",
345
- "alpha": 0.259
346
- }
347
- },
348
- "stop84": {
349
- "$value": {
350
- "colorSpace": "srgb",
351
- "components": [
352
- 0.361,
353
- 0.4,
354
- 0.447
355
- ],
356
- "hex": "#5c6672",
357
- "alpha": 0.18
358
- }
359
- },
360
- "stop88": {
361
- "$value": {
362
- "colorSpace": "srgb",
363
- "components": [
364
- 0.361,
365
- 0.4,
366
- 0.447
367
- ],
368
- "hex": "#5c6672",
369
- "alpha": 0.102
370
- }
371
- },
372
- "stop94": {
373
- "$value": {
374
- "colorSpace": "srgb",
375
- "components": [
376
- 0.361,
377
- 0.4,
378
- 0.447
379
- ],
380
- "hex": "#5c6672",
381
- "alpha": 0.051
382
- }
383
- }
384
- },
385
- "neutral": {
386
- "stop0": {
387
- "$value": {
388
- "colorSpace": "srgb",
389
- "components": [
390
- 0.114,
391
- 0.122,
392
- 0.153
393
- ],
394
- "hex": "#1d1f27",
395
- "alpha": 0
396
- }
397
- },
398
- "stop100": {
399
- "$value": {
400
- "colorSpace": "srgb",
401
- "components": [
402
- 0.114,
403
- 0.122,
404
- 0.153
405
- ],
406
- "hex": "#1d1f27"
407
- }
408
- }
409
- },
410
- "video-overlay": {
411
- "stop0": {
412
- "$value": {
413
- "colorSpace": "srgb",
414
- "components": [
415
- 0,
416
- 0,
417
- 0
418
- ],
419
- "hex": "#000000",
420
- "alpha": 0
421
- }
422
- },
423
- "stop100": {
424
- "$value": {
425
- "colorSpace": "srgb",
426
- "components": [
427
- 0,
428
- 0,
429
- 0
430
- ],
431
- "hex": "#000000",
432
- "alpha": 0.4
433
- }
434
- }
435
- }
436
- },
437
- "icon": {
438
- "critical": {
439
- "$value": "{hpe-web.base.color.red.800}"
440
- },
441
- "default": {
442
- "$value": "{hpe-web.color.text.body}"
443
- },
444
- "disabled": {
445
- "$value": {
446
- "colorSpace": "srgb",
447
- "components": [
448
- 0.745,
449
- 0.745,
450
- 0.745
451
- ],
452
- "hex": "#bebebe"
453
- }
454
- },
455
- "focus": {
456
- "$value": {
457
- "colorSpace": "srgb",
458
- "components": [
459
- 0.165,
460
- 0.824,
461
- 0.788
462
- ],
463
- "hex": "#2ad2c9"
464
- }
465
- },
466
- "neutral": {
467
- "$value": "{hpe-web.base.color.white.100}"
468
- },
469
- "ok": {
470
- "$value": {
471
- "colorSpace": "srgb",
472
- "components": [
473
- 0.118,
474
- 0.847,
475
- 0.682
476
- ],
477
- "hex": "#1ed8ae"
478
- }
479
- },
480
- "primary": {
481
- "$value": "{hpe-web.color.decorative.brand}"
482
- },
483
- "primary-strong": {
484
- "$value": "{hpe-web.base.color.green.600}"
485
- },
486
- "strong": {
487
- "$value": "{hpe-web.color.text.header}"
488
- },
489
- "warning": {
490
- "$value": {
491
- "colorSpace": "srgb",
492
- "components": [
493
- 0.827,
494
- 0.427,
495
- 0
496
- ],
497
- "hex": "#d36d00"
498
- }
499
- },
500
- "weak": {
501
- "$value": "{hpe-web.color.text.weak}"
502
- }
503
- },
504
- "logo": {
505
- "$value": "{hpe-web.base.color.green.600}"
506
- },
507
- "text": {
508
- "body": {
509
- "$value": {
510
- "colorSpace": "srgb",
511
- "components": [
512
- 0.898,
513
- 0.898,
514
- 0.898
515
- ],
516
- "hex": "#e5e5e5"
517
- }
518
- },
519
- "critical": {
520
- "$value": "{hpe-web.base.color.red.500}"
521
- },
522
- "disabled": {
523
- "$value": {
524
- "colorSpace": "srgb",
525
- "components": [
526
- 0.745,
527
- 0.745,
528
- 0.745
529
- ],
530
- "hex": "#bebebe"
531
- }
532
- },
533
- "focus": {
534
- "$value": {
535
- "colorSpace": "srgb",
536
- "components": [
537
- 0.165,
538
- 0.824,
539
- 0.788
540
- ],
541
- "hex": "#2ad2c9"
542
- }
543
- },
544
- "header": {
545
- "$value": "{hpe-web.base.color.white.100}"
546
- },
547
- "neutral-strong": {
548
- "$value": "{hpe-web.base.color.grey.50}"
549
- },
550
- "ok": {
551
- "$value": "{hpe-web.deprecated.base.color.green.400}"
552
- },
553
- "on-neutral": {
554
- "$value": "{hpe-web.base.color.grey.1000}"
555
- },
556
- "primary": {
557
- "$value": "{hpe-web.base.color.green.400}"
558
- },
559
- "primary-strong": {
560
- "$value": "{hpe-web.base.color.green.600}"
561
- },
562
- "warning": {
563
- "$value": "{hpe-web.base.color.orange.500}"
564
- },
565
- "weak": {
566
- "$value": {
567
- "colorSpace": "srgb",
568
- "components": [
569
- 1,
570
- 1,
571
- 1
572
- ],
573
- "hex": "#ffffff",
574
- "alpha": 0.612
575
- }
576
- }
577
- },
578
- "transparent": {
579
- "$value": {
580
- "colorSpace": "srgb",
581
- "components": [
582
- 1,
583
- 1,
584
- 1
585
- ],
586
- "hex": "#ffffff",
587
- "alpha": 0
588
- }
589
- }
590
- },
591
- "theme": {
592
- "button": {
593
- "carousel": {
594
- "disabled": {
595
- "background": {
596
- "$value": {
597
- "colorSpace": "srgb",
598
- "components": [
599
- 0.647,
600
- 0.647,
601
- 0.663
602
- ],
603
- "hex": "#a5a5a9"
604
- }
605
- },
606
- "border-color": {
607
- "$value": {
608
- "colorSpace": "srgb",
609
- "components": [
610
- 0,
611
- 0,
612
- 0
613
- ],
614
- "hex": "#000000",
615
- "alpha": 0
616
- }
617
- },
618
- "icon-color": {
619
- "$value": {
620
- "colorSpace": "srgb",
621
- "components": [
622
- 0.161,
623
- 0.176,
624
- 0.227
625
- ],
626
- "hex": "#292d3a"
627
- }
628
- }
629
- },
630
- "hover": {
631
- "background": {
632
- "$value": {
633
- "colorSpace": "srgb",
634
- "components": [
635
- 0.831,
636
- 0.831,
637
- 0.831
638
- ],
639
- "hex": "#d4d4d4"
640
- }
641
- },
642
- "border-color": {
643
- "$value": "{hpe-web.color.transparent}"
644
- },
645
- "icon-color": {
646
- "$value": {
647
- "colorSpace": "srgb",
648
- "components": [
649
- 0.161,
650
- 0.176,
651
- 0.227
652
- ],
653
- "hex": "#292d3a"
654
- }
655
- }
656
- },
657
- "rest": {
658
- "background": {
659
- "$value": {
660
- "colorSpace": "srgb",
661
- "components": [
662
- 0.902,
663
- 0.91,
664
- 0.914
665
- ],
666
- "hex": "#e6e8e9"
667
- }
668
- },
669
- "border-color": {
670
- "$value": {
671
- "colorSpace": "srgb",
672
- "components": [
673
- 0,
674
- 0,
675
- 0
676
- ],
677
- "hex": "#000000",
678
- "alpha": 0
679
- }
680
- },
681
- "icon-color": {
682
- "$value": {
683
- "colorSpace": "srgb",
684
- "components": [
685
- 0.161,
686
- 0.176,
687
- 0.227
688
- ],
689
- "hex": "#292d3a"
690
- }
691
- }
692
- }
693
- }
694
- }
695
- }
696
- },
697
- "$type": "color"
698
- }