@gitlab/ui 111.1.0 → 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 (51) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/base/token_selector/token_container.js +1 -1
  3. package/dist/components/base/token_selector/token_selector.js +2 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.css.map +1 -1
  6. package/dist/tailwind.css +1 -1
  7. package/dist/tailwind.css.map +1 -1
  8. package/dist/tokens/build/js/tokens.dark.js +117 -117
  9. package/dist/tokens/build/js/tokens.js +117 -117
  10. package/dist/tokens/css/tokens.css +94 -94
  11. package/dist/tokens/css/tokens.dark.css +94 -94
  12. package/dist/tokens/js/tokens.dark.js +117 -117
  13. package/dist/tokens/js/tokens.js +117 -117
  14. package/dist/tokens/json/tokens.dark.json +5815 -5811
  15. package/dist/tokens/json/tokens.json +5815 -5811
  16. package/dist/tokens/scss/_tokens.dark.scss +94 -94
  17. package/dist/tokens/scss/_tokens.scss +94 -94
  18. package/dist/tokens/scss/_tokens_custom_properties.scss +117 -117
  19. package/dist/utils/is_slot_empty.js +1 -8
  20. package/package.json +1 -1
  21. package/src/components/base/token_selector/token_container.vue +3 -2
  22. package/src/components/base/token_selector/token_selector.scss +1 -0
  23. package/src/components/base/token_selector/token_selector.vue +3 -0
  24. package/src/tokens/build/css/tokens.css +94 -94
  25. package/src/tokens/build/css/tokens.dark.css +94 -94
  26. package/src/tokens/build/js/tokens.dark.js +117 -117
  27. package/src/tokens/build/js/tokens.js +117 -117
  28. package/src/tokens/build/json/tokens.dark.json +5815 -5811
  29. package/src/tokens/build/json/tokens.json +5815 -5811
  30. package/src/tokens/build/scss/_tokens.dark.scss +94 -94
  31. package/src/tokens/build/scss/_tokens.scss +94 -94
  32. package/src/tokens/build/scss/_tokens_custom_properties.scss +117 -117
  33. package/src/tokens/contextual/dropdown.tokens.json +2 -0
  34. package/src/utils/is_slot_empty.js +1 -10
  35. /package/src/tokens/{color.alpha.tokens.json → constant/color.alpha.tokens.json} +0 -0
  36. /package/src/tokens/{color.constant.tokens.json → constant/color.tokens.json} +0 -0
  37. /package/src/tokens/{line_height.tokens.json → constant/line_height.tokens.json} +0 -0
  38. /package/src/tokens/{deprecated.color.data_viz.tokens.json → deprecated/deprecated.color.data_viz.tokens.json} +0 -0
  39. /package/src/tokens/{deprecated.color.theme.tokens.json → deprecated/deprecated.color.theme.tokens.json} +0 -0
  40. /package/src/tokens/{deprecated.color.tokens.json → deprecated/deprecated.color.tokens.json} +0 -0
  41. /package/src/tokens/{deprecated.color.transparency.tokens.json → deprecated/deprecated.color.transparency.tokens.json} +0 -0
  42. /package/src/tokens/{action.tokens.json → semantic/action.tokens.json} +0 -0
  43. /package/src/tokens/{background.tokens.json → semantic/background.tokens.json} +0 -0
  44. /package/src/tokens/{border.tokens.json → semantic/border.tokens.json} +0 -0
  45. /package/src/tokens/{control.tokens.json → semantic/control.tokens.json} +0 -0
  46. /package/src/tokens/{feedback.tokens.json → semantic/feedback.tokens.json} +0 -0
  47. /package/src/tokens/{focus-ring.tokens.json → semantic/focus-ring.tokens.json} +0 -0
  48. /package/src/tokens/{icon.tokens.json → semantic/icon.tokens.json} +0 -0
  49. /package/src/tokens/{shadow.tokens.json → semantic/shadow.tokens.json} +0 -0
  50. /package/src/tokens/{status.tokens.json → semantic/status.tokens.json} +0 -0
  51. /package/src/tokens/{text.tokens.json → semantic/text.tokens.json} +0 -0
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. */
@@ -961,7 +935,7 @@
961
935
  --gl-datepicker-date-text-color-selected: var(--gl-control-indicator-color-selected); /* Used for the datepicker date text color state indicators. */
