@gitlab/ui 87.8.0 → 88.1.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 (30) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/dist/index.css +2 -2
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +124 -5
  5. package/dist/tokens/build/js/tokens.js +124 -5
  6. package/dist/tokens/css/tokens.css +123 -4
  7. package/dist/tokens/css/tokens.dark.css +123 -4
  8. package/dist/tokens/js/tokens.dark.js +123 -4
  9. package/dist/tokens/js/tokens.js +123 -4
  10. package/dist/tokens/json/tokens.dark.json +2904 -32
  11. package/dist/tokens/json/tokens.json +2904 -32
  12. package/dist/tokens/scss/_tokens.dark.scss +123 -4
  13. package/dist/tokens/scss/_tokens.scss +123 -4
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +123 -4
  15. package/package.json +3 -3
  16. package/src/components/base/button/button.scss +273 -258
  17. package/src/components/base/keyset_pagination/keyset_pagination.scss +0 -7
  18. package/src/components/base/search_box_by_click/search_box_by_click.scss +2 -3
  19. package/src/components/base/tooltip/tooltip.scss +6 -6
  20. package/src/tokens/build/css/tokens.css +123 -4
  21. package/src/tokens/build/css/tokens.dark.css +123 -4
  22. package/src/tokens/build/js/tokens.dark.js +123 -4
  23. package/src/tokens/build/js/tokens.js +123 -4
  24. package/src/tokens/build/json/tokens.dark.json +2904 -32
  25. package/src/tokens/build/json/tokens.json +2904 -32
  26. package/src/tokens/build/scss/_tokens.dark.scss +123 -4
  27. package/src/tokens/build/scss/_tokens.scss +123 -4
  28. package/src/tokens/build/scss/_tokens_custom_properties.scss +123 -4
  29. package/src/tokens/contextual/button.tokens.json +883 -0
  30. package/src/tokens/feedback.tokens.json +13 -19
package/dist/tokens/scss/_tokens.dark.scss CHANGED
@@ -466,10 +466,10 @@ $gl-feedback-info-background-color: $gl-color-blue-900; // Used for the backgrou
466
466
  $gl-feedback-neutral-icon-color: $gl-color-neutral-300; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
467
467
  $gl-feedback-neutral-text-color: $gl-color-neutral-200; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
468
468
  $gl-feedback-neutral-background-color: $gl-color-neutral-900; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
469
- $gl-feedback-link-color-strong: $gl-color-blue-700; // Used for a link on a strong feedback background.
470
- $gl-feedback-icon-color-strong: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
471
- $gl-feedback-text-color-strong: $gl-color-neutral-900; // Used for text on a strong feedback background.
472
- $gl-feedback-background-color-strong: $gl-color-neutral-10; // Used for a background associated with feedback like a tooltip or toast message.
469
+ $gl-feedback-strong-link-color: $gl-color-blue-700; // Used for a link on a strong feedback background.
470
+ $gl-feedback-strong-icon-color: $gl-color-neutral-900; // Used for an icon on a strong feedback background.
471
+ $gl-feedback-strong-text-color: $gl-color-neutral-900; // Used for text on a strong feedback background.
472
+ $gl-feedback-strong-background-color: $gl-color-neutral-10; // Used for a background associated with strong feedback like a tooltip or toast message.
473
473
  $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
474
474
  $gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbox and radio button state indicators.
475
475
  $gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
@@ -507,6 +507,61 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
507
507
  $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
508
508
  $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
509
509
  $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
