@gitlab/ui 111.1.1 → 111.2.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 (41) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +117 -117
  5. package/dist/tokens/build/js/tokens.js +117 -117
  6. package/dist/tokens/css/tokens.css +93 -93
  7. package/dist/tokens/css/tokens.dark.css +93 -93
  8. package/dist/tokens/js/tokens.dark.js +117 -117
  9. package/dist/tokens/js/tokens.js +117 -117
  10. package/dist/tokens/json/tokens.dark.json +5810 -5810
  11. package/dist/tokens/json/tokens.json +5810 -5810
  12. package/dist/tokens/scss/_tokens.dark.scss +93 -93
  13. package/dist/tokens/scss/_tokens.scss +93 -93
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +117 -117
  15. package/package.json +1 -1
  16. package/src/tokens/build/css/tokens.css +93 -93
  17. package/src/tokens/build/css/tokens.dark.css +93 -93
  18. package/src/tokens/build/js/tokens.dark.js +117 -117
  19. package/src/tokens/build/js/tokens.js +117 -117
  20. package/src/tokens/build/json/tokens.dark.json +5810 -5810
  21. package/src/tokens/build/json/tokens.json +5810 -5810
  22. package/src/tokens/build/scss/_tokens.dark.scss +93 -93
  23. package/src/tokens/build/scss/_tokens.scss +93 -93
  24. package/src/tokens/build/scss/_tokens_custom_properties.scss +117 -117
  25. /package/src/tokens/{color.alpha.tokens.json → constant/color.alpha.tokens.json} +0 -0
  26. /package/src/tokens/{color.constant.tokens.json → constant/color.tokens.json} +0 -0
  27. /package/src/tokens/{line_height.tokens.json → constant/line_height.tokens.json} +0 -0
  28. /package/src/tokens/{deprecated.color.data_viz.tokens.json → deprecated/deprecated.color.data_viz.tokens.json} +0 -0
  29. /package/src/tokens/{deprecated.color.theme.tokens.json → deprecated/deprecated.color.theme.tokens.json} +0 -0
  30. /package/src/tokens/{deprecated.color.tokens.json → deprecated/deprecated.color.tokens.json} +0 -0
  31. /package/src/tokens/{deprecated.color.transparency.tokens.json → deprecated/deprecated.color.transparency.tokens.json} +0 -0
  32. /package/src/tokens/{action.tokens.json → semantic/action.tokens.json} +0 -0
  33. /package/src/tokens/{background.tokens.json → semantic/background.tokens.json} +0 -0
  34. /package/src/tokens/{border.tokens.json → semantic/border.tokens.json} +0 -0
  35. /package/src/tokens/{control.tokens.json → semantic/control.tokens.json} +0 -0
  36. /package/src/tokens/{feedback.tokens.json → semantic/feedback.tokens.json} +0 -0
  37. /package/src/tokens/{focus-ring.tokens.json → semantic/focus-ring.tokens.json} +0 -0
  38. /package/src/tokens/{icon.tokens.json → semantic/icon.tokens.json} +0 -0
  39. /package/src/tokens/{shadow.tokens.json → semantic/shadow.tokens.json} +0 -0
  40. /package/src/tokens/{status.tokens.json → semantic/status.tokens.json} +0 -0
  41. /package/src/tokens/{text.tokens.json → semantic/text.tokens.json} +0 -0
package/dist/tokens/css/tokens.css CHANGED
@@ -3,15 +3,6 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
7
- --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
8
- --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /* Used for the background of a neutral action in the active state. */
9
- --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); /* Used for the background of a confirm (positive) action in the default state. */
10
- --gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); /* Used for the background of a confirm (positive) action in the hover state. */
11
- --gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); /* Used for the background of a confirm (positive) action in the active state. */
12
- --gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); /* Used for the background of a danger (destructive) action in the default state. */
13
- --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /* Used for the background of a danger (destructive) action in the hover state. */
14
- --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /* Used for the background of a danger (destructive) action in the active state. */
15
6
  --gl-color-alpha-0: transparent;
16
7
  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
17
8
  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
@@ -238,6 +229,16 @@
238
229
  --gl-color-brand-gray-04: #45424d;
239
230
  --gl-color-brand-gray-05: #2b2838;
240
231
  --gl-color-brand-pink-01g: #ffb9c9;
232
+ --gl-line-height-12: 0.75rem;
233
+ --gl-line-height-16: 1rem;
234
+ --gl-line-height-20: 1.25rem;
235
+ --gl-line-height-24: 1.5rem;
236
+ --gl-line-height-28: 1.75rem;
237
+ --gl-line-height-32: 2rem;
238
+ --gl-line-height-36: 2.25rem;
239
+ --gl-line-height-42: 2.625rem;
240
+ --gl-line-height-44: 2.75rem;
241
+ --gl-line-height-52: 3.25rem;
241
242
  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /* Red background for avatar fallback with no particular meaning. */
