@gitlab/ui 67.5.0 → 67.5.2

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 (20) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/dist/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.js +1 -2
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/css/tokens.css +1 -1
  6. package/dist/tokens/css/tokens.dark.css +1 -1
  7. package/dist/tokens/js/tokens.dark.js +1 -1
  8. package/dist/tokens/js/tokens.js +1 -1
  9. package/dist/tokens/scss/_tokens.dark.scss +1 -1
  10. package/dist/tokens/scss/_tokens.scss +1 -1
  11. package/dist/utility_classes.css.map +1 -1
  12. package/package.json +2 -2
  13. package/scss_to_js/scss_variables.js +146 -146
  14. package/scss_to_js/scss_variables.json +1278 -1278
  15. package/src/components/charts/legend/legend.scss +5 -6
  16. package/src/components/experimental/duo/chat/components/duo_chat_message/duo_chat_message.vue +1 -2
  17. package/src/scss/storybook.scss +1 -1
  18. package/src/scss/storybook_dark_mode.scss +3 -1
  19. package/src/scss/tokens.scss +2 -0
  20. package/src/scss/variables.scss +1 -185
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "67.5.0",
3
+ "version": "67.5.2",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -122,7 +122,7 @@
122
122
  "babel-loader": "^8.0.5",
123
123
  "babel-plugin-require-context-hook": "^1.0.0",
124
124
  "bootstrap": "4.6.2",
125
- "cypress": "13.3.3",
125
+ "cypress": "13.4.0",
126
126
  "cypress-axe": "^1.4.0",
127
127
  "dompurify": "^3.0.0",
128
128
  "emoji-regex": "^10.0.0",
package/scss_to_js/scss_variables.js CHANGED
@@ -32,92 +32,12 @@ export const breakpointXl = '1200px'
32
32
  export const breakpoints = '(xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)'
33
33
  export const limitedLayoutWidth = '990px'
34
34
  export const containerXl = '1280px'
35
- export const black = '#000'
36
35
  export const blackNormal = '#333'
37
- export const white = '#fff'
38
36
  export const whiteContrast = '#fff'
39
37
  export const whiteNormal = '#f0f0f0'
40
38
  export const whiteDark = '#eaeaea'
41
39
  export const whiteTransparent = 'rgba(255, 255, 255, 0.8)'
42
40
  export const transparentRgba = 'rgba(255, 255, 255, 0)'
