@hpe-web/design-tokens 1.2.0 → 1.2.1

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 (19) hide show
  1. package/README.md +8 -3
  2. package/dist/css/locales/de.tokens.css +56 -0
  3. package/dist/css/locales/es.tokens.css +56 -0
  4. package/dist/css/locales/fr.tokens.css +56 -0
  5. package/dist/css/locales/it.tokens.css +56 -0
  6. package/dist/css/locales/ja.tokens.css +71 -0
  7. package/dist/css/locales/ko.tokens.css +71 -0
  8. package/dist/css/tokens.css +142 -161
  9. package/dist/css/tokens.dark.css +54 -43
  10. package/dist/css/tokens.md-lg.css +49 -49
  11. package/dist/css/tokens.xl.css +51 -51
  12. package/package.json +1 -1
  13. package/src/component/button.json +212 -422
  14. package/src/locales.json +8 -8
  15. package/src/semantic/color.dark.json +446 -161
  16. package/src/semantic/color.light.json +466 -158
  17. package/src/semantic/dimension.md-lg.json +21 -21
  18. package/src/semantic/dimension.xl.json +21 -21
  19. package/src/semantic/dimension.xs-sm.json +21 -21
package/src/semantic/color.dark.json CHANGED
@@ -11,37 +11,57 @@
11
11
  "$type": "color",
12
12
  "$value": "{hpe-web.base.color.grey.1000}"
13
13
  },
