@gitlab/ui 89.1.0 → 89.3.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 (33) hide show
  1. package/CHANGELOG.md +20 -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 +105 -101
  5. package/dist/tokens/build/js/tokens.js +15 -11
  6. package/dist/tokens/css/tokens.css +13 -9
  7. package/dist/tokens/css/tokens.dark.css +75 -71
  8. package/dist/tokens/js/tokens.dark.js +104 -100
  9. package/dist/tokens/js/tokens.js +14 -10
  10. package/dist/tokens/json/tokens.dark.json +265 -186
  11. package/dist/tokens/json/tokens.json +175 -96
  12. package/dist/tokens/scss/_tokens.dark.scss +75 -71
  13. package/dist/tokens/scss/_tokens.scss +13 -9
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +4 -0
  15. package/dist/tokens/tailwind/tokens.cjs +1 -0
  16. package/package.json +3 -3
  17. package/src/components/base/badge/badge.scss +65 -32
  18. package/src/components/base/datepicker/datepicker.scss +7 -2
  19. package/src/components/base/toggle/toggle.scss +8 -5
  20. package/src/tokens/build/css/tokens.css +13 -9
  21. package/src/tokens/build/css/tokens.dark.css +75 -71
  22. package/src/tokens/build/js/tokens.dark.js +104 -100
  23. package/src/tokens/build/js/tokens.js +14 -10
  24. package/src/tokens/build/json/tokens.dark.json +265 -186
  25. package/src/tokens/build/json/tokens.json +175 -96
  26. package/src/tokens/build/scss/_tokens.dark.scss +75 -71
  27. package/src/tokens/build/scss/_tokens.scss +13 -9
  28. package/src/tokens/build/scss/_tokens_custom_properties.scss +4 -0
  29. package/src/tokens/build/tailwind/tokens.cjs +1 -0
  30. package/src/tokens/color.alpha.tokens.json +4 -0
  31. package/src/tokens/contextual/badge.tokens.json +69 -69
  32. package/src/tokens/contextual/datepicker.tokens.json +10 -0
  33. package/src/tokens/control.tokens.json +24 -17
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -404,6 +404,7 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
404
404
  $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
405
405
  $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
406
406
  $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
407
+ $gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
407
408
  $gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
408
409
  $gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
409
410
  $gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
@@ -477,23 +478,22 @@ $gl-feedback-strong-icon-color: $gl-color-neutral-900; // Used for an icon on a
477
478
  $gl-feedback-strong-text-color: $gl-color-neutral-900; // Used for text on a strong feedback background.
478
479
  $gl-feedback-strong-background-color: $gl-color-neutral-10; // Used for a background associated with strong feedback like a tooltip or toast message.
479
480
  $gl-control-indicator-color-disabled: $gl-color-neutral-400; // Used for disabled checkbox and radio button state indicators.
480
- $gl-control-indicator-color-selected: $gl-color-neutral-900; // Used for checkbox and radio button state indicators.
481
- $gl-control-placeholder-color: $gl-color-neutral-500; // Used for placeholder text within inputs.
482
- $gl-control-text-color-valid: $gl-color-green-400; // Used for the helper text when the input is valid.
483
- $gl-control-text-color-error: $gl-color-red-400; // Used for the helper text when the input is invalid.
481
+ $gl-control-indicator-color-selected: $gl-color-neutral-950; // Used for checkbox and radio button state indicators.
484
482
  $gl-control-border-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
485
483
  $gl-control-border-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
486
484
  $gl-control-border-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
487
- $gl-control-border-color-error: $gl-color-red-400; // Used for invalid form control (input, textarea) border.
485
+ $gl-control-border-color-error: $gl-color-red-300; // Used for invalid form control (input, textarea) border.
488
486
  $gl-control-border-color-disabled: $gl-color-neutral-800; // Used for disabled form control (input, radio button, checkbox, textarea) border.
489
487
  $gl-control-border-color-focus: $gl-color-neutral-50; // Used for form control (input, radio button, checkbox, textarea) border on focus.
490
488
  $gl-control-border-color-hover: $gl-color-neutral-300; // Used for form control (input, radio button, checkbox, textarea) border on hover.
491
489
  $gl-control-border-color-default: $gl-color-neutral-500; // Used for form control (input, radio button, checkbox, textarea) default border.
492
490
  $gl-control-background-color-selected-focus: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
493
491
  $gl-control-background-color-selected-hover: $gl-color-blue-200; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