510
+ $gl-button-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled button.
511
+ $gl-button-disabled-background-color: $gl-color-neutral-950; // Used for the background of a disabled button.
512
+ $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
513
+ $gl-button-selected-border-color-active: $gl-color-neutral-300; // Used for the border of a selected button in the active state.
514
+ $gl-button-selected-border-color-hover: $gl-color-neutral-500; // Used for the border of a selected button in the hover state.
515
+ $gl-button-selected-border-color-default: $gl-color-neutral-600; // Used for the border of a selected button in the default state.
516
+ $gl-button-dashed-border-color-active: $gl-color-neutral-300; // Used for the border of a dashed button in the active state.
517
+ $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
518
+ $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
519
+ $gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
520
+ $gl-button-danger-secondary-border-color-active: $gl-color-red-50; // Used for the border of an outlined danger (destructive) button in the active state.
521
+ $gl-button-danger-secondary-border-color-hover: $gl-color-red-200; // Used for the border of an outlined danger (destructive) button in the hover state.
522
+ $gl-button-danger-secondary-border-color-default: $gl-color-red-400; // Used for the border of an outlined danger (destructive) button in the default state.
523
+ $gl-button-danger-secondary-background-color-active: $gl-color-red-800; // Used for the background of an outlined danger (destructive) button in the active state.
524
+ $gl-button-danger-secondary-background-color-hover: $gl-color-red-900; // Used for the background of an outlined danger (destructive) button in the hover state.
525
+ $gl-button-danger-secondary-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined danger (destructive) button in the default state.
526
+ $gl-button-danger-secondary-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) button in the active state.
527
+ $gl-button-danger-secondary-foreground-color-hover: $gl-color-red-200; // Used for the foreground of a danger (destructive) button in the hover state.
528
+ $gl-button-danger-secondary-foreground-color-default: $gl-color-red-400; // Used for the foreground of a danger (destructive) button in the default state.
529
+ $gl-button-danger-primary-border-color-active: $gl-color-red-50; // Used for the border of a danger (destructive) primary button in the active state.
530
+ $gl-button-danger-primary-border-color-hover: $gl-color-red-100; // Used for the border of a danger (destructive) primary button in the hover state.
531
+ $gl-button-danger-primary-border-color-default: $gl-color-red-300; // Used for the border of a danger (destructive) primary button in the default state.
532
+ $gl-button-danger-primary-background-color-active: $gl-color-red-100; // Used for the background of a danger (destructive) primary button in the active state.
533
+ $gl-button-danger-primary-background-color-hover: $gl-color-red-300; // Used for the background of a danger (destructive) primary button in the hover state.
534
+ $gl-button-danger-primary-background-color-default: $gl-color-red-400; // Used for the background of a danger (destructive) primary button in the default state.
535
+ $gl-button-danger-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a danger (destructive) primary button in the default state.
536
+ $gl-button-confirm-tertiary-background-color-active: $gl-action-confirm-background-color-active; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
537
+ $gl-button-confirm-tertiary-background-color-hover: $gl-action-confirm-background-color-hover; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
538
+ $gl-button-confirm-tertiary-background-color-default: $gl-action-confirm-background-color-default; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
539
+ $gl-button-confirm-secondary-border-color-active: $gl-color-blue-50; // Used for the border of an outlined confirm (positive) button in the active state.
540
+ $gl-button-confirm-secondary-border-color-hover: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) button in the hover state.
541
+ $gl-button-confirm-secondary-border-color-default: $gl-color-blue-400; // Used for the border of an outlined confirm (positive) button in the default state.
542
+ $gl-button-confirm-secondary-background-color-active: $gl-color-blue-800; // Used for the background of an outlined confirm (positive) button in the active state.
543
+ $gl-button-confirm-secondary-background-color-hover: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) button in the hover state.
544
+ $gl-button-confirm-secondary-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined confirm (positive) button in the default state.
545
+ $gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-50; // Used for the foreground of a confirm (positive) button in the active state.
546
+ $gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-200; // Used for the foreground of a confirm (positive) button in the hover state.
547
+ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-400; // Used for the foreground of a confirm (positive) button in the default state.
548
+ $gl-button-confirm-primary-border-color-active: $gl-color-blue-50; // Used for the border of a confirm (positive) primary button in the active state.
549
+ $gl-button-confirm-primary-border-color-hover: $gl-color-blue-100; // Used for the border of a confirm (positive) primary button in the hover state.
550
+ $gl-button-confirm-primary-border-color-default: $gl-color-blue-300; // Used for the border of a confirm (positive) primary button in the default state.
551
+ $gl-button-confirm-primary-background-color-active: $gl-color-blue-200; // Used for the background of a confirm (positive) primary button in the active state.
552
+ $gl-button-confirm-primary-background-color-hover: $gl-color-blue-300; // Used for the background of a confirm (positive) primary button in the hover state.
553
+ $gl-button-confirm-primary-background-color-default: $gl-color-blue-400; // Used for the background of a confirm (positive) primary button in the default state.
554
+ $gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
555
+ $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
556
+ $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
557
+ $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
558
+ $gl-button-default-primary-border-color-active: $gl-color-neutral-300; // Used for the border of an default primary button in the active state.
559
+ $gl-button-default-primary-border-color-hover: $gl-color-neutral-500; // Used for the border of an default primary button in the hover state.
560
+ $gl-button-default-primary-border-color-default: $gl-color-neutral-700; // Used for the border of an default primary button in the default state.
561
+ $gl-button-default-primary-background-color-active: $gl-color-neutral-800; // Used for the background of an default primary button in the active state.
562
+ $gl-button-default-primary-background-color-hover: $gl-color-neutral-900; // Used for the background of an default primary button in the hover state.
563
+ $gl-button-default-primary-background-color-default: $gl-color-neutral-900; // Used for the background of an default primary button in the default state.
564
+ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of a default primary button in the default state.
510
565
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
511
566
  $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
512
567
  $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
@@ -609,6 +664,47 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the for
609
664
  $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
610
665
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
611
666
  $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
667
+ $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
668
+ $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
669
+ $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
670
+ $gl-button-selected-background-color-default: $gl-button-default-primary-background-color-default; // Used for the background of a selected button in the default state.
671
+ $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
672
+ $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
673
+ $gl-button-dashed-border-color-default: $gl-border-color-strong; // Used for the border of a dashed button in the default state.
674
+ $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
675
+ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-color-focus; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
676
+ $gl-button-danger-tertiary-foreground-color-active: $gl-action-danger-foreground-color-active; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
677
+ $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-color-hover; // Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.
678
+ $gl-button-danger-tertiary-foreground-color-default: $gl-action-danger-foreground-color-default; // Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.
679
+ $gl-button-danger-secondary-border-color-focus: $gl-button-danger-secondary-border-color-hover; // Used for the border of an outlined danger (destructive) button in the focus state.
680
+ $gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
681
+ $gl-button-danger-secondary-foreground-color-focus: $gl-button-danger-secondary-foreground-color-hover; // Used for the foreground of a danger (destructive) button in the focus state.
682
+ $gl-button-danger-primary-border-color-focus: $gl-button-danger-primary-border-color-hover; // Used for the border of a danger (destructive) primary button in the focus state.
683
+ $gl-button-danger-primary-background-color-focus: $gl-button-danger-primary-background-color-hover; // Used for the background of a danger (destructive) primary button in the focus state.
684
+ $gl-button-danger-primary-foreground-color-active: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the active state.
685
+ $gl-button-danger-primary-foreground-color-focus: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the focus state.
686
+ $gl-button-danger-primary-foreground-color-hover: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the hover state.
687
+ $gl-button-confirm-tertiary-border-color-default: $gl-action-confirm-border-color-default; // Used for the border of a borderless, tertiary confirm (positive) button in the default state.
688
+ $gl-button-confirm-tertiary-background-color-focus: $gl-action-confirm-background-color-focus; // Used for the background of a borderless, tertiary confirm (positive) button in the focus state.
689
+ $gl-button-confirm-tertiary-foreground-color-active: $gl-action-confirm-foreground-color-active; // Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.
690
+ $gl-button-confirm-tertiary-foreground-color-hover: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
691
+ $gl-button-confirm-tertiary-foreground-color-default: $gl-action-confirm-foreground-color-default; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
692
+ $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-border-color-hover; // Used for the border of an outlined confirm (positive) button in the focus state.
693
+ $gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
694
+ $gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
695
+ $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
696
+ $gl-button-confirm-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
697
+ $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the active state.
698
+ $gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the focus state.
699
+ $gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
700
+ $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
701
+ $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
702
+ $gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
703
+ $gl-button-default-primary-border-color-focus: $gl-button-default-primary-border-color-hover; // Used for the border of an default primary button in the focus state.
704
+ $gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
705
+ $gl-button-default-primary-foreground-color-active: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the active state.
706
+ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the focus state.
707
+ $gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
612
708
  $gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
