@gitlab/ui 87.5.0 → 87.6.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 (30) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +2 -2
  3. package/dist/index.css +1 -1
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +77 -77
  6. package/dist/tokens/build/js/tokens.js +77 -77
  7. package/dist/tokens/css/tokens.css +27 -27
  8. package/dist/tokens/css/tokens.dark.css +27 -27
  9. package/dist/tokens/js/tokens.dark.js +77 -77
  10. package/dist/tokens/js/tokens.js +77 -77
  11. package/dist/tokens/json/tokens.dark.json +4318 -3988
  12. package/dist/tokens/json/tokens.json +4318 -3988
  13. package/dist/tokens/scss/_tokens.dark.scss +27 -27
  14. package/dist/tokens/scss/_tokens.scss +27 -27
  15. package/dist/tokens/scss/_tokens_custom_properties.scss +50 -50
  16. package/package.json +1 -1
  17. package/src/components/base/breadcrumb/breadcrumb.scss +13 -1
  18. package/src/tokens/build/css/tokens.css +27 -27
  19. package/src/tokens/build/css/tokens.dark.css +27 -27
  20. package/src/tokens/build/js/tokens.dark.js +77 -77
  21. package/src/tokens/build/js/tokens.js +77 -77
  22. package/src/tokens/build/json/tokens.dark.json +4318 -3988
  23. package/src/tokens/build/json/tokens.json +4318 -3988
  24. package/src/tokens/build/scss/_tokens.dark.scss +27 -27
  25. package/src/tokens/build/scss/_tokens.scss +27 -27
  26. package/src/tokens/build/scss/_tokens_custom_properties.scss +50 -50
  27. package/src/tokens/{color.theme.tokens.json → deprecated.color.theme.tokens.json} +144 -72
  28. package/src/tokens/{color.tokens.json → deprecated.color.tokens.json} +155 -75
  29. package/src/tokens/{color.transparency.tokens.json → deprecated.color.transparency.tokens.json} +13 -0
  30. package/src/tokens/text.tokens.json +3 -3
package/src/tokens/build/scss/_tokens.dark.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  // Automatically generated
3
3
  // Do not edit directly
4
4
 
5
- $gl-text-tertiary: #737278; // Use text.color.disabled instead
6
- $gl-text-secondary: #89888d; // Use text.color.subtle instead
7
- $gl-text-primary: #ececef; // Use text.color.default instead
5
+ $gl-text-tertiary: #737278; // Use text.color.disabled instead.
6
+ $gl-text-secondary: #89888d; // Use text.color.subtle instead.
7
+ $gl-text-primary: #ececef; // Use text.color.default instead.
8
8
  $gl-line-height-52: 3.25rem;
9
9
  $gl-line-height-44: 2.75rem;
10
10
  $gl-line-height-42: 2.625rem;
@@ -15,30 +15,30 @@ $gl-line-height-24: 1.5rem;
15
15
  $gl-line-height-20: 1.25rem;
16
16
  $gl-line-height-16: 1rem;
17
17
  $gl-line-height-12: 0.75rem;