43
- export const green50 = '#ecf4ee'
44
- export const green100 = '#c3e6cd'
45
- export const green200 = '#91d4a8'
46
- export const green300 = '#52b87a'
47
- export const green400 = '#2da160'
48
- export const green500 = '#108548'
49
- export const green600 = '#217645'
50
- export const green700 = '#24663b'
51
- export const green800 = '#0d532a'
52
- export const green900 = '#0a4020'
53
- export const green950 = '#072b15'
54
- export const blue50 = '#e9f3fc'
55
- export const blue100 = '#cbe2f9'
56
- export const blue200 = '#9dc7f1'
57
- export const blue300 = '#63a6e9'
58
- export const blue400 = '#428fdc'
59
- export const blue500 = '#1f75cb'
60
- export const blue600 = '#1068bf'
61
- export const blue700 = '#0b5cad'
62
- export const blue800 = '#064787'
63
- export const blue900 = '#033464'
64
- export const blue950 = '#002850'
65
- export const orange50 = '#fdf1dd'
66
- export const orange100 = '#f5d9a8'
67
- export const orange200 = '#e9be74'
68
- export const orange300 = '#d99530'
69
- export const orange400 = '#c17d10'
70
- export const orange500 = '#ab6100'
71
- export const orange600 = '#9e5400'
72
- export const orange700 = '#8f4700'
73
- export const orange800 = '#703800'
74
- export const orange900 = '#5c2900'
75
- export const orange950 = '#421f00'
76
- export const red50 = '#fcf1ef'
77
- export const red100 = '#fdd4cd'
78
- export const red200 = '#fcb5aa'
79
- export const red300 = '#f57f6c'
80
- export const red400 = '#ec5941'
81
- export const red500 = '#dd2b0e'
82
- export const red600 = '#c91c00'
83
- export const red700 = '#ae1800'
84
- export const red800 = '#8d1300'
85
- export const red900 = '#660e00'
86
- export const red950 = '#4d0a00'
87
- export const purple50 = '#f4f0ff'
88
- export const purple100 = '#e1d8f9'
89
- export const purple200 = '#cbbbf2'
90
- export const purple300 = '#ac93e6'
91
- export const purple400 = '#9475db'
92
- export const purple500 = '#7b58cf'
93
- export const purple600 = '#694cc0'
94
- export const purple700 = '#5943b6'
95
- export const purple800 = '#453894'
96
- export const purple900 = '#2f2a6b'
97
- export const purple950 = '#232150'
98
- export const gray10 = '#fbfafd'
99
- export const gray50 = '#ececef'
100
- export const gray100 = '#dcdcde'
101
- export const gray200 = '#bfbfc3'
102
- export const gray300 = '#a4a3a8'
103
- export const gray400 = '#89888d'
104
- export const gray500 = '#737278'
105
- export const gray600 = '#626168'
106
- export const gray700 = '#535158'
107
- export const gray800 = '#434248'
108
- export const gray900 = '#333238'
109
- export const gray950 = '#1f1e24'
110
- export const brandCharcoal = '#171321'
111
- export const brandOrange01 = '#fca326'
112
- export const brandOrange02 = '#fc6d26'
113
- export const brandOrange03 = '#e24329'
114
- export const brandPurple01 = '#a989f5'
115
- export const brandPurple02 = '#7759c2'
116
- export const brandGray01 = '#d1d0d3'
117
- export const brandGray02 = '#a2a1a6'
118
- export const brandGray03 = '#74717a'
119
- export const brandGray04 = '#45424d'
120
- export const brandGray05 = '#2b2838'
121
41
  export const themeIndigo50 = '#f1f1ff'
122
42
  export const themeIndigo100 = '#dbdbf8'
123
43
  export const themeIndigo200 = '#c7c7f2'
@@ -184,61 +104,6 @@ export const themeLightRed700 = '#a02e1c'
184
104
  export const themeLightRed800 = '#8b2212'
185
105
  export const themeLightRed900 = '#751709'
186
106
  export const themeLightRed950 = '#5c1105'