613
709
  $gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
614
710
  $gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
@@ -637,3 +733,26 @@ $gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default;
637
733
  $gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
638
734
  $gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
639
735
  $gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
736
+ $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
737
+ $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
738
+ $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
739
+ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foreground-color-hover; // Used for the foreground of a selected button in the hover state.
740
+ $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
741
+ $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
742
+ $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
743
+ $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
744
+ $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
745
+ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-active; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
746
+ $gl-button-danger-tertiary-border-color-focus: $gl-action-danger-border-color-focus; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
747
+ $gl-button-danger-tertiary-border-color-hover: $gl-action-danger-border-color-hover; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
748
+ $gl-button-danger-tertiary-foreground-color-focus: $gl-action-danger-foreground-color-focus; // Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state.
749
+ $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color-active; // Used for the border of a borderless, tertiary confirm (positive) button in the active state.
750
+ $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
751
+ $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
752
+ $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
753
+ $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
754
+ $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
755
+ $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
756
+ $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
757
+ $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
758
+ $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
package/dist/tokens/scss/_tokens.scss CHANGED
@@ -466,10 +466,10 @@ $gl-feedback-info-background-color: $gl-color-blue-50; // Used for the backgroun
466
466
  $gl-feedback-neutral-icon-color: $gl-color-neutral-600; // Used for the icon of a neutral feedback item when there isn't a specific meaning or urgency.
467
467
  $gl-feedback-neutral-text-color: $gl-color-neutral-700; // Used for the text of a neutral feedback item when there isn't a specific meaning or urgency.
468
468
  $gl-feedback-neutral-background-color: $gl-color-neutral-50; // Used for the background of a neutral feedback item when there isn't a specific meaning or urgency.
469
- $gl-feedback-link-color-strong: $gl-color-blue-300; // Used for a link on a strong feedback background.
470
- $gl-feedback-icon-color-strong: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
471
- $gl-feedback-text-color-strong: $gl-color-neutral-0; // Used for text on a strong feedback background.
472
- $gl-feedback-background-color-strong: $gl-color-neutral-950; // Used for a background associated with feedback like a tooltip or toast message.
469
+ $gl-feedback-strong-link-color: $gl-color-blue-300; // Used for a link on a strong feedback background.
470
+ $gl-feedback-strong-icon-color: $gl-color-neutral-0; // Used for an icon on a strong feedback background.
471
+ $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a strong feedback background.
472
+ $gl-feedback-strong-background-color: $gl-color-neutral-950; // Used for a background associated with strong feedback like a tooltip or toast message.
473
473
  $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
474
474
  $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
475
475
  $gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
@@ -507,6 +507,61 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
507
507
  $gl-label-light-button-background-color-hover: $gl-color-neutral-950; // Used for the label remove button background on a light background color in the hover state.
508
508
  $gl-label-light-button-background-color-default: $gl-color-alpha-0; // Used for the label remove button background on a light background color in the default state.
509
509
  $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
