@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.
Files changed (25) hide show
  1. package/README.md +31 -6
  2. package/dist/css/locales/de.tokens.css +42 -21
  3. package/dist/css/locales/es.tokens.css +42 -21
  4. package/dist/css/locales/fr.tokens.css +42 -21
  5. package/dist/css/locales/it.tokens.css +42 -21
  6. package/dist/css/locales/ja.tokens.css +41 -19
  7. package/dist/css/locales/ko.tokens.css +41 -19
  8. package/dist/css/locales/zh.tokens.css +3 -0
  9. package/dist/css/tokens.css +128 -36
  10. package/dist/css/tokens.dark.css +195 -2
  11. package/dist/css/tokens.md-lg.css +83 -29
  12. package/dist/css/tokens.xl.css +84 -30
  13. package/package.json +2 -2
  14. package/src/component/{button.json → component.json} +244 -6
  15. package/src/hpe.resolver.json +2 -2
  16. package/src/primitive/primitives.json +1 -1
  17. package/src/semantic/color.dark.json +48 -6
  18. package/src/semantic/color.light.json +48 -6
  19. package/src/semantic/dimension.md-lg.json +436 -49
  20. package/src/semantic/dimension.xl.json +439 -52
  21. package/src/semantic/dimension.xs-sm.json +435 -48
  22. package/src/snapshots/component/5fc94136d48c018dba9a72a28d52a9ff9f7b19b607453ecfddef7467ca039c9b.json +5580 -0
  23. package/src/snapshots/current.json +8 -0
  24. package/src/snapshots/primitive/7e878b4264ed525786e7a59d0e578dc1bcb9aefb149679741793c283c7e7918e.json +7234 -0
  25. package/src/snapshots/semantic/afc82e5feb03f3c4d976dff4bcd4cedd1a5c674198d7ae3b4b4164e8694e3fc6.json +9576 -0
package/dist/css/tokens.css CHANGED
@@ -203,6 +203,8 @@
203
203
  --hpe-web-border-width-none: var(--hpe-web-static-border-width-none);
204
204
  --hpe-web-border-width-small: var(--hpe-web-static-border-width-small);
205
205
  --hpe-web-border-width-xsmall: var(--hpe-web-static-border-width-xsmall);
206
+ --hpe-web-heading-display: "HPE Graphik XXCondensed";
207
+ --hpe-web-heading-font: "HPE Graphik", Arial, sans-serif;
206
208
  --hpe-web-heading-h1-condensed-bold-font-size: 3rem;
207
209
  --hpe-web-heading-h1-condensed-bold-font-weight: 700;
208
210
  --hpe-web-heading-h1-condensed-bold-letter-spacing: 0.02em;
@@ -215,10 +217,14 @@
215
217
  --hpe-web-heading-h1-condensed-medium-font-weight: 400;
216
218
  --hpe-web-heading-h1-condensed-medium-letter-spacing: 0.02em;
217
219
  --hpe-web-heading-h1-condensed-medium-line-height: 1;
218
- --hpe-web-heading-h1-default-font-size: 2.5rem;
219
- --hpe-web-heading-h1-default-font-weight: 500;
220
- --hpe-web-heading-h1-default-letter-spacing: -0.02em;
221
- --hpe-web-heading-h1-default-line-height: 1.15;
220
+ --hpe-web-heading-h1-light-font-size: 2.5rem;
221
+ --hpe-web-heading-h1-light-font-weight: 300;
222
+ --hpe-web-heading-h1-light-letter-spacing: -0.02em;
223
+ --hpe-web-heading-h1-light-line-height: 1.15;
224
+ --hpe-web-heading-h1-medium-font-size: 2.5rem;
225
+ --hpe-web-heading-h1-medium-font-weight: 500;
226
+ --hpe-web-heading-h1-medium-letter-spacing: -0.02em;
227
+ --hpe-web-heading-h1-medium-line-height: 1.15;
222
228
  --hpe-web-heading-h1-large-condensed-bold-font-size: 3.75rem;
223
229
  --hpe-web-heading-h1-large-condensed-bold-font-weight: 700;
224
230
  --hpe-web-heading-h1-large-condensed-bold-letter-spacing: 0.02em;
@@ -231,36 +237,63 @@
231
237
  --hpe-web-heading-h1-large-condensed-medium-font-weight: 400;
232
238
  --hpe-web-heading-h1-large-condensed-medium-letter-spacing: 0.02em;
233
239
  --hpe-web-heading-h1-large-condensed-medium-line-height: 1;
