@gitlab/ui 89.3.0 → 89.4.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 (26) 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 +25 -1
  5. package/dist/tokens/build/js/tokens.js +25 -1
  6. package/dist/tokens/css/tokens.css +32 -8
  7. package/dist/tokens/css/tokens.dark.css +32 -8
  8. package/dist/tokens/js/tokens.dark.js +24 -0
  9. package/dist/tokens/js/tokens.js +24 -0
  10. package/dist/tokens/json/tokens.dark.json +584 -17
  11. package/dist/tokens/json/tokens.json +584 -17
  12. package/dist/tokens/scss/_tokens.dark.scss +32 -8
  13. package/dist/tokens/scss/_tokens.scss +32 -8
  14. package/dist/tokens/scss/_tokens_custom_properties.scss +24 -0
  15. package/package.json +3 -3
  16. package/src/tokens/action.tokens.json +171 -3
  17. package/src/tokens/build/css/tokens.css +32 -8
  18. package/src/tokens/build/css/tokens.dark.css +32 -8
  19. package/src/tokens/build/js/tokens.dark.js +24 -0
  20. package/src/tokens/build/js/tokens.js +24 -0
  21. package/src/tokens/build/json/tokens.dark.json +584 -17
  22. package/src/tokens/build/json/tokens.json +584 -17
  23. package/src/tokens/build/scss/_tokens.dark.scss +32 -8
  24. package/src/tokens/build/scss/_tokens.scss +32 -8
  25. package/src/tokens/build/scss/_tokens_custom_properties.scss +24 -0
  26. package/src/tokens/contextual/button.tokens.json +8 -17
package/src/tokens/build/js/tokens.dark.js CHANGED
@@ -42,6 +42,30 @@ export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for
42
42
  export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a danger action in the hover state.
43
43
  export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger action in the focus state.
44
44
  export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger action in the active state.
45
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#428fdc'; // Used for the background of a strong confirm action in the default state.
46
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#63a6e9'; // Used for the background of a strong confirm action in the hover state.
47
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#63a6e9'; // Used for the background of a strong confirm action in the focus state.
48
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of a strong confirm action in the active state.
49
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong confirm action in the default state.
50
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong confirm action in the hover state.
51
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong confirm action in the focus state.
52
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong confirm action in the active state.
53
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong confirm action in the default state.
54
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong confirm action in the hover state.
55
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong confirm action in the focus state.
56
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong confirm action in the active state.
57
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#a4a3a8'; // Used for the background of a strong neutral action in the default state.
58
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#bfbfc3'; // Used for the background of a strong neutral action in the hover state.
59
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#bfbfc3'; // Used for the background of a strong neutral action in the focus state.
60
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a strong neutral action in the active state.
61
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong neutral action in the default state.
62
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong neutral action in the hover state.
63
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong neutral action in the focus state.
64
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong neutral action in the active state.
65
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong neutral action in the default state.
66
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong neutral action in the hover state.
67
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong neutral action in the focus state.
68
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong neutral action in the active state.
45
69
  export const GL_BACKGROUND_COLOR_DEFAULT = '#18171d'; // Used for the default background color.
46
70
  export const GL_BACKGROUND_COLOR_SUBTLE = '#28272d'; // Used to slightly differentiate the background from the default.
47
71
  export const GL_BACKGROUND_COLOR_STRONG = '#3a383f'; // Used to make the background easily stand out from the default.
package/src/tokens/build/js/tokens.js CHANGED
@@ -42,6 +42,30 @@ export const GL_ACTION_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for
42
42
  export const GL_ACTION_DANGER_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a danger action in the hover state.
43
43
  export const GL_ACTION_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger action in the focus state.
44
44
  export const GL_ACTION_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger action in the active state.
45
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_DEFAULT = '#1f75cb'; // Used for the background of a strong confirm action in the default state.
46
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_HOVER = '#1068bf'; // Used for the background of a strong confirm action in the hover state.
47
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_FOCUS = '#1068bf'; // Used for the background of a strong confirm action in the focus state.
48
+ export const GL_ACTION_STRONG_CONFIRM_BACKGROUND_COLOR_ACTIVE = '#0b5cad'; // Used for the background of a strong confirm action in the active state.
49
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong confirm action in the default state.
50
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong confirm action in the hover state.
51
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong confirm action in the focus state.
52
+ export const GL_ACTION_STRONG_CONFIRM_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong confirm action in the active state.
53
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong confirm action in the default state.
54
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong confirm action in the hover state.
55
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong confirm action in the focus state.
56
+ export const GL_ACTION_STRONG_CONFIRM_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong confirm action in the active state.
57
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#626168'; // Used for the background of a strong neutral action in the default state.
58
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_HOVER = '#4c4b51'; // Used for the background of a strong neutral action in the hover state.
59
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#4c4b51'; // Used for the background of a strong neutral action in the focus state.
60
+ export const GL_ACTION_STRONG_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#3a383f'; // Used for the background of a strong neutral action in the active state.
61
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_DEFAULT = '#fff'; // Used for the foreground of a strong neutral action in the default state.
62
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_HOVER = '#fff'; // Used for the foreground of a strong neutral action in the hover state.
63
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_FOCUS = '#fff'; // Used for the foreground of a strong neutral action in the focus state.
64
+ export const GL_ACTION_STRONG_NEUTRAL_FOREGROUND_COLOR_ACTIVE = '#fff'; // Used for the foreground of a strong neutral action in the active state.
65
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a strong neutral action in the default state.
66
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_HOVER = 'transparent'; // Used for the border of a strong neutral action in the hover state.
67
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a strong neutral action in the focus state.
68
+ export const GL_ACTION_STRONG_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a strong neutral action in the active state.
45
69
  export const GL_BACKGROUND_COLOR_DEFAULT = '#fff'; // Used for the default background color.
46
70
  export const GL_BACKGROUND_COLOR_SUBTLE = '#fbfafd'; // Used to slightly differentiate the background from the default.
47
71
  export const GL_BACKGROUND_COLOR_STRONG = '#ececef'; // Used to make the background easily stand out from the default.