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