494
- $gl-control-background-color-selected-default: $gl-color-blue-400; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
495
- $gl-control-background-color-disabled: $gl-color-neutral-950; // Used for disabled form control (checkbox, input, radio button, textarea) background.
496
- $gl-control-background-color-default: $gl-color-neutral-900; // Used for form control (input, radio button, checkbox, textarea) default background.
492
+ $gl-control-background-color-selected-default: $gl-color-blue-300; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
493
+ $gl-control-background-color-readonly: $gl-color-neutral-900; // Used for the background of static content that prepends or appends a text input.
494
+ $gl-control-background-color-concatenation: $gl-color-alpha-light-4; // Used for the background of static content that prepends or appends a text input.
495
+ $gl-control-background-color-disabled: $gl-color-alpha-light-4; // Used for disabled form control (checkbox, input, radio button, textarea) background.
496
+ $gl-control-background-color-default: $gl-color-alpha-dark-40; // Used for form control (input, radio button, checkbox, textarea) default background.
497
497
  $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
498
498
  $gl-spinner-segment-color-default: $gl-color-neutral-200; // Used for the animated segment of a loading spinner.
499
499
  $gl-spinner-track-color-light: $gl-color-neutral-800; // Used for the static track (background) of a loading spinner on a dark background.
@@ -513,6 +513,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
513
513
  $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.
514
514
  $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.
515
515
  $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
516
+ $gl-datepicker-background-color: $gl-color-neutral-900; // Used for the background color of datepicker.
516
517
  $gl-button-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled button.
517
518
  $gl-button-disabled-background-color: $gl-color-neutral-950; // Used for the background of a disabled button.
518
519
  $gl-button-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled button.
@@ -571,90 +572,90 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-50; // Us
571
572
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
572
573
  $gl-banner-promo-background-color: $gl-color-neutral-900; // Used as background for the default banner type.
573
574
  $gl-banner-intro-border-color: $gl-color-blue-600; // Used to compliment the info banner.
574
- $gl-badge-tier-icon-color-active: $gl-color-purple-300; // Used for the icon of a tier related badge in the active state.
575
- $gl-badge-tier-icon-color-hover: $gl-color-purple-400; // Used for the icon of a tier related badge in the hover state.
576
- $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
577
- $gl-badge-tier-text-color-active: $gl-color-purple-100; // Used for the text of a tier related badge in the active state.
578
- $gl-badge-tier-text-color-hover: $gl-color-purple-200; // Used for the text of a tier related badge in the hover state.
579
- $gl-badge-tier-text-color-default: $gl-color-purple-300; // Used for the text of a tier related badge when static or the default state when linked.
575
+ $gl-badge-tier-icon-color-active: $gl-color-purple-950; // Used for the icon of a tier related badge in the active state.
576
+ $gl-badge-tier-icon-color-hover: $gl-color-purple-950; // Used for the icon of a tier related badge in the hover state.
577
+ $gl-badge-tier-icon-color-default: $gl-color-purple-950; // Used for the icon of a tier related badge when static or the default state when linked.
578
+ $gl-badge-tier-text-color-active: $gl-color-purple-950; // Used for the text of a tier related badge in the active state.
579
+ $gl-badge-tier-text-color-hover: $gl-color-purple-950; // Used for the text of a tier related badge in the hover state.
580
+ $gl-badge-tier-text-color-default: $gl-color-purple-950; // Used for the text of a tier related badge when static or the default state when linked.
580
581
  $gl-badge-tier-border-color-active: $gl-color-alpha-0; // Used for the border of a tier related badge in the active state.
581
582
  $gl-badge-tier-border-color-focus: $gl-color-alpha-0; // Used for the border of a tier related badge in the focus state.
582
- $gl-badge-tier-border-color-hover: $gl-color-purple-800; // Used for the border of a tier related badge in the hover state.
583
+ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border of a tier related badge in the hover state.
583
584
  $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