962
936
  --gl-dropdown-background-color: var(--gl-background-color-overlap); /* Used for the background of a dropdown. */
963
937
  --gl-dropdown-border-color: var(--gl-border-color-default); /* Used for the border of a dropdown. */
964
- --gl-dropdown-divider-color: var(--gl-border-color-subtle);
938
+ --gl-dropdown-divider-color: var(--gl-border-color-subtle); /* Used for the divider of a dropdown. */
965
939
  --gl-dropdown-option-text-color-default: var(--gl-action-neutral-foreground-color-default); /* Used for the text of a dropdown option in the default state. */
966
940
  --gl-dropdown-option-text-color-disabled: var(--gl-action-disabled-foreground-color); /* Used for the text of a dropdown option in the disabled state. */
967
941
  --gl-dropdown-option-indicator-color-selected-default: var(--gl-control-background-color-selected-default); /* Used for the dropdown selected option indicator in the default state. */
@@ -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
  }
package/dist/tokens/js/tokens.dark.js CHANGED
@@ -2,93 +2,6 @@
2
2
  * Do not edit directly, this file was auto-generated.
3
3
  */
4
4
 
5
- export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278';
6
- export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d';
7
- export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f';
8
- export const GL_ACTION_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d';
9
- export const GL_ACTION_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
10
- export const GL_ACTION_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
11
- export const GL_ACTION_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
12
- export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT = '#63a6e9';
13
- export const GL_ACTION_SELECTED_BACKGROUND_COLOR_HOVER = '#9dc7f1';
14
- export const GL_ACTION_SELECTED_BACKGROUND_COLOR_FOCUS = '#9dc7f1';
15
- export const GL_ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE = '#cbe2f9';
16
- export const GL_ACTION_SELECTED_BORDER_COLOR_DEFAULT = '#63a6e9';
17
- export const GL_ACTION_SELECTED_BORDER_COLOR_HOVER = '#9dc7f1';
18
- export const GL_ACTION_SELECTED_BORDER_COLOR_FOCUS = '#9dc7f1';
19
- export const GL_ACTION_SELECTED_BORDER_COLOR_ACTIVE = '#cbe2f9';
20
- export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef';
21
- export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef';
22
- export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef';
23
- export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef';
24
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0.0)';
25
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.4)';
26
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.4)';
27
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.16)';
28
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent';
29
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = 'transparent';
30
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent';
31
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent';
32
- export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#9dc7f1';
33
- export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER = '#cbe2f9';
34
- export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS = '#cbe2f9';
35
- export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#cbe2f9';
36
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = 'rgba(66, 143, 220, 0.0)';
37
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = 'rgba(66, 143, 220, 0.4)';
38
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = 'rgba(66, 143, 220, 0.4)';
39
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = 'rgba(66, 143, 220, 0.16)';
40
- export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent';
41
- export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = 'transparent';
42
- export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = 'transparent';
43
- export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent';
44
- export const GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT = '#fcb5aa';
45
- export const GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER = '#fdd4cd';
46
- export const GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS = '#fdd4cd';
47
- export const GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE = '#fdd4cd';
48
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = 'rgba(236, 89, 65, 0.0)';
49
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = 'rgba(236, 89, 65, 0.4)';
50
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = 'rgba(236, 89, 65, 0.4)';
51
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = 'rgba(236, 89, 65, 0.16)';
52
- export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent';
53
- export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent';
54
- export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent';
55
- export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent';
56
- export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#63a6e9';
57
- export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#9dc7f1';
58
- export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#9dc7f1';
59
- export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#428fdc';
60
- export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#18171d';
61
- export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#18171d';
62
- export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#18171d';
63
- export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#18171d';
64
- export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent';
65
- export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent';
66
- export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent';
67
- export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent';
68
- export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#4c4b51';
69
- export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#626168';
70
- export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#626168';
71
- export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#737278';
72
- export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef';
73
- export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff';
74
- export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff';
75
- export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff';
76
- export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent';
77
- export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent';
78
- export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent';
79
- export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent';
80
- export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d';
81
- export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d';
82
- export const GL_BACKGROUND_COLOR_STRONG = '#3a383f';
83
- export const GL_BACKGROUND_COLOR_DISABLED = '#28272d';
84
- export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
85
- export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
86
- export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
87
- export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
88
- export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
89
- export const GL_BORDER_COLOR_STRONG = '#626168';
90
- export const GL_BORDER_COLOR_SECTION = '#18171d';
91
- export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
92
5
  export const GL_COLOR_ALPHA_0 = 'transparent';