242
243
  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /* Purple background for avatar fallback with no particular meaning. */
243
244
  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /* Blue background for avatar fallback with no particular meaning. */
@@ -497,60 +498,18 @@
497
498
  --t-white-a-04: rgba(255, 255, 255, 0.04); /* Use color.alpha.light.4 instead. */
498
499
  --t-white-a-06: rgba(255, 255, 255, 0.06); /* Use color.alpha.light.6 instead. */
499
500
  --t-white-a-08: rgba(255, 255, 255, 0.08); /* Use color.alpha.light.8 instead. */
500
- --gl-line-height-12: 0.75rem;
501
- --gl-line-height-16: 1rem;
502
- --gl-line-height-20: 1.25rem;
503
- --gl-line-height-24: 1.5rem;
504
- --gl-line-height-28: 1.75rem;
505
- --gl-line-height-32: 2rem;
506
- --gl-line-height-36: 2.25rem;
507
- --gl-line-height-42: 2.625rem;
508
- --gl-line-height-44: 2.75rem;
509
- --gl-line-height-52: 3.25rem;
501
+ --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
502
+ --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
503
+ --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /* Used for the background of a neutral action in the active state. */
504
+ --gl-action-confirm-background-color-default: rgba(99, 166, 233, 0.0); /* Used for the background of a confirm (positive) action in the default state. */
505
+ --gl-action-confirm-background-color-hover: rgba(99, 166, 233, 0.16); /* Used for the background of a confirm (positive) action in the hover state. */
506
+ --gl-action-confirm-background-color-active: rgba(11, 92, 173, 0.24); /* Used for the background of a confirm (positive) action in the active state. */
507
+ --gl-action-danger-background-color-default: rgba(245, 127, 108, 0.0); /* Used for the background of a danger (destructive) action in the default state. */
508
+ --gl-action-danger-background-color-hover: rgba(245, 127, 108, 0.16); /* Used for the background of a danger (destructive) action in the hover state. */
509
+ --gl-action-danger-background-color-active: rgba(174, 24, 0, 0.24); /* Used for the background of a danger (destructive) action in the active state. */
510
510
  --gl-text-primary: #28272d; /* Use text.color.default instead. */
511
511
  --gl-text-secondary: #737278; /* Use text.color.subtle instead. */
512
512
  --gl-text-tertiary: #89888d; /* Use text.color.disabled instead. */
513
- --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */
514
- --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
515
- --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
516
- --gl-action-selected-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a selected action in the default state. */
517
- --gl-action-selected-background-color-default: var(--gl-color-blue-500); /* Used for the background of a selected action in the default state. */
518
- --gl-action-selected-background-color-hover: var(--gl-color-blue-700); /* Used for the background of a selected action in the hover state. */
519
- --gl-action-selected-background-color-active: var(--gl-color-blue-800); /* Used for the background of a selected action in the active state. */
520
- --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a neutral action in the default state. */
521
- --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
522
- --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
523
- --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) action in the default state. */
524
- --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-700); /* Used for the foreground of a confirm (positive) action in the hover state. */
525
- --gl-action-confirm-foreground-color-active: var(--gl-color-blue-900); /* Used for the foreground of a confirm (positive) action in the active state. */
526
- --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /* Used for the background of a confirm (positive) action in the focus state. */
527
- --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
528
- --gl-action-danger-foreground-color-default: var(--gl-color-red-500); /* Used for the foreground of a danger (destructive) action in the default state. */
529
- --gl-action-danger-foreground-color-hover: var(--gl-color-red-700); /* Used for the foreground of a danger (destructive) action in the hover state. */
530
- --gl-action-danger-foreground-color-active: var(--gl-color-red-900); /* Used for the foreground of a danger (destructive) action in the active state. */
531
- --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /* Used for the background of a danger (destructive) action in the focus state. */
532
- --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
533
- --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-500); /* Used for the background of a strong confirm action in the default state. */
534
- --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-600); /* Used for the background of a strong confirm action in the hover state. */
535
- --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-700); /* Used for the background of a strong confirm action in the active state. */
536
- --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong confirm action in the default state. */
537
- --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
538
- --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the default state. */
539
- --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the hover state. */
540
- --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a strong neutral action in the active state. */
541
- --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the default state. */
542
- --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
543
- --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
544
- --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
545
- --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
546
- --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
547
- --gl-background-color-overlap: var(--gl-color-neutral-0); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
548
- --gl-background-color-section: var(--gl-color-neutral-0); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
549
- --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
550
- --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
551
- --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
552
- --gl-border-color-strong: var(--gl-color-neutral-200); /* Used for a distinct border that emphasizes an edge or boundaries. */
553
- --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
554
513
  --gl-alert-neutral-border-top-color: var(--gl-color-alpha-0); /* Used for the border center color of a neutral alert. */