584
- $gl-badge-tier-background-color-active: $gl-color-purple-800; // Used for the background of a tier related badge in the active state.
585
- $gl-badge-tier-background-color-default: $gl-color-purple-900; // Used for the background of a tier related badge when static or the default state when linked.
586
- $gl-badge-danger-icon-color-active: $gl-color-red-200; // Used for the icon of a danger badge in the active state.
587
- $gl-badge-danger-icon-color-hover: $gl-color-red-300; // Used for the icon of a danger badge in the hover state.
588
- $gl-badge-danger-icon-color-default: $gl-color-red-400; // Used for the icon of a danger badge when static or the default state when linked.
589
- $gl-badge-danger-text-color-active: $gl-color-red-50; // Used for the text of a danger badge in the active state.
590
- $gl-badge-danger-text-color-hover: $gl-color-red-100; // Used for the text of a danger badge in the hover state.
591
- $gl-badge-danger-text-color-default: $gl-color-red-200; // Used for the text of a danger badge when static or the default state when linked.
585
+ $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
586
+ $gl-badge-tier-background-color-default: $gl-color-purple-300; // Used for the background of a tier related badge when static or the default state when linked.
587
+ $gl-badge-danger-icon-color-active: $gl-color-red-950; // Used for the icon of a danger badge in the active state.
588
+ $gl-badge-danger-icon-color-hover: $gl-color-red-950; // Used for the icon of a danger badge in the hover state.
589
+ $gl-badge-danger-icon-color-default: $gl-color-red-950; // Used for the icon of a danger badge when static or the default state when linked.
590
+ $gl-badge-danger-text-color-active: $gl-color-red-950; // Used for the text of a danger badge in the active state.
591
+ $gl-badge-danger-text-color-hover: $gl-color-red-950; // Used for the text of a danger badge in the hover state.
592
+ $gl-badge-danger-text-color-default: $gl-color-red-950; // Used for the text of a danger badge when static or the default state when linked.
592
593
  $gl-badge-danger-border-color-active: $gl-color-alpha-0; // Used for the border of a danger badge in the active state.
593
594
  $gl-badge-danger-border-color-focus: $gl-color-alpha-0; // Used for the border of a danger badge in the focus state.
594
- $gl-badge-danger-border-color-hover: $gl-color-red-700; // Used for the border of a danger badge in the hover state.
595
+ $gl-badge-danger-border-color-hover: $gl-color-red-200; // Used for the border of a danger badge in the hover state.
595
596
  $gl-badge-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger badge when static or the default state when linked.
596
- $gl-badge-danger-background-color-active: $gl-color-red-700; // Used for the background of a danger badge in the active state.
597
- $gl-badge-danger-background-color-default: $gl-color-red-800; // Used for the background of a danger badge when static or the default state when linked.
598
- $gl-badge-warning-icon-color-active: $gl-color-orange-200; // Used for the icon of a warning badge in the active state.
599
- $gl-badge-warning-icon-color-hover: $gl-color-orange-300; // Used for the icon of a warning badge in the hover state.
600
- $gl-badge-warning-icon-color-default: $gl-color-orange-400; // Used for the icon of a warning badge when static or the default state when linked.
601
- $gl-badge-warning-text-color-active: $gl-color-orange-50; // Used for the text of a warning badge in the active state.
602
- $gl-badge-warning-text-color-hover: $gl-color-orange-100; // Used for the text of a warning badge in the hover state.
603
- $gl-badge-warning-text-color-default: $gl-color-orange-200; // Used for the text of a warning badge when static or the default state when linked.
597
+ $gl-badge-danger-background-color-active: $gl-color-red-200; // Used for the background of a danger badge in the active state.
598
+ $gl-badge-danger-background-color-default: $gl-color-red-300; // Used for the background of a danger badge when static or the default state when linked.
599
+ $gl-badge-warning-icon-color-active: $gl-color-orange-950; // Used for the icon of a warning badge in the active state.
600
+ $gl-badge-warning-icon-color-hover: $gl-color-orange-950; // Used for the icon of a warning badge in the hover state.
601
+ $gl-badge-warning-icon-color-default: $gl-color-orange-950; // Used for the icon of a warning badge when static or the default state when linked.
602
+ $gl-badge-warning-text-color-active: $gl-color-orange-950; // Used for the text of a warning badge in the active state.
603
+ $gl-badge-warning-text-color-hover: $gl-color-orange-950; // Used for the text of a warning badge in the hover state.
604
+ $gl-badge-warning-text-color-default: $gl-color-orange-950; // Used for the text of a warning badge when static or the default state when linked.
604
605
  $gl-badge-warning-border-color-active: $gl-color-alpha-0; // Used for the border of a warning badge in the active state.
605
606
  $gl-badge-warning-border-color-focus: $gl-color-alpha-0; // Used for the border of a warning badge in the focus state.
606
- $gl-badge-warning-border-color-hover: $gl-color-orange-700; // Used for the border of a warning badge in the hover state.
607
+ $gl-badge-warning-border-color-hover: $gl-color-orange-200; // Used for the border of a warning badge in the hover state.
607
608
  $gl-badge-warning-border-color-default: $gl-color-alpha-0; // Used for the border of a warning badge when static or the default state when linked.
