@gitlab/ui 88.3.0 → 88.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.
- package/CHANGELOG.md +7 -0
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/tokens/build/js/tokens.dark.js +69 -34
- package/dist/tokens/build/js/tokens.js +69 -34
- package/dist/tokens/css/tokens.css +68 -33
- package/dist/tokens/css/tokens.dark.css +68 -33
- package/dist/tokens/js/tokens.dark.js +68 -33
- package/dist/tokens/js/tokens.js +68 -33
- package/dist/tokens/json/tokens.dark.json +842 -107
- package/dist/tokens/json/tokens.json +842 -107
- package/dist/tokens/scss/_tokens.dark.scss +68 -33
- package/dist/tokens/scss/_tokens.scss +68 -33
- package/dist/tokens/scss/_tokens_custom_properties.scss +35 -0
- package/package.json +1 -1
- package/src/tokens/build/css/tokens.css +68 -33
- package/src/tokens/build/css/tokens.dark.css +68 -33
- package/src/tokens/build/js/tokens.dark.js +68 -33
- package/src/tokens/build/js/tokens.js +68 -33
- package/src/tokens/build/json/tokens.dark.json +842 -107
- package/src/tokens/build/json/tokens.json +842 -107
- package/src/tokens/build/scss/_tokens.dark.scss +68 -33
- package/src/tokens/build/scss/_tokens.scss +68 -33
- package/src/tokens/build/scss/_tokens_custom_properties.scss +35 -0
- package/src/tokens/contextual/badge.tokens.json +208 -33
package/dist/tokens/js/tokens.js
CHANGED
|
@@ -284,20 +284,30 @@ export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_BLUE = '#e9f3fc'; // Blue backg
|
|
|
284
284
|
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_GREEN = '#ecf4ee'; // Green background for avatar fallback with no particular meaning.
|
|
285
285
|
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_ORANGE = '#fdf1dd'; // Orange background for avatar fallback with no particular meaning.
|
|
286
286
|
export const GL_AVATAR_FALLBACK_BACKGROUND_COLOR_NEUTRAL = '#ececef'; // Neutral background for avatar fallback with no particular meaning.
|
|
287
|
-
export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a
|
|
288
|
-
export const
|
|
289
|
-
export const
|
|
290
|
-
export const
|
|
291
|
-
export const
|
|
292
|
-
export const
|
|
293
|
-
export const
|
|
294
|
-
export const
|
|
295
|
-
export const
|
|
296
|
-
export const
|
|
297
|
-
export const
|
|
287
|
+
export const GL_BADGE_MUTED_BACKGROUND_COLOR_DEFAULT = '#ececef'; // Used for the background of a muted badge when static or the default state when linked.
|
|
288
|
+
export const GL_BADGE_MUTED_BACKGROUND_COLOR_HOVER = '#ececef'; // Used for the background of a muted badge in the hover state.
|
|
289
|
+
export const GL_BADGE_MUTED_BACKGROUND_COLOR_FOCUS = '#ececef'; // Used for the background of a muted badge in the focus state.
|
|
290
|
+
export const GL_BADGE_MUTED_BACKGROUND_COLOR_ACTIVE = '#dcdcde'; // Used for the background of a muted badge in the active state.
|
|
291
|
+
export const GL_BADGE_MUTED_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a muted badge when static or the default state when linked.
|
|
292
|
+
export const GL_BADGE_MUTED_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a muted badge in the hover state.
|
|
293
|
+
export const GL_BADGE_MUTED_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a muted badge in the focus state.
|
|
294
|
+
export const GL_BADGE_MUTED_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a muted badge in the active state.
|
|
295
|
+
export const GL_BADGE_MUTED_TEXT_COLOR_DEFAULT = '#626168'; // Used for the text of a muted badge when static or the default state when linked.
|
|
296
|
+
export const GL_BADGE_MUTED_TEXT_COLOR_HOVER = '#4c4b51'; // Used for the text of a muted badge in the hover state.
|
|
297
|
+
export const GL_BADGE_MUTED_TEXT_COLOR_FOCUS = '#4c4b51'; // Used for the text of a muted badge in the focus state.
|
|
298
|
+
export const GL_BADGE_MUTED_TEXT_COLOR_ACTIVE = '#3a383f'; // Used for the text of a muted badge in the active state.
|
|
299
|
+
export const GL_BADGE_MUTED_ICON_COLOR_DEFAULT = '#737278'; // Used for the icon of a muted badge when static or the default state when linked.
|
|
300
|
+
export const GL_BADGE_MUTED_ICON_COLOR_HOVER = '#626168'; // Used for the icon of a muted badge in the hover state.
|
|
301
|
+
export const GL_BADGE_MUTED_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a muted badge in the focus state.
|
|
302
|
+
export const GL_BADGE_MUTED_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a muted badge in the active state.
|
|
298
303
|
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_DEFAULT = '#dcdcde'; // Used for the background of a neutral badge when static or the default state when linked.
|
|
304
|
+
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_HOVER = '#dcdcde'; // Used for the background of a neutral badge in the hover state.
|
|
305
|
+
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_FOCUS = '#dcdcde'; // Used for the background of a neutral badge in the focus state.
|
|
299
306
|
export const GL_BADGE_NEUTRAL_BACKGROUND_COLOR_ACTIVE = '#bfbfc3'; // Used for the background of a neutral badge in the active state.
|
|
307
|
+
export const GL_BADGE_NEUTRAL_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a neutral badge when static or the default state when linked.
|
|
300
308
|
export const GL_BADGE_NEUTRAL_BORDER_COLOR_HOVER = '#bfbfc3'; // Used for the border of a neutral badge in the hover state.
|
|
309
|
+
export const GL_BADGE_NEUTRAL_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a neutral badge in the focus state.
|
|
310
|
+
export const GL_BADGE_NEUTRAL_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a neutral badge in the active state.
|
|
301
311
|
export const GL_BADGE_NEUTRAL_TEXT_COLOR_DEFAULT = '#4c4b51'; // Used for the text of a neutral badge when static or the default state when linked.
|
|
302
312
|
export const GL_BADGE_NEUTRAL_TEXT_COLOR_HOVER = '#3a383f'; // Used for the text of a neutral badge in the hover state.
|
|
303
313
|
export const GL_BADGE_NEUTRAL_TEXT_COLOR_FOCUS = '#3a383f'; // Used for the text of a neutral badge in the focus state.
|
|
@@ -307,8 +317,13 @@ export const GL_BADGE_NEUTRAL_ICON_COLOR_HOVER = '#626168'; // Used for the icon
|
|
|
307
317
|
export const GL_BADGE_NEUTRAL_ICON_COLOR_FOCUS = '#626168'; // Used for the icon of a neutral badge in the focus state.
|
|
308
318
|
export const GL_BADGE_NEUTRAL_ICON_COLOR_ACTIVE = '#4c4b51'; // Used for the icon of a neutral badge in the active state.
|
|
309
319
|
export const GL_BADGE_INFO_BACKGROUND_COLOR_DEFAULT = '#cbe2f9'; // Used for the background of an informational badge when static or the default state when linked.
|
|
320
|
+
export const GL_BADGE_INFO_BACKGROUND_COLOR_HOVER = '#cbe2f9'; // Used for the background of an informational badge in the hover state.
|
|
321
|
+
export const GL_BADGE_INFO_BACKGROUND_COLOR_FOCUS = '#cbe2f9'; // Used for the background of an informational badge in the focus state.
|
|
310
322
|
export const GL_BADGE_INFO_BACKGROUND_COLOR_ACTIVE = '#9dc7f1'; // Used for the background of an informational badge in the active state.
|
|
323
|
+
export const GL_BADGE_INFO_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of an informational badge when static or the default state when linked.
|
|
311
324
|
export const GL_BADGE_INFO_BORDER_COLOR_HOVER = '#9dc7f1'; // Used for the border of an informational badge in the hover state.
|
|
325
|
+
export const GL_BADGE_INFO_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of an informational badge in the focus state.
|
|
326
|
+
export const GL_BADGE_INFO_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of an informational badge in the active state.
|
|
312
327
|
export const GL_BADGE_INFO_TEXT_COLOR_DEFAULT = '#0b5cad'; // Used for the text of an informational badge when static or the default state when linked.
|
|
313
328
|
export const GL_BADGE_INFO_TEXT_COLOR_HOVER = '#064787'; // Used for the text of an informational badge in the hover state.
|
|
314
329
|
export const GL_BADGE_INFO_TEXT_COLOR_FOCUS = '#064787'; // Used for the text of an informational badge in the focus state.
|
|
@@ -318,8 +333,13 @@ export const GL_BADGE_INFO_ICON_COLOR_HOVER = '#1068bf'; // Used for the icon of
|
|
|
318
333
|
export const GL_BADGE_INFO_ICON_COLOR_FOCUS = '#1068bf'; // Used for the icon of an informational badge in the focus state.
|
|
319
334
|
export const GL_BADGE_INFO_ICON_COLOR_ACTIVE = '#0b5cad'; // Used for the icon of an informational badge in the active state.
|
|
320
335
|
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_DEFAULT = '#c3e6cd'; // Used for the background of a success badge when static or the default state when linked.
|
|
336
|
+
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_HOVER = '#c3e6cd'; // Used for the background of a success badge in the hover state.
|
|
337
|
+
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_FOCUS = '#c3e6cd'; // Used for the background of a success badge in the focus state.
|
|
321
338
|
export const GL_BADGE_SUCCESS_BACKGROUND_COLOR_ACTIVE = '#91d4a8'; // Used for the background of a success badge in the active state.
|
|
339
|
+
export const GL_BADGE_SUCCESS_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a success badge when static or the default state when linked.
|
|
322
340
|
export const GL_BADGE_SUCCESS_BORDER_COLOR_HOVER = '#91d4a8'; // Used for the border of a success badge in the hover state.
|
|
341
|
+
export const GL_BADGE_SUCCESS_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a success badge in the focus state.
|
|
342
|
+
export const GL_BADGE_SUCCESS_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a success badge in the active state.
|
|
323
343
|
export const GL_BADGE_SUCCESS_TEXT_COLOR_DEFAULT = '#24663b'; // Used for the text of a success badge when static or the default state when linked.
|
|
324
344
|
export const GL_BADGE_SUCCESS_TEXT_COLOR_HOVER = '#0d532a'; // Used for the text of a success badge in the hover state.
|
|
325
345
|
export const GL_BADGE_SUCCESS_TEXT_COLOR_FOCUS = '#0d532a'; // Used for the text of a success badge in the focus state.
|
|
@@ -328,31 +348,46 @@ export const GL_BADGE_SUCCESS_ICON_COLOR_DEFAULT = '#108548'; // Used for the ic
|
|
|
328
348
|
export const GL_BADGE_SUCCESS_ICON_COLOR_HOVER = '#217645'; // Used for the icon of a success badge in the hover state.
|
|
329
349
|
export const GL_BADGE_SUCCESS_ICON_COLOR_FOCUS = '#217645'; // Used for the icon of a success badge in the focus state.
|
|
330
350
|
export const GL_BADGE_SUCCESS_ICON_COLOR_ACTIVE = '#24663b'; // Used for the icon of a success badge in the active state.
|
|
331
|
-
export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning
|
|
332
|
-
export const
|
|
333
|
-
export const
|
|
334
|
-
export const
|
|
335
|
-
export const
|
|
336
|
-
export const
|
|
337
|
-
export const
|
|
338
|
-
export const
|
|
339
|
-
export const
|
|
340
|
-
export const
|
|
341
|
-
export const
|
|
342
|
-
export const
|
|
343
|
-
export const
|
|
344
|
-
export const
|
|
345
|
-
export const
|
|
346
|
-
export const
|
|
347
|
-
export const
|
|
348
|
-
export const
|
|
349
|
-
export const
|
|
350
|
-
export const
|
|
351
|
-
export const
|
|
352
|
-
export const
|
|
351
|
+
export const GL_BADGE_WARNING_BACKGROUND_COLOR_DEFAULT = '#f5d9a8'; // Used for the background of a warning badge when static or the default state when linked.
|
|
352
|
+
export const GL_BADGE_WARNING_BACKGROUND_COLOR_HOVER = '#f5d9a8'; // Used for the background of a warning badge in the hover state.
|
|
353
|
+
export const GL_BADGE_WARNING_BACKGROUND_COLOR_FOCUS = '#f5d9a8'; // Used for the background of a warning badge in the focus state.
|
|
354
|
+
export const GL_BADGE_WARNING_BACKGROUND_COLOR_ACTIVE = '#e9be74'; // Used for the background of a warning badge in the active state.
|
|
355
|
+
export const GL_BADGE_WARNING_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a warning badge when static or the default state when linked.
|
|
356
|
+
export const GL_BADGE_WARNING_BORDER_COLOR_HOVER = '#e9be74'; // Used for the border of a warning badge in the hover state.
|
|
357
|
+
export const GL_BADGE_WARNING_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a warning badge in the focus state.
|
|
358
|
+
export const GL_BADGE_WARNING_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a warning badge in the active state.
|
|
359
|
+
export const GL_BADGE_WARNING_TEXT_COLOR_DEFAULT = '#8f4700'; // Used for the text of a warning badge when static or the default state when linked.
|
|
360
|
+
export const GL_BADGE_WARNING_TEXT_COLOR_HOVER = '#703800'; // Used for the text of a warning badge in the hover state.
|
|
361
|
+
export const GL_BADGE_WARNING_TEXT_COLOR_FOCUS = '#703800'; // Used for the text of a warning badge in the focus state.
|
|
362
|
+
export const GL_BADGE_WARNING_TEXT_COLOR_ACTIVE = '#5c2900'; // Used for the text of a warning badge in the active state.
|
|
363
|
+
export const GL_BADGE_WARNING_ICON_COLOR_DEFAULT = '#ab6100'; // Used for the icon of a warning badge when static or the default state when linked.
|
|
364
|
+
export const GL_BADGE_WARNING_ICON_COLOR_HOVER = '#9e5400'; // Used for the icon of a warning badge in the hover state.
|
|
365
|
+
export const GL_BADGE_WARNING_ICON_COLOR_FOCUS = '#9e5400'; // Used for the icon of a warning badge in the focus state.
|
|
366
|
+
export const GL_BADGE_WARNING_ICON_COLOR_ACTIVE = '#8f4700'; // Used for the icon of a warning badge in the active state.
|
|
367
|
+
export const GL_BADGE_DANGER_BACKGROUND_COLOR_DEFAULT = '#fdd4cd'; // Used for the background of a danger badge when static or the default state when linked.
|
|
368
|
+
export const GL_BADGE_DANGER_BACKGROUND_COLOR_HOVER = '#fdd4cd'; // Used for the background of a danger badge in the hover state.
|
|
369
|
+
export const GL_BADGE_DANGER_BACKGROUND_COLOR_FOCUS = '#fdd4cd'; // Used for the background of a danger badge in the focus state.
|
|
370
|
+
export const GL_BADGE_DANGER_BACKGROUND_COLOR_ACTIVE = '#fcb5aa'; // Used for the background of a danger badge in the active state.
|
|
371
|
+
export const GL_BADGE_DANGER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a danger badge when static or the default state when linked.
|
|
372
|
+
export const GL_BADGE_DANGER_BORDER_COLOR_HOVER = '#fcb5aa'; // Used for the border of a danger badge in the hover state.
|
|
373
|
+
export const GL_BADGE_DANGER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a danger badge in the focus state.
|
|
374
|
+
export const GL_BADGE_DANGER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a danger badge in the active state.
|
|
375
|
+
export const GL_BADGE_DANGER_TEXT_COLOR_DEFAULT = '#ae1800'; // Used for the text of a danger badge when static or the default state when linked.
|
|
376
|
+
export const GL_BADGE_DANGER_TEXT_COLOR_HOVER = '#8d1300'; // Used for the text of a danger badge in the hover state.
|
|
377
|
+
export const GL_BADGE_DANGER_TEXT_COLOR_FOCUS = '#8d1300'; // Used for the text of a danger badge in the focus state.
|
|
378
|
+
export const GL_BADGE_DANGER_TEXT_COLOR_ACTIVE = '#660e00'; // Used for the text of a danger badge in the active state.
|
|
379
|
+
export const GL_BADGE_DANGER_ICON_COLOR_DEFAULT = '#dd2b0e'; // Used for the icon of a danger badge when static or the default state when linked.
|
|
380
|
+
export const GL_BADGE_DANGER_ICON_COLOR_HOVER = '#c91c00'; // Used for the icon of a danger badge in the hover state.
|
|
381
|
+
export const GL_BADGE_DANGER_ICON_COLOR_FOCUS = '#c91c00'; // Used for the icon of a danger badge in the focus state.
|
|
382
|
+
export const GL_BADGE_DANGER_ICON_COLOR_ACTIVE = '#ae1800'; // Used for the icon of a danger badge in the active state.
|
|
353
383
|
export const GL_BADGE_TIER_BACKGROUND_COLOR_DEFAULT = '#e1d8f9'; // Used for the background of a tier related badge when static or the default state when linked.
|
|
384
|
+
export const GL_BADGE_TIER_BACKGROUND_COLOR_HOVER = '#e1d8f9'; // Used for the background of a tier related badge in the hover state.
|
|
385
|
+
export const GL_BADGE_TIER_BACKGROUND_COLOR_FOCUS = '#e1d8f9'; // Used for the background of a tier related badge in the focus state.
|
|
354
386
|
export const GL_BADGE_TIER_BACKGROUND_COLOR_ACTIVE = '#cbbbf2'; // Used for the background of a tier related badge in the active state.
|
|
387
|
+
export const GL_BADGE_TIER_BORDER_COLOR_DEFAULT = 'transparent'; // Used for the border of a tier related badge when static or the default state when linked.
|
|
355
388
|
export const GL_BADGE_TIER_BORDER_COLOR_HOVER = '#cbbbf2'; // Used for the border of a tier related badge in the hover state.
|
|
389
|
+
export const GL_BADGE_TIER_BORDER_COLOR_FOCUS = 'transparent'; // Used for the border of a tier related badge in the focus state.
|
|
390
|
+
export const GL_BADGE_TIER_BORDER_COLOR_ACTIVE = 'transparent'; // Used for the border of a tier related badge in the active state.
|
|
356
391
|
export const GL_BADGE_TIER_TEXT_COLOR_DEFAULT = '#5943b6'; // Used for the text of a tier related badge when static or the default state when linked.
|
|
357
392
|
export const GL_BADGE_TIER_TEXT_COLOR_HOVER = '#453894'; // Used for the text of a tier related badge in the hover state.
|
|
358
393
|
export const GL_BADGE_TIER_TEXT_COLOR_FOCUS = '#453894'; // Used for the text of a tier related badge in the focus state.
|