@gitlab/ui 86.14.4 → 86.15.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 (25) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/dist/index.css +1 -1
  3. package/dist/index.css.map +1 -1
  4. package/dist/tokens/build/js/tokens.dark.js +40 -98
  5. package/dist/tokens/build/js/tokens.js +40 -98
  6. package/dist/tokens/css/tokens.css +39 -97
  7. package/dist/tokens/css/tokens.dark.css +39 -97
  8. package/dist/tokens/js/tokens.dark.js +39 -97
  9. package/dist/tokens/js/tokens.js +39 -97
  10. package/dist/tokens/json/tokens.dark.json +378 -1896
  11. package/dist/tokens/json/tokens.json +380 -1898
  12. package/dist/tokens/scss/_tokens.dark.scss +39 -97
  13. package/dist/tokens/scss/_tokens.scss +39 -97
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +15 -73
  15. package/package.json +1 -1
  16. package/src/tokens/action.tokens.json +101 -654
  17. package/src/tokens/build/css/tokens.css +39 -97
  18. package/src/tokens/build/css/tokens.dark.css +39 -97
  19. package/src/tokens/build/js/tokens.dark.js +39 -97
  20. package/src/tokens/build/js/tokens.js +39 -97
  21. package/src/tokens/build/json/tokens.dark.json +378 -1896
  22. package/src/tokens/build/json/tokens.json +380 -1898
  23. package/src/tokens/build/scss/_tokens.dark.scss +39 -97
  24. package/src/tokens/build/scss/_tokens.scss +39 -97
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +15 -73
package/src/tokens/build/css/tokens.css CHANGED
@@ -407,6 +407,15 @@
407
407
  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
408
408
  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
409
409
  --gl-color-alpha-0: transparent;
410
+ --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. */
411
+ --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. */
412
+ --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. */
413
+ --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. */
414
+ --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. */
415
+ --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. */
416
+ --gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); /* Used for the background of a neutral action in the active state. */
417
+ --gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); /* Used for the background of a neutral action in the hover state. */
418
+ --gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); /* Used for the background of a neutral action in the default state. */
410
419
  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
411
420
  --gl-text-color-success: var(--gl-color-green-600); /* Used for text indicating success or validity. */
412
421
  --gl-text-color-danger: var(--gl-color-red-600); /* Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination. */
@@ -574,104 +583,37 @@
574
583
  --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
575
584
  --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
576
585
  --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