608
- $gl-badge-warning-background-color-active: $gl-color-orange-700; // Used for the background of a warning badge in the active state.
609
- $gl-badge-warning-background-color-default: $gl-color-orange-800; // Used for the background of a warning badge when static or the default state when linked.
610
- $gl-badge-success-icon-color-active: $gl-color-green-200; // Used for the icon of a success badge in the active state.
611
- $gl-badge-success-icon-color-hover: $gl-color-green-300; // Used for the icon of a success badge in the hover state.
612
- $gl-badge-success-icon-color-default: $gl-color-green-400; // Used for the icon of a success badge when static or the default state when linked.
613
- $gl-badge-success-text-color-active: $gl-color-green-50; // Used for the text of a success badge in the active state.
614
- $gl-badge-success-text-color-hover: $gl-color-green-100; // Used for the text of a success badge in the hover state.
615
- $gl-badge-success-text-color-default: $gl-color-green-200; // Used for the text of a success badge when static or the default state when linked.
609
+ $gl-badge-warning-background-color-active: $gl-color-orange-200; // Used for the background of a warning badge in the active state.
610
+ $gl-badge-warning-background-color-default: $gl-color-orange-300; // Used for the background of a warning badge when static or the default state when linked.
611
+ $gl-badge-success-icon-color-active: $gl-color-green-950; // Used for the icon of a success badge in the active state.
612
+ $gl-badge-success-icon-color-hover: $gl-color-green-950; // Used for the icon of a success badge in the hover state.
613
+ $gl-badge-success-icon-color-default: $gl-color-green-950; // Used for the icon of a success badge when static or the default state when linked.
614
+ $gl-badge-success-text-color-active: $gl-color-green-950; // Used for the text of a success badge in the active state.
615
+ $gl-badge-success-text-color-hover: $gl-color-green-950; // Used for the text of a success badge in the hover state.
616
+ $gl-badge-success-text-color-default: $gl-color-green-950; // Used for the text of a success badge when static or the default state when linked.
616
617
  $gl-badge-success-border-color-active: $gl-color-alpha-0; // Used for the border of a success badge in the active state.
617
618
  $gl-badge-success-border-color-focus: $gl-color-alpha-0; // Used for the border of a success badge in the focus state.
618
- $gl-badge-success-border-color-hover: $gl-color-green-700; // Used for the border of a success badge in the hover state.
619
+ $gl-badge-success-border-color-hover: $gl-color-green-200; // Used for the border of a success badge in the hover state.
619
620
  $gl-badge-success-border-color-default: $gl-color-alpha-0; // Used for the border of a success badge when static or the default state when linked.
620
- $gl-badge-success-background-color-active: $gl-color-green-700; // Used for the background of a success badge in the active state.
621
- $gl-badge-success-background-color-default: $gl-color-green-800; // Used for the background of a success badge when static or the default state when linked.
622
- $gl-badge-info-icon-color-active: $gl-color-blue-200; // Used for the icon of an informational badge in the active state.
623
- $gl-badge-info-icon-color-hover: $gl-color-blue-300; // Used for the icon of an informational badge in the hover state.
624
- $gl-badge-info-icon-color-default: $gl-color-blue-400; // Used for the icon of an informational badge when static or the default state when linked.
625
- $gl-badge-info-text-color-active: $gl-color-blue-50; // Used for the text of an informational badge in the active state.
626
- $gl-badge-info-text-color-hover: $gl-color-blue-100; // Used for the text of an informational badge in the hover state.
627
- $gl-badge-info-text-color-default: $gl-color-blue-200; // Used for the text of an informational badge when static or the default state when linked.
621
+ $gl-badge-success-background-color-active: $gl-color-green-200; // Used for the background of a success badge in the active state.
622
+ $gl-badge-success-background-color-default: $gl-color-green-300; // Used for the background of a success badge when static or the default state when linked.
623
+ $gl-badge-info-icon-color-active: $gl-color-blue-950; // Used for the icon of an informational badge in the active state.
624
+ $gl-badge-info-icon-color-hover: $gl-color-blue-950; // Used for the icon of an informational badge in the hover state.
625
+ $gl-badge-info-icon-color-default: $gl-color-blue-950; // Used for the icon of an informational badge when static or the default state when linked.
626
+ $gl-badge-info-text-color-active: $gl-color-blue-950; // Used for the text of an informational badge in the active state.
627
+ $gl-badge-info-text-color-hover: $gl-color-blue-950; // Used for the text of an informational badge in the hover state.
628
+ $gl-badge-info-text-color-default: $gl-color-blue-950; // Used for the text of an informational badge when static or the default state when linked.
628
629
  $gl-badge-info-border-color-active: $gl-color-alpha-0; // Used for the border of an informational badge in the active state.