93
6
  export const GL_COLOR_ALPHA_DARK_2 = 'rgba(05, 05, 06, 0.02)';
94
7
  export const GL_COLOR_ALPHA_DARK_4 = 'rgba(05, 05, 06, 0.04)';
@@ -315,6 +228,16 @@ export const GL_COLOR_BRAND_GRAY_03 = '#74717a';
315
228
  export const GL_COLOR_BRAND_GRAY_04 = '#45424d';
316
229
  export const GL_COLOR_BRAND_GRAY_05 = '#2b2838';
317
230
  export const GL_COLOR_BRAND_PINK_01G = '#ffb9c9';
231
+ export const GL_LINE_HEIGHT_12 = '0.75rem';
232
+ export const GL_LINE_HEIGHT_16 = '1rem';
233
+ export const GL_LINE_HEIGHT_20 = '1.25rem';
234
+ export const GL_LINE_HEIGHT_24 = '1.5rem';
235
+ export const GL_LINE_HEIGHT_28 = '1.75rem';
236
+ export const GL_LINE_HEIGHT_32 = '2rem';
237
+ export const GL_LINE_HEIGHT_36 = '2.25rem';
238
+ export const GL_LINE_HEIGHT_42 = '2.625rem';
239
+ export const GL_LINE_HEIGHT_44 = '2.75rem';
240
+ export const GL_LINE_HEIGHT_52 = '3.25rem';
318
241
  export const GL_ALERT_NEUTRAL_TITLE_COLOR = '#fff';
319
242
  export const GL_ALERT_NEUTRAL_BACKGROUND_COLOR = '#28272d';
320
243
  export const GL_ALERT_NEUTRAL_BORDER_TOP_COLOR = '#89888d';
@@ -734,26 +657,6 @@ export const GL_TOGGLE_SWITCH_ICON_COLOR_DISABLED = '#28272d';
734
657
  export const GL_TOKEN_SELECTOR_TOKEN_CONTAINER_TOKEN_BACKGROUND_COLOR_FOCUS = '#626168';
735
658
  export const GL_TOKEN_FOREGROUND_COLOR = '#ececef';
736
659
  export const GL_TOKEN_BACKGROUND_COLOR = '#3a383f';
737
- export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
738
- export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)';
739
- export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)';
740
- export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)';
741
- export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9';
742
- export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1';
743
- export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1';
744
- export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#737278';
745
- export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8';
746
- export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef';
747
- export const GL_CONTROL_BORDER_COLOR_DISABLED = '#3a383f';
748
- export const GL_CONTROL_BORDER_COLOR_ERROR = '#f6806d';
749
- export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#428fdc';
750
- export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#9dc7f1';
751
- export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1';
752
- export const GL_CONTROL_TEXT_COLOR_ERROR = '#f6806d';
753
- export const GL_CONTROL_TEXT_COLOR_VALID = '#52b87a';
754
- export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
755
- export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d';
756
- export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d';
757
660
  export const DATA_VIZ_GREEN_50 = '#133a03';