555
514
  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
556
515
  --gl-alert-info-border-top-color: var(--gl-color-alpha-0); /* Used for the border color of an info alert. */
@@ -794,6 +753,47 @@
794
753
  --gl-tab-selected-indicator-color-default: var(--gl-color-blue-500); /* Used for the selected indicator of a tab. */
795
754
  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-300); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
796
755
  --gl-token-background-color: var(--gl-color-neutral-100); /* Used for the token background color. */
756
+ --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */
757
+ --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
758
+ --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
759
+ --gl-action-selected-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a selected action in the default state. */
760
+ --gl-action-selected-background-color-default: var(--gl-color-blue-500); /* Used for the background of a selected action in the default state. */
761
+ --gl-action-selected-background-color-hover: var(--gl-color-blue-700); /* Used for the background of a selected action in the hover state. */
762
+ --gl-action-selected-background-color-active: var(--gl-color-blue-800); /* Used for the background of a selected action in the active state. */
763
+ --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of a neutral action in the default state. */
764
+ --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
765
+ --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
766
+ --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) action in the default state. */
767
+ --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-700); /* Used for the foreground of a confirm (positive) action in the hover state. */
768
+ --gl-action-confirm-foreground-color-active: var(--gl-color-blue-900); /* Used for the foreground of a confirm (positive) action in the active state. */
769
+ --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /* Used for the background of a confirm (positive) action in the focus state. */
770
+ --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
771
+ --gl-action-danger-foreground-color-default: var(--gl-color-red-500); /* Used for the foreground of a danger (destructive) action in the default state. */
772
+ --gl-action-danger-foreground-color-hover: var(--gl-color-red-700); /* Used for the foreground of a danger (destructive) action in the hover state. */
773
+ --gl-action-danger-foreground-color-active: var(--gl-color-red-900); /* Used for the foreground of a danger (destructive) action in the active state. */
774
+ --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /* Used for the background of a danger (destructive) action in the focus state. */
775
+ --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
776
+ --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-500); /* Used for the background of a strong confirm action in the default state. */
777
+ --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-600); /* Used for the background of a strong confirm action in the hover state. */
778
+ --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-700); /* Used for the background of a strong confirm action in the active state. */
779
+ --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong confirm action in the default state. */
780
+ --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
781
+ --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the default state. */
782
+ --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the hover state. */
783
+ --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-800); /* Used for the background of a strong neutral action in the active state. */
784
+ --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the default state. */
785
+ --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
786
+ --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
787
+ --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
788
+ --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
789
+ --gl-background-color-disabled: var(--gl-color-neutral-10); /* Used to identify a disabled section. */
790
+ --gl-background-color-overlap: var(--gl-color-neutral-0); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
791
+ --gl-background-color-section: var(--gl-color-neutral-0); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
792
+ --gl-background-color-overlay: var(--gl-color-alpha-dark-24); /* Used for an overlay that covers other content. */
793
+ --gl-border-color-default: var(--gl-color-neutral-100); /* Used for the default border color. */
794
+ --gl-border-color-subtle: var(--gl-color-neutral-50); /* Used for a subtle border in combination with the default background. */
795
+ --gl-border-color-strong: var(--gl-color-neutral-200); /* Used for a distinct border that emphasizes an edge or boundaries. */
796
+ --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
797
797
  --gl-control-background-color-default: var(--gl-color-neutral-0); /* Used for form control (input, radio button, checkbox, textarea) default background. */
798
798
  --gl-control-background-color-disabled: var(--gl-color-neutral-10); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
799
799
  --gl-control-background-color-concatenation: var(--gl-color-neutral-10); /* Used for the background of static content that prepends or appends a text input. */
@@ -860,32 +860,6 @@
860
860
  --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
861
861
  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success, completion, approval, addition, or validity. */
862
862
  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