629
630
  $gl-badge-info-border-color-focus: $gl-color-alpha-0; // Used for the border of an informational badge in the focus state.
630
- $gl-badge-info-border-color-hover: $gl-color-blue-700; // Used for the border of an informational badge in the hover state.
631
+ $gl-badge-info-border-color-hover: $gl-color-blue-200; // Used for the border of an informational badge in the hover state.
631
632
  $gl-badge-info-border-color-default: $gl-color-alpha-0; // Used for the border of an informational badge when static or the default state when linked.
632
- $gl-badge-info-background-color-active: $gl-color-blue-700; // Used for the background of an informational badge in the active state.
633
- $gl-badge-info-background-color-default: $gl-color-blue-800; // Used for the background of an informational badge when static or the default state when linked.
634
- $gl-badge-neutral-icon-color-active: $gl-color-neutral-200; // Used for the icon of a neutral badge in the active state.
635
- $gl-badge-neutral-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a neutral badge in the hover state.
636
- $gl-badge-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of a neutral badge when static or the default state when linked.
637
- $gl-badge-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral badge in the active state.
638
- $gl-badge-neutral-text-color-hover: $gl-color-neutral-100; // Used for the text of a neutral badge in the hover state.
639
- $gl-badge-neutral-text-color-default: $gl-color-neutral-200; // Used for the text of a neutral badge when static or the default state when linked.
633
+ $gl-badge-info-background-color-active: $gl-color-blue-200; // Used for the background of an informational badge in the active state.
634
+ $gl-badge-info-background-color-default: $gl-color-blue-300; // Used for the background of an informational badge when static or the default state when linked.
635
+ $gl-badge-neutral-icon-color-active: $gl-color-neutral-950; // Used for the icon of a neutral badge in the active state.
636
+ $gl-badge-neutral-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a neutral badge in the hover state.
637
+ $gl-badge-neutral-icon-color-default: $gl-color-neutral-950; // Used for the icon of a neutral badge when static or the default state when linked.
638
+ $gl-badge-neutral-text-color-active: $gl-color-neutral-950; // Used for the text of a neutral badge in the active state.
639
+ $gl-badge-neutral-text-color-hover: $gl-color-neutral-950; // Used for the text of a neutral badge in the hover state.
640
+ $gl-badge-neutral-text-color-default: $gl-color-neutral-950; // Used for the text of a neutral badge when static or the default state when linked.
640
641
  $gl-badge-neutral-border-color-active: $gl-color-alpha-0; // Used for the border of a neutral badge in the active state.
641
642
  $gl-badge-neutral-border-color-focus: $gl-color-alpha-0; // Used for the border of a neutral badge in the focus state.
642
- $gl-badge-neutral-border-color-hover: $gl-color-neutral-700; // Used for the border of a neutral badge in the hover state.
643
+ $gl-badge-neutral-border-color-hover: $gl-color-neutral-200; // Used for the border of a neutral badge in the hover state.
643
644
  $gl-badge-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral badge when static or the default state when linked.