187
- export const dataVizGreen50 = '#ddfab7'
188
- export const dataVizGreen100 = '#c6ed94'
189
- export const dataVizGreen200 = '#b0d97b'
190
- export const dataVizGreen300 = '#94c25e'
191
- export const dataVizGreen400 = '#81ac41'
192
- export const dataVizGreen500 = '#619025'
193
- export const dataVizGreen600 = '#4e7f0e'
194
- export const dataVizGreen700 = '#366800'
195
- export const dataVizGreen800 = '#275600'
196
- export const dataVizGreen900 = '#1a4500'
197
- export const dataVizGreen950 = '#133a03'
198
- export const dataVizAqua50 = '#b5fefd'
199
- export const dataVizAqua100 = '#93f2ef'
200
- export const dataVizAqua200 = '#5edee3'
201
- export const dataVizAqua300 = '#32c5d2'
202
- export const dataVizAqua400 = '#00acc4'
203
- export const dataVizAqua500 = '#0090b1'
204
- export const dataVizAqua600 = '#007b9b'
205
- export const dataVizAqua700 = '#006381'
206
- export const dataVizAqua800 = '#00516c'
207
- export const dataVizAqua900 = '#004059'
208
- export const dataVizAqua950 = '#00344b'
209
- export const dataVizBlue50 = '#e9ebff'
210
- export const dataVizBlue100 = '#d2dcff'
211
- export const dataVizBlue200 = '#b7c6ff'
212
- export const dataVizBlue300 = '#97acff'
213
- export const dataVizBlue400 = '#7992f5'
214
- export const dataVizBlue500 = '#617ae2'
215
- export const dataVizBlue600 = '#4e65cd'
216
- export const dataVizBlue700 = '#3f51ae'
217
- export const dataVizBlue800 = '#374291'
218
- export const dataVizBlue900 = '#303470'
219
- export const dataVizBlue950 = '#2a2b59'
220
- export const dataVizMagenta50 = '#ffe3eb'
221
- export const dataVizMagenta100 = '#ffccdb'
222
- export const dataVizMagenta200 = '#fcacc5'
223
- export const dataVizMagenta300 = '#f88aaf'
224
- export const dataVizMagenta400 = '#e86e9a'
225
- export const dataVizMagenta500 = '#cf4d81'
226
- export const dataVizMagenta600 = '#b93d71'
227
- export const dataVizMagenta700 = '#9a2e5d'
228
- export const dataVizMagenta800 = '#7c214f'
229
- export const dataVizMagenta900 = '#661e3a'
230
- export const dataVizMagenta950 = '#541d31'
231
- export const dataVizOrange50 = '#fae8d1'
232
- export const dataVizOrange100 = '#f5d6b3'
233
- export const dataVizOrange200 = '#eebd8c'
234
- export const dataVizOrange300 = '#e99b60'
235
- export const dataVizOrange400 = '#e07e41'
236
- export const dataVizOrange500 = '#c95d2e'
237
- export const dataVizOrange600 = '#b14f18'
238
- export const dataVizOrange700 = '#92430a'
239
- export const dataVizOrange800 = '#6f3500'
240
- export const dataVizOrange900 = '#5e2f05'
241
- export const dataVizOrange950 = '#4b2707'
242
107
  export const tGrayA02 = 'rgba(31, 30, 36, 0.02)'
243
108
  export const tGrayA04 = 'rgba(31, 30, 36, 0.04)'
244
109
  export const tGrayA06 = 'rgba(31, 30, 36, 0.06)'
@@ -253,16 +118,6 @@ export const glFontWeightNormal = '400'
253
118
  export const glFontWeightSemibold = '500'
254
119
  export const glFontWeightBold = '600'
255
120
  export const glFontWeights = '("normal": 400, "bold": 600)'
256
- export const glLineHeight12 = '0.75rem'
257
- export const glLineHeight16 = '1rem'
258
- export const glLineHeight20 = '1.25rem'
259
- export const glLineHeight24 = '1.5rem'
260
- export const glLineHeight28 = '1.75rem'
261
- export const glLineHeight32 = '2rem'
262
- export const glLineHeight36 = '2.25rem'
263
- export const glLineHeight42 = '2.625rem'
264
- export const glLineHeight44 = '2.75rem'
265
- export const glLineHeight52 = '3.25rem'
266
121
  export const glMonospaceFont = ''
267
122
  export const glRegularFont = 'GitLab Sans ", -apple-system, BlinkMacSystemFont, " Segoe UI ", Roboto, " Noto Sans ", Ubuntu, Cantarell, " Helvetica Neue ", sans-serif, " Apple Color Emoji ", " Segoe UI Emoji ", " Segoe UI Symbol ", " Noto Color Emoji'
268
123
  export const glFonts = '("monospace": ("GitLab Mono", "JetBrains Mono", "Menlo", "DejaVu Sans Mono", "Liberation Mono", "Consolas", "Ubuntu Mono", "Courier New", "andale mono", "lucida console", monospace), "regular": ("GitLab Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans", Ubuntu, Cantarell, "Helvetica Neue", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"))'
@@ -383,4 +238,149 @@ export const popoverArrowWidth = '0.5rem'
383
238
  export const popoverArrowHeight = '0.25rem'
384
239
  export const popoverArrowColor = '#fff'
385
240
  export const popoverArrowOuterColor = '#dcdcde'
