@gitlab/ui 85.1.0 → 85.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (27) 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 +50 -1
  5. package/dist/tokens/build/js/tokens.js +50 -1
  6. package/dist/tokens/css/tokens.css +49 -0
  7. package/dist/tokens/css/tokens.dark.css +49 -0
  8. package/dist/tokens/js/tokens.dark.js +49 -0
  9. package/dist/tokens/js/tokens.js +49 -0
  10. package/dist/tokens/json/tokens.dark.json +1254 -0
  11. package/dist/tokens/json/tokens.json +1254 -0
  12. package/dist/tokens/scss/_tokens.dark.scss +49 -0
  13. package/dist/tokens/scss/_tokens.scss +49 -0
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +49 -0
  15. package/package.json +1 -1
  16. package/src/components/base/alert/alert.scss +12 -14
  17. package/src/tokens/action.tokens.json +318 -0
  18. package/src/tokens/build/css/tokens.css +49 -0
  19. package/src/tokens/build/css/tokens.dark.css +49 -0
  20. package/src/tokens/build/js/tokens.dark.js +49 -0
  21. package/src/tokens/build/js/tokens.js +49 -0
  22. package/src/tokens/build/json/tokens.dark.json +1254 -0
  23. package/src/tokens/build/json/tokens.json +1254 -0
  24. package/src/tokens/build/scss/_tokens.dark.scss +49 -0
  25. package/src/tokens/build/scss/_tokens.scss +49 -0
  26. package/src/tokens/build/scss/_tokens_custom_properties.scss +49 -0
  27. package/src/tokens/feedback.tokens.json +162 -0
package/src/tokens/build/css/tokens.css CHANGED
@@ -486,6 +486,20 @@
486
486
  --gl-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon with the highest contrast. */
487
487
  --gl-icon-color-subtle: var(--gl-color-neutral-500); /* Used for a static or decorational icon. Can be paired with subtle text. */
488
488
  --gl-icon-color-default: var(--gl-color-neutral-700); /* Used for the default icon color. Can be paired with default text. */
489
+ --gl-feedback-danger-icon-color: var(--gl-color-red-600); /* Used for an icon associated with danger or critical feedback. */
490
+ --gl-feedback-danger-background-color: var(--gl-color-red-50); /* Used for a background associated with danger or critical feedback. */
491
+ --gl-feedback-warning-icon-color: var(--gl-color-orange-600); /* Used for an icon associated with warning feedback or confidential content. */
492
+ --gl-feedback-warning-background-color: var(--gl-color-orange-50); /* Used for a background associated with warning feedback or to let a user know about confidential content. */
493
+ --gl-feedback-success-icon-color: var(--gl-color-green-600); /* Used for an icon associated with successful feedback or a new section. */
494
+ --gl-feedback-success-background-color: var(--gl-color-green-50); /* Used for a background associated with successful feedback or a new section resulting from a user action. */
495
+ --gl-feedback-info-icon-color: var(--gl-color-blue-600); /* Used for an icon associated with informational feedback. */
496
+ --gl-feedback-info-background-color: var(--gl-color-blue-50); /* Used for a background associated with informational feedback or a highlighted section resulting from a user action. */
497
+ --gl-feedback-neutral-icon-color: var(--gl-color-neutral-600); /* Used for an icon associated with a neutral feedback section. */
498
+ --gl-feedback-neutral-background-color: var(--gl-color-neutral-50); /* Used for a background associated with neutral feedback. */
499
+ --gl-feedback-link-color-strong: var(--gl-color-blue-300); /* Used for a link on a strong feedback background. */
500
+ --gl-feedback-icon-color-strong: var(--gl-color-neutral-0); /* Used for an icon on a strong feedback background. */
501
+ --gl-feedback-text-color-strong: var(--gl-color-neutral-0); /* Used for text on a strong feedback background. */
502
+ --gl-feedback-background-color-strong: var(--gl-color-neutral-950); /* Used for a background associated with feedback like a tooltip or toast message. */
489
503
  --gl-breadcrumb-separator-color: var(--gl-color-neutral-200); /* Used for the breadcrumb level separator. */