234
- --hpe-web-heading-h1-large-default-font-size: 2.5rem;
235
- --hpe-web-heading-h1-large-default-font-weight: 500;
236
- --hpe-web-heading-h1-large-default-letter-spacing: -0.02em;
237
- --hpe-web-heading-h1-large-default-line-height: 1.15;
238
- --hpe-web-heading-h2-default-font-size: 2rem;
239
- --hpe-web-heading-h2-default-font-weight: 500;
240
- --hpe-web-heading-h2-default-letter-spacing: -0.01em;
241
- --hpe-web-heading-h2-default-line-height: 1.188;
242
- --hpe-web-heading-h3-default-font-size: 1.625rem;
243
- --hpe-web-heading-h3-default-font-weight: 500;
244
- --hpe-web-heading-h3-default-letter-spacing: 0em;
245
- --hpe-web-heading-h3-default-line-height: 1.231;
246
- --hpe-web-heading-h4-default-font-size: 1.25rem;
247
- --hpe-web-heading-h4-default-font-weight: 500;
248
- --hpe-web-heading-h4-default-letter-spacing: 0em;
249
- --hpe-web-heading-h4-default-line-height: 1.3;
250
- --hpe-web-heading-h5-default-font-size: 1rem;
251
- --hpe-web-heading-h5-default-font-weight: 500;
252
- --hpe-web-heading-h5-default-letter-spacing: 0em;
253
- --hpe-web-heading-h5-default-line-height: 1.375;
254
- --hpe-web-heading-h6-default-font-size: 0.875rem;
255
- --hpe-web-heading-h6-default-font-weight: 500;
256
- --hpe-web-heading-h6-default-letter-spacing: 0em;
257
- --hpe-web-heading-h6-default-line-height: 1.429;
240
+ --hpe-web-heading-h1-large-light-font-size: 2.5rem;
241
+ --hpe-web-heading-h1-large-light-font-weight: 300;
242
+ --hpe-web-heading-h1-large-light-letter-spacing: -0.02em;
243
+ --hpe-web-heading-h1-large-light-line-height: 1.15;
244
+ --hpe-web-heading-h1-large-medium-font-size: 2.5rem;
245
+ --hpe-web-heading-h1-large-medium-font-weight: 500;
246
+ --hpe-web-heading-h1-large-medium-letter-spacing: -0.02em;
247
+ --hpe-web-heading-h1-large-medium-line-height: 1.15;
248
+ --hpe-web-heading-h2-light-font-size: 2rem;
249
+ --hpe-web-heading-h2-light-font-weight: 300;
250
+ --hpe-web-heading-h2-light-letter-spacing: -0.01em;
251
+ --hpe-web-heading-h2-light-line-height: 1.188;
252
+ --hpe-web-heading-h2-medium-font-size: 2rem;
253
+ --hpe-web-heading-h2-medium-font-weight: 500;
254
+ --hpe-web-heading-h2-medium-letter-spacing: -0.01em;
255
+ --hpe-web-heading-h2-medium-line-height: 1.188;
256
+ --hpe-web-heading-h3-light-font-size: 1.625rem;
257
+ --hpe-web-heading-h3-light-font-weight: 300;
258
+ --hpe-web-heading-h3-light-letter-spacing: 0em;
259
+ --hpe-web-heading-h3-light-line-height: 1.231;
260
+ --hpe-web-heading-h3-medium-font-size: 1.625rem;
261
+ --hpe-web-heading-h3-medium-font-weight: 500;
262
+ --hpe-web-heading-h3-medium-letter-spacing: 0em;
263
+ --hpe-web-heading-h3-medium-line-height: 1.231;
264
+ --hpe-web-heading-h4-light-font-size: 1.25rem;
265
+ --hpe-web-heading-h4-light-font-weight: 500;
266
+ --hpe-web-heading-h4-light-letter-spacing: 0em;
267
+ --hpe-web-heading-h4-light-line-height: 1.3;
268
+ --hpe-web-heading-h4-medium-font-size: 1.25rem;
269
+ --hpe-web-heading-h4-medium-font-weight: 500;
270
+ --hpe-web-heading-h4-medium-letter-spacing: 0em;
271
+ --hpe-web-heading-h4-medium-line-height: 1.3;
272
+ --hpe-web-heading-h5-light-font-size: 1rem;
273
+ --hpe-web-heading-h5-light-font-weight: 300;
274
+ --hpe-web-heading-h5-light-letter-spacing: 0em;
275
+ --hpe-web-heading-h5-light-line-height: 1.375;
276
+ --hpe-web-heading-h5-medium-font-size: 1rem;
277
+ --hpe-web-heading-h5-medium-font-weight: 500;
278
+ --hpe-web-heading-h5-medium-letter-spacing: 0em;
279
+ --hpe-web-heading-h5-medium-line-height: 1.375;
280
+ --hpe-web-heading-h6-light-font-size: 0.875rem;
281
+ --hpe-web-heading-h6-light-font-weight: 300;
282
+ --hpe-web-heading-h6-light-letter-spacing: 0em;
283
+ --hpe-web-heading-h6-light-line-height: 1.429;
284
+ --hpe-web-heading-h6-medium-font-size: 0.875rem;
285
+ --hpe-web-heading-h6-medium-font-weight: 500;
286
+ --hpe-web-heading-h6-medium-letter-spacing: 0em;
287
+ --hpe-web-heading-h6-medium-line-height: 1.429;
258
288
  --hpe-web-icon-large-size: var(--hpe-web-base-dimension-550);
259
289
  --hpe-web-icon-medium-size: var(--hpe-web-base-dimension-450);
260
290
  --hpe-web-icon-small-size: var(--hpe-web-base-dimension-400);
261
291
  --hpe-web-icon-xlarge-size: var(--hpe-web-base-dimension-600);
262
292
  --hpe-web-icon-xsmall-size: var(--hpe-web-base-dimension-350);
263
293
  --hpe-web-icon-xxlarge-size: var(--hpe-web-base-dimension-900);
294
+ --hpe-web-multi-mode-avatar-height: 4rem;
295
+ --hpe-web-multi-mode-bento-box-bento-x: 2rem;
296
+ --hpe-web-multi-mode-bento-box-bento-y: 2rem;
264
297
  --hpe-web-multi-mode-button-link-large-border-radius: 9999px;
265
298
  --hpe-web-multi-mode-button-link-large-border-width: 4px;
266
299
  --hpe-web-multi-mode-button-link-large-font-size: 1.125rem;
@@ -351,6 +384,25 @@
351
384
  --hpe-web-multi-mode-button-secondary-small-min-height: 3rem;
352
385
  --hpe-web-multi-mode-button-secondary-small-padding-x: 1.5rem;
353
386
  --hpe-web-multi-mode-button-secondary-small-padding-y: 0.75rem;
387
+ --hpe-web-multi-mode-icon-height: 2rem;
388
+ --hpe-web-multi-mode-layout-gap-x: 1.5rem;
389
+ --hpe-web-multi-mode-layout-gap-y: 1.5rem;
390
+ --hpe-web-multi-mode-layout-padding-y: 4rem;
391
+ --hpe-web-multi-mode-live-player-gap-x: 1rem;
392
+ --hpe-web-multi-mode-live-player-padding-x: 2rem;
393
+ --hpe-web-multi-mode-live-player-padding-y: 4rem;
394
+ --hpe-web-multi-mode-logo-collage-group-gap-x: 1rem;
395
+ --hpe-web-multi-mode-logo-collage-group-gap-y: 1rem;
396
+ --hpe-web-multi-mode-logo-collage-max-height: 2.5rem;
397
+ --hpe-web-multi-mode-logo-grid-padding-x: 2rem;
398
+ --hpe-web-multi-mode-logo-grid-padding-y: 2rem;
399
+ --hpe-web-multi-mode-logo-grid-width: 10rem;
400
+ --hpe-web-multi-mode-logo-height: 4rem;
401
+ --hpe-web-multi-mode-marquee-gap-x: 2.5rem;
402
+ --hpe-web-multi-mode-marquee-gap-y: 2.5rem;
403
+ --hpe-web-multi-mode-marquee-padding-y: 4rem;
404
+ --hpe-web-multi-mode-simple-marquee-padding-y: 4rem;
405
+ --hpe-web-multi-mode-text-recipe-gap-y: 0.75rem;
354
406
  --hpe-web-paragraph-body-copy-font-size: 1rem;
