@hpe-web/design-tokens 1.2.1 → 1.3.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.
- package/README.md +5 -9
- package/dist/css/fonts/de.css +164 -0
- package/dist/css/fonts/en.css +164 -0
- package/dist/css/fonts/es.css +164 -0
- package/dist/css/fonts/fr.css +164 -0
- package/dist/css/fonts/it.css +164 -0
- package/dist/css/locales/ja.tokens.css +5 -0
- package/dist/css/locales/ko.tokens.css +5 -0
- package/dist/css/locales/zh.tokens.css +12 -0
- package/dist/css/tokens.css +566 -309
- package/dist/css/tokens.dark.css +67 -83
- package/dist/css/tokens.md-lg.css +155 -64
- package/dist/css/tokens.xl.css +155 -64
- package/package.json +1 -1
- package/src/breakpoints.json +9 -11
- package/src/component/button.json +112 -576
- package/src/fonts.json +1 -5
- package/src/hpe.resolver.json +2 -2
- package/src/primitive/primitives.json +18 -929
- package/src/semantic/color.dark.json +80 -450
- package/src/semantic/color.light.json +76 -470
- package/src/semantic/dimension.md-lg.json +698 -67
- package/src/semantic/dimension.xl.json +700 -69
- package/src/semantic/dimension.xs-sm.json +696 -65
|
@@ -11,37 +11,17 @@
|
|
|
11
11
|
"$type": "color",
|
|
12
12
|
"$value": "{hpe-web.base.color.grey.50}"
|
|
13
13
|
},
|
|
14
|
-
"
|
|
14
|
+
"carousel": {
|
|
15
15
|
"$type": "color",
|
|
16
|
-
"$value": "{hpe-web.base.color.grey.
|
|
16
|
+
"$value": "{hpe-web.base.color.grey.700}"
|
|
17
17
|
},
|
|
18
|
-
"
|
|
18
|
+
"carousel-disabled": {
|
|
19
19
|
"$type": "color",
|
|
20
|
-
"$value": "{hpe-web.base.color.grey.
|
|
20
|
+
"$value": "{hpe-web.base.color.grey.500}"
|
|
21
21
|
},
|
|
22
|
-
"
|
|
23
|
-
"$type": "color",
|
|
24
|
-
"$value": {
|
|
25
|
-
"colorSpace": "srgb",
|
|
26
|
-
"components": [
|
|
27
|
-
0.647,
|
|
28
|
-
0.647,
|
|
29
|
-
0.663
|
|
30
|
-
],
|
|
31
|
-
"hex": "#a5a5a9"
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
"component-hover": {
|
|
35
|
-
"$type": "color",
|
|
36
|
-
"$value": {
|
|
37
|
-
"colorSpace": "srgb",
|
|
38
|
-
"components": [
|
|
39
|
-
0.831,
|
|
40
|
-
0.831,
|
|
41
|
-
0.831
|
|
42
|
-
],
|
|
43
|
-
"hex": "#d4d4d4"
|
|
44
|
-
}
|
|
22
|
+
"carousel-hover": {
|
|
23
|
+
"$type": "color",
|
|
24
|
+
"$value": "{hpe-web.base.color.grey.650}"
|
|
45
25
|
},
|
|
46
26
|
"contrast": {
|
|
47
27
|
"$type": "color",
|
|
@@ -50,26 +30,18 @@
|
|
|
50
30
|
},
|
|
51
31
|
"critical": {
|
|
52
32
|
"$type": "color",
|
|
53
|
-
"$value": "{hpe-web.base.color.red.
|
|
33
|
+
"$value": "{hpe-web.base.color.red.50}"
|
|
54
34
|
},
|
|
55
35
|
"default": {
|
|
56
36
|
"$type": "color",
|
|
57
37
|
"$value": "{hpe-web.base.color.white.100}",
|
|
58
38
|
"$description": "Default background color to be used on containers."
|
|
59
39
|
},
|
|
60
|
-
"
|
|
40
|
+
"disabled": {
|
|
61
41
|
"$type": "color",
|
|
62
|
-
"$value": {
|
|
63
|
-
"colorSpace": "srgb",
|
|
64
|
-
"components": [
|
|
65
|
-
0.165,
|
|
66
|
-
0.824,
|
|
67
|
-
0.788
|
|
68
|
-
],
|
|
69
|
-
"hex": "#2ad2c9"
|
|
70
|
-
}
|
|
42
|
+
"$value": "{hpe-web.base.color.black.opacity4}"
|
|
71
43
|
},
|
|
72
|
-
"
|
|
44
|
+
"floating": {
|
|
73
45
|
"$type": "color",
|
|
74
46
|
"$value": "{hpe-web.base.color.white.100}"
|
|
75
47
|
},
|
|
@@ -87,15 +59,7 @@
|
|
|
87
59
|
},
|
|
88
60
|
"ok": {
|
|
89
61
|
"$type": "color",
|
|
90
|
-
"$value": {
|
|
91
|
-
"colorSpace": "srgb",
|
|
92
|
-
"components": [
|
|
93
|
-
0,
|
|
94
|
-
0.604,
|
|
95
|
-
0.443
|
|
96
|
-
],
|
|
97
|
-
"hex": "#009a71"
|
|
98
|
-
}
|
|
62
|
+
"$value": "{hpe-web.base.color.green.100}"
|
|
99
63
|
},
|
|
100
64
|
"primary": {
|
|
101
65
|
"$type": "color",
|
|
@@ -107,17 +71,13 @@
|
|
|
107
71
|
"$value": "{hpe-web.base.color.green.700}",
|
|
108
72
|
"$description": "The strong variant of background-primary. Primary palette is derived from the brand color and used for high visual prominence."
|
|
109
73
|
},
|
|
74
|
+
"sunken": {
|
|
75
|
+
"$type": "color",
|
|
76
|
+
"$value": "{hpe-web.base.color.grey.200}"
|
|
77
|
+
},
|
|
110
78
|
"warning": {
|
|
111
79
|
"$type": "color",
|
|
112
|
-
"$value": {
|
|
113
|
-
"colorSpace": "srgb",
|
|
114
|
-
"components": [
|
|
115
|
-
0.827,
|
|
116
|
-
0.427,
|
|
117
|
-
0
|
|
118
|
-
],
|
|
119
|
-
"hex": "#d36d00"
|
|
120
|
-
}
|
|
80
|
+
"$value": "{hpe-web.base.color.orange.50}"
|
|
121
81
|
}
|
|
122
82
|
},
|
|
123
83
|
"border": {
|
|
@@ -127,28 +87,13 @@
|
|
|
127
87
|
},
|
|
128
88
|
"default": {
|
|
129
89
|
"$type": "color",
|
|
130
|
-
"$value": {
|
|
131
|
-
"colorSpace": "srgb",
|
|
132
|
-
"components": [
|
|
133
|
-
0.627,
|
|
134
|
-
0.635,
|
|
135
|
-
0.659
|
|
136
|
-
],
|
|
137
|
-
"hex": "#a0a2a8"
|
|
138
|
-
},
|
|
90
|
+
"$value": "{hpe-web.base.color.grey.500}",
|
|
139
91
|
"$description": "Default border color."
|
|
140
92
|
},
|
|
141
|
-
"
|
|
93
|
+
"disabled": {
|
|
142
94
|
"$type": "color",
|
|
143
|
-
"$value": {
|
|
144
|
-
|
|
145
|
-
"components": [
|
|
146
|
-
0.165,
|
|
147
|
-
0.824,
|
|
148
|
-
0.788
|
|
149
|
-
],
|
|
150
|
-
"hex": "#2ad2c9"
|
|
151
|
-
}
|
|
95
|
+
"$value": "{hpe-web.base.color.black.opacity12}",
|
|
96
|
+
"$description": "Disabled color for borders. Using disabled colors ensures that disabled components are consistently styled."
|
|
152
97
|
},
|
|
153
98
|
"ok": {
|
|
154
99
|
"$type": "color",
|
|
@@ -158,9 +103,9 @@
|
|
|
158
103
|
"$type": "color",
|
|
159
104
|
"$value": "{hpe-web.base.color.green.600}"
|
|
160
105
|
},
|
|
161
|
-
"
|
|
106
|
+
"selected": {
|
|
162
107
|
"$type": "color",
|
|
163
|
-
"$value": "{hpe-web.base.color.green.
|
|
108
|
+
"$value": "{hpe-web.base.color.green.800}"
|
|
164
109
|
},
|
|
165
110
|
"strong": {
|
|
166
111
|
"$type": "color",
|
|
@@ -169,27 +114,11 @@
|
|
|
169
114
|
},
|
|
170
115
|
"warning": {
|
|
171
116
|
"$type": "color",
|
|
172
|
-
"$value": {
|
|
173
|
-
"colorSpace": "srgb",
|
|
174
|
-
"components": [
|
|
175
|
-
0.827,
|
|
176
|
-
0.427,
|
|
177
|
-
0
|
|
178
|
-
],
|
|
179
|
-
"hex": "#d36d00"
|
|
180
|
-
}
|
|
117
|
+
"$value": "{hpe-web.color.foreground.warning}"
|
|
181
118
|
},
|
|
182
119
|
"weak": {
|
|
183
120
|
"$type": "color",
|
|
184
|
-
"$value": {
|
|
185
|
-
"colorSpace": "srgb",
|
|
186
|
-
"components": [
|
|
187
|
-
0.82,
|
|
188
|
-
0.82,
|
|
189
|
-
0.82
|
|
190
|
-
],
|
|
191
|
-
"hex": "#d1d1d1"
|
|
192
|
-
}
|
|
121
|
+
"$value": "{hpe-web.base.color.grey.400}"
|
|
193
122
|
}
|
|
194
123
|
},
|
|
195
124
|
"decorative": {
|
|
@@ -222,7 +151,7 @@
|
|
|
222
151
|
"$value": "{hpe-web.base.color.grey.600}",
|
|
223
152
|
"$description": "Highest emphasis variant of neutral palette."
|
|
224
153
|
},
|
|
225
|
-
"neutral-
|
|
154
|
+
"neutral-strong": {
|
|
226
155
|
"$type": "color",
|
|
227
156
|
"$value": "{hpe-web.base.color.grey.650}",
|
|
228
157
|
"$description": "Highest emphasis variant of neutral palette."
|
|
@@ -237,290 +166,30 @@
|
|
|
237
166
|
"$value": "{hpe-web.base.color.white.100}"
|
|
238
167
|
}
|
|
239
168
|
},
|
|
240
|
-
"
|
|
241
|
-
"
|
|
242
|
-
"
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
},
|
|
246
|
-
"stop100": {
|
|
247
|
-
"$type": "color",
|
|
248
|
-
"$value": {
|
|
249
|
-
"colorSpace": "srgb",
|
|
250
|
-
"components": [
|
|
251
|
-
1,
|
|
252
|
-
1,
|
|
253
|
-
1
|
|
254
|
-
],
|
|
255
|
-
"hex": "#ffffff",
|
|
256
|
-
"alpha": 0
|
|
257
|
-
}
|
|
258
|
-
}
|
|
259
|
-
},
|
|
260
|
-
"element neutral": {
|
|
261
|
-
"stop0": {
|
|
262
|
-
"$type": "color",
|
|
263
|
-
"$value": {
|
|
264
|
-
"colorSpace": "srgb",
|
|
265
|
-
"components": [
|
|
266
|
-
0.161,
|
|
267
|
-
0.176,
|
|
268
|
-
0.227
|
|
269
|
-
],
|
|
270
|
-
"hex": "#292d3a",
|
|
271
|
-
"alpha": 0.27
|
|
272
|
-
}
|
|
273
|
-
},
|
|
274
|
-
"stop100": {
|
|
275
|
-
"$type": "color",
|
|
276
|
-
"$value": {
|
|
277
|
-
"colorSpace": "srgb",
|
|
278
|
-
"components": [
|
|
279
|
-
1,
|
|
280
|
-
1,
|
|
281
|
-
1
|
|
282
|
-
],
|
|
283
|
-
"hex": "#ffffff",
|
|
284
|
-
"alpha": 0
|
|
285
|
-
}
|
|
286
|
-
},
|
|
287
|
-
"stop15": {
|
|
288
|
-
"$type": "color",
|
|
289
|
-
"$value": {
|
|
290
|
-
"colorSpace": "srgb",
|
|
291
|
-
"components": [
|
|
292
|
-
0.224,
|
|
293
|
-
0.239,
|
|
294
|
-
0.282
|
|
295
|
-
],
|
|
296
|
-
"hex": "#393d48",
|
|
297
|
-
"alpha": 0.25
|
|
298
|
-
}
|
|
299
|
-
},
|
|
300
|
-
"stop28": {
|
|
301
|
-
"$type": "color",
|
|
302
|
-
"$value": {
|
|
303
|
-
"colorSpace": "srgb",
|
|
304
|
-
"components": [
|
|
305
|
-
0.286,
|
|
306
|
-
0.306,
|
|
307
|
-
0.341
|
|
308
|
-
],
|
|
309
|
-
"hex": "#494e57",
|
|
310
|
-
"alpha": 0.24
|
|
311
|
-
}
|
|
312
|
-
},
|
|
313
|
-
"stop38": {
|
|
314
|
-
"$type": "color",
|
|
315
|
-
"$value": {
|
|
316
|
-
"colorSpace": "srgb",
|
|
317
|
-
"components": [
|
|
318
|
-
0.353,
|
|
319
|
-
0.373,
|
|
320
|
-
0.396
|
|
321
|
-
],
|
|
322
|
-
"hex": "#5a5f65",
|
|
323
|
-
"alpha": 0.22
|
|
324
|
-
}
|
|
325
|
-
},
|
|
326
|
-
"stop47": {
|
|
327
|
-
"$type": "color",
|
|
328
|
-
"$value": {
|
|
329
|
-
"colorSpace": "srgb",
|
|
330
|
-
"components": [
|
|
331
|
-
0.416,
|
|
332
|
-
0.439,
|
|
333
|
-
0.451
|
|
334
|
-
],
|
|
335
|
-
"hex": "#6a7073",
|
|
336
|
-
"alpha": 0.2
|
|
337
|
-
}
|
|
338
|
-
},
|
|
339
|
-
"stop54": {
|
|
340
|
-
"$type": "color",
|
|
341
|
-
"$value": {
|
|
342
|
-
"colorSpace": "srgb",
|
|
343
|
-
"components": [
|
|
344
|
-
0.482,
|
|
345
|
-
0.506,
|
|
346
|
-
0.506
|
|
347
|
-
],
|
|
348
|
-
"hex": "#7b8181",
|
|
349
|
-
"alpha": 0.19
|
|
350
|
-
}
|
|
351
|
-
},
|
|
352
|
-
"stop60": {
|
|
353
|
-
"$type": "color",
|
|
354
|
-
"$value": {
|
|
355
|
-
"colorSpace": "srgb",
|
|
356
|
-
"components": [
|
|
357
|
-
0.549,
|
|
358
|
-
0.573,
|
|
359
|
-
0.565
|
|
360
|
-
],
|
|
361
|
-
"hex": "#8c9290",
|
|
362
|
-
"alpha": 0.17
|
|
363
|
-
}
|
|
364
|
-
},
|
|
365
|
-
"stop65": {
|
|
366
|
-
"$type": "color",
|
|
367
|
-
"$value": {
|
|
368
|
-
"colorSpace": "srgb",
|
|
369
|
-
"components": [
|
|
370
|
-
0.616,
|
|
371
|
-
0.639,
|
|
372
|
-
0.62
|
|
373
|
-
],
|
|
374
|
-
"hex": "#9da39e",
|
|
375
|
-
"alpha": 0.15
|
|
376
|
-
}
|
|
377
|
-
},
|
|
378
|
-
"stop70": {
|
|
379
|
-
"$type": "color",
|
|
380
|
-
"$value": {
|
|
381
|
-
"colorSpace": "srgb",
|
|
382
|
-
"components": [
|
|
383
|
-
0.678,
|
|
384
|
-
0.706,
|
|
385
|
-
0.675
|
|
386
|
-
],
|
|
387
|
-
"hex": "#adb4ac",
|
|
388
|
-
"alpha": 0.13
|
|
389
|
-
}
|
|
390
|
-
},
|
|
391
|
-
"stop73": {
|
|
392
|
-
"$type": "color",
|
|
393
|
-
"$value": {
|
|
394
|
-
"colorSpace": "srgb",
|
|
395
|
-
"components": [
|
|
396
|
-
0.745,
|
|
397
|
-
0.773,
|
|
398
|
-
0.733
|
|
399
|
-
],
|
|
400
|
-
"hex": "#bec5bb",
|
|
401
|
-
"alpha": 0.12
|
|
402
|
-
}
|
|
403
|
-
},
|
|
404
|
-
"stop77": {
|
|
405
|
-
"$type": "color",
|
|
406
|
-
"$value": {
|
|
407
|
-
"colorSpace": "srgb",
|
|
408
|
-
"components": [
|
|
409
|
-
0.812,
|
|
410
|
-
0.839,
|
|
411
|
-
0.788
|
|
412
|
-
],
|
|
413
|
-
"hex": "#cfd6c9",
|
|
414
|
-
"alpha": 0.1
|
|
415
|
-
}
|
|
416
|
-
},
|
|
417
|
-
"stop80": {
|
|
418
|
-
"$type": "color",
|
|
419
|
-
"$value": {
|
|
420
|
-
"colorSpace": "srgb",
|
|
421
|
-
"components": [
|
|
422
|
-
0.878,
|
|
423
|
-
0.906,
|
|
424
|
-
0.843
|
|
425
|
-
],
|
|
426
|
-
"hex": "#e0e7d7",
|
|
427
|
-
"alpha": 0.08
|
|
428
|
-
}
|
|
429
|
-
},
|
|
430
|
-
"stop84": {
|
|
431
|
-
"$type": "color",
|
|
432
|
-
"$value": {
|
|
433
|
-
"colorSpace": "srgb",
|
|
434
|
-
"components": [
|
|
435
|
-
0.941,
|
|
436
|
-
0.973,
|
|
437
|
-
0.898
|
|
438
|
-
],
|
|
439
|
-
"hex": "#f0f8e5",
|
|
440
|
-
"alpha": 0.07
|
|
441
|
-
}
|
|
442
|
-
},
|
|
443
|
-
"stop88": {
|
|
444
|
-
"$type": "color",
|
|
445
|
-
"$value": {
|
|
446
|
-
"colorSpace": "srgb",
|
|
447
|
-
"components": [
|
|
448
|
-
0.98,
|
|
449
|
-
1,
|
|
450
|
-
0.949
|
|
451
|
-
],
|
|
452
|
-
"hex": "#fafff2",
|
|
453
|
-
"alpha": 0.05
|
|
454
|
-
}
|
|
455
|
-
},
|
|
456
|
-
"stop94": {
|
|
457
|
-
"$type": "color",
|
|
458
|
-
"$value": {
|
|
459
|
-
"colorSpace": "srgb",
|
|
460
|
-
"components": [
|
|
461
|
-
1,
|
|
462
|
-
1,
|
|
463
|
-
1
|
|
464
|
-
],
|
|
465
|
-
"hex": "#ffffff",
|
|
466
|
-
"alpha": 0.03
|
|
467
|
-
}
|
|
468
|
-
}
|
|
169
|
+
"foreground": {
|
|
170
|
+
"critical": {
|
|
171
|
+
"$type": "color",
|
|
172
|
+
"$value": "{hpe-web.base.color.red.600}",
|
|
173
|
+
"$description": "Use for foreground regions communicating error or danger. Often used to color values in a meter or progress bar. Keywords: status"
|
|
469
174
|
},
|
|
470
|
-
"
|
|
471
|
-
"
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
|
|
480
|
-
|
|
481
|
-
|
|
482
|
-
|
|
483
|
-
|
|
484
|
-
|
|
485
|
-
|
|
486
|
-
|
|
487
|
-
|
|
488
|
-
"components": [
|
|
489
|
-
0.114,
|
|
490
|
-
0.122,
|
|
491
|
-
0.153
|
|
492
|
-
],
|
|
493
|
-
"hex": "#1d1f27"
|
|
494
|
-
}
|
|
495
|
-
}
|
|
496
|
-
},
|
|
497
|
-
"video overlay": {
|
|
498
|
-
"stop0": {
|
|
499
|
-
"$type": "color",
|
|
500
|
-
"$value": {
|
|
501
|
-
"colorSpace": "srgb",
|
|
502
|
-
"components": [
|
|
503
|
-
0,
|
|
504
|
-
0,
|
|
505
|
-
0
|
|
506
|
-
],
|
|
507
|
-
"hex": "#000000",
|
|
508
|
-
"alpha": 0
|
|
509
|
-
}
|
|
510
|
-
},
|
|
511
|
-
"stop100": {
|
|
512
|
-
"$type": "color",
|
|
513
|
-
"$value": {
|
|
514
|
-
"colorSpace": "srgb",
|
|
515
|
-
"components": [
|
|
516
|
-
0,
|
|
517
|
-
0,
|
|
518
|
-
0
|
|
519
|
-
],
|
|
520
|
-
"hex": "#000000",
|
|
521
|
-
"alpha": 0.4
|
|
522
|
-
}
|
|
523
|
-
}
|
|
175
|
+
"ok": {
|
|
176
|
+
"$type": "color",
|
|
177
|
+
"$value": "{hpe-web.base.color.green.650}",
|
|
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"
|
|
179
|
+
},
|
|
180
|
+
"primary": {
|
|
181
|
+
"$type": "color",
|
|
182
|
+
"$value": "{hpe-web.base.color.green.800}"
|
|
183
|
+
},
|
|
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"
|
|
188
|
+
},
|
|
189
|
+
"warning": {
|
|
190
|
+
"$type": "color",
|
|
191
|
+
"$value": "{hpe-web.base.color.orange.600}",
|
|
192
|
+
"$description": "Use for foreground regions communicating warning or caution. Often used to color values in a meter or progress bar. Keywords: status"
|
|
524
193
|
}
|
|
525
194
|
},
|
|
526
195
|
"icon": {
|
|
@@ -530,7 +199,7 @@
|
|
|
530
199
|
},
|
|
531
200
|
"default": {
|
|
532
201
|
"$type": "color",
|
|
533
|
-
"$value": "{hpe-web.color.text.
|
|
202
|
+
"$value": "{hpe-web.color.text.default}",
|
|
534
203
|
"$description": "Default icon color."
|
|
535
204
|
},
|
|
536
205
|
"disabled": {
|
|
@@ -538,17 +207,9 @@
|
|
|
538
207
|
"$value": "{hpe-web.color.text.disabled}",
|
|
539
208
|
"$description": "Disabled color for icons. Using disabled colors ensures that disabled components are consistently styled."
|
|
540
209
|
},
|
|
541
|
-
"
|
|
210
|
+
"info": {
|
|
542
211
|
"$type": "color",
|
|
543
|
-
"$value": {
|
|
544
|
-
"colorSpace": "srgb",
|
|
545
|
-
"components": [
|
|
546
|
-
0.165,
|
|
547
|
-
0.824,
|
|
548
|
-
0.788
|
|
549
|
-
],
|
|
550
|
-
"hex": "#2ad2c9"
|
|
551
|
-
}
|
|
212
|
+
"$value": "{hpe-web.base.color.blue.700}"
|
|
552
213
|
},
|
|
553
214
|
"neutral": {
|
|
554
215
|
"$type": "color",
|
|
@@ -558,6 +219,11 @@
|
|
|
558
219
|
"$type": "color",
|
|
559
220
|
"$value": "{hpe-web.base.color.green.650}"
|
|
560
221
|
},
|
|
222
|
+
"onStrong": {
|
|
223
|
+
"$type": "color",
|
|
224
|
+
"$value": "{hpe-web.base.color.white.100}",
|
|
225
|
+
"$description": "Icon color to be used on strong backgrounds. For example, background-neutral-xstrong."
|
|
226
|
+
},
|
|
561
227
|
"primary": {
|
|
562
228
|
"$type": "color",
|
|
563
229
|
"$value": "{hpe-web.color.decorative.brand}",
|
|
@@ -565,19 +231,11 @@
|
|
|
565
231
|
},
|
|
566
232
|
"primary-strong": {
|
|
567
233
|
"$type": "color",
|
|
568
|
-
"$value": {
|
|
569
|
-
"colorSpace": "srgb",
|
|
570
|
-
"components": [
|
|
571
|
-
0,
|
|
572
|
-
0.373,
|
|
573
|
-
0.286
|
|
574
|
-
],
|
|
575
|
-
"hex": "#005f49"
|
|
576
|
-
}
|
|
234
|
+
"$value": "{hpe-web.base.color.green.800}"
|
|
577
235
|
},
|
|
578
236
|
"strong": {
|
|
579
237
|
"$type": "color",
|
|
580
|
-
"$value": "{hpe-web.color.text.
|
|
238
|
+
"$value": "{hpe-web.color.text.strong}",
|
|
581
239
|
"$description": "Emphasized icon color for increased visual prominence."
|
|
582
240
|
},
|
|
583
241
|
"warning": {
|
|
@@ -601,107 +259,55 @@
|
|
|
601
259
|
}
|
|
602
260
|
},
|
|
603
261
|
"text": {
|
|
604
|
-
"body": {
|
|
605
|
-
"$type": "color",
|
|
606
|
-
"$value": {
|
|
607
|
-
"colorSpace": "srgb",
|
|
608
|
-
"components": [
|
|
609
|
-
0.404,
|
|
610
|
-
0.408,
|
|
611
|
-
0.431
|
|
612
|
-
],
|
|
613
|
-
"hex": "#67686e"
|
|
614
|
-
},
|
|
615
|
-
"$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
|
|
616
|
-
},
|
|
617
262
|
"critical": {
|
|
618
263
|
"$type": "color",
|
|
619
264
|
"$value": "{hpe-web.base.color.red.800}"
|
|
620
265
|
},
|
|
621
|
-
"
|
|
622
|
-
"$type": "color",
|
|
623
|
-
"$value": {
|
|
624
|
-
"colorSpace": "srgb",
|
|
625
|
-
"components": [
|
|
626
|
-
0.627,
|
|
627
|
-
0.635,
|
|
628
|
-
0.671
|
|
629
|
-
],
|
|
630
|
-
"hex": "#a0a2ab"
|
|
631
|
-
},
|
|
632
|
-
"$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
|
|
633
|
-
},
|
|
634
|
-
"focus": {
|
|
266
|
+
"default": {
|
|
635
267
|
"$type": "color",
|
|
636
|
-
"$value": {
|
|
637
|
-
|
|
638
|
-
"components": [
|
|
639
|
-
0.165,
|
|
640
|
-
0.824,
|
|
641
|
-
0.788
|
|
642
|
-
],
|
|
643
|
-
"hex": "#2ad2c9"
|
|
644
|
-
}
|
|
268
|
+
"$value": "{hpe-web.base.color.grey.800}",
|
|
269
|
+
"$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
|
|
645
270
|
},
|
|
646
|
-
"
|
|
271
|
+
"disabled": {
|
|
647
272
|
"$type": "color",
|
|
648
|
-
"$value": "{hpe-web.base.color.
|
|
649
|
-
"$description": "
|
|
273
|
+
"$value": "{hpe-web.base.color.black.opacity24}",
|
|
274
|
+
"$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
|
|
650
275
|
},
|
|
651
276
|
"neutral-strong": {
|
|
652
277
|
"$type": "color",
|
|
653
|
-
"$value": {
|
|
654
|
-
"colorSpace": "srgb",
|
|
655
|
-
"components": [
|
|
656
|
-
0.129,
|
|
657
|
-
0.141,
|
|
658
|
-
0.18
|
|
659
|
-
],
|
|
660
|
-
"hex": "#21242e"
|
|
661
|
-
}
|
|
278
|
+
"$value": "{hpe-web.base.color.grey.1000}"
|
|
662
279
|
},
|
|
663
280
|
"ok": {
|
|
664
281
|
"$type": "color",
|
|
665
282
|
"$value": "{hpe-web.base.color.green.650}"
|
|
666
283
|
},
|
|
667
|
-
"
|
|
284
|
+
"onStrong": {
|
|
668
285
|
"$type": "color",
|
|
669
286
|
"$value": "{hpe-web.base.color.white.100}",
|
|
670
287
|
"$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
671
288
|
},
|
|
672
289
|
"primary": {
|
|
673
290
|
"$type": "color",
|
|
674
|
-
"$value": "{hpe-web.base.color.green.
|
|
291
|
+
"$value": "{hpe-web.base.color.green.600}",
|
|
675
292
|
"$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
676
293
|
},
|
|
677
294
|
"primary-strong": {
|
|
678
295
|
"$type": "color",
|
|
679
|
-
"$value": {
|
|
680
|
-
"colorSpace": "srgb",
|
|
681
|
-
"components": [
|
|
682
|
-
0,
|
|
683
|
-
0.373,
|
|
684
|
-
0.286
|
|
685
|
-
],
|
|
686
|
-
"hex": "#005f49"
|
|
687
|
-
},
|
|
296
|
+
"$value": "{hpe-web.base.color.green.700}",
|
|
688
297
|
"$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
689
298
|
},
|
|
299
|
+
"strong": {
|
|
300
|
+
"$type": "color",
|
|
301
|
+
"$value": "{hpe-web.base.color.grey.1000}",
|
|
302
|
+
"$description": "Also called 'text.strong'"
|
|
303
|
+
},
|
|
690
304
|
"warning": {
|
|
691
305
|
"$type": "color",
|
|
692
306
|
"$value": "{hpe-web.base.color.orange.600}"
|
|
693
307
|
},
|
|
694
308
|
"weak": {
|
|
695
309
|
"$type": "color",
|
|
696
|
-
"$value": {
|
|
697
|
-
"colorSpace": "srgb",
|
|
698
|
-
"components": [
|
|
699
|
-
0.404,
|
|
700
|
-
0.404,
|
|
701
|
-
0.404
|
|
702
|
-
],
|
|
703
|
-
"hex": "#676767"
|
|
704
|
-
},
|
|
310
|
+
"$value": "{hpe-web.base.color.grey.650}",
|
|
705
311
|
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
|
|
706
312
|
}
|
|
707
313
|
},
|
|
@@ -714,7 +320,7 @@
|
|
|
714
320
|
0,
|
|
715
321
|
0
|
|
716
322
|
],
|
|
717
|
-
"hex": "#
|
|
323
|
+
"hex": "#00000000",
|
|
718
324
|
"alpha": 0
|
|
719
325
|
}
|
|
720
326
|
}
|