758
661
  export const DATA_VIZ_GREEN_100 = '#1a4500';
759
662
  export const DATA_VIZ_GREEN_200 = '#275600';
@@ -974,6 +877,113 @@ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
974
877
  export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
975
878
  export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
976
879
  export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
880
+ export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278';
881
+ export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d';
882
+ export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f';
883
+ export const GL_ACTION_SELECTED_FOREGROUND_COLOR_DEFAULT = '#18171d';
884
+ export const GL_ACTION_SELECTED_FOREGROUND_COLOR_HOVER = '#18171d';
885
+ export const GL_ACTION_SELECTED_FOREGROUND_COLOR_FOCUS = '#18171d';
886
+ export const GL_ACTION_SELECTED_FOREGROUND_COLOR_ACTIVE = '#18171d';
887
+ export const GL_ACTION_SELECTED_BACKGROUND_COLOR_DEFAULT = '#63a6e9';
888
+ export const GL_ACTION_SELECTED_BACKGROUND_COLOR_HOVER = '#9dc7f1';
889
+ export const GL_ACTION_SELECTED_BACKGROUND_COLOR_FOCUS = '#9dc7f1';
890
+ export const GL_ACTION_SELECTED_BACKGROUND_COLOR_ACTIVE = '#cbe2f9';
891
+ export const GL_ACTION_SELECTED_BORDER_COLOR_DEFAULT = '#63a6e9';
892
+ export const GL_ACTION_SELECTED_BORDER_COLOR_HOVER = '#9dc7f1';
893
+ export const GL_ACTION_SELECTED_BORDER_COLOR_FOCUS = '#9dc7f1';
894
+ export const GL_ACTION_SELECTED_BORDER_COLOR_ACTIVE = '#cbe2f9';
895
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef';
896
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef';
897
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef';
898
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef';
899
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0.0)';
900
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.4)';
901
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.4)';
902
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.16)';
903
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent';
904
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = 'transparent';
905
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent';
906
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent';
907
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#9dc7f1';
908
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER = '#cbe2f9';
909
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS = '#cbe2f9';
910
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#cbe2f9';
911
+ export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = 'rgba(66, 143, 220, 0.0)';
912
+ export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = 'rgba(66, 143, 220, 0.4)';
913
+ export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = 'rgba(66, 143, 220, 0.4)';
914
+ export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = 'rgba(66, 143, 220, 0.16)';
915
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent';
916
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = 'transparent';
917
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = 'transparent';
918
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent';
919
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT = '#fcb5aa';
920
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER = '#fdd4cd';
921
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS = '#fdd4cd';
922
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE = '#fdd4cd';
923
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = 'rgba(236, 89, 65, 0.0)';
924
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = 'rgba(236, 89, 65, 0.4)';
925
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = 'rgba(236, 89, 65, 0.4)';
926
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = 'rgba(236, 89, 65, 0.16)';
927
+ export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent';
928
+ export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent';
929
+ export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent';
930
+ export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent';
931
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#63a6e9';
932
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#9dc7f1';
933
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#9dc7f1';
934
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#428fdc';
935
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#18171d';
936
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#18171d';
937
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#18171d';
938
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#18171d';
939
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent';
940
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent';
941
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent';
942
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent';
943
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#4c4b51';
944
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#626168';
945
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#626168';
946
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#737278';
947
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef';
948
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff';
949
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff';
950
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff';
951
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent';
952
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent';
953
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent';
954
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent';
955
+ export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d';
956
+ export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d';
957
+ export const GL_BACKGROUND_COLOR_STRONG = '#3a383f';
958
+ export const GL_BACKGROUND_COLOR_DISABLED = '#28272d';
959
+ export const GL_BACKGROUND_COLOR_OVERLAP = '#28272d';
960
+ export const GL_BACKGROUND_COLOR_SECTION = '#3a383f';
961
+ export const GL_BACKGROUND_COLOR_OVERLAY = 'rgba(0,0,0,0.64)';
962
+ export const GL_BORDER_COLOR_DEFAULT = '#4c4b51';
963
+ export const GL_BORDER_COLOR_SUBTLE = '#3a383f';
964
+ export const GL_BORDER_COLOR_STRONG = '#626168';
965
+ export const GL_BORDER_COLOR_SECTION = '#18171d';
966
+ export const GL_BORDER_COLOR_TRANSPARENT = 'transparent';
967
+ export const GL_CONTROL_BACKGROUND_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
968
+ export const GL_CONTROL_BACKGROUND_COLOR_DISABLED = 'rgba(255, 255, 255, 0.04)';
969
+ export const GL_CONTROL_BACKGROUND_COLOR_CONCATENATION = 'rgba(255, 255, 255, 0.04)';
970
+ export const GL_CONTROL_BACKGROUND_COLOR_READONLY = 'rgba(255, 255, 255, 0.08)';
971
+ export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_DEFAULT = '#63a6e9';
972
+ export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_HOVER = '#9dc7f1';
973
+ export const GL_CONTROL_BACKGROUND_COLOR_SELECTED_FOCUS = '#9dc7f1';
974
+ export const GL_CONTROL_BORDER_COLOR_DEFAULT = '#737278';
975
+ export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8';
976
+ export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef';
977
+ export const GL_CONTROL_BORDER_COLOR_DISABLED = '#3a383f';
978
+ export const GL_CONTROL_BORDER_COLOR_ERROR = '#f6806d';
979
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#428fdc';
980
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#9dc7f1';
981
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1';
982
+ export const GL_CONTROL_TEXT_COLOR_ERROR = '#f6806d';
983
+ export const GL_CONTROL_TEXT_COLOR_VALID = '#52b87a';
984
+ export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d';
985
+ export const GL_CONTROL_INDICATOR_COLOR_SELECTED = '#18171d';
986
+ export const GL_CONTROL_INDICATOR_COLOR_DISABLED = '#89888d';
977
987
  export const GL_FEEDBACK_STRONG_BACKGROUND_COLOR = '#3a383f';