355
407
  --hpe-web-paragraph-body-copy-font-weight: 400;
356
408
  --hpe-web-paragraph-body-copy-letter-spacing: 0em;
@@ -359,6 +411,7 @@
359
411
  --hpe-web-paragraph-disclaimer-font-weight: 400;
360
412
  --hpe-web-paragraph-disclaimer-letter-spacing: 0em;
361
413
  --hpe-web-paragraph-disclaimer-line-height: 1.5;
414
+ --hpe-web-paragraph-font: "HPE Graphik", Arial, sans-serif;
362
415
  --hpe-web-paragraph-large-body-copy-font-size: 1.25rem;
363
416
  --hpe-web-paragraph-large-body-copy-font-weight: 400;
364
417
  --hpe-web-paragraph-large-body-copy-letter-spacing: -0.01em;
@@ -367,6 +420,7 @@
367
420
  --hpe-web-paragraph-small-body-copy-font-weight: 400;
368
421
  --hpe-web-paragraph-small-body-copy-letter-spacing: 0em;
369
422
  --hpe-web-paragraph-small-body-copy-line-height: 1.429;
423
+ --hpe-web-quote-font: "HPE Graphik", Arial, sans-serif;
370
424
  --hpe-web-quote-large-font-size: 2rem;
371
425
  --hpe-web-quote-large-font-weight: 400;
372
426
  --hpe-web-quote-large-letter-spacing: -0.02em;
@@ -379,7 +433,7 @@
379
433
  --hpe-web-quote-small-font-weight: 400;
380
434
  --hpe-web-quote-small-letter-spacing: -0.01em;
381
435
  --hpe-web-quote-small-line-height: 1.417;
382
- --hpe-web-radius-full: 9999px;
436
+ --hpe-web-radius-full: var(--hpe-web-static-radius-full);
383
437
  --hpe-web-radius-hair: 1px;
384
438
  --hpe-web-radius-large: 16px;
385
439
  --hpe-web-radius-medium: 12px;
@@ -412,6 +466,8 @@
412
466
  --hpe-web-color-background-default: var(--hpe-web-base-color-white-100);
413
467
  --hpe-web-color-background-disabled: var(--hpe-web-base-color-black-opacity4);
414
468
  --hpe-web-color-background-floating: var(--hpe-web-base-color-white-100);
469
+ --hpe-web-color-background-nav-primary: var(--hpe-web-base-color-grey-50);
470
+ --hpe-web-color-background-nav-secondary: var(--hpe-web-base-color-white-100);
415
471
  --hpe-web-color-background-neutral: var(--hpe-web-base-color-grey-700);
416
472
  --hpe-web-color-background-neutral-strong: var(--hpe-web-base-color-grey-1000);
417
473
  --hpe-web-color-background-neutral-weak: var(--hpe-web-base-color-grey-400);
@@ -425,6 +481,7 @@
425
481
  --hpe-web-color-border-disabled: var(--hpe-web-base-color-black-opacity12);
426
482
  --hpe-web-color-border-ok: var(--hpe-web-base-color-green-650);
427
483
  --hpe-web-color-border-primary: var(--hpe-web-base-color-green-600);
484
+ --hpe-web-color-border-primary-hover: var(--hpe-web-base-color-grey-1000);
428
485
  --hpe-web-color-border-selected: var(--hpe-web-base-color-green-800);
429
486
  --hpe-web-color-border-strong: var(--hpe-web-base-color-grey-700);
430
487
  --hpe-web-color-border-warning: var(--hpe-web-color-foreground-warning);
@@ -438,11 +495,13 @@
438
495
  --hpe-web-color-decorative-neutral-strong: var(--hpe-web-base-color-grey-650);
439
496
  --hpe-web-color-decorative-purple: var(--hpe-web-base-color-purple-400);
440
497
  --hpe-web-color-decorative-white: var(--hpe-web-base-color-white-100);
441
- --hpe-web-color-foreground-critical: var(--hpe-web-base-color-red-600);
498
+ --hpe-web-color-foreground-critical: var(--hpe-web-base-color-red-800);
442
499
  --hpe-web-color-foreground-ok: var(--hpe-web-base-color-green-650);
443
500
  --hpe-web-color-foreground-primary: var(--hpe-web-base-color-green-800);
444
501
  --hpe-web-color-foreground-unknown: var(--hpe-web-base-color-grey-600);
445
502
  --hpe-web-color-foreground-warning: var(--hpe-web-base-color-orange-600);
503
+ --hpe-web-color-gradient-content-overlay-stop0: #ffffff00;
504
+ --hpe-web-color-gradient-content-overlay-stop50: var(--hpe-web-color-background-default);
446
505
  --hpe-web-color-icon-critical: var(--hpe-web-base-color-red-800);
447
506
  --hpe-web-color-icon-default: var(--hpe-web-color-text-default);
448
507
  --hpe-web-color-icon-disabled: var(--hpe-web-color-text-disabled);
@@ -452,6 +511,7 @@
452
511
  --hpe-web-color-icon-on-strong: var(--hpe-web-base-color-white-100);
453
512
  --hpe-web-color-icon-primary: var(--hpe-web-color-decorative-brand);
454
513
  --hpe-web-color-icon-primary-strong: var(--hpe-web-base-color-green-800);
514
+ --hpe-web-color-icon-primary-strong-hover: var(--hpe-web-base-color-green-900);
455
515
  --hpe-web-color-icon-strong: var(--hpe-web-color-text-strong);