863
- --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
864
- --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
865
- --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
866
- --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /* Used for the border of a selected action in the hover state. */
867
- --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /* Used for the border of a selected action in the active state. */
868
- --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the hover state. */
869
- --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the focus state. */
870
- --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the active state. */
871
- --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the hover state. */
872
- --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the focus state. */
873
- --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the active state. */
874
- --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /* Used for the foreground of a confirm (positive) action in the focus state. */
875
- --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the hover state. */
876
- --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the focus state. */
877
- --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the active state. */
878
- --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /* Used for the foreground of a danger (destructive) action in the focus state. */
879
- --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
880
- --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
881
- --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
882
- --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a strong confirm action in the focus state. */
883
- --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a strong confirm action in the hover state. */
884
- --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /* Used for the border of a strong confirm action in the hover state. */
885
- --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */
886
- --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
887
- --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
888
- --gl-border-color-section: var(--gl-border-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
889
863
  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
890
864
  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
891
865
  --gl-alert-info-title-color: var(--gl-text-color-heading); /* Used for the title color of an info alert. */
@@ -984,6 +958,32 @@
984
958
  --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the icon color of a checked toggle switch in the active state. */
985
959
  --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /* Used for the icon color of a disabled toggle switch. */
986
960
  --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
961
+ --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
962
+ --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
963
+ --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
964
+ --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /* Used for the border of a selected action in the hover state. */
965
+ --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /* Used for the border of a selected action in the active state. */
966
+ --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the hover state. */
967
+ --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the focus state. */
968
+ --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the active state. */
969
+ --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the hover state. */
970
+ --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the focus state. */
971
+ --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the active state. */
972
+ --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /* Used for the foreground of a confirm (positive) action in the focus state. */
973
+ --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the hover state. */
974
+ --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the focus state. */
975
+ --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the active state. */
976
+ --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /* Used for the foreground of a danger (destructive) action in the focus state. */
977
+ --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
978
+ --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
979
+ --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
980
+ --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a strong confirm action in the focus state. */
981
+ --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a strong confirm action in the hover state. */
982
+ --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /* Used for the border of a strong confirm action in the hover state. */
983
+ --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */
984
+ --gl-action-strong-neutral-foreground-color-hover: var(--gl-action-strong-neutral-foreground-color-default); /* Used for the foreground of a strong neutral action in the hover state. */
985
+ --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
986
+ --gl-border-color-section: var(--gl-border-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
987
987
  --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
988
988
  --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
989
989
  --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
@@ -996,12 +996,6 @@
996
996
  --gl-icon-color-warning: var(--gl-text-color-warning); /* Used for an icon associated with a warning. */
997
997
  --gl-icon-color-danger: var(--gl-text-color-danger); /* Used for an icon associated with an error or danger. */
998
998
  --gl-icon-color-success: var(--gl-text-color-success); /* Used for an icon associated with success or validity. */
999
- --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /* Used for the foreground of a selected action in the focus state. */
1000
- --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
1001
- --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */
1002
- --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /* Used for the border of a strong confirm action in the focus state. */
1003
- --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /* Used for the foreground of a strong neutral action in the focus state. */
1004
- --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /* Used for the border of a strong neutral action in the focus state. */
1005
999
  --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /* Used for the background of a muted badge in the focus state. */
1006
1000
  --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /* Used for the background of a neutral badge in the focus state. */
1007
1001
  --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /* Used for the background of an informational badge in the focus state. */
@@ -1039,11 +1033,17 @@
1039
1033
  --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */
1040
1034
  --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /* Used for the icon color of an unchecked toggle switch in the focus state. */
1041
1035
  --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the icon color of a checked toggle switch in the focus state. */
1036
+ --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /* Used for the foreground of a selected action in the focus state. */
1037
+ --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
1038
+ --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */
1039
+ --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /* Used for the border of a strong confirm action in the focus state. */
1040
+ --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /* Used for the foreground of a strong neutral action in the focus state. */
1041
+ --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /* Used for the border of a strong neutral action in the focus state. */
1042
+ --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
1042
1043
  --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /* Used for the foreground of a selected action in the active state. */
1043
1044
  --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a strong confirm action in the active state. */
1044
1045
  --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /* Used for the border of a strong confirm action in the active state. */
1045
1046
  --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /* Used for the foreground of a strong neutral action in the active state. */
1046
1047
  --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /* Used for the border of a strong neutral action in the active state. */
1047
- --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
1048
1048
  --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /* Used for the foreground of a confirm (positive) primary button in the active state. */
1049
1049
  }
package/dist/tokens/css/tokens.dark.css CHANGED
@@ -3,15 +3,6 @@
3
3
  */
4
4
 
5
5
  :root.gl-dark {
6
- --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
7
- --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
8
- --gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); /* Used for the background of a neutral action in the active state. */
9
- --gl-action-confirm-background-color-default: rgba(66, 143, 220, 0.0); /* Used for the background of a confirm (positive) action in the default state. */
10
- --gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); /* Used for the background of a confirm (positive) action in the hover state. */
11
- --gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); /* Used for the background of a confirm (positive) action in the active state. */
12
- --gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); /* Used for the background of a danger (destructive) action in the default state. */
13
- --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /* Used for the background of a danger (destructive) action in the hover state. */
14
- --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /* Used for the background of a danger (destructive) action in the active state. */
15
6
  --gl-color-alpha-0: transparent;
16
7
  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
17
8
  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
@@ -238,6 +229,16 @@
238
229
  --gl-color-brand-gray-04: #45424d;
239
230
  --gl-color-brand-gray-05: #2b2838;
240
231
  --gl-color-brand-pink-01g: #ffb9c9;
