@gitlab/ui 87.7.0 → 88.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 (31) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +51 -46
  3. package/dist/index.css +2 -2
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +100 -82
  6. package/dist/tokens/build/js/tokens.js +100 -82
  7. package/dist/tokens/css/tokens.css +99 -81
  8. package/dist/tokens/css/tokens.dark.css +99 -81
  9. package/dist/tokens/js/tokens.dark.js +99 -81
  10. package/dist/tokens/js/tokens.js +99 -81
  11. package/dist/tokens/json/tokens.dark.json +6215 -5799
  12. package/dist/tokens/json/tokens.json +6215 -5799
  13. package/dist/tokens/scss/_tokens.dark.scss +99 -81
  14. package/dist/tokens/scss/_tokens.scss +99 -81
  15. package/dist/tokens/scss/_tokens_custom_properties.scss +99 -81
  16. package/package.json +5 -5
  17. package/src/components/base/avatars_inline/avatars_inline.scss +2 -2
  18. package/src/components/base/badge/badge.scss +63 -63
  19. package/src/components/base/tooltip/tooltip.scss +6 -6
  20. package/src/tokens/build/css/tokens.css +99 -81
  21. package/src/tokens/build/css/tokens.dark.css +99 -81
  22. package/src/tokens/build/js/tokens.dark.js +99 -81
  23. package/src/tokens/build/js/tokens.js +99 -81
  24. package/src/tokens/build/json/tokens.dark.json +6215 -5799
  25. package/src/tokens/build/json/tokens.json +6215 -5799
  26. package/src/tokens/build/scss/_tokens.dark.scss +99 -81
  27. package/src/tokens/build/scss/_tokens.scss +99 -81
  28. package/src/tokens/build/scss/_tokens_custom_properties.scss +99 -81
  29. package/src/tokens/contextual/badge.tokens.json +704 -0
  30. package/src/tokens/feedback.tokens.json +13 -19
  31. package/src/tokens/status.tokens.json +90 -640
package/dist/tokens/css/tokens.dark.css CHANGED
@@ -424,83 +424,24 @@
424
424
  --gl-text-color-strong: var(--gl-color-neutral-0); /* Used for text with the highest contrast. */
425
425
  --gl-text-color-subtle: var(--gl-color-neutral-200); /* Used for supplemental text that doesn't need to be as prominent as other text. */
426
426
  --gl-text-color-default: var(--gl-color-neutral-50); /* Used for the default text color. */