456
516
  --hpe-web-color-icon-warning: var(--hpe-web-base-color-orange-600);
457
517
  --hpe-web-color-icon-weak: var(--hpe-web-color-text-weak);
@@ -464,7 +524,8 @@
464
524
  --hpe-web-color-text-ok: var(--hpe-web-base-color-green-650);
465
525
  --hpe-web-color-text-on-strong: var(--hpe-web-base-color-white-100);
466
526
  --hpe-web-color-text-primary: var(--hpe-web-base-color-green-600);
467
- --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-700);
527
+ --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-800);
528
+ --hpe-web-color-text-primary-strong-hover: var(--hpe-web-base-color-green-900);
468
529
  --hpe-web-color-text-strong: var(--hpe-web-base-color-grey-1000);
469
530
  --hpe-web-color-text-warning: var(--hpe-web-base-color-orange-600);
470
531
  --hpe-web-color-text-weak: var(--hpe-web-base-color-grey-650);
@@ -480,6 +541,14 @@
480
541
  --hpe-web-button-carousel-rest-background: var(--hpe-web-color-background-carousel);
481
542
  --hpe-web-button-carousel-rest-border-color: var(--hpe-web-color-transparent);
482
543
  --hpe-web-button-carousel-rest-icon-color: var(--hpe-web-color-icon-on-strong);
544
+ --hpe-web-button-link-inline-hover-background: var(--hpe-web-color-transparent);
545
+ --hpe-web-button-link-inline-hover-border-color: var(--hpe-web-color-border-primary-hover);
546
+ --hpe-web-button-link-inline-hover-icon-color: var(--hpe-web-color-icon-strong);
547
+ --hpe-web-button-link-inline-hover-text-color: var(--hpe-web-color-text-strong);
548
+ --hpe-web-button-link-inline-rest-background: var(--hpe-web-color-transparent);
549
+ --hpe-web-button-link-inline-rest-border-color: var(--hpe-web-color-border-primary);
550
+ --hpe-web-button-link-inline-rest-icon-color: var(--hpe-web-color-icon-default);
551
+ --hpe-web-button-link-inline-rest-text-color: var(--hpe-web-color-text-default);
483
552
  --hpe-web-button-link-large-border-radius: var(--hpe-web-multi-mode-button-link-large-border-radius);
484
553
  --hpe-web-button-link-large-border-width: var(--hpe-web-multi-mode-button-link-large-border-width);
485
554
  --hpe-web-button-link-large-font-size: var(--hpe-web-multi-mode-button-link-large-font-size);
@@ -518,14 +587,14 @@
518
587
  --hpe-web-button-link-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
519
588
  --hpe-web-button-link-primary-hover-background: var(--hpe-web-color-transparent);
520
589
  --hpe-web-button-link-primary-hover-border-color: var(--hpe-web-color-transparent);
521
- --hpe-web-button-link-primary-hover-font-weight: 700;
522
- --hpe-web-button-link-primary-hover-icon-color: var(--hpe-web-color-text-primary-strong);
523
- --hpe-web-button-link-primary-hover-text-color: var(--hpe-web-color-text-primary-strong);
590
+ --hpe-web-button-link-primary-hover-font-weight: 500;
591
+ --hpe-web-button-link-primary-hover-icon-color: var(--hpe-web-color-icon-primary-strong-hover);
592
+ --hpe-web-button-link-primary-hover-text-color: var(--hpe-web-color-text-primary-strong-hover);
524
593
  --hpe-web-button-link-primary-rest-background: var(--hpe-web-color-transparent);
525
594
  --hpe-web-button-link-primary-rest-border-color: var(--hpe-web-color-transparent);
526
595
  --hpe-web-button-link-primary-rest-font-weight: 500;
527
- --hpe-web-button-link-primary-rest-icon-color: var(--hpe-web-color-text-primary);
528
- --hpe-web-button-link-primary-rest-text-color: var(--hpe-web-color-text-primary);
596
+ --hpe-web-button-link-primary-rest-icon-color: var(--hpe-web-color-text-primary-strong);
597
+ --hpe-web-button-link-primary-rest-text-color: var(--hpe-web-color-text-primary-strong);
529
598
  --hpe-web-button-link-small-border-radius: var(--hpe-web-multi-mode-button-link-small-border-radius);
530
599
  --hpe-web-button-link-small-border-width: var(--hpe-web-multi-mode-button-link-small-border-width);
531
600
  --hpe-web-button-link-small-font-size: var(--hpe-web-multi-mode-button-link-small-font-size);
@@ -624,4 +693,27 @@
624
693
  --hpe-web-button-secondary-small-min-height: var(--hpe-web-multi-mode-button-secondary-small-min-height);
625
694
  --hpe-web-button-secondary-small-padding-x: var(--hpe-web-multi-mode-button-secondary-small-padding-x);
626
695
  --hpe-web-button-secondary-small-padding-y: var(--hpe-web-multi-mode-button-secondary-small-padding-y);
696
+ --hpe-web-card-bento-box-bento-x: 2rem;
697
+ --hpe-web-card-bento-box-bento-y: 2rem;
698
+ --hpe-web-card-elements-avatar-height: 6rem;
699
+ --hpe-web-card-elements-icon-height: 3rem;
700
+ --hpe-web-card-elements-logo-height: 4rem;
701
+ --hpe-web-card-layout-gap-x: 2.5rem;
702
+ --hpe-web-card-layout-gap-y: 2.5rem;
703
+ --hpe-web-card-layout-padding-y: 4rem;
704
+ --hpe-web-content-block-text-recipe-gap-y: 0px;
705
+ --hpe-web-global-nav-background: #ffffff;
706
+ --hpe-web-live-player-gap-x: 3rem;
707
+ --hpe-web-live-player-padding-x: 22.5rem;
708
+ --hpe-web-live-player-padding-y: 10rem;
709
+ --hpe-web-logo-collage-group-gap-x: 2.5rem;
710
+ --hpe-web-logo-collage-group-gap-y: 2.5rem;
711
+ --hpe-web-logo-collage-max-height: 4rem;
712
+ --hpe-web-logo-grid-padding-x: 2rem;
713
+ --hpe-web-logo-grid-padding-y: 2rem;
714
+ --hpe-web-logo-grid-width: 18rem;
715
+ --hpe-web-marquee-gap-x: 6rem;
716
+ --hpe-web-marquee-gap-y: 2.5rem;
717
+ --hpe-web-marquee-padding-y: 10rem;
718
+ --hpe-web-marquee-simple-marquee-padding-y: 6rem;
627
719
  }