18
- $t-white-a-08: rgba(255, 255, 255, 0.08) !default;
19
- $t-white-a-06: rgba(255, 255, 255, 0.06) !default;
20
- $t-white-a-04: rgba(255, 255, 255, 0.04) !default;
21
- $t-white-a-02: rgba(255, 255, 255, 0.02) !default;
22
- $t-white-a-36: rgba(255, 255, 255, 0.36) !default;
23
- $t-white-a-24: rgba(255, 255, 255, 0.24) !default;
24
- $t-white-a-16: rgba(255, 255, 255, 0.16) !default;
25
- $t-gray-a-08: rgba(05, 05, 06, 0.08) !default;
26
- $t-gray-a-06: rgba(05, 05, 06, 0.06) !default;
27
- $t-gray-a-04: rgba(05, 05, 06, 0.04) !default;
28
- $t-gray-a-02: rgba(05, 05, 06, 0.02) !default;
29
- $t-gray-a-24: rgba(05, 05, 06, 0.24) !default;
30
- $t-gray-a-16: rgba(05, 05, 06, 0.16) !default;
31
- $brand-gray-05: #2b2838 !default;
32
- $brand-gray-04: #45424d !default;
33
- $brand-gray-03: #74717a !default;
34
- $brand-gray-02: #a2a1a6 !default;
35
- $brand-gray-01: #d1d0d3 !default;
36
- $brand-purple-02: #7759c2 !default;
37
- $brand-purple-01: #a989f5 !default;
38
- $brand-orange-03: #e24329 !default;
39
- $brand-orange-02: #fc6d26 !default;
40
- $brand-orange-01: #fca326 !default;
41
- $brand-charcoal: #171321 !default;
18
+ $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
19
+ $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
20
+ $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
21
+ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 instead.
22
+ $t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
23
+ $t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
24
+ $t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
25
+ $t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
26
+ $t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
27
+ $t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
28
+ $t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
29
+ $t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
30
+ $t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
31
+ $brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
32
+ $brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
33
+ $brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
34
+ $brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
35
+ $brand-gray-01: #d1d0d3 !default; // Use color.brand-gray.01 instead.
36
+ $brand-purple-02: #7759c2 !default; // Use color.purple.02p instead.
37
+ $brand-purple-01: #a989f5 !default; // Use color.purple.01p instead.
38
+ $brand-orange-03: #e24329 !default; // Use color.brand-orange.03p instead.
39
+ $brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.
40
+ $brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
41
+ $brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
42
42
  $red-950: #fff4f3 !default;
43
43
  $red-900: #fcf1ef !default;
44
44
  $red-800: #fdd4cd !default;
package/src/tokens/build/scss/_tokens.scss CHANGED
@@ -2,9 +2,9 @@
2
2
  // Automatically generated
3
3
  // Do not edit directly
4
4
 
5
- $gl-text-tertiary: #89888d; // Use text.color.disabled instead
6
- $gl-text-secondary: #737278; // Use text.color.subtle instead
7
- $gl-text-primary: #28272d; // Use text.color.default instead
5
+ $gl-text-tertiary: #89888d; // Use text.color.disabled instead.
6
+ $gl-text-secondary: #737278; // Use text.color.subtle instead.
7
+ $gl-text-primary: #28272d; // Use text.color.default instead.
8
8
  $gl-line-height-52: 3.25rem;
9
9
  $gl-line-height-44: 2.75rem;
10
10
  $gl-line-height-42: 2.625rem;
@@ -15,30 +15,30 @@ $gl-line-height-24: 1.5rem;
15
15
  $gl-line-height-20: 1.25rem;
16
16
  $gl-line-height-16: 1rem;
17
17
  $gl-line-height-12: 0.75rem;