427
- --gl-status-brand-icon-color-active: var(--gl-color-purple-300); /* Used for the icon of a brand related status item in the active state. */
428
- --gl-status-brand-icon-color-focus: var(--gl-color-purple-400); /* Used for the icon of a brand related status item in the focus state. */
429
- --gl-status-brand-icon-color-hover: var(--gl-color-purple-400); /* Used for the icon of a brand related status item in the hover state. */
430
- --gl-status-brand-icon-color-default: var(--gl-color-purple-500); /* Used for the icon of a brand related status item when static or the default state when linked. */
431
- --gl-status-brand-text-color-active: var(--gl-color-purple-100); /* Used for the text of a brand related status item in the active state. */
432
- --gl-status-brand-text-color-focus: var(--gl-color-purple-200); /* Used for the text of a brand related status item in the focus state. */
433
- --gl-status-brand-text-color-hover: var(--gl-color-purple-200); /* Used for the text of a brand related status item in the hover state. */
434
- --gl-status-brand-text-color-default: var(--gl-color-purple-300); /* Used for the text of a brand related status item when static or the default state when linked. */
435
- --gl-status-brand-border-color-hover: var(--gl-color-purple-800); /* Used for the border of a brand related status item in the hover state. */
436
- --gl-status-brand-background-color-active: var(--gl-color-purple-800); /* Used for the background of a brand related status item in the active state. */
437
- --gl-status-brand-background-color-default: var(--gl-color-purple-900); /* Used for the background of a brand related status item when static or the default state when linked. */
438
- --gl-status-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger (critical) status item in the active state. */
439
- --gl-status-danger-icon-color-focus: var(--gl-color-red-300); /* Used for the icon of a danger (critical) status item in the focus state. */
440
- --gl-status-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger (critical) status item in the hover state. */
441
- --gl-status-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (critical) status item when static or the default state when linked. */
442
- --gl-status-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (critical) status item in the active state. */
443
- --gl-status-danger-text-color-focus: var(--gl-color-red-100); /* Used for the text of a danger (critical) status item in the focus state. */
444
- --gl-status-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger (critical) status item in the hover state. */
445
- --gl-status-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger (critical) status item when static or the default state when linked. */
446
- --gl-status-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger (critical) status item in the hover state. */
447
- --gl-status-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger (critical) status item in the active state. */
448
- --gl-status-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger (critical) status item when static or the default state when linked. */
449
- --gl-status-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning status or confidential item in the active state. */
450
- --gl-status-warning-icon-color-focus: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the focus state. */
451
- --gl-status-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the hover state. */
452
- --gl-status-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning status or confidential item when static or the default state when linked. */
453
- --gl-status-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning status or confidential item in the active state.N */
454
- --gl-status-warning-text-color-focus: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the focus state. */
455
- --gl-status-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the hover state. */
456
- --gl-status-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
457
- --gl-status-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning status or confidential item in the hover state. */
458
- --gl-status-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning status or confidential item in the active state. */
459
- --gl-status-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning status or confidential item when static or the default state when linked. */
460
- --gl-status-success-icon-color-active: var(--gl-color-green-200); /* Used for the icon of a success status item in the active state. */
461
- --gl-status-success-icon-color-focus: var(--gl-color-green-300); /* Used for the icon of a success status item in the focus state. */
462
- --gl-status-success-icon-color-hover: var(--gl-color-green-300); /* Used for the icon of a success status item in the hover state. */
463
- --gl-status-success-icon-color-default: var(--gl-color-green-400); /* Used for the icon of a success status item when static or the default state when linked. */
464
- --gl-status-success-text-color-active: var(--gl-color-green-50); /* Used for the text of a success status item in the active state. */
465
- --gl-status-success-text-color-focus: var(--gl-color-green-100); /* Used for the text of a success status item in the focus state. */
466
- --gl-status-success-text-color-hover: var(--gl-color-green-100); /* Used for the text of a success status item in the hover state. */
467
- --gl-status-success-text-color-default: var(--gl-color-green-200); /* Used for the text of a success status item when static or the default state when linked. */
468
- --gl-status-success-border-color-hover: var(--gl-color-green-700); /* Used for the border of a success status item in the hover state. */
469
- --gl-status-success-background-color-active: var(--gl-color-green-700); /* Used for the background of a success status item in the active state. */
470
- --gl-status-success-background-color-default: var(--gl-color-green-800); /* Used for the background of a success status item when static or the default state when linked. */
471
- --gl-status-info-icon-color-active: var(--gl-color-blue-200); /* Used for the icon of an informational status item in the active state. */
472
- --gl-status-info-icon-color-focus: var(--gl-color-blue-300); /* Used for the icon of an informational status item in the focus state. */
473
- --gl-status-info-icon-color-hover: var(--gl-color-blue-300); /* Used for the icon of an informational status item in the hover state. */
474
- --gl-status-info-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of an informational status item when static or the default state when linked. */
475
- --gl-status-info-text-color-active: var(--gl-color-blue-50); /* Used for the text of an informational status item in the active state. */
476
- --gl-status-info-text-color-focus: var(--gl-color-blue-100); /* Used for the text of an informational status item in the focus state. */
477
- --gl-status-info-text-color-hover: var(--gl-color-blue-100); /* Used for the text of an informational status item in the hover state. */
478
- --gl-status-info-text-color-default: var(--gl-color-blue-200); /* Used for the text of an informational status item when static or the default state when linked. */
479
- --gl-status-info-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an informational status item in the hover state. */
480
- --gl-status-info-background-color-active: var(--gl-color-blue-700); /* Used for the background of an informational status item in the active state. */
481
- --gl-status-info-background-color-default: var(--gl-color-blue-800); /* Used for the background of an informational status item when static or the default state when linked. */
482
- --gl-status-neutral-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a neutral status item in the active state. */
483
- --gl-status-neutral-icon-color-focus: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item in the focus state. */
484
- --gl-status-neutral-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a neutral status item in the hover state. */
485
- --gl-status-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a neutral status item when static or the default state when linked. */
486
- --gl-status-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral status item in the active state. */
487
- --gl-status-neutral-text-color-focus: var(--gl-color-neutral-100); /* Used for the text of a neutral status item in the focus state. */
488
- --gl-status-neutral-text-color-hover: var(--gl-color-neutral-100); /* Used for the text of a neutral status item in the hover state. */
489
- --gl-status-neutral-text-color-default: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when static or the default state when linked. */
490
- --gl-status-neutral-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a neutral status item in the hover state. */
491
- --gl-status-neutral-background-color-active: var(--gl-color-neutral-700); /* Used for the background of a neutral status item in the active state. */
492
- --gl-status-neutral-background-color-default: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when static or the default state when linked. */
493
- --gl-status-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a subtle neutral status item in the active state. */
494
- --gl-status-muted-icon-color-focus: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral status item in the focus state. */
495
- --gl-status-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral status item in the hover state. */
496
- --gl-status-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a subtle neutral status item when static or the default state when linked. */
497
- --gl-status-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a subtle neutral status item in the active state. */
498
- --gl-status-muted-text-color-focus: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral status item in the focus state. */
499
- --gl-status-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral status item in the hover state. */
500
- --gl-status-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a subtle neutral status item when static or the default state when linked. */
501
- --gl-status-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a subtle neutral status item in the hover state. */
502
- --gl-status-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral status item in the active state. */
503
- --gl-status-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle neutral status item when static or the default state when linked. */
427
+ --gl-status-brand-icon-color: var(--gl-color-purple-500); /* Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
428
+ --gl-status-brand-text-color: var(--gl-color-purple-300); /* Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
429
+ --gl-status-brand-background-color: var(--gl-color-purple-900); /* Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface. */
430
+ --gl-status-danger-icon-color: var(--gl-color-red-400); /* Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
431
+ --gl-status-danger-text-color: var(--gl-color-red-200); /* Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
432
+ --gl-status-danger-background-color: var(--gl-color-red-800); /* Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition. */
433
+ --gl-status-warning-icon-color: var(--gl-color-orange-400); /* Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
434
+ --gl-status-warning-text-color: var(--gl-color-orange-200); /* Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
435
+ --gl-status-warning-background-color: var(--gl-color-orange-800); /* Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item. */
436
+ --gl-status-success-icon-color: var(--gl-color-green-400); /* Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
437
+ --gl-status-success-text-color: var(--gl-color-green-200); /* Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
438
+ --gl-status-success-background-color: var(--gl-color-green-800); /* Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation. */
439
+ --gl-status-info-icon-color: var(--gl-color-blue-400); /* Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
440
+ --gl-status-info-text-color: var(--gl-color-blue-200); /* Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
441
+ --gl-status-info-background-color: var(--gl-color-blue-800); /* Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress. */
442
+ --gl-status-neutral-icon-color: var(--gl-color-neutral-400); /* Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
443
+ --gl-status-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
444
+ --gl-status-neutral-background-color: var(--gl-color-neutral-800); /* Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state. */
504
445
  --gl-shadow-color-default: var(--gl-color-alpha-dark-24); /* Used for the default shadow color. */