package/dist/css/tokens.dark.css CHANGED
@@ -14,6 +14,8 @@
14
14
  --hpe-web-color-background-default: var(--hpe-web-base-color-grey-1300);
15
15
  --hpe-web-color-background-disabled: var(--hpe-web-base-color-white-opacity7);
16
16
  --hpe-web-color-background-floating: var(--hpe-web-base-color-grey-1300);
17
+ --hpe-web-color-background-nav-primary: var(--hpe-web-base-color-grey-1300);
18
+ --hpe-web-color-background-nav-secondary: var(--hpe-web-base-color-grey-1000);
17
19
  --hpe-web-color-background-neutral: var(--hpe-web-base-color-grey-400);
18
20
  --hpe-web-color-background-neutral-strong: var(--hpe-web-base-color-white-100);
19
21
  --hpe-web-color-background-neutral-weak: var(--hpe-web-base-color-grey-600);
@@ -26,7 +28,8 @@
26
28
  --hpe-web-color-border-default: var(--hpe-web-base-color-white-opacity36);
27
29
  --hpe-web-color-border-disabled: var(--hpe-web-base-color-white-opacity12);
28
30
  --hpe-web-color-border-ok: var(--hpe-web-base-color-green-400);
29
- --hpe-web-color-border-primary: var(--hpe-web-base-color-green-600);
31
+ --hpe-web-color-border-primary: var(--hpe-web-base-color-green-400);
32
+ --hpe-web-color-border-primary-hover: var(--hpe-web-base-color-white-100);
30
33
  --hpe-web-color-border-selected: var(--hpe-web-color-foreground-primary);
31
34
  --hpe-web-color-border-strong: var(--hpe-web-base-color-white-opacity72);
32
35
  --hpe-web-color-border-warning: var(--hpe-web-color-foreground-warning);
@@ -45,6 +48,8 @@
45
48
  --hpe-web-color-foreground-primary: var(--hpe-web-base-color-green-550);
46
49
  --hpe-web-color-foreground-unknown: var(--hpe-web-base-color-grey-600);
47
50
  --hpe-web-color-foreground-warning: var(--hpe-web-base-color-orange-500);
51
+ --hpe-web-color-gradient-content-overlay-stop0: #1d1f2700;
52
+ --hpe-web-color-gradient-content-overlay-stop50: var(--hpe-web-color-background-default);
48
53
  --hpe-web-color-icon-critical: var(--hpe-web-color-foreground-critical);
49
54
  --hpe-web-color-icon-default: var(--hpe-web-color-text-default);
50
55
  --hpe-web-color-icon-disabled: var(--hpe-web-color-text-disabled);
@@ -54,6 +59,7 @@
54
59
  --hpe-web-color-icon-on-strong: var(--hpe-web-base-color-grey-1000);
55
60
  --hpe-web-color-icon-primary: var(--hpe-web-color-decorative-brand);
56
61
  --hpe-web-color-icon-primary-strong: var(--hpe-web-base-color-green-600);
62
+ --hpe-web-color-icon-primary-strong-hover: var(--hpe-web-base-color-green-450);
57
63
  --hpe-web-color-icon-strong: var(--hpe-web-color-text-strong);
58
64
  --hpe-web-color-icon-warning: var(--hpe-web-base-color-orange-500);
59
65
  --hpe-web-color-icon-weak: var(--hpe-web-color-text-weak);
@@ -66,9 +72,196 @@
66
72
  --hpe-web-color-text-ok: var(--hpe-web-base-color-green-400);
67
73
  --hpe-web-color-text-on-strong: var(--hpe-web-base-color-grey-1000);
68
74
  --hpe-web-color-text-primary: var(--hpe-web-base-color-green-400);
69
- --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-600);
75
+ --hpe-web-color-text-primary-strong: var(--hpe-web-base-color-green-550);
76
+ --hpe-web-color-text-primary-strong-hover: var(--hpe-web-base-color-green-500);
70
77
  --hpe-web-color-text-strong: var(--hpe-web-base-color-white-100);
71
78
  --hpe-web-color-text-warning: var(--hpe-web-base-color-orange-500);
72
79
  --hpe-web-color-text-weak: var(--hpe-web-base-color-grey-500);
73
80
  --hpe-web-color-transparent: #ffffff00;