510
+ $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
511
+ $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
512
+ $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
513
+ $gl-button-selected-border-color-active: $gl-color-neutral-600; // Used for the border of a selected button in the active state.
514
+ $gl-button-selected-border-color-hover: $gl-color-neutral-400; // Used for the border of a selected button in the hover state.
515
+ $gl-button-selected-border-color-default: $gl-color-neutral-300; // Used for the border of a selected button in the default state.
516
+ $gl-button-dashed-border-color-active: $gl-color-neutral-600; // Used for the border of a dashed button in the active state.
517
+ $gl-button-danger-tertiary-background-color-active: $gl-action-danger-background-color-active; // Used for the background of a borderless, tertiary danger (destructive) button in the active state.
518
+ $gl-button-danger-tertiary-background-color-hover: $gl-action-danger-background-color-hover; // Used for the background of a borderless, tertiary danger (destructive) button in the hover state.
519
+ $gl-button-danger-tertiary-background-color-default: $gl-action-danger-background-color-default; // Used for the background of a borderless, tertiary danger (destructive) button in the default state.
520
+ $gl-button-danger-secondary-border-color-active: $gl-color-red-900; // Used for the border of an outlined danger (destructive) button in the active state.
521
+ $gl-button-danger-secondary-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) button in the hover state.
522
+ $gl-button-danger-secondary-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) button in the default state.
523
+ $gl-button-danger-secondary-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) button in the active state.
524
+ $gl-button-danger-secondary-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) button in the hover state.
525
+ $gl-button-danger-secondary-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined danger (destructive) button in the default state.
526
+ $gl-button-danger-secondary-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) button in the active state.
527
+ $gl-button-danger-secondary-foreground-color-hover: $gl-color-red-700; // Used for the foreground of a danger (destructive) button in the hover state.
528
+ $gl-button-danger-secondary-foreground-color-default: $gl-color-red-500; // Used for the foreground of a danger (destructive) button in the default state.
529
+ $gl-button-danger-primary-border-color-active: $gl-color-red-900; // Used for the border of a danger (destructive) primary button in the active state.
530
+ $gl-button-danger-primary-border-color-hover: $gl-color-red-800; // Used for the border of a danger (destructive) primary button in the hover state.
531
+ $gl-button-danger-primary-border-color-default: $gl-color-red-600; // Used for the border of a danger (destructive) primary button in the default state.
532
+ $gl-button-danger-primary-background-color-active: $gl-color-red-800; // Used for the background of a danger (destructive) primary button in the active state.
533
+ $gl-button-danger-primary-background-color-hover: $gl-color-red-600; // Used for the background of a danger (destructive) primary button in the hover state.
534
+ $gl-button-danger-primary-background-color-default: $gl-color-red-500; // Used for the background of a danger (destructive) primary button in the default state.
535
+ $gl-button-danger-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a danger (destructive) primary button in the default state.
536
+ $gl-button-confirm-tertiary-background-color-active: $gl-action-confirm-background-color-active; // Used for the background of a borderless, tertiary confirm (positive) button in the active state.
537
+ $gl-button-confirm-tertiary-background-color-hover: $gl-action-confirm-background-color-hover; // Used for the background of a borderless, tertiary confirm (positive) button in the hover state.
538
+ $gl-button-confirm-tertiary-background-color-default: $gl-action-confirm-background-color-default; // Used for the background of a borderless, tertiary confirm (positive) button in the default state.
539
+ $gl-button-confirm-secondary-border-color-active: $gl-color-blue-900; // Used for the border of an outlined confirm (positive) button in the active state.
540
+ $gl-button-confirm-secondary-border-color-hover: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) button in the hover state.
541
+ $gl-button-confirm-secondary-border-color-default: $gl-color-blue-500; // Used for the border of an outlined confirm (positive) button in the default state.
542
+ $gl-button-confirm-secondary-background-color-active: $gl-color-blue-100; // Used for the background of an outlined confirm (positive) button in the active state.
543
+ $gl-button-confirm-secondary-background-color-hover: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) button in the hover state.
544
+ $gl-button-confirm-secondary-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined confirm (positive) button in the default state.
545
+ $gl-button-confirm-secondary-foreground-color-active: $gl-color-blue-900; // Used for the foreground of a confirm (positive) button in the active state.
546
+ $gl-button-confirm-secondary-foreground-color-hover: $gl-color-blue-700; // Used for the foreground of a confirm (positive) button in the hover state.
547
+ $gl-button-confirm-secondary-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) button in the default state.
548
+ $gl-button-confirm-primary-border-color-active: $gl-color-blue-900; // Used for the border of a confirm (positive) primary button in the active state.
549
+ $gl-button-confirm-primary-border-color-hover: $gl-color-blue-800; // Used for the border of a confirm (positive) primary button in the hover state.
550
+ $gl-button-confirm-primary-border-color-default: $gl-color-blue-600; // Used for the border of a confirm (positive) primary button in the default state.
551
+ $gl-button-confirm-primary-background-color-active: $gl-color-blue-700; // Used for the background of a confirm (positive) primary button in the active state.
552
+ $gl-button-confirm-primary-background-color-hover: $gl-color-blue-600; // Used for the background of a confirm (positive) primary button in the hover state.
553
+ $gl-button-confirm-primary-background-color-default: $gl-color-blue-500; // Used for the background of a confirm (positive) primary button in the default state.
554
+ $gl-button-confirm-primary-foreground-color-default: $gl-color-neutral-0; // Used for the foreground of a confirm (positive) primary button in the default state.
555
+ $gl-button-default-tertiary-background-color-active: $gl-action-neutral-background-color-active; // Used for the background of a default borderless, tertiary button in the active state.
556
+ $gl-button-default-tertiary-background-color-hover: $gl-action-neutral-background-color-hover; // Used for the background of a default borderless, tertiary button in the hover state.
557
+ $gl-button-default-tertiary-background-color-default: $gl-action-neutral-background-color-default; // Used for the background of a default borderless, tertiary button in the default state.
558
+ $gl-button-default-primary-border-color-active: $gl-color-neutral-600; // Used for the border of an default primary button in the active state.
559
+ $gl-button-default-primary-border-color-hover: $gl-color-neutral-400; // Used for the border of an default primary button in the hover state.
560
+ $gl-button-default-primary-border-color-default: $gl-color-neutral-200; // Used for the border of an default primary button in the default state.
561
+ $gl-button-default-primary-background-color-active: $gl-color-neutral-100; // Used for the background of an default primary button in the active state.
562
+ $gl-button-default-primary-background-color-hover: $gl-color-neutral-50; // Used for the background of an default primary button in the hover state.
563
+ $gl-button-default-primary-background-color-default: $gl-color-neutral-0; // Used for the background of an default primary button in the default state.
564
+ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // Used for the foreground of a default primary button in the default state.
510
565
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
511
566
  $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
512
567
  $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
@@ -609,6 +664,47 @@ $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the for
609
664
  $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
610
665
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
611
666
  $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