577
- --gl-action-danger-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong danger (destructive) action background. */
578
- --gl-action-danger-icon-color-active: var(--gl-color-red-900); /* Used for the icon of a danger (destructive) action in the active state. */
579
- --gl-action-danger-icon-color-focus: var(--gl-color-red-700); /* Used for the icon of a danger (destructive) action in the focus state. */
580
- --gl-action-danger-icon-color-hover: var(--gl-color-red-700); /* Used for the icon of a danger (destructive) action in the hover state. */
581
- --gl-action-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger (destructive) action in the default state. */
582
- --gl-action-danger-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong danger (destructive) action background. */
583
- --gl-action-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger (destructive) action in the active state. */
584
- --gl-action-danger-text-color-focus: var(--gl-color-red-700); /* Used for the text of a danger (destructive) action in the focus state. */
585
- --gl-action-danger-text-color-hover: var(--gl-color-red-700); /* Used for the text of a danger (destructive) action in the hover state. */
586
- --gl-action-danger-text-color-default: var(--gl-color-red-500); /* Used for the text of a danger (destructive) action in the default state. */
587
- --gl-action-danger-border-color-strong-active: var(--gl-color-red-900); /* Used for the border of a solid, strong danger (destructive) action in the active state. */
588
- --gl-action-danger-border-color-strong-focus: var(--gl-color-red-800); /* Used for the border of a solid, strong danger (destructive) action in the focus state. */
589
- --gl-action-danger-border-color-strong-hover: var(--gl-color-red-800); /* Used for the border of a solid, strong danger (destructive) action in the hover state. */
590
- --gl-action-danger-border-color-strong-default: var(--gl-color-red-600); /* Used for the border of a solid, strong danger (destructive) action in the default state. */
591
- --gl-action-danger-border-color-active: var(--gl-color-red-900); /* Used for the border of an outlined danger (destructive) action in the active state. */
592
- --gl-action-danger-border-color-focus: var(--gl-color-red-700); /* Used for the border of an outlined danger (destructive) action in the focus state. */
593
- --gl-action-danger-border-color-hover: var(--gl-color-red-700); /* Used for the border of an outlined danger (destructive) action in the hover state. */
594
- --gl-action-danger-border-color-default: var(--gl-color-red-500); /* Used for the border of an outlined danger (destructive) action in the default state. */
595
- --gl-action-danger-background-color-strong-active: var(--gl-color-red-800); /* Used for the background of a solid, strong danger (destructive) action in the active state. */
596
- --gl-action-danger-background-color-strong-focus: var(--gl-color-red-600); /* Used for the background of a solid, strong danger (destructive) action in the focus state. */
597
- --gl-action-danger-background-color-strong-hover: var(--gl-color-red-600); /* Used for the background of a solid, strong danger (destructive) action in the hover state. */
598
- --gl-action-danger-background-color-strong-default: var(--gl-color-red-500); /* Used for the background of a solid, strong danger (destructive) action in the default state. */
599
- --gl-action-danger-background-color-subtle-active: var(--gl-color-red-100); /* Used for the background of a borderless, subtle danger (destructive) action in the active state. */
600
- --gl-action-danger-background-color-subtle-focus: var(--gl-color-red-50); /* Used for the background of a borderless, subtle danger (destructive) action in the focus state. */
601
- --gl-action-danger-background-color-subtle-hover: var(--gl-color-red-50); /* Used for the background of a borderless, subtle danger (destructive) action in the hover state. */
602
- --gl-action-danger-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle danger (destructive) action in the default state. */
603
- --gl-action-danger-background-color-active: var(--gl-color-red-100); /* Used for the background of an outlined danger (destructive) action in the active state. */
604
- --gl-action-danger-background-color-focus: var(--gl-color-red-50); /* Used for the background of an outlined danger (destructive) action in the focus state. */
605
- --gl-action-danger-background-color-hover: var(--gl-color-red-50); /* Used for the background of an outlined danger (destructive) action in the hover state. */
606
- --gl-action-danger-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined danger (destructive) action in the default state. */
607
- --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong confirm (positive) action background. */
608
- --gl-action-confirm-icon-color-active: var(--gl-color-blue-900); /* Used for the icon of a confirm (positive) action in the active state. */
609
- --gl-action-confirm-icon-color-focus: var(--gl-color-blue-700); /* Used for the icon of a confirm (positive) action in the focus state. */
610
- --gl-action-confirm-icon-color-hover: var(--gl-color-blue-700); /* Used for the icon of a confirm (positive) action in the hover state. */
611
- --gl-action-confirm-icon-color-default: var(--gl-color-blue-500); /* Used for the icon of a confirm (positive) action in the default state. */
612
- --gl-action-confirm-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong confirm (positive) action background. */
613
- --gl-action-confirm-text-color-active: var(--gl-color-blue-900); /* Used for the text of a confirm (positive) action in the active state. */
614
- --gl-action-confirm-text-color-focus: var(--gl-color-blue-700); /* Used for the text of a confirm (positive) action in the focus state. */
615
- --gl-action-confirm-text-color-hover: var(--gl-color-blue-700); /* Used for the text of a confirm (positive) action in the hover state. */
616
- --gl-action-confirm-text-color-default: var(--gl-color-blue-500); /* Used for the text of a confirm (positive) action in the default state. */
617
- --gl-action-confirm-border-color-strong-selected: var(--gl-color-blue-600); /* Used for the border of a solid, strong confirm (positive) action when in a selected or current state. */
618
- --gl-action-confirm-border-color-strong-active: var(--gl-color-blue-900); /* Used for the border of a solid, strong confirm (positive) action in the active state. */
619
- --gl-action-confirm-border-color-strong-focus: var(--gl-color-blue-800); /* Used for the border of a solid, strong confirm (positive) action in the focus state. */
620
- --gl-action-confirm-border-color-strong-hover: var(--gl-color-blue-800); /* Used for the border of a solid, strong confirm (positive) action in the hover state. */
621
- --gl-action-confirm-border-color-strong-default: var(--gl-color-blue-600); /* Used for the border of a solid, strong confirm (positive) action in the default state. */
622
- --gl-action-confirm-border-color-active: var(--gl-color-blue-900); /* Used for the border of an outlined confirm (positive) action in the active state. */
623
- --gl-action-confirm-border-color-focus: var(--gl-color-blue-700); /* Used for the border of an outlined confirm (positive) action in the focus state. */
624
- --gl-action-confirm-border-color-hover: var(--gl-color-blue-700); /* Used for the border of an outlined confirm (positive) action in the hover state. */
625
- --gl-action-confirm-border-color-default: var(--gl-color-blue-500); /* Used for the border of an outlined confirm (positive) action in the default state. */
626
- --gl-action-confirm-background-color-strong-selected: var(--gl-color-blue-500); /* Used for the background of a solid, strong confirm (positive) action when in a selected or current state. */
627
- --gl-action-confirm-background-color-strong-active: var(--gl-color-blue-700); /* Used for the background of a solid, strong confirm (positive) action in the active state. */
628
- --gl-action-confirm-background-color-strong-focus: var(--gl-color-blue-600); /* Used for the background of a solid, strong confirm (positive) action in the focus state. */
629
- --gl-action-confirm-background-color-strong-hover: var(--gl-color-blue-600); /* Used for the background of a solid, strong confirm (positive) action in the hover state. */
630
- --gl-action-confirm-background-color-strong-default: var(--gl-color-blue-500); /* Used for the background of a solid, strong confirm (positive) action in the default state. */
631
- --gl-action-confirm-background-color-subtle-active: var(--gl-color-blue-100); /* Used for the background of a borderless, subtle confirm (positive) action in the active state. */
632
- --gl-action-confirm-background-color-subtle-focus: var(--gl-color-blue-50); /* Used for the background of a borderless, subtle confirm (positive) action in the focus state. */
633
- --gl-action-confirm-background-color-subtle-hover: var(--gl-color-blue-50); /* Used for the background of a borderless, subtle confirm (positive) action in the hover state. */
634
- --gl-action-confirm-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle confirm (positive) action in the default state. */
635
- --gl-action-confirm-background-color-active: var(--gl-color-blue-100); /* Used for the background of an outlined confirm (positive) action in the active state. */
636
- --gl-action-confirm-background-color-focus: var(--gl-color-blue-50); /* Used for the background of an outlined confirm (positive) action in the focus state. */
637
- --gl-action-confirm-background-color-hover: var(--gl-color-blue-50); /* Used for the background of an outlined confirm (positive) action in the hover state. */
638
- --gl-action-confirm-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined confirm (positive) action in the default state. */
639
- --gl-action-neutral-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong neutral action background. */
640
- --gl-action-neutral-icon-color-active: var(--gl-color-neutral-900); /* Used for the icon of outlined and borderless neutral actions in the active state. */
641
- --gl-action-neutral-icon-color-focus: var(--gl-color-neutral-700); /* Used for the icon of outlined and borderless neutral actions in the focus state. */
642
- --gl-action-neutral-icon-color-hover: var(--gl-color-neutral-700); /* Used for the icon of outlined and borderless neutral actions in the hover state. */
643
- --gl-action-neutral-icon-color-default: var(--gl-color-neutral-500); /* Used for the icon of outlined and borderless neutral actions. */
644
- --gl-action-neutral-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong neutral action background. */
645
- --gl-action-neutral-text-color-active: var(--gl-color-neutral-900); /* Used for the text of a neutral action in the active state. */
646
- --gl-action-neutral-text-color-focus: var(--gl-color-neutral-900); /* Used for the text of a neutral action in the focus state. */
647
- --gl-action-neutral-text-color-hover: var(--gl-color-neutral-900); /* Used for the text of a neutral action in the hover state. */
648
- --gl-action-neutral-text-color-default: var(--gl-color-neutral-900); /* Used for the text of outlined and borderless neutral actions. */
649
- --gl-action-neutral-border-color-strong-active: var(--gl-color-neutral-900); /* Used for the border of a solid, strong neutral action in the active state. */
650
- --gl-action-neutral-border-color-strong-focus: var(--gl-color-neutral-800); /* Used for the border of a solid, strong neutral action in the focus state. */
651
- --gl-action-neutral-border-color-strong-hover: var(--gl-color-neutral-800); /* Used for the border of a solid, strong neutral action in the hover state. */
652
- --gl-action-neutral-border-color-strong-default: var(--gl-color-neutral-600); /* Used for the border of a solid, strong neutral action in the default state. */
653
- --gl-action-neutral-border-color-selected: var(--gl-color-neutral-300); /* Used for the border of a outlined neutral action when in a selected or current state. */
654
- --gl-action-neutral-border-color-active: var(--gl-color-neutral-600); /* Used for the border of an outlined neutral action in the active state. */
655
- --gl-action-neutral-border-color-focus: var(--gl-color-neutral-400); /* Used for the border of an outlined neutral action in the focus state. */
656
- --gl-action-neutral-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of an outlined neutral action in the hover state. */
657
- --gl-action-neutral-border-color-default: var(--gl-color-neutral-200); /* Used for the border of an outlined neutral action in the default state. */
658
- --gl-action-neutral-background-color-strong-active: var(--gl-color-neutral-700); /* Used for the background of a solid, strong neutral action in the active state. */
659
- --gl-action-neutral-background-color-strong-focus: var(--gl-color-neutral-600); /* Used for the background of a solid, strong neutral action in the focus state. */
660
- --gl-action-neutral-background-color-strong-hover: var(--gl-color-neutral-600); /* Used for the background of a solid, strong neutral action in the hover state. */
661
- --gl-action-neutral-background-color-strong-default: var(--gl-color-neutral-500); /* Used for the background of a solid, strong neutral action in the default state. */
662
- --gl-action-neutral-background-color-subtle-active: var(--gl-color-neutral-100); /* Used for the background of a borderless, subtle neutral action in the active state. */
663
- --gl-action-neutral-background-color-subtle-focus: var(--gl-color-neutral-50); /* Used for the background of a borderless, subtle neutral action in the focus state. */
664
- --gl-action-neutral-background-color-subtle-hover: var(--gl-color-neutral-50); /* Used for the background of a borderless, subtle neutral action in the hover state. */
665
- --gl-action-neutral-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle neutral action in the default state. */
666
- --gl-action-neutral-background-color-active: var(--gl-color-neutral-100); /* Used for the background of an outlined neutral action in the active state. */
667
- --gl-action-neutral-background-color-focus: var(--gl-color-neutral-50); /* Used for the background of an outlined neutral action in the focus state. */
668
- --gl-action-neutral-background-color-hover: var(--gl-color-neutral-50); /* Used for the background of an outlined neutral action in the hover state. */
669
- --gl-action-neutral-background-color-default: var(--gl-color-neutral-0); /* Used for the background of an outlined neutral action in the default state. */
670
- --gl-action-icon-color-disabled: var(--gl-color-neutral-400); /* Used for the icon of a disabled action. */
671
- --gl-action-text-color-disabled: var(--gl-color-neutral-500); /* Used for the text of a disabled action. */
672
- --gl-action-border-color-disabled: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
673
- --gl-action-background-color-disabled: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
586
+ --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
587
+ --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. */
588
+ --gl-action-danger-foreground-color-active: var(--gl-color-red-900); /* Used for the foreground of a danger (destructive) action in the active state. */
589
+ --gl-action-danger-foreground-color-hover: var(--gl-color-red-700); /* Used for the foreground of a danger (destructive) action in the hover state. */
590
+ --gl-action-danger-foreground-color-default: var(--gl-color-red-500); /* Used for the foreground of a danger (destructive) action in the default state. */
591
+ --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
592
+ --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. */
593
+ --gl-action-confirm-foreground-color-active: var(--gl-color-blue-900); /* Used for the foreground of a confirm (positive) action in the active state. */
594
+ --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-700); /* Used for the foreground of a confirm (positive) action in the hover state. */
595
+ --gl-action-confirm-foreground-color-default: var(--gl-color-blue-500); /* Used for the foreground of a confirm (positive) action in the default state. */
596
+ --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
597
+ --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. */
598
+ --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-900); /* Used for the foreground of outlined and borderless neutral actions. */
599
+ --gl-action-disabled-border-color: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
600
+ --gl-action-disabled-background-color: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
601
+ --gl-action-disabled-foreground-color: var(--gl-color-neutral-400); /* Used for the foreground of a disabled action. */
674
602
  --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
