@gitlab/ui 85.12.1 → 85.13.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 (39) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/components/base/skeleton_loader/skeleton_loader.js +3 -3
  3. package/dist/components/experimental/duo/chat/constants.js +2 -1
  4. package/dist/components/experimental/duo/chat/duo_chat.js +5 -2
  5. package/dist/index.css +2 -2
  6. package/dist/index.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +34 -1
  8. package/dist/tokens/build/js/tokens.js +34 -1
  9. package/dist/tokens/css/tokens.css +33 -0
  10. package/dist/tokens/css/tokens.dark.css +33 -0
  11. package/dist/tokens/js/tokens.dark.js +33 -0
  12. package/dist/tokens/js/tokens.js +33 -0
  13. package/dist/tokens/json/tokens.dark.json +827 -0
  14. package/dist/tokens/json/tokens.json +827 -0
  15. package/dist/tokens/scss/_tokens.dark.scss +33 -0
  16. package/dist/tokens/scss/_tokens.scss +33 -0
  17. package/dist/tokens/scss/_tokens_custom_properties.scss +33 -0
  18. package/dist/utility_classes.css +1 -1
  19. package/dist/utility_classes.css.map +1 -1
  20. package/package.json +1 -2
  21. package/src/components/base/form/form_checkbox/form_checkbox.scss +55 -36
  22. package/src/components/base/skeleton_loader/skeleton_loader.scss +2 -2
  23. package/src/components/base/skeleton_loader/skeleton_loader.vue +3 -3
  24. package/src/components/experimental/duo/chat/constants.js +1 -0
  25. package/src/components/experimental/duo/chat/duo_chat.md +11 -1
  26. package/src/components/experimental/duo/chat/duo_chat.vue +5 -2
  27. package/src/scss/mixins.scss +4 -3
  28. package/src/scss/variables.scss +5 -4
  29. package/src/tokens/action.tokens.json +261 -0
  30. package/src/tokens/build/css/tokens.css +33 -0
  31. package/src/tokens/build/css/tokens.dark.css +33 -0
  32. package/src/tokens/build/js/tokens.dark.js +33 -0
  33. package/src/tokens/build/js/tokens.js +33 -0
  34. package/src/tokens/build/json/tokens.dark.json +827 -0
  35. package/src/tokens/build/json/tokens.json +827 -0
  36. package/src/tokens/build/scss/_tokens.dark.scss +33 -0
  37. package/src/tokens/build/scss/_tokens.scss +33 -0
  38. package/src/tokens/build/scss/_tokens_custom_properties.scss +33 -0
  39. package/src/tokens/control.tokens.json +26 -0
package/src/tokens/build/css/tokens.css CHANGED
@@ -506,6 +506,9 @@
506
506
  --gl-control-placeholder-color: var(--gl-color-neutral-400); /* Used for placeholder text within inputs. */
507
507
  --gl-control-text-color-valid: var(--gl-color-green-500); /* Used for the helper text when the input is valid. */
508
508
  --gl-control-text-color-error: var(--gl-color-red-500); /* Used for the helper text when the input is invalid. */
509
+ --gl-control-border-color-selected-focus: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
510
+ --gl-control-border-color-selected-hover: var(--gl-color-blue-700); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
511
+ --gl-control-border-color-selected-default: var(--gl-color-blue-500); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
509
512
  --gl-control-border-color-error: var(--gl-color-red-500); /* Used for invalid form control (input, textarea) border. */
510
513
  --gl-control-border-color-disabled: var(--gl-color-neutral-100); /* Used for disabled form control (input, radio button, checkbox, textarea) border. */
511
514
  --gl-control-border-color-focus: var(--gl-color-neutral-900); /* Used for form control (input, radio button, checkbox, textarea) border on focus. */
@@ -539,6 +542,36 @@
539
542
  --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
540
543
  --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
541
544
  --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
