@gitlab/ui 80.11.0 → 80.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 (42) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/README.md +1 -20
  3. package/dist/components/base/new_dropdowns/base_dropdown/base_dropdown.js +5 -9
  4. package/dist/components/base/new_dropdowns/constants.js +1 -2
  5. package/dist/tailwind.css +1 -1
  6. package/dist/tailwind.css.map +1 -1
  7. package/dist/tokens/build/js/tokens.dark.js +106 -1
  8. package/dist/tokens/build/js/tokens.js +70 -1
  9. package/dist/tokens/css/tokens.css +77 -8
  10. package/dist/tokens/css/tokens.dark.css +111 -6
  11. package/dist/tokens/js/tokens.dark.js +105 -0
  12. package/dist/tokens/js/tokens.js +69 -0
  13. package/dist/tokens/json/tokens.dark.json +4002 -2053
  14. package/dist/tokens/json/tokens.json +1207 -14
  15. package/dist/tokens/scss/_tokens.dark.scss +111 -6
  16. package/dist/tokens/scss/_tokens.scss +77 -8
  17. package/dist/tokens/scss/_tokens_custom_properties.scss +69 -0
  18. package/dist/tokens/tailwind/tokens.cjs +9 -8
  19. package/dist/tokens/tokens_table.js +12 -1
  20. package/dist/utils/utils.js +1 -19
  21. package/package.json +1 -1
  22. package/src/components/base/icon/icon.stories.js +3 -1
  23. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.spec.js +17 -55
  24. package/src/components/base/new_dropdowns/base_dropdown/base_dropdown.vue +4 -16
  25. package/src/components/base/new_dropdowns/constants.js +0 -1
  26. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js +0 -28
  27. package/src/tokens/build/css/tokens.css +77 -8
  28. package/src/tokens/build/css/tokens.dark.css +111 -6
  29. package/src/tokens/build/js/tokens.dark.js +105 -0
  30. package/src/tokens/build/js/tokens.js +69 -0
  31. package/src/tokens/build/json/tokens.dark.json +4002 -2053
  32. package/src/tokens/build/json/tokens.json +1207 -14
  33. package/src/tokens/build/scss/_tokens.dark.scss +111 -6
  34. package/src/tokens/build/scss/_tokens.scss +77 -8
  35. package/src/tokens/build/scss/_tokens_custom_properties.scss +69 -0
  36. package/src/tokens/build/tailwind/tokens.cjs +9 -8
  37. package/src/tokens/color.constant.tokens.json +292 -0
  38. package/src/tokens/color.constant.tokens.stories.js +19 -0
  39. package/src/tokens/text.tokens.json +20 -14
  40. package/src/tokens/tokens_table.vue +12 -1
  41. package/src/utils/utils.js +0 -18
  42. package/src/utils/utils.spec.js +0 -52
package/dist/tokens/js/tokens.dark.js CHANGED
@@ -3,6 +3,75 @@
3
3
  * Do not edit directly
4
4
  */
5
5
 