675
603
  --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
676
604
  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
605
+ --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. */
606
+ --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. */
607
+ --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. */
608
+ --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. */
609
+ --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. */
610
+ --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. */
611
+ --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. */
612
+ --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. */
613
+ --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. */
614
+ --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. */
615
+ --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. */
616
+ --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. */
617
+ --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. */
618
+ --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. */
677
619
  }
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -407,6 +407,15 @@
407
407
  --gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
408
408
  --gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
409
409
  --gl-color-alpha-0: transparent;
410
+ --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. */
411
+ --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. */
412
+ --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. */
413
+ --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. */
414
+ --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. */
415
+ --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. */
416
+ --gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); /* Used for the background of a neutral action in the active state. */
417
+ --gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); /* Used for the background of a neutral action in the hover state. */
418
+ --gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); /* Used for the background of a neutral action in the default state. */
410
419
  --gl-text-color-disabled: var(--gl-color-neutral-400); /* Used for disabled text. */
411
420
  --gl-text-color-success: var(--gl-color-green-300); /* Used for text indicating success or validity. */
412
421
  --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. */
@@ -574,104 +583,37 @@
574
583
  --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
575
584
  --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
576
585
  --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
577
- --gl-action-danger-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong danger (destructive) action background. */
578
- --gl-action-danger-icon-color-active: var(--gl-color-red-50); /* Used for the icon of a danger (destructive) action in the active state. */
579
- --gl-action-danger-icon-color-focus: var(--gl-color-red-200); /* Used for the icon of a danger (destructive) action in the focus state. */
580
- --gl-action-danger-icon-color-hover: var(--gl-color-red-200); /* Used for the icon of a danger (destructive) action in the hover state. */
581
- --gl-action-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (destructive) action in the default state. */
582
- --gl-action-danger-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong danger (destructive) action background. */
583
- --gl-action-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (destructive) action in the active state. */
584
- --gl-action-danger-text-color-focus: var(--gl-color-red-200); /* Used for the text of a danger (destructive) action in the focus state. */
585
- --gl-action-danger-text-color-hover: var(--gl-color-red-200); /* Used for the text of a danger (destructive) action in the hover state. */
586
- --gl-action-danger-text-color-default: var(--gl-color-red-400); /* Used for the text of a danger (destructive) action in the default state. */
587
- --gl-action-danger-border-color-strong-active: var(--gl-color-red-50); /* Used for the border of a solid, strong danger (destructive) action in the active state. */
588
- --gl-action-danger-border-color-strong-focus: var(--gl-color-red-100); /* Used for the border of a solid, strong danger (destructive) action in the focus state. */
589
- --gl-action-danger-border-color-strong-hover: var(--gl-color-red-100); /* Used for the border of a solid, strong danger (destructive) action in the hover state. */
590
- --gl-action-danger-border-color-strong-default: var(--gl-color-red-300); /* Used for the border of a solid, strong danger (destructive) action in the default state. */
591
- --gl-action-danger-border-color-active: var(--gl-color-red-50); /* Used for the border of an outlined danger (destructive) action in the active state. */
592
- --gl-action-danger-border-color-focus: var(--gl-color-red-200); /* Used for the border of an outlined danger (destructive) action in the focus state. */
593
- --gl-action-danger-border-color-hover: var(--gl-color-red-200); /* Used for the border of an outlined danger (destructive) action in the hover state. */
594
- --gl-action-danger-border-color-default: var(--gl-color-red-400); /* Used for the border of an outlined danger (destructive) action in the default state. */
595
- --gl-action-danger-background-color-strong-active: var(--gl-color-red-100); /* Used for the background of a solid, strong danger (destructive) action in the active state. */
596
- --gl-action-danger-background-color-strong-focus: var(--gl-color-red-300); /* Used for the background of a solid, strong danger (destructive) action in the focus state. */
597
- --gl-action-danger-background-color-strong-hover: var(--gl-color-red-300); /* Used for the background of a solid, strong danger (destructive) action in the hover state. */
598
- --gl-action-danger-background-color-strong-default: var(--gl-color-red-400); /* Used for the background of a solid, strong danger (destructive) action in the default state. */
599
- --gl-action-danger-background-color-subtle-active: var(--gl-color-red-800); /* Used for the background of a borderless, subtle danger (destructive) action in the active state. */
600
- --gl-action-danger-background-color-subtle-focus: var(--gl-color-red-900); /* Used for the background of a borderless, subtle danger (destructive) action in the focus state. */
601
- --gl-action-danger-background-color-subtle-hover: var(--gl-color-red-900); /* Used for the background of a borderless, subtle danger (destructive) action in the hover state. */
602
- --gl-action-danger-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle danger (destructive) action in the default state. */
603
- --gl-action-danger-background-color-active: var(--gl-color-red-800); /* Used for the background of an outlined danger (destructive) action in the active state. */
604
- --gl-action-danger-background-color-focus: var(--gl-color-red-900); /* Used for the background of an outlined danger (destructive) action in the focus state. */
605
- --gl-action-danger-background-color-hover: var(--gl-color-red-900); /* Used for the background of an outlined danger (destructive) action in the hover state. */
606
- --gl-action-danger-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined danger (destructive) action in the default state. */
607
- --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong confirm (positive) action background. */
608
- --gl-action-confirm-icon-color-active: var(--gl-color-blue-50); /* Used for the icon of a confirm (positive) action in the active state. */
609
- --gl-action-confirm-icon-color-focus: var(--gl-color-blue-200); /* Used for the icon of a confirm (positive) action in the focus state. */
610
- --gl-action-confirm-icon-color-hover: var(--gl-color-blue-200); /* Used for the icon of a confirm (positive) action in the hover state. */
611
- --gl-action-confirm-icon-color-default: var(--gl-color-blue-400); /* Used for the icon of a confirm (positive) action in the default state. */
612
- --gl-action-confirm-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong confirm (positive) action background. */
613
- --gl-action-confirm-text-color-active: var(--gl-color-blue-50); /* Used for the text of a confirm (positive) action in the active state. */
614
- --gl-action-confirm-text-color-focus: var(--gl-color-blue-200); /* Used for the text of a confirm (positive) action in the focus state. */
615
- --gl-action-confirm-text-color-hover: var(--gl-color-blue-200); /* Used for the text of a confirm (positive) action in the hover state. */
616
- --gl-action-confirm-text-color-default: var(--gl-color-blue-400); /* Used for the text of a confirm (positive) action in the default state. */
617
- --gl-action-confirm-border-color-strong-selected: var(--gl-color-blue-300); /* Used for the border of a solid, strong confirm (positive) action when in a selected or current state. */
618
- --gl-action-confirm-border-color-strong-active: var(--gl-color-blue-50); /* Used for the border of a solid, strong confirm (positive) action in the active state. */
619
- --gl-action-confirm-border-color-strong-focus: var(--gl-color-blue-100); /* Used for the border of a solid, strong confirm (positive) action in the focus state. */
620
- --gl-action-confirm-border-color-strong-hover: var(--gl-color-blue-100); /* Used for the border of a solid, strong confirm (positive) action in the hover state. */
621
- --gl-action-confirm-border-color-strong-default: var(--gl-color-blue-300); /* Used for the border of a solid, strong confirm (positive) action in the default state. */
622
- --gl-action-confirm-border-color-active: var(--gl-color-blue-50); /* Used for the border of an outlined confirm (positive) action in the active state. */
623
- --gl-action-confirm-border-color-focus: var(--gl-color-blue-200); /* Used for the border of an outlined confirm (positive) action in the focus state. */
624
- --gl-action-confirm-border-color-hover: var(--gl-color-blue-200); /* Used for the border of an outlined confirm (positive) action in the hover state. */
625
- --gl-action-confirm-border-color-default: var(--gl-color-blue-400); /* Used for the border of an outlined confirm (positive) action in the default state. */
626
- --gl-action-confirm-background-color-strong-selected: var(--gl-color-blue-400); /* Used for the background of a solid, strong confirm (positive) action when in a selected or current state. */
627
- --gl-action-confirm-background-color-strong-active: var(--gl-color-blue-200); /* Used for the background of a solid, strong confirm (positive) action in the active state. */
628
- --gl-action-confirm-background-color-strong-focus: var(--gl-color-blue-300); /* Used for the background of a solid, strong confirm (positive) action in the focus state. */
629
- --gl-action-confirm-background-color-strong-hover: var(--gl-color-blue-300); /* Used for the background of a solid, strong confirm (positive) action in the hover state. */
630
- --gl-action-confirm-background-color-strong-default: var(--gl-color-blue-400); /* Used for the background of a solid, strong confirm (positive) action in the default state. */
631
- --gl-action-confirm-background-color-subtle-active: var(--gl-color-blue-800); /* Used for the background of a borderless, subtle confirm (positive) action in the active state. */
632
- --gl-action-confirm-background-color-subtle-focus: var(--gl-color-blue-900); /* Used for the background of a borderless, subtle confirm (positive) action in the focus state. */
633
- --gl-action-confirm-background-color-subtle-hover: var(--gl-color-blue-900); /* Used for the background of a borderless, subtle confirm (positive) action in the hover state. */
634
- --gl-action-confirm-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle confirm (positive) action in the default state. */
635
- --gl-action-confirm-background-color-active: var(--gl-color-blue-800); /* Used for the background of an outlined confirm (positive) action in the active state. */
636
- --gl-action-confirm-background-color-focus: var(--gl-color-blue-900); /* Used for the background of an outlined confirm (positive) action in the focus state. */
637
- --gl-action-confirm-background-color-hover: var(--gl-color-blue-900); /* Used for the background of an outlined confirm (positive) action in the hover state. */
638
- --gl-action-confirm-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined confirm (positive) action in the default state. */
639
- --gl-action-neutral-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong neutral action background. */
640
- --gl-action-neutral-icon-color-active: var(--gl-color-neutral-50); /* Used for the icon of outlined and borderless neutral actions in the active state. */
641
- --gl-action-neutral-icon-color-focus: var(--gl-color-neutral-200); /* Used for the icon of outlined and borderless neutral actions in the focus state. */
642
- --gl-action-neutral-icon-color-hover: var(--gl-color-neutral-200); /* Used for the icon of outlined and borderless neutral actions in the hover state. */
643
- --gl-action-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of outlined and borderless neutral actions. */
644
- --gl-action-neutral-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong neutral action background. */
645
- --gl-action-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral action in the active state. */
646
- --gl-action-neutral-text-color-focus: var(--gl-color-neutral-50); /* Used for the text of a neutral action in the focus state. */
647
- --gl-action-neutral-text-color-hover: var(--gl-color-neutral-50); /* Used for the text of a neutral action in the hover state. */
648
- --gl-action-neutral-text-color-default: var(--gl-color-neutral-50); /* Used for the text of outlined and borderless neutral actions. */
649
- --gl-action-neutral-border-color-strong-active: var(--gl-color-neutral-50); /* Used for the border of a solid, strong neutral action in the active state. */
650
- --gl-action-neutral-border-color-strong-focus: var(--gl-color-neutral-100); /* Used for the border of a solid, strong neutral action in the focus state. */
651
- --gl-action-neutral-border-color-strong-hover: var(--gl-color-neutral-100); /* Used for the border of a solid, strong neutral action in the hover state. */
652
- --gl-action-neutral-border-color-strong-default: var(--gl-color-neutral-300); /* Used for the border of a solid, strong neutral action in the default state. */
653
- --gl-action-neutral-border-color-selected: var(--gl-color-neutral-700); /* Used for the border of a outlined neutral action when in a selected or current state. */
654
- --gl-action-neutral-border-color-active: var(--gl-color-neutral-300); /* Used for the border of an outlined neutral action in the active state. */
655
- --gl-action-neutral-border-color-focus: var(--gl-color-neutral-500); /* Used for the border of an outlined neutral action in the focus state. */
656
- --gl-action-neutral-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of an outlined neutral action in the hover state. */
657
- --gl-action-neutral-border-color-default: var(--gl-color-neutral-700); /* Used for the border of an outlined neutral action in the default state. */
658
- --gl-action-neutral-background-color-strong-active: var(--gl-color-neutral-200); /* Used for the background of a solid, strong neutral action in the active state. */
659
- --gl-action-neutral-background-color-strong-focus: var(--gl-color-neutral-300); /* Used for the background of a solid, strong neutral action in the focus state. */
660
- --gl-action-neutral-background-color-strong-hover: var(--gl-color-neutral-300); /* Used for the background of a solid, strong neutral action in the hover state. */
661
- --gl-action-neutral-background-color-strong-default: var(--gl-color-neutral-400); /* Used for the background of a solid, strong neutral action in the default state. */
662
- --gl-action-neutral-background-color-subtle-active: var(--gl-color-neutral-800); /* Used for the background of a borderless, subtle neutral action in the active state. */
663
- --gl-action-neutral-background-color-subtle-focus: var(--gl-color-neutral-900); /* Used for the background of a borderless, subtle neutral action in the focus state. */
664
- --gl-action-neutral-background-color-subtle-hover: var(--gl-color-neutral-900); /* Used for the background of a borderless, subtle neutral action in the hover state. */
665
- --gl-action-neutral-background-color-subtle-default: var(--gl-color-alpha-0); /* Used for the background of a borderless, subtle neutral action in the default state. */
666
- --gl-action-neutral-background-color-active: var(--gl-color-neutral-800); /* Used for the background of an outlined neutral action in the active state. */
667
- --gl-action-neutral-background-color-focus: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the focus state. */
668
- --gl-action-neutral-background-color-hover: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the hover state. */
669
- --gl-action-neutral-background-color-default: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the default state. */
670
- --gl-action-icon-color-disabled: var(--gl-color-neutral-500); /* Used for the icon of a disabled action. */
671
- --gl-action-text-color-disabled: var(--gl-color-neutral-400); /* Used for the text of a disabled action. */
672
- --gl-action-border-color-disabled: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
673
- --gl-action-background-color-disabled: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
586
+ --gl-action-danger-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a danger action in the default state. */
587
+ --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. */
588
+ --gl-action-danger-foreground-color-active: var(--gl-color-red-50); /* Used for the foreground of a danger (destructive) action in the active state. */
589
+ --gl-action-danger-foreground-color-hover: var(--gl-color-red-200); /* Used for the foreground of a danger (destructive) action in the hover state. */
590
+ --gl-action-danger-foreground-color-default: var(--gl-color-red-400); /* Used for the foreground of a danger (destructive) action in the default state. */
591
+ --gl-action-confirm-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a confirm action in the default state. */
592
+ --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. */
593
+ --gl-action-confirm-foreground-color-active: var(--gl-color-blue-50); /* Used for the foreground of a confirm (positive) action in the active state. */
594
+ --gl-action-confirm-foreground-color-hover: var(--gl-color-blue-200); /* Used for the foreground of a confirm (positive) action in the hover state. */
595
+ --gl-action-confirm-foreground-color-default: var(--gl-color-blue-400); /* Used for the foreground of a confirm (positive) action in the default state. */
596
+ --gl-action-neutral-border-color-default: var(--gl-color-alpha-0); /* Used for the border of a neutral action in the default state. */
597
+ --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. */
598
+ --gl-action-neutral-foreground-color-default: var(--gl-color-neutral-50); /* Used for the foreground of outlined and borderless neutral actions. */
599
+ --gl-action-disabled-border-color: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
600
+ --gl-action-disabled-background-color: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
601
+ --gl-action-disabled-foreground-color: var(--gl-color-neutral-500); /* Used for the foreground of a disabled action. */
674
602
  --gl-focus-ring-inner-color: var(--gl-background-color-default); /* Used for the inner neutral portion of the focus ring. */