978
988
  export const GL_FEEDBACK_STRONG_TEXT_COLOR = '#fff';
979
989
  export const GL_FEEDBACK_STRONG_ICON_COLOR = '#fff';
@@ -1004,16 +1014,6 @@ export const GL_ICON_COLOR_INFO = '#9dc7f1';
1004
1014
  export const GL_ICON_COLOR_WARNING = '#d99530';
1005
1015
  export const GL_ICON_COLOR_DANGER = '#f6806d';
1006
1016
  export const GL_ICON_COLOR_SUCCESS = '#52b87a';
1007
- export const GL_LINE_HEIGHT_12 = '0.75rem';
1008
- export const GL_LINE_HEIGHT_16 = '1rem';
1009
- export const GL_LINE_HEIGHT_20 = '1.25rem';
1010
- export const GL_LINE_HEIGHT_24 = '1.5rem';
1011
- export const GL_LINE_HEIGHT_28 = '1.75rem';
1012
- export const GL_LINE_HEIGHT_32 = '2rem';
1013
- export const GL_LINE_HEIGHT_36 = '2.25rem';
1014
- export const GL_LINE_HEIGHT_42 = '2.625rem';
1015
- export const GL_LINE_HEIGHT_44 = '2.75rem';
1016
- export const GL_LINE_HEIGHT_52 = '3.25rem';
1017
1017
  export const GL_SHADOW_COLOR_DEFAULT = 'rgba(05, 05, 06, 0.4)';
1018
1018
  export const GL_STATUS_NEUTRAL_BACKGROUND_COLOR = '#3a383f';
1019
1019
  export const GL_STATUS_NEUTRAL_TEXT_COLOR = '#bfbfc3';