490
504
  --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
491
505
  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
@@ -495,4 +509,39 @@
495
509
  --gl-background-color-strong: var(--gl-color-neutral-50); /* Used to make the background easily stand out from the default. */
496
510
  --gl-background-color-subtle: var(--gl-color-neutral-10); /* Used to slightly differentiate the background from the default. */
497
511
  --gl-background-color-default: var(--gl-color-neutral-0); /* Used for the default background color. */
512
+ --gl-action-neutral-icon-color-strong: var(--gl-color-neutral-0); /* Used for the icon on a solid, strong neutral action background. */
513
+ --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. */
514
+ --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. */
515
+ --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. */
516
+ --gl-action-neutral-icon-color-default: var(--gl-color-neutral-500); /* Used for the icon of outlined and borderless neutral actions. */
517
+ --gl-action-neutral-text-color-strong: var(--gl-color-neutral-0); /* Used for the text on a solid, strong neutral action background. */
518
+ --gl-action-neutral-text-color-active: var(--gl-color-neutral-900); /* Used for the text of a neutral action in the active state. */
519
+ --gl-action-neutral-text-color-focus: var(--gl-color-neutral-900); /* Used for the text of a neutral action in the focus state. */
520
+ --gl-action-neutral-text-color-hover: var(--gl-color-neutral-900); /* Used for the text of a neutral action in the hover state. */
521
+ --gl-action-neutral-text-color-default: var(--gl-color-neutral-900); /* Used for the text of outlined and borderless neutral actions. */
522
+ --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. */
523
+ --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. */
524
+ --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. */
525
+ --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. */
526
+ --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. */
527
+ --gl-action-neutral-border-color-active: var(--gl-color-neutral-600); /* Used for the border of an outlined neutral action in the active state. */
528
+ --gl-action-neutral-border-color-focus: var(--gl-color-neutral-400); /* Used for the border of an outlined neutral action in the focus state. */
529
+ --gl-action-neutral-border-color-hover: var(--gl-color-neutral-400); /* Used for the border of an outlined neutral action in the hover state. */
530
+ --gl-action-neutral-border-color-default: var(--gl-color-neutral-200); /* Used for the border of an outlined neutral action in the default state. */
531
+ --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. */
532
+ --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. */
533
+ --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. */
534
+ --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. */
535
+ --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. */
536
+ --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. */
537
+ --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. */
538
+ --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. */
539
+ --gl-action-neutral-background-color-active: var(--gl-color-neutral-100); /* Used for the background of an outlined neutral action in the active state. */
540
+ --gl-action-neutral-background-color-focus: var(--gl-color-neutral-50); /* Used for the background of an outlined neutral action in the focus state. */
541
+ --gl-action-neutral-background-color-hover: var(--gl-color-neutral-50); /* Used for the background of an outlined neutral action in the hover state. */
542
+ --gl-action-icon-color-disabled: var(--gl-color-neutral-400); /* Used for the icon of a disabled action. */
543
+ --gl-action-text-color-disabled: var(--gl-color-neutral-500); /* Used for the text of a disabled action. */
544
+ --gl-action-border-color-disabled: var(--gl-color-neutral-100); /* Used for the border of a disabled action. */
545
+ --gl-action-background-color-disabled: var(--gl-color-neutral-50); /* Used for the background of a disabled action. */
546
+ --gl-action-neutral-background-color-default: var(--gl-background-color-default); /* Used for the background of an outlined neutral action in the default state. */
498
547
  }
package/src/tokens/build/css/tokens.dark.css CHANGED
@@ -486,6 +486,20 @@
486
486
  --gl-icon-color-strong: var(--gl-color-neutral-10); /* Used for an icon with the highest contrast. */
487
487
  --gl-icon-color-subtle: var(--gl-color-neutral-300); /* Used for a static or decorational icon. Can be paired with subtle text. */
488
488
  --gl-icon-color-default: var(--gl-color-neutral-100); /* Used for the default icon color. Can be paired with default text. */