6
+ export const GL_COLOR_BLUE_50 = '#e9f3fc';
7
+ export const GL_COLOR_BLUE_100 = '#cbe2f9';
8
+ export const GL_COLOR_BLUE_200 = '#9dc7f1';
9
+ export const GL_COLOR_BLUE_300 = '#63a6e9';
10
+ export const GL_COLOR_BLUE_400 = '#428fdc';
11
+ export const GL_COLOR_BLUE_500 = '#1f75cb';
12
+ export const GL_COLOR_BLUE_600 = '#1068bf';
13
+ export const GL_COLOR_BLUE_700 = '#0b5cad';
14
+ export const GL_COLOR_BLUE_800 = '#064787';
15
+ export const GL_COLOR_BLUE_900 = '#033464';
16
+ export const GL_COLOR_BLUE_950 = '#002850';
17
+ export const GL_COLOR_NEUTRAL_0 = '#fff';
18
+ export const GL_COLOR_NEUTRAL_10 = '#fbfafd';
19
+ export const GL_COLOR_NEUTRAL_50 = '#ececef';
20
+ export const GL_COLOR_NEUTRAL_100 = '#dcdcde';
21
+ export const GL_COLOR_NEUTRAL_200 = '#bfbfc3';
22
+ export const GL_COLOR_NEUTRAL_300 = '#a4a3a8';
23
+ export const GL_COLOR_NEUTRAL_400 = '#89888d';
24
+ export const GL_COLOR_NEUTRAL_500 = '#737278';
25
+ export const GL_COLOR_NEUTRAL_600 = '#626168';
26
+ export const GL_COLOR_NEUTRAL_700 = '#535158';
27
+ export const GL_COLOR_NEUTRAL_800 = '#434248';
28
+ export const GL_COLOR_NEUTRAL_900 = '#333238';
29
+ export const GL_COLOR_NEUTRAL_950 = '#1f1e24';
30
+ export const GL_COLOR_NEUTRAL_1000 = '#000';
31
+ export const GL_COLOR_GREEN_50 = '#ecf4ee';
32
+ export const GL_COLOR_GREEN_100 = '#c3e6cd';
33
+ export const GL_COLOR_GREEN_200 = '#91d4a8';
34
+ export const GL_COLOR_GREEN_300 = '#52b87a';
35
+ export const GL_COLOR_GREEN_400 = '#2da160';
36
+ export const GL_COLOR_GREEN_500 = '#108548';
37
+ export const GL_COLOR_GREEN_600 = '#217645';
38
+ export const GL_COLOR_GREEN_700 = '#24663b';
39
+ export const GL_COLOR_GREEN_800 = '#0d532a';
40
+ export const GL_COLOR_GREEN_900 = '#0a4020';
41
+ export const GL_COLOR_GREEN_950 = '#072b15';
42
+ export const GL_COLOR_ORANGE_50 = '#fdf1dd';
43
+ export const GL_COLOR_ORANGE_100 = '#f5d9a8';
44
+ export const GL_COLOR_ORANGE_200 = '#e9be74';
45
+ export const GL_COLOR_ORANGE_300 = '#d99530';
46
+ export const GL_COLOR_ORANGE_400 = '#c17d10';
47
+ export const GL_COLOR_ORANGE_500 = '#ab6100';
48
+ export const GL_COLOR_ORANGE_600 = '#9e5400';
49
+ export const GL_COLOR_ORANGE_700 = '#8f4700';
50
+ export const GL_COLOR_ORANGE_800 = '#703800';
51
+ export const GL_COLOR_ORANGE_900 = '#5c2900';
52
+ export const GL_COLOR_ORANGE_950 = '#421f00';
53
+ export const GL_COLOR_PURPLE_50 = '#f4f0ff';
54
+ export const GL_COLOR_PURPLE_100 = '#e1d8f9';
55
+ export const GL_COLOR_PURPLE_200 = '#cbbbf2';
56
+ export const GL_COLOR_PURPLE_300 = '#ac93e6';
57
+ export const GL_COLOR_PURPLE_400 = '#9475db';
58
+ export const GL_COLOR_PURPLE_500 = '#7b58cf';
59
+ export const GL_COLOR_PURPLE_600 = '#694cc0';
60
+ export const GL_COLOR_PURPLE_700 = '#5943b6';
61
+ export const GL_COLOR_PURPLE_800 = '#453894';
62
+ export const GL_COLOR_PURPLE_900 = '#2f2a6b';
63
+ export const GL_COLOR_PURPLE_950 = '#232150';
64
+ export const GL_COLOR_RED_50 = '#fcf1ef';
65
+ export const GL_COLOR_RED_100 = '#fdd4cd';
66
+ export const GL_COLOR_RED_200 = '#fcb5aa';
67
+ export const GL_COLOR_RED_300 = '#f57f6c';
68
+ export const GL_COLOR_RED_400 = '#ec5941';
69
+ export const GL_COLOR_RED_500 = '#dd2b0e';
70
+ export const GL_COLOR_RED_600 = '#c91c00';
71
+ export const GL_COLOR_RED_700 = '#ae1800';
72
+ export const GL_COLOR_RED_800 = '#8d1300';
73
+ export const GL_COLOR_RED_900 = '#660e00';
74
+ export const GL_COLOR_RED_950 = '#4d0a00';
6
75
  export const DATA_VIZ_GREEN_50 = '#133a03';
7
76
  export const DATA_VIZ_GREEN_100 = '#1a4500';
8
77
  export const DATA_VIZ_GREEN_200 = '#275600';
@@ -199,6 +268,40 @@ export const RED_700 = '#fcb5aa';
199
268
  export const RED_800 = '#fdd4cd';
200
269
  export const RED_900 = '#fcf1ef';
201
270
  export const RED_950 = '#fff4f3';
