@gitlab/ui 87.6.1 → 87.8.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 (35) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +51 -46
  3. package/dist/components/base/new_dropdowns/disclosure/disclosure_dropdown.js +4 -1
  4. package/dist/components/base/new_dropdowns/listbox/listbox.js +4 -1
  5. package/dist/config.js +22 -3
  6. package/dist/index.css +1 -1
  7. package/dist/index.css.map +1 -1
  8. package/dist/tokens/build/js/tokens.dark.js +96 -78
  9. package/dist/tokens/build/js/tokens.js +96 -78
  10. package/dist/tokens/css/tokens.css +95 -77
  11. package/dist/tokens/css/tokens.dark.css +95 -77
  12. package/dist/tokens/js/tokens.dark.js +95 -77
  13. package/dist/tokens/js/tokens.js +95 -77
  14. package/dist/tokens/json/tokens.dark.json +6046 -5624
  15. package/dist/tokens/json/tokens.json +6046 -5624
  16. package/dist/tokens/scss/_tokens.dark.scss +95 -77
  17. package/dist/tokens/scss/_tokens.scss +95 -77
  18. package/dist/tokens/scss/_tokens_custom_properties.scss +95 -77
  19. package/package.json +4 -4
  20. package/src/components/base/avatars_inline/avatars_inline.scss +2 -2
  21. package/src/components/base/badge/badge.scss +63 -63
  22. package/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.vue +4 -1
  23. package/src/components/base/new_dropdowns/listbox/listbox.vue +4 -1
  24. package/src/config.js +21 -2
  25. package/src/tokens/build/css/tokens.css +95 -77
  26. package/src/tokens/build/css/tokens.dark.css +95 -77
  27. package/src/tokens/build/js/tokens.dark.js +95 -77
  28. package/src/tokens/build/js/tokens.js +95 -77
  29. package/src/tokens/build/json/tokens.dark.json +6046 -5624
  30. package/src/tokens/build/json/tokens.json +6046 -5624
  31. package/src/tokens/build/scss/_tokens.dark.scss +95 -77
  32. package/src/tokens/build/scss/_tokens.scss +95 -77
  33. package/src/tokens/build/scss/_tokens_custom_properties.scss +95 -77
  34. package/src/tokens/contextual/badge.tokens.json +704 -0
  35. package/src/tokens/status.tokens.json +90 -640
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -284,6 +284,83 @@ $gl-avatar-fallback-background-color-blue: var(--gl-avatar-fallback-background-c
284
284
  $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
285
285
  $gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
286
286
  $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
287
+ $gl-badge-muted-background-color-default: var(--gl-badge-muted-background-color-default);
288
+ $gl-badge-muted-background-color-active: var(--gl-badge-muted-background-color-active);
289
+ $gl-badge-muted-border-color-hover: var(--gl-badge-muted-border-color-hover);
290
+ $gl-badge-muted-text-color-default: var(--gl-badge-muted-text-color-default);
291
+ $gl-badge-muted-text-color-hover: var(--gl-badge-muted-text-color-hover);
292
+ $gl-badge-muted-text-color-focus: var(--gl-badge-muted-text-color-focus);
293
+ $gl-badge-muted-text-color-active: var(--gl-badge-muted-text-color-active);
294
+ $gl-badge-muted-icon-color-default: var(--gl-badge-muted-icon-color-default);
295
+ $gl-badge-muted-icon-color-hover: var(--gl-badge-muted-icon-color-hover);
296
+ $gl-badge-muted-icon-color-focus: var(--gl-badge-muted-icon-color-focus);
297
+ $gl-badge-muted-icon-color-active: var(--gl-badge-muted-icon-color-active);
298
+ $gl-badge-neutral-background-color-default: var(--gl-badge-neutral-background-color-default);
299
+ $gl-badge-neutral-background-color-active: var(--gl-badge-neutral-background-color-active);
300
+ $gl-badge-neutral-border-color-hover: var(--gl-badge-neutral-border-color-hover);
301
+ $gl-badge-neutral-text-color-default: var(--gl-badge-neutral-text-color-default);
302
+ $gl-badge-neutral-text-color-hover: var(--gl-badge-neutral-text-color-hover);
303
+ $gl-badge-neutral-text-color-focus: var(--gl-badge-neutral-text-color-focus);
304
+ $gl-badge-neutral-text-color-active: var(--gl-badge-neutral-text-color-active);
305
+ $gl-badge-neutral-icon-color-default: var(--gl-badge-neutral-icon-color-default);
306
+ $gl-badge-neutral-icon-color-hover: var(--gl-badge-neutral-icon-color-hover);
307
+ $gl-badge-neutral-icon-color-focus: var(--gl-badge-neutral-icon-color-focus);
308
+ $gl-badge-neutral-icon-color-active: var(--gl-badge-neutral-icon-color-active);
309
+ $gl-badge-info-background-color-default: var(--gl-badge-info-background-color-default);
310
+ $gl-badge-info-background-color-active: var(--gl-badge-info-background-color-active);
311
+ $gl-badge-info-border-color-hover: var(--gl-badge-info-border-color-hover);
312
+ $gl-badge-info-text-color-default: var(--gl-badge-info-text-color-default);
313
+ $gl-badge-info-text-color-hover: var(--gl-badge-info-text-color-hover);
314
+ $gl-badge-info-text-color-focus: var(--gl-badge-info-text-color-focus);
315
+ $gl-badge-info-text-color-active: var(--gl-badge-info-text-color-active);
316
+ $gl-badge-info-icon-color-default: var(--gl-badge-info-icon-color-default);
317
+ $gl-badge-info-icon-color-hover: var(--gl-badge-info-icon-color-hover);
318
+ $gl-badge-info-icon-color-focus: var(--gl-badge-info-icon-color-focus);
319
+ $gl-badge-info-icon-color-active: var(--gl-badge-info-icon-color-active);
320
+ $gl-badge-success-background-color-default: var(--gl-badge-success-background-color-default);
321
+ $gl-badge-success-background-color-active: var(--gl-badge-success-background-color-active);
322
+ $gl-badge-success-border-color-hover: var(--gl-badge-success-border-color-hover);
323
+ $gl-badge-success-text-color-default: var(--gl-badge-success-text-color-default);
324
+ $gl-badge-success-text-color-hover: var(--gl-badge-success-text-color-hover);
325
+ $gl-badge-success-text-color-focus: var(--gl-badge-success-text-color-focus);
326
+ $gl-badge-success-text-color-active: var(--gl-badge-success-text-color-active);
327
+ $gl-badge-success-icon-color-default: var(--gl-badge-success-icon-color-default);
328
+ $gl-badge-success-icon-color-hover: var(--gl-badge-success-icon-color-hover);
329
+ $gl-badge-success-icon-color-focus: var(--gl-badge-success-icon-color-focus);
330
+ $gl-badge-success-icon-color-active: var(--gl-badge-success-icon-color-active);
331
+ $gl-badge-warning-background-color-default: var(--gl-badge-warning-background-color-default);
332
+ $gl-badge-warning-background-color-active: var(--gl-badge-warning-background-color-active);
333
+ $gl-badge-warning-border-color-hover: var(--gl-badge-warning-border-color-hover);
334
+ $gl-badge-warning-text-color-default: var(--gl-badge-warning-text-color-default);
335
+ $gl-badge-warning-text-color-hover: var(--gl-badge-warning-text-color-hover);
336
+ $gl-badge-warning-text-color-focus: var(--gl-badge-warning-text-color-focus);
337
+ $gl-badge-warning-text-color-active: var(--gl-badge-warning-text-color-active);
338
+ $gl-badge-warning-icon-color-default: var(--gl-badge-warning-icon-color-default);
339
+ $gl-badge-warning-icon-color-hover: var(--gl-badge-warning-icon-color-hover);
340
+ $gl-badge-warning-icon-color-focus: var(--gl-badge-warning-icon-color-focus);
341
+ $gl-badge-warning-icon-color-active: var(--gl-badge-warning-icon-color-active);
342
+ $gl-badge-danger-background-color-default: var(--gl-badge-danger-background-color-default);
343
+ $gl-badge-danger-background-color-active: var(--gl-badge-danger-background-color-active);
344
+ $gl-badge-danger-border-color-hover: var(--gl-badge-danger-border-color-hover);
345
+ $gl-badge-danger-text-color-default: var(--gl-badge-danger-text-color-default);
346
+ $gl-badge-danger-text-color-hover: var(--gl-badge-danger-text-color-hover);
347
+ $gl-badge-danger-text-color-focus: var(--gl-badge-danger-text-color-focus);
348
+ $gl-badge-danger-text-color-active: var(--gl-badge-danger-text-color-active);
349
+ $gl-badge-danger-icon-color-default: var(--gl-badge-danger-icon-color-default);
350
+ $gl-badge-danger-icon-color-hover: var(--gl-badge-danger-icon-color-hover);
351
+ $gl-badge-danger-icon-color-focus: var(--gl-badge-danger-icon-color-focus);
352
+ $gl-badge-danger-icon-color-active: var(--gl-badge-danger-icon-color-active);
353
+ $gl-badge-tier-background-color-default: var(--gl-badge-tier-background-color-default);
354
+ $gl-badge-tier-background-color-active: var(--gl-badge-tier-background-color-active);
355
+ $gl-badge-tier-border-color-hover: var(--gl-badge-tier-border-color-hover);
356
+ $gl-badge-tier-text-color-default: var(--gl-badge-tier-text-color-default);
357
+ $gl-badge-tier-text-color-hover: var(--gl-badge-tier-text-color-hover);
358
+ $gl-badge-tier-text-color-focus: var(--gl-badge-tier-text-color-focus);
359
+ $gl-badge-tier-text-color-active: var(--gl-badge-tier-text-color-active);
360
+ $gl-badge-tier-icon-color-default: var(--gl-badge-tier-icon-color-default);
361
+ $gl-badge-tier-icon-color-hover: var(--gl-badge-tier-icon-color-hover);
362
+ $gl-badge-tier-icon-color-focus: var(--gl-badge-tier-icon-color-focus);
363
+ $gl-badge-tier-icon-color-active: var(--gl-badge-tier-icon-color-active);
287
364
  $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
288
365
  $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
289
366
  $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
@@ -532,83 +609,24 @@ $gl-line-height-42: var(--gl-line-height-42);
532
609
  $gl-line-height-44: var(--gl-line-height-44);
533
610
  $gl-line-height-52: var(--gl-line-height-52);
534
611
  $gl-shadow-color-default: var(--gl-shadow-color-default);
535
- $gl-status-muted-background-color-default: var(--gl-status-muted-background-color-default);
536
- $gl-status-muted-background-color-active: var(--gl-status-muted-background-color-active);
537
- $gl-status-muted-border-color-hover: var(--gl-status-muted-border-color-hover);
538
- $gl-status-muted-text-color-default: var(--gl-status-muted-text-color-default);
539
- $gl-status-muted-text-color-hover: var(--gl-status-muted-text-color-hover);
540
- $gl-status-muted-text-color-focus: var(--gl-status-muted-text-color-focus);
541
- $gl-status-muted-text-color-active: var(--gl-status-muted-text-color-active);
542
- $gl-status-muted-icon-color-default: var(--gl-status-muted-icon-color-default);
543
- $gl-status-muted-icon-color-hover: var(--gl-status-muted-icon-color-hover);
544
- $gl-status-muted-icon-color-focus: var(--gl-status-muted-icon-color-focus);
545
- $gl-status-muted-icon-color-active: var(--gl-status-muted-icon-color-active);
546
- $gl-status-neutral-background-color-default: var(--gl-status-neutral-background-color-default);
547
- $gl-status-neutral-background-color-active: var(--gl-status-neutral-background-color-active);
548
- $gl-status-neutral-border-color-hover: var(--gl-status-neutral-border-color-hover);
549
- $gl-status-neutral-text-color-default: var(--gl-status-neutral-text-color-default);
550
- $gl-status-neutral-text-color-hover: var(--gl-status-neutral-text-color-hover);
551
- $gl-status-neutral-text-color-focus: var(--gl-status-neutral-text-color-focus);
552
- $gl-status-neutral-text-color-active: var(--gl-status-neutral-text-color-active);
553
- $gl-status-neutral-icon-color-default: var(--gl-status-neutral-icon-color-default);
554
- $gl-status-neutral-icon-color-hover: var(--gl-status-neutral-icon-color-hover);
555
- $gl-status-neutral-icon-color-focus: var(--gl-status-neutral-icon-color-focus);
556
- $gl-status-neutral-icon-color-active: var(--gl-status-neutral-icon-color-active);
557
- $gl-status-info-background-color-default: var(--gl-status-info-background-color-default);
558
- $gl-status-info-background-color-active: var(--gl-status-info-background-color-active);
559
- $gl-status-info-border-color-hover: var(--gl-status-info-border-color-hover);
560
- $gl-status-info-text-color-default: var(--gl-status-info-text-color-default);
561
- $gl-status-info-text-color-hover: var(--gl-status-info-text-color-hover);
562
- $gl-status-info-text-color-focus: var(--gl-status-info-text-color-focus);
563
- $gl-status-info-text-color-active: var(--gl-status-info-text-color-active);
564
- $gl-status-info-icon-color-default: var(--gl-status-info-icon-color-default);
565
- $gl-status-info-icon-color-hover: var(--gl-status-info-icon-color-hover);
566
- $gl-status-info-icon-color-focus: var(--gl-status-info-icon-color-focus);
567
- $gl-status-info-icon-color-active: var(--gl-status-info-icon-color-active);
568
- $gl-status-success-background-color-default: var(--gl-status-success-background-color-default);
569
- $gl-status-success-background-color-active: var(--gl-status-success-background-color-active);
570
- $gl-status-success-border-color-hover: var(--gl-status-success-border-color-hover);
571
- $gl-status-success-text-color-default: var(--gl-status-success-text-color-default);
572
- $gl-status-success-text-color-hover: var(--gl-status-success-text-color-hover);
573
- $gl-status-success-text-color-focus: var(--gl-status-success-text-color-focus);
574
- $gl-status-success-text-color-active: var(--gl-status-success-text-color-active);
575
- $gl-status-success-icon-color-default: var(--gl-status-success-icon-color-default);
576
- $gl-status-success-icon-color-hover: var(--gl-status-success-icon-color-hover);
577
- $gl-status-success-icon-color-focus: var(--gl-status-success-icon-color-focus);
578
- $gl-status-success-icon-color-active: var(--gl-status-success-icon-color-active);
579
- $gl-status-warning-background-color-default: var(--gl-status-warning-background-color-default);
580
- $gl-status-warning-background-color-active: var(--gl-status-warning-background-color-active);
581
- $gl-status-warning-border-color-hover: var(--gl-status-warning-border-color-hover);
582
- $gl-status-warning-text-color-default: var(--gl-status-warning-text-color-default);
583
- $gl-status-warning-text-color-hover: var(--gl-status-warning-text-color-hover);
584
- $gl-status-warning-text-color-focus: var(--gl-status-warning-text-color-focus);
585
- $gl-status-warning-text-color-active: var(--gl-status-warning-text-color-active);
586
- $gl-status-warning-icon-color-default: var(--gl-status-warning-icon-color-default);
587
- $gl-status-warning-icon-color-hover: var(--gl-status-warning-icon-color-hover);
588
- $gl-status-warning-icon-color-focus: var(--gl-status-warning-icon-color-focus);
589
- $gl-status-warning-icon-color-active: var(--gl-status-warning-icon-color-active);
590
- $gl-status-danger-background-color-default: var(--gl-status-danger-background-color-default);
591
- $gl-status-danger-background-color-active: var(--gl-status-danger-background-color-active);
592
- $gl-status-danger-border-color-hover: var(--gl-status-danger-border-color-hover);
593
- $gl-status-danger-text-color-default: var(--gl-status-danger-text-color-default);
594
- $gl-status-danger-text-color-hover: var(--gl-status-danger-text-color-hover);
595
- $gl-status-danger-text-color-focus: var(--gl-status-danger-text-color-focus);
596
- $gl-status-danger-text-color-active: var(--gl-status-danger-text-color-active);
597
- $gl-status-danger-icon-color-default: var(--gl-status-danger-icon-color-default);
598
- $gl-status-danger-icon-color-hover: var(--gl-status-danger-icon-color-hover);
599
- $gl-status-danger-icon-color-focus: var(--gl-status-danger-icon-color-focus);
600
- $gl-status-danger-icon-color-active: var(--gl-status-danger-icon-color-active);
601
- $gl-status-brand-background-color-default: var(--gl-status-brand-background-color-default);
602
- $gl-status-brand-background-color-active: var(--gl-status-brand-background-color-active);
603
- $gl-status-brand-border-color-hover: var(--gl-status-brand-border-color-hover);
604
- $gl-status-brand-text-color-default: var(--gl-status-brand-text-color-default);
605
- $gl-status-brand-text-color-hover: var(--gl-status-brand-text-color-hover);
606
- $gl-status-brand-text-color-focus: var(--gl-status-brand-text-color-focus);
607
- $gl-status-brand-text-color-active: var(--gl-status-brand-text-color-active);
608
- $gl-status-brand-icon-color-default: var(--gl-status-brand-icon-color-default);
609
- $gl-status-brand-icon-color-hover: var(--gl-status-brand-icon-color-hover);
610
- $gl-status-brand-icon-color-focus: var(--gl-status-brand-icon-color-focus);
611
- $gl-status-brand-icon-color-active: var(--gl-status-brand-icon-color-active);
612
+ $gl-status-neutral-background-color: var(--gl-status-neutral-background-color);
613
+ $gl-status-neutral-text-color: var(--gl-status-neutral-text-color);
614
+ $gl-status-neutral-icon-color: var(--gl-status-neutral-icon-color);
615
+ $gl-status-info-background-color: var(--gl-status-info-background-color);
616
+ $gl-status-info-text-color: var(--gl-status-info-text-color);
617
+ $gl-status-info-icon-color: var(--gl-status-info-icon-color);
618
+ $gl-status-success-background-color: var(--gl-status-success-background-color);
619
+ $gl-status-success-text-color: var(--gl-status-success-text-color);
620
+ $gl-status-success-icon-color: var(--gl-status-success-icon-color);
621
+ $gl-status-warning-background-color: var(--gl-status-warning-background-color);
622
+ $gl-status-warning-text-color: var(--gl-status-warning-text-color);
623
+ $gl-status-warning-icon-color: var(--gl-status-warning-icon-color);
624
+ $gl-status-danger-background-color: var(--gl-status-danger-background-color);
625
+ $gl-status-danger-text-color: var(--gl-status-danger-text-color);
626
+ $gl-status-danger-icon-color: var(--gl-status-danger-icon-color);
627
+ $gl-status-brand-background-color: var(--gl-status-brand-background-color);
628
+ $gl-status-brand-text-color: var(--gl-status-brand-text-color);
629
+ $gl-status-brand-icon-color: var(--gl-status-brand-icon-color);
612
630
  $gl-text-primary: var(--gl-text-primary);
613
631
  $gl-text-secondary: var(--gl-text-secondary);
614
632
  $gl-text-tertiary: var(--gl-text-tertiary);