232
+ --gl-line-height-12: 0.75rem;
233
+ --gl-line-height-16: 1rem;
234
+ --gl-line-height-20: 1.25rem;
235
+ --gl-line-height-24: 1.5rem;
236
+ --gl-line-height-28: 1.75rem;
237
+ --gl-line-height-32: 2rem;
238
+ --gl-line-height-36: 2.25rem;
239
+ --gl-line-height-42: 2.625rem;
240
+ --gl-line-height-44: 2.75rem;
241
+ --gl-line-height-52: 3.25rem;
241
242
  --gl-avatar-fallback-background-color-red: #fcb5aa3d; /* Red background for avatar fallback with no particular meaning. */
242
243
  --gl-avatar-fallback-background-color-purple: #cbbbf23d; /* Purple background for avatar fallback with no particular meaning. */
243
244
  --gl-avatar-fallback-background-color-blue: #9dc7f13d; /* Blue background for avatar fallback with no particular meaning. */
@@ -497,60 +498,18 @@
497
498
  --t-white-a-04: rgba(255, 255, 255, 0.04); /* Use color.alpha.light.4 instead. */
498
499
  --t-white-a-06: rgba(255, 255, 255, 0.06); /* Use color.alpha.light.6 instead. */
499
500
  --t-white-a-08: rgba(255, 255, 255, 0.08); /* Use color.alpha.light.8 instead. */
500
- --gl-line-height-12: 0.75rem;
501
- --gl-line-height-16: 1rem;
502
- --gl-line-height-20: 1.25rem;
503
- --gl-line-height-24: 1.5rem;
504
- --gl-line-height-28: 1.75rem;
505
- --gl-line-height-32: 2rem;
506
- --gl-line-height-36: 2.25rem;
507
- --gl-line-height-42: 2.625rem;
508
- --gl-line-height-44: 2.75rem;
509
- --gl-line-height-52: 3.25rem;
501
+ --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
502
+ --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
503
+ --gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); /* Used for the background of a neutral action in the active state. */
504
+ --gl-action-confirm-background-color-default: rgba(66, 143, 220, 0.0); /* Used for the background of a confirm (positive) action in the default state. */
505
+ --gl-action-confirm-background-color-hover: rgba(66, 143, 220, 0.4); /* Used for the background of a confirm (positive) action in the hover state. */
506
+ --gl-action-confirm-background-color-active: rgba(66, 143, 220, 0.16); /* Used for the background of a confirm (positive) action in the active state. */
507
+ --gl-action-danger-background-color-default: rgba(236, 89, 65, 0.0); /* Used for the background of a danger (destructive) action in the default state. */
508
+ --gl-action-danger-background-color-hover: rgba(236, 89, 65, 0.4); /* Used for the background of a danger (destructive) action in the hover state. */
509
+ --gl-action-danger-background-color-active: rgba(236, 89, 65, 0.16); /* Used for the background of a danger (destructive) action in the active state. */
510
510
  --gl-text-primary: #ececef; /* Use text.color.default instead. */
511
511
  --gl-text-secondary: #89888d; /* Use text.color.subtle instead. */
512
512
  --gl-text-tertiary: #737278; /* Use text.color.disabled instead. */
513
- --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */
514
- --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
515
- --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
516
- --gl-action-selected-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a selected action in the default state. */
517
- --gl-action-selected-background-color-default: var(--gl-color-blue-300); /* Used for the background of a selected action in the default state. */
518
- --gl-action-selected-background-color-hover: var(--gl-color-blue-200); /* Used for the background of a selected action in the hover state. */
519
- --gl-action-selected-background-color-active: var(--gl-color-blue-100); /* Used for the background of a selected action in the active state. */
520
- --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
521
- --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
522
- --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
523
- --gl-action-confirm-foreground-color-default: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) action in the default state. */
524
- --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) action in the hover state. */
525
- --gl-action-confirm-foreground-color-active: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) action in the active state. */
526
- --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /* Used for the background of a confirm (positive) action in the focus state. */
527
- --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
528
- --gl-action-danger-foreground-color-default: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) action in the default state. */
529
- --gl-action-danger-foreground-color-hover: var(--gl-color-red-100); /* Used for the foreground of a danger (destructive) action in the hover state. */
530
- --gl-action-danger-foreground-color-active: var(--gl-color-red-100); /* Used for the foreground of a danger (destructive) action in the active state. */
531
- --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /* Used for the background of a danger (destructive) action in the focus state. */
532
- --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
533
- --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the default state. */
534
- --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the hover state. */
535
- --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-400); /* Used for the background of a strong confirm action in the active state. */
536
- --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a strong confirm action in the default state. */
537
- --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
538
- --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the default state. */
539
- --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the hover state. */
540
- --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /* Used for the background of a strong neutral action in the active state. */
541
- --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a strong neutral action in the default state. */
542
- --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
543
- --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
544
- --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
545
- --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
546
- --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
547
- --gl-background-color-overlap: var(--gl-color-neutral-900); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
548
- --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
549
- --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
550
- --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
551
- --gl-border-color-subtle: var(--gl-color-neutral-800); /* Used for a subtle border in combination with the default background. */
552
- --gl-border-color-strong: var(--gl-color-neutral-600); /* Used for a distinct border that emphasizes an edge or boundaries. */
553
- --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
554
513
  --gl-alert-neutral-border-top-color: var(--gl-color-neutral-400); /* Used for the border center color of a neutral alert. */