489
+ --gl-feedback-danger-icon-color: var(--gl-color-red-300); /* Used for an icon associated with danger or critical feedback. */
490
+ --gl-feedback-danger-background-color: var(--gl-color-red-900); /* Used for a background associated with danger or critical feedback. */
491
+ --gl-feedback-warning-icon-color: var(--gl-color-orange-300); /* Used for an icon associated with warning feedback or confidential content. */
492
+ --gl-feedback-warning-background-color: var(--gl-color-orange-900); /* Used for a background associated with warning feedback or to let a user know about confidential content. */
493
+ --gl-feedback-success-icon-color: var(--gl-color-green-300); /* Used for an icon associated with successful feedback or a new section. */
494
+ --gl-feedback-success-background-color: var(--gl-color-green-900); /* Used for a background associated with successful feedback or a new section resulting from a user action. */
495
+ --gl-feedback-info-icon-color: var(--gl-color-blue-300); /* Used for an icon associated with informational feedback. */
496
+ --gl-feedback-info-background-color: var(--gl-color-blue-900); /* Used for a background associated with informational feedback or a highlighted section resulting from a user action. */
497
+ --gl-feedback-neutral-icon-color: var(--gl-color-neutral-300); /* Used for an icon associated with a neutral feedback section. */
498
+ --gl-feedback-neutral-background-color: var(--gl-color-neutral-900); /* Used for a background associated with neutral feedback. */
499
+ --gl-feedback-link-color-strong: var(--gl-color-blue-700); /* Used for a link on a strong feedback background. */
500
+ --gl-feedback-icon-color-strong: var(--gl-color-neutral-900); /* Used for an icon on a strong feedback background. */
501
+ --gl-feedback-text-color-strong: var(--gl-color-neutral-900); /* Used for text on a strong feedback background. */
502
+ --gl-feedback-background-color-strong: var(--gl-color-neutral-10); /* Used for a background associated with feedback like a tooltip or toast message. */
489
503
  --gl-breadcrumb-separator-color: var(--gl-color-neutral-700); /* Used for the breadcrumb level separator. */
490
504
  --gl-border-color-transparent: var(--gl-color-alpha-0); /* Used when a border needs to be present, but not visibly perceived. */
491
505
  --gl-border-color-strong: var(--gl-color-neutral-400); /* Used for a distinct border that emphasizes an edge or boundaries. */
@@ -495,4 +509,39 @@
495
509
  --gl-background-color-strong: var(--gl-color-neutral-800); /* Used to make the background easily stand out from the default. */
496
510
  --gl-background-color-subtle: var(--gl-color-neutral-900); /* Used to slightly differentiate the background from the default. */
497
511
  --gl-background-color-default: var(--gl-color-neutral-950); /* Used for the default background color. */