667
+ $gl-button-selected-border-color-focus: $gl-button-selected-border-color-hover; // Used for the border of a selected button in the focus state.
668
+ $gl-button-selected-background-color-active: $gl-button-default-primary-background-color-active; // Used for the background of a selected button in the active state.
669
+ $gl-button-selected-background-color-hover: $gl-button-default-primary-background-color-hover; // Used for the background of a selected button in the hover state.
670
+ $gl-button-selected-background-color-default: $gl-button-default-primary-background-color-default; // Used for the background of a selected button in the default state.
671
+ $gl-button-selected-foreground-color-default: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a selected button in the default state.
672
+ $gl-button-link-text-color-default: $gl-text-color-link; // Used for the text of a link button in the default state.
673
+ $gl-button-dashed-border-color-default: $gl-border-color-strong; // Used for the border of a dashed button in the default state.
674
+ $gl-button-danger-tertiary-border-color-default: $gl-action-danger-border-color-default; // Used for the border of a borderless, tertiary danger (destructive) button in the default state.
675
+ $gl-button-danger-tertiary-background-color-focus: $gl-action-danger-background-color-focus; // Used for the background of a borderless, tertiary danger (destructive) button in the focus state.
676
+ $gl-button-danger-tertiary-foreground-color-active: $gl-action-danger-foreground-color-active; // Used for the foreground of a borderless, tertiary danger (destructive) button in the active state.
677
+ $gl-button-danger-tertiary-foreground-color-hover: $gl-action-danger-foreground-color-hover; // Used for the foreground of a borderless, tertiary danger (destructive) button in the hover state.
678
+ $gl-button-danger-tertiary-foreground-color-default: $gl-action-danger-foreground-color-default; // Used for the foreground of a borderless, tertiary danger (destructive) button in the default state.
679
+ $gl-button-danger-secondary-border-color-focus: $gl-button-danger-secondary-border-color-hover; // Used for the border of an outlined danger (destructive) button in the focus state.
680
+ $gl-button-danger-secondary-background-color-focus: $gl-button-danger-secondary-background-color-hover; // Used for the background of an outlined danger (destructive) button in the focus state.
681
+ $gl-button-danger-secondary-foreground-color-focus: $gl-button-danger-secondary-foreground-color-hover; // Used for the foreground of a danger (destructive) button in the focus state.
682
+ $gl-button-danger-primary-border-color-focus: $gl-button-danger-primary-border-color-hover; // Used for the border of a danger (destructive) primary button in the focus state.
683
+ $gl-button-danger-primary-background-color-focus: $gl-button-danger-primary-background-color-hover; // Used for the background of a danger (destructive) primary button in the focus state.
684
+ $gl-button-danger-primary-foreground-color-active: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the active state.
685
+ $gl-button-danger-primary-foreground-color-focus: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the focus state.
686
+ $gl-button-danger-primary-foreground-color-hover: $gl-button-danger-primary-foreground-color-default; // Used for the foreground of a danger (destructive) primary button in the hover state.
687
+ $gl-button-confirm-tertiary-border-color-default: $gl-action-confirm-border-color-default; // Used for the border of a borderless, tertiary confirm (positive) button in the default state.
688
+ $gl-button-confirm-tertiary-background-color-focus: $gl-action-confirm-background-color-focus; // Used for the background of a borderless, tertiary confirm (positive) button in the focus state.
689
+ $gl-button-confirm-tertiary-foreground-color-active: $gl-action-confirm-foreground-color-active; // Used for the foreground of a borderless, tertiary confirm (positive) button in the active state.
690
+ $gl-button-confirm-tertiary-foreground-color-hover: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a borderless, tertiary confirm (positive) button in the hover state.
691
+ $gl-button-confirm-tertiary-foreground-color-default: $gl-action-confirm-foreground-color-default; // Used for the foreground of a borderless, tertiary confirm (positive) button in the default state.
692
+ $gl-button-confirm-secondary-border-color-focus: $gl-button-confirm-secondary-border-color-hover; // Used for the border of an outlined confirm (positive) button in the focus state.
693
+ $gl-button-confirm-secondary-background-color-focus: $gl-button-confirm-secondary-background-color-hover; // Used for the background of an outlined confirm (positive) button in the focus state.
694
+ $gl-button-confirm-secondary-foreground-color-focus: $gl-button-confirm-secondary-foreground-color-hover; // Used for the foreground of a confirm (positive) button in the focus state.
695
+ $gl-button-confirm-primary-border-color-focus: $gl-button-confirm-primary-border-color-hover; // Used for the border of a confirm (positive) primary button in the focus state.
696
+ $gl-button-confirm-primary-background-color-focus: $gl-button-confirm-primary-background-color-hover; // Used for the background of a confirm (positive) primary button in the focus state.
697
+ $gl-button-confirm-primary-foreground-color-active: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the active state.
698
+ $gl-button-confirm-primary-foreground-color-focus: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the focus state.
699
+ $gl-button-confirm-primary-foreground-color-hover: $gl-button-confirm-primary-foreground-color-default; // Used for the foreground of a confirm (positive) primary button in the hover state.
700
+ $gl-button-default-tertiary-border-color-default: $gl-action-neutral-border-color-default; // Used for the border of a default borderless, tertiary button in the default state.
701
+ $gl-button-default-tertiary-background-color-focus: $gl-action-neutral-background-color-focus; // Used for the background of a default borderless, tertiary button in the focus state.
702
+ $gl-button-default-tertiary-foreground-color-default: $gl-action-neutral-foreground-color-default; // Used for the foreground of a default borderless, tertiary button in the default state.
703
+ $gl-button-default-primary-border-color-focus: $gl-button-default-primary-border-color-hover; // Used for the border of an default primary button in the focus state.
704
+ $gl-button-default-primary-background-color-focus: $gl-button-default-primary-background-color-hover; // Used for the background of an default primary button in the focus state.
705
+ $gl-button-default-primary-foreground-color-active: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the active state.
706
+ $gl-button-default-primary-foreground-color-focus: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the focus state.
707
+ $gl-button-default-primary-foreground-color-hover: $gl-button-default-primary-foreground-color-default; // Used for the foreground of a default primary button in the hover state.
612
708
  $gl-badge-tier-icon-color-focus: $gl-badge-tier-icon-color-hover; // Used for the icon of a tier related badge in the focus state.
613
709
  $gl-badge-tier-text-color-focus: $gl-badge-tier-text-color-hover; // Used for the text of a tier related badge in the focus state.
614
710
  $gl-badge-danger-icon-color-focus: $gl-badge-danger-icon-color-hover; // Used for the icon of a danger (critical) badge in the focus state.
@@ -637,3 +733,26 @@ $gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default;
637
733
  $gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
638
734
  $gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
639
735
  $gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