555
514
  --gl-alert-neutral-border-bottom-color: var(--gl-color-alpha-0); /* Used for the border bottom color of a neutral alert. */
556
515
  --gl-alert-info-border-top-color: var(--gl-color-blue-400); /* Used for the border color of an info alert. */
@@ -794,6 +753,47 @@
794
753
  --gl-tab-selected-indicator-color-default: var(--gl-color-blue-400); /* Used for the selected indicator of a tab. */
795
754
  --gl-token-selector-token-container-token-background-color-focus: var(--gl-color-neutral-600); /* Used for the background color of a token in a token-selector when it's token-container is in the focus state. */
796
755
  --gl-token-background-color: var(--gl-color-neutral-800); /* Used for the token background color. */
756
+ --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */
757
+ --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
758
+ --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
759
+ --gl-action-selected-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a selected action in the default state. */
760
+ --gl-action-selected-background-color-default: var(--gl-color-blue-300); /* Used for the background of a selected action in the default state. */
761
+ --gl-action-selected-background-color-hover: var(--gl-color-blue-200); /* Used for the background of a selected action in the hover state. */
762
+ --gl-action-selected-background-color-active: var(--gl-color-blue-100); /* Used for the background of a selected action in the active state. */
763
+ --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a neutral action in the default state. */
764
+ --gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-hover); /* Used for the background of a neutral action in the focus state. */
765
+ --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
766
+ --gl-action-confirm-foreground-color-default: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) action in the default state. */
767
+ --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) action in the hover state. */
768
+ --gl-action-confirm-foreground-color-active: var(--gl-color-blue-100); /* Used for the foreground of a confirm (positive) action in the active state. */
769
+ --gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-hover); /* Used for the background of a confirm (positive) action in the focus state. */
770
+ --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
771
+ --gl-action-danger-foreground-color-default: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) action in the default state. */
772
+ --gl-action-danger-foreground-color-hover: var(--gl-color-red-100); /* Used for the foreground of a danger (destructive) action in the hover state. */
773
+ --gl-action-danger-foreground-color-active: var(--gl-color-red-100); /* Used for the foreground of a danger (destructive) action in the active state. */
774
+ --gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-hover); /* Used for the background of a danger (destructive) action in the focus state. */
775
+ --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
776
+ --gl-action-strong-confirm-background-color-default: var(--gl-color-blue-300); /* Used for the background of a strong confirm action in the default state. */
777
+ --gl-action-strong-confirm-background-color-hover: var(--gl-color-blue-200); /* Used for the background of a strong confirm action in the hover state. */
778
+ --gl-action-strong-confirm-background-color-active: var(--gl-color-blue-400); /* Used for the background of a strong confirm action in the active state. */
779
+ --gl-action-strong-confirm-foreground-color-default: var(--gl-color-neutral-950); /* Used for the foreground of a strong confirm action in the default state. */
780
+ --gl-action-strong-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong confirm action in the default state. */
781
+ --gl-action-strong-neutral-background-color-default: var(--gl-color-neutral-700); /* Used for the background of a strong neutral action in the default state. */
782
+ --gl-action-strong-neutral-background-color-hover: var(--gl-color-neutral-600); /* Used for the background of a strong neutral action in the hover state. */
783
+ --gl-action-strong-neutral-background-color-active: var(--gl-color-neutral-500); /* Used for the background of a strong neutral action in the active state. */
784
+ --gl-action-strong-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of a strong neutral action in the default state. */
785
+ --gl-action-strong-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a strong neutral action in the default state. */
786
+ --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
787
+ --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
788
+ --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
789
+ --gl-background-color-disabled: var(--gl-color-neutral-900); /* Used to identify a disabled section. */
790
+ --gl-background-color-overlap: var(--gl-color-neutral-900); /* Used for components, like tooltips and drawers, and content, like a sticky header, that overlap other content. */
791
+ --gl-background-color-section: var(--gl-color-neutral-800); /* Used for containers, like a card header, that are visually distinct from the default page background only when necessary to maintain affordance and hierarchy in different modes. */
792
+ --gl-background-color-overlay: rgba(0,0,0,0.64); /* Used for an overlay that covers other content. */
793
+ --gl-border-color-default: var(--gl-color-neutral-700); /* Used for the default border color. */
794
+ --gl-border-color-subtle: var(--gl-color-neutral-800); /* Used for a subtle border in combination with the default background. */
795
+ --gl-border-color-strong: var(--gl-color-neutral-600); /* Used for a distinct border that emphasizes an edge or boundaries. */
796
+ --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
797
797
  --gl-control-background-color-default: var(--gl-color-alpha-dark-40); /* Used for form control (input, radio button, checkbox, textarea) default background. */
