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