736
+ $gl-button-selected-background-color-focus: $gl-button-default-primary-background-color-focus; // Used for the background of a selected button in the focus state.
737
+ $gl-button-selected-foreground-color-active: $gl-button-default-primary-foreground-color-active; // Used for the foreground of a selected button in the active state.
738
+ $gl-button-selected-foreground-color-focus: $gl-button-default-primary-foreground-color-focus; // Used for the foreground of a selected button in the focus state.
739
+ $gl-button-selected-foreground-color-hover: $gl-button-default-primary-foreground-color-hover; // Used for the foreground of a selected button in the hover state.
740
+ $gl-button-link-text-color-active: $gl-button-link-text-color-default; // Used for the text of a link button in the active state.
741
+ $gl-button-link-text-color-focus: $gl-button-link-text-color-default; // Used for the text of a link button in the focus state.
742
+ $gl-button-link-text-color-hover: $gl-button-link-text-color-default; // Used for the text of a link button in the hover state.
743
+ $gl-button-dashed-border-color-focus: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the focus state.
744
+ $gl-button-dashed-border-color-hover: $gl-button-dashed-border-color-default; // Used for the border of a dashed button in the hover state.
745
+ $gl-button-danger-tertiary-border-color-active: $gl-action-danger-border-color-active; // Used for the border of a borderless, tertiary danger (destructive) button in the active state.
746
+ $gl-button-danger-tertiary-border-color-focus: $gl-action-danger-border-color-focus; // Used for the border of a borderless, tertiary danger (destructive) button in the focus state.
747
+ $gl-button-danger-tertiary-border-color-hover: $gl-action-danger-border-color-hover; // Used for the border of a borderless, tertiary danger (destructive) button in the hover state.
748
+ $gl-button-danger-tertiary-foreground-color-focus: $gl-action-danger-foreground-color-focus; // Used for the foreground of a borderless, tertiary danger (destructive) button in the focus state.
749
+ $gl-button-confirm-tertiary-border-color-active: $gl-action-confirm-border-color-active; // Used for the border of a borderless, tertiary confirm (positive) button in the active state.
750
+ $gl-button-confirm-tertiary-border-color-focus: $gl-action-confirm-border-color-focus; // Used for the border of a borderless, tertiary confirm (positive) button in the focus state.
751
+ $gl-button-confirm-tertiary-border-color-hover: $gl-action-confirm-border-color-hover; // Used for the border of a borderless, tertiary confirm (positive) button in the hover state.
752
+ $gl-button-confirm-tertiary-foreground-color-focus: $gl-action-confirm-foreground-color-focus; // Used for the foreground of a borderless, tertiary confirm (positive) button in the focus state.
753
+ $gl-button-default-tertiary-border-color-active: $gl-action-neutral-border-color-active; // Used for the border of a default borderless, tertiary button in the active state.
754
+ $gl-button-default-tertiary-border-color-focus: $gl-action-neutral-border-color-focus; // Used for the border of a default borderless, tertiary button in the focus state.
755
+ $gl-button-default-tertiary-border-color-hover: $gl-action-neutral-border-color-hover; // Used for the border of a default borderless, tertiary button in the hover state.
756
+ $gl-button-default-tertiary-foreground-color-active: $gl-action-neutral-foreground-color-active; // Used for the foreground of a default borderless, tertiary button in the active state.
757
+ $gl-button-default-tertiary-foreground-color-focus: $gl-action-neutral-foreground-color-focus; // Used for the foreground of a default borderless, tertiary button in the focus state.
758
+ $gl-button-default-tertiary-foreground-color-hover: $gl-action-neutral-foreground-color-hover; // Used for the foreground of a default borderless, tertiary button in the hover state.
package/dist/tokens/scss/_tokens_custom_properties.scss CHANGED
@@ -364,6 +364,125 @@ $gl-badge-tier-icon-color-active: var(--gl-badge-tier-icon-color-active);
364
364
  $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
365
365
  $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
366
366
  $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