14
- "carousel": {
15
- "$type": "color",
16
- "$value": "{hpe-web.base.color.grey.200}"
14
+ "card-hover": {
15
+ "$type": "color",
16
+ "$value": {
17
+ "colorSpace": "srgb",
18
+ "components": [
19
+ 0.129,
20
+ 0.141,
21
+ 0.18
22
+ ],
23
+ "hex": "#21242e"
24
+ }
17
25
  },
18
- "carousel-disabled": {
26
+ "component": {
19
27
  "$type": "color",
20
- "$value": "{hpe-web.base.color.grey.500}"
28
+ "$value": "{hpe-web.base.color.grey.1000}"
21
29
  },
22
- "carousel-hover": {
30
+ "component-disabled": {
23
31
  "$type": "color",
24
32
  "$value": "{hpe-web.base.color.grey.400}"
25
33
  },
34
+ "component-hover": {
35
+ "$type": "color",
36
+ "$value": "{hpe-web.base.color.grey.700}"
37
+ },
26
38
  "contrast": {
27
39
  "$type": "color",
28
- "$value": "{hpe-web.base.color.white.opacity6}",
40
+ "$value": "{hpe-web.base.color.black.opacity4}",
29
41
  "$description": "Use to create a subtle differentiation between a component or container and the region it sits on."
30
42
  },
31
43
  "critical": {
32
44
  "$type": "color",
33
- "$value": "{hpe-web.base.color.red.1000}"
45
+ "$value": "{hpe-web.base.color.red.800}"
34
46
  },
35
47
  "default": {
36
48
  "$type": "color",
37
49
  "$value": "{hpe-web.base.color.grey.1300}",
38
50
  "$description": "Default background color to be used on containers."
39
51
  },
40
- "disabled": {
52
+ "focus": {
41
53
  "$type": "color",
42
- "$value": "{hpe-web.base.color.white.opacity7}"
54
+ "$value": {
55
+ "colorSpace": "srgb",
56
+ "components": [
57
+ 0.165,
58
+ 0.824,
59
+ 0.788
60
+ ],
61
+ "hex": "#2ad2c9"
62
+ }
43
63
  },
44
- "floating": {
64
+ "front": {
45
65
  "$type": "color",
46
66
  "$value": "{hpe-web.base.color.grey.1300}"
47
67
  },
@@ -55,11 +75,19 @@
55
75
  },
56
76
  "neutral-weak": {
57
77
  "$type": "color",
58
- "$value": "{hpe-web.base.color.grey.600}"
78
+ "$value": "{hpe-web.base.color.grey.400}"
59
79
  },
60
80
  "ok": {
61
81
  "$type": "color",
62
- "$value": "{hpe-web.base.color.green.1000}"
82
+ "$value": {
83
+ "colorSpace": "srgb",
84
+ "components": [
85
+ 0.118,
86
+ 0.847,
87
+ 0.682
88
+ ],
89
+ "hex": "#1ed8ae"
90
+ }
63
91
  },
64
92
  "primary": {
65
93
  "$type": "color",
@@ -71,29 +99,40 @@
71
99
  "$value": "{hpe-web.base.color.green.700}",
72
100
  "$description": "The strong variant of background-primary. Primary palette is derived from the brand color and used for high visual prominence."
73
101
  },
74
- "sunken": {
75
- "$type": "color",
76
- "$value": "{hpe-web.base.color.grey.1200}"
77
- },
78
102
  "warning": {
79
103
  "$type": "color",
80
- "$value": "{hpe-web.base.color.orange.1000}"
104
+ "$value": {
105
+ "colorSpace": "srgb",
106
+ "components": [
107
+ 0.827,
108
+ 0.427,
109
+ 0
110
+ ],
111
+ "hex": "#d36d00"
112
+ }
81
113
  }
82
114
  },
83
115
  "border": {
84
116
  "critical": {
85
117
  "$type": "color",
86
- "$value": "{hpe-web.color.foreground.critical}"
118
+ "$value": "{hpe-web.base.color.red.800}"
87
119
  },
88
120
  "default": {
89
121
  "$type": "color",
90
- "$value": "{hpe-web.base.color.white.opacity36}",
122
+ "$value": "{hpe-web.base.color.grey.600}",
91
123
  "$description": "Default border color."
92
124
  },
93
- "disabled": {
125
+ "focus": {
94
126
  "$type": "color",
95
- "$value": "{hpe-web.base.color.white.opacity12}",
96
- "$description": "Disabled color for borders. Using disabled colors ensures that disabled components are consistently styled."
127
+ "$value": {
128
+ "colorSpace": "srgb",
129
+ "components": [
130
+ 0.165,
131
+ 0.824,
132
+ 0.788
133
+ ],
134
+ "hex": "#2ad2c9"
135
+ }
97
136
  },
98
137
  "ok": {
99
138
  "$type": "color",
@@ -103,22 +142,30 @@
103
142
  "$type": "color",
104
143
  "$value": "{hpe-web.base.color.green.600}"
105
144
  },
106
- "selected": {
145
+ "primary-strong": {
107
146
  "$type": "color",
108
- "$value": "{hpe-web.color.foreground.primary}"
147
+ "$value": "{hpe-web.base.color.green.700}"
109
148
  },
110
149
  "strong": {
111
150
  "$type": "color",
112
- "$value": "{hpe-web.base.color.white.opacity72}",
151
+ "$value": "{hpe-web.base.color.grey.500}",
113
152
  "$description": "Default border color."
114
153
  },
115
154
  "warning": {
116
155
  "$type": "color",
117
- "$value": "{hpe-web.color.foreground.warning}"
156
+ "$value": {
157
+ "colorSpace": "srgb",
158
+ "components": [
159
+ 0.827,
160
+ 0.427,
161
+ 0
162
+ ],
163
+ "hex": "#d36d00"
164
+ }
118
165
  },
119
166
  "weak": {
120
167
  "$type": "color",
121
- "$value": "{hpe-web.base.color.white.opacity12}"
168
+ "$value": "{hpe-web.base.color.grey.700}"
122
169
  }
123
170
  },
124
171
  "decorative": {
@@ -151,7 +198,7 @@
151
198
  "$value": "{hpe-web.base.color.grey.500}",
152
199
  "$description": "Highest emphasis variant of neutral palette."
153
200
  },
154
- "neutral-strong": {
201
+ "neutral-hover": {
155
202
  "$type": "color",
156
203
  "$value": "{hpe-web.base.color.grey.400}",
157
204
  "$description": "Highest emphasis variant of neutral palette."
@@ -166,50 +213,325 @@
166
213
  "$value": "{hpe-web.base.color.white.100}"
167
214
  }
168
215
  },
169
- "foreground": {
170
- "critical": {
171
- "$type": "color",
172
- "$value": "{hpe-web.base.color.red.500}",
173
- "$description": "Use for foreground regions communicating error or danger. Often used to color values in a meter or progress bar. Keywords: status"
174
- },
175
- "ok": {
176
- "$type": "color",
177
- "$value": "{hpe-web.base.color.green.550}",
178
- "$description": "Use for foreground regions communicating success, completion, or a normal/ok status. Often used to color values in a meter or progress bar. Keywords: status"
216
+ "gradient": {
217
+ "element green": {
218
+ "stop0": {
219
+ "$type": "color",
220
+ "$value": "{hpe-web.base.color.green.550}"
221
+ },
222
+ "stop100": {
223
+ "$type": "color",
224
+ "$value": {
225
+ "colorSpace": "srgb",
226
+ "components": [
227
+ 0.059,
228
+ 0.063,
229
+ 0.086
230
+ ],
231
+ "hex": "#0f1016",
232
+ "alpha": 0
233
+ }
234
+ }
179
235
  },
180
- "primary": {
181
- "$type": "color",
182
- "$value": "{hpe-web.base.color.green.550}"
236
+ "element neutral": {
237
+ "stop0": {
238
+ "$type": "color",
239
+ "$value": {
240
+ "colorSpace": "srgb",
241
+ "components": [
242
+ 0.361,
243
+ 0.4,
244
+ 0.447
245
+ ],
246
+ "hex": "#5c6672"
247
+ }
248
+ },
249
+ "stop100": {
250
+ "$type": "color",
251
+ "$value": {
252
+ "colorSpace": "srgb",
253
+ "components": [
254
+ 0.361,
255
+ 0.4,
256
+ 0.447
257
+ ],
258
+ "hex": "#5c6672",
259
+ "alpha": 0
260
+ }
261
+ },
262
+ "stop15": {
263
+ "$type": "color",
264
+ "$value": {
265
+ "colorSpace": "srgb",
266
+ "components": [
267
+ 0.361,
268
+ 0.4,
269
+ 0.447
270
+ ],
271
+ "hex": "#5c6672",
272
+ "alpha": 0.99
273
+ }
274
+ },
275
+ "stop28": {
276
+ "$type": "color",
277
+ "$value": {
278
+ "colorSpace": "srgb",
279
+ "components": [
280
+ 0.361,
281
+ 0.4,
282
+ 0.447
283
+ ],
284
+ "hex": "#5c6672",
285
+ "alpha": 0.96
286
+ }
287
+ },
288
+ "stop38": {
289
+ "$type": "color",
290
+ "$value": {
291
+ "colorSpace": "srgb",
292
+ "components": [
293
+ 0.361,
294
+ 0.4,
295
+ 0.447
296
+ ],
297
+ "hex": "#5c6672",
298
+ "alpha": 0.91
299
+ }
300
+ },
301
+ "stop47": {
302
+ "$type": "color",
303
+ "$value": {
304
+ "colorSpace": "srgb",
305
+ "components": [
306
+ 0.361,
307
+ 0.4,
308
+ 0.447
309
+ ],
310
+ "hex": "#5c6672",
311
+ "alpha": 0.85
312
+ }
313
+ },
314
+ "stop54": {
315
+ "$type": "color",
316
+ "$value": {
317
+ "colorSpace": "srgb",
318
+ "components": [
319
+ 0.361,
320
+ 0.4,
321
+ 0.447
322
+ ],
323
+ "hex": "#5c6672",
324
+ "alpha": 0.78
325
+ }
326
+ },
327
+ "stop60": {
328
+ "$type": "color",
329
+ "$value": {
330
+ "colorSpace": "srgb",
331
+ "components": [
332
+ 0.361,
333
+ 0.4,
334
+ 0.447
335
+ ],
336
+ "hex": "#5c6672",
337
+ "alpha": 0.7
338
+ }
339
+ },
340
+ "stop65": {
341
+ "$type": "color",
342
+ "$value": {
343
+ "colorSpace": "srgb",
344
+ "components": [
345
+ 0.361,
346
+ 0.4,
347
+ 0.447
348
+ ],
349
+ "hex": "#5c6672",
350
+ "alpha": 0.62
351
+ }
352
+ },
353
+ "stop70": {
354
+ "$type": "color",
355
+ "$value": {
356
+ "colorSpace": "srgb",
357
+ "components": [
358
+ 0.361,
359
+ 0.4,
360
+ 0.447
361
+ ],
362
+ "hex": "#5c6672",
363
+ "alpha": 0.52
364
+ }
365
+ },
366
+ "stop73": {
367
+ "$type": "color",
368
+ "$value": {
369
+ "colorSpace": "srgb",
370
+ "components": [
371
+ 0.361,
372
+ 0.4,
373
+ 0.447
374
+ ],
375
+ "hex": "#5c6672",
376
+ "alpha": 0.43
377
+ }
378
+ },
379
+ "stop77": {
380
+ "$type": "color",
381
+ "$value": {
382
+ "colorSpace": "srgb",
383
+ "components": [
384
+ 0.361,
385
+ 0.4,
386
+ 0.447
387
+ ],
388
+ "hex": "#5c6672",
389
+ "alpha": 0.34
390
+ }
391
+ },
392
+ "stop80": {
393
+ "$type": "color",
394
+ "$value": {
395
+ "colorSpace": "srgb",
396
+ "components": [
397
+ 0.361,
398
+ 0.4,
399
+ 0.447
400
+ ],
401
+ "hex": "#5c6672",
402
+ "alpha": 0.26
403
+ }
404
+ },
405
+ "stop84": {
406
+ "$type": "color",
407
+ "$value": {
408
+ "colorSpace": "srgb",
409
+ "components": [
410
+ 0.361,
411
+ 0.4,
412
+ 0.447
413
+ ],
414
+ "hex": "#5c6672",
415
+ "alpha": 0.18
416
+ }
417
+ },
418
+ "stop88": {
419
+ "$type": "color",
420
+ "$value": {
421
+ "colorSpace": "srgb",
422
+ "components": [
423
+ 0.361,
424
+ 0.4,
425
+ 0.447
426
+ ],
427
+ "hex": "#5c6672",
428
+ "alpha": 0.1
429
+ }
430
+ },
431
+ "stop94": {
432
+ "$type": "color",
433
+ "$value": {
434
+ "colorSpace": "srgb",
435
+ "components": [
436
+ 0.361,
437
+ 0.4,
438
+ 0.447
439
+ ],
440
+ "hex": "#5c6672",
441
+ "alpha": 0.05
442
+ }
443
+ }
183
444
  },
184
- "unknown": {
185
- "$type": "color",
186
- "$value": "{hpe-web.base.color.grey.600}",
187
- "$description": "Use for foreground regions communicating unknown status. Often used to color values in a meter or progress bar. Keywords: status"
445
+ "neutral": {
446
+ "stop0": {
447
+ "$type": "color",
448
+ "$value": {
449
+ "colorSpace": "srgb",
450
+ "components": [
451
+ 0.114,
452
+ 0.122,
453
+ 0.153
454
+ ],
455
+ "hex": "#1d1f27",
456
+ "alpha": 0
457
+ }
458
+ },
459
+ "stop100": {
460
+ "$type": "color",
461
+ "$value": {
462
+ "colorSpace": "srgb",
463
+ "components": [
464
+ 0.114,
465
+ 0.122,
466
+ 0.153
467
+ ],
468
+ "hex": "#1d1f27"
469
+ }
470
+ }
188
471
  },
189
- "warning": {
190
- "$type": "color",
191
- "$value": "{hpe-web.base.color.orange.500}",
192
- "$description": "Use for foreground regions communicating warning or caution. Often used to color values in a meter or progress bar. Keywords: status"
472
+ "video overlay": {
473
+ "stop0": {
474
+ "$type": "color",
475
+ "$value": {
476
+ "colorSpace": "srgb",
477
+ "components": [
478
+ 0,
479
+ 0,
480
+ 0
481
+ ],
482
+ "hex": "#000000",
483
+ "alpha": 0
484
+ }
485
+ },
486
+ "stop100": {
487
+ "$type": "color",
488
+ "$value": {
489
+ "colorSpace": "srgb",
490
+ "components": [
491
+ 0,
492
+ 0,
493
+ 0
494
+ ],
495
+ "hex": "#000000",
496
+ "alpha": 0.4
497
+ }
498
+ }
193
499
  }
194
500
  },
195
501
  "icon": {
196
502
  "critical": {
197
503
  "$type": "color",
198
- "$value": "{hpe-web.color.foreground.critical}"
504
+ "$value": "{hpe-web.base.color.red.800}"
199
505
  },
200
506
  "default": {
201
507
  "$type": "color",
202
- "$value": "{hpe-web.color.text.default}",
508
+ "$value": "{hpe-web.color.text.body}",
203
509
  "$description": "Default icon color."
204
510
  },
205
511
  "disabled": {
206
512
  "$type": "color",
207
- "$value": "{hpe-web.color.text.disabled}",
513
+ "$value": {
514
+ "colorSpace": "srgb",
515
+ "components": [
516
+ 0.745,
517
+ 0.745,
518
+ 0.745
519
+ ],
520
+ "hex": "#bebebe"
521
+ },
208
522
  "$description": "Disabled color for icons. Using disabled colors ensures that disabled components are consistently styled."
209
523
  },
210
- "info": {
524
+ "focus": {
211
525
  "$type": "color",
212
- "$value": "{hpe-web.base.color.blue.200}"
526
+ "$value": {
527
+ "colorSpace": "srgb",
528
+ "components": [
529
+ 0.165,
530
+ 0.824,
531
+ 0.788
532
+ ],
533
+ "hex": "#2ad2c9"
534
+ }
213
535
  },
214
536
  "neutral": {
215
537
  "$type": "color",
@@ -217,12 +539,15 @@
217
539
  },
218
540
  "ok": {
219
541
  "$type": "color",
220
- "$value": "{hpe-web.base.color.green.550}"
221
- },
222
- "onStrong": {
223
- "$type": "color",
224
- "$value": "{hpe-web.base.color.grey.1000}",
225
- "$description": "Icon color to be used on strong backgrounds. For example, background-neutral-xstrong."
542
+ "$value": {
543
+ "colorSpace": "srgb",
544
+ "components": [
545
+ 0.118,
546
+ 0.847,
547
+ 0.682
548
+ ],
549
+ "hex": "#1ed8ae"
550
+ }
226
551
  },
227
552
  "primary": {
228
553
  "$type": "color",
@@ -235,12 +560,20 @@
235
560
  },
236
561
  "strong": {
237
562
  "$type": "color",
238
- "$value": "{hpe-web.color.text.strong}",
563
+ "$value": "{hpe-web.color.text.header}",
239
564
  "$description": "Emphasized icon color for increased visual prominence."
240
565
  },
241
566
  "warning": {
242
567
  "$type": "color",
243
- "$value": "{hpe-web.base.color.orange.500}"
568
+ "$value": {
569
+ "colorSpace": "srgb",
570
+ "components": [
571
+ 0.827,
572
+ 0.427,
573
+ 0
574
+ ],
575
+ "hex": "#d36d00"
576
+ }
244
577
  },
245
578
  "weak": {
246
579
  "$type": "color",
@@ -259,20 +592,53 @@
259
592
  }
260
593
  },
261
594
  "text": {
595
+ "body": {
596
+ "$type": "color",
597
+ "$value": {
598
+ "colorSpace": "srgb",
599
+ "components": [
600
+ 0.898,
601
+ 0.898,
602
+ 0.898
603
+ ],
604
+ "hex": "#e5e5e5"
605
+ },
606
+ "$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
607
+ },
262
608
  "critical": {
263
609
  "$type": "color",
264
610
  "$value": "{hpe-web.base.color.red.500}"
265
611
  },
266
- "default": {
267
- "$type": "color",
268
- "$value": "{hpe-web.base.color.grey.200}",
269
- "$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
270
- },
271
612
  "disabled": {
272
613
  "$type": "color",
273
- "$value": "{hpe-web.base.color.white.opacity24}",
614
+ "$value": {
615
+ "colorSpace": "srgb",
616
+ "components": [
617
+ 0.745,
618
+ 0.745,
619
+ 0.745
620
+ ],
621
+ "hex": "#bebebe"
622
+ },
274
623
  "$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
275
624
  },
625
+ "focus": {
626
+ "$type": "color",
627
+ "$value": {
628
+ "colorSpace": "srgb",
629
+ "components": [
630
+ 0.165,
631
+ 0.824,
632
+ 0.788
633
+ ],
634
+ "hex": "#2ad2c9"
635
+ }
636
+ },
637
+ "header": {
638
+ "$type": "color",
639
+ "$value": "{hpe-web.base.color.white.100}",
640
+ "$description": "Also called 'text.strong'"
641
+ },
276
642
  "neutral-strong": {
277
643
  "$type": "color",
278
644
  "$value": "{hpe-web.base.color.grey.50}"
@@ -281,7 +647,7 @@
281
647
  "$type": "color",
282
648
  "$value": "{hpe-web.deprecated.base.color.green.400}"
283
649
  },
284
- "onStrong": {
650
+ "onNeutral": {
285
651
  "$type": "color",
286
652
  "$value": "{hpe-web.base.color.grey.1000}",
287
653
  "$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
@@ -296,18 +662,22 @@
296
662
  "$value": "{hpe-web.base.color.green.600}",
297
663
  "$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
298
664
  },
299
- "strong": {
300
- "$type": "color",
301
- "$value": "{hpe-web.base.color.white.100}",
302
- "$description": "Also called 'text.strong'"
303
- },
304
665
  "warning": {
305
666
  "$type": "color",
306
667
  "$value": "{hpe-web.base.color.orange.500}"
307
668
  },
308
669
  "weak": {
309
670
  "$type": "color",
310
- "$value": "{hpe-web.base.color.grey.500}",
671
+ "$value": {
672
+ "colorSpace": "srgb",
673
+ "components": [
674
+ 1,
675
+ 1,
676
+ 1
677
+ ],
678
+ "hex": "#ffffff",
679
+ "alpha": 0.61
680
+ },
311
681
  "$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
312
682
  }
313
683
  },
@@ -324,91 +694,6 @@
324
694
  "alpha": 0
325
695
  }
326
696
  }
327
- },
328
- "deprecated": {
329
- "deprecated-gradient": {
330
- "element green": {
331
- "stop0": {
332
- "$type": "color",
333
- "$value": "{hpe-web.base.color.green.550}",
334
- "$deprecated": true
335
- },
336
- "stop100": {
337
- "$type": "color",
338
- "$value": {
339
- "colorSpace": "srgb",
340
- "components": [
341
- 0.059,
342
- 0.063,
343
- 0.086
344
- ],
345
- "hex": "#0f1016",
346
- "alpha": 0
347
- },
348
- "$deprecated": true
349
- }
350
- },
351
- "element neutral": {
352
- "stop0": {
353
- "$type": "color",
354
- "$value": {
355
- "colorSpace": "srgb",
356
- "components": [
357
- 0.361,
358
- 0.4,
359
- 0.447
360
- ],
361
- "hex": "#5c6672"
362
- },
363
- "$deprecated": true
364
- }
365
- },
366
- "neutral": {
367
- "stop100": {
368
- "$type": "color",
369
- "$value": {
370
- "colorSpace": "srgb",
371
- "components": [
372
- 0.114,
373
- 0.122,
374
- 0.153
375
- ],
376
- "hex": "#1d1f27"
377
- },
378
- "$deprecated": true
379
- }
380
- },
381
- "video overlay": {
382
- "stop0": {
383
- "$type": "color",
384
- "$value": {
385
- "colorSpace": "srgb",
386
- "components": [
387
- 0,
388
- 0,
389
- 0
390
- ],
391
- "hex": "#000000",
392
- "alpha": 0
393
- },
394
- "$deprecated": true
395
- },
396
- "stop100": {
397
- "$type": "color",
398
- "$value": {
399
- "colorSpace": "srgb",
400
- "components": [
401
- 0,
402
- 0,
403
- 0
404
- ],
405
- "hex": "#000000",
406
- "alpha": 0.4
407
- },
408
- "$deprecated": true
409
- }
410
- }
411
- }
412
697
  }
413
698
  }
414
699
  }