271
+ export const BRAND_CHARCOAL = '#171321';
272
+ export const BRAND_ORANGE_01 = '#fca326';
273
+ export const BRAND_ORANGE_02 = '#fc6d26';
274
+ export const BRAND_ORANGE_03 = '#e24329';
275
+ export const BRAND_PURPLE_01 = '#a989f5';
276
+ export const BRAND_PURPLE_02 = '#7759c2';
277
+ export const BRAND_GRAY_01 = '#d1d0d3';
278
+ export const BRAND_GRAY_02 = '#a2a1a6';
279
+ export const BRAND_GRAY_03 = '#74717a';
280
+ export const BRAND_GRAY_04 = '#45424d';
281
+ export const BRAND_GRAY_05 = '#2b2838';
282
+ export const T_GRAY_A_16 = 'rgba(31, 30, 36, 0.16)';
283
+ export const T_GRAY_A_24 = 'rgba(31, 30, 36, 0.24)';
284
+ export const T_GRAY_A_02 = 'rgba(31, 30, 36, 0.02)';
285
+ export const T_GRAY_A_04 = 'rgba(31, 30, 36, 0.04)';
286
+ export const T_GRAY_A_06 = 'rgba(31, 30, 36, 0.06)';
287
+ export const T_GRAY_A_08 = 'rgba(31, 30, 36, 0.08)';
288
+ export const T_WHITE_A_16 = 'rgba(255, 255, 255, 0.16)';
289
+ export const T_WHITE_A_24 = 'rgba(255, 255, 255, 0.24)';
290
+ export const T_WHITE_A_36 = 'rgba(255, 255, 255, 0.36)';
291
+ export const T_WHITE_A_02 = 'rgba(255, 255, 255, 0.02)';
292
+ export const T_WHITE_A_04 = 'rgba(255, 255, 255, 0.04)';
293
+ export const T_WHITE_A_06 = 'rgba(255, 255, 255, 0.06)';
294
+ export const T_WHITE_A_08 = 'rgba(255, 255, 255, 0.08)';
295
+ export const GL_LINE_HEIGHT_12 = '0.75rem';
296
+ export const GL_LINE_HEIGHT_16 = '1rem';
297
+ export const GL_LINE_HEIGHT_20 = '1.25rem';
298
+ export const GL_LINE_HEIGHT_24 = '1.5rem';
299
+ export const GL_LINE_HEIGHT_28 = '1.75rem';
300
+ export const GL_LINE_HEIGHT_32 = '2rem';
301
+ export const GL_LINE_HEIGHT_36 = '2.25rem';
302
+ export const GL_LINE_HEIGHT_42 = '2.625rem';
303
+ export const GL_LINE_HEIGHT_44 = '2.75rem';
304
+ export const GL_LINE_HEIGHT_52 = '3.25rem';
202
305
  export const GL_TEXT_PRIMARY = '#ececef'; // Use text.color.default instead
203
306
  export const GL_TEXT_SECONDARY = '#89888d'; // Use text.color.subtle instead
204
307
  export const GL_TEXT_TERTIARY = '#737278'; // Use text.color.disabled instead
@@ -207,4 +310,6 @@ export const GL_TEXT_COLOR_SUBTLE = '#bfbfc3'; // Used for supplemental text tha
207
310
  export const GL_TEXT_COLOR_STRONG = '#fff'; // Used for text with the highest contrast.
208
311
  export const GL_TEXT_COLOR_HEADING = '#fff'; // Used for headings level 1-6.
209
312
  export const GL_TEXT_COLOR_LINK = '#63a6e9'; // Used for default text links.
313
+ export const GL_TEXT_COLOR_DANGER = '#f57f6c'; // Used for text indicating a problem, critical state, destructive action, error, failure, removal, stop, or declination.
314
+ export const GL_TEXT_COLOR_SUCCESS = '#52b87a'; // Used for text indicating success or validity.
210
315
  export const GL_TEXT_COLOR_DISABLED = '#89888d'; // Used for disabled text.
package/dist/tokens/js/tokens.js CHANGED
@@ -3,6 +3,75 @@
3
3
  * Do not edit directly
4
4
  */
5
5
 