505
446
  --gl-icon-color-success: var(--gl-color-green-300); /* Used for an icon associated with success or validity. */
506
447
  --gl-icon-color-danger: var(--gl-color-red-300); /* Used for an icon associated with an error or danger. */
@@ -527,10 +468,10 @@
527
468
  --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency. */
528
469
  --gl-feedback-neutral-text-color: var(--gl-color-neutral-200); /* Used for the text of a neutral feedback item when there isn't a specific meaning or urgency. */
529
470
  --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for the background of a neutral feedback item when there isn't a specific meaning or urgency. */
530
- --gl-feedback-link-color-strong: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
531
- --gl-feedback-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
532
- --gl-feedback-text-color-strong: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
533
- --gl-feedback-background-color-strong: var(--gl-color-neutral-10); /* Used for a background associated with feedback like a tooltip or toast message. */
471
+ --gl-feedback-strong-link-color: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
472
+ --gl-feedback-strong-icon-color: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
473
+ --gl-feedback-strong-text-color: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
474
+ --gl-feedback-strong-background-color: var(--gl-color-neutral-10); /* Used for a background associated with strong feedback like a tooltip or toast message. */
534
475
  --gl-control-indicator-color-disabled: var(--gl-color-neutral-400); /* Used for disabled checkbox and radio button state indicators. */
535
476
  --gl-control-indicator-color-selected: var(--gl-color-neutral-900); /* Used for checkbox and radio button state indicators. */
536
477
  --gl-control-placeholder-color: var(--gl-color-neutral-500); /* Used for placeholder text within inputs. */
@@ -571,6 +512,69 @@
571
512
  --gl-breadcrumb-separator-color: var(--gl-color-neutral-400); /* Used for the breadcrumb level separator. */
572
513
  --gl-banner-promo-background-color: var(--gl-color-neutral-900); /* Used as background for the default banner type. */
573
514
  --gl-banner-intro-border-color: var(--gl-color-blue-600); /* Used to compliment the info banner. */