386
- export const tooltipOpacity = '1'
241
+ export const tooltipOpacity = '1'
242
+ export const glLineHeight52 = '3.25rem'
243
+ export const glLineHeight44 = '2.75rem'
244
+ export const glLineHeight42 = '2.625rem'
245
+ export const glLineHeight36 = '2.25rem'
246
+ export const glLineHeight32 = '2rem'
247
+ export const glLineHeight28 = '1.75rem'
248
+ export const glLineHeight24 = '1.5rem'
249
+ export const glLineHeight20 = '1.25rem'
250
+ export const glLineHeight16 = '1rem'
251
+ export const glLineHeight12 = '0.75rem'
252
+ export const brandGray05 = '#2b2838'
253
+ export const brandGray04 = '#45424d'
254
+ export const brandGray03 = '#74717a'
255
+ export const brandGray02 = '#a2a1a6'
256
+ export const brandGray01 = '#d1d0d3'
257
+ export const brandPurple02 = '#7759c2'
258
+ export const brandPurple01 = '#a989f5'
259
+ export const brandOrange03 = '#e24329'
260
+ export const brandOrange02 = '#fc6d26'
261
+ export const brandOrange01 = '#fca326'
262
+ export const brandCharcoal = '#171321'
263
+ export const dataVizOrange950 = '#4b2707'
264
+ export const dataVizOrange900 = '#5e2f05'
265
+ export const dataVizOrange800 = '#6f3500'
266
+ export const dataVizOrange700 = '#92430a'
267
+ export const dataVizOrange600 = '#b14f18'
268
+ export const dataVizOrange500 = '#c95d2e'
269
+ export const dataVizOrange400 = '#e07e41'
270
+ export const dataVizOrange300 = '#e99b60'
271
+ export const dataVizOrange200 = '#eebd8c'
272
+ export const dataVizOrange100 = '#f5d6b3'
273
+ export const dataVizOrange50 = '#fae8d1'
274
+ export const dataVizMagenta950 = '#541d31'
275
+ export const dataVizMagenta900 = '#661e3a'
276
+ export const dataVizMagenta800 = '#7c214f'
277
+ export const dataVizMagenta700 = '#9a2e5d'
278
+ export const dataVizMagenta600 = '#b93d71'
279
+ export const dataVizMagenta500 = '#cf4d81'
280
+ export const dataVizMagenta400 = '#e86e9a'
281
+ export const dataVizMagenta300 = '#f88aaf'
282
+ export const dataVizMagenta200 = '#fcacc5'
283
+ export const dataVizMagenta100 = '#ffccdb'
284
+ export const dataVizMagenta50 = '#ffe3eb'
285
+ export const dataVizBlue950 = '#2a2b59'
286
+ export const dataVizBlue900 = '#303470'
287
+ export const dataVizBlue800 = '#374291'
288
+ export const dataVizBlue700 = '#3f51ae'
289
+ export const dataVizBlue600 = '#4e65cd'
290
+ export const dataVizBlue500 = '#617ae2'
291
+ export const dataVizBlue400 = '#7992f5'
292
+ export const dataVizBlue300 = '#97acff'
293
+ export const dataVizBlue200 = '#b7c6ff'
294
+ export const dataVizBlue100 = '#d2dcff'
295
+ export const dataVizBlue50 = '#e9ebff'
296
+ export const dataVizAqua950 = '#00344b'
297
+ export const dataVizAqua900 = '#004059'
298
+ export const dataVizAqua800 = '#00516c'
299
+ export const dataVizAqua700 = '#006381'
300
+ export const dataVizAqua600 = '#007b9b'
301
+ export const dataVizAqua500 = '#0090b1'
302
+ export const dataVizAqua400 = '#00acc4'
303
+ export const dataVizAqua300 = '#32c5d2'
304
+ export const dataVizAqua200 = '#5edee3'
305
+ export const dataVizAqua100 = '#93f2ef'
306
+ export const dataVizAqua50 = '#b5fefd'
307
+ export const dataVizGreen950 = '#133a03'
308
+ export const dataVizGreen900 = '#1a4500'
309
+ export const dataVizGreen800 = '#275600'
310
+ export const dataVizGreen700 = '#366800'
311
+ export const dataVizGreen600 = '#4e7f0e'
312
+ export const dataVizGreen500 = '#619025'
313
+ export const dataVizGreen400 = '#81ac41'
314
+ export const dataVizGreen300 = '#94c25e'
315
+ export const dataVizGreen200 = '#b0d97b'
316
+ export const dataVizGreen100 = '#c6ed94'
317
+ export const dataVizGreen50 = '#ddfab7'
318
+ export const red950 = '#4d0a00'
319
+ export const red900 = '#660e00'
320
+ export const red800 = '#8d1300'
321
+ export const red700 = '#ae1800'
322
+ export const red600 = '#c91c00'
323
+ export const red500 = '#dd2b0e'
324
+ export const red400 = '#ec5941'
325
+ export const red300 = '#f57f6c'
326
+ export const red200 = '#fcb5aa'
327
+ export const red100 = '#fdd4cd'
328
+ export const red50 = '#fcf1ef'
329
+ export const purple950 = '#232150'
330
+ export const purple900 = '#2f2a6b'
331
+ export const purple800 = '#453894'
332
+ export const purple700 = '#5943b6'
333
+ export const purple600 = '#694cc0'
334
+ export const purple500 = '#7b58cf'
335
+ export const purple400 = '#9475db'
336
+ export const purple300 = '#ac93e6'
337
+ export const purple200 = '#cbbbf2'
338
+ export const purple100 = '#e1d8f9'
339
+ export const purple50 = '#f4f0ff'
340
+ export const orange950 = '#421f00'
341
+ export const orange900 = '#5c2900'
342
+ export const orange800 = '#703800'
343
+ export const orange700 = '#8f4700'
344
+ export const orange600 = '#9e5400'
345
+ export const orange500 = '#ab6100'
346
+ export const orange400 = '#c17d10'
347
+ export const orange300 = '#d99530'
348
+ export const orange200 = '#e9be74'
349
+ export const orange100 = '#f5d9a8'
350
+ export const orange50 = '#fdf1dd'
351
+ export const green950 = '#072b15'
352
+ export const green900 = '#0a4020'
353
+ export const green800 = '#0d532a'
354
+ export const green700 = '#24663b'
355
+ export const green600 = '#217645'
356
+ export const green500 = '#108548'
357
+ export const green400 = '#2da160'
358
+ export const green300 = '#52b87a'
359
+ export const green200 = '#91d4a8'
360
+ export const green100 = '#c3e6cd'
361
+ export const green50 = '#ecf4ee'
362
+ export const gray950 = '#1f1e24'
363
+ export const gray900 = '#333238'
364
+ export const gray800 = '#434248'
365
+ export const gray700 = '#535158'
366
+ export const gray600 = '#626168'
367
+ export const gray500 = '#737278'
368
+ export const gray400 = '#89888d'
369
+ export const gray300 = '#a4a3a8'
370
+ export const gray200 = '#bfbfc3'
371
+ export const gray100 = '#dcdcde'
372
+ export const gray50 = '#ececef'
373
+ export const gray10 = '#fbfafd'
374
+ export const blue950 = '#002850'
375
+ export const blue900 = '#033464'
376
+ export const blue800 = '#064787'
377
+ export const blue700 = '#0b5cad'
378
+ export const blue600 = '#1068bf'
379
+ export const blue500 = '#1f75cb'
380
+ export const blue400 = '#428fdc'
381
+ export const blue300 = '#63a6e9'
382
+ export const blue200 = '#9dc7f1'
383
+ export const blue100 = '#cbe2f9'
384
+ export const blue50 = '#e9f3fc'
385
+ export const white = '#fff'
386
+ export const black = '#000'