512
+ --gl-action-neutral-icon-color-strong: var(--gl-color-neutral-900); /* Used for the icon on a solid, strong neutral action background. */
513
+ --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. */
514
+ --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. */
515
+ --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. */
516
+ --gl-action-neutral-icon-color-default: var(--gl-color-neutral-400); /* Used for the icon of outlined and borderless neutral actions. */
517
+ --gl-action-neutral-text-color-strong: var(--gl-color-neutral-900); /* Used for the text on a solid, strong neutral action background. */
518
+ --gl-action-neutral-text-color-active: var(--gl-color-neutral-50); /* Used for the text of a neutral action in the active state. */
519
+ --gl-action-neutral-text-color-focus: var(--gl-color-neutral-50); /* Used for the text of a neutral action in the focus state. */
520
+ --gl-action-neutral-text-color-hover: var(--gl-color-neutral-50); /* Used for the text of a neutral action in the hover state. */
521
+ --gl-action-neutral-text-color-default: var(--gl-color-neutral-50); /* Used for the text of outlined and borderless neutral actions. */
522
+ --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. */
523
+ --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. */
524
+ --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. */
525
+ --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. */
526
+ --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. */
527
+ --gl-action-neutral-border-color-active: var(--gl-color-neutral-300); /* Used for the border of an outlined neutral action in the active state. */
528
+ --gl-action-neutral-border-color-focus: var(--gl-color-neutral-500); /* Used for the border of an outlined neutral action in the focus state. */
529
+ --gl-action-neutral-border-color-hover: var(--gl-color-neutral-500); /* Used for the border of an outlined neutral action in the hover state. */
530
+ --gl-action-neutral-border-color-default: var(--gl-color-neutral-700); /* Used for the border of an outlined neutral action in the default state. */
531
+ --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. */
532
+ --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. */
533
+ --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. */
534
+ --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. */
535
+ --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. */
536
+ --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. */
537
+ --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. */
538
+ --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. */
539
+ --gl-action-neutral-background-color-active: var(--gl-color-neutral-800); /* Used for the background of an outlined neutral action in the active state. */
540
+ --gl-action-neutral-background-color-focus: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the focus state. */
541
+ --gl-action-neutral-background-color-hover: var(--gl-color-neutral-900); /* Used for the background of an outlined neutral action in the hover state. */
542
+ --gl-action-icon-color-disabled: var(--gl-color-neutral-500); /* Used for the icon of a disabled action. */
543
+ --gl-action-text-color-disabled: var(--gl-color-neutral-400); /* Used for the text of a disabled action. */
544
+ --gl-action-border-color-disabled: var(--gl-color-neutral-800); /* Used for the border of a disabled action. */
545
+ --gl-action-background-color-disabled: var(--gl-color-neutral-900); /* Used for the background of a disabled action. */
546
+ --gl-action-neutral-background-color-default: var(--gl-background-color-default); /* Used for the background of an outlined neutral action in the default state. */
498
547
  }
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -3,6 +3,41 @@
3
3
  * Do not edit directly
4
4
  */
5
5
 
6
+ export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#333238'; // Used for the background of a disabled action.
7
+ export const GL_ACTION_BORDER_COLOR_DISABLED = '#434248'; // 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 = '#1f1e24'; // Used for the background of an outlined neutral action in the default state.
11
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#333238'; // Used for the background of an outlined neutral action in the hover state.
12
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#333238'; // Used for the background of an outlined neutral action in the focus state.
13
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#434248'; // 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 = '#333238'; // Used for the background of a borderless, subtle neutral action in the hover state.
16
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_FOCUS = '#333238'; // Used for the background of a borderless, subtle neutral action in the focus state.
17
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#434248'; // 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 = '#535158'; // 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 = '#535158'; // 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 = '#333238'; // 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 = '#333238'; // Used for the icon on a solid, strong neutral action background.
6
41
  export const GL_BACKGROUND_COLOR_DEFAULT = '#1f1e24'; // Used for the default background color.
7
42
  export const GL_BACKGROUND_COLOR_SUBTLE = '#333238'; // Used to slightly differentiate the background from the default.
8
43
  export const GL_BACKGROUND_COLOR_STRONG = '#434248'; // Used to make the background easily stand out from the default.
@@ -387,6 +422,20 @@ export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
387
422
  export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
388
423
  export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
389
424
  export const GL_BREADCRUMB_SEPARATOR_COLOR = '#535158'; // Used for the breadcrumb level separator.
425
+ export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#fbfafd'; // Used for a background associated with feedback like a tooltip or toast message.
426
+ export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#333238'; // Used for text on a strong feedback background.
427
+ export const GL_FEEDBACK_ICON_COLOR_STRONG = '#333238'; // Used for an icon on a strong feedback background.
428
+ export const GL_FEEDBACK_LINK_COLOR_STRONG = '#0b5cad'; // Used for a link on a strong feedback background.
429
+ export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#333238'; // Used for a background associated with neutral feedback.
430
+ export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#a4a3a8'; // Used for an icon associated with a neutral feedback section.
431
+ export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#033464'; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
432
+ export const GL_FEEDBACK_INFO_ICON_COLOR = '#63a6e9'; // Used for an icon associated with informational feedback.
433
+ export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#0a4020'; // Used for a background associated with successful feedback or a new section resulting from a user action.
434
+ export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#52b87a'; // Used for an icon associated with successful feedback or a new section.
435
+ export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#5c2900'; // Used for a background associated with warning feedback or to let a user know about confidential content.
436
+ export const GL_FEEDBACK_WARNING_ICON_COLOR = '#d99530'; // Used for an icon associated with warning feedback or confidential content.
437
+ export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#660e00'; // Used for a background associated with danger or critical feedback.
438
+ export const GL_FEEDBACK_DANGER_ICON_COLOR = '#f57f6c'; // Used for an icon associated with danger or critical feedback.
390
439
  export const GL_ICON_COLOR_DEFAULT = '#dcdcde'; // Used for the default icon color. Can be paired with default text.