545
+ --gl-action-danger-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong danger (destructive) action background. */
546
+ --gl-action-danger-icon-color-active: var(--gl-color-red-900); /* Used for the icon of a danger (destructive) action in the active state. */
547
+ --gl-action-danger-icon-color-focus: var(--gl-color-red-700); /* Used for the icon of a danger (destructive) action in the focus state. */
548
+ --gl-action-danger-icon-color-hover: var(--gl-color-red-700); /* Used for the icon of a danger (destructive) action in the hover state. */
549
+ --gl-action-danger-icon-color-default: var(--gl-color-red-500); /* Used for the icon of a danger (destructive) action in the default state. */
550
+ --gl-action-danger-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong danger (destructive) action background. */
551
+ --gl-action-danger-text-color-active: var(--gl-color-red-900); /* Used for the text of a danger (destructive) action in the active state. */
552
+ --gl-action-danger-text-color-focus: var(--gl-color-red-700); /* Used for the text of a danger (destructive) action in the focus state. */
553
+ --gl-action-danger-text-color-hover: var(--gl-color-red-700); /* Used for the text of a danger (destructive) action in the hover state. */
554
+ --gl-action-danger-text-color-default: var(--gl-color-red-500); /* Used for the text of a danger (destructive) action in the default state. */
555
+ --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. */
556
+ --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. */
557
+ --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. */
558
+ --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. */
559
+ --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. */
560
+ --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. */
561
+ --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. */
562
+ --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. */
563
+ --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. */
564
+ --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. */
565
+ --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. */
566
+ --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. */
567
+ --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. */
568
+ --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. */
569
+ --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. */
570
+ --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. */
571
+ --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. */
572
+ --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. */
573
+ --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. */
574
+ --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. */
542
575
  --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong confirm (positive) action background. */
543
576
  --gl-action-confirm-icon-color-active: var(--gl-color-blue-900); /* Used for the icon of a confirm (positive) action in the active state. */
544
577
  --gl-action-confirm-icon-color-focus: var(--gl-color-blue-700); /* Used for the icon of a confirm (positive) action in the focus state. */
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -506,6 +506,9 @@
506
506
  --gl-control-placeholder-color: var(--gl-color-neutral-500); /* Used for placeholder text within inputs. */
507
507
  --gl-control-text-color-valid: var(--gl-color-green-400); /* Used for the helper text when the input is valid. */
508
508
  --gl-control-text-color-error: var(--gl-color-red-400); /* Used for the helper text when the input is invalid. */
509
+ --gl-control-border-color-selected-focus: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus. */
510
+ --gl-control-border-color-selected-hover: var(--gl-color-blue-200); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover. */
511
+ --gl-control-border-color-selected-default: var(--gl-color-blue-400); /* Used for checked and indeterminate (selected) form control (checkbox, radio button) border. */
509
512
  --gl-control-border-color-error: var(--gl-color-red-400); /* Used for invalid form control (input, textarea) border. */
510
513
  --gl-control-border-color-disabled: var(--gl-color-neutral-800); /* Used for disabled form control (input, radio button, checkbox, textarea) border. */
511
514
  --gl-control-border-color-focus: var(--gl-color-neutral-50); /* Used for form control (input, radio button, checkbox, textarea) border on focus. */
@@ -539,6 +542,36 @@
539
542
  --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
540
543
  --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
541
544
  --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