515
+ --gl-badge-tier-icon-color-active: var(--gl-color-purple-300); /* Used for the icon of a tier related badge in the active state. */
516
+ --gl-badge-tier-icon-color-hover: var(--gl-color-purple-400); /* Used for the icon of a tier related badge in the hover state. */
517
+ --gl-badge-tier-icon-color-default: var(--gl-color-purple-500); /* Used for the icon of a tier related badge when static or the default state when linked. */
518
+ --gl-badge-tier-text-color-active: var(--gl-color-purple-100); /* Used for the text of a tier related badge in the active state. */
519
+ --gl-badge-tier-text-color-hover: var(--gl-color-purple-200); /* Used for the text of a tier related badge in the hover state. */
520
+ --gl-badge-tier-text-color-default: var(--gl-color-purple-300); /* Used for the text of a tier related badge when static or the default state when linked. */
521
+ --gl-badge-tier-border-color-hover: var(--gl-color-purple-800); /* Used for the border of a tier related badge in the hover state. */
522
+ --gl-badge-tier-background-color-active: var(--gl-color-purple-800); /* Used for the background of a tier related badge in the active state. */
523
+ --gl-badge-tier-background-color-default: var(--gl-color-purple-900); /* Used for the background of a tier related badge when static or the default state when linked. */
524
+ --gl-badge-danger-icon-color-active: var(--gl-color-red-200); /* Used for the icon of a danger (critical) badge in the active state. */
525
+ --gl-badge-danger-icon-color-hover: var(--gl-color-red-300); /* Used for the icon of a danger (critical) badge in the hover state. */
526
+ --gl-badge-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (critical) badge when static or the default state when linked. */
527
+ --gl-badge-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (critical) badge in the active state. */
528
+ --gl-badge-danger-text-color-hover: var(--gl-color-red-100); /* Used for the text of a danger (critical) badge in the hover state. */
529
+ --gl-badge-danger-text-color-default: var(--gl-color-red-200); /* Used for the text of a danger (critical) badge when static or the default state when linked. */
530
+ --gl-badge-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of a danger (critical) badge in the hover state. */
531
+ --gl-badge-danger-background-color-active: var(--gl-color-red-700); /* Used for the background of a danger (critical) badge in the active state. */
532
+ --gl-badge-danger-background-color-default: var(--gl-color-red-800); /* Used for the background of a danger (critical) badge when static or the default state when linked. */
533
+ --gl-badge-warning-icon-color-active: var(--gl-color-orange-200); /* Used for the icon of a warning status or confidential item in the active state. */
534
+ --gl-badge-warning-icon-color-hover: var(--gl-color-orange-300); /* Used for the icon of a warning status or confidential item in the hover state. */
535
+ --gl-badge-warning-icon-color-default: var(--gl-color-orange-400); /* Used for the icon of a warning status or confidential item when static or the default state when linked. */
536
+ --gl-badge-warning-text-color-active: var(--gl-color-orange-50); /* Used for the text of a warning status or confidential item in the active state.N */
537
+ --gl-badge-warning-text-color-hover: var(--gl-color-orange-100); /* Used for the text of a warning status or confidential item in the hover state. */
538
+ --gl-badge-warning-text-color-default: var(--gl-color-orange-200); /* Used for the text of a warning status or confidential item when static or the default state when linked. */
539
+ --gl-badge-warning-border-color-hover: var(--gl-color-orange-700); /* Used for the border of a warning status or confidential item in the hover state. */
540
+ --gl-badge-warning-background-color-active: var(--gl-color-orange-700); /* Used for the background of a warning status or confidential item in the active state. */
541
+ --gl-badge-warning-background-color-default: var(--gl-color-orange-800); /* Used for the background of a warning status or confidential item when static or the default state when linked. */
542
+ --gl-badge-success-icon-color-active: var(--gl-color-green-200); /* Used for the icon of a success badge in the active state. */
543
+ --gl-badge-success-icon-color-hover: var(--gl-color-green-300); /* Used for the icon of a success badge in the hover state. */
544
+ --gl-badge-success-icon-color-default: var(--gl-color-green-400); /* Used for the icon of a success badge when static or the default state when linked. */
545
+ --gl-badge-success-text-color-active: var(--gl-color-green-50); /* Used for the text of a success badge in the active state. */
546
+ --gl-badge-success-text-color-hover: var(--gl-color-green-100); /* Used for the text of a success badge in the hover state. */
547
+ --gl-badge-success-text-color-default: var(--gl-color-green-200); /* Used for the text of a success badge when static or the default state when linked. */
548
+ --gl-badge-success-border-color-hover: var(--gl-color-green-700); /* Used for the border of a success badge in the hover state. */
549
+ --gl-badge-success-background-color-active: var(--gl-color-green-700); /* Used for the background of a success badge in the active state. */
550
+ --gl-badge-success-background-color-default: var(--gl-color-green-800); /* Used for the background of a success badge when static or the default state when linked. */
551
+ --gl-badge-info-icon-color-active: var(--gl-color-blue-200); /* Used for the icon of an informational badge in the active state. */
552
+ --gl-badge-info-icon-color-hover: var(--gl-color-blue-300); /* Used for the icon of an informational badge in the hover state. */
553
+ --gl-badge-info-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of an informational badge when static or the default state when linked. */
554
+ --gl-badge-info-text-color-active: var(--gl-color-blue-50); /* Used for the text of an informational badge in the active state. */
555
+ --gl-badge-info-text-color-hover: var(--gl-color-blue-100); /* Used for the text of an informational badge in the hover state. */
556
+ --gl-badge-info-text-color-default: var(--gl-color-blue-200); /* Used for the text of an informational badge when static or the default state when linked. */
557
+ --gl-badge-info-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an informational badge in the hover state. */
558
+ --gl-badge-info-background-color-active: var(--gl-color-blue-700); /* Used for the background of an informational badge in the active state. */
559
+ --gl-badge-info-background-color-default: var(--gl-color-blue-800); /* Used for the background of an informational badge when static or the default state when linked. */
560
+ --gl-badge-neutral-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a neutral badge in the active state. */
561
+ --gl-badge-neutral-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a neutral badge in the hover state. */
562
+ --gl-badge-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a neutral badge when static or the default state when linked. */
563
+ --gl-badge-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral badge in the active state. */
564
+ --gl-badge-neutral-text-color-hover: var(--gl-color-neutral-100); /* Used for the text of a neutral badge in the hover state. */
565
+ --gl-badge-neutral-text-color-default: var(--gl-color-neutral-200); /* Used for the text of a neutral badge when static or the default state when linked. */
566
+ --gl-badge-neutral-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a neutral badge in the hover state. */
567
+ --gl-badge-neutral-background-color-active: var(--gl-color-neutral-700); /* Used for the background of a neutral badge in the active state. */
568
+ --gl-badge-neutral-background-color-default: var(--gl-color-neutral-800); /* Used for the background of a neutral badge when static or the default state when linked. */
569
+ --gl-badge-muted-icon-color-active: var(--gl-color-neutral-200); /* Used for the icon of a subtle neutral badge in the active state. */
570
+ --gl-badge-muted-icon-color-hover: var(--gl-color-neutral-300); /* Used for the icon of a subtle neutral badge in the hover state. */
571
+ --gl-badge-muted-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of a subtle neutral badge when static or the default state when linked. */
572
+ --gl-badge-muted-text-color-active: var(--gl-color-neutral-100); /* Used for the text of a subtle neutral badge in the active state. */
573
+ --gl-badge-muted-text-color-hover: var(--gl-color-neutral-200); /* Used for the text of a subtle neutral badge in the hover state. */
574
+ --gl-badge-muted-text-color-default: var(--gl-color-neutral-300); /* Used for the text of a subtle neutral badge when static or the default state when linked. */
575
+ --gl-badge-muted-border-color-hover: var(--gl-color-neutral-700); /* Used for the border of a subtle neutral badge in the hover state. */
576
+ --gl-badge-muted-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a subtle neutral badge in the active state. */
577
+ --gl-badge-muted-background-color-default: var(--gl-color-neutral-900); /* Used for the background of a subtle neutral badge when static or the default state when linked. */
574
578
  --gl-avatar-fallback-background-color-neutral: var(--gl-color-neutral-900); /* Neutral background for avatar fallback with no particular meaning. */
575
579
  --gl-avatar-fallback-background-color-orange: var(--gl-color-orange-900); /* Orange background for avatar fallback with no particular meaning. */
576
580
  --gl-avatar-fallback-background-color-green: var(--gl-color-green-900); /* Green background for avatar fallback with no particular meaning. */
@@ -607,6 +611,20 @@
607
611
  --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
608
612
  --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
609
613
  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
