@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.
- package/README.md +8 -3
- package/dist/css/locales/de.tokens.css +56 -0
- package/dist/css/locales/es.tokens.css +56 -0
- package/dist/css/locales/fr.tokens.css +56 -0
- package/dist/css/locales/it.tokens.css +56 -0
- package/dist/css/locales/ja.tokens.css +71 -0
- package/dist/css/locales/ko.tokens.css +71 -0
- package/dist/css/tokens.css +142 -161
- package/dist/css/tokens.dark.css +54 -43
- package/dist/css/tokens.md-lg.css +49 -49
- package/dist/css/tokens.xl.css +51 -51
- package/package.json +1 -1
- package/src/component/button.json +212 -422
- package/src/locales.json +8 -8
- package/src/semantic/color.dark.json +446 -161
- package/src/semantic/color.light.json +466 -158
- package/src/semantic/dimension.md-lg.json +21 -21
- package/src/semantic/dimension.xl.json +21 -21
- package/src/semantic/dimension.xs-sm.json +21 -21
|
@@ -11,17 +11,37 @@
|
|
|
11
11
|
"$type": "color",
|
|
12
12
|
"$value": "{hpe-web.base.color.grey.50}"
|
|
13
13
|
},
|
|
14
|
-
"
|
|
14
|
+
"card-hover": {
|
|
15
15
|
"$type": "color",
|
|
16
|
-
"$value": "{hpe-web.base.color.grey.
|
|
16
|
+
"$value": "{hpe-web.base.color.grey.200}"
|
|
17
|
+
},
|
|
18
|
+
"component": {
|
|
19
|
+
"$type": "color",
|
|
20
|
+
"$value": "{hpe-web.base.color.grey.200}"
|
|
17
21
|
},
|
|
18
|
-
"
|
|
22
|
+
"component-disabled": {
|
|
19
23
|
"$type": "color",
|
|
20
|
-
"$value":
|
|
24
|
+
"$value": {
|
|
25
|
+
"colorSpace": "srgb",
|
|
26
|
+
"components": [
|
|
27
|
+
0.647,
|
|
28
|
+
0.647,
|
|
29
|
+
0.663
|
|
30
|
+
],
|
|
31
|
+
"hex": "#a5a5a9"
|
|
32
|
+
}
|
|
21
33
|
},
|
|
22
|
-
"
|
|
34
|
+
"component-hover": {
|
|
23
35
|
"$type": "color",
|
|
24
|
-
"$value":
|
|
36
|
+
"$value": {
|
|
37
|
+
"colorSpace": "srgb",
|
|
38
|
+
"components": [
|
|
39
|
+
0.831,
|
|
40
|
+
0.831,
|
|
41
|
+
0.831
|
|
42
|
+
],
|
|
43
|
+
"hex": "#d4d4d4"
|
|
44
|
+
}
|
|
25
45
|
},
|
|
26
46
|
"contrast": {
|
|
27
47
|
"$type": "color",
|
|
@@ -30,18 +50,26 @@
|
|
|
30
50
|
},
|
|
31
51
|
"critical": {
|
|
32
52
|
"$type": "color",
|
|
33
|
-
"$value": "{hpe-web.base.color.red.
|
|
53
|
+
"$value": "{hpe-web.base.color.red.800}"
|
|
34
54
|
},
|
|
35
55
|
"default": {
|
|
36
56
|
"$type": "color",
|
|
37
57
|
"$value": "{hpe-web.base.color.white.100}",
|
|
38
58
|
"$description": "Default background color to be used on containers."
|
|
39
59
|
},
|
|
40
|
-
"
|
|
60
|
+
"focus": {
|
|
41
61
|
"$type": "color",
|
|
42
|
-
"$value":
|
|
62
|
+
"$value": {
|
|
63
|
+
"colorSpace": "srgb",
|
|
64
|
+
"components": [
|
|
65
|
+
0.165,
|
|
66
|
+
0.824,
|
|
67
|
+
0.788
|
|
68
|
+
],
|
|
69
|
+
"hex": "#2ad2c9"
|
|
70
|
+
}
|
|
43
71
|
},
|
|
44
|
-
"
|
|
72
|
+
"front": {
|
|
45
73
|
"$type": "color",
|
|
46
74
|
"$value": "{hpe-web.base.color.white.100}"
|
|
47
75
|
},
|
|
@@ -59,7 +87,15 @@
|
|
|
59
87
|
},
|
|
60
88
|
"ok": {
|
|
61
89
|
"$type": "color",
|
|
62
|
-
"$value":
|
|
90
|
+
"$value": {
|
|
91
|
+
"colorSpace": "srgb",
|
|
92
|
+
"components": [
|
|
93
|
+
0,
|
|
94
|
+
0.604,
|
|
95
|
+
0.443
|
|
96
|
+
],
|
|
97
|
+
"hex": "#009a71"
|
|
98
|
+
}
|
|
63
99
|
},
|
|
64
100
|
"primary": {
|
|
65
101
|
"$type": "color",
|
|
@@ -71,13 +107,17 @@
|
|
|
71
107
|
"$value": "{hpe-web.base.color.green.700}",
|
|
72
108
|
"$description": "The strong variant of background-primary. Primary palette is derived from the brand color and used for high visual prominence."
|
|
73
109
|
},
|
|
74
|
-
"sunken": {
|
|
75
|
-
"$type": "color",
|
|
76
|
-
"$value": "{hpe-web.base.color.grey.200}"
|
|
77
|
-
},
|
|
78
110
|
"warning": {
|
|
79
111
|
"$type": "color",
|
|
80
|
-
"$value":
|
|
112
|
+
"$value": {
|
|
113
|
+
"colorSpace": "srgb",
|
|
114
|
+
"components": [
|
|
115
|
+
0.827,
|
|
116
|
+
0.427,
|
|
117
|
+
0
|
|
118
|
+
],
|
|
119
|
+
"hex": "#d36d00"
|
|
120
|
+
}
|
|
81
121
|
}
|
|
82
122
|
},
|
|
83
123
|
"border": {
|
|
@@ -87,13 +127,28 @@
|
|
|
87
127
|
},
|
|
88
128
|
"default": {
|
|
89
129
|
"$type": "color",
|
|
90
|
-
"$value":
|
|
130
|
+
"$value": {
|
|
131
|
+
"colorSpace": "srgb",
|
|
132
|
+
"components": [
|
|
133
|
+
0.627,
|
|
134
|
+
0.635,
|
|
135
|
+
0.659
|
|
136
|
+
],
|
|
137
|
+
"hex": "#a0a2a8"
|
|
138
|
+
},
|
|
91
139
|
"$description": "Default border color."
|
|
92
140
|
},
|
|
93
|
-
"
|
|
141
|
+
"focus": {
|
|
94
142
|
"$type": "color",
|
|
95
|
-
"$value":
|
|
96
|
-
|
|
143
|
+
"$value": {
|
|
144
|
+
"colorSpace": "srgb",
|
|
145
|
+
"components": [
|
|
146
|
+
0.165,
|
|
147
|
+
0.824,
|
|
148
|
+
0.788
|
|
149
|
+
],
|
|
150
|
+
"hex": "#2ad2c9"
|
|
151
|
+
}
|
|
97
152
|
},
|
|
98
153
|
"ok": {
|
|
99
154
|
"$type": "color",
|
|
@@ -103,9 +158,9 @@
|
|
|
103
158
|
"$type": "color",
|
|
104
159
|
"$value": "{hpe-web.base.color.green.600}"
|
|
105
160
|
},
|
|
106
|
-
"
|
|
161
|
+
"primary-strong": {
|
|
107
162
|
"$type": "color",
|
|
108
|
-
"$value": "{hpe-web.base.color.green.
|
|
163
|
+
"$value": "{hpe-web.base.color.green.700}"
|
|
109
164
|
},
|
|
110
165
|
"strong": {
|
|
111
166
|
"$type": "color",
|
|
@@ -114,11 +169,27 @@
|
|
|
114
169
|
},
|
|
115
170
|
"warning": {
|
|
116
171
|
"$type": "color",
|
|
117
|
-
"$value":
|
|
172
|
+
"$value": {
|
|
173
|
+
"colorSpace": "srgb",
|
|
174
|
+
"components": [
|
|
175
|
+
0.827,
|
|
176
|
+
0.427,
|
|
177
|
+
0
|
|
178
|
+
],
|
|
179
|
+
"hex": "#d36d00"
|
|
180
|
+
}
|
|
118
181
|
},
|
|
119
182
|
"weak": {
|
|
120
183
|
"$type": "color",
|
|
121
|
-
"$value":
|
|
184
|
+
"$value": {
|
|
185
|
+
"colorSpace": "srgb",
|
|
186
|
+
"components": [
|
|
187
|
+
0.82,
|
|
188
|
+
0.82,
|
|
189
|
+
0.82
|
|
190
|
+
],
|
|
191
|
+
"hex": "#d1d1d1"
|
|
192
|
+
}
|
|
122
193
|
}
|
|
123
194
|
},
|
|
124
195
|
"decorative": {
|
|
@@ -151,7 +222,7 @@
|
|
|
151
222
|
"$value": "{hpe-web.base.color.grey.600}",
|
|
152
223
|
"$description": "Highest emphasis variant of neutral palette."
|
|
153
224
|
},
|
|
154
|
-
"neutral-
|
|
225
|
+
"neutral-hover": {
|
|
155
226
|
"$type": "color",
|
|
156
227
|
"$value": "{hpe-web.base.color.grey.650}",
|
|
157
228
|
"$description": "Highest emphasis variant of neutral palette."
|
|
@@ -166,30 +237,290 @@
|
|
|
166
237
|
"$value": "{hpe-web.base.color.white.100}"
|
|
167
238
|
}
|
|
168
239
|
},
|
|
169
|
-
"
|
|
170
|
-
"
|
|
171
|
-
"
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
240
|
+
"gradient": {
|
|
241
|
+
"element green": {
|
|
242
|
+
"stop0": {
|
|
243
|
+
"$type": "color",
|
|
244
|
+
"$value": "{hpe-web.base.color.green.550}"
|
|
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
|
+
}
|
|
179
259
|
},
|
|
180
|
-
"
|
|
181
|
-
"
|
|
182
|
-
|
|
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
|
+
}
|
|
183
469
|
},
|
|
184
|
-
"
|
|
185
|
-
"
|
|
186
|
-
|
|
187
|
-
|
|
470
|
+
"neutral": {
|
|
471
|
+
"stop0": {
|
|
472
|
+
"$type": "color",
|
|
473
|
+
"$value": {
|
|
474
|
+
"colorSpace": "srgb",
|
|
475
|
+
"components": [
|
|
476
|
+
0.114,
|
|
477
|
+
0.122,
|
|
478
|
+
0.153
|
|
479
|
+
],
|
|
480
|
+
"hex": "#1d1f27",
|
|
481
|
+
"alpha": 0
|
|
482
|
+
}
|
|
483
|
+
},
|
|
484
|
+
"stop100": {
|
|
485
|
+
"$type": "color",
|
|
486
|
+
"$value": {
|
|
487
|
+
"colorSpace": "srgb",
|
|
488
|
+
"components": [
|
|
489
|
+
0.114,
|
|
490
|
+
0.122,
|
|
491
|
+
0.153
|
|
492
|
+
],
|
|
493
|
+
"hex": "#1d1f27"
|
|
494
|
+
}
|
|
495
|
+
}
|
|
188
496
|
},
|
|
189
|
-
"
|
|
190
|
-
"
|
|
191
|
-
|
|
192
|
-
|
|
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
|
+
}
|
|
193
524
|
}
|
|
194
525
|
},
|
|
195
526
|
"icon": {
|
|
@@ -199,7 +530,7 @@
|
|
|
199
530
|
},
|
|
200
531
|
"default": {
|
|
201
532
|
"$type": "color",
|
|
202
|
-
"$value": "{hpe-web.color.text.
|
|
533
|
+
"$value": "{hpe-web.color.text.body}",
|
|
203
534
|
"$description": "Default icon color."
|
|
204
535
|
},
|
|
205
536
|
"disabled": {
|
|
@@ -207,9 +538,17 @@
|
|
|
207
538
|
"$value": "{hpe-web.color.text.disabled}",
|
|
208
539
|
"$description": "Disabled color for icons. Using disabled colors ensures that disabled components are consistently styled."
|
|
209
540
|
},
|
|
210
|
-
"
|
|
541
|
+
"focus": {
|
|
211
542
|
"$type": "color",
|
|
212
|
-
"$value":
|
|
543
|
+
"$value": {
|
|
544
|
+
"colorSpace": "srgb",
|
|
545
|
+
"components": [
|
|
546
|
+
0.165,
|
|
547
|
+
0.824,
|
|
548
|
+
0.788
|
|
549
|
+
],
|
|
550
|
+
"hex": "#2ad2c9"
|
|
551
|
+
}
|
|
213
552
|
},
|
|
214
553
|
"neutral": {
|
|
215
554
|
"$type": "color",
|
|
@@ -219,11 +558,6 @@
|
|
|
219
558
|
"$type": "color",
|
|
220
559
|
"$value": "{hpe-web.base.color.green.650}"
|
|
221
560
|
},
|
|
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
|
-
},
|
|
227
561
|
"primary": {
|
|
228
562
|
"$type": "color",
|
|
229
563
|
"$value": "{hpe-web.color.decorative.brand}",
|
|
@@ -231,11 +565,19 @@
|
|
|
231
565
|
},
|
|
232
566
|
"primary-strong": {
|
|
233
567
|
"$type": "color",
|
|
234
|
-
"$value":
|
|
568
|
+
"$value": {
|
|
569
|
+
"colorSpace": "srgb",
|
|
570
|
+
"components": [
|
|
571
|
+
0,
|
|
572
|
+
0.373,
|
|
573
|
+
0.286
|
|
574
|
+
],
|
|
575
|
+
"hex": "#005f49"
|
|
576
|
+
}
|
|
235
577
|
},
|
|
236
578
|
"strong": {
|
|
237
579
|
"$type": "color",
|
|
238
|
-
"$value": "{hpe-web.color.text.
|
|
580
|
+
"$value": "{hpe-web.color.text.header}",
|
|
239
581
|
"$description": "Emphasized icon color for increased visual prominence."
|
|
240
582
|
},
|
|
241
583
|
"warning": {
|
|
@@ -259,55 +601,107 @@
|
|
|
259
601
|
}
|
|
260
602
|
},
|
|
261
603
|
"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
|
+
},
|
|
262
617
|
"critical": {
|
|
263
618
|
"$type": "color",
|
|
264
619
|
"$value": "{hpe-web.base.color.red.800}"
|
|
265
620
|
},
|
|
266
|
-
"default": {
|
|
267
|
-
"$type": "color",
|
|
268
|
-
"$value": "{hpe-web.base.color.grey.800}",
|
|
269
|
-
"$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
|
|
270
|
-
},
|
|
271
621
|
"disabled": {
|
|
272
622
|
"$type": "color",
|
|
273
|
-
"$value":
|
|
623
|
+
"$value": {
|
|
624
|
+
"colorSpace": "srgb",
|
|
625
|
+
"components": [
|
|
626
|
+
0.627,
|
|
627
|
+
0.635,
|
|
628
|
+
0.671
|
|
629
|
+
],
|
|
630
|
+
"hex": "#a0a2ab"
|
|
631
|
+
},
|
|
274
632
|
"$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
|
|
275
633
|
},
|
|
634
|
+
"focus": {
|
|
635
|
+
"$type": "color",
|
|
636
|
+
"$value": {
|
|
637
|
+
"colorSpace": "srgb",
|
|
638
|
+
"components": [
|
|
639
|
+
0.165,
|
|
640
|
+
0.824,
|
|
641
|
+
0.788
|
|
642
|
+
],
|
|
643
|
+
"hex": "#2ad2c9"
|
|
644
|
+
}
|
|
645
|
+
},
|
|
646
|
+
"header": {
|
|
647
|
+
"$type": "color",
|
|
648
|
+
"$value": "{hpe-web.base.color.grey.1000}",
|
|
649
|
+
"$description": "Also called 'text.strong'"
|
|
650
|
+
},
|
|
276
651
|
"neutral-strong": {
|
|
277
652
|
"$type": "color",
|
|
278
|
-
"$value":
|
|
653
|
+
"$value": {
|
|
654
|
+
"colorSpace": "srgb",
|
|
655
|
+
"components": [
|
|
656
|
+
0.129,
|
|
657
|
+
0.141,
|
|
658
|
+
0.18
|
|
659
|
+
],
|
|
660
|
+
"hex": "#21242e"
|
|
661
|
+
}
|
|
279
662
|
},
|
|
280
663
|
"ok": {
|
|
281
664
|
"$type": "color",
|
|
282
665
|
"$value": "{hpe-web.base.color.green.650}"
|
|
283
666
|
},
|
|
284
|
-
"
|
|
667
|
+
"onNeutral": {
|
|
285
668
|
"$type": "color",
|
|
286
669
|
"$value": "{hpe-web.base.color.white.100}",
|
|
287
670
|
"$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
288
671
|
},
|
|
289
672
|
"primary": {
|
|
290
673
|
"$type": "color",
|
|
291
|
-
"$value": "{hpe-web.base.color.green.
|
|
674
|
+
"$value": "{hpe-web.base.color.green.700}",
|
|
292
675
|
"$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
293
676
|
},
|
|
294
677
|
"primary-strong": {
|
|
295
678
|
"$type": "color",
|
|
296
|
-
"$value":
|
|
679
|
+
"$value": {
|
|
680
|
+
"colorSpace": "srgb",
|
|
681
|
+
"components": [
|
|
682
|
+
0,
|
|
683
|
+
0.373,
|
|
684
|
+
0.286
|
|
685
|
+
],
|
|
686
|
+
"hex": "#005f49"
|
|
687
|
+
},
|
|
297
688
|
"$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
298
689
|
},
|
|
299
|
-
"strong": {
|
|
300
|
-
"$type": "color",
|
|
301
|
-
"$value": "{hpe-web.base.color.grey.1000}",
|
|
302
|
-
"$description": "Also called 'text.strong'"
|
|
303
|
-
},
|
|
304
690
|
"warning": {
|
|
305
691
|
"$type": "color",
|
|
306
692
|
"$value": "{hpe-web.base.color.orange.600}"
|
|
307
693
|
},
|
|
308
694
|
"weak": {
|
|
309
695
|
"$type": "color",
|
|
310
|
-
"$value":
|
|
696
|
+
"$value": {
|
|
697
|
+
"colorSpace": "srgb",
|
|
698
|
+
"components": [
|
|
699
|
+
0.404,
|
|
700
|
+
0.404,
|
|
701
|
+
0.404
|
|
702
|
+
],
|
|
703
|
+
"hex": "#676767"
|
|
704
|
+
},
|
|
311
705
|
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
|
|
312
706
|
}
|
|
313
707
|
},
|
|
@@ -324,92 +718,6 @@
|
|
|
324
718
|
"alpha": 0
|
|
325
719
|
}
|
|
326
720
|
}
|
|
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
|
-
1,
|
|
342
|
-
1,
|
|
343
|
-
1
|
|
344
|
-
],
|
|
345
|
-
"hex": "#ffffff",
|
|
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.161,
|
|
358
|
-
0.176,
|
|
359
|
-
0.227
|
|
360
|
-
],
|
|
361
|
-
"hex": "#292d3a",
|
|
362
|
-
"alpha": 0.27
|
|
363
|
-
},
|
|
364
|
-
"$deprecated": true
|
|
365
|
-
}
|
|
366
|
-
},
|
|
367
|
-
"neutral": {
|
|
368
|
-
"stop100": {
|
|
369
|
-
"$type": "color",
|
|
370
|
-
"$value": {
|
|
371
|
-
"colorSpace": "srgb",
|
|
372
|
-
"components": [
|
|
373
|
-
0.114,
|
|
374
|
-
0.122,
|
|
375
|
-
0.153
|
|
376
|
-
],
|
|
377
|
-
"hex": "#1d1f27"
|
|
378
|
-
},
|
|
379
|
-
"$deprecated": true
|
|
380
|
-
}
|
|
381
|
-
},
|
|
382
|
-
"video overlay": {
|
|
383
|
-
"stop0": {
|
|
384
|
-
"$type": "color",
|
|
385
|
-
"$value": {
|
|
386
|
-
"colorSpace": "srgb",
|
|
387
|
-
"components": [
|
|
388
|
-
0,
|
|
389
|
-
0,
|
|
390
|
-
0
|
|
391
|
-
],
|
|
392
|
-
"hex": "#000000",
|
|
393
|
-
"alpha": 0
|
|
394
|
-
},
|
|
395
|
-
"$deprecated": true
|
|
396
|
-
},
|
|
397
|
-
"stop100": {
|
|
398
|
-
"$type": "color",
|
|
399
|
-
"$value": {
|
|
400
|
-
"colorSpace": "srgb",
|
|
401
|
-
"components": [
|
|
402
|
-
0,
|
|
403
|
-
0,
|
|
404
|
-
0
|
|
405
|
-
],
|
|
406
|
-
"hex": "#000000",
|
|
407
|
-
"alpha": 0.4
|
|
408
|
-
},
|
|
409
|
-
"$deprecated": true
|
|
410
|
-
}
|
|
411
|
-
}
|
|
412
|
-
}
|
|
413
721
|
}
|
|
414
722
|
}
|
|
415
723
|
}
|