18
- $t-white-a-08: rgba(255, 255, 255, 0.08) !default;
19
- $t-white-a-06: rgba(255, 255, 255, 0.06) !default;
20
- $t-white-a-04: rgba(255, 255, 255, 0.04) !default;
21
- $t-white-a-02: rgba(255, 255, 255, 0.02) !default;
22
- $t-white-a-36: rgba(255, 255, 255, 0.36) !default;
23
- $t-white-a-24: rgba(255, 255, 255, 0.24) !default;
24
- $t-white-a-16: rgba(255, 255, 255, 0.16) !default;
25
- $t-gray-a-08: rgba(05, 05, 06, 0.08) !default;
26
- $t-gray-a-06: rgba(05, 05, 06, 0.06) !default;
27
- $t-gray-a-04: rgba(05, 05, 06, 0.04) !default;
28
- $t-gray-a-02: rgba(05, 05, 06, 0.02) !default;
29
- $t-gray-a-24: rgba(05, 05, 06, 0.24) !default;
30
- $t-gray-a-16: rgba(05, 05, 06, 0.16) !default;
31
- $brand-gray-05: #2b2838 !default;
32
- $brand-gray-04: #45424d !default;
33
- $brand-gray-03: #74717a !default;
34
- $brand-gray-02: #a2a1a6 !default;
35
- $brand-gray-01: #d1d0d3 !default;
36
- $brand-purple-02: #7759c2 !default;
37
- $brand-purple-01: #a989f5 !default;
38
- $brand-orange-03: #e24329 !default;
39
- $brand-orange-02: #fc6d26 !default;
40
- $brand-orange-01: #fca326 !default;
41
- $brand-charcoal: #171321 !default;
18
+ $t-white-a-08: rgba(255, 255, 255, 0.08) !default; // Use color.alpha.light.8 instead.
19
+ $t-white-a-06: rgba(255, 255, 255, 0.06) !default; // Use color.alpha.light.6 instead.
20
+ $t-white-a-04: rgba(255, 255, 255, 0.04) !default; // Use color.alpha.light.4 instead.
21
+ $t-white-a-02: rgba(255, 255, 255, 0.02) !default; // Use color.alpha.light.2 instead.
22
+ $t-white-a-36: rgba(255, 255, 255, 0.36) !default; // Use color.alpha.light.36 instead.
23
+ $t-white-a-24: rgba(255, 255, 255, 0.24) !default; // Use color.alpha.light.24 instead.
24
+ $t-white-a-16: rgba(255, 255, 255, 0.16) !default; // Use color.alpha.light.16 instead.
25
+ $t-gray-a-08: rgba(05, 05, 06, 0.08) !default; // Use color.alpha.dark.8 instead.
26
+ $t-gray-a-06: rgba(05, 05, 06, 0.06) !default; // Use color.alpha.dark.6 instead.
27
+ $t-gray-a-04: rgba(05, 05, 06, 0.04) !default; // Use color.alpha.dark.4 instead.
28
+ $t-gray-a-02: rgba(05, 05, 06, 0.02) !default; // Use color.alpha.dark.2 instead.
29
+ $t-gray-a-24: rgba(05, 05, 06, 0.24) !default; // Use color.alpha.dark.24 instead.
30
+ $t-gray-a-16: rgba(05, 05, 06, 0.16) !default; // Use color.alpha.dark.16 instead.
31
+ $brand-gray-05: #2b2838 !default; // Use color.brand-gray.05 instead.
32
+ $brand-gray-04: #45424d !default; // Use color.brand-gray.04 instead.
33
+ $brand-gray-03: #74717a !default; // Use color.brand-gray.03 instead.
34
+ $brand-gray-02: #a2a1a6 !default; // Use color.brand-gray.02 instead.
35
+ $brand-gray-01: #d1d0d3 !default; // Use color.brand-gray.01 instead.
36
+ $brand-purple-02: #7759c2 !default; // Use color.purple.02p instead.
37
+ $brand-purple-01: #a989f5 !default; // Use color.purple.01p instead.
38
+ $brand-orange-03: #e24329 !default; // Use color.brand-orange.03p instead.
39
+ $brand-orange-02: #fc6d26 !default; // Use color.brand-orange.02p instead.
40
+ $brand-orange-01: #fca326 !default; // Use color.brand-orange.01p instead.
41
+ $brand-charcoal: #171321 !default; // Use color.brand-charcoal instead.
42
42
  $red-950: #4d0a00 !default;
43
43
  $red-900: #660e00 !default;
44
44
  $red-800: #8d1300 !default;
package/src/tokens/build/scss/_tokens_custom_properties.scss CHANGED
@@ -276,6 +276,56 @@ $data-viz-orange-700: var(--data-viz-orange-700);
276
276
  $data-viz-orange-800: var(--data-viz-orange-800);
277
277
  $data-viz-orange-900: var(--data-viz-orange-900);
278
278
  $data-viz-orange-950: var(--data-viz-orange-950);
