@gitlab/ui 86.14.4 → 87.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +24 -0
- package/dist/index.css +2 -2
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +40 -98
- package/dist/tokens/build/js/tokens.js +40 -98
- package/dist/tokens/css/tokens.css +39 -97
- package/dist/tokens/css/tokens.dark.css +39 -97
- package/dist/tokens/js/tokens.dark.js +39 -97
- package/dist/tokens/js/tokens.js +39 -97
- package/dist/tokens/json/tokens.dark.json +378 -1896
- package/dist/tokens/json/tokens.json +380 -1898
- package/dist/tokens/scss/_tokens.dark.scss +39 -97
- package/dist/tokens/scss/_tokens.scss +39 -97
- package/dist/tokens/scss/_tokens_custom_properties.scss +15 -73
- package/package.json +2 -2
- package/src/components/base/broadcast_message/broadcast_message.scss +1 -1
- package/src/components/base/button/button.scss +2 -2
- package/src/components/base/card/card.scss +4 -4
- package/src/components/base/carousel/carousel.scss +1 -2
- package/src/components/base/datepicker/datepicker.scss +1 -1
- package/src/components/base/daterange_picker/daterange_picker.scss +1 -1
- package/src/components/base/drawer/drawer.scss +5 -8
- package/src/components/base/dropdown/dropdown.scss +6 -13
- package/src/components/base/dropdown/dropdown_divider.scss +1 -3
- package/src/components/base/dropdown/dropdown_item.scss +2 -2
- package/src/components/base/filtered_search/filtered_search.scss +2 -2
- package/src/components/base/filtered_search/filtered_search_suggestion_list.scss +1 -1
- package/src/components/base/filtered_search/filtered_search_term.scss +1 -1
- package/src/components/base/filtered_search/filtered_search_token_segment.scss +1 -1
- package/src/components/base/form/form_input/form_input.scss +1 -1
- package/src/components/base/form/form_select/form_select.scss +1 -1
- package/src/components/base/label/label.scss +1 -1
- package/src/components/base/loading_icon/loading_icon.scss +1 -1
- package/src/components/base/modal/modal.scss +3 -3
- package/src/components/base/new_dropdowns/dropdown.scss +1 -3
- package/src/components/base/new_dropdowns/dropdown_item.scss +3 -3
- package/src/components/base/new_dropdowns/listbox/listbox.scss +1 -1
- package/src/components/base/pagination/pagination.scss +3 -3
- package/src/components/base/path/path.scss +1 -1
- package/src/components/base/popover/popover.scss +2 -4
- package/src/components/base/search_box_by_click/search_box_by_click.scss +1 -1
- package/src/components/base/search_box_by_type/search_box_by_type.scss +1 -1
- package/src/components/base/table/table.scss +4 -9
- package/src/components/base/tabs/tabs/tabs.scss +2 -5
- package/src/components/base/toggle/toggle.scss +1 -1
- package/src/components/base/tooltip/tooltip.scss +5 -5
- package/src/components/experimental/duo/chat/duo_chat.scss +2 -6
- package/src/components/shared_components/clear_icon_button/clear_icon_button.scss +1 -1
- package/src/tokens/action.tokens.json +101 -654
- package/src/tokens/build/css/tokens.css +39 -97
- package/src/tokens/build/css/tokens.dark.css +39 -97
- package/src/tokens/build/js/tokens.dark.js +39 -97
- package/src/tokens/build/js/tokens.js +39 -97
- package/src/tokens/build/json/tokens.dark.json +378 -1896
- package/src/tokens/build/json/tokens.json +380 -1898
- package/src/tokens/build/scss/_tokens.dark.scss +39 -97
- package/src/tokens/build/scss/_tokens.scss +39 -97
- package/src/tokens/build/scss/_tokens_custom_properties.scss +15 -73
|
@@ -405,6 +405,15 @@ $gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
|
|
|
405
405
|
$gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
|
|
406
406
|
$gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
|
|
407
407
|
$gl-color-alpha-0: transparent;
|
|
408
|
+
$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.
|
|
409
|
+
$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.
|
|
410
|
+
$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.
|
|
411
|
+
$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.
|
|
412
|
+
$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.
|
|
413
|
+
$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.
|
|
414
|
+
$gl-action-neutral-background-color-active: rgba(137, 136, 141, 0.16); // Used for the background of a neutral action in the active state.
|
|
415
|
+
$gl-action-neutral-background-color-hover: rgba(137, 136, 141, 0.4); // Used for the background of a neutral action in the hover state.
|
|
416
|
+
$gl-action-neutral-background-color-default: rgba(137, 136, 141, 0.0); // Used for the background of a neutral action in the default state.
|
|
408
417
|
$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
|
|
409
418
|
$gl-text-color-success: $gl-color-green-300; // Used for text indicating success or validity.
|
|
410
419
|
$gl-text-color-danger: $gl-color-red-300; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
|
|
@@ -572,103 +581,36 @@ $gl-background-color-disabled: $gl-color-neutral-900; // Used to identify a disa
|
|
|
572
581
|
$gl-background-color-strong: $gl-color-neutral-800; // Used to make the background easily stand out from the default.
|
|
573
582
|
$gl-background-color-subtle: $gl-color-neutral-900; // Used to slightly differentiate the background from the default.
|
|
574
583
|
$gl-background-color-default: $gl-color-neutral-950; // Used for the default background color.
|
|
575
|
-
$gl-action-danger-
|
|
576
|
-
$gl-action-danger-
|
|
577
|
-
$gl-action-danger-
|
|
578
|
-
$gl-action-danger-
|
|
579
|
-
$gl-action-danger-
|
|
580
|
-
$gl-action-
|
|
581
|
-
$gl-action-
|
|
582
|
-
$gl-action-
|
|
583
|
-
$gl-action-
|
|
584
|
-
$gl-action-
|
|
585
|
-
$gl-action-
|
|
586
|
-
$gl-action-
|
|
587
|
-
$gl-action-
|
|
588
|
-
$gl-action-
|
|
589
|
-
$gl-action-
|
|
590
|
-
$gl-action-
|
|
591
|
-
$gl-action-danger-border-color-hover: $gl-color-red-200; // Used for the border of an outlined danger (destructive) action in the hover state.
|
|
592
|
-
$gl-action-danger-border-color-default: $gl-color-red-400; // Used for the border of an outlined danger (destructive) action in the default state.
|
|
593
|
-
$gl-action-danger-background-color-strong-active: $gl-color-red-100; // Used for the background of a solid, strong danger (destructive) action in the active state.
|
|
594
|
-
$gl-action-danger-background-color-strong-focus: $gl-color-red-300; // Used for the background of a solid, strong danger (destructive) action in the focus state.
|
|
595
|
-
$gl-action-danger-background-color-strong-hover: $gl-color-red-300; // Used for the background of a solid, strong danger (destructive) action in the hover state.
|
|
596
|
-
$gl-action-danger-background-color-strong-default: $gl-color-red-400; // Used for the background of a solid, strong danger (destructive) action in the default state.
|
|
597
|
-
$gl-action-danger-background-color-subtle-active: $gl-color-red-800; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
|
|
598
|
-
$gl-action-danger-background-color-subtle-focus: $gl-color-red-900; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
|
|
599
|
-
$gl-action-danger-background-color-subtle-hover: $gl-color-red-900; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
|
|
600
|
-
$gl-action-danger-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
|
|
601
|
-
$gl-action-danger-background-color-active: $gl-color-red-800; // Used for the background of an outlined danger (destructive) action in the active state.
|
|
602
|
-
$gl-action-danger-background-color-focus: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the focus state.
|
|
603
|
-
$gl-action-danger-background-color-hover: $gl-color-red-900; // Used for the background of an outlined danger (destructive) action in the hover state.
|
|
604
|
-
$gl-action-danger-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined danger (destructive) action in the default state.
|
|
605
|
-
$gl-action-confirm-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong confirm (positive) action background.
|
|
606
|
-
$gl-action-confirm-icon-color-active: $gl-color-blue-50; // Used for the icon of a confirm (positive) action in the active state.
|
|
607
|
-
$gl-action-confirm-icon-color-focus: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the focus state.
|
|
608
|
-
$gl-action-confirm-icon-color-hover: $gl-color-blue-200; // Used for the icon of a confirm (positive) action in the hover state.
|
|
609
|
-
$gl-action-confirm-icon-color-default: $gl-color-blue-400; // Used for the icon of a confirm (positive) action in the default state.
|
|
610
|
-
$gl-action-confirm-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong confirm (positive) action background.
|
|
611
|
-
$gl-action-confirm-text-color-active: $gl-color-blue-50; // Used for the text of a confirm (positive) action in the active state.
|
|
612
|
-
$gl-action-confirm-text-color-focus: $gl-color-blue-200; // Used for the text of a confirm (positive) action in the focus state.
|
|
613
|
-
$gl-action-confirm-text-color-hover: $gl-color-blue-200; // Used for the text of a confirm (positive) action in the hover state.
|
|
614
|
-
$gl-action-confirm-text-color-default: $gl-color-blue-400; // Used for the text of a confirm (positive) action in the default state.
|
|
615
|
-
$gl-action-confirm-border-color-strong-selected: $gl-color-blue-300; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
|
|
616
|
-
$gl-action-confirm-border-color-strong-active: $gl-color-blue-50; // Used for the border of a solid, strong confirm (positive) action in the active state.
|
|
617
|
-
$gl-action-confirm-border-color-strong-focus: $gl-color-blue-100; // Used for the border of a solid, strong confirm (positive) action in the focus state.
|
|
618
|
-
$gl-action-confirm-border-color-strong-hover: $gl-color-blue-100; // Used for the border of a solid, strong confirm (positive) action in the hover state.
|
|
619
|
-
$gl-action-confirm-border-color-strong-default: $gl-color-blue-300; // Used for the border of a solid, strong confirm (positive) action in the default state.
|
|
620
|
-
$gl-action-confirm-border-color-active: $gl-color-blue-50; // Used for the border of an outlined confirm (positive) action in the active state.
|
|
621
|
-
$gl-action-confirm-border-color-focus: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) action in the focus state.
|
|
622
|
-
$gl-action-confirm-border-color-hover: $gl-color-blue-200; // Used for the border of an outlined confirm (positive) action in the hover state.
|
|
623
|
-
$gl-action-confirm-border-color-default: $gl-color-blue-400; // Used for the border of an outlined confirm (positive) action in the default state.
|
|
624
|
-
$gl-action-confirm-background-color-strong-selected: $gl-color-blue-400; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
|
|
625
|
-
$gl-action-confirm-background-color-strong-active: $gl-color-blue-200; // Used for the background of a solid, strong confirm (positive) action in the active state.
|
|
626
|
-
$gl-action-confirm-background-color-strong-focus: $gl-color-blue-300; // Used for the background of a solid, strong confirm (positive) action in the focus state.
|
|
627
|
-
$gl-action-confirm-background-color-strong-hover: $gl-color-blue-300; // Used for the background of a solid, strong confirm (positive) action in the hover state.
|
|
628
|
-
$gl-action-confirm-background-color-strong-default: $gl-color-blue-400; // Used for the background of a solid, strong confirm (positive) action in the default state.
|
|
629
|
-
$gl-action-confirm-background-color-subtle-active: $gl-color-blue-800; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
|
|
630
|
-
$gl-action-confirm-background-color-subtle-focus: $gl-color-blue-900; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
|
|
631
|
-
$gl-action-confirm-background-color-subtle-hover: $gl-color-blue-900; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
|
|
632
|
-
$gl-action-confirm-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
|
|
633
|
-
$gl-action-confirm-background-color-active: $gl-color-blue-800; // Used for the background of an outlined confirm (positive) action in the active state.
|
|
634
|
-
$gl-action-confirm-background-color-focus: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) action in the focus state.
|
|
635
|
-
$gl-action-confirm-background-color-hover: $gl-color-blue-900; // Used for the background of an outlined confirm (positive) action in the hover state.
|
|
636
|
-
$gl-action-confirm-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined confirm (positive) action in the default state.
|
|
637
|
-
$gl-action-neutral-icon-color-strong: $gl-color-neutral-900; // Used for the icon on a solid, strong neutral action background.
|
|
638
|
-
$gl-action-neutral-icon-color-active: $gl-color-neutral-50; // Used for the icon of outlined and borderless neutral actions in the active state.
|
|
639
|
-
$gl-action-neutral-icon-color-focus: $gl-color-neutral-200; // Used for the icon of outlined and borderless neutral actions in the focus state.
|
|
640
|
-
$gl-action-neutral-icon-color-hover: $gl-color-neutral-200; // Used for the icon of outlined and borderless neutral actions in the hover state.
|
|
641
|
-
$gl-action-neutral-icon-color-default: $gl-color-neutral-400; // Used for the icon of outlined and borderless neutral actions.
|
|
642
|
-
$gl-action-neutral-text-color-strong: $gl-color-neutral-900; // Used for the text on a solid, strong neutral action background.
|
|
643
|
-
$gl-action-neutral-text-color-active: $gl-color-neutral-50; // Used for the text of a neutral action in the active state.
|
|
644
|
-
$gl-action-neutral-text-color-focus: $gl-color-neutral-50; // Used for the text of a neutral action in the focus state.
|
|
645
|
-
$gl-action-neutral-text-color-hover: $gl-color-neutral-50; // Used for the text of a neutral action in the hover state.
|
|
646
|
-
$gl-action-neutral-text-color-default: $gl-color-neutral-50; // Used for the text of outlined and borderless neutral actions.
|
|
647
|
-
$gl-action-neutral-border-color-strong-active: $gl-color-neutral-50; // Used for the border of a solid, strong neutral action in the active state.
|
|
648
|
-
$gl-action-neutral-border-color-strong-focus: $gl-color-neutral-100; // Used for the border of a solid, strong neutral action in the focus state.
|
|
649
|
-
$gl-action-neutral-border-color-strong-hover: $gl-color-neutral-100; // Used for the border of a solid, strong neutral action in the hover state.
|
|
650
|
-
$gl-action-neutral-border-color-strong-default: $gl-color-neutral-300; // Used for the border of a solid, strong neutral action in the default state.
|
|
651
|
-
$gl-action-neutral-border-color-selected: $gl-color-neutral-700; // Used for the border of a outlined neutral action when in a selected or current state.
|
|
652
|
-
$gl-action-neutral-border-color-active: $gl-color-neutral-300; // Used for the border of an outlined neutral action in the active state.
|
|
653
|
-
$gl-action-neutral-border-color-focus: $gl-color-neutral-500; // Used for the border of an outlined neutral action in the focus state.
|
|
654
|
-
$gl-action-neutral-border-color-hover: $gl-color-neutral-500; // Used for the border of an outlined neutral action in the hover state.
|
|
655
|
-
$gl-action-neutral-border-color-default: $gl-color-neutral-700; // Used for the border of an outlined neutral action in the default state.
|
|
656
|
-
$gl-action-neutral-background-color-strong-active: $gl-color-neutral-200; // Used for the background of a solid, strong neutral action in the active state.
|
|
657
|
-
$gl-action-neutral-background-color-strong-focus: $gl-color-neutral-300; // Used for the background of a solid, strong neutral action in the focus state.
|
|
658
|
-
$gl-action-neutral-background-color-strong-hover: $gl-color-neutral-300; // Used for the background of a solid, strong neutral action in the hover state.
|
|
659
|
-
$gl-action-neutral-background-color-strong-default: $gl-color-neutral-400; // Used for the background of a solid, strong neutral action in the default state.
|
|
660
|
-
$gl-action-neutral-background-color-subtle-active: $gl-color-neutral-800; // Used for the background of a borderless, subtle neutral action in the active state.
|
|
661
|
-
$gl-action-neutral-background-color-subtle-focus: $gl-color-neutral-900; // Used for the background of a borderless, subtle neutral action in the focus state.
|
|
662
|
-
$gl-action-neutral-background-color-subtle-hover: $gl-color-neutral-900; // Used for the background of a borderless, subtle neutral action in the hover state.
|
|
663
|
-
$gl-action-neutral-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle neutral action in the default state.
|
|
664
|
-
$gl-action-neutral-background-color-active: $gl-color-neutral-800; // Used for the background of an outlined neutral action in the active state.
|
|
665
|
-
$gl-action-neutral-background-color-focus: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the focus state.
|
|
666
|
-
$gl-action-neutral-background-color-hover: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the hover state.
|
|
667
|
-
$gl-action-neutral-background-color-default: $gl-color-neutral-900; // Used for the background of an outlined neutral action in the default state.
|
|
668
|
-
$gl-action-icon-color-disabled: $gl-color-neutral-500; // Used for the icon of a disabled action.
|
|
669
|
-
$gl-action-text-color-disabled: $gl-color-neutral-400; // Used for the text of a disabled action.
|
|
670
|
-
$gl-action-border-color-disabled: $gl-color-neutral-800; // Used for the border of a disabled action.
|
|
671
|
-
$gl-action-background-color-disabled: $gl-color-neutral-900; // Used for the background of a disabled action.
|
|
584
|
+
$gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
|
|
585
|
+
$gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
|
|
586
|
+
$gl-action-danger-foreground-color-active: $gl-color-red-50; // Used for the foreground of a danger (destructive) action in the active state.
|
|
587
|
+
$gl-action-danger-foreground-color-hover: $gl-color-red-200; // Used for the foreground of a danger (destructive) action in the hover state.
|
|
588
|
+
$gl-action-danger-foreground-color-default: $gl-color-red-400; // Used for the foreground of a danger (destructive) action in the default state.
|
|
589
|
+
$gl-action-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm action in the default state.
|
|
590
|
+
$gl-action-confirm-background-color-focus: $gl-action-confirm-background-color-hover; // Used for the background of a confirm (positive) action in the focus state.
|
|
591
|
+
$gl-action-confirm-foreground-color-active: $gl-color-blue-50; // Used for the foreground of a confirm (positive) action in the active state.
|
|
592
|
+
$gl-action-confirm-foreground-color-hover: $gl-color-blue-200; // Used for the foreground of a confirm (positive) action in the hover state.
|
|
593
|
+
$gl-action-confirm-foreground-color-default: $gl-color-blue-400; // Used for the foreground of a confirm (positive) action in the default state.
|
|
594
|
+
$gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
|
|
595
|
+
$gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
|
|
596
|
+
$gl-action-neutral-foreground-color-default: $gl-color-neutral-50; // Used for the foreground of outlined and borderless neutral actions.
|
|
597
|
+
$gl-action-disabled-border-color: $gl-color-neutral-800; // Used for the border of a disabled action.
|
|
598
|
+
$gl-action-disabled-background-color: $gl-color-neutral-900; // Used for the background of a disabled action.
|
|
599
|
+
$gl-action-disabled-foreground-color: $gl-color-neutral-500; // Used for the foreground of a disabled action.
|
|
672
600
|
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
673
601
|
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
|
|
674
602
|
$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
|
|
603
|
+
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
|
|
604
|
+
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
|
|
605
|
+
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
|
|
606
|
+
$gl-action-danger-foreground-color-focus: $gl-action-danger-foreground-color-hover; // Used for the foreground of a danger (destructive) action in the focus state.
|
|
607
|
+
$gl-action-confirm-border-color-active: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the active state.
|
|
608
|
+
$gl-action-confirm-border-color-focus: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the focus state.
|
|
609
|
+
$gl-action-confirm-border-color-hover: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the hover state.
|
|
610
|
+
$gl-action-confirm-foreground-color-focus: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) action in the focus state.
|
|
611
|
+
$gl-action-neutral-border-color-active: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the active state.
|
|
612
|
+
$gl-action-neutral-border-color-focus: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the focus state.
|
|
613
|
+
$gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the hover state.
|
|
614
|
+
$gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
|
|
615
|
+
$gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
|
|
616
|
+
$gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
|
|
@@ -405,6 +405,15 @@ $gl-color-alpha-dark-6: rgba(05, 05, 06, 0.06);
|
|
|
405
405
|
$gl-color-alpha-dark-4: rgba(05, 05, 06, 0.04);
|
|
406
406
|
$gl-color-alpha-dark-2: rgba(05, 05, 06, 0.02);
|
|
407
407
|
$gl-color-alpha-0: transparent;
|
|
408
|
+
$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.
|
|
409
|
+
$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.
|
|
410
|
+
$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.
|
|
411
|
+
$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.
|
|
412
|
+
$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.
|
|
413
|
+
$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.
|
|
414
|
+
$gl-action-neutral-background-color-active: rgba(83, 81, 88, 0.24); // Used for the background of a neutral action in the active state.
|
|
415
|
+
$gl-action-neutral-background-color-hover: rgba(164, 163, 168, 0.16); // Used for the background of a neutral action in the hover state.
|
|
416
|
+
$gl-action-neutral-background-color-default: rgba(164, 163, 168, 0.0); // Used for the background of a neutral action in the default state.
|
|
408
417
|
$gl-text-color-disabled: $gl-color-neutral-400; // Used for disabled text.
|
|
409
418
|
$gl-text-color-success: $gl-color-green-600; // Used for text indicating success or validity.
|
|
410
419
|
$gl-text-color-danger: $gl-color-red-600; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
|
|
@@ -572,103 +581,36 @@ $gl-background-color-disabled: $gl-color-neutral-10; // Used to identify a disab
|
|
|
572
581
|
$gl-background-color-strong: $gl-color-neutral-50; // Used to make the background easily stand out from the default.
|
|
573
582
|
$gl-background-color-subtle: $gl-color-neutral-10; // Used to slightly differentiate the background from the default.
|
|
574
583
|
$gl-background-color-default: $gl-color-neutral-0; // Used for the default background color.
|
|
575
|
-
$gl-action-danger-
|
|
576
|
-
$gl-action-danger-
|
|
577
|
-
$gl-action-danger-
|
|
578
|
-
$gl-action-danger-
|
|
579
|
-
$gl-action-danger-
|
|
580
|
-
$gl-action-
|
|
581
|
-
$gl-action-
|
|
582
|
-
$gl-action-
|
|
583
|
-
$gl-action-
|
|
584
|
-
$gl-action-
|
|
585
|
-
$gl-action-
|
|
586
|
-
$gl-action-
|
|
587
|
-
$gl-action-
|
|
588
|
-
$gl-action-
|
|
589
|
-
$gl-action-
|
|
590
|
-
$gl-action-
|
|
591
|
-
$gl-action-danger-border-color-hover: $gl-color-red-700; // Used for the border of an outlined danger (destructive) action in the hover state.
|
|
592
|
-
$gl-action-danger-border-color-default: $gl-color-red-500; // Used for the border of an outlined danger (destructive) action in the default state.
|
|
593
|
-
$gl-action-danger-background-color-strong-active: $gl-color-red-800; // Used for the background of a solid, strong danger (destructive) action in the active state.
|
|
594
|
-
$gl-action-danger-background-color-strong-focus: $gl-color-red-600; // Used for the background of a solid, strong danger (destructive) action in the focus state.
|
|
595
|
-
$gl-action-danger-background-color-strong-hover: $gl-color-red-600; // Used for the background of a solid, strong danger (destructive) action in the hover state.
|
|
596
|
-
$gl-action-danger-background-color-strong-default: $gl-color-red-500; // Used for the background of a solid, strong danger (destructive) action in the default state.
|
|
597
|
-
$gl-action-danger-background-color-subtle-active: $gl-color-red-100; // Used for the background of a borderless, subtle danger (destructive) action in the active state.
|
|
598
|
-
$gl-action-danger-background-color-subtle-focus: $gl-color-red-50; // Used for the background of a borderless, subtle danger (destructive) action in the focus state.
|
|
599
|
-
$gl-action-danger-background-color-subtle-hover: $gl-color-red-50; // Used for the background of a borderless, subtle danger (destructive) action in the hover state.
|
|
600
|
-
$gl-action-danger-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle danger (destructive) action in the default state.
|
|
601
|
-
$gl-action-danger-background-color-active: $gl-color-red-100; // Used for the background of an outlined danger (destructive) action in the active state.
|
|
602
|
-
$gl-action-danger-background-color-focus: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the focus state.
|
|
603
|
-
$gl-action-danger-background-color-hover: $gl-color-red-50; // Used for the background of an outlined danger (destructive) action in the hover state.
|
|
604
|
-
$gl-action-danger-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined danger (destructive) action in the default state.
|
|
605
|
-
$gl-action-confirm-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong confirm (positive) action background.
|
|
606
|
-
$gl-action-confirm-icon-color-active: $gl-color-blue-900; // Used for the icon of a confirm (positive) action in the active state.
|
|
607
|
-
$gl-action-confirm-icon-color-focus: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the focus state.
|
|
608
|
-
$gl-action-confirm-icon-color-hover: $gl-color-blue-700; // Used for the icon of a confirm (positive) action in the hover state.
|
|
609
|
-
$gl-action-confirm-icon-color-default: $gl-color-blue-500; // Used for the icon of a confirm (positive) action in the default state.
|
|
610
|
-
$gl-action-confirm-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong confirm (positive) action background.
|
|
611
|
-
$gl-action-confirm-text-color-active: $gl-color-blue-900; // Used for the text of a confirm (positive) action in the active state.
|
|
612
|
-
$gl-action-confirm-text-color-focus: $gl-color-blue-700; // Used for the text of a confirm (positive) action in the focus state.
|
|
613
|
-
$gl-action-confirm-text-color-hover: $gl-color-blue-700; // Used for the text of a confirm (positive) action in the hover state.
|
|
614
|
-
$gl-action-confirm-text-color-default: $gl-color-blue-500; // Used for the text of a confirm (positive) action in the default state.
|
|
615
|
-
$gl-action-confirm-border-color-strong-selected: $gl-color-blue-600; // Used for the border of a solid, strong confirm (positive) action when in a selected or current state.
|
|
616
|
-
$gl-action-confirm-border-color-strong-active: $gl-color-blue-900; // Used for the border of a solid, strong confirm (positive) action in the active state.
|
|
617
|
-
$gl-action-confirm-border-color-strong-focus: $gl-color-blue-800; // Used for the border of a solid, strong confirm (positive) action in the focus state.
|
|
618
|
-
$gl-action-confirm-border-color-strong-hover: $gl-color-blue-800; // Used for the border of a solid, strong confirm (positive) action in the hover state.
|
|
619
|
-
$gl-action-confirm-border-color-strong-default: $gl-color-blue-600; // Used for the border of a solid, strong confirm (positive) action in the default state.
|
|
620
|
-
$gl-action-confirm-border-color-active: $gl-color-blue-900; // Used for the border of an outlined confirm (positive) action in the active state.
|
|
621
|
-
$gl-action-confirm-border-color-focus: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) action in the focus state.
|
|
622
|
-
$gl-action-confirm-border-color-hover: $gl-color-blue-700; // Used for the border of an outlined confirm (positive) action in the hover state.
|
|
623
|
-
$gl-action-confirm-border-color-default: $gl-color-blue-500; // Used for the border of an outlined confirm (positive) action in the default state.
|
|
624
|
-
$gl-action-confirm-background-color-strong-selected: $gl-color-blue-500; // Used for the background of a solid, strong confirm (positive) action when in a selected or current state.
|
|
625
|
-
$gl-action-confirm-background-color-strong-active: $gl-color-blue-700; // Used for the background of a solid, strong confirm (positive) action in the active state.
|
|
626
|
-
$gl-action-confirm-background-color-strong-focus: $gl-color-blue-600; // Used for the background of a solid, strong confirm (positive) action in the focus state.
|
|
627
|
-
$gl-action-confirm-background-color-strong-hover: $gl-color-blue-600; // Used for the background of a solid, strong confirm (positive) action in the hover state.
|
|
628
|
-
$gl-action-confirm-background-color-strong-default: $gl-color-blue-500; // Used for the background of a solid, strong confirm (positive) action in the default state.
|
|
629
|
-
$gl-action-confirm-background-color-subtle-active: $gl-color-blue-100; // Used for the background of a borderless, subtle confirm (positive) action in the active state.
|
|
630
|
-
$gl-action-confirm-background-color-subtle-focus: $gl-color-blue-50; // Used for the background of a borderless, subtle confirm (positive) action in the focus state.
|
|
631
|
-
$gl-action-confirm-background-color-subtle-hover: $gl-color-blue-50; // Used for the background of a borderless, subtle confirm (positive) action in the hover state.
|
|
632
|
-
$gl-action-confirm-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle confirm (positive) action in the default state.
|
|
633
|
-
$gl-action-confirm-background-color-active: $gl-color-blue-100; // Used for the background of an outlined confirm (positive) action in the active state.
|
|
634
|
-
$gl-action-confirm-background-color-focus: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) action in the focus state.
|
|
635
|
-
$gl-action-confirm-background-color-hover: $gl-color-blue-50; // Used for the background of an outlined confirm (positive) action in the hover state.
|
|
636
|
-
$gl-action-confirm-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined confirm (positive) action in the default state.
|
|
637
|
-
$gl-action-neutral-icon-color-strong: $gl-color-neutral-0; // Used for the icon on a solid, strong neutral action background.
|
|
638
|
-
$gl-action-neutral-icon-color-active: $gl-color-neutral-900; // Used for the icon of outlined and borderless neutral actions in the active state.
|
|
639
|
-
$gl-action-neutral-icon-color-focus: $gl-color-neutral-700; // Used for the icon of outlined and borderless neutral actions in the focus state.
|
|
640
|
-
$gl-action-neutral-icon-color-hover: $gl-color-neutral-700; // Used for the icon of outlined and borderless neutral actions in the hover state.
|
|
641
|
-
$gl-action-neutral-icon-color-default: $gl-color-neutral-500; // Used for the icon of outlined and borderless neutral actions.
|
|
642
|
-
$gl-action-neutral-text-color-strong: $gl-color-neutral-0; // Used for the text on a solid, strong neutral action background.
|
|
643
|
-
$gl-action-neutral-text-color-active: $gl-color-neutral-900; // Used for the text of a neutral action in the active state.
|
|
644
|
-
$gl-action-neutral-text-color-focus: $gl-color-neutral-900; // Used for the text of a neutral action in the focus state.
|
|
645
|
-
$gl-action-neutral-text-color-hover: $gl-color-neutral-900; // Used for the text of a neutral action in the hover state.
|
|
646
|
-
$gl-action-neutral-text-color-default: $gl-color-neutral-900; // Used for the text of outlined and borderless neutral actions.
|
|
647
|
-
$gl-action-neutral-border-color-strong-active: $gl-color-neutral-900; // Used for the border of a solid, strong neutral action in the active state.
|
|
648
|
-
$gl-action-neutral-border-color-strong-focus: $gl-color-neutral-800; // Used for the border of a solid, strong neutral action in the focus state.
|
|
649
|
-
$gl-action-neutral-border-color-strong-hover: $gl-color-neutral-800; // Used for the border of a solid, strong neutral action in the hover state.
|
|
650
|
-
$gl-action-neutral-border-color-strong-default: $gl-color-neutral-600; // Used for the border of a solid, strong neutral action in the default state.
|
|
651
|
-
$gl-action-neutral-border-color-selected: $gl-color-neutral-300; // Used for the border of a outlined neutral action when in a selected or current state.
|
|
652
|
-
$gl-action-neutral-border-color-active: $gl-color-neutral-600; // Used for the border of an outlined neutral action in the active state.
|
|
653
|
-
$gl-action-neutral-border-color-focus: $gl-color-neutral-400; // Used for the border of an outlined neutral action in the focus state.
|
|
654
|
-
$gl-action-neutral-border-color-hover: $gl-color-neutral-400; // Used for the border of an outlined neutral action in the hover state.
|
|
655
|
-
$gl-action-neutral-border-color-default: $gl-color-neutral-200; // Used for the border of an outlined neutral action in the default state.
|
|
656
|
-
$gl-action-neutral-background-color-strong-active: $gl-color-neutral-700; // Used for the background of a solid, strong neutral action in the active state.
|
|
657
|
-
$gl-action-neutral-background-color-strong-focus: $gl-color-neutral-600; // Used for the background of a solid, strong neutral action in the focus state.
|
|
658
|
-
$gl-action-neutral-background-color-strong-hover: $gl-color-neutral-600; // Used for the background of a solid, strong neutral action in the hover state.
|
|
659
|
-
$gl-action-neutral-background-color-strong-default: $gl-color-neutral-500; // Used for the background of a solid, strong neutral action in the default state.
|
|
660
|
-
$gl-action-neutral-background-color-subtle-active: $gl-color-neutral-100; // Used for the background of a borderless, subtle neutral action in the active state.
|
|
661
|
-
$gl-action-neutral-background-color-subtle-focus: $gl-color-neutral-50; // Used for the background of a borderless, subtle neutral action in the focus state.
|
|
662
|
-
$gl-action-neutral-background-color-subtle-hover: $gl-color-neutral-50; // Used for the background of a borderless, subtle neutral action in the hover state.
|
|
663
|
-
$gl-action-neutral-background-color-subtle-default: $gl-color-alpha-0; // Used for the background of a borderless, subtle neutral action in the default state.
|
|
664
|
-
$gl-action-neutral-background-color-active: $gl-color-neutral-100; // Used for the background of an outlined neutral action in the active state.
|
|
665
|
-
$gl-action-neutral-background-color-focus: $gl-color-neutral-50; // Used for the background of an outlined neutral action in the focus state.
|
|
666
|
-
$gl-action-neutral-background-color-hover: $gl-color-neutral-50; // Used for the background of an outlined neutral action in the hover state.
|
|
667
|
-
$gl-action-neutral-background-color-default: $gl-color-neutral-0; // Used for the background of an outlined neutral action in the default state.
|
|
668
|
-
$gl-action-icon-color-disabled: $gl-color-neutral-400; // Used for the icon of a disabled action.
|
|
669
|
-
$gl-action-text-color-disabled: $gl-color-neutral-500; // Used for the text of a disabled action.
|
|
670
|
-
$gl-action-border-color-disabled: $gl-color-neutral-100; // Used for the border of a disabled action.
|
|
671
|
-
$gl-action-background-color-disabled: $gl-color-neutral-50; // Used for the background of a disabled action.
|
|
584
|
+
$gl-action-danger-border-color-default: $gl-color-alpha-0; // Used for the border of a danger action in the default state.
|
|
585
|
+
$gl-action-danger-background-color-focus: $gl-action-danger-background-color-hover; // Used for the background of a danger (destructive) action in the focus state.
|
|
586
|
+
$gl-action-danger-foreground-color-active: $gl-color-red-900; // Used for the foreground of a danger (destructive) action in the active state.
|
|
587
|
+
$gl-action-danger-foreground-color-hover: $gl-color-red-700; // Used for the foreground of a danger (destructive) action in the hover state.
|
|
588
|
+
$gl-action-danger-foreground-color-default: $gl-color-red-500; // Used for the foreground of a danger (destructive) action in the default state.
|
|
589
|
+
$gl-action-confirm-border-color-default: $gl-color-alpha-0; // Used for the border of a confirm action in the default state.
|
|
590
|
+
$gl-action-confirm-background-color-focus: $gl-action-confirm-background-color-hover; // Used for the background of a confirm (positive) action in the focus state.
|
|
591
|
+
$gl-action-confirm-foreground-color-active: $gl-color-blue-900; // Used for the foreground of a confirm (positive) action in the active state.
|
|
592
|
+
$gl-action-confirm-foreground-color-hover: $gl-color-blue-700; // Used for the foreground of a confirm (positive) action in the hover state.
|
|
593
|
+
$gl-action-confirm-foreground-color-default: $gl-color-blue-500; // Used for the foreground of a confirm (positive) action in the default state.
|
|
594
|
+
$gl-action-neutral-border-color-default: $gl-color-alpha-0; // Used for the border of a neutral action in the default state.
|
|
595
|
+
$gl-action-neutral-background-color-focus: $gl-action-neutral-background-color-hover; // Used for the background of a neutral action in the focus state.
|
|
596
|
+
$gl-action-neutral-foreground-color-default: $gl-color-neutral-900; // Used for the foreground of outlined and borderless neutral actions.
|
|
597
|
+
$gl-action-disabled-border-color: $gl-color-neutral-100; // Used for the border of a disabled action.
|
|
598
|
+
$gl-action-disabled-background-color: $gl-color-neutral-50; // Used for the background of a disabled action.
|
|
599
|
+
$gl-action-disabled-foreground-color: $gl-color-neutral-400; // Used for the foreground of a disabled action.
|
|
672
600
|
$gl-focus-ring-inner-color: $gl-background-color-default; // Used for the inner neutral portion of the focus ring.
|
|
673
601
|
$gl-table-sorting-icon-color: $gl-text-color-heading; // Used for the color of the sorting icons in the column headers.
|
|
674
602
|
$gl-table-row-background-color-hover: $gl-background-color-subtle; // Used for the background of a table row in hover state.
|
|
603
|
+
$gl-action-danger-border-color-active: $gl-action-danger-border-color-default; // Used for the border of a danger action in the active state.
|
|
604
|
+
$gl-action-danger-border-color-focus: $gl-action-danger-border-color-default; // Used for the border of a danger action in the focus state.
|
|
605
|
+
$gl-action-danger-border-color-hover: $gl-action-danger-border-color-default; // Used for the border of a danger action in the hover state.
|
|
606
|
+
$gl-action-danger-foreground-color-focus: $gl-action-danger-foreground-color-hover; // Used for the foreground of a danger (destructive) action in the focus state.
|
|
607
|
+
$gl-action-confirm-border-color-active: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the active state.
|
|
608
|
+
$gl-action-confirm-border-color-focus: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the focus state.
|
|
609
|
+
$gl-action-confirm-border-color-hover: $gl-action-confirm-border-color-default; // Used for the border of a confirm action in the hover state.
|
|
610
|
+
$gl-action-confirm-foreground-color-focus: $gl-action-confirm-foreground-color-hover; // Used for the foreground of a confirm (positive) action in the focus state.
|
|
611
|
+
$gl-action-neutral-border-color-active: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the active state.
|
|
612
|
+
$gl-action-neutral-border-color-focus: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the focus state.
|
|
613
|
+
$gl-action-neutral-border-color-hover: $gl-action-neutral-border-color-default; // Used for the border of a neutral action in the hover state.
|
|
614
|
+
$gl-action-neutral-foreground-color-active: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the active state.
|
|
615
|
+
$gl-action-neutral-foreground-color-focus: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the focus state.
|
|
616
|
+
$gl-action-neutral-foreground-color-hover: $gl-action-neutral-foreground-color-default; // Used for the foreground of a neutral action in the hover state.
|
|
@@ -3,103 +3,45 @@
|
|
|
3
3
|
* Do not edit directly
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
|
-
$gl-action-
|
|
7
|
-
$gl-action-
|
|
8
|
-
$gl-action-
|
|
9
|
-
$gl-action-
|
|
6
|
+
$gl-action-disabled-foreground-color: var(--gl-action-disabled-foreground-color);
|
|
7
|
+
$gl-action-disabled-background-color: var(--gl-action-disabled-background-color);
|
|
8
|
+
$gl-action-disabled-border-color: var(--gl-action-disabled-border-color);
|
|
9
|
+
$gl-action-neutral-foreground-color-default: var(--gl-action-neutral-foreground-color-default);
|
|
10
|
+
$gl-action-neutral-foreground-color-hover: var(--gl-action-neutral-foreground-color-hover);
|
|
11
|
+
$gl-action-neutral-foreground-color-focus: var(--gl-action-neutral-foreground-color-focus);
|
|
12
|
+
$gl-action-neutral-foreground-color-active: var(--gl-action-neutral-foreground-color-active);
|
|
10
13
|
$gl-action-neutral-background-color-default: var(--gl-action-neutral-background-color-default);
|
|
11
14
|
$gl-action-neutral-background-color-hover: var(--gl-action-neutral-background-color-hover);
|
|
12
15
|
$gl-action-neutral-background-color-focus: var(--gl-action-neutral-background-color-focus);
|
|
13
16
|
$gl-action-neutral-background-color-active: var(--gl-action-neutral-background-color-active);
|
|
14
|
-
$gl-action-neutral-background-color-subtle-default: var(--gl-action-neutral-background-color-subtle-default);
|
|
15
|
-
$gl-action-neutral-background-color-subtle-hover: var(--gl-action-neutral-background-color-subtle-hover);
|
|
16
|
-
$gl-action-neutral-background-color-subtle-focus: var(--gl-action-neutral-background-color-subtle-focus);
|
|
17
|
-
$gl-action-neutral-background-color-subtle-active: var(--gl-action-neutral-background-color-subtle-active);
|
|
18
|
-
$gl-action-neutral-background-color-strong-default: var(--gl-action-neutral-background-color-strong-default);
|
|
19
|
-
$gl-action-neutral-background-color-strong-hover: var(--gl-action-neutral-background-color-strong-hover);
|
|
20
|
-
$gl-action-neutral-background-color-strong-focus: var(--gl-action-neutral-background-color-strong-focus);
|
|
21
|
-
$gl-action-neutral-background-color-strong-active: var(--gl-action-neutral-background-color-strong-active);
|
|
22
17
|
$gl-action-neutral-border-color-default: var(--gl-action-neutral-border-color-default);
|
|
23
18
|
$gl-action-neutral-border-color-hover: var(--gl-action-neutral-border-color-hover);
|
|
24
19
|
$gl-action-neutral-border-color-focus: var(--gl-action-neutral-border-color-focus);
|
|
25
20
|
$gl-action-neutral-border-color-active: var(--gl-action-neutral-border-color-active);
|
|
26
|
-
$gl-action-
|
|
27
|
-
$gl-action-
|
|
28
|
-
$gl-action-
|
|
29
|
-
$gl-action-
|
|
30
|
-
$gl-action-neutral-border-color-strong-active: var(--gl-action-neutral-border-color-strong-active);
|
|
31
|
-
$gl-action-neutral-text-color-default: var(--gl-action-neutral-text-color-default);
|
|
32
|
-
$gl-action-neutral-text-color-hover: var(--gl-action-neutral-text-color-hover);
|
|
33
|
-
$gl-action-neutral-text-color-focus: var(--gl-action-neutral-text-color-focus);
|
|
34
|
-
$gl-action-neutral-text-color-active: var(--gl-action-neutral-text-color-active);
|
|
35
|
-
$gl-action-neutral-text-color-strong: var(--gl-action-neutral-text-color-strong);
|
|
36
|
-
$gl-action-neutral-icon-color-default: var(--gl-action-neutral-icon-color-default);
|
|
37
|
-
$gl-action-neutral-icon-color-hover: var(--gl-action-neutral-icon-color-hover);
|
|
38
|
-
$gl-action-neutral-icon-color-focus: var(--gl-action-neutral-icon-color-focus);
|
|
39
|
-
$gl-action-neutral-icon-color-active: var(--gl-action-neutral-icon-color-active);
|
|
40
|
-
$gl-action-neutral-icon-color-strong: var(--gl-action-neutral-icon-color-strong);
|
|
21
|
+
$gl-action-confirm-foreground-color-default: var(--gl-action-confirm-foreground-color-default);
|
|
22
|
+
$gl-action-confirm-foreground-color-hover: var(--gl-action-confirm-foreground-color-hover);
|
|
23
|
+
$gl-action-confirm-foreground-color-focus: var(--gl-action-confirm-foreground-color-focus);
|
|
24
|
+
$gl-action-confirm-foreground-color-active: var(--gl-action-confirm-foreground-color-active);
|
|
41
25
|
$gl-action-confirm-background-color-default: var(--gl-action-confirm-background-color-default);
|
|
42
26
|
$gl-action-confirm-background-color-hover: var(--gl-action-confirm-background-color-hover);
|
|
43
27
|
$gl-action-confirm-background-color-focus: var(--gl-action-confirm-background-color-focus);
|
|
44
28
|
$gl-action-confirm-background-color-active: var(--gl-action-confirm-background-color-active);
|
|
45
|
-
$gl-action-confirm-background-color-subtle-default: var(--gl-action-confirm-background-color-subtle-default);
|
|
46
|
-
$gl-action-confirm-background-color-subtle-hover: var(--gl-action-confirm-background-color-subtle-hover);
|
|
47
|
-
$gl-action-confirm-background-color-subtle-focus: var(--gl-action-confirm-background-color-subtle-focus);
|
|
48
|
-
$gl-action-confirm-background-color-subtle-active: var(--gl-action-confirm-background-color-subtle-active);
|
|
49
|
-
$gl-action-confirm-background-color-strong-default: var(--gl-action-confirm-background-color-strong-default);
|
|
50
|
-
$gl-action-confirm-background-color-strong-hover: var(--gl-action-confirm-background-color-strong-hover);
|
|
51
|
-
$gl-action-confirm-background-color-strong-focus: var(--gl-action-confirm-background-color-strong-focus);
|
|
52
|
-
$gl-action-confirm-background-color-strong-active: var(--gl-action-confirm-background-color-strong-active);
|
|
53
|
-
$gl-action-confirm-background-color-strong-selected: var(--gl-action-confirm-background-color-strong-selected);
|
|
54
29
|
$gl-action-confirm-border-color-default: var(--gl-action-confirm-border-color-default);
|
|
55
30
|
$gl-action-confirm-border-color-hover: var(--gl-action-confirm-border-color-hover);
|
|
56
31
|
$gl-action-confirm-border-color-focus: var(--gl-action-confirm-border-color-focus);
|
|
57
32
|
$gl-action-confirm-border-color-active: var(--gl-action-confirm-border-color-active);
|
|
58
|
-
$gl-action-
|
|
59
|
-
$gl-action-
|
|
60
|
-
$gl-action-
|
|
61
|
-
$gl-action-
|
|
62
|
-
$gl-action-confirm-border-color-strong-selected: var(--gl-action-confirm-border-color-strong-selected);
|
|
63
|
-
$gl-action-confirm-text-color-default: var(--gl-action-confirm-text-color-default);
|
|
64
|
-
$gl-action-confirm-text-color-hover: var(--gl-action-confirm-text-color-hover);
|
|
65
|
-
$gl-action-confirm-text-color-focus: var(--gl-action-confirm-text-color-focus);
|
|
66
|
-
$gl-action-confirm-text-color-active: var(--gl-action-confirm-text-color-active);
|
|
67
|
-
$gl-action-confirm-text-color-strong: var(--gl-action-confirm-text-color-strong);
|
|
68
|
-
$gl-action-confirm-icon-color-default: var(--gl-action-confirm-icon-color-default);
|
|
69
|
-
$gl-action-confirm-icon-color-hover: var(--gl-action-confirm-icon-color-hover);
|
|
70
|
-
$gl-action-confirm-icon-color-focus: var(--gl-action-confirm-icon-color-focus);
|
|
71
|
-
$gl-action-confirm-icon-color-active: var(--gl-action-confirm-icon-color-active);
|
|
72
|
-
$gl-action-confirm-icon-color-strong: var(--gl-action-confirm-icon-color-strong);
|
|
33
|
+
$gl-action-danger-foreground-color-default: var(--gl-action-danger-foreground-color-default);
|
|
34
|
+
$gl-action-danger-foreground-color-hover: var(--gl-action-danger-foreground-color-hover);
|
|
35
|
+
$gl-action-danger-foreground-color-focus: var(--gl-action-danger-foreground-color-focus);
|
|
36
|
+
$gl-action-danger-foreground-color-active: var(--gl-action-danger-foreground-color-active);
|
|
73
37
|
$gl-action-danger-background-color-default: var(--gl-action-danger-background-color-default);
|
|
74
38
|
$gl-action-danger-background-color-hover: var(--gl-action-danger-background-color-hover);
|
|
75
39
|
$gl-action-danger-background-color-focus: var(--gl-action-danger-background-color-focus);
|
|
76
40
|
$gl-action-danger-background-color-active: var(--gl-action-danger-background-color-active);
|
|
77
|
-
$gl-action-danger-background-color-subtle-default: var(--gl-action-danger-background-color-subtle-default);
|
|
78
|
-
$gl-action-danger-background-color-subtle-hover: var(--gl-action-danger-background-color-subtle-hover);
|
|
79
|
-
$gl-action-danger-background-color-subtle-focus: var(--gl-action-danger-background-color-subtle-focus);
|
|
80
|
-
$gl-action-danger-background-color-subtle-active: var(--gl-action-danger-background-color-subtle-active);
|
|
81
|
-
$gl-action-danger-background-color-strong-default: var(--gl-action-danger-background-color-strong-default);
|
|
82
|
-
$gl-action-danger-background-color-strong-hover: var(--gl-action-danger-background-color-strong-hover);
|
|
83
|
-
$gl-action-danger-background-color-strong-focus: var(--gl-action-danger-background-color-strong-focus);
|
|
84
|
-
$gl-action-danger-background-color-strong-active: var(--gl-action-danger-background-color-strong-active);
|
|
85
41
|
$gl-action-danger-border-color-default: var(--gl-action-danger-border-color-default);
|
|
86
42
|
$gl-action-danger-border-color-hover: var(--gl-action-danger-border-color-hover);
|
|
87
43
|
$gl-action-danger-border-color-focus: var(--gl-action-danger-border-color-focus);
|
|
88
44
|
$gl-action-danger-border-color-active: var(--gl-action-danger-border-color-active);
|
|
89
|
-
$gl-action-danger-border-color-strong-default: var(--gl-action-danger-border-color-strong-default);
|
|
90
|
-
$gl-action-danger-border-color-strong-hover: var(--gl-action-danger-border-color-strong-hover);
|
|
91
|
-
$gl-action-danger-border-color-strong-focus: var(--gl-action-danger-border-color-strong-focus);
|
|
92
|
-
$gl-action-danger-border-color-strong-active: var(--gl-action-danger-border-color-strong-active);
|
|
93
|
-
$gl-action-danger-text-color-default: var(--gl-action-danger-text-color-default);
|
|
94
|
-
$gl-action-danger-text-color-hover: var(--gl-action-danger-text-color-hover);
|
|
95
|
-
$gl-action-danger-text-color-focus: var(--gl-action-danger-text-color-focus);
|
|
96
|
-
$gl-action-danger-text-color-active: var(--gl-action-danger-text-color-active);
|
|
97
|
-
$gl-action-danger-text-color-strong: var(--gl-action-danger-text-color-strong);
|
|
98
|
-
$gl-action-danger-icon-color-default: var(--gl-action-danger-icon-color-default);
|
|
99
|
-
$gl-action-danger-icon-color-hover: var(--gl-action-danger-icon-color-hover);
|
|
100
|
-
$gl-action-danger-icon-color-focus: var(--gl-action-danger-icon-color-focus);
|
|
101
|
-
$gl-action-danger-icon-color-active: var(--gl-action-danger-icon-color-active);
|
|
102
|
-
$gl-action-danger-icon-color-strong: var(--gl-action-danger-icon-color-strong);
|
|
103
45
|
$gl-background-color-default: var(--gl-background-color-default);
|
|
104
46
|
$gl-background-color-subtle: var(--gl-background-color-subtle);
|
|
105
47
|
$gl-background-color-strong: var(--gl-background-color-strong);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@gitlab/ui",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "87.0.0",
|
|
4
4
|
"description": "GitLab UI Components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"main": "dist/index.js",
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
"@gitlab/eslint-plugin": "19.6.0",
|
|
115
115
|
"@gitlab/fonts": "^1.3.0",
|
|
116
116
|
"@gitlab/stylelint-config": "6.1.0",
|
|
117
|
-
"@gitlab/svgs": "3.
|
|
117
|
+
"@gitlab/svgs": "3.108.0",
|
|
118
118
|
"@jest/test-sequencer": "^29.7.0",
|
|
119
119
|
"@rollup/plugin-commonjs": "^11.1.0",
|
|
120
120
|
"@rollup/plugin-node-resolve": "^7.1.3",
|
|
@@ -81,7 +81,7 @@ $gl-broadcast-message-padding-x: var(--gl-broadcast-message-padding-x, 0px);
|
|
|
81
81
|
&.notification {
|
|
82
82
|
@include gl-rounded-base;
|
|
83
83
|
@include gl-bg-white;
|
|
84
|
-
@
|
|
84
|
+
@apply gl-border;
|
|
85
85
|
@include gl-shadow-x0-y2-b4-s0;
|
|
86
86
|
max-width: $gl-broadcast-message-notification-max-width;
|
|
87
87
|
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
|
|
22
22
|
.gl-button.gl-button,
|
|
23
23
|
.gl-button.gl-button.btn-block {
|
|
24
|
-
@
|
|
24
|
+
@apply gl-border-0;
|
|
25
25
|
@include gl-py-3;
|
|
26
26
|
@include gl-px-4;
|
|
27
27
|
@include gl-bg-transparent;
|
|
@@ -456,7 +456,7 @@
|
|
|
456
456
|
|
|
457
457
|
&.btn-link {
|
|
458
458
|
@include gl-bg-transparent;
|
|
459
|
-
@
|
|
459
|
+
@apply gl-border-0;
|
|
460
460
|
@include gl-font-base;
|
|
461
461
|
@include gl-line-height-normal;
|
|
462
462
|
@include gl-text-blue-500;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
.gl-card {
|
|
2
2
|
background-color: var(--gl-background-color-default);
|
|
3
|
-
@
|
|
3
|
+
@apply gl-border-solid;
|
|
4
4
|
@include gl-display-flex;
|
|
5
5
|
@include gl-flex-direction-column;
|
|
6
6
|
@include gl-overflow-wrap-break;
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
.gl-card,
|
|
13
13
|
.gl-card-header,
|
|
14
14
|
.gl-card-footer {
|
|
15
|
-
@
|
|
15
|
+
@apply gl-border-1;
|
|
16
16
|
border-color: var(--gl-border-color-default);
|
|
17
17
|
}
|
|
18
18
|
|
|
@@ -23,14 +23,14 @@
|
|
|
23
23
|
}
|
|
24
24
|
|
|
25
25
|
.gl-card-header {
|
|
26
|
-
@
|
|
26
|
+
@apply gl-border-b-solid;
|
|
27
27
|
border-top-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
28
28
|
border-top-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
29
29
|
color: var(--gl-text-color-heading);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
32
|
.gl-card-footer {
|
|
33
|
-
@
|
|
33
|
+
@apply gl-border-t-solid;
|
|
34
34
|
border-bottom-left-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
35
35
|
border-bottom-right-radius: calc($gl-border-radius-base - $gl-border-size-1);
|
|
36
36
|
}
|