@hpe-web/design-tokens 1.3.1 → 2.0.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 +31 -6
- package/dist/css/locales/de.tokens.css +42 -21
- package/dist/css/locales/es.tokens.css +42 -21
- package/dist/css/locales/fr.tokens.css +42 -21
- package/dist/css/locales/it.tokens.css +42 -21
- package/dist/css/locales/ja.tokens.css +41 -19
- package/dist/css/locales/ko.tokens.css +41 -19
- package/dist/css/locales/zh.tokens.css +3 -0
- package/dist/css/tokens.css +128 -36
- package/dist/css/tokens.dark.css +195 -2
- package/dist/css/tokens.md-lg.css +83 -29
- package/dist/css/tokens.xl.css +84 -30
- package/package.json +2 -2
- package/src/component/{button.json → component.json} +244 -6
- package/src/hpe.resolver.json +2 -2
- package/src/primitive/primitives.json +1 -1
- package/src/semantic/color.dark.json +48 -6
- package/src/semantic/color.light.json +48 -6
- package/src/semantic/dimension.md-lg.json +436 -49
- package/src/semantic/dimension.xl.json +439 -52
- package/src/semantic/dimension.xs-sm.json +435 -48
- package/src/snapshots/component/5fc94136d48c018dba9a72a28d52a9ff9f7b19b607453ecfddef7467ca039c9b.json +5580 -0
- package/src/snapshots/current.json +8 -0
- package/src/snapshots/primitive/7e878b4264ed525786e7a59d0e578dc1bcb9aefb149679741793c283c7e7918e.json +7234 -0
- package/src/snapshots/semantic/afc82e5feb03f3c4d976dff4bcd4cedd1a5c674198d7ae3b4b4164e8694e3fc6.json +9576 -0
|
@@ -45,6 +45,14 @@
|
|
|
45
45
|
"$type": "color",
|
|
46
46
|
"$value": "{hpe-web.base.color.grey.1300}"
|
|
47
47
|
},
|
|
48
|
+
"nav-primary": {
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$value": "{hpe-web.base.color.grey.1300}"
|
|
51
|
+
},
|
|
52
|
+
"nav-secondary": {
|
|
53
|
+
"$type": "color",
|
|
54
|
+
"$value": "{hpe-web.base.color.grey.1000}"
|
|
55
|
+
},
|
|
48
56
|
"neutral": {
|
|
49
57
|
"$type": "color",
|
|
50
58
|
"$value": "{hpe-web.base.color.grey.400}"
|
|
@@ -101,7 +109,11 @@
|
|
|
101
109
|
},
|
|
102
110
|
"primary": {
|
|
103
111
|
"$type": "color",
|
|
104
|
-
"$value": "{hpe-web.base.color.green.
|
|
112
|
+
"$value": "{hpe-web.base.color.green.400}"
|
|
113
|
+
},
|
|
114
|
+
"primary-hover": {
|
|
115
|
+
"$type": "color",
|
|
116
|
+
"$value": "{hpe-web.base.color.white.100}"
|
|
105
117
|
},
|
|
106
118
|
"selected": {
|
|
107
119
|
"$type": "color",
|
|
@@ -192,6 +204,27 @@
|
|
|
192
204
|
"$description": "Use for foreground regions communicating warning or caution. Often used to color values in a meter or progress bar. Keywords: status"
|
|
193
205
|
}
|
|
194
206
|
},
|
|
207
|
+
"gradient": {
|
|
208
|
+
"content-overlay": {
|
|
209
|
+
"stop0": {
|
|
210
|
+
"$type": "color",
|
|
211
|
+
"$value": {
|
|
212
|
+
"colorSpace": "srgb",
|
|
213
|
+
"components": [
|
|
214
|
+
0.114,
|
|
215
|
+
0.122,
|
|
216
|
+
0.153
|
|
217
|
+
],
|
|
218
|
+
"hex": "#1d1f2700",
|
|
219
|
+
"alpha": 0
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
"stop50": {
|
|
223
|
+
"$type": "color",
|
|
224
|
+
"$value": "{hpe-web.color.background.default}"
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
},
|
|
195
228
|
"icon": {
|
|
196
229
|
"critical": {
|
|
197
230
|
"$type": "color",
|
|
@@ -233,6 +266,10 @@
|
|
|
233
266
|
"$type": "color",
|
|
234
267
|
"$value": "{hpe-web.base.color.green.600}"
|
|
235
268
|
},
|
|
269
|
+
"primary-strong-hover": {
|
|
270
|
+
"$type": "color",
|
|
271
|
+
"$value": "{hpe-web.base.color.green.450}"
|
|
272
|
+
},
|
|
236
273
|
"strong": {
|
|
237
274
|
"$type": "color",
|
|
238
275
|
"$value": "{hpe-web.color.text.strong}",
|
|
@@ -266,7 +303,7 @@
|
|
|
266
303
|
"default": {
|
|
267
304
|
"$type": "color",
|
|
268
305
|
"$value": "{hpe-web.base.color.grey.200}",
|
|
269
|
-
"$description": "Default text color that is accessible on standard background colors.
|
|
306
|
+
"$description": "Default text color that is accessible on standard background colors. Primarily used for body text"
|
|
270
307
|
},
|
|
271
308
|
"disabled": {
|
|
272
309
|
"$type": "color",
|
|
@@ -293,13 +330,18 @@
|
|
|
293
330
|
},
|
|
294
331
|
"primary-strong": {
|
|
295
332
|
"$type": "color",
|
|
296
|
-
"$value": "{hpe-web.base.color.green.
|
|
333
|
+
"$value": "{hpe-web.base.color.green.550}",
|
|
297
334
|
"$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
298
335
|
},
|
|
336
|
+
"primary-strong-hover": {
|
|
337
|
+
"$type": "color",
|
|
338
|
+
"$value": "{hpe-web.base.color.green.500}",
|
|
339
|
+
"$description": "Hover variant of background-primary."
|
|
340
|
+
},
|
|
299
341
|
"strong": {
|
|
300
342
|
"$type": "color",
|
|
301
343
|
"$value": "{hpe-web.base.color.white.100}",
|
|
302
|
-
"$description": "
|
|
344
|
+
"$description": "Primarily used for headers"
|
|
303
345
|
},
|
|
304
346
|
"warning": {
|
|
305
347
|
"$type": "color",
|
|
@@ -308,7 +350,7 @@
|
|
|
308
350
|
"weak": {
|
|
309
351
|
"$type": "color",
|
|
310
352
|
"$value": "{hpe-web.base.color.grey.500}",
|
|
311
|
-
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
|
|
353
|
+
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text. "
|
|
312
354
|
}
|
|
313
355
|
},
|
|
314
356
|
"transparent": {
|
|
@@ -326,4 +368,4 @@
|
|
|
326
368
|
}
|
|
327
369
|
}
|
|
328
370
|
}
|
|
329
|
-
}
|
|
371
|
+
}
|
|
@@ -45,6 +45,14 @@
|
|
|
45
45
|
"$type": "color",
|
|
46
46
|
"$value": "{hpe-web.base.color.white.100}"
|
|
47
47
|
},
|
|
48
|
+
"nav-primary": {
|
|
49
|
+
"$type": "color",
|
|
50
|
+
"$value": "{hpe-web.base.color.grey.50}"
|
|
51
|
+
},
|
|
52
|
+
"nav-secondary": {
|
|
53
|
+
"$type": "color",
|
|
54
|
+
"$value": "{hpe-web.base.color.white.100}"
|
|
55
|
+
},
|
|
48
56
|
"neutral": {
|
|
49
57
|
"$type": "color",
|
|
50
58
|
"$value": "{hpe-web.base.color.grey.700}"
|
|
@@ -103,6 +111,10 @@
|
|
|
103
111
|
"$type": "color",
|
|
104
112
|
"$value": "{hpe-web.base.color.green.600}"
|
|
105
113
|
},
|
|
114
|
+
"primary-hover": {
|
|
115
|
+
"$type": "color",
|
|
116
|
+
"$value": "{hpe-web.base.color.grey.1000}"
|
|
117
|
+
},
|
|
106
118
|
"selected": {
|
|
107
119
|
"$type": "color",
|
|
108
120
|
"$value": "{hpe-web.base.color.green.800}"
|
|
@@ -169,7 +181,7 @@
|
|
|
169
181
|
"foreground": {
|
|
170
182
|
"critical": {
|
|
171
183
|
"$type": "color",
|
|
172
|
-
"$value": "{hpe-web.base.color.red.
|
|
184
|
+
"$value": "{hpe-web.base.color.red.800}",
|
|
173
185
|
"$description": "Use for foreground regions communicating error or danger. Often used to color values in a meter or progress bar. Keywords: status"
|
|
174
186
|
},
|
|
175
187
|
"ok": {
|
|
@@ -192,6 +204,27 @@
|
|
|
192
204
|
"$description": "Use for foreground regions communicating warning or caution. Often used to color values in a meter or progress bar. Keywords: status"
|
|
193
205
|
}
|
|
194
206
|
},
|
|
207
|
+
"gradient": {
|
|
208
|
+
"content-overlay": {
|
|
209
|
+
"stop0": {
|
|
210
|
+
"$type": "color",
|
|
211
|
+
"$value": {
|
|
212
|
+
"colorSpace": "srgb",
|
|
213
|
+
"components": [
|
|
214
|
+
1,
|
|
215
|
+
1,
|
|
216
|
+
1
|
|
217
|
+
],
|
|
218
|
+
"hex": "#ffffff00",
|
|
219
|
+
"alpha": 0
|
|
220
|
+
}
|
|
221
|
+
},
|
|
222
|
+
"stop50": {
|
|
223
|
+
"$type": "color",
|
|
224
|
+
"$value": "{hpe-web.color.background.default}"
|
|
225
|
+
}
|
|
226
|
+
}
|
|
227
|
+
},
|
|
195
228
|
"icon": {
|
|
196
229
|
"critical": {
|
|
197
230
|
"$type": "color",
|
|
@@ -233,6 +266,10 @@
|
|
|
233
266
|
"$type": "color",
|
|
234
267
|
"$value": "{hpe-web.base.color.green.800}"
|
|
235
268
|
},
|
|
269
|
+
"primary-strong-hover": {
|
|
270
|
+
"$type": "color",
|
|
271
|
+
"$value": "{hpe-web.base.color.green.900}"
|
|
272
|
+
},
|
|
236
273
|
"strong": {
|
|
237
274
|
"$type": "color",
|
|
238
275
|
"$value": "{hpe-web.color.text.strong}",
|
|
@@ -266,7 +303,7 @@
|
|
|
266
303
|
"default": {
|
|
267
304
|
"$type": "color",
|
|
268
305
|
"$value": "{hpe-web.base.color.grey.800}",
|
|
269
|
-
"$description": "Default text color that is accessible on standard background colors.
|
|
306
|
+
"$description": "Default text color that is accessible on standard background colors. Primarily used for body text"
|
|
270
307
|
},
|
|
271
308
|
"disabled": {
|
|
272
309
|
"$type": "color",
|
|
@@ -293,13 +330,18 @@
|
|
|
293
330
|
},
|
|
294
331
|
"primary-strong": {
|
|
295
332
|
"$type": "color",
|
|
296
|
-
"$value": "{hpe-web.base.color.green.
|
|
333
|
+
"$value": "{hpe-web.base.color.green.800}",
|
|
297
334
|
"$description": "Strong variant text color to be used for text sitting on a primary background. This text and background pairing helps ensure accessibility."
|
|
298
335
|
},
|
|
336
|
+
"primary-strong-hover": {
|
|
337
|
+
"$type": "color",
|
|
338
|
+
"$value": "{hpe-web.base.color.green.900}",
|
|
339
|
+
"$description": "Hover variant of background-primary."
|
|
340
|
+
},
|
|
299
341
|
"strong": {
|
|
300
342
|
"$type": "color",
|
|
301
343
|
"$value": "{hpe-web.base.color.grey.1000}",
|
|
302
|
-
"$description": "
|
|
344
|
+
"$description": "Primarily used for headers"
|
|
303
345
|
},
|
|
304
346
|
"warning": {
|
|
305
347
|
"$type": "color",
|
|
@@ -308,7 +350,7 @@
|
|
|
308
350
|
"weak": {
|
|
309
351
|
"$type": "color",
|
|
310
352
|
"$value": "{hpe-web.base.color.grey.650}",
|
|
311
|
-
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text."
|
|
353
|
+
"$description": "Subtle text color for reduced visual prominence. Often used for supporting text. "
|
|
312
354
|
}
|
|
313
355
|
},
|
|
314
356
|
"transparent": {
|
|
@@ -326,4 +368,4 @@
|
|
|
326
368
|
}
|
|
327
369
|
}
|
|
328
370
|
}
|
|
329
|
-
}
|
|
371
|
+
}
|