279
+ $gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
280
+ $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
281
+ $gl-avatar-fallback-background-color-red: var(--gl-avatar-fallback-background-color-red);
282
+ $gl-avatar-fallback-background-color-purple: var(--gl-avatar-fallback-background-color-purple);
283
+ $gl-avatar-fallback-background-color-blue: var(--gl-avatar-fallback-background-color-blue);
284
+ $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
285
+ $gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
286
+ $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
287
+ $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
288
+ $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
289
+ $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
290
+ $gl-label-light-text-color: var(--gl-label-light-text-color);
291
+ $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
292
+ $gl-label-light-button-background-color-hover: var(--gl-label-light-button-background-color-hover);
293
+ $gl-label-light-button-icon-color-default: var(--gl-label-light-button-icon-color-default);
294
+ $gl-label-dark-text-color: var(--gl-label-dark-text-color);
295
+ $gl-label-dark-button-background-color-default: var(--gl-label-dark-button-background-color-default);
296
+ $gl-label-dark-button-background-color-hover: var(--gl-label-dark-button-background-color-hover);
297
+ $gl-label-dark-button-icon-color-default: var(--gl-label-dark-button-icon-color-default);
298
+ $gl-label-scoped-text-color: var(--gl-label-scoped-text-color);
299
+ $gl-label-scoped-button-background-color-hover: var(--gl-label-scoped-button-background-color-hover);
300
+ $gl-label-scoped-button-icon-color-default: var(--gl-label-scoped-button-icon-color-default);
301
+ $gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-color-hover);
302
+ $gl-popover-background-color: var(--gl-popover-background-color);
303
+ $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
304
+ $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
305
+ $gl-spinner-track-color-default: var(--gl-spinner-track-color-default);
306
+ $gl-spinner-track-color-light: var(--gl-spinner-track-color-light);
307
+ $gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
308
+ $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
309
+ $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
310
+ $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
311
+ $gl-control-background-color-default: var(--gl-control-background-color-default);
312
+ $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
313
+ $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
314
+ $gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
315
+ $gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
316
+ $gl-control-border-color-default: var(--gl-control-border-color-default);
317
+ $gl-control-border-color-hover: var(--gl-control-border-color-hover);
318
+ $gl-control-border-color-focus: var(--gl-control-border-color-focus);
319
+ $gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
320
+ $gl-control-border-color-error: var(--gl-control-border-color-error);
321
+ $gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
322
+ $gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
323
+ $gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
324
+ $gl-control-text-color-error: var(--gl-control-text-color-error);
325
+ $gl-control-text-color-valid: var(--gl-control-text-color-valid);
326
+ $gl-control-placeholder-color: var(--gl-control-placeholder-color);
327
+ $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
328
+ $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
279
329
  $theme-indigo-10: var(--theme-indigo-10);
280
330
  $theme-indigo-50: var(--theme-indigo-50);
281
331
  $theme-indigo-100: var(--theme-indigo-100);
@@ -441,56 +491,6 @@ $t-white-a-02: var(--t-white-a-02);
441
491
  $t-white-a-04: var(--t-white-a-04);
442
492
  $t-white-a-06: var(--t-white-a-06);
443
493
  $t-white-a-08: var(--t-white-a-08);