798
798
  --gl-control-background-color-disabled: var(--gl-color-alpha-light-4); /* Used for disabled form control (checkbox, input, radio button, textarea) background. */
799
799
  --gl-control-background-color-concatenation: var(--gl-color-alpha-light-4); /* Used for the background of static content that prepends or appends a text input. */
@@ -860,32 +860,6 @@
860
860
  --gl-text-color-danger: var(--gl-color-red-300); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
861
861
  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success, completion, approval, addition, or validity. */
862
862
  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
863
- --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
864
- --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
865
- --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
866
- --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /* Used for the border of a selected action in the hover state. */
867
- --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /* Used for the border of a selected action in the active state. */
868
- --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the hover state. */
869
- --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the focus state. */
870
- --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the active state. */
871
- --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the hover state. */
872
- --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the focus state. */
873
- --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the active state. */
874
- --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /* Used for the foreground of a confirm (positive) action in the focus state. */
875
- --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the hover state. */
876
- --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the focus state. */
877
- --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the active state. */
878
- --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /* Used for the foreground of a danger (destructive) action in the focus state. */
879
- --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
880
- --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
881
- --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
882
- --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a strong confirm action in the focus state. */
883
- --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a strong confirm action in the hover state. */
884
- --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /* Used for the border of a strong confirm action in the hover state. */
885
- --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */
886
- --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the hover state. */
887
- --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
888
- --gl-border-color-section: var(--gl-background-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
889
863
  --gl-alert-neutral-title-color: var(--gl-text-color-heading); /* Used for the title color of a neutral alert. */
890
864
  --gl-alert-neutral-background-color: var(--gl-feedback-neutral-background-color); /* Used for the background color of a neutral alert. */
891
865
  --gl-alert-info-title-color: var(--gl-color-blue-300); /* Used for the title color of an info alert. */
@@ -984,6 +958,32 @@
984
958
  --gl-toggle-switch-icon-color-checked-active: var(--gl-action-strong-confirm-background-color-active); /* Used for the icon color of a checked toggle switch in the active state. */
985
959
  --gl-toggle-switch-icon-color-disabled: var(--gl-action-disabled-background-color); /* Used for the icon color of a disabled toggle switch. */
986
960
  --gl-token-foreground-color: var(--gl-text-color-default); /* Used for the token foreground color. */
961
+ --gl-action-selected-foreground-color-hover: var(--gl-action-selected-foreground-color-default); /* Used for the foreground of a selected action in the hover state. */
962
+ --gl-action-selected-background-color-focus: var(--gl-action-selected-background-color-hover); /* Used for the background of a selected action in the focus state. */
963
+ --gl-action-selected-border-color-default: var(--gl-action-selected-background-color-default); /* Used for the border of a selected action in the default state. */
964
+ --gl-action-selected-border-color-hover: var(--gl-action-selected-background-color-hover); /* Used for the border of a selected action in the hover state. */
965
+ --gl-action-selected-border-color-active: var(--gl-action-selected-background-color-active); /* Used for the border of a selected action in the active state. */
966
+ --gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the hover state. */
967
+ --gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the focus state. */
968
+ --gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-default); /* Used for the foreground of a neutral action in the active state. */
969
+ --gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the hover state. */
970
+ --gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the focus state. */
971
+ --gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-default); /* Used for the border of a neutral action in the active state. */
972
+ --gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-hover); /* Used for the foreground of a confirm (positive) action in the focus state. */
973
+ --gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the hover state. */
974
+ --gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the focus state. */
975
+ --gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-default); /* Used for the border of a confirm action in the active state. */
976
+ --gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-hover); /* Used for the foreground of a danger (destructive) action in the focus state. */
977
+ --gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the hover state. */
978
+ --gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the focus state. */
979
+ --gl-action-danger-border-color-active: var(--gl-action-danger-border-color-default); /* Used for the border of a danger action in the active state. */
980
+ --gl-action-strong-confirm-background-color-focus: var(--gl-action-strong-confirm-background-color-hover); /* Used for the background of a strong confirm action in the focus state. */
981
+ --gl-action-strong-confirm-foreground-color-hover: var(--gl-action-strong-confirm-foreground-color-default); /* Used for the foreground of a strong confirm action in the hover state. */
982
+ --gl-action-strong-confirm-border-color-hover: var(--gl-action-strong-confirm-border-color-default); /* Used for the border of a strong confirm action in the hover state. */
983
+ --gl-action-strong-neutral-background-color-focus: var(--gl-action-strong-neutral-background-color-hover); /* Used for the background of a strong neutral action in the focus state. */
984
+ --gl-action-strong-neutral-foreground-color-hover: var(--gl-color-neutral-0); /* Used for the foreground of a strong neutral action in the hover state. */
985
+ --gl-action-strong-neutral-border-color-hover: var(--gl-action-strong-neutral-border-color-default); /* Used for the border of a strong neutral action in the hover state. */
986
+ --gl-border-color-section: var(--gl-background-color-default); /* Used for the border color that surrounds content or elements when they appear as a closed container or closed section of the page. */
987
987
  --gl-control-text-color-error: var(--gl-text-color-danger); /* Used for the helper text when the input is invalid. */