391
440
  export const GL_ICON_COLOR_SUBTLE = '#a4a3a8'; // Used for a static or decorational icon. Can be paired with subtle text.
392
441
  export const GL_ICON_COLOR_STRONG = '#fbfafd'; // Used for an icon with the highest contrast.
package/src/tokens/build/js/tokens.js CHANGED
@@ -3,6 +3,41 @@
3
3
  * Do not edit directly
4
4
  */
5
5
 
6
+ export const GL_ACTION_BACKGROUND_COLOR_DISABLED = '#ececef'; // Used for the background of a disabled action.
7
+ export const GL_ACTION_BORDER_COLOR_DISABLED = '#dcdcde'; // Used for the border of a disabled action.
8
+ export const GL_ACTION_TEXT_COLOR_DISABLED = '#737278'; // Used for the text of a disabled action.
9
+ export const GL_ACTION_ICON_COLOR_DISABLED = '#89888d'; // Used for the icon of a disabled action.
10
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the background of an outlined neutral action in the default state.
11
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of an outlined neutral action in the hover state.
12
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of an outlined neutral action in the focus state.
13
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // 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 = '#ececef'; // Used for the background of a borderless, subtle neutral action in the hover state.
16
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_FOCUS = '#ececef'; // Used for the background of a borderless, subtle neutral action in the focus state.
17
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_SUBTLE_ACTIVE = '#dcdcde'; // Used for the background of a borderless, subtle neutral action in the active state.
18
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_DEFAULT = '#737278'; // Used for the background of a solid, strong neutral action in the default state.
19
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_HOVER = '#626168'; // Used for the background of a solid, strong neutral action in the hover state.
20
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_FOCUS = '#626168'; // Used for the background of a solid, strong neutral action in the focus state.
21
+ export const GL_ACTION_NEUTRAL_BACKGROUND_COLOR_STRONG_ACTIVE = '#535158'; // Used for the background of a solid, strong neutral action in the active state.
22
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_DEFAULT = '#bfbfc3'; // Used for the border of an outlined neutral action in the default state.
23
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_HOVER = '#89888d'; // Used for the border of an outlined neutral action in the hover state.
24
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_FOCUS = '#89888d'; // Used for the border of an outlined neutral action in the focus state.
25
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_ACTIVE = '#626168'; // Used for the border of an outlined neutral action in the active state.
26
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_SELECTED = '#a4a3a8'; // 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 = '#626168'; // Used for the border of a solid, strong neutral action in the default state.
28
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_HOVER = '#434248'; // Used for the border of a solid, strong neutral action in the hover state.
29
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_FOCUS = '#434248'; // Used for the border of a solid, strong neutral action in the focus state.
30
+ export const GL_ACTION_NEUTRAL_BORDER_COLOR_STRONG_ACTIVE = '#333238'; // Used for the border of a solid, strong neutral action in the active state.
31
+ export const GL_ACTION_NEUTRAL_TEXT_COLOR_DEFAULT = '#333238'; // Used for the text of outlined and borderless neutral actions.
32
+ export const GL_ACTION_NEUTRAL_TEXT_COLOR_HOVER = '#333238'; // Used for the text of a neutral action in the hover state.
33
+ export const GL_ACTION_NEUTRAL_TEXT_COLOR_FOCUS = '#333238'; // Used for the text of a neutral action in the focus state.
34
+ export const GL_ACTION_NEUTRAL_TEXT_COLOR_ACTIVE = '#333238'; // Used for the text of a neutral action in the active state.
35
+ export const GL_ACTION_NEUTRAL_TEXT_COLOR_STRONG = '#fff'; // Used for the text on a solid, strong neutral action background.
36
+ export const GL_ACTION_NEUTRAL_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of outlined and borderless neutral actions.
37
+ export const GL_ACTION_NEUTRAL_ICON_COLOR_HOVER = '#535158'; // Used for the icon of outlined and borderless neutral actions in the hover state.
38
+ export const GL_ACTION_NEUTRAL_ICON_COLOR_FOCUS = '#535158'; // Used for the icon of outlined and borderless neutral actions in the focus state.
39
+ export const GL_ACTION_NEUTRAL_ICON_COLOR_ACTIVE = '#333238'; // Used for the icon of outlined and borderless neutral actions in the active state.
40
+ export const GL_ACTION_NEUTRAL_ICON_COLOR_STRONG = '#fff'; // Used for the icon on a solid, strong neutral action background.
6
41
  export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