614
+ --gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-hover); /* Used for the icon of a tier related badge in the focus state. */
615
+ --gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-hover); /* Used for the text of a tier related badge in the focus state. */
616
+ --gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-hover); /* Used for the icon of a danger (critical) badge in the focus state. */
617
+ --gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-hover); /* Used for the text of a danger (critical) badge in the focus state. */
618
+ --gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-hover); /* Used for the icon of a warning status or confidential item in the focus state. */
619
+ --gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-hover); /* Used for the text of a warning status or confidential item in the focus state. */
620
+ --gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-hover); /* Used for the icon of a success badge in the focus state. */
621
+ --gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-hover); /* Used for the text of a success badge in the focus state. */
622
+ --gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-hover); /* Used for the icon of an informational badge in the focus state. */
623
+ --gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-hover); /* Used for the text of an informational badge in the focus state. */
624
+ --gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-hover); /* Used for the icon of a neutral badge in the focus state. */
625
+ --gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-hover); /* Used for the text of a neutral badge in the focus state. */
626
+ --gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-hover); /* Used for the icon of a subtle neutral badge in the focus state. */
627
+ --gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-hover); /* Used for the text of a subtle neutral badge in the focus state. */
610
628
  --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
611
629
  --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
612
630
  --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
package/dist/tokens/js/tokens.dark.js CHANGED
@@ -284,6 +284,83 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#033464'; // Blue backg
284
284
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#0a4020'; // Green background for avatar fallback with no particular meaning.
285
285
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#5c2900'; // Orange background for avatar fallback with no particular meaning.
286
286
  export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#28272d'; // Neutral background for avatar fallback with no particular meaning.
287
+ export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral badge when static or the default state when linked.
288
+ export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral badge in the active state.
289
+ export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a subtle neutral badge in the hover state.
290
+ export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral badge when static or the default state when linked.
291
+ export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral badge in the hover state.
292
+ export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral badge in the focus state.
293
+ export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a subtle neutral badge in the active state.
294
+ export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a subtle neutral badge when static or the default state when linked.
295
+ export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the hover state.
296
+ export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral badge in the focus state.
297
+ export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral badge in the active state.
298
+ export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the background of a neutral badge when static or the default state when linked.
299
+ export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#4c4b51'; // Used for the background of a neutral badge in the active state.
300
+ export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a neutral badge in the hover state.
301
+ export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral badge when static or the default state when linked.
302
+ export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral badge in the hover state.
303
+ export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral badge in the focus state.
304
+ export const GL_BADGE_NEUTRAL_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a neutral badge in the active state.
305
+ export const GL_BADGE_NEUTRAL_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a neutral badge when static or the default state when linked.
306
+ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a neutral badge in the hover state.
307
+ export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a neutral badge in the focus state.
308
+ export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a neutral badge in the active state.
309
+ export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the background of an informational badge when static or the default state when linked.
310
+ export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of an informational badge in the active state.
311
+ export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an informational badge in the hover state.
312
+ export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the text of an informational badge when static or the default state when linked.
313
+ export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#cbe2f9'; // Used for the text of an informational badge in the hover state.
314
+ export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#cbe2f9'; // Used for the text of an informational badge in the focus state.
315
+ export const GL_BADGE_INFO_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of an informational badge in the active state.
316
+ export const GL_BADGE_INFO_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of an informational badge when static or the default state when linked.
317
+ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of an informational badge in the hover state.
318
+ export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#63a6e9'; // Used for the icon of an informational badge in the focus state.
319
+ export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#9dc7f1'; // Used for the icon of an informational badge in the active state.
320
+ export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#0d532a'; // Used for the background of a success badge when static or the default state when linked.
321
+ export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#24663b'; // Used for the background of a success badge in the active state.
322
+ export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#24663b'; // Used for the border of a success badge in the hover state.
323
+ export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#91d4a8'; // Used for the text of a success badge when static or the default state when linked.
324
+ export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#c3e6cd'; // Used for the text of a success badge in the hover state.
325
+ export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#c3e6cd'; // Used for the text of a success badge in the focus state.
326
+ export const GL_BADGE_SUCCESS_TEXT_COLOR_ACTIVE = '#ecf4ee'; // Used for the text of a success badge in the active state.
327
+ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the icon of a success badge when static or the default state when linked.
328
+ export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#52b87a'; // Used for the icon of a success badge in the hover state.
329
+ export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#52b87a'; // Used for the icon of a success badge in the focus state.
330
+ export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#91d4a8'; // Used for the icon of a success badge in the active state.
331
+ export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning status or confidential item when static or the default state when linked.
332
+ export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning status or confidential item in the active state.
333
+ export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning status or confidential item in the hover state.
334
+ export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning status or confidential item when static or the default state when linked.
335
+ export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning status or confidential item in the hover state.
336
+ export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning status or confidential item in the focus state.
337
+ export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning status or confidential item in the active state.N
338
+ export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
339
+ export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning status or confidential item in the hover state.
340
+ export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning status or confidential item in the focus state.
341
+ export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning status or confidential item in the active state.
342
+ export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger (critical) badge when static or the default state when linked.
343
+ export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger (critical) badge in the active state.
344
+ export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger (critical) badge in the hover state.
345
+ export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger (critical) badge when static or the default state when linked.
346
+ export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger (critical) badge in the hover state.
347
+ export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger (critical) badge in the focus state.
348
+ export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (critical) badge in the active state.
349
+ export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (critical) badge when static or the default state when linked.
350
+ export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger (critical) badge in the hover state.
351
+ export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger (critical) badge in the focus state.
352
+ export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger (critical) badge in the active state.
353
+ export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#2f2a6b'; // Used for the background of a tier related badge when static or the default state when linked.
354
+ export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#453894'; // Used for the background of a tier related badge in the active state.
355
+ export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#453894'; // Used for the border of a tier related badge in the hover state.
356
+ export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#ac93e6'; // Used for the text of a tier related badge when static or the default state when linked.
357
+ export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#cbbbf2'; // Used for the text of a tier related badge in the hover state.
358
+ export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#cbbbf2'; // Used for the text of a tier related badge in the focus state.
359
+ export const GL_BADGE_TIER_TEXT_COLOR_ACTIVE = '#e1d8f9'; // Used for the text of a tier related badge in the active state.
360
+ export const GL_BADGE_TIER_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the icon of a tier related badge when static or the default state when linked.
361
+ export const GL_BADGE_TIER_ICON_COLOR_HOVER = '#9475db'; // Used for the icon of a tier related badge in the hover state.
362
+ export const GL_BADGE_TIER_ICON_COLOR_FOCUS = '#9475db'; // Used for the icon of a tier related badge in the focus state.
363
+ export const GL_BADGE_TIER_ICON_COLOR_ACTIVE = '#ac93e6'; // Used for the icon of a tier related badge in the active state.
287
364
  export const GL_BANNER_INTRO_BORDER_COLOR = '#1068bf'; // Used to compliment the info banner.