644
- $gl-badge-neutral-background-color-active: $gl-color-neutral-700; // Used for the background of a neutral badge in the active state.
645
- $gl-badge-neutral-background-color-default: $gl-color-neutral-800; // Used for the background of a neutral badge when static or the default state when linked.
646
- $gl-badge-muted-icon-color-active: $gl-color-neutral-200; // Used for the icon of a muted badge in the active state.
647
- $gl-badge-muted-icon-color-hover: $gl-color-neutral-300; // Used for the icon of a muted badge in the hover state.
648
- $gl-badge-muted-icon-color-default: $gl-color-neutral-400; // Used for the icon of a muted badge when static or the default state when linked.
649
- $gl-badge-muted-text-color-active: $gl-color-neutral-100; // Used for the text of a muted badge in the active state.
650
- $gl-badge-muted-text-color-hover: $gl-color-neutral-200; // Used for the text of a muted badge in the hover state.
651
- $gl-badge-muted-text-color-default: $gl-color-neutral-300; // Used for the text of a muted badge when static or the default state when linked.
645
+ $gl-badge-neutral-background-color-active: $gl-color-neutral-200; // Used for the background of a neutral badge in the active state.
646
+ $gl-badge-neutral-background-color-default: $gl-color-neutral-300; // Used for the background of a neutral badge when static or the default state when linked.
647
+ $gl-badge-muted-icon-color-active: $gl-color-neutral-950; // Used for the icon of a muted badge in the active state.
648
+ $gl-badge-muted-icon-color-hover: $gl-color-neutral-950; // Used for the icon of a muted badge in the hover state.
649
+ $gl-badge-muted-icon-color-default: $gl-color-neutral-950; // Used for the icon of a muted badge when static or the default state when linked.
650
+ $gl-badge-muted-text-color-active: $gl-color-neutral-950; // Used for the text of a muted badge in the active state.
651
+ $gl-badge-muted-text-color-hover: $gl-color-neutral-950; // Used for the text of a muted badge in the hover state.
652
+ $gl-badge-muted-text-color-default: $gl-color-neutral-950; // Used for the text of a muted badge when static or the default state when linked.
652
653
  $gl-badge-muted-border-color-active: $gl-color-alpha-0; // Used for the border of a muted badge in the active state.
653
654
  $gl-badge-muted-border-color-focus: $gl-color-alpha-0; // Used for the border of a muted badge in the focus state.
654
- $gl-badge-muted-border-color-hover: $gl-color-neutral-700; // Used for the border of a muted badge in the hover state.
655
+ $gl-badge-muted-border-color-hover: $gl-color-neutral-300; // Used for the border of a muted badge in the hover state.
655
656
  $gl-badge-muted-border-color-default: $gl-color-alpha-0; // Used for the border of a muted badge when static or the default state when linked.
656
- $gl-badge-muted-background-color-active: $gl-color-neutral-800; // Used for the background of a muted badge in the active state.
657
- $gl-badge-muted-background-color-default: $gl-color-neutral-900; // Used for the background of a muted badge when static or the default state when linked.
657
+ $gl-badge-muted-background-color-active: $gl-color-neutral-300; // Used for the background of a muted badge in the active state.
658
+ $gl-badge-muted-background-color-default: $gl-color-neutral-400; // Used for the background of a muted badge when static or the default state when linked.
658
659
  $gl-avatar-fallback-text-color-neutral: $gl-color-neutral-200; // Neutral text color for avatar fallback with no particular meaning.
659
660
  $gl-avatar-fallback-text-color-orange: $gl-color-orange-200; // Orange text color for avatar fallback with no particular meaning.
660
661
  $gl-avatar-fallback-text-color-green: $gl-color-green-200; // Green text color for avatar fallback with no particular meaning.
@@ -689,6 +690,9 @@ $gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border
689
690
  $gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
690
691
  $gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.
691
692
  $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
693
+ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
694
+ $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
695
+ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
692
696
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
693
697
  $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
694
698
  $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -404,6 +404,7 @@ $gl-color-alpha-light-8: rgba(255, 255, 255, 0.08);
404
404
  $gl-color-alpha-light-6: rgba(255, 255, 255, 0.06);
405
405
  $gl-color-alpha-light-4: rgba(255, 255, 255, 0.04);
406
406
  $gl-color-alpha-light-2: rgba(255, 255, 255, 0.02);
407
+ $gl-color-alpha-dark-40: rgba(05, 05, 06, 0.4);
407
408
  $gl-color-alpha-dark-24: rgba(05, 05, 06, 0.24);
408
409
  $gl-color-alpha-dark-16: rgba(05, 05, 06, 0.16);
409
410
  $gl-color-alpha-dark-8: rgba(05, 05, 06, 0.08);
@@ -478,9 +479,6 @@ $gl-feedback-strong-text-color: $gl-color-neutral-0; // Used for text on a stron
478
479
  $gl-feedback-strong-background-color: $gl-color-neutral-950; // Used for a background associated with strong feedback like a tooltip or toast message.
479
480
  $gl-control-indicator-color-disabled: $gl-color-neutral-500; // Used for disabled checkbox and radio button state indicators.
480
481
  $gl-control-indicator-color-selected: $gl-color-neutral-0; // Used for checkbox and radio button state indicators.
481
- $gl-control-placeholder-color: $gl-color-neutral-400; // Used for placeholder text within inputs.
482
- $gl-control-text-color-valid: $gl-color-green-500; // Used for the helper text when the input is valid.
483
- $gl-control-text-color-error: $gl-color-red-500; // Used for the helper text when the input is invalid.
484
482
  $gl-control-border-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