545
+ --gl-action-danger-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong danger (destructive) action background. */
546
+ --gl-action-danger-icon-color-active: var(--gl-color-red-50); /* Used for the icon of a danger (destructive) action in the active state. */
547
+ --gl-action-danger-icon-color-focus: var(--gl-color-red-200); /* Used for the icon of a danger (destructive) action in the focus state. */
548
+ --gl-action-danger-icon-color-hover: var(--gl-color-red-200); /* Used for the icon of a danger (destructive) action in the hover state. */
549
+ --gl-action-danger-icon-color-default: var(--gl-color-red-400); /* Used for the icon of a danger (destructive) action in the default state. */
550
+ --gl-action-danger-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong danger (destructive) action background. */
551
+ --gl-action-danger-text-color-active: var(--gl-color-red-50); /* Used for the text of a danger (destructive) action in the active state. */
552
+ --gl-action-danger-text-color-focus: var(--gl-color-red-200); /* Used for the text of a danger (destructive) action in the focus state. */
553
+ --gl-action-danger-text-color-hover: var(--gl-color-red-200); /* Used for the text of a danger (destructive) action in the hover state. */
554
+ --gl-action-danger-text-color-default: var(--gl-color-red-400); /* Used for the text of a danger (destructive) action in the default state. */
555
+ --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. */
556
+ --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. */
557
+ --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. */
558
+ --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. */
559
+ --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. */
560
+ --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. */
561
+ --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. */
562
+ --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. */
563
+ --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. */
564
+ --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. */
565
+ --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. */
566
+ --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. */
567
+ --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. */
568
+ --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. */
569
+ --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. */
570
+ --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. */
571
+ --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. */
572
+ --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. */
573
+ --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. */
574
+ --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. */
542
575
  --gl-action-confirm-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong confirm (positive) action background. */
543
576
  --gl-action-confirm-icon-color-active: var(--gl-color-blue-50); /* Used for the icon of a confirm (positive) action in the active state. */
544
577
  --gl-action-confirm-icon-color-focus: var(--gl-color-blue-200); /* Used for the icon of a confirm (positive) action in the focus state. */
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -70,6 +70,36 @@ export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#9dc7f1'; // Used for the ico
70
70
  export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#9dc7f1'; // Used for the icon of a confirm (positive) action in the focus state.
71
71
  export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#e9f3fc'; // Used for the icon of a confirm (positive) action in the active state.
72
72
  export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#333238'; // Used for the icon on a solid, strong confirm (positive) action background.
73
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#333238'; // 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 = '#333238'; // 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 = '#333238'; // Used for the icon on a solid, strong danger (destructive) action background.
73
103
  export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
74
104
  export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
75
105
  export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
@@ -478,6 +508,9 @@ export const GL_CONTROL_BORDER_COLOR_HOVER = '#a4a3a8'; // Used for form control
478
508
  export const GL_CONTROL_BORDER_COLOR_FOCUS = '#ececef'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
479
509
  export const GL_CONTROL_BORDER_COLOR_DISABLED = '#434248'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
480
510
  export const GL_CONTROL_BORDER_COLOR_ERROR = '#ec5941'; // Used for invalid form control (input, textarea) border.
511
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#428fdc'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
512
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
513
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#9dc7f1'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
481
514
  export const GL_CONTROL_TEXT_COLOR_ERROR = '#ec5941'; // Used for the helper text when the input is invalid.
482
515
  export const GL_CONTROL_TEXT_COLOR_VALID = '#2da160'; // Used for the helper text when the input is valid.
483
516
  export const GL_CONTROL_PLACEHOLDER_COLOR = '#737278'; // Used for placeholder text within inputs.
package/src/tokens/build/js/tokens.js CHANGED
@@ -70,6 +70,36 @@ export const GL_ACTION_CONFIRM_ICON_COLOR_HOVER = '#0b5cad'; // Used for the ico
70
70
  export const GL_ACTION_CONFIRM_ICON_COLOR_FOCUS = '#0b5cad'; // Used for the icon of a confirm (positive) action in the focus state.
71
71
  export const GL_ACTION_CONFIRM_ICON_COLOR_ACTIVE = '#033464'; // Used for the icon of a confirm (positive) action in the active state.
72
72
  export const GL_ACTION_CONFIRM_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong confirm (positive) action background.