288
365
  export const GL_BANNER_PROMO_BACKGROUND_COLOR = '#28272d'; // Used as background for the default banner type.
289
366
  export const GL_BREADCRUMB_SEPARATOR_COLOR = '#89888d'; // Used for the breadcrumb level separator.
@@ -491,10 +568,10 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)'; // Use color.alpha.ligh
491
568
  export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)'; // Use color.alpha.light.4 instead.
492
569
  export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)'; // Use color.alpha.light.6 instead.
493
570
  export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)'; // Use color.alpha.light.8 instead.
494
- export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#fbfafd'; // Used for a background associated with feedback like a tooltip or toast message.
495
- export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#28272d'; // Used for text on a strong feedback background.
496
- export const GL_FEEDBACK_ICON_COLOR_STRONG = '#28272d'; // Used for an icon on a strong feedback background.
497
- export const GL_FEEDBACK_LINK_COLOR_STRONG = '#0b5cad'; // Used for a link on a strong feedback background.
571
+ export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#fbfafd'; // Used for a background associated with strong feedback like a tooltip or toast message.
572
+ export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#28272d'; // Used for text on a strong feedback background.
573
+ export const GL_FEEDBACK_STRONG_ICON_COLOR = '#28272d'; // Used for an icon on a strong feedback background.
574
+ export const GL_FEEDBACK_STRONG_LINK_COLOR = '#0b5cad'; // Used for a link on a strong feedback background.
498
575
  export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#28272d'; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
499
576
  export const GL_FEEDBACK_NEUTRAL_TEXT_COLOR = '#bfbfc3'; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
500
577
  export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
@@ -532,83 +609,24 @@ export const GL_LINE_HEIGHT_42 = '2.625rem';
532
609
  export const GL_LINE_HEIGHT_44 = '2.75rem';
533
610
  export const GL_LINE_HEIGHT_52 = '3.25rem';
534
611
  export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.24)'; // Used for the default shadow color.