6
+ export const GL_COLOR_BLUE_50 = '#e9f3fc';
7
+ export const GL_COLOR_BLUE_100 = '#cbe2f9';
8
+ export const GL_COLOR_BLUE_200 = '#9dc7f1';
9
+ export const GL_COLOR_BLUE_300 = '#63a6e9';
10
+ export const GL_COLOR_BLUE_400 = '#428fdc';
11
+ export const GL_COLOR_BLUE_500 = '#1f75cb';
12
+ export const GL_COLOR_BLUE_600 = '#1068bf';
13
+ export const GL_COLOR_BLUE_700 = '#0b5cad';
14
+ export const GL_COLOR_BLUE_800 = '#064787';
15
+ export const GL_COLOR_BLUE_900 = '#033464';
16
+ export const GL_COLOR_BLUE_950 = '#002850';
17
+ export const GL_COLOR_NEUTRAL_0 = '#fff';
18
+ export const GL_COLOR_NEUTRAL_10 = '#fbfafd';
19
+ export const GL_COLOR_NEUTRAL_50 = '#ececef';
20
+ export const GL_COLOR_NEUTRAL_100 = '#dcdcde';
21
+ export const GL_COLOR_NEUTRAL_200 = '#bfbfc3';
22
+ export const GL_COLOR_NEUTRAL_300 = '#a4a3a8';
23
+ export const GL_COLOR_NEUTRAL_400 = '#89888d';
24
+ export const GL_COLOR_NEUTRAL_500 = '#737278';
25
+ export const GL_COLOR_NEUTRAL_600 = '#626168';
26
+ export const GL_COLOR_NEUTRAL_700 = '#535158';
27
+ export const GL_COLOR_NEUTRAL_800 = '#434248';
28
+ export const GL_COLOR_NEUTRAL_900 = '#333238';
29
+ export const GL_COLOR_NEUTRAL_950 = '#1f1e24';
30
+ export const GL_COLOR_NEUTRAL_1000 = '#000';
31
+ export const GL_COLOR_GREEN_50 = '#ecf4ee';
32
+ export const GL_COLOR_GREEN_100 = '#c3e6cd';
33
+ export const GL_COLOR_GREEN_200 = '#91d4a8';
34
+ export const GL_COLOR_GREEN_300 = '#52b87a';
35
+ export const GL_COLOR_GREEN_400 = '#2da160';
36
+ export const GL_COLOR_GREEN_500 = '#108548';
37
+ export const GL_COLOR_GREEN_600 = '#217645';
38
+ export const GL_COLOR_GREEN_700 = '#24663b';
39
+ export const GL_COLOR_GREEN_800 = '#0d532a';
40
+ export const GL_COLOR_GREEN_900 = '#0a4020';
41
+ export const GL_COLOR_GREEN_950 = '#072b15';
42
+ export const GL_COLOR_ORANGE_50 = '#fdf1dd';
43
+ export const GL_COLOR_ORANGE_100 = '#f5d9a8';
44
+ export const GL_COLOR_ORANGE_200 = '#e9be74';
45
+ export const GL_COLOR_ORANGE_300 = '#d99530';
46
+ export const GL_COLOR_ORANGE_400 = '#c17d10';
47
+ export const GL_COLOR_ORANGE_500 = '#ab6100';
48
+ export const GL_COLOR_ORANGE_600 = '#9e5400';
49
+ export const GL_COLOR_ORANGE_700 = '#8f4700';
50
+ export const GL_COLOR_ORANGE_800 = '#703800';
51
+ export const GL_COLOR_ORANGE_900 = '#5c2900';
52
+ export const GL_COLOR_ORANGE_950 = '#421f00';
53
+ export const GL_COLOR_PURPLE_50 = '#f4f0ff';
54
+ export const GL_COLOR_PURPLE_100 = '#e1d8f9';
55
+ export const GL_COLOR_PURPLE_200 = '#cbbbf2';
56
+ export const GL_COLOR_PURPLE_300 = '#ac93e6';
57
+ export const GL_COLOR_PURPLE_400 = '#9475db';
58
+ export const GL_COLOR_PURPLE_500 = '#7b58cf';
59
+ export const GL_COLOR_PURPLE_600 = '#694cc0';
60
+ export const GL_COLOR_PURPLE_700 = '#5943b6';
61
+ export const GL_COLOR_PURPLE_800 = '#453894';
62
+ export const GL_COLOR_PURPLE_900 = '#2f2a6b';
63
+ export const GL_COLOR_PURPLE_950 = '#232150';
64
+ export const GL_COLOR_RED_50 = '#fcf1ef';
65
+ export const GL_COLOR_RED_100 = '#fdd4cd';
66
+ export const GL_COLOR_RED_200 = '#fcb5aa';
67
+ export const GL_COLOR_RED_300 = '#f57f6c';
68
+ export const GL_COLOR_RED_400 = '#ec5941';
69
+ export const GL_COLOR_RED_500 = '#dd2b0e';
70
+ export const GL_COLOR_RED_600 = '#c91c00';
71
+ export const GL_COLOR_RED_700 = '#ae1800';
72
+ export const GL_COLOR_RED_800 = '#8d1300';
73
+ export const GL_COLOR_RED_900 = '#660e00';
74
+ export const GL_COLOR_RED_950 = '#4d0a00';
6
75
  export const DATA_VIZ_GREEN_50 = '#ddfab7';
7
76
  export const DATA_VIZ_GREEN_100 = '#c6ed94';
8
77
  export const DATA_VIZ_GREEN_200 = '#b0d97b';