81
+
82
+ /* ── Component — single-value aliases into the semantic layer. ── */
83
+ --hpe-web-button-carousel-disabled-background: var(--hpe-web-color-background-carousel-disabled);
84
+ --hpe-web-button-carousel-disabled-border-color: var(--hpe-web-color-transparent);
85
+ --hpe-web-button-carousel-disabled-icon-color: var(--hpe-web-color-icon-on-strong);
86
+ --hpe-web-button-carousel-hover-background: var(--hpe-web-color-background-carousel-hover);
87
+ --hpe-web-button-carousel-hover-border-color: var(--hpe-web-color-transparent);
88
+ --hpe-web-button-carousel-hover-icon-color: var(--hpe-web-color-icon-on-strong);
89
+ --hpe-web-button-carousel-rest-background: var(--hpe-web-color-background-carousel);
90
+ --hpe-web-button-carousel-rest-border-color: var(--hpe-web-color-transparent);
91
+ --hpe-web-button-carousel-rest-icon-color: var(--hpe-web-color-icon-on-strong);
92
+ --hpe-web-button-link-inline-hover-background: var(--hpe-web-color-transparent);
93
+ --hpe-web-button-link-inline-hover-border-color: var(--hpe-web-color-border-primary-hover);
94
+ --hpe-web-button-link-inline-hover-icon-color: var(--hpe-web-color-icon-strong);
95
+ --hpe-web-button-link-inline-hover-text-color: var(--hpe-web-color-text-strong);
96
+ --hpe-web-button-link-inline-rest-background: var(--hpe-web-color-transparent);
97
+ --hpe-web-button-link-inline-rest-border-color: var(--hpe-web-color-border-primary);
98
+ --hpe-web-button-link-inline-rest-icon-color: var(--hpe-web-color-icon-default);
99
+ --hpe-web-button-link-inline-rest-text-color: var(--hpe-web-color-text-default);
100
+ --hpe-web-button-link-large-border-radius: var(--hpe-web-multi-mode-button-link-large-border-radius);
101
+ --hpe-web-button-link-large-border-width: var(--hpe-web-multi-mode-button-link-large-border-width);
102
+ --hpe-web-button-link-large-font-size: var(--hpe-web-multi-mode-button-link-large-font-size);
103
+ --hpe-web-button-link-large-gap-x: var(--hpe-web-multi-mode-button-link-large-gap-x);
104
+ --hpe-web-button-link-large-line-height: var(--hpe-web-multi-mode-button-link-large-line-height);
105
+ --hpe-web-button-link-large-min-height: var(--hpe-web-multi-mode-button-link-large-min-height);
106
+ --hpe-web-button-link-large-padding-x: var(--hpe-web-multi-mode-button-link-large-padding-x);
107
+ --hpe-web-button-link-large-padding-y: var(--hpe-web-multi-mode-button-link-large-padding-y);
108
+ --hpe-web-button-link-medium-border-radius: var(--hpe-web-multi-mode-button-link-medium-border-radius);
109
+ --hpe-web-button-link-medium-border-width: var(--hpe-web-multi-mode-button-link-medium-border-width);
110
+ --hpe-web-button-link-medium-font-size: var(--hpe-web-multi-mode-button-link-medium-font-size);
111
+ --hpe-web-button-link-medium-gap-x: var(--hpe-web-multi-mode-button-link-medium-gap-x);
112
+ --hpe-web-button-link-medium-line-height: var(--hpe-web-multi-mode-button-link-medium-line-height);
113
+ --hpe-web-button-link-medium-min-height: var(--hpe-web-multi-mode-button-link-medium-min-height);
114
+ --hpe-web-button-link-medium-padding-x: var(--hpe-web-multi-mode-button-link-medium-padding-x);
115
+ --hpe-web-button-link-medium-padding-y: var(--hpe-web-multi-mode-button-link-medium-padding-y);
116
+ --hpe-web-button-link-neutral-disabled-rest-background: var(--hpe-web-color-transparent);
117
+ --hpe-web-button-link-neutral-disabled-rest-border-color: var(--hpe-web-color-transparent);
118
+ --hpe-web-button-link-neutral-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
119
+ --hpe-web-button-link-neutral-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
120
+ --hpe-web-button-link-neutral-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
121
+ --hpe-web-button-link-neutral-hover-background: var(--hpe-web-color-transparent);
122
+ --hpe-web-button-link-neutral-hover-border-color: var(--hpe-web-button-primary-rest-border-color);
123
+ --hpe-web-button-link-neutral-hover-font-weight: var(--hpe-web-button-link-primary-hover-font-weight);
124
+ --hpe-web-button-link-neutral-hover-icon-color: var(--hpe-web-color-text-neutral-strong);
125
+ --hpe-web-button-link-neutral-hover-text-color: var(--hpe-web-color-text-neutral-strong);
126
+ --hpe-web-button-link-neutral-rest-background: var(--hpe-web-color-transparent);
127
+ --hpe-web-button-link-neutral-rest-border-color: var(--hpe-web-color-transparent);
128
+ --hpe-web-button-link-neutral-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
129
+ --hpe-web-button-link-neutral-rest-icon-color: var(--hpe-web-color-icon-strong);
130
+ --hpe-web-button-link-neutral-rest-text-color: var(--hpe-web-color-text-strong);
131
+ --hpe-web-button-link-primary-disabled-rest-background: var(--hpe-web-color-transparent);
132
+ --hpe-web-button-link-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
133
+ --hpe-web-button-link-primary-disabled-rest-font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
134
+ --hpe-web-button-link-primary-disabled-rest-icon-color: var(--hpe-web-color-text-disabled);
135
+ --hpe-web-button-link-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
136
+ --hpe-web-button-link-primary-hover-background: var(--hpe-web-color-transparent);
137
+ --hpe-web-button-link-primary-hover-border-color: var(--hpe-web-color-transparent);
138
+ --hpe-web-button-link-primary-hover-font-weight: 500;
139
+ --hpe-web-button-link-primary-hover-icon-color: var(--hpe-web-color-icon-primary-strong-hover);
140
+ --hpe-web-button-link-primary-hover-text-color: var(--hpe-web-color-text-primary-strong-hover);
141
+ --hpe-web-button-link-primary-rest-background: var(--hpe-web-color-transparent);
142
+ --hpe-web-button-link-primary-rest-border-color: var(--hpe-web-color-transparent);
143
+ --hpe-web-button-link-primary-rest-font-weight: 500;
144
+ --hpe-web-button-link-primary-rest-icon-color: var(--hpe-web-color-text-primary-strong);
145
+ --hpe-web-button-link-primary-rest-text-color: var(--hpe-web-color-text-primary-strong);
146
+ --hpe-web-button-link-small-border-radius: var(--hpe-web-multi-mode-button-link-small-border-radius);
147
+ --hpe-web-button-link-small-border-width: var(--hpe-web-multi-mode-button-link-small-border-width);
148
+ --hpe-web-button-link-small-font-size: var(--hpe-web-multi-mode-button-link-small-font-size);
149
+ --hpe-web-button-link-small-gap-x: var(--hpe-web-multi-mode-button-link-small-gap-x);
150
+ --hpe-web-button-link-small-line-height: var(--hpe-web-multi-mode-button-link-small-line-height);
151
+ --hpe-web-button-link-small-min-height: var(--hpe-web-multi-mode-button-link-small-min-height);
152
+ --hpe-web-button-link-small-padding-x: var(--hpe-web-multi-mode-button-link-small-padding-x);
153
+ --hpe-web-button-link-small-padding-y: var(--hpe-web-multi-mode-button-link-small-padding-y);
154
+ --hpe-web-button-play-hover-background: #ffffff;
155
+ --hpe-web-button-play-hover-border-color: var(--hpe-web-color-transparent);
156
+ --hpe-web-button-play-hover-icon-color: var(--hpe-web-color-icon-primary-strong);
157
+ --hpe-web-button-play-rest-background: #ffffff;
158
+ --hpe-web-button-play-rest-border-color: var(--hpe-web-color-transparent);
159
+ --hpe-web-button-play-rest-icon-color: var(--hpe-web-color-icon-primary);
160
+ --hpe-web-button-primary-disabled-rest-background: var(--hpe-web-color-background-neutral-weak);
161
+ --hpe-web-button-primary-disabled-rest-border-color: var(--hpe-web-color-transparent);
162
+ --hpe-web-button-primary-disabled-rest-font-weight: var(--hpe-web-button-primary-rest-font-weight);
163
+ --hpe-web-button-primary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
164
+ --hpe-web-button-primary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
165
+ --hpe-web-button-primary-hover-background: var(--hpe-web-color-background-neutral);
166
+ --hpe-web-button-primary-hover-border-color: var(--hpe-web-color-transparent);
167
+ --hpe-web-button-primary-hover-font-weight: var(--hpe-web-button-primary-rest-font-weight);
168
+ --hpe-web-button-primary-hover-icon-color: var(--hpe-web-color-text-on-strong);
169
+ --hpe-web-button-primary-hover-text-color: var(--hpe-web-color-text-on-strong);
170
+ --hpe-web-button-primary-large-border-radius: var(--hpe-web-multi-mode-button-primary-large-border-radius);
171
+ --hpe-web-button-primary-large-border-width: var(--hpe-web-multi-mode-button-primary-large-border-width);
172
+ --hpe-web-button-primary-large-font-size: var(--hpe-web-multi-mode-button-primary-large-font-size);
173
+ --hpe-web-button-primary-large-gap-x: var(--hpe-web-multi-mode-button-primary-large-gap-x);
174
+ --hpe-web-button-primary-large-icon-width: var(--hpe-web-multi-mode-button-primary-large-icon-width);
175
+ --hpe-web-button-primary-large-line-height: var(--hpe-web-multi-mode-button-primary-large-line-height);
176
+ --hpe-web-button-primary-large-min-height: var(--hpe-web-multi-mode-button-primary-large-min-height);
177
+ --hpe-web-button-primary-large-padding-x: var(--hpe-web-multi-mode-button-primary-large-padding-x);
178
+ --hpe-web-button-primary-large-padding-y: var(--hpe-web-multi-mode-button-primary-large-padding-y);
179
+ --hpe-web-button-primary-medium-border-radius: var(--hpe-web-multi-mode-button-primary-medium-border-radius);
180
+ --hpe-web-button-primary-medium-border-width: var(--hpe-web-multi-mode-button-primary-medium-border-width);
181
+ --hpe-web-button-primary-medium-font-size: var(--hpe-web-multi-mode-button-primary-medium-font-size);
182
+ --hpe-web-button-primary-medium-gap-x: var(--hpe-web-multi-mode-button-primary-medium-gap-x);
183
+ --hpe-web-button-primary-medium-icon-width: var(--hpe-web-multi-mode-button-primary-medium-icon-width);
184
+ --hpe-web-button-primary-medium-line-height: var(--hpe-web-multi-mode-button-primary-medium-line-height);
185
+ --hpe-web-button-primary-medium-min-height: var(--hpe-web-multi-mode-button-primary-medium-min-height);
186
+ --hpe-web-button-primary-medium-padding-x: var(--hpe-web-multi-mode-button-primary-medium-padding-x);
187
+ --hpe-web-button-primary-medium-padding-y: var(--hpe-web-multi-mode-button-primary-medium-padding-y);
188
+ --hpe-web-button-primary-rest-background: var(--hpe-web-color-background-neutral-strong);
189
+ --hpe-web-button-primary-rest-border-color: var(--hpe-web-color-transparent);
190
+ --hpe-web-button-primary-rest-font-weight: 500;
191
+ --hpe-web-button-primary-rest-icon-color: var(--hpe-web-color-text-on-strong);
192
+ --hpe-web-button-primary-rest-text-color: var(--hpe-web-color-text-on-strong);
193
+ --hpe-web-button-primary-small-border-radius: var(--hpe-web-multi-mode-button-primary-small-border-radius);
194
+ --hpe-web-button-primary-small-border-width: var(--hpe-web-multi-mode-button-primary-small-border-width);
195
+ --hpe-web-button-primary-small-font-size: var(--hpe-web-multi-mode-button-primary-small-font-size);
196
+ --hpe-web-button-primary-small-gap-x: var(--hpe-web-multi-mode-button-primary-small-gap-x);
197
+ --hpe-web-button-primary-small-icon-width: var(--hpe-web-multi-mode-button-primary-small-icon-width);
198
+ --hpe-web-button-primary-small-line-height: var(--hpe-web-multi-mode-button-primary-small-line-height);
199
+ --hpe-web-button-primary-small-min-height: var(--hpe-web-multi-mode-button-primary-small-min-height);
200
+ --hpe-web-button-primary-small-padding-x: var(--hpe-web-multi-mode-button-primary-small-padding-x);
201
+ --hpe-web-button-primary-small-padding-y: var(--hpe-web-multi-mode-button-primary-small-padding-y);
202
+ --hpe-web-button-secondary-disabled-rest-background: var(--hpe-web-color-transparent);
203
+ --hpe-web-button-secondary-disabled-rest-border-color: var(--hpe-web-color-background-neutral-weak);
204
+ --hpe-web-button-secondary-disabled-rest-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
205
+ --hpe-web-button-secondary-disabled-rest-icon-color: var(--hpe-web-color-icon-disabled);
206
+ --hpe-web-button-secondary-disabled-rest-text-color: var(--hpe-web-color-text-disabled);
207
+ --hpe-web-button-secondary-hover-background: var(--hpe-web-color-transparent);
208
+ --hpe-web-button-secondary-hover-border-color: var(--hpe-web-color-border-selected);
209
+ --hpe-web-button-secondary-hover-font-weight: var(--hpe-web-button-secondary-rest-font-weight);
210
+ --hpe-web-button-secondary-hover-icon-color: var(--hpe-web-color-icon-strong);
211
+ --hpe-web-button-secondary-hover-text-color: var(--hpe-web-color-text-strong);
212
+ --hpe-web-button-secondary-large-border-radius: var(--hpe-web-multi-mode-button-secondary-large-border-radius);
213
+ --hpe-web-button-secondary-large-border-width: var(--hpe-web-multi-mode-button-secondary-large-border-width);
214
+ --hpe-web-button-secondary-large-font-size: var(--hpe-web-multi-mode-button-secondary-large-font-size);
215
+ --hpe-web-button-secondary-large-gap-x: var(--hpe-web-multi-mode-button-secondary-large-gap-x);
216
+ --hpe-web-button-secondary-large-icon-height: var(--hpe-web-multi-mode-button-secondary-large-icon-height);
217
+ --hpe-web-button-secondary-large-line-height: var(--hpe-web-multi-mode-button-secondary-large-line-height);
218
+ --hpe-web-button-secondary-large-min-height: var(--hpe-web-multi-mode-button-secondary-large-min-height);
219
+ --hpe-web-button-secondary-large-padding-x: var(--hpe-web-multi-mode-button-secondary-large-padding-x);
220
+ --hpe-web-button-secondary-large-padding-y: var(--hpe-web-multi-mode-button-secondary-large-padding-y);
221
+ --hpe-web-button-secondary-medium-border-radius: var(--hpe-web-multi-mode-button-secondary-medium-border-radius);
222
+ --hpe-web-button-secondary-medium-border-width: var(--hpe-web-multi-mode-button-secondary-medium-border-width);
223
+ --hpe-web-button-secondary-medium-font-size: var(--hpe-web-multi-mode-button-secondary-medium-font-size);
224
+ --hpe-web-button-secondary-medium-gap-x: var(--hpe-web-multi-mode-button-secondary-medium-gap-x);
225
+ --hpe-web-button-secondary-medium-icon-height: var(--hpe-web-multi-mode-button-secondary-medium-icon-height);
226
+ --hpe-web-button-secondary-medium-line-height: var(--hpe-web-multi-mode-button-secondary-medium-line-height);
227
+ --hpe-web-button-secondary-medium-min-height: var(--hpe-web-multi-mode-button-secondary-medium-min-height);
228
+ --hpe-web-button-secondary-medium-padding-x: var(--hpe-web-multi-mode-button-secondary-medium-padding-x);
229
+ --hpe-web-button-secondary-medium-padding-y: var(--hpe-web-multi-mode-button-secondary-medium-padding-y);
230
+ --hpe-web-button-secondary-rest-background: var(--hpe-web-color-transparent);
231
+ --hpe-web-button-secondary-rest-border-color: var(--hpe-web-color-border-primary);
232
+ --hpe-web-button-secondary-rest-font-weight: 500;
233
+ --hpe-web-button-secondary-rest-icon-color: var(--hpe-web-color-icon-strong);
234
+ --hpe-web-button-secondary-rest-text-color: var(--hpe-web-color-text-strong);
235
+ --hpe-web-button-secondary-small-border-radius: var(--hpe-web-multi-mode-button-secondary-small-border-radius);
236
+ --hpe-web-button-secondary-small-border-width: var(--hpe-web-multi-mode-button-secondary-small-border-width);
237
+ --hpe-web-button-secondary-small-font-size: var(--hpe-web-multi-mode-button-secondary-small-font-size);
238
+ --hpe-web-button-secondary-small-gap-x: var(--hpe-web-multi-mode-button-secondary-small-gap-x);
239
+ --hpe-web-button-secondary-small-icon-height: var(--hpe-web-multi-mode-button-secondary-small-icon-height);
240
+ --hpe-web-button-secondary-small-line-height: var(--hpe-web-multi-mode-button-secondary-small-line-height);
241
+ --hpe-web-button-secondary-small-min-height: var(--hpe-web-multi-mode-button-secondary-small-min-height);
242
+ --hpe-web-button-secondary-small-padding-x: var(--hpe-web-multi-mode-button-secondary-small-padding-x);
243
+ --hpe-web-button-secondary-small-padding-y: var(--hpe-web-multi-mode-button-secondary-small-padding-y);
244
+ --hpe-web-card-bento-box-bento-x: 2rem;
245
+ --hpe-web-card-bento-box-bento-y: 2rem;
246
+ --hpe-web-card-elements-avatar-height: 6rem;
247
+ --hpe-web-card-elements-icon-height: 3rem;
248
+ --hpe-web-card-elements-logo-height: 4rem;
249
+ --hpe-web-card-layout-gap-x: 2.5rem;
250
+ --hpe-web-card-layout-gap-y: 2.5rem;
251
+ --hpe-web-card-layout-padding-y: 4rem;
252
+ --hpe-web-content-block-text-recipe-gap-y: 0px;
253
+ --hpe-web-global-nav-background: #ffffff;
254
+ --hpe-web-live-player-gap-x: 3rem;
255
+ --hpe-web-live-player-padding-x: 22.5rem;
256
+ --hpe-web-live-player-padding-y: 10rem;
257
+ --hpe-web-logo-collage-group-gap-x: 2.5rem;
258
+ --hpe-web-logo-collage-group-gap-y: 2.5rem;
259
+ --hpe-web-logo-collage-max-height: 4rem;
260
+ --hpe-web-logo-grid-padding-x: 2rem;
261
+ --hpe-web-logo-grid-padding-y: 2rem;
262
+ --hpe-web-logo-grid-width: 18rem;
263
+ --hpe-web-marquee-gap-x: 6rem;
264
+ --hpe-web-marquee-gap-y: 2.5rem;
265
+ --hpe-web-marquee-padding-y: 10rem;
266
+ --hpe-web-marquee-simple-marquee-padding-y: 6rem;
74
267
  }