535
- export const GL_STATUS_MUTED_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of a subtle neutral status item when static or the default state when linked.
536
- export const GL_STATUS_MUTED_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a subtle neutral status item in the active state.
537
- export const GL_STATUS_MUTED_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a subtle neutral status item in the hover state.
538
- export const GL_STATUS_MUTED_TEXT_COLOR_DEFAULT = '#a4a3a8'; // Used for the text of a subtle neutral status item when static or the default state when linked.
539
- export const GL_STATUS_MUTED_TEXT_COLOR_HOVER = '#bfbfc3'; // Used for the text of a subtle neutral status item in the hover state.
540
- export const GL_STATUS_MUTED_TEXT_COLOR_FOCUS = '#bfbfc3'; // Used for the text of a subtle neutral status item in the focus state.
541
- export const GL_STATUS_MUTED_TEXT_COLOR_ACTIVE = '#dcdcde'; // Used for the text of a subtle neutral status item in the active state.
542
- export const GL_STATUS_MUTED_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a subtle neutral status item when static or the default state when linked.
543
- export const GL_STATUS_MUTED_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a subtle neutral status item in the hover state.
544
- export const GL_STATUS_MUTED_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a subtle neutral status item in the focus state.
545
- export const GL_STATUS_MUTED_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a subtle neutral status item in the active state.
546
- export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#3a383f'; // Used for the background of a neutral status item when static or the default state when linked.
547
- export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#4c4b51'; // Used for the background of a neutral status item in the active state.
548
- export const GL_STATUS_NEUTRAL_BORDER_COLOR_HOVER = '#4c4b51'; // Used for the border of a neutral status item in the hover state.
549
- export const GL_STATUS_NEUTRAL_TEXT_COLOR_DEFAULT = '#bfbfc3'; // Used for the text of a neutral status item when static or the default state when linked.
550
- export const GL_STATUS_NEUTRAL_TEXT_COLOR_HOVER = '#dcdcde'; // Used for the text of a neutral status item in the hover state.
551
- export const GL_STATUS_NEUTRAL_TEXT_COLOR_FOCUS = '#dcdcde'; // Used for the text of a neutral status item in the focus state.
552
- export const GL_STATUS_NEUTRAL_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a neutral status item in the active state.
553
- export const GL_STATUS_NEUTRAL_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of a neutral status item when static or the default state when linked.
554
- export const GL_STATUS_NEUTRAL_ICON_COLOR_HOVER = '#a4a3a8'; // Used for the icon of a neutral status item in the hover state.
555
- export const GL_STATUS_NEUTRAL_ICON_COLOR_FOCUS = '#a4a3a8'; // Used for the icon of a neutral status item in the focus state.
556
- export const GL_STATUS_NEUTRAL_ICON_COLOR_ACTIVE = '#bfbfc3'; // Used for the icon of a neutral status item in the active state.
557
- export const GL_STATUS_INFO_BACKGROUND_COLOR_DEFAULT = '#064787'; // Used for the background of an informational status item when static or the default state when linked.
558
- export const GL_STATUS_INFO_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of an informational status item in the active state.
559
- export const GL_STATUS_INFO_BORDER_COLOR_HOVER = '#0b5cad'; // Used for the border of an informational status item in the hover state.
560
- export const GL_STATUS_INFO_TEXT_COLOR_DEFAULT = '#9dc7f1'; // Used for the text of an informational status item when static or the default state when linked.
561
- export const GL_STATUS_INFO_TEXT_COLOR_HOVER = '#cbe2f9'; // Used for the text of an informational status item in the hover state.
562
- export const GL_STATUS_INFO_TEXT_COLOR_FOCUS = '#cbe2f9'; // Used for the text of an informational status item in the focus state.
563
- export const GL_STATUS_INFO_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of an informational status item in the active state.
564
- export const GL_STATUS_INFO_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of an informational status item when static or the default state when linked.
565
- export const GL_STATUS_INFO_ICON_COLOR_HOVER = '#63a6e9'; // Used for the icon of an informational status item in the hover state.
566
- export const GL_STATUS_INFO_ICON_COLOR_FOCUS = '#63a6e9'; // Used for the icon of an informational status item in the focus state.
567
- export const GL_STATUS_INFO_ICON_COLOR_ACTIVE = '#9dc7f1'; // Used for the icon of an informational status item in the active state.
568
- export const GL_STATUS_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#0d532a'; // Used for the background of a success status item when static or the default state when linked.
569
- export const GL_STATUS_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#24663b'; // Used for the background of a success status item in the active state.
570
- export const GL_STATUS_SUCCESS_BORDER_COLOR_HOVER = '#24663b'; // Used for the border of a success status item in the hover state.
571
- export const GL_STATUS_SUCCESS_TEXT_COLOR_DEFAULT = '#91d4a8'; // Used for the text of a success status item when static or the default state when linked.
572
- export const GL_STATUS_SUCCESS_TEXT_COLOR_HOVER = '#c3e6cd'; // Used for the text of a success status item in the hover state.
573
- export const GL_STATUS_SUCCESS_TEXT_COLOR_FOCUS = '#c3e6cd'; // Used for the text of a success status item in the focus state.
574
- export const GL_STATUS_SUCCESS_TEXT_COLOR_ACTIVE = '#ecf4ee'; // Used for the text of a success status item in the active state.
575
- export const GL_STATUS_SUCCESS_ICON_COLOR_DEFAULT = '#2da160'; // Used for the icon of a success status item when static or the default state when linked.
576
- export const GL_STATUS_SUCCESS_ICON_COLOR_HOVER = '#52b87a'; // Used for the icon of a success status item in the hover state.
577
- export const GL_STATUS_SUCCESS_ICON_COLOR_FOCUS = '#52b87a'; // Used for the icon of a success status item in the focus state.
578
- export const GL_STATUS_SUCCESS_ICON_COLOR_ACTIVE = '#91d4a8'; // Used for the icon of a success status item in the active state.
579
- export const GL_STATUS_WARNING_BACKGROUND_COLOR_DEFAULT = '#703800'; // Used for the background of a warning status or confidential item when static or the default state when linked.
580
- export const GL_STATUS_WARNING_BACKGROUND_COLOR_ACTIVE = '#8f4700'; // Used for the background of a warning status or confidential item in the active state.
581
- export const GL_STATUS_WARNING_BORDER_COLOR_HOVER = '#8f4700'; // Used for the border of a warning status or confidential item in the hover state.
582
- export const GL_STATUS_WARNING_TEXT_COLOR_DEFAULT = '#e9be74'; // Used for the text of a warning status or confidential item when static or the default state when linked.
583
- export const GL_STATUS_WARNING_TEXT_COLOR_HOVER = '#f5d9a8'; // Used for the text of a warning status or confidential item in the hover state.
584
- export const GL_STATUS_WARNING_TEXT_COLOR_FOCUS = '#f5d9a8'; // Used for the text of a warning status or confidential item in the focus state.
585
- export const GL_STATUS_WARNING_TEXT_COLOR_ACTIVE = '#fdf1dd'; // Used for the text of a warning status or confidential item in the active state.N
586
- export const GL_STATUS_WARNING_ICON_COLOR_DEFAULT = '#c17d10'; // Used for the icon of a warning status or confidential item when static or the default state when linked.
587
- export const GL_STATUS_WARNING_ICON_COLOR_HOVER = '#d99530'; // Used for the icon of a warning status or confidential item in the hover state.
588
- export const GL_STATUS_WARNING_ICON_COLOR_FOCUS = '#d99530'; // Used for the icon of a warning status or confidential item in the focus state.
589
- export const GL_STATUS_WARNING_ICON_COLOR_ACTIVE = '#e9be74'; // Used for the icon of a warning status or confidential item in the active state.
590
- export const GL_STATUS_DANGER_BACKGROUND_COLOR_DEFAULT = '#8d1300'; // Used for the background of a danger (critical) status item when static or the default state when linked.
591
- export const GL_STATUS_DANGER_BACKGROUND_COLOR_ACTIVE = '#ae1800'; // Used for the background of a danger (critical) status item in the active state.
592
- export const GL_STATUS_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of a danger (critical) status item in the hover state.
593
- export const GL_STATUS_DANGER_TEXT_COLOR_DEFAULT = '#fcb5aa'; // Used for the text of a danger (critical) status item when static or the default state when linked.
594
- export const GL_STATUS_DANGER_TEXT_COLOR_HOVER = '#fdd4cd'; // Used for the text of a danger (critical) status item in the hover state.
595
- export const GL_STATUS_DANGER_TEXT_COLOR_FOCUS = '#fdd4cd'; // Used for the text of a danger (critical) status item in the focus state.
596
- export const GL_STATUS_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (critical) status item in the active state.
597
- export const GL_STATUS_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (critical) status item when static or the default state when linked.
598
- export const GL_STATUS_DANGER_ICON_COLOR_HOVER = '#f57f6c'; // Used for the icon of a danger (critical) status item in the hover state.
599
- export const GL_STATUS_DANGER_ICON_COLOR_FOCUS = '#f57f6c'; // Used for the icon of a danger (critical) status item in the focus state.
600
- export const GL_STATUS_DANGER_ICON_COLOR_ACTIVE = '#fcb5aa'; // Used for the icon of a danger (critical) status item in the active state.
601
- export const GL_STATUS_BRAND_BACKGROUND_COLOR_DEFAULT = '#2f2a6b'; // Used for the background of a brand related status item when static or the default state when linked.
602
- export const GL_STATUS_BRAND_BACKGROUND_COLOR_ACTIVE = '#453894'; // Used for the background of a brand related status item in the active state.
603
- export const GL_STATUS_BRAND_BORDER_COLOR_HOVER = '#453894'; // Used for the border of a brand related status item in the hover state.
604
- export const GL_STATUS_BRAND_TEXT_COLOR_DEFAULT = '#ac93e6'; // Used for the text of a brand related status item when static or the default state when linked.
605
- export const GL_STATUS_BRAND_TEXT_COLOR_HOVER = '#cbbbf2'; // Used for the text of a brand related status item in the hover state.
606
- export const GL_STATUS_BRAND_TEXT_COLOR_FOCUS = '#cbbbf2'; // Used for the text of a brand related status item in the focus state.
607
- export const GL_STATUS_BRAND_TEXT_COLOR_ACTIVE = '#e1d8f9'; // Used for the text of a brand related status item in the active state.
608
- export const GL_STATUS_BRAND_ICON_COLOR_DEFAULT = '#7b58cf'; // Used for the icon of a brand related status item when static or the default state when linked.
609
- export const GL_STATUS_BRAND_ICON_COLOR_HOVER = '#9475db'; // Used for the icon of a brand related status item in the hover state.
610
- export const GL_STATUS_BRAND_ICON_COLOR_FOCUS = '#9475db'; // Used for the icon of a brand related status item in the focus state.
611
- export const GL_STATUS_BRAND_ICON_COLOR_ACTIVE = '#ac93e6'; // Used for the icon of a brand related status item in the active state.
612
+ export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f'; // Used for the background of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
613
+ export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3'; // Used for the text of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
614
+ export const GL_STATUS_NEUTRAL_ICON_COLOR = '#89888d'; // Used for the icon of a neutral status item when the status is neither positive nor negative, or when indicating a special but stable state.
615
+ export const GL_STATUS_INFO_BACKGROUND_COLOR = '#064787'; // Used for the background of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
616
+ export const GL_STATUS_INFO_TEXT_COLOR = '#9dc7f1'; // Used for the text of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
617
+ export const GL_STATUS_INFO_ICON_COLOR = '#428fdc'; // Used for the icon of an informational status item when indicating a noteworthy ongoing condition or a state of active progress.
618
+ export const GL_STATUS_SUCCESS_BACKGROUND_COLOR = '#0d532a'; // Used for the background of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
619
+ export const GL_STATUS_SUCCESS_TEXT_COLOR = '#91d4a8'; // Used for the text of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
620
+ export const GL_STATUS_SUCCESS_ICON_COLOR = '#2da160'; // Used for the icon of a success status item when indicating a positive outcome, completion, or desired state. Clearly conveys a positive connotation.
621
+ export const GL_STATUS_WARNING_BACKGROUND_COLOR = '#703800'; // Used for the background of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
622
+ export const GL_STATUS_WARNING_TEXT_COLOR = '#e9be74'; // Used for the text of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
623
+ export const GL_STATUS_WARNING_ICON_COLOR = '#c17d10'; // Used for the icon of a warning status item when indicating a state that requires heightened awareness or caution, but is not necessarily problematic. Represents a state that warrants extra attention or care when interacting with the item.
624
+ export const GL_STATUS_DANGER_BACKGROUND_COLOR = '#8d1300'; // Used for the background of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
625
+ export const GL_STATUS_DANGER_TEXT_COLOR = '#fcb5aa'; // Used for the text of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
626
+ export const GL_STATUS_DANGER_ICON_COLOR = '#ec5941'; // Used for the icon of a danger status item when indicating a critical or severely problematic current state. Clearly conveys a negative connotation, representing a serious, ongoing issue or undesired condition.
627
+ export const GL_STATUS_BRAND_BACKGROUND_COLOR = '#2f2a6b'; // Used for the background of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
628
+ export const GL_STATUS_BRAND_TEXT_COLOR = '#ac93e6'; // Used for the text of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
629
+ export const GL_STATUS_BRAND_ICON_COLOR = '#7b58cf'; // Used for the icon of a brand-related status item when highlighting the state of unique features or elements specific to the GitLab brand identity. Helps distinguish and emphasize brand-specific elements within the interface.
612
630
  export const GL_TEXT_PRIMARY = '#ececef'; // Use text.color.default instead.
613
631
  export const GL_TEXT_SECONDARY = '#89888d'; // Use text.color.subtle instead.
614
632
  export const GL_TEXT_TERTIARY = '#737278'; // Use text.color.disabled instead.