73
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined danger (destructive) action in the default state.
74
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_HOVER = '#fcf1ef'; // Used for the background of an outlined danger (destructive) action in the hover state.
75
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_FOCUS = '#fcf1ef'; // Used for the background of an outlined danger (destructive) action in the focus state.
76
+ export const GL_ACTION_DANGER_BACKGROUND_COLOR_ACTIVE = '#fdd4cd'; // 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 = '#fcf1ef'; // 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 = '#fcf1ef'; // 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 = '#fdd4cd'; // 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 = '#dd2b0e'; // 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 = '#c91c00'; // 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 = '#c91c00'; // 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 = '#8d1300'; // Used for the background of a solid, strong danger (destructive) action in the active state.
85
+ export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = '#dd2b0e'; // Used for the border of an outlined danger (destructive) action in the default state.
86
+ export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = '#ae1800'; // Used for the border of an outlined danger (destructive) action in the hover state.
87
+ export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = '#ae1800'; // Used for the border of an outlined danger (destructive) action in the focus state.
88
+ export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = '#660e00'; // Used for the border of an outlined danger (destructive) action in the active state.
89
+ export const GL_ACTION_DANGER_BORDER_COLOR_STRONG_DEFAULT = '#c91c00'; // 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 = '#8d1300'; // 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 = '#8d1300'; // 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 = '#660e00'; // Used for the border of a solid, strong danger (destructive) action in the active state.
93
+ export const GL_ACTION_DANGER_TEXT_COLOR_DEFAULT = '#dd2b0e'; // Used for the text of a danger (destructive) action in the default state.
94
+ export const GL_ACTION_DANGER_TEXT_COLOR_HOVER = '#ae1800'; // Used for the text of a danger (destructive) action in the hover state.
95
+ export const GL_ACTION_DANGER_TEXT_COLOR_FOCUS = '#ae1800'; // Used for the text of a danger (destructive) action in the focus state.
96
+ export const GL_ACTION_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger (destructive) action in the active state.
97
+ export const GL_ACTION_DANGER_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong danger (destructive) action background.
98
+ export const GL_ACTION_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger (destructive) action in the default state.
99
+ export const GL_ACTION_DANGER_ICON_COLOR_HOVER = '#ae1800'; // Used for the icon of a danger (destructive) action in the hover state.
100
+ export const GL_ACTION_DANGER_ICON_COLOR_FOCUS = '#ae1800'; // Used for the icon of a danger (destructive) action in the focus state.
101
+ export const GL_ACTION_DANGER_ICON_COLOR_ACTIVE = '#660e00'; // Used for the icon of a danger (destructive) action in the active state.
102
+ export const GL_ACTION_DANGER_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong danger (destructive) action background.
73
103
  export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
74
104
  export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
75
105
  export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
@@ -478,6 +508,9 @@ export const GL_CONTROL_BORDER_COLOR_HOVER = '#626168'; // Used for form control
478
508
  export const GL_CONTROL_BORDER_COLOR_FOCUS = '#333238'; // Used for form control (input, radio button, checkbox, textarea) border on focus.
479
509
  export const GL_CONTROL_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for disabled form control (input, radio button, checkbox, textarea) border.
480
510
  export const GL_CONTROL_BORDER_COLOR_ERROR = '#dd2b0e'; // Used for invalid form control (input, textarea) border.
511
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_DEFAULT = '#1f75cb'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border.
512
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_HOVER = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on hover.
513
+ export const GL_CONTROL_BORDER_COLOR_SELECTED_FOCUS = '#0b5cad'; // Used for checked and indeterminate (selected) form control (checkbox, radio button) border on focus.
481
514
  export const GL_CONTROL_TEXT_COLOR_ERROR = '#dd2b0e'; // Used for the helper text when the input is invalid.
482
515
  export const GL_CONTROL_TEXT_COLOR_VALID = '#108548'; // Used for the helper text when the input is valid.
483
516
  export const GL_CONTROL_PLACEHOLDER_COLOR = '#89888d'; // Used for placeholder text within inputs.