675
603
  --gl-table-sorting-icon-color: var(--gl-text-color-heading); /* Used for the color of the sorting icons in the column headers. */
676
604
  --gl-table-row-background-color-hover: var(--gl-background-color-subtle); /* Used for the background of a table row in hover state. */
605
+ --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. */
606
+ --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. */
607
+ --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. */
608
+ --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. */
609
+ --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. */
610
+ --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. */
611
+ --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. */
612
+ --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. */
613
+ --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. */
614
+ --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. */
615
+ --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. */
616
+ --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. */
617
+ --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. */
618
+ --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. */
677
619
  }
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -3,103 +3,45 @@
3
3
  * Do not edit directly
4
4
  */
5
5
 
6
- export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#28272d'; // Used for the background of a disabled action.
7
- export const GL_ACTION_BORDER_COLOR_DISABLED = '#3a383f'; // Used for the border of a disabled action.
8
- export const GL_ACTION_TEXT_COLOR_DISABLED = '#89888d'; // Used for the text of a disabled action.
9
- export const GL_ACTION_ICON_COLOR_DISABLED = '#737278'; // Used for the icon of a disabled action.
10
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined neutral action in the default state.
11
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#28272d'; // Used for the background of an outlined neutral action in the hover state.
12
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#28272d'; // Used for the background of an outlined neutral action in the focus state.
13
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of an outlined neutral action in the active state.
14
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle neutral action in the default state.
15
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_HOVER = '#28272d'; // Used for the background of a borderless, subtle neutral action in the hover state.
16
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_FOCUS = '#28272d'; // Used for the background of a borderless, subtle neutral action in the focus state.
17
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#3a383f'; // Used for the background of a borderless, subtle neutral action in the active state.
18
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_DEFAULT = '#89888d'; // Used for the background of a solid, strong neutral action in the default state.
19
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_HOVER = '#a4a3a8'; // Used for the background of a solid, strong neutral action in the hover state.
20
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_FOCUS = '#a4a3a8'; // Used for the background of a solid, strong neutral action in the focus state.
21
- export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_ACTIVE = '#bfbfc3'; // Used for the background of a solid, strong neutral action in the active state.
22
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = '#4c4b51'; // Used for the border of an outlined neutral action in the default state.
23
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = '#737278'; // Used for the border of an outlined neutral action in the hover state.
24
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = '#737278'; // Used for the border of an outlined neutral action in the focus state.
25
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = '#a4a3a8'; // Used for the border of an outlined neutral action in the active state.
26
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_SELECTED = '#4c4b51'; // Used for the border of a outlined neutral action when in a selected or current state.
27
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_DEFAULT = '#a4a3a8'; // Used for the border of a solid, strong neutral action in the default state.
28
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_HOVER = '#dcdcde'; // Used for the border of a solid, strong neutral action in the hover state.
29
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_FOCUS = '#dcdcde'; // Used for the border of a solid, strong neutral action in the focus state.
30
- export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_ACTIVE = '#ececef'; // Used for the border of a solid, strong neutral action in the active state.
31
- export const GL_ACTION_NEUTRAL_TEXT_COLOR_DEFAULT = '#ececef'; // Used for the text of outlined and borderless neutral actions.
32
- export const GL_ACTION_NEUTRAL_TEXT_COLOR_HOVER = '#ececef'; // Used for the text of a neutral action in the hover state.
33
- export const GL_ACTION_NEUTRAL_TEXT_COLOR_FOCUS = '#ececef'; // Used for the text of a neutral action in the focus state.
34
- export const GL_ACTION_NEUTRAL_TEXT_COLOR_ACTIVE = '#ececef'; // Used for the text of a neutral action in the active state.
35
- export const GL_ACTION_NEUTRAL_TEXT_COLOR_STRONG = '#28272d'; // Used for the text on a solid, strong neutral action background.
36
- export const GL_ACTION_NEUTRAL_ICON_COLOR_DEFAULT = '#89888d'; // Used for the icon of outlined and borderless neutral actions.
37
- export const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#bfbfc3'; // Used for the icon of outlined and borderless neutral actions in the hover state.
38
- export const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#bfbfc3'; // Used for the icon of outlined and borderless neutral actions in the focus state.
39
- export const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#ececef'; // Used for the icon of outlined and borderless neutral actions in the active state.
40
- export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#28272d'; // Used for the icon on a solid, strong neutral action background.
41
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined confirm (positive) action in the default state.
42
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_HOVER = '#033464'; // Used for the background of an outlined confirm (positive) action in the hover state.
43
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = '#033464'; // Used for the background of an outlined confirm (positive) action in the focus state.
44
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#064787'; // Used for the background of an outlined confirm (positive) action in the active state.
45
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
46
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_HOVER = '#033464'; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
47
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_FOCUS = '#033464'; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
48
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#064787'; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
49
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_DEFAULT = '#428fdc'; // Used for the background of a solid, strong confirm (positive) action in the default state.
50
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_HOVER = '#63a6e9'; // Used for the background of a solid, strong confirm (positive) action in the hover state.
51
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_FOCUS = '#63a6e9'; // Used for the background of a solid, strong confirm (positive) action in the focus state.
52
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_ACTIVE = '#9dc7f1'; // Used for the background of a solid, strong confirm (positive) action in the active state.
53
- export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_STRONG_SELECTED = '#428fdc'; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
54
- export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = '#428fdc'; // Used for the border of an outlined confirm (positive) action in the default state.
55
- export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an outlined confirm (positive) action in the hover state.
56
- export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = '#9dc7f1'; // Used for the border of an outlined confirm (positive) action in the focus state.
57
- export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = '#e9f3fc'; // Used for the border of an outlined confirm (positive) action in the active state.
58
- export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_DEFAULT = '#63a6e9'; // Used for the border of a solid, strong confirm (positive) action in the default state.
59
- export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_HOVER = '#cbe2f9'; // Used for the border of a solid, strong confirm (positive) action in the hover state.
60
- export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_FOCUS = '#cbe2f9'; // Used for the border of a solid, strong confirm (positive) action in the focus state.
61
- export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_ACTIVE = '#e9f3fc'; // Used for the border of a solid, strong confirm (positive) action in the active state.
62
- export const GL_ACTION_CONFIRM_BORDER_COLOR_STRONG_SELECTED = '#63a6e9'; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
63
- export const GL_ACTION_CONFIRM_TEXT_COLOR_DEFAULT = '#428fdc'; // Used for the text of a confirm (positive) action in the default state.
64
- export const GL_ACTION_CONFIRM_TEXT_COLOR_HOVER = '#9dc7f1'; // Used for the text of a confirm (positive) action in the hover state.
65
- export const GL_ACTION_CONFIRM_TEXT_COLOR_FOCUS = '#9dc7f1'; // Used for the text of a confirm (positive) action in the focus state.
66
- export const GL_ACTION_CONFIRM_TEXT_COLOR_ACTIVE = '#e9f3fc'; // Used for the text of a confirm (positive) action in the active state.
67
- export const GL_ACTION_CONFIRM_TEXT_COLOR_STRONG = '#28272d'; // Used for the text on a solid, strong confirm (positive) action background.
68
- export const GL_ACTION_CONFIRM_ICON_COLOR_DEFAULT = '#428fdc'; // Used for the icon of a confirm (positive) action in the default state.
69
- export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the hover state.
70
- export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the focus state.
71
- export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#e9f3fc'; // Used for the icon of a confirm (positive) action in the active state.
72
- export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#28272d'; // Used for the icon on a solid, strong confirm (positive) action background.
73
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#28272d'; // Used for the background of an outlined danger (destructive) action in the default state.
74
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = '#660e00'; // Used for the background of an outlined danger (destructive) action in the hover state.
75
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = '#660e00'; // Used for the background of an outlined danger (destructive) action in the focus state.
76
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = '#8d1300'; // Used for the background of an outlined danger (destructive) action in the active state.
77
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_DEFAULT = 'transparent'; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
78
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_HOVER = '#660e00'; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
79
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_FOCUS = '#660e00'; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
80
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#8d1300'; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
81
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_DEFAULT = '#ec5941'; // Used for the background of a solid, strong danger (destructive) action in the default state.
82
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_HOVER = '#f57f6c'; // Used for the background of a solid, strong danger (destructive) action in the hover state.
83
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_FOCUS = '#f57f6c'; // Used for the background of a solid, strong danger (destructive) action in the focus state.
84
- export const GL_ACTION_DANGER_BACKGROUND_COLOR_STRONG_ACTIVE = '#fdd4cd'; // Used for the background of a solid, strong danger (destructive) action in the active state.
85
- export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = '#ec5941'; // Used for the border of an outlined danger (destructive) action in the default state.
86
- export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of an outlined danger (destructive) action in the hover state.
87
- export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = '#fcb5aa'; // Used for the border of an outlined danger (destructive) action in the focus state.
88
- export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = '#fcf1ef'; // Used for the border of an outlined danger (destructive) action in the active state.
89
- export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_DEFAULT = '#f57f6c'; // Used for the border of a solid, strong danger (destructive) action in the default state.
90
- export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_HOVER = '#fdd4cd'; // Used for the border of a solid, strong danger (destructive) action in the hover state.
91
- export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_FOCUS = '#fdd4cd'; // Used for the border of a solid, strong danger (destructive) action in the focus state.
92
- export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_ACTIVE = '#fcf1ef'; // Used for the border of a solid, strong danger (destructive) action in the active state.
93
- export const GL_ACTION_DANGER_TEXT_COLOR_DEFAULT = '#ec5941'; // Used for the text of a danger (destructive) action in the default state.
94
- export const GL_ACTION_DANGER_TEXT_COLOR_HOVER = '#fcb5aa'; // Used for the text of a danger (destructive) action in the hover state.
95
- export const GL_ACTION_DANGER_TEXT_COLOR_FOCUS = '#fcb5aa'; // Used for the text of a danger (destructive) action in the focus state.
96
- export const GL_ACTION_DANGER_TEXT_COLOR_ACTIVE = '#fcf1ef'; // Used for the text of a danger (destructive) action in the active state.
97
- export const GL_ACTION_DANGER_TEXT_COLOR_STRONG = '#28272d'; // Used for the text on a solid, strong danger (destructive) action background.
98
- export const GL_ACTION_DANGER_ICON_COLOR_DEFAULT = '#ec5941'; // Used for the icon of a danger (destructive) action in the default state.
99
- export const GL_ACTION_DANGER_ICON_COLOR_HOVER = '#fcb5aa'; // Used for the icon of a danger (destructive) action in the hover state.
100
- export const GL_ACTION_DANGER_ICON_COLOR_FOCUS = '#fcb5aa'; // Used for the icon of a danger (destructive) action in the focus state.
101
- export const GL_ACTION_DANGER_ICON_COLOR_ACTIVE = '#fcf1ef'; // Used for the icon of a danger (destructive) action in the active state.
102
- export const GL_ACTION_DANGER_ICON_COLOR_STRONG = '#28272d'; // Used for the icon on a solid, strong danger (destructive) action background.
6
+ export const GL_ACTION_DISABLED_FOREGROUND_COLOR = '#737278'; // Used for the foreground of a disabled action.
7
+ export const GL_ACTION_DISABLED_BACKGROUND_COLOR = '#28272d'; // Used for the background of a disabled action.
8
+ export const GL_ACTION_DISABLED_BORDER_COLOR = '#3a383f'; // Used for the border of a disabled action.
9
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#ececef'; // Used for the foreground of outlined and borderless neutral actions.
10
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_HOVER = '#ececef'; // Used for the foreground of a neutral action in the hover state.
11
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#ececef'; // Used for the foreground of a neutral action in the focus state.
12
+ export const GL_ACTION_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#ececef'; // Used for the foreground of a neutral action in the active state.
13
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = 'rgba(137, 136, 141, 0.0)'; // Used for the background of a neutral action in the default state.
14
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = 'rgba(137, 136, 141, 0.4)'; // Used for the background of a neutral action in the hover state.
15
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = 'rgba(137, 136, 141, 0.4)'; // Used for the background of a neutral action in the focus state.
16
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = 'rgba(137, 136, 141, 0.16)'; // Used for the background of a neutral action in the active state.
17
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral action in the default state.
18
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a neutral action in the hover state.
19
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral action in the focus state.
20
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral action in the active state.
21
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the foreground of a confirm (positive) action in the default state.
22
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_HOVER = '#9dc7f1'; // Used for the foreground of a confirm (positive) action in the hover state.
23
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_FOCUS = '#9dc7f1'; // Used for the foreground of a confirm (positive) action in the focus state.
24
+ export const GL_ACTION_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#e9f3fc'; // Used for the foreground of a confirm (positive) action in the active state.
25
+ export const 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.
26
+ export const 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.
27
+ export const GL_ACTION_CONFIRM_BACKGROUND_COLOR_FOCUS = 'rgba(66, 143, 220, 0.4)'; // Used for the background of a confirm (positive) action in the focus state.
28
+ export const 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.
29
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a confirm action in the default state.
30
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a confirm action in the hover state.
31
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a confirm action in the focus state.
32
+ export const GL_ACTION_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a confirm action in the active state.
33
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_DEFAULT = '#ec5941'; // Used for the foreground of a danger (destructive) action in the default state.
34
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_HOVER = '#fcb5aa'; // Used for the foreground of a danger (destructive) action in the hover state.
35
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_FOCUS = '#fcb5aa'; // Used for the foreground of a danger (destructive) action in the focus state.
36
+ export const GL_ACTION_DANGER_FOREGROUND_COLOR_ACTIVE = '#fcf1ef'; // Used for the foreground of a danger (destructive) action in the active state.
37
+ export const 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.
38
+ export const 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.
39
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = 'rgba(236, 89, 65, 0.4)'; // Used for the background of a danger (destructive) action in the focus state.
40
+ export const 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.
41
+ export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger action in the default state.
42
+ export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a danger action in the hover state.
43
+ export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger action in the focus state.
44
+ export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger action in the active state.
103
45
  export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d'; // Used for the default background color.
104
46
  export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d'; // Used to slightly differentiate the background from the default.
105
47
  export const GL_BACKGROUND_COLOR_STRONG = '#3a383f'; // Used to make the background easily stand out from the default.