367
+ $gl-button-default-primary-foreground-color-default: var(--gl-button-default-primary-foreground-color-default);
368
+ $gl-button-default-primary-foreground-color-hover: var(--gl-button-default-primary-foreground-color-hover);
369
+ $gl-button-default-primary-foreground-color-focus: var(--gl-button-default-primary-foreground-color-focus);
370
+ $gl-button-default-primary-foreground-color-active: var(--gl-button-default-primary-foreground-color-active);
371
+ $gl-button-default-primary-background-color-default: var(--gl-button-default-primary-background-color-default);
372
+ $gl-button-default-primary-background-color-hover: var(--gl-button-default-primary-background-color-hover);
373
+ $gl-button-default-primary-background-color-focus: var(--gl-button-default-primary-background-color-focus);
374
+ $gl-button-default-primary-background-color-active: var(--gl-button-default-primary-background-color-active);
375
+ $gl-button-default-primary-border-color-default: var(--gl-button-default-primary-border-color-default);
376
+ $gl-button-default-primary-border-color-hover: var(--gl-button-default-primary-border-color-hover);
377
+ $gl-button-default-primary-border-color-focus: var(--gl-button-default-primary-border-color-focus);
378
+ $gl-button-default-primary-border-color-active: var(--gl-button-default-primary-border-color-active);
379
+ $gl-button-default-tertiary-foreground-color-default: var(--gl-button-default-tertiary-foreground-color-default);
380
+ $gl-button-default-tertiary-foreground-color-hover: var(--gl-button-default-tertiary-foreground-color-hover);
381
+ $gl-button-default-tertiary-foreground-color-focus: var(--gl-button-default-tertiary-foreground-color-focus);
382
+ $gl-button-default-tertiary-foreground-color-active: var(--gl-button-default-tertiary-foreground-color-active);
383
+ $gl-button-default-tertiary-background-color-default: var(--gl-button-default-tertiary-background-color-default);
384
+ $gl-button-default-tertiary-background-color-hover: var(--gl-button-default-tertiary-background-color-hover);
385
+ $gl-button-default-tertiary-background-color-focus: var(--gl-button-default-tertiary-background-color-focus);
386
+ $gl-button-default-tertiary-background-color-active: var(--gl-button-default-tertiary-background-color-active);
387
+ $gl-button-default-tertiary-border-color-default: var(--gl-button-default-tertiary-border-color-default);
388
+ $gl-button-default-tertiary-border-color-hover: var(--gl-button-default-tertiary-border-color-hover);
389
+ $gl-button-default-tertiary-border-color-focus: var(--gl-button-default-tertiary-border-color-focus);
390
+ $gl-button-default-tertiary-border-color-active: var(--gl-button-default-tertiary-border-color-active);
391
+ $gl-button-confirm-primary-foreground-color-default: var(--gl-button-confirm-primary-foreground-color-default);
392
+ $gl-button-confirm-primary-foreground-color-hover: var(--gl-button-confirm-primary-foreground-color-hover);
393
+ $gl-button-confirm-primary-foreground-color-focus: var(--gl-button-confirm-primary-foreground-color-focus);
394
+ $gl-button-confirm-primary-foreground-color-active: var(--gl-button-confirm-primary-foreground-color-active);
395
+ $gl-button-confirm-primary-background-color-default: var(--gl-button-confirm-primary-background-color-default);
396
+ $gl-button-confirm-primary-background-color-hover: var(--gl-button-confirm-primary-background-color-hover);
397
+ $gl-button-confirm-primary-background-color-focus: var(--gl-button-confirm-primary-background-color-focus);
398
+ $gl-button-confirm-primary-background-color-active: var(--gl-button-confirm-primary-background-color-active);
399
+ $gl-button-confirm-primary-border-color-default: var(--gl-button-confirm-primary-border-color-default);
400
+ $gl-button-confirm-primary-border-color-hover: var(--gl-button-confirm-primary-border-color-hover);
401
+ $gl-button-confirm-primary-border-color-focus: var(--gl-button-confirm-primary-border-color-focus);
402
+ $gl-button-confirm-primary-border-color-active: var(--gl-button-confirm-primary-border-color-active);
403
+ $gl-button-confirm-secondary-foreground-color-default: var(--gl-button-confirm-secondary-foreground-color-default);
404
+ $gl-button-confirm-secondary-foreground-color-hover: var(--gl-button-confirm-secondary-foreground-color-hover);
405
+ $gl-button-confirm-secondary-foreground-color-focus: var(--gl-button-confirm-secondary-foreground-color-focus);
406
+ $gl-button-confirm-secondary-foreground-color-active: var(--gl-button-confirm-secondary-foreground-color-active);
407
+ $gl-button-confirm-secondary-background-color-default: var(--gl-button-confirm-secondary-background-color-default);
408
+ $gl-button-confirm-secondary-background-color-hover: var(--gl-button-confirm-secondary-background-color-hover);
409
+ $gl-button-confirm-secondary-background-color-focus: var(--gl-button-confirm-secondary-background-color-focus);
410
+ $gl-button-confirm-secondary-background-color-active: var(--gl-button-confirm-secondary-background-color-active);
411
+ $gl-button-confirm-secondary-border-color-default: var(--gl-button-confirm-secondary-border-color-default);
412
+ $gl-button-confirm-secondary-border-color-hover: var(--gl-button-confirm-secondary-border-color-hover);
413
+ $gl-button-confirm-secondary-border-color-focus: var(--gl-button-confirm-secondary-border-color-focus);
414
+ $gl-button-confirm-secondary-border-color-active: var(--gl-button-confirm-secondary-border-color-active);
415
+ $gl-button-confirm-tertiary-foreground-color-default: var(--gl-button-confirm-tertiary-foreground-color-default);
416
+ $gl-button-confirm-tertiary-foreground-color-hover: var(--gl-button-confirm-tertiary-foreground-color-hover);
417
+ $gl-button-confirm-tertiary-foreground-color-focus: var(--gl-button-confirm-tertiary-foreground-color-focus);
418
+ $gl-button-confirm-tertiary-foreground-color-active: var(--gl-button-confirm-tertiary-foreground-color-active);
419
+ $gl-button-confirm-tertiary-background-color-default: var(--gl-button-confirm-tertiary-background-color-default);
420
+ $gl-button-confirm-tertiary-background-color-hover: var(--gl-button-confirm-tertiary-background-color-hover);
421
+ $gl-button-confirm-tertiary-background-color-focus: var(--gl-button-confirm-tertiary-background-color-focus);
422
+ $gl-button-confirm-tertiary-background-color-active: var(--gl-button-confirm-tertiary-background-color-active);
423
+ $gl-button-confirm-tertiary-border-color-default: var(--gl-button-confirm-tertiary-border-color-default);
424
+ $gl-button-confirm-tertiary-border-color-hover: var(--gl-button-confirm-tertiary-border-color-hover);
425
+ $gl-button-confirm-tertiary-border-color-focus: var(--gl-button-confirm-tertiary-border-color-focus);
426
+ $gl-button-confirm-tertiary-border-color-active: var(--gl-button-confirm-tertiary-border-color-active);
427
+ $gl-button-danger-primary-foreground-color-default: var(--gl-button-danger-primary-foreground-color-default);
428
+ $gl-button-danger-primary-foreground-color-hover: var(--gl-button-danger-primary-foreground-color-hover);
429
+ $gl-button-danger-primary-foreground-color-focus: var(--gl-button-danger-primary-foreground-color-focus);
430
+ $gl-button-danger-primary-foreground-color-active: var(--gl-button-danger-primary-foreground-color-active);
431
+ $gl-button-danger-primary-background-color-default: var(--gl-button-danger-primary-background-color-default);
432
+ $gl-button-danger-primary-background-color-hover: var(--gl-button-danger-primary-background-color-hover);
433
+ $gl-button-danger-primary-background-color-focus: var(--gl-button-danger-primary-background-color-focus);
434
+ $gl-button-danger-primary-background-color-active: var(--gl-button-danger-primary-background-color-active);
435
+ $gl-button-danger-primary-border-color-default: var(--gl-button-danger-primary-border-color-default);
436
+ $gl-button-danger-primary-border-color-hover: var(--gl-button-danger-primary-border-color-hover);
437
+ $gl-button-danger-primary-border-color-focus: var(--gl-button-danger-primary-border-color-focus);
438
+ $gl-button-danger-primary-border-color-active: var(--gl-button-danger-primary-border-color-active);
439
+ $gl-button-danger-secondary-foreground-color-default: var(--gl-button-danger-secondary-foreground-color-default);
440
+ $gl-button-danger-secondary-foreground-color-hover: var(--gl-button-danger-secondary-foreground-color-hover);
441
+ $gl-button-danger-secondary-foreground-color-focus: var(--gl-button-danger-secondary-foreground-color-focus);
442
+ $gl-button-danger-secondary-foreground-color-active: var(--gl-button-danger-secondary-foreground-color-active);
443
+ $gl-button-danger-secondary-background-color-default: var(--gl-button-danger-secondary-background-color-default);
444
+ $gl-button-danger-secondary-background-color-hover: var(--gl-button-danger-secondary-background-color-hover);
445
+ $gl-button-danger-secondary-background-color-focus: var(--gl-button-danger-secondary-background-color-focus);
446
+ $gl-button-danger-secondary-background-color-active: var(--gl-button-danger-secondary-background-color-active);
447
+ $gl-button-danger-secondary-border-color-default: var(--gl-button-danger-secondary-border-color-default);
448
+ $gl-button-danger-secondary-border-color-hover: var(--gl-button-danger-secondary-border-color-hover);
449
+ $gl-button-danger-secondary-border-color-focus: var(--gl-button-danger-secondary-border-color-focus);
450
+ $gl-button-danger-secondary-border-color-active: var(--gl-button-danger-secondary-border-color-active);
451
+ $gl-button-danger-tertiary-foreground-color-default: var(--gl-button-danger-tertiary-foreground-color-default);
452
+ $gl-button-danger-tertiary-foreground-color-hover: var(--gl-button-danger-tertiary-foreground-color-hover);
453
+ $gl-button-danger-tertiary-foreground-color-focus: var(--gl-button-danger-tertiary-foreground-color-focus);
454
+ $gl-button-danger-tertiary-foreground-color-active: var(--gl-button-danger-tertiary-foreground-color-active);
455
+ $gl-button-danger-tertiary-background-color-default: var(--gl-button-danger-tertiary-background-color-default);
456
+ $gl-button-danger-tertiary-background-color-hover: var(--gl-button-danger-tertiary-background-color-hover);
457
+ $gl-button-danger-tertiary-background-color-focus: var(--gl-button-danger-tertiary-background-color-focus);
458
+ $gl-button-danger-tertiary-background-color-active: var(--gl-button-danger-tertiary-background-color-active);
459
+ $gl-button-danger-tertiary-border-color-default: var(--gl-button-danger-tertiary-border-color-default);
460
+ $gl-button-danger-tertiary-border-color-hover: var(--gl-button-danger-tertiary-border-color-hover);
461
+ $gl-button-danger-tertiary-border-color-focus: var(--gl-button-danger-tertiary-border-color-focus);
462
+ $gl-button-danger-tertiary-border-color-active: var(--gl-button-danger-tertiary-border-color-active);
463
+ $gl-button-dashed-border-color-default: var(--gl-button-dashed-border-color-default);
464
+ $gl-button-dashed-border-color-hover: var(--gl-button-dashed-border-color-hover);
465
+ $gl-button-dashed-border-color-focus: var(--gl-button-dashed-border-color-focus);
466
+ $gl-button-dashed-border-color-active: var(--gl-button-dashed-border-color-active);
467
+ $gl-button-link-text-color-default: var(--gl-button-link-text-color-default);
468
+ $gl-button-link-text-color-hover: var(--gl-button-link-text-color-hover);
469
+ $gl-button-link-text-color-focus: var(--gl-button-link-text-color-focus);
470
+ $gl-button-link-text-color-active: var(--gl-button-link-text-color-active);
471
+ $gl-button-selected-foreground-color-default: var(--gl-button-selected-foreground-color-default);
472
+ $gl-button-selected-foreground-color-hover: var(--gl-button-selected-foreground-color-hover);
473
+ $gl-button-selected-foreground-color-focus: var(--gl-button-selected-foreground-color-focus);
474
+ $gl-button-selected-foreground-color-active: var(--gl-button-selected-foreground-color-active);
475
+ $gl-button-selected-background-color-default: var(--gl-button-selected-background-color-default);
476
+ $gl-button-selected-background-color-hover: var(--gl-button-selected-background-color-hover);
477
+ $gl-button-selected-background-color-focus: var(--gl-button-selected-background-color-focus);
478
+ $gl-button-selected-background-color-active: var(--gl-button-selected-background-color-active);
479
+ $gl-button-selected-border-color-default: var(--gl-button-selected-border-color-default);
480
+ $gl-button-selected-border-color-hover: var(--gl-button-selected-border-color-hover);
481
+ $gl-button-selected-border-color-focus: var(--gl-button-selected-border-color-focus);
482
+ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-active);
483
+ $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
484
+ $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
485
+ $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
367
486
  $gl-label-light-text-color: var(--gl-label-light-text-color);