444
- $gl-avatar-border-color-default: var(--gl-avatar-border-color-default);
445
- $gl-avatar-border-color-hover: var(--gl-avatar-border-color-hover);
446
- $gl-avatar-fallback-background-color-red: var(--gl-avatar-fallback-background-color-red);
447
- $gl-avatar-fallback-background-color-purple: var(--gl-avatar-fallback-background-color-purple);
448
- $gl-avatar-fallback-background-color-blue: var(--gl-avatar-fallback-background-color-blue);
449
- $gl-avatar-fallback-background-color-green: var(--gl-avatar-fallback-background-color-green);
450
- $gl-avatar-fallback-background-color-orange: var(--gl-avatar-fallback-background-color-orange);
451
- $gl-avatar-fallback-background-color-neutral: var(--gl-avatar-fallback-background-color-neutral);
452
- $gl-banner-intro-border-color: var(--gl-banner-intro-border-color);
453
- $gl-banner-promo-background-color: var(--gl-banner-promo-background-color);
454
- $gl-breadcrumb-separator-color: var(--gl-breadcrumb-separator-color);
455
- $gl-label-light-text-color: var(--gl-label-light-text-color);
456
- $gl-label-light-button-background-color-default: var(--gl-label-light-button-background-color-default);
457
- $gl-label-light-button-background-color-hover: var(--gl-label-light-button-background-color-hover);
458
- $gl-label-light-button-icon-color-default: var(--gl-label-light-button-icon-color-default);
459
- $gl-label-dark-text-color: var(--gl-label-dark-text-color);
460
- $gl-label-dark-button-background-color-default: var(--gl-label-dark-button-background-color-default);
461
- $gl-label-dark-button-background-color-hover: var(--gl-label-dark-button-background-color-hover);
462
- $gl-label-dark-button-icon-color-default: var(--gl-label-dark-button-icon-color-default);
463
- $gl-label-scoped-text-color: var(--gl-label-scoped-text-color);
464
- $gl-label-scoped-button-background-color-hover: var(--gl-label-scoped-button-background-color-hover);
465
- $gl-label-scoped-button-icon-color-default: var(--gl-label-scoped-button-icon-color-default);
466
- $gl-label-scoped-button-icon-color-hover: var(--gl-label-scoped-button-icon-color-hover);
467
- $gl-popover-background-color: var(--gl-popover-background-color);
468
- $gl-skeleton-loader-background-color: var(--gl-skeleton-loader-background-color);
469
- $gl-skeleton-loader-shimmer-color: var(--gl-skeleton-loader-shimmer-color);
470
- $gl-spinner-track-color-default: var(--gl-spinner-track-color-default);
471
- $gl-spinner-track-color-light: var(--gl-spinner-track-color-light);
472
- $gl-spinner-segment-color-default: var(--gl-spinner-segment-color-default);
473
- $gl-spinner-segment-color-light: var(--gl-spinner-segment-color-light);
474
- $gl-table-row-background-color-hover: var(--gl-table-row-background-color-hover);
475
- $gl-table-sorting-icon-color: var(--gl-table-sorting-icon-color);
476
- $gl-control-background-color-default: var(--gl-control-background-color-default);
477
- $gl-control-background-color-disabled: var(--gl-control-background-color-disabled);
478
- $gl-control-background-color-selected-default: var(--gl-control-background-color-selected-default);
479
- $gl-control-background-color-selected-hover: var(--gl-control-background-color-selected-hover);
480
- $gl-control-background-color-selected-focus: var(--gl-control-background-color-selected-focus);
481
- $gl-control-border-color-default: var(--gl-control-border-color-default);
482
- $gl-control-border-color-hover: var(--gl-control-border-color-hover);
483
- $gl-control-border-color-focus: var(--gl-control-border-color-focus);
484
- $gl-control-border-color-disabled: var(--gl-control-border-color-disabled);
485
- $gl-control-border-color-error: var(--gl-control-border-color-error);
486
- $gl-control-border-color-selected-default: var(--gl-control-border-color-selected-default);
487
- $gl-control-border-color-selected-hover: var(--gl-control-border-color-selected-hover);
488
- $gl-control-border-color-selected-focus: var(--gl-control-border-color-selected-focus);
489
- $gl-control-text-color-error: var(--gl-control-text-color-error);
490
- $gl-control-text-color-valid: var(--gl-control-text-color-valid);
491
- $gl-control-placeholder-color: var(--gl-control-placeholder-color);
492
- $gl-control-indicator-color-selected: var(--gl-control-indicator-color-selected);
493
- $gl-control-indicator-color-disabled: var(--gl-control-indicator-color-disabled);
494
494
  $gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
495
495
  $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
496
496
  $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);