7
42
  export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
8
43
  export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.
@@ -387,6 +422,20 @@ export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
387
422
  export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
388
423
  export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
389
424
  export const GL_BREADCRUMB_SEPARATOR_COLOR = '#bfbfc3'; // Used for the breadcrumb level separator.
425
+ export const GL_FEEDBACK_BACKGROUND_COLOR_STRONG = '#1f1e24'; // Used for a background associated with feedback like a tooltip or toast message.
426
+ export const GL_FEEDBACK_TEXT_COLOR_STRONG = '#fff'; // Used for text on a strong feedback background.
427
+ export const GL_FEEDBACK_ICON_COLOR_STRONG = '#fff'; // Used for an icon on a strong feedback background.
428
+ export const GL_FEEDBACK_LINK_COLOR_STRONG = '#63a6e9'; // Used for a link on a strong feedback background.
429
+ export const GL_FEEDBACK_NEUTRAL_BACKGROUND_COLOR = '#ececef'; // Used for a background associated with neutral feedback.
430
+ export const GL_FEEDBACK_NEUTRAL_ICON_COLOR = '#626168'; // Used for an icon associated with a neutral feedback section.
431
+ export const GL_FEEDBACK_INFO_BACKGROUND_COLOR = '#e9f3fc'; // Used for a background associated with informational feedback or a highlighted section resulting from a user action.
432
+ export const GL_FEEDBACK_INFO_ICON_COLOR = '#1068bf'; // Used for an icon associated with informational feedback.
433
+ export const GL_FEEDBACK_SUCCESS_BACKGROUND_COLOR = '#ecf4ee'; // Used for a background associated with successful feedback or a new section resulting from a user action.
434
+ export const GL_FEEDBACK_SUCCESS_ICON_COLOR = '#217645'; // Used for an icon associated with successful feedback or a new section.
435
+ export const GL_FEEDBACK_WARNING_BACKGROUND_COLOR = '#fdf1dd'; // Used for a background associated with warning feedback or to let a user know about confidential content.
436
+ export const GL_FEEDBACK_WARNING_ICON_COLOR = '#9e5400'; // Used for an icon associated with warning feedback or confidential content.
437
+ export const GL_FEEDBACK_DANGER_BACKGROUND_COLOR = '#fcf1ef'; // Used for a background associated with danger or critical feedback.
438
+ export const GL_FEEDBACK_DANGER_ICON_COLOR = '#c91c00'; // Used for an icon associated with danger or critical feedback.
390
439
  export const GL_ICON_COLOR_DEFAULT = '#535158'; // Used for the default icon color. Can be paired with default text.
391
440
  export const GL_ICON_COLOR_SUBTLE = '#737278'; // Used for a static or decorational icon. Can be paired with subtle text.
392
441
  export const GL_ICON_COLOR_STRONG = '#333238'; // Used for an icon with the highest contrast.