@hpe-web/design-tokens 1.2.1 → 1.2.2
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/tokens.css +96 -113
- package/dist/css/tokens.dark.css +39 -56
- package/dist/css/tokens.md-lg.css +40 -40
- package/dist/css/tokens.xl.css +40 -40
- package/package.json +1 -1
- package/src/breakpoints.json +9 -11
- package/src/component/button.json +30 -203
- package/src/fonts.json +1 -5
- package/src/primitive/primitives.json +1 -912
- package/src/semantic/color.dark.json +79 -449
- package/src/semantic/color.light.json +75 -469
- package/src/semantic/dimension.md-lg.json +55 -55
- package/src/semantic/dimension.xl.json +57 -57
- package/src/semantic/dimension.xs-sm.json +54 -54
|
@@ -11,57 +11,37 @@
|
|
|
11
11
|
"$type": "color",
|
|
12
12
|
"$value": "{hpe-web.base.color.grey.1000}"
|
|
13
13
|
},
|
|
14
|
-
"
|
|
14
|
+
"carousel": {
|
|
15
15
|
"$type": "color",
|
|
16
|
-
"$value": {
|
|
17
|
-
"colorSpace": "srgb",
|
|
18
|
-
"components": [
|
|
19
|
-
0.129,
|
|
20
|
-
0.141,
|
|
21
|
-
0.18
|
|
22
|
-
],
|
|
23
|
-
"hex": "#21242e"
|
|
24
|
-
}
|
|
16
|
+
"$value": "{hpe-web.base.color.grey.200}"
|
|
25
17
|
},
|
|
26
|
-
"
|
|
18
|
+
"carousel-disabled": {
|
|
27
19
|
"$type": "color",
|
|
28
|
-
"$value": "{hpe-web.base.color.grey.
|
|
20
|
+
"$value": "{hpe-web.base.color.grey.500}"
|
|
29
21
|
},
|
|
30
|
-
"
|
|
22
|
+
"carousel-hover": {
|
|
31
23
|
"$type": "color",
|
|
32
24
|
"$value": "{hpe-web.base.color.grey.400}"
|
|
33
25
|
},
|
|
34
|
-
"component-hover": {
|
|
35
|
-
"$type": "color",
|
|
36
|
-
"$value": "{hpe-web.base.color.grey.700}"
|
|
37
|
-
},
|
|
38
26
|
"contrast": {
|
|
39
27
|
"$type": "color",
|
|
40
|
-
"$value": "{hpe-web.base.color.
|
|
28
|
+
"$value": "{hpe-web.base.color.white.opacity6}",
|
|
41
29
|
"$description": "Use to create a subtle differentiation between a component or container and the region it sits on."
|
|
42
30
|
},
|
|
43
31
|
"critical": {
|
|
44
32
|
"$type": "color",
|
|
45
|
-
"$value": "{hpe-web.base.color.red.
|
|
33
|
+
"$value": "{hpe-web.base.color.red.1000}"
|
|
46
34
|
},
|
|
47
35
|
"default": {
|
|
48
36
|
"$type": "color",
|
|
49
37
|
"$value": "{hpe-web.base.color.grey.1300}",
|
|
50
38
|
"$description": "Default background color to be used on containers."
|
|
51
39
|
},
|
|
52
|
-
"
|
|
40
|
+
"disabled": {
|
|
53
41
|
"$type": "color",
|
|
54
|
-
"$value": {
|
|
55
|
-
"colorSpace": "srgb",
|
|
56
|
-
"components": [
|
|
57
|
-
0.165,
|
|
58
|
-
0.824,
|
|
59
|
-
0.788
|
|
60
|
-
],
|
|
61
|
-
"hex": "#2ad2c9"
|
|
62
|
-
}
|
|
42
|
+
"$value": "{hpe-web.base.color.white.opacity7}"
|
|
63
43
|
},
|
|
64
|
-
"
|
|
44
|
+
"floating": {
|
|
65
45
|
"$type": "color",
|
|
66
46
|
"$value": "{hpe-web.base.color.grey.1300}"
|
|
67
47
|
},
|
|
@@ -75,19 +55,11 @@
|
|
|
75
55
|
},
|
|
76
56
|
"neutral-weak": {
|
|
77
57
|
"$type": "color",
|
|
78
|
-
"$value": "{hpe-web.base.color.grey.
|
|
58
|
+
"$value": "{hpe-web.base.color.grey.600}"
|
|
79
59
|
},
|
|
80
60
|
"ok": {
|
|
81
61
|
"$type": "color",
|
|
82
|
-
"$value": {
|
|
83
|
-
"colorSpace": "srgb",
|
|
84
|
-
"components": [
|
|
85
|
-
0.118,
|
|
86
|
-
0.847,
|
|
87
|
-
0.682
|
|
88
|
-
],
|
|
89
|
-
"hex": "#1ed8ae"
|
|
90
|
-
}
|
|
62
|
+
"$value": "{hpe-web.base.color.green.1000}"
|
|
91
63
|
},
|
|
92
64
|
"primary": {
|
|
93
65
|
"$type": "color",
|
|
@@ -99,73 +71,54 @@
|
|
|
99
71
|
"$value": "{hpe-web.base.color.green.700}",
|
|
100
72
|
"$description": "The strong variant of background-primary. Primary palette is derived from the brand color and used for high visual prominence."
|
|
101
73
|
},
|
|
74
|
+
"sunken": {
|
|
75
|
+
"$type": "color",
|
|
76
|
+
"$value": "{hpe-web.base.color.grey.1200}"
|
|
77
|
+
},
|
|
102
78
|
"warning": {
|
|
103
79
|
"$type": "color",
|
|
104
|
-
"$value": {
|
|
105
|
-
"colorSpace": "srgb",
|
|
106
|
-
"components": [
|
|
107
|
-
0.827,
|
|
108
|
-
0.427,
|
|
109
|
-
0
|
|
110
|
-
],
|
|
111
|
-
"hex": "#d36d00"
|
|
112
|
-
}
|
|
80
|
+
"$value": "{hpe-web.base.color.orange.1000}"
|
|
113
81
|
}
|
|
114
82
|
},
|
|
115
83
|
"border": {
|
|
116
84
|
"critical": {
|
|
117
85
|
"$type": "color",
|
|
118
|
-
"$value": "{hpe-web.
|
|
86
|
+
"$value": "{hpe-web.color.foreground.critical}"
|
|
119
87
|
},
|
|
120
88
|
"default": {
|
|
121
89
|
"$type": "color",
|
|
122
|
-
"$value": "{hpe-web.base.color.
|
|
90
|
+
"$value": "{hpe-web.base.color.white.opacity36}",
|
|
123
91
|
"$description": "Default border color."
|
|
124
92
|
},
|
|
125
|
-
"
|
|
93
|
+
"disabled": {
|
|
126
94
|
"$type": "color",
|
|
127
|
-
"$value": {
|
|
128
|
-
|
|
129
|
-
"components": [
|
|
130
|
-
0.165,
|
|
131
|
-
0.824,
|
|
132
|
-
0.788
|
|
133
|
-
],
|
|
134
|
-
"hex": "#2ad2c9"
|
|
135
|
-
}
|
|
95
|
+
"$value": "{hpe-web.base.color.white.opacity12}",
|
|
96
|
+
"$description": "Disabled color for borders. Using disabled colors ensures that disabled components are consistently styled."
|
|
136
97
|
},
|
|
137
98
|
"ok": {
|
|
138
99
|
"$type": "color",
|
|
139
|
-
"$value": "{hpe-web.
|
|
100
|
+
"$value": "{hpe-web.base.color.green.400}"
|
|
140
101
|
},
|
|
141
102
|
"primary": {
|
|
142
103
|
"$type": "color",
|
|
143
104
|
"$value": "{hpe-web.base.color.green.600}"
|
|
144
105
|
},
|
|
145
|
-
"
|
|
106
|
+
"selected": {
|
|
146
107
|
"$type": "color",
|
|
147
|
-
"$value": "{hpe-web.
|
|
108
|
+
"$value": "{hpe-web.color.foreground.primary}"
|
|
148
109
|
},
|
|
149
110
|
"strong": {
|
|
150
111
|
"$type": "color",
|
|
151
|
-
"$value": "{hpe-web.base.color.
|
|
112
|
+
"$value": "{hpe-web.base.color.white.opacity72}",
|
|
152
113
|
"$description": "Default border color."
|
|
153
114
|
},
|
|
154
115
|
"warning": {
|
|
155
116
|
"$type": "color",
|
|
156
|
-
"$value": {
|
|
157
|
-
"colorSpace": "srgb",
|
|
158
|
-
"components": [
|
|
159
|
-
0.827,
|
|
160
|
-
0.427,
|
|
161
|
-
0
|
|
162
|
-
],
|
|
163
|
-
"hex": "#d36d00"
|
|
164
|
-
}
|
|
117
|
+
"$value": "{hpe-web.color.foreground.warning}"
|
|
165
118
|
},
|
|
166
119
|
"weak": {
|
|
167
120
|
"$type": "color",
|
|
168
|
-
"$value": "{hpe-web.base.color.
|
|
121
|
+
"$value": "{hpe-web.base.color.white.opacity12}"
|
|
169
122
|
}
|
|
170
123
|
},
|
|
171
124
|
"decorative": {
|
|
@@ -198,7 +151,7 @@
|
|
|
198
151
|
"$value": "{hpe-web.base.color.grey.500}",
|
|
199
152
|
"$description": "Highest emphasis variant of neutral palette."
|
|
200
153
|
},
|
|
201
|
-
"neutral-
|
|
154
|
+
"neutral-strong": {
|
|
202
155
|
"$type": "color",
|
|
203
156
|
"$value": "{hpe-web.base.color.grey.400}",
|
|
204
157
|
"$description": "Highest emphasis variant of neutral palette."
|
|
@@ -213,325 +166,50 @@
|
|
|
213
166
|
"$value": "{hpe-web.base.color.white.100}"
|
|
214
167
|
}
|
|
215
168
|
},
|
|
216
|
-
"
|
|
217
|
-
"
|
|
218
|
-
"
|
|
219
|
-
|
|
220
|
-
|
|
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
|
-
}
|
|
235
|
-
},
|
|
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
|
-
}
|
|
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"
|
|
444
174
|
},
|
|
445
|
-
"
|
|
446
|
-
"
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
|
|
463
|
-
"components": [
|
|
464
|
-
0.114,
|
|
465
|
-
0.122,
|
|
466
|
-
0.153
|
|
467
|
-
],
|
|
468
|
-
"hex": "#1d1f27"
|
|
469
|
-
}
|
|
470
|
-
}
|
|
471
|
-
},
|
|
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
|
-
}
|
|
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"
|
|
179
|
+
},
|
|
180
|
+
"primary": {
|
|
181
|
+
"$type": "color",
|
|
182
|
+
"$value": "{hpe-web.base.color.green.550}"
|
|
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.500}",
|
|
192
|
+
"$description": "Use for foreground regions communicating warning or caution. Often used to color values in a meter or progress bar. Keywords: status"
|
|
499
193
|
}
|
|
500
194
|
},
|
|
501
195
|
"icon": {
|
|
502
196
|
"critical": {
|
|
503
197
|
"$type": "color",
|
|
504
|
-
"$value": "{hpe-web.
|
|
198
|
+
"$value": "{hpe-web.color.foreground.critical}"
|
|
505
199
|
},
|
|
506
200
|
"default": {
|
|
507
201
|
"$type": "color",
|
|
508
|
-
"$value": "{hpe-web.color.text.
|
|
202
|
+
"$value": "{hpe-web.color.text.default}",
|
|
509
203
|
"$description": "Default icon color."
|
|
510
204
|
},
|
|
511
205
|
"disabled": {
|
|
512
206
|
"$type": "color",
|
|
513
|
-
"$value": {
|
|
514
|
-
"colorSpace": "srgb",
|
|
515
|
-
"components": [
|
|
516
|
-
0.745,
|
|
517
|
-
0.745,
|
|
518
|
-
0.745
|
|
519
|
-
],
|
|
520
|
-
"hex": "#bebebe"
|
|
521
|
-
},
|
|
207
|
+
"$value": "{hpe-web.color.text.disabled}",
|
|
522
208
|
"$description": "Disabled color for icons. Using disabled colors ensures that disabled components are consistently styled."
|
|
523
209
|
},
|
|
524
|
-
"
|
|
210
|
+
"info": {
|
|
525
211
|
"$type": "color",
|
|
526
|
-
"$value": {
|
|
527
|
-
"colorSpace": "srgb",
|
|
528
|
-
"components": [
|
|
529
|
-
0.165,
|
|
530
|
-
0.824,
|
|
531
|
-
0.788
|
|
532
|
-
],
|
|
533
|
-
"hex": "#2ad2c9"
|
|
534
|
-
}
|
|
212
|
+
"$value": "{hpe-web.base.color.blue.200}"
|
|
535
213
|
},
|
|
536
214
|
"neutral": {
|
|
537
215
|
"$type": "color",
|
|
@@ -539,15 +217,12 @@
|
|
|
539
217
|
},
|
|
540
218
|
"ok": {
|
|
541
219
|
"$type": "color",
|
|
542
|
-
"$value": {
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
],
|
|
549
|
-
"hex": "#1ed8ae"
|
|
550
|
-
}
|
|
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."
|
|
551
226
|
},
|
|
552
227
|
"primary": {
|
|
553
228
|
"$type": "color",
|
|
@@ -560,20 +235,12 @@
|
|
|
560
235
|
},
|
|
561
236
|
"strong": {
|
|
562
237
|
"$type": "color",
|
|
563
|
-
"$value": "{hpe-web.color.text.
|
|
238
|
+
"$value": "{hpe-web.color.text.strong}",
|
|
564
239
|
"$description": "Emphasized icon color for increased visual prominence."
|
|
565
240
|
},
|
|
566
241
|
"warning": {
|
|
567
242
|
"$type": "color",
|
|
568
|
-
"$value": {
|
|
569
|
-
"colorSpace": "srgb",
|
|
570
|
-
"components": [
|
|
571
|
-
0.827,
|
|
572
|
-
0.427,
|
|
573
|
-
0
|
|
574
|
-
],
|
|
575
|
-
"hex": "#d36d00"
|
|
576
|
-
}
|
|
243
|
+
"$value": "{hpe-web.base.color.orange.500}"
|
|
577
244
|
},
|
|
578
245
|
"weak": {
|
|
579
246
|
"$type": "color",
|
|
@@ -592,52 +259,19 @@
|
|
|
592
259
|
}
|
|
593
260
|
},
|
|
594
261
|
"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
|
-
},
|
|
608
262
|
"critical": {
|
|
609
263
|
"$type": "color",
|
|
610
264
|
"$value": "{hpe-web.base.color.red.500}"
|
|
611
265
|
},
|
|
612
|
-
"
|
|
613
|
-
"$type": "color",
|
|
614
|
-
"$value": {
|
|
615
|
-
"colorSpace": "srgb",
|
|
616
|
-
"components": [
|
|
617
|
-
0.745,
|
|
618
|
-
0.745,
|
|
619
|
-
0.745
|
|
620
|
-
],
|
|
621
|
-
"hex": "#bebebe"
|
|
622
|
-
},
|
|
623
|
-
"$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
|
|
624
|
-
},
|
|
625
|
-
"focus": {
|
|
266
|
+
"default": {
|
|
626
267
|
"$type": "color",
|
|
627
|
-
"$value": {
|
|
628
|
-
|
|
629
|
-
"components": [
|
|
630
|
-
0.165,
|
|
631
|
-
0.824,
|
|
632
|
-
0.788
|
|
633
|
-
],
|
|
634
|
-
"hex": "#2ad2c9"
|
|
635
|
-
}
|
|
268
|
+
"$value": "{hpe-web.base.color.grey.200}",
|
|
269
|
+
"$description": "Default text color that is accessible on standard background colors. Also called 'text.default'"
|
|
636
270
|
},
|
|
637
|
-
"
|
|
271
|
+
"disabled": {
|
|
638
272
|
"$type": "color",
|
|
639
|
-
"$value": "{hpe-web.base.color.white.
|
|
640
|
-
"$description": "
|
|
273
|
+
"$value": "{hpe-web.base.color.white.opacity24}",
|
|
274
|
+
"$description": "Disabled color for text. Using disabled colors ensures that disabled components are consistently styled."
|
|
641
275
|
},
|
|
642
276
|
"neutral-strong": {
|
|
643
277
|
"$type": "color",
|
|
@@ -645,9 +279,9 @@
|
|
|
645
279
|
},
|
|
646
280
|
"ok": {
|
|
647
281
|
"$type": "color",
|
|
648
|
-
"$value": "{hpe-web.
|
|
282
|
+
"$value": "{hpe-web.base.color.green.400}"
|
|
649
283
|
},
|
|
650
|
-
"
|
|
284
|
+
"onStrong": {
|
|
651
285
|
"$type": "color",
|
|
652
286
|
"$value": "{hpe-web.base.color.grey.1000}",
|
|
653
287
|
"$description": "Text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
@@ -662,22 +296,18 @@
|
|
|
662
296
|
"$value": "{hpe-web.base.color.green.600}",
|
|
663
297
|
"$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
664
298
|
},
|
|
299
|
+
"strong": {
|
|
300
|
+
"$type": "color",
|
|
301
|
+
"$value": "{hpe-web.base.color.white.100}",
|
|
302
|
+
"$description": "Also called 'text.strong'"
|
|
303
|
+
},
|
|
665
304
|
"warning": {
|
|
666
305
|
"$type": "color",
|
|
667
306
|
"$value": "{hpe-web.base.color.orange.500}"
|
|
668
307
|
},
|
|
669
308
|
"weak": {
|
|
670
309
|
"$type": "color",
|
|
671
|
-
"$value": {
|
|
672
|
-
"colorSpace": "srgb",
|
|
673
|
-
"components": [
|
|
674
|
-
1,
|
|
675
|
-
1,
|
|
676
|
-
1
|
|
677
|
-
],
|
|
678
|
-
"hex": "#ffffff",
|
|
679
|
-
"alpha": 0.61
|
|
680
|
-
},
|
|
310
|
+
"$value": "{hpe-web.base.color.grey.500}",
|
|
681
311
|
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
|
|
682
312
|
}
|
|
683
313
|
},
|