485
483
  $gl-control-border-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
486
484
  $gl-control-border-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
@@ -492,6 +490,8 @@ $gl-control-border-color-default: $gl-color-neutral-400; // Used for form contro
492
490
  $gl-control-background-color-selected-focus: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
493
491
  $gl-control-background-color-selected-hover: $gl-color-blue-700; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background on hover.
494
492
  $gl-control-background-color-selected-default: $gl-color-blue-500; // Used for checked and indeterminate (selected) form control (checkbox, radio button) background.
493
+ $gl-control-background-color-readonly: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
494
+ $gl-control-background-color-concatenation: $gl-color-neutral-10; // Used for the background of static content that prepends or appends a text input.
495
495
  $gl-control-background-color-disabled: $gl-color-neutral-10; // Used for disabled form control (checkbox, input, radio button, textarea) background.
496
496
  $gl-control-background-color-default: $gl-color-neutral-0; // Used for form control (input, radio button, checkbox, textarea) default background.
497
497
  $gl-spinner-segment-color-light: $gl-color-neutral-200; // Used for the animated segment of a loading spinner on a dark background.
@@ -513,6 +513,7 @@ $gl-label-light-button-icon-color-default: $gl-color-neutral-950; // Used for th
513
513
  $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.
514
514
  $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.
515
515
  $gl-label-light-text-color: $gl-color-neutral-950; // Used for the label text color on a light background color.
516
+ $gl-datepicker-background-color: $gl-color-neutral-0; // Used for the background color of datepicker.
516
517
  $gl-button-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled button.
517
518
  $gl-button-disabled-background-color: $gl-color-neutral-10; // Used for the background of a disabled button.
518
519
  $gl-button-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled button.
@@ -571,9 +572,9 @@ $gl-button-default-primary-foreground-color-default: $gl-color-neutral-800; // U
571
572
  $gl-breadcrumb-separator-color: $gl-color-neutral-400; // Used for the breadcrumb level separator.
572
573
  $gl-banner-promo-background-color: $gl-color-neutral-10; // Used as background for the default banner type.
573
574
  $gl-banner-intro-border-color: $gl-color-blue-300; // Used to compliment the info banner.
574
- $gl-badge-tier-icon-color-active: $gl-color-purple-700; // Used for the icon of a tier related badge in the active state.
575
- $gl-badge-tier-icon-color-hover: $gl-color-purple-600; // Used for the icon of a tier related badge in the hover state.
576
- $gl-badge-tier-icon-color-default: $gl-color-purple-500; // Used for the icon of a tier related badge when static or the default state when linked.
575
+ $gl-badge-tier-icon-color-active: $gl-color-purple-900; // Used for the icon of a tier related badge in the active state.
576
+ $gl-badge-tier-icon-color-hover: $gl-color-purple-800; // Used for the icon of a tier related badge in the hover state.
577
+ $gl-badge-tier-icon-color-default: $gl-color-purple-700; // Used for the icon of a tier related badge when static or the default state when linked.
577
578
  $gl-badge-tier-text-color-active: $gl-color-purple-900; // Used for the text of a tier related badge in the active state.
578
579
  $gl-badge-tier-text-color-hover: $gl-color-purple-800; // Used for the text of a tier related badge in the hover state.
579
580
  $gl-badge-tier-text-color-default: $gl-color-purple-700; // Used for the text of a tier related badge when static or the default state when linked.
@@ -583,9 +584,9 @@ $gl-badge-tier-border-color-hover: $gl-color-purple-200; // Used for the border
583
584
  $gl-badge-tier-border-color-default: $gl-color-alpha-0; // Used for the border of a tier related badge when static or the default state when linked.
584
585
  $gl-badge-tier-background-color-active: $gl-color-purple-200; // Used for the background of a tier related badge in the active state.
585
586
  $gl-badge-tier-background-color-default: $gl-color-purple-100; // Used for the background of a tier related badge when static or the default state when linked.