988
988
  --gl-control-text-color-valid: var(--gl-text-color-success); /* Used for the helper text when the input is valid. */
989
989
  --gl-control-placeholder-color: var(--gl-text-color-disabled); /* Used for placeholder text within inputs. */
@@ -996,12 +996,6 @@
996
996
  --gl-icon-color-warning: var(--gl-text-color-warning); /* Used for an icon associated with a warning. */
997
997
  --gl-icon-color-danger: var(--gl-text-color-danger); /* Used for an icon associated with an error or danger. */
998
998
  --gl-icon-color-success: var(--gl-text-color-success); /* Used for an icon associated with success or validity. */
999
- --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /* Used for the foreground of a selected action in the focus state. */
1000
- --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
1001
- --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */
1002
- --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /* Used for the border of a strong confirm action in the focus state. */
1003
- --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /* Used for the foreground of a strong neutral action in the focus state. */
1004
- --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /* Used for the border of a strong neutral action in the focus state. */
1005
999
  --gl-badge-muted-background-color-focus: var(--gl-badge-muted-background-color-hover); /* Used for the background of a muted badge in the focus state. */
1006
1000
  --gl-badge-neutral-background-color-focus: var(--gl-badge-neutral-background-color-hover); /* Used for the background of a neutral badge in the focus state. */
1007
1001
  --gl-badge-info-background-color-focus: var(--gl-badge-info-background-color-hover); /* Used for the background of an informational badge in the focus state. */
@@ -1039,11 +1033,17 @@
1039
1033
  --gl-dropdown-option-text-color-active: var(--gl-action-neutral-foreground-color-active); /* Used for the text of a dropdown option in the active state. */
1040
1034
  --gl-toggle-switch-icon-color-unchecked-focus: var(--gl-action-strong-neutral-background-color-focus); /* Used for the icon color of an unchecked toggle switch in the focus state. */
1041
1035
  --gl-toggle-switch-icon-color-checked-focus: var(--gl-action-strong-confirm-background-color-focus); /* Used for the icon color of a checked toggle switch in the focus state. */
1036
+ --gl-action-selected-foreground-color-focus: var(--gl-action-selected-foreground-color-hover); /* Used for the foreground of a selected action in the focus state. */
1037
+ --gl-action-selected-border-color-focus: var(--gl-action-selected-background-color-focus); /* Used for the border of a selected action in the focus state. */
1038
+ --gl-action-strong-confirm-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-hover); /* Used for the foreground of a strong confirm action in the focus state. */
1039
+ --gl-action-strong-confirm-border-color-focus: var(--gl-action-strong-confirm-border-color-hover); /* Used for the border of a strong confirm action in the focus state. */
1040
+ --gl-action-strong-neutral-foreground-color-focus: var(--gl-action-strong-neutral-foreground-color-hover); /* Used for the foreground of a strong neutral action in the focus state. */
1041
+ --gl-action-strong-neutral-border-color-focus: var(--gl-action-strong-neutral-border-color-hover); /* Used for the border of a strong neutral action in the focus state. */
1042
+ --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
1042
1043
  --gl-action-selected-foreground-color-active: var(--gl-action-selected-foreground-color-focus); /* Used for the foreground of a selected action in the active state. */
1043
1044
  --gl-action-strong-confirm-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a strong confirm action in the active state. */
1044
1045
  --gl-action-strong-confirm-border-color-active: var(--gl-action-strong-confirm-border-color-focus); /* Used for the border of a strong confirm action in the active state. */
1045
1046
  --gl-action-strong-neutral-foreground-color-active: var(--gl-action-strong-neutral-foreground-color-focus); /* Used for the foreground of a strong neutral action in the active state. */
1046
1047
  --gl-action-strong-neutral-border-color-active: var(--gl-action-strong-neutral-border-color-focus); /* Used for the border of a strong neutral action in the active state. */
1047
- --gl-button-confirm-primary-foreground-color-focus: var(--gl-action-strong-confirm-foreground-color-focus); /* Used for the foreground of a confirm (positive) primary button in the focus state. */
1048
1048
  --gl-button-confirm-primary-foreground-color-active: var(--gl-action-strong-confirm-foreground-color-active); /* Used for the foreground of a confirm (positive) primary button in the active state. */
1049
1049
  }