@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/src/component/button.json ADDED
@@ -0,0 +1,1382 @@
1
+ {
2
+ "hpe-web": {
3
+ "button": {
4
+ "carousel": {
5
+ "disabled": {
6
+ "background": {
7
+ "$type": "color",
8
+ "$value": "{hpe-web.color.background.carousel-disabled}"
9
+ },
10
+ "borderColor": {
11
+ "$type": "color",
12
+ "$value": "{hpe-web.color.transparent}"
13
+ },
14
+ "iconColor": {
15
+ "$type": "color",
16
+ "$value": "{hpe-web.color.icon.onStrong}"
17
+ }
18
+ },
19
+ "hover": {
20
+ "background": {
21
+ "$type": "color",
22
+ "$value": "{hpe-web.color.background.carousel-hover}"
23
+ },
24
+ "borderColor": {
25
+ "$type": "color",
26
+ "$value": "{hpe-web.color.transparent}"
27
+ },
28
+ "iconColor": {
29
+ "$type": "color",
30
+ "$value": "{hpe-web.color.icon.onStrong}"
31
+ }
32
+ },
33
+ "rest": {
34
+ "background": {
35
+ "$type": "color",
36
+ "$value": "{hpe-web.color.background.carousel}"
37
+ },
38
+ "borderColor": {
39
+ "$type": "color",
40
+ "$value": "{hpe-web.color.transparent}"
41
+ },
42
+ "iconColor": {
43
+ "$type": "color",
44
+ "$value": "{hpe-web.color.icon.onStrong}"
45
+ }
46
+ }
47
+ },
48
+ "link": {
49
+ "large": {
50
+ "borderRadius": {
51
+ "$type": "dimension",
52
+ "$value": {
53
+ "value": 9999,
54
+ "unit": "px"
55
+ }
56
+ },
57
+ "borderWidth": {
58
+ "$type": "dimension",
59
+ "$value": {
60
+ "value": 4,
61
+ "unit": "px"
62
+ }
63
+ },
64
+ "fontSize": {
65
+ "$type": "dimension",
66
+ "$value": {
67
+ "value": 20,
68
+ "unit": "px"
69
+ }
70
+ },
71
+ "gapX": {
72
+ "$type": "dimension",
73
+ "$value": {
74
+ "value": 12,
75
+ "unit": "px"
76
+ }
77
+ },
78
+ "iconHeight": {
79
+ "$type": "dimension",
80
+ "$value": {
81
+ "value": 20,
82
+ "unit": "px"
83
+ }
84
+ },
85
+ "iconWidth": {
86
+ "$type": "dimension",
87
+ "$value": {
88
+ "value": 20,
89
+ "unit": "px"
90
+ }
91
+ },
92
+ "lineHeight": {
93
+ "$type": "number",
94
+ "$value": 28
95
+ },
96
+ "minHeight": {
97
+ "$type": "dimension",
98
+ "$value": {
99
+ "value": 20,
100
+ "unit": "px"
101
+ }
102
+ },
103
+ "paddingX": {
104
+ "$type": "dimension",
105
+ "$value": {
106
+ "value": 0,
107
+ "unit": "px"
108
+ }
109
+ },
110
+ "paddingY": {
111
+ "$type": "dimension",
112
+ "$value": {
113
+ "value": 0,
114
+ "unit": "px"
115
+ }
116
+ }
117
+ },
118
+ "medium": {
119
+ "borderRadius": {
120
+ "$type": "dimension",
121
+ "$value": {
122
+ "value": 9999,
123
+ "unit": "px"
124
+ }
125
+ },
126
+ "borderWidth": {
127
+ "$type": "dimension",
128
+ "$value": {
129
+ "value": 4,
130
+ "unit": "px"
131
+ }
132
+ },
133
+ "fontSize": {
134
+ "$type": "dimension",
135
+ "$value": {
136
+ "value": 18,
137
+ "unit": "px"
138
+ }
139
+ },
140
+ "gapX": {
141
+ "$type": "dimension",
142
+ "$value": {
143
+ "value": 12,
144
+ "unit": "px"
145
+ }
146
+ },
147
+ "iconHeight": {
148
+ "$type": "dimension",
149
+ "$value": {
150
+ "value": 16,
151
+ "unit": "px"
152
+ }
153
+ },
154
+ "iconWidth": {
155
+ "$type": "dimension",
156
+ "$value": {
157
+ "value": 16,
158
+ "unit": "px"
159
+ }
160
+ },
161
+ "lineHeight": {
162
+ "$type": "number",
163
+ "$value": 24
164
+ },
165
+ "minHeight": {
166
+ "$type": "dimension",
167
+ "$value": {
168
+ "value": 24,
169
+ "unit": "px"
170
+ }
171
+ },
172
+ "paddingX": {
173
+ "$type": "dimension",
174
+ "$value": {
175
+ "value": 0,
176
+ "unit": "px"
177
+ }
178
+ },
179
+ "paddingY": {
180
+ "$type": "dimension",
181
+ "$value": {
182
+ "value": 0,
183
+ "unit": "px"
184
+ }
185
+ }
186
+ },
187
+ "neutral": {
188
+ "disabled": {
189
+ "rest": {
190
+ "background": {
191
+ "$type": "color",
192
+ "$value": "{hpe-web.color.transparent}"
193
+ },
194
+ "borderColor": {
195
+ "$type": "color",
196
+ "$value": "{hpe-web.color.transparent}"
197
+ },
198
+ "fontWeight": {
199
+ "$type": "fontWeight",
200
+ "$value": "{hpe-web.button.link.primary.rest.fontWeight}"
201
+ },
202
+ "iconColor": {
203
+ "$type": "color",
204
+ "$value": "{hpe-web.color.icon.disabled}"
205
+ },
206
+ "textColor": {
207
+ "$type": "color",
208
+ "$value": "{hpe-web.color.text.disabled}"
209
+ }
210
+ }
211
+ },
212
+ "hover": {
213
+ "background": {
214
+ "$type": "color",
215
+ "$value": "{hpe-web.color.transparent}"
216
+ },
217
+ "borderColor": {
218
+ "$type": "color",
219
+ "$value": "{hpe-web.button.primary.rest.borderColor}"
220
+ },
221
+ "fontWeight": {
222
+ "$type": "fontWeight",
223
+ "$value": "{hpe-web.button.link.primary.hover.fontWeight}"
224
+ },
225
+ "iconColor": {
226
+ "$type": "color",
227
+ "$value": "{hpe-web.color.text.neutral-strong}"
228
+ },
229
+ "textColor": {
230
+ "$type": "color",
231
+ "$value": "{hpe-web.color.text.neutral-strong}"
232
+ }
233
+ },
234
+ "rest": {
235
+ "background": {
236
+ "$type": "color",
237
+ "$value": "{hpe-web.color.transparent}"
238
+ },
239
+ "borderColor": {
240
+ "$type": "color",
241
+ "$value": "{hpe-web.color.transparent}"
242
+ },
243
+ "fontWeight": {
244
+ "$type": "fontWeight",
245
+ "$value": "{hpe-web.button.link.primary.rest.fontWeight}"
246
+ },
247
+ "iconColor": {
248
+ "$type": "color",
249
+ "$value": "{hpe-web.color.icon.strong}"
250
+ },
251
+ "textColor": {
252
+ "$type": "color",
253
+ "$value": "{hpe-web.color.text.strong}"
254
+ }
255
+ }
256
+ },
257
+ "primary": {
258
+ "disabled": {
259
+ "rest": {
260
+ "background": {
261
+ "$type": "color",
262
+ "$value": "{hpe-web.color.transparent}"
263
+ },
264
+ "borderColor": {
265
+ "$type": "color",
266
+ "$value": "{hpe-web.color.transparent}"
267
+ },
268
+ "fontWeight": {
269
+ "$type": "fontWeight",
270
+ "$value": "{hpe-web.button.link.primary.rest.fontWeight}"
271
+ },
272
+ "iconColor": {
273
+ "$type": "color",
274
+ "$value": "{hpe-web.color.text.disabled}"
275
+ },
276
+ "textColor": {
277
+ "$type": "color",
278
+ "$value": "{hpe-web.color.text.disabled}"
279
+ }
280
+ }
281
+ },
282
+ "hover": {
283
+ "background": {
284
+ "$type": "color",
285
+ "$value": "{hpe-web.color.transparent}"
286
+ },
287
+ "borderColor": {
288
+ "$type": "color",
289
+ "$value": "{hpe-web.color.transparent}"
290
+ },
291
+ "fontWeight": {
292
+ "$type": "fontWeight",
293
+ "$value": 400
294
+ },
295
+ "iconColor": {
296
+ "$type": "color",
297
+ "$value": "{hpe-web.color.text.primary-strong}"
298
+ },
299
+ "textColor": {
300
+ "$type": "color",
301
+ "$value": "{hpe-web.color.text.primary-strong}"
302
+ }
303
+ },
304
+ "rest": {
305
+ "background": {
306
+ "$type": "color",
307
+ "$value": "{hpe-web.color.transparent}"
308
+ },
309
+ "borderColor": {
310
+ "$type": "color",
311
+ "$value": "{hpe-web.color.transparent}"
312
+ },
313
+ "fontWeight": {
314
+ "$type": "fontWeight",
315
+ "$value": 400
316
+ },
317
+ "iconColor": {
318
+ "$type": "color",
319
+ "$value": "{hpe-web.color.text.primary}"
320
+ },
321
+ "textColor": {
322
+ "$type": "color",
323
+ "$value": "{hpe-web.color.text.primary}"
324
+ }
325
+ }
326
+ },
327
+ "small": {
328
+ "borderRadius": {
329
+ "$type": "dimension",
330
+ "$value": {
331
+ "value": 9999,
332
+ "unit": "px"
333
+ }
334
+ },
335
+ "borderWidth": {
336
+ "$type": "dimension",
337
+ "$value": {
338
+ "value": 4,
339
+ "unit": "px"
340
+ }
341
+ },
342
+ "fontSize": {
343
+ "$type": "dimension",
344
+ "$value": {
345
+ "value": 16,
346
+ "unit": "px"
347
+ }
348
+ },
349
+ "gapX": {
350
+ "$type": "dimension",
351
+ "$value": {
352
+ "value": 8,
353
+ "unit": "px"
354
+ }
355
+ },
356
+ "iconHeight": {
357
+ "$type": "dimension",
358
+ "$value": {
359
+ "value": 16,
360
+ "unit": "px"
361
+ }
362
+ },
363
+ "iconWidth": {
364
+ "$type": "dimension",
365
+ "$value": {
366
+ "value": 16,
367
+ "unit": "px"
368
+ }
369
+ },
370
+ "lineHeight": {
371
+ "$type": "number",
372
+ "$value": 24
373
+ },
374
+ "minHeight": {
375
+ "$type": "dimension",
376
+ "$value": {
377
+ "value": 14,
378
+ "unit": "px"
379
+ }
380
+ },
381
+ "paddingX": {
382
+ "$type": "dimension",
383
+ "$value": {
384
+ "value": 0,
385
+ "unit": "px"
386
+ }
387
+ },
388
+ "paddingY": {
389
+ "$type": "dimension",
390
+ "$value": {
391
+ "value": 0,
392
+ "unit": "px"
393
+ }
394
+ }
395
+ }
396
+ },
397
+ "play": {
398
+ "hover": {
399
+ "background": {
400
+ "$type": "color",
401
+ "$value": {
402
+ "colorSpace": "srgb",
403
+ "components": [
404
+ 1,
405
+ 1,
406
+ 1
407
+ ],
408
+ "hex": "#ffffff"
409
+ }
410
+ },
411
+ "borderColor": {
412
+ "$type": "color",
413
+ "$value": "{hpe-web.color.transparent}"
414
+ },
415
+ "iconColor": {
416
+ "$type": "color",
417
+ "$value": "{hpe-web.deprecated.depreacted-multi-mode.button.play.rest.iconColor}"
418
+ }
419
+ },
420
+ "rest": {
421
+ "background": {
422
+ "$type": "color",
423
+ "$value": {
424
+ "colorSpace": "srgb",
425
+ "components": [
426
+ 1,
427
+ 1,
428
+ 1
429
+ ],
430
+ "hex": "#ffffff"
431
+ }
432
+ },
433
+ "borderColor": {
434
+ "$type": "color",
435
+ "$value": "{hpe-web.color.transparent}"
436
+ },
437
+ "iconColor": {
438
+ "$type": "color",
439
+ "$value": "{hpe-web.deprecated.depreacted-multi-mode.button.play.rest.iconColor}"
440
+ }
441
+ }
442
+ },
443
+ "primary": {
444
+ "disabled": {
445
+ "rest": {
446
+ "background": {
447
+ "$type": "color",
448
+ "$value": "{hpe-web.color.background.neutral-weak}"
449
+ },
450
+ "borderColor": {
451
+ "$type": "color",
452
+ "$value": "{hpe-web.color.transparent}"
453
+ },
454
+ "fontWeight": {
455
+ "$type": "fontWeight",
456
+ "$value": "{hpe-web.button.primary.rest.fontWeight}"
457
+ },
458
+ "iconColor": {
459
+ "$type": "color",
460
+ "$value": "{hpe-web.color.icon.disabled}"
461
+ },
462
+ "textColor": {
463
+ "$type": "color",
464
+ "$value": "{hpe-web.color.text.disabled}"
465
+ }
466
+ }
467
+ },
468
+ "hover": {
469
+ "background": {
470
+ "$type": "color",
471
+ "$value": "{hpe-web.color.background.neutral}"
472
+ },
473
+ "borderColor": {
474
+ "$type": "color",
475
+ "$value": "{hpe-web.color.transparent}"
476
+ },
477
+ "fontWeight": {
478
+ "$type": "fontWeight",
479
+ "$value": "{hpe-web.button.primary.rest.fontWeight}"
480
+ },
481
+ "iconColor": {
482
+ "$type": "color",
483
+ "$value": "{hpe-web.color.text.onStrong}"
484
+ },
485
+ "textColor": {
486
+ "$type": "color",
487
+ "$value": "{hpe-web.color.text.onStrong}"
488
+ }
489
+ },
490
+ "large": {
491
+ "borderRadius": {
492
+ "$type": "dimension",
493
+ "$value": {
494
+ "value": 9999,
495
+ "unit": "px"
496
+ }
497
+ },
498
+ "borderWidth": {
499
+ "$type": "dimension",
500
+ "$value": {
501
+ "value": 0,
502
+ "unit": "px"
503
+ }
504
+ },
505
+ "fontSize": {
506
+ "$type": "dimension",
507
+ "$value": {
508
+ "value": 20,
509
+ "unit": "px"
510
+ }
511
+ },
512
+ "gapX": {
513
+ "$type": "dimension",
514
+ "$value": {
515
+ "value": 12,
516
+ "unit": "px"
517
+ }
518
+ },
519
+ "iconHeight": {
520
+ "$type": "dimension",
521
+ "$value": {
522
+ "value": 20,
523
+ "unit": "px"
524
+ }
525
+ },
526
+ "iconWidth": {
527
+ "$type": "dimension",
528
+ "$value": {
529
+ "value": 20,
530
+ "unit": "px"
531
+ }
532
+ },
533
+ "lineHeight": {
534
+ "$type": "number",
535
+ "$value": 28
536
+ },
537
+ "minHeight": {
538
+ "$type": "dimension",
539
+ "$value": {
540
+ "value": 60,
541
+ "unit": "px"
542
+ }
543
+ },
544
+ "paddingX": {
545
+ "$type": "dimension",
546
+ "$value": {
547
+ "value": 36,
548
+ "unit": "px"
549
+ }
550
+ },
551
+ "paddingY": {
552
+ "$type": "dimension",
553
+ "$value": {
554
+ "value": 16,
555
+ "unit": "px"
556
+ }
557
+ }
558
+ },
559
+ "medium": {
560
+ "borderRadius": {
561
+ "$type": "dimension",
562
+ "$value": {
563
+ "value": 9999,
564
+ "unit": "px"
565
+ }
566
+ },
567
+ "borderWidth": {
568
+ "$type": "dimension",
569
+ "$value": {
570
+ "value": 0,
571
+ "unit": "px"
572
+ }
573
+ },
574
+ "fontSize": {
575
+ "$type": "dimension",
576
+ "$value": {
577
+ "value": 18,
578
+ "unit": "px"
579
+ }
580
+ },
581
+ "gapX": {
582
+ "$type": "dimension",
583
+ "$value": {
584
+ "value": 12,
585
+ "unit": "px"
586
+ }
587
+ },
588
+ "iconHeight": {
589
+ "$type": "dimension",
590
+ "$value": {
591
+ "value": 16,
592
+ "unit": "px"
593
+ }
594
+ },
595
+ "iconWidth": {
596
+ "$type": "dimension",
597
+ "$value": {
598
+ "value": 16,
599
+ "unit": "px"
600
+ }
601
+ },
602
+ "lineHeight": {
603
+ "$type": "number",
604
+ "$value": 24
605
+ },
606
+ "minHeight": {
607
+ "$type": "dimension",
608
+ "$value": {
609
+ "value": 52,
610
+ "unit": "px"
611
+ }
612
+ },
613
+ "paddingX": {
614
+ "$type": "dimension",
615
+ "$value": {
616
+ "value": 28,
617
+ "unit": "px"
618
+ }
619
+ },
620
+ "paddingY": {
621
+ "$type": "dimension",
622
+ "$value": {
623
+ "value": 14,
624
+ "unit": "px"
625
+ }
626
+ }
627
+ },
628
+ "rest": {
629
+ "background": {
630
+ "$type": "color",
631
+ "$value": "{hpe-web.color.background.neutral-strong}"
632
+ },
633
+ "borderColor": {
634
+ "$type": "color",
635
+ "$value": "{hpe-web.color.transparent}"
636
+ },
637
+ "fontWeight": {
638
+ "$type": "fontWeight",
639
+ "$value": 400
640
+ },
641
+ "iconColor": {
642
+ "$type": "color",
643
+ "$value": "{hpe-web.color.text.onStrong}"
644
+ },
645
+ "textColor": {
646
+ "$type": "color",
647
+ "$value": "{hpe-web.color.text.onStrong}"
648
+ }
649
+ },
650
+ "small": {
651
+ "borderRadius": {
652
+ "$type": "dimension",
653
+ "$value": {
654
+ "value": 9999,
655
+ "unit": "px"
656
+ }
657
+ },
658
+ "borderWidth": {
659
+ "$type": "dimension",
660
+ "$value": {
661
+ "value": 0,
662
+ "unit": "px"
663
+ }
664
+ },
665
+ "fontSize": {
666
+ "$type": "dimension",
667
+ "$value": {
668
+ "value": 16,
669
+ "unit": "px"
670
+ }
671
+ },
672
+ "gapX": {
673
+ "$type": "dimension",
674
+ "$value": {
675
+ "value": 8,
676
+ "unit": "px"
677
+ }
678
+ },
679
+ "iconHeight": {
680
+ "$type": "dimension",
681
+ "$value": {
682
+ "value": 16,
683
+ "unit": "px"
684
+ }
685
+ },
686
+ "iconWidth": {
687
+ "$type": "dimension",
688
+ "$value": {
689
+ "value": 16,
690
+ "unit": "px"
691
+ }
692
+ },
693
+ "lineHeight": {
694
+ "$type": "number",
695
+ "$value": 24
696
+ },
697
+ "minHeight": {
698
+ "$type": "dimension",
699
+ "$value": {
700
+ "value": 48,
701
+ "unit": "px"
702
+ }
703
+ },
704
+ "paddingX": {
705
+ "$type": "dimension",
706
+ "$value": {
707
+ "value": 24,
708
+ "unit": "px"
709
+ }
710
+ },
711
+ "paddingY": {
712
+ "$type": "dimension",
713
+ "$value": {
714
+ "value": 12,
715
+ "unit": "px"
716
+ }
717
+ }
718
+ }
719
+ },
720
+ "secondary": {
721
+ "disabled": {
722
+ "rest": {
723
+ "background": {
724
+ "$type": "color",
725
+ "$value": "{hpe-web.color.transparent}"
726
+ },
727
+ "borderColor": {
728
+ "$type": "color",
729
+ "$value": "{hpe-web.color.background.neutral-weak}"
730
+ },
731
+ "fontWeight": {
732
+ "$type": "fontWeight",
733
+ "$value": "{hpe-web.button.secondary.rest.fontWeight}"
734
+ },
735
+ "iconColor": {
736
+ "$type": "color",
737
+ "$value": "{hpe-web.color.icon.disabled}"
738
+ },
739
+ "textColor": {
740
+ "$type": "color",
741
+ "$value": "{hpe-web.color.text.disabled}"
742
+ }
743
+ }
744
+ },
745
+ "hover": {
746
+ "background": {
747
+ "$type": "color",
748
+ "$value": "{hpe-web.color.transparent}"
749
+ },
750
+ "borderColor": {
751
+ "$type": "color",
752
+ "$value": "{hpe-web.color.border.selected}"
753
+ },
754
+ "fontWeight": {
755
+ "$type": "fontWeight",
756
+ "$value": "{hpe-web.button.secondary.rest.fontWeight}"
757
+ },
758
+ "iconColor": {
759
+ "$type": "color",
760
+ "$value": "{hpe-web.color.icon.strong}"
761
+ },
762
+ "textColor": {
763
+ "$type": "color",
764
+ "$value": "{hpe-web.color.text.strong}"
765
+ }
766
+ },
767
+ "large": {
768
+ "borderRadius": {
769
+ "$type": "dimension",
770
+ "$value": {
771
+ "value": 9999,
772
+ "unit": "px"
773
+ }
774
+ },
775
+ "borderWidth": {
776
+ "$type": "dimension",
777
+ "$value": {
778
+ "value": 4,
779
+ "unit": "px"
780
+ }
781
+ },
782
+ "fontSize": {
783
+ "$type": "dimension",
784
+ "$value": {
785
+ "value": 20,
786
+ "unit": "px"
787
+ }
788
+ },
789
+ "gapX": {
790
+ "$type": "dimension",
791
+ "$value": {
792
+ "value": 12,
793
+ "unit": "px"
794
+ }
795
+ },
796
+ "iconHeight": {
797
+ "$type": "dimension",
798
+ "$value": {
799
+ "value": 20,
800
+ "unit": "px"
801
+ }
802
+ },
803
+ "iconWidth": {
804
+ "$type": "dimension",
805
+ "$value": {
806
+ "value": 20,
807
+ "unit": "px"
808
+ }
809
+ },
810
+ "lineHeight": {
811
+ "$type": "number",
812
+ "$value": 28
813
+ },
814
+ "minHeight": {
815
+ "$type": "dimension",
816
+ "$value": {
817
+ "value": 60,
818
+ "unit": "px"
819
+ }
820
+ },
821
+ "paddingX": {
822
+ "$type": "dimension",
823
+ "$value": {
824
+ "value": 36,
825
+ "unit": "px"
826
+ }
827
+ },
828
+ "paddingY": {
829
+ "$type": "dimension",
830
+ "$value": {
831
+ "value": 16,
832
+ "unit": "px"
833
+ }
834
+ }
835
+ },
836
+ "medium": {
837
+ "borderRadius": {
838
+ "$type": "dimension",
839
+ "$value": {
840
+ "value": 9999,
841
+ "unit": "px"
842
+ }
843
+ },
844
+ "borderWidth": {
845
+ "$type": "dimension",
846
+ "$value": {
847
+ "value": 4,
848
+ "unit": "px"
849
+ }
850
+ },
851
+ "fontSize": {
852
+ "$type": "dimension",
853
+ "$value": {
854
+ "value": 18,
855
+ "unit": "px"
856
+ }
857
+ },
858
+ "gapX": {
859
+ "$type": "dimension",
860
+ "$value": {
861
+ "value": 12,
862
+ "unit": "px"
863
+ }
864
+ },
865
+ "iconHeight": {
866
+ "$type": "dimension",
867
+ "$value": {
868
+ "value": 16,
869
+ "unit": "px"
870
+ }
871
+ },
872
+ "iconWidth": {
873
+ "$type": "dimension",
874
+ "$value": {
875
+ "value": 16,
876
+ "unit": "px"
877
+ }
878
+ },
879
+ "lineHeight": {
880
+ "$type": "number",
881
+ "$value": 24
882
+ },
883
+ "minHeight": {
884
+ "$type": "dimension",
885
+ "$value": {
886
+ "value": 52,
887
+ "unit": "px"
888
+ }
889
+ },
890
+ "paddingX": {
891
+ "$type": "dimension",
892
+ "$value": {
893
+ "value": 28,
894
+ "unit": "px"
895
+ }
896
+ },
897
+ "paddingY": {
898
+ "$type": "dimension",
899
+ "$value": {
900
+ "value": 14,
901
+ "unit": "px"
902
+ }
903
+ }
904
+ },
905
+ "rest": {
906
+ "background": {
907
+ "$type": "color",
908
+ "$value": "{hpe-web.color.transparent}"
909
+ },
910
+ "borderColor": {
911
+ "$type": "color",
912
+ "$value": "{hpe-web.color.border.primary}"
913
+ },
914
+ "fontWeight": {
915
+ "$type": "fontWeight",
916
+ "$value": 400
917
+ },
918
+ "iconColor": {
919
+ "$type": "color",
920
+ "$value": "{hpe-web.color.icon.strong}"
921
+ },
922
+ "textColor": {
923
+ "$type": "color",
924
+ "$value": "{hpe-web.color.text.strong}"
925
+ }
926
+ },
927
+ "small": {
928
+ "borderRadius": {
929
+ "$type": "dimension",
930
+ "$value": {
931
+ "value": 9999,
932
+ "unit": "px"
933
+ }
934
+ },
935
+ "borderWidth": {
936
+ "$type": "dimension",
937
+ "$value": {
938
+ "value": 3,
939
+ "unit": "px"
940
+ }
941
+ },
942
+ "fontSize": {
943
+ "$type": "dimension",
944
+ "$value": {
945
+ "value": 16,
946
+ "unit": "px"
947
+ }
948
+ },
949
+ "gapX": {
950
+ "$type": "dimension",
951
+ "$value": {
952
+ "value": 8,
953
+ "unit": "px"
954
+ }
955
+ },
956
+ "iconHeight": {
957
+ "$type": "dimension",
958
+ "$value": {
959
+ "value": 16,
960
+ "unit": "px"
961
+ }
962
+ },
963
+ "iconWidth": {
964
+ "$type": "dimension",
965
+ "$value": {
966
+ "value": 16,
967
+ "unit": "px"
968
+ }
969
+ },
970
+ "lineHeight": {
971
+ "$type": "number",
972
+ "$value": 24
973
+ },
974
+ "minHeight": {
975
+ "$type": "dimension",
976
+ "$value": {
977
+ "value": 48,
978
+ "unit": "px"
979
+ }
980
+ },
981
+ "paddingX": {
982
+ "$type": "dimension",
983
+ "$value": {
984
+ "value": 24,
985
+ "unit": "px"
986
+ }
987
+ },
988
+ "paddingY": {
989
+ "$type": "dimension",
990
+ "$value": {
991
+ "value": 12,
992
+ "unit": "px"
993
+ }
994
+ }
995
+ }
996
+ }
997
+ },
998
+ "deprecated": {
999
+ "depreacted-multi-mode": {
1000
+ "button": {
1001
+ "carousel": {
1002
+ "disabled": {
1003
+ "background": {
1004
+ "$type": "color",
1005
+ "$value": {
1006
+ "colorSpace": "srgb",
1007
+ "components": [
1008
+ 0.647,
1009
+ 0.647,
1010
+ 0.663
1011
+ ],
1012
+ "hex": "#a5a5a9"
1013
+ },
1014
+ "$deprecated": true
1015
+ },
1016
+ "borderColor": {
1017
+ "$type": "color",
1018
+ "$value": "{hpe-web.color.transparent}",
1019
+ "$deprecated": true
1020
+ },
1021
+ "iconColor": {
1022
+ "$type": "color",
1023
+ "$value": {
1024
+ "colorSpace": "srgb",
1025
+ "components": [
1026
+ 0.161,
1027
+ 0.176,
1028
+ 0.227
1029
+ ],
1030
+ "hex": "#292d3a"
1031
+ },
1032
+ "$deprecated": true
1033
+ }
1034
+ },
1035
+ "hover": {
1036
+ "background": {
1037
+ "$type": "color",
1038
+ "$value": {
1039
+ "colorSpace": "srgb",
1040
+ "components": [
1041
+ 0.831,
1042
+ 0.831,
1043
+ 0.831
1044
+ ],
1045
+ "hex": "#d4d4d4"
1046
+ },
1047
+ "$deprecated": true
1048
+ },
1049
+ "borderColor": {
1050
+ "$type": "color",
1051
+ "$value": "{hpe-web.color.transparent}",
1052
+ "$deprecated": true
1053
+ },
1054
+ "iconColor": {
1055
+ "$type": "color",
1056
+ "$value": {
1057
+ "colorSpace": "srgb",
1058
+ "components": [
1059
+ 0.161,
1060
+ 0.176,
1061
+ 0.227
1062
+ ],
1063
+ "hex": "#292d3a"
1064
+ },
1065
+ "$deprecated": true
1066
+ }
1067
+ }
1068
+ },
1069
+ "play": {
1070
+ "rest": {
1071
+ "background": {
1072
+ "$type": "color",
1073
+ "$value": {
1074
+ "colorSpace": "srgb",
1075
+ "components": [
1076
+ 0.902,
1077
+ 0.91,
1078
+ 0.914
1079
+ ],
1080
+ "hex": "#e6e8e9"
1081
+ },
1082
+ "$deprecated": true
1083
+ },
1084
+ "borderColor": {
1085
+ "$type": "color",
1086
+ "$value": {
1087
+ "colorSpace": "srgb",
1088
+ "components": [
1089
+ 0,
1090
+ 0,
1091
+ 0
1092
+ ],
1093
+ "hex": "#000000",
1094
+ "alpha": 0
1095
+ },
1096
+ "$deprecated": true
1097
+ },
1098
+ "deprecated-background-front": {
1099
+ "$type": "color",
1100
+ "$value": "{hpe-web.base.color.grey.1300}",
1101
+ "$deprecated": true
1102
+ },
1103
+ "deprecated-border-focus": {
1104
+ "$type": "color",
1105
+ "$value": {
1106
+ "colorSpace": "srgb",
1107
+ "components": [
1108
+ 0.165,
1109
+ 0.824,
1110
+ 0.788
1111
+ ],
1112
+ "hex": "#2ad2c9"
1113
+ },
1114
+ "$deprecated": true
1115
+ },
1116
+ "deprecated-component": {
1117
+ "$type": "color",
1118
+ "$value": "{hpe-web.base.color.grey.1000}",
1119
+ "$deprecated": true
1120
+ },
1121
+ "deprecated-component-hover": {
1122
+ "$type": "color",
1123
+ "$value": "{hpe-web.base.color.grey.700}",
1124
+ "$deprecated": true
1125
+ },
1126
+ "iconColor": {
1127
+ "$type": "color",
1128
+ "$value": {
1129
+ "colorSpace": "srgb",
1130
+ "components": [
1131
+ 0.024,
1132
+ 0.525,
1133
+ 0.404
1134
+ ],
1135
+ "hex": "#068667"
1136
+ },
1137
+ "$deprecated": true
1138
+ },
1139
+ "iconColor 2": {
1140
+ "$type": "color",
1141
+ "$value": {
1142
+ "colorSpace": "srgb",
1143
+ "components": [
1144
+ 0.161,
1145
+ 0.176,
1146
+ 0.227
1147
+ ],
1148
+ "hex": "#292d3a"
1149
+ },
1150
+ "$deprecated": true
1151
+ },
1152
+ "stop0": {
1153
+ "$type": "color",
1154
+ "$value": {
1155
+ "colorSpace": "srgb",
1156
+ "components": [
1157
+ 0.114,
1158
+ 0.122,
1159
+ 0.153
1160
+ ],
1161
+ "hex": "#1d1f27",
1162
+ "alpha": 0
1163
+ },
1164
+ "$deprecated": true
1165
+ },
1166
+ "stop100": {
1167
+ "$type": "color",
1168
+ "$value": {
1169
+ "colorSpace": "srgb",
1170
+ "components": [
1171
+ 0.361,
1172
+ 0.4,
1173
+ 0.447
1174
+ ],
1175
+ "hex": "#5c6672",
1176
+ "alpha": 0
1177
+ },
1178
+ "$deprecated": true
1179
+ },
1180
+ "stop15": {
1181
+ "$type": "color",
1182
+ "$value": {
1183
+ "colorSpace": "srgb",
1184
+ "components": [
1185
+ 0.361,
1186
+ 0.4,
1187
+ 0.447
1188
+ ],
1189
+ "hex": "#5c6672",
1190
+ "alpha": 0.99
1191
+ },
1192
+ "$deprecated": true
1193
+ },
1194
+ "stop28": {
1195
+ "$type": "color",
1196
+ "$value": {
1197
+ "colorSpace": "srgb",
1198
+ "components": [
1199
+ 0.361,
1200
+ 0.4,
1201
+ 0.447
1202
+ ],
1203
+ "hex": "#5c6672",
1204
+ "alpha": 0.96
1205
+ },
1206
+ "$deprecated": true
1207
+ },
1208
+ "stop38": {
1209
+ "$type": "color",
1210
+ "$value": {
1211
+ "colorSpace": "srgb",
1212
+ "components": [
1213
+ 0.361,
1214
+ 0.4,
1215
+ 0.447
1216
+ ],
1217
+ "hex": "#5c6672",
1218
+ "alpha": 0.91
1219
+ },
1220
+ "$deprecated": true
1221
+ },
1222
+ "stop47": {
1223
+ "$type": "color",
1224
+ "$value": {
1225
+ "colorSpace": "srgb",
1226
+ "components": [
1227
+ 0.361,
1228
+ 0.4,
1229
+ 0.447
1230
+ ],
1231
+ "hex": "#5c6672",
1232
+ "alpha": 0.85
1233
+ },
1234
+ "$deprecated": true
1235
+ },
1236
+ "stop54": {
1237
+ "$type": "color",
1238
+ "$value": {
1239
+ "colorSpace": "srgb",
1240
+ "components": [
1241
+ 0.361,
1242
+ 0.4,
1243
+ 0.447
1244
+ ],
1245
+ "hex": "#5c6672",
1246
+ "alpha": 0.78
1247
+ },
1248
+ "$deprecated": true
1249
+ },
1250
+ "stop60": {
1251
+ "$type": "color",
1252
+ "$value": {
1253
+ "colorSpace": "srgb",
1254
+ "components": [
1255
+ 0.361,
1256
+ 0.4,
1257
+ 0.447
1258
+ ],
1259
+ "hex": "#5c6672",
1260
+ "alpha": 0.7
1261
+ },
1262
+ "$deprecated": true
1263
+ },
1264
+ "stop65": {
1265
+ "$type": "color",
1266
+ "$value": {
1267
+ "colorSpace": "srgb",
1268
+ "components": [
1269
+ 0.361,
1270
+ 0.4,
1271
+ 0.447
1272
+ ],
1273
+ "hex": "#5c6672",
1274
+ "alpha": 0.62
1275
+ },
1276
+ "$deprecated": true
1277
+ },
1278
+ "stop70": {
1279
+ "$type": "color",
1280
+ "$value": {
1281
+ "colorSpace": "srgb",
1282
+ "components": [
1283
+ 0.361,
1284
+ 0.4,
1285
+ 0.447
1286
+ ],
1287
+ "hex": "#5c6672",
1288
+ "alpha": 0.52
1289
+ },
1290
+ "$deprecated": true
1291
+ },
1292
+ "stop73": {
1293
+ "$type": "color",
1294
+ "$value": {
1295
+ "colorSpace": "srgb",
1296
+ "components": [
1297
+ 0.361,
1298
+ 0.4,
1299
+ 0.447
1300
+ ],
1301
+ "hex": "#5c6672",
1302
+ "alpha": 0.43
1303
+ },
1304
+ "$deprecated": true
1305
+ },
1306
+ "stop77": {
1307
+ "$type": "color",
1308
+ "$value": {
1309
+ "colorSpace": "srgb",
1310
+ "components": [
1311
+ 0.361,
1312
+ 0.4,
1313
+ 0.447
1314
+ ],
1315
+ "hex": "#5c6672",
1316
+ "alpha": 0.34
1317
+ },
1318
+ "$deprecated": true
1319
+ },
1320
+ "stop80": {
1321
+ "$type": "color",
1322
+ "$value": {
1323
+ "colorSpace": "srgb",
1324
+ "components": [
1325
+ 0.361,
1326
+ 0.4,
1327
+ 0.447
1328
+ ],
1329
+ "hex": "#5c6672",
1330
+ "alpha": 0.26
1331
+ },
1332
+ "$deprecated": true
1333
+ },
1334
+ "stop84": {
1335
+ "$type": "color",
1336
+ "$value": {
1337
+ "colorSpace": "srgb",
1338
+ "components": [
1339
+ 0.361,
1340
+ 0.4,
1341
+ 0.447
1342
+ ],
1343
+ "hex": "#5c6672",
1344
+ "alpha": 0.18
1345
+ },
1346
+ "$deprecated": true
1347
+ },
1348
+ "stop88": {
1349
+ "$type": "color",
1350
+ "$value": {
1351
+ "colorSpace": "srgb",
1352
+ "components": [
1353
+ 0.361,
1354
+ 0.4,
1355
+ 0.447
1356
+ ],
1357
+ "hex": "#5c6672",
1358
+ "alpha": 0.1
1359
+ },
1360
+ "$deprecated": true
1361
+ },
1362
+ "stop94": {
1363
+ "$type": "color",
1364
+ "$value": {
1365
+ "colorSpace": "srgb",
1366
+ "components": [
1367
+ 0.361,
1368
+ 0.4,
1369
+ 0.447
1370
+ ],
1371
+ "hex": "#5c6672",
1372
+ "alpha": 0.05
1373
+ },
1374
+ "$deprecated": true
1375
+ }
1376
+ }
1377
+ }
1378
+ }
1379
+ }
1380
+ }
1381
+ }
1382
+ }