368
487
  $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
369
488
  $gl-label-light-button-background-color-hover: var(--gl-label-light-button-background-color-hover);
@@ -568,10 +687,10 @@ $t-white-a-02: var(--t-white-a-02);
568
687
  $t-white-a-04: var(--t-white-a-04);
569
688
  $t-white-a-06: var(--t-white-a-06);
570
689
  $t-white-a-08: var(--t-white-a-08);
571
- $gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
572
- $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
573
- $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
574
- $gl-feedback-link-color-strong: var(--gl-feedback-link-color-strong);
690
+ $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
691
+ $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
692
+ $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);
693
+ $gl-feedback-strong-link-color: var(--gl-feedback-strong-link-color);
575
694
  $gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
576
695
  $gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color);
577
696
  $gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-color);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "87.8.0",
3
+ "version": "88.1.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -108,7 +108,7 @@
108
108
  "@babel/core": "^7.25.2",
109
109
  "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
110
110
  "@babel/plugin-proposal-optional-chaining": "^7.21.0",
111
- "@babel/preset-env": "^7.25.2",
111
+ "@babel/preset-env": "^7.25.3",
112
112
  "@babel/preset-react": "^7.24.7",
113
113
  "@cypress/grep": "^4.0.1",
114
114
  "@gitlab/eslint-plugin": "19.6.0",
@@ -148,7 +148,7 @@
148
148
  "babel-loader": "^8.0.5",
149
149
  "bootstrap": "4.6.2",
150
150
  "cobertura-merge": "^1.0.4",
151
- "cypress": "13.13.1",
151
+ "cypress": "13.13.2",
152
152
  "cypress-axe": "^1.4.0",
153
153
  "cypress-real-events": "^1.11.0",
154
154
  "dompurify": "^3.1.2",