586
- $gl-badge-danger-icon-color-active: $gl-color-red-700; // Used for the icon of a danger badge in the active state.
587
- $gl-badge-danger-icon-color-hover: $gl-color-red-600; // Used for the icon of a danger badge in the hover state.
588
- $gl-badge-danger-icon-color-default: $gl-color-red-500; // Used for the icon of a danger badge when static or the default state when linked.
587
+ $gl-badge-danger-icon-color-active: $gl-color-red-900; // Used for the icon of a danger badge in the active state.
588
+ $gl-badge-danger-icon-color-hover: $gl-color-red-800; // Used for the icon of a danger badge in the hover state.
589
+ $gl-badge-danger-icon-color-default: $gl-color-red-700; // Used for the icon of a danger badge when static or the default state when linked.
589
590
  $gl-badge-danger-text-color-active: $gl-color-red-900; // Used for the text of a danger badge in the active state.
590
591
  $gl-badge-danger-text-color-hover: $gl-color-red-800; // Used for the text of a danger badge in the hover state.
591
592
  $gl-badge-danger-text-color-default: $gl-color-red-700; // Used for the text of a danger badge when static or the default state when linked.
@@ -689,6 +690,9 @@ $gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border
689
690
  $gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
690
691
  $gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.
691
692
  $gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
693
+ $gl-control-placeholder-color: $gl-text-color-disabled; // Used for placeholder text within inputs.
694
+ $gl-control-text-color-valid: $gl-text-color-success; // Used for the helper text when the input is valid.
695
+ $gl-control-text-color-error: $gl-text-color-danger; // Used for the helper text when the input is invalid.
692
696
  $gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
693
697
  $gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
694
698
  $gl-datepicker-date-text-color-selected: $gl-control-indicator-color-selected; // Used for the datepicker date text color state indicators.
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -58,6 +58,7 @@ $gl-color-alpha-dark-6: var(--gl-color-alpha-dark-6);
58
58
  $gl-color-alpha-dark-8: var(--gl-color-alpha-dark-8);
59
59
  $gl-color-alpha-dark-16: var(--gl-color-alpha-dark-16);
60
60
  $gl-color-alpha-dark-24: var(--gl-color-alpha-dark-24);
61
+ $gl-color-alpha-dark-40: var(--gl-color-alpha-dark-40);
61
62
  $gl-color-alpha-light-2: var(--gl-color-alpha-light-2);
62
63
  $gl-color-alpha-light-4: var(--gl-color-alpha-light-4);
63
64
  $gl-color-alpha-light-6: var(--gl-color-alpha-light-6);
@@ -524,6 +525,7 @@ $gl-button-selected-border-color-active: var(--gl-button-selected-border-color-a
524
525
  $gl-button-disabled-foreground-color: var(--gl-button-disabled-foreground-color);
525
526
  $gl-button-disabled-background-color: var(--gl-button-disabled-background-color);
526
527
  $gl-button-disabled-border-color: var(--gl-button-disabled-border-color);
528
+ $gl-datepicker-background-color: var(--gl-datepicker-background-color);
527
529
  $gl-datepicker-date-text-color-selected: var(--gl-datepicker-date-text-color-selected);
528
530
  $gl-label-light-text-color: var(--gl-label-light-text-color);
529
531
  $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
@@ -548,6 +550,8 @@ $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover)
548
550
  $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
549
551
  $gl-control-background-color-default: var(--gl-control-background-color-default);
550
552
  $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
553
+ $gl-control-background-color-concatenation: var(--gl-control-background-color-concatenation);
554
+ $gl-control-background-color-readonly: var(--gl-control-background-color-readonly);
551
555
  $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
552
556
  $gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
553
557
  $gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
package/src/tokens/build/tailwind/tokens.cjs CHANGED
@@ -245,6 +245,7 @@ const alphaDarkColors = {
245
245
  8: 'var(--gl-color-alpha-dark-8, rgba(05, 05, 06, 0.08))',
246
246
  16: 'var(--gl-color-alpha-dark-16, rgba(05, 05, 06, 0.16))',
247
247
  24: 'var(--gl-color-alpha-dark-24, rgba(05, 05, 06, 0.24))',
248
+ 40: 'var(--gl-color-alpha-dark-40, rgba(05, 05, 06, 0.4))',
248
249
  };
249
250
  const alphaLightColors = {
250
251
  2: 'var(--gl-color-alpha-light-2, rgba(255, 255, 255, 0.02))',
package/src/tokens/color.alpha.tokens.json CHANGED
@@ -29,6 +29,10 @@
29
29
  "24": {
30
30
  "$value": "rgba(05, 05, 06, 0.24)",
31
31
  "$type": "color"
32
+ },
33
+ "40": {
34
+ "$value": "rgba(05, 05, 06, 0.4)",
35
+ "$type": "color"
32
36
  }
33
37
  },
34
38
  "light": {