@gitlab/ui 87.7.0 → 88.0.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 (31) hide show
  1. package/CHANGELOG.md +21 -0
  2. package/bin/migrate_custom_utils_to_tw.bundled.mjs +51 -46
  3. package/dist/index.css +2 -2
  4. package/dist/index.css.map +1 -1
  5. package/dist/tokens/build/js/tokens.dark.js +100 -82
  6. package/dist/tokens/build/js/tokens.js +100 -82
  7. package/dist/tokens/css/tokens.css +99 -81
  8. package/dist/tokens/css/tokens.dark.css +99 -81
  9. package/dist/tokens/js/tokens.dark.js +99 -81
  10. package/dist/tokens/js/tokens.js +99 -81
  11. package/dist/tokens/json/tokens.dark.json +6215 -5799
  12. package/dist/tokens/json/tokens.json +6215 -5799
  13. package/dist/tokens/scss/_tokens.dark.scss +99 -81
  14. package/dist/tokens/scss/_tokens.scss +99 -81
  15. package/dist/tokens/scss/_tokens_custom_properties.scss +99 -81
  16. package/package.json +5 -5
  17. package/src/components/base/avatars_inline/avatars_inline.scss +2 -2
  18. package/src/components/base/badge/badge.scss +63 -63
  19. package/src/components/base/tooltip/tooltip.scss +6 -6
  20. package/src/tokens/build/css/tokens.css +99 -81
  21. package/src/tokens/build/css/tokens.dark.css +99 -81
  22. package/src/tokens/build/js/tokens.dark.js +99 -81
  23. package/src/tokens/build/js/tokens.js +99 -81
  24. package/src/tokens/build/json/tokens.dark.json +6215 -5799
  25. package/src/tokens/build/json/tokens.json +6215 -5799
  26. package/src/tokens/build/scss/_tokens.dark.scss +99 -81
  27. package/src/tokens/build/scss/_tokens.scss +99 -81
  28. package/src/tokens/build/scss/_tokens_custom_properties.scss +99 -81
  29. package/src/tokens/contextual/badge.tokens.json +704 -0
  30. package/src/tokens/feedback.tokens.json +13 -19
  31. package/src/tokens/status.tokens.json +90 -640
package/dist/tokens/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);
@@ -491,10 +568,10 @@ $t-white-a-02: var(--t-white-a-02);
491
568
  $t-white-a-04: var(--t-white-a-04);
492
569
  $t-white-a-06: var(--t-white-a-06);
493
570
  $t-white-a-08: var(--t-white-a-08);
494
- $gl-feedback-background-color-strong: var(--gl-feedback-background-color-strong);
495
- $gl-feedback-text-color-strong: var(--gl-feedback-text-color-strong);
496
- $gl-feedback-icon-color-strong: var(--gl-feedback-icon-color-strong);
497
- $gl-feedback-link-color-strong: var(--gl-feedback-link-color-strong);
571
+ $gl-feedback-strong-background-color: var(--gl-feedback-strong-background-color);
572
+ $gl-feedback-strong-text-color: var(--gl-feedback-strong-text-color);
573
+ $gl-feedback-strong-icon-color: var(--gl-feedback-strong-icon-color);
574
+ $gl-feedback-strong-link-color: var(--gl-feedback-strong-link-color);
498
575
  $gl-feedback-neutral-background-color: var(--gl-feedback-neutral-background-color);
499
576
  $gl-feedback-neutral-text-color: var(--gl-feedback-neutral-text-color);
500
577
  $gl-feedback-neutral-icon-color: var(--gl-feedback-neutral-icon-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);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gitlab/ui",
3
- "version": "87.7.0",
3
+ "version": "88.0.0",
4
4
  "description": "GitLab UI Components",
5
5
  "license": "MIT",
6
6
  "main": "dist/index.js",
@@ -113,8 +113,8 @@
113
113
  "@cypress/grep": "^4.0.1",
114
114
  "@gitlab/eslint-plugin": "19.6.0",
115
115
  "@gitlab/fonts": "^1.3.0",
116
- "@gitlab/stylelint-config": "6.1.0",
117
- "@gitlab/svgs": "3.110.0",
116
+ "@gitlab/stylelint-config": "6.2.1",
117
+ "@gitlab/svgs": "3.112.0",
118
118
  "@jest/test-sequencer": "^29.7.0",
119
119
  "@rollup/plugin-commonjs": "^11.1.0",
120
120
  "@rollup/plugin-node-resolve": "^7.1.3",
@@ -148,7 +148,7 @@
148
148
  "babel-loader": "^8.0.5",
149
149
  "bootstrap": "4.6.2",
150
150
  "cobertura-merge": "^1.0.4",
151
- "cypress": "13.13.1",
151
+ "cypress": "13.13.2",
152
152
  "cypress-axe": "^1.4.0",
153
153
  "cypress-real-events": "^1.11.0",
154
154
  "dompurify": "^3.1.2",
@@ -196,7 +196,7 @@
196
196
  "storybook": "^7.6.20",
197
197
  "storybook-dark-mode": "4.0.2",
198
198
  "style-dictionary": "^3.8.0",
199
- "stylelint": "15.10.2",
199
+ "stylelint": "16.8.1",
200
200
  "tailwind-config-viewer": "2.0.4",
201
201
  "tailwindcss": "3.4.4",
202
202
  "vue": "2.7.16",
package/src/components/base/avatars_inline/avatars_inline.scss CHANGED
@@ -52,8 +52,8 @@
52
52
  @include gl-px-2;
53
53
  @include gl-line-height-normal;
54
54
  @include gl-rounded-pill;
55
- background-color: var(--gl-status-neutral-background-color-default);
56
- color: var(--gl-status-neutral-text-color-default);
55
+ background-color: var(--gl-status-neutral-background-color);
56
+ color: var(--gl-status-neutral-text-color);
57
57
  height: var(--avatar-size);
58
58
  min-width: var(--avatar-size);
59
59
 
package/src/components/base/badge/badge.scss CHANGED
@@ -116,93 +116,93 @@ $badge-min-width: $gl-spacing-scale-3;
116
116
 
117
117
  @include gl-badge-variant(
118
118
  $variant: muted,
119
- $color: var(--gl-status-muted-text-color-default),
120
- $icon-color: var(--gl-status-muted-icon-color-default),
121
- $bg: var(--gl-status-muted-background-color-default),
122
- $hover-color: var(--gl-status-muted-text-color-hover),
123
- $hover-icon-color: var(--gl-status-muted-icon-color-hover),
124
- $border-color: var(--gl-status-muted-border-color-hover),
125
- $active-color: var(--gl-status-muted-text-color-active),
126
- $active-icon-color:var(--gl-status-muted-icon-color-active),
127
- $active-bg: var(--gl-status-muted-background-color-active)
119
+ $color: var(--gl-badge-muted-text-color-default),
120
+ $icon-color: var(--gl-badge-muted-icon-color-default),
121
+ $bg: var(--gl-badge-muted-background-color-default),
122
+ $hover-color: var(--gl-badge-muted-text-color-hover),
123
+ $hover-icon-color: var(--gl-badge-muted-icon-color-hover),
124
+ $border-color: var(--gl-badge-muted-border-color-hover),
125
+ $active-color: var(--gl-badge-muted-text-color-active),
126
+ $active-icon-color:var(--gl-badge-muted-icon-color-active),
127
+ $active-bg: var(--gl-badge-muted-background-color-active)
128
128
  );
129
129
 
130
130
  @include gl-badge-variant(
131
131
  $variant: neutral,
132
- $color: var(--gl-status-neutral-text-color-default),
133
- $icon-color: var(--gl-status-neutral-icon-color-default),
134
- $bg: var(--gl-status-neutral-background-color-default),
135
- $hover-color: var(--gl-status-neutral-text-color-hover),
136
- $hover-icon-color: var(--gl-status-neutral-icon-color-hover),
137
- $border-color: var(--gl-status-neutral-border-color-hover),
138
- $active-color: var(--gl-status-neutral-text-color-active),
139
- $active-icon-color:var(--gl-status-neutral-icon-color-active),
140
- $active-bg: var(--gl-status-neutral-background-color-active)
132
+ $color: var(--gl-badge-neutral-text-color-default),
133
+ $icon-color: var(--gl-badge-neutral-icon-color-default),
134
+ $bg: var(--gl-badge-neutral-background-color-default),
135
+ $hover-color: var(--gl-badge-neutral-text-color-hover),
136
+ $hover-icon-color: var(--gl-badge-neutral-icon-color-hover),
137
+ $border-color: var(--gl-badge-neutral-border-color-hover),
138
+ $active-color: var(--gl-badge-neutral-text-color-active),
139
+ $active-icon-color:var(--gl-badge-neutral-icon-color-active),
140
+ $active-bg: var(--gl-badge-neutral-background-color-active)
141
141
  );
142
142
 
143
143
  @include gl-badge-variant(
144
144
  $variant: info,
145
- $color: var(--gl-status-info-text-color-default),
146
- $icon-color: var(--gl-status-info-icon-color-default),
147
- $bg: var(--gl-status-info-background-color-default),
148
- $hover-color: var(--gl-status-info-text-color-hover),
149
- $hover-icon-color: var(--gl-status-info-icon-color-hover),
150
- $border-color: var(--gl-status-info-border-color-hover),
151
- $active-color: var(--gl-status-info-text-color-active),
152
- $active-icon-color:var(--gl-status-info-icon-color-active),
153
- $active-bg: var(--gl-status-info-background-color-active)
145
+ $color: var(--gl-badge-info-text-color-default),
146
+ $icon-color: var(--gl-badge-info-icon-color-default),
147
+ $bg: var(--gl-badge-info-background-color-default),
148
+ $hover-color: var(--gl-badge-info-text-color-hover),
149
+ $hover-icon-color: var(--gl-badge-info-icon-color-hover),
150
+ $border-color: var(--gl-badge-info-border-color-hover),
151
+ $active-color: var(--gl-badge-info-text-color-active),
152
+ $active-icon-color:var(--gl-badge-info-icon-color-active),
153
+ $active-bg: var(--gl-badge-info-background-color-active)
154
154
  );
155
155
 
156
156
  @include gl-badge-variant(
157
157
  $variant: success,
158
- $color: var(--gl-status-success-text-color-default),
159
- $icon-color: var(--gl-status-success-icon-color-default),
160
- $bg: var(--gl-status-success-background-color-default),
161
- $hover-color: var(--gl-status-success-text-color-hover),
162
- $hover-icon-color: var(--gl-status-success-icon-color-hover),
163
- $border-color: var(--gl-status-success-border-color-hover),
164
- $active-color: var(--gl-status-success-text-color-active),
165
- $active-icon-color:var(--gl-status-success-icon-color-active),
166
- $active-bg: var(--gl-status-success-background-color-active)
158
+ $color: var(--gl-badge-success-text-color-default),
159
+ $icon-color: var(--gl-badge-success-icon-color-default),
160
+ $bg: var(--gl-badge-success-background-color-default),
161
+ $hover-color: var(--gl-badge-success-text-color-hover),
162
+ $hover-icon-color: var(--gl-badge-success-icon-color-hover),
163
+ $border-color: var(--gl-badge-success-border-color-hover),
164
+ $active-color: var(--gl-badge-success-text-color-active),
165
+ $active-icon-color:var(--gl-badge-success-icon-color-active),
166
+ $active-bg: var(--gl-badge-success-background-color-active)
167
167
  );
168
168
 
169
169
  @include gl-badge-variant(
170
170
  $variant: warning,
171
- $color: var(--gl-status-warning-text-color-default),
172
- $icon-color: var(--gl-status-warning-icon-color-default),
173
- $bg: var(--gl-status-warning-background-color-default),
174
- $hover-color: var(--gl-status-warning-text-color-hover),
175
- $hover-icon-color: var(--gl-status-warning-icon-color-hover),
176
- $border-color: var(--gl-status-warning-border-color-hover),
177
- $active-color: var(--gl-status-warning-text-color-active),
178
- $active-icon-color:var(--gl-status-warning-icon-color-active),
179
- $active-bg: var(--gl-status-warning-background-color-active)
171
+ $color: var(--gl-badge-warning-text-color-default),
172
+ $icon-color: var(--gl-badge-warning-icon-color-default),
173
+ $bg: var(--gl-badge-warning-background-color-default),
174
+ $hover-color: var(--gl-badge-warning-text-color-hover),
175
+ $hover-icon-color: var(--gl-badge-warning-icon-color-hover),
176
+ $border-color: var(--gl-badge-warning-border-color-hover),
177
+ $active-color: var(--gl-badge-warning-text-color-active),
178
+ $active-icon-color:var(--gl-badge-warning-icon-color-active),
179
+ $active-bg: var(--gl-badge-warning-background-color-active)
180
180
  );
181
181
 
182
182
  @include gl-badge-variant(
183
183
  $variant: danger,
184
- $color: var(--gl-status-danger-text-color-default),
185
- $icon-color: var(--gl-status-danger-icon-color-default),
186
- $bg: var(--gl-status-danger-background-color-default),
187
- $hover-color: var(--gl-status-danger-text-color-hover),
188
- $hover-icon-color: var(--gl-status-danger-icon-color-hover),
189
- $border-color: var(--gl-status-danger-border-color-hover),
190
- $active-color: var(--gl-status-danger-text-color-active),
191
- $active-icon-color:var(--gl-status-danger-icon-color-active),
192
- $active-bg: var(--gl-status-danger-background-color-active)
184
+ $color: var(--gl-badge-danger-text-color-default),
185
+ $icon-color: var(--gl-badge-danger-icon-color-default),
186
+ $bg: var(--gl-badge-danger-background-color-default),
187
+ $hover-color: var(--gl-badge-danger-text-color-hover),
188
+ $hover-icon-color: var(--gl-badge-danger-icon-color-hover),
189
+ $border-color: var(--gl-badge-danger-border-color-hover),
190
+ $active-color: var(--gl-badge-danger-text-color-active),
191
+ $active-icon-color:var(--gl-badge-danger-icon-color-active),
192
+ $active-bg: var(--gl-badge-danger-background-color-active)
193
193
  );
194
194
 
195
195
  @include gl-badge-variant(
196
196
  $variant: tier,
197
- $color: var(--gl-status-brand-text-color-default),
198
- $icon-color: var(--gl-status-brand-icon-color-default),
199
- $bg: var(--gl-status-brand-background-color-default),
200
- $hover-color: var(--gl-status-brand-text-color-hover),
201
- $hover-icon-color: var(--gl-status-brand-icon-color-hover),
202
- $border-color: var(--gl-status-brand-border-color-hover),
203
- $active-color: var(--gl-status-brand-text-color-active),
204
- $active-icon-color:var(--gl-status-brand-icon-color-active),
205
- $active-bg: var(--gl-status-brand-background-color-active)
197
+ $color: var(--gl-badge-tier-text-color-default),
198
+ $icon-color: var(--gl-badge-tier-icon-color-default),
199
+ $bg: var(--gl-badge-tier-background-color-default),
200
+ $hover-color: var(--gl-badge-tier-text-color-hover),
201
+ $hover-icon-color: var(--gl-badge-tier-icon-color-hover),
202
+ $border-color: var(--gl-badge-tier-border-color-hover),
203
+ $active-color: var(--gl-badge-tier-text-color-active),
204
+ $active-icon-color:var(--gl-badge-tier-icon-color-active),
205
+ $active-bg: var(--gl-badge-tier-background-color-active)
206
206
  );
207
207
 
208
208
  // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
package/src/components/base/tooltip/tooltip.scss CHANGED
@@ -8,8 +8,8 @@
8
8
  @include gl-font-weight-normal;
9
9
  @include gl-py-3;
10
10
  @include gl-px-4;
11
- background: var(--gl-feedback-background-color-strong);
12
- color: var(--gl-feedback-text-color-strong);
11
+ background: var(--gl-feedback-strong-background-color);
12
+ color: var(--gl-feedback-strong-text-color);
13
13
  }
14
14
 
15
15
  .arrow {
@@ -32,20 +32,20 @@
32
32
 
33
33
  .gl-tooltip.bs-tooltip-top .arrow::before {
34
34
  @apply gl-border-b-0;
35
- border-top-color: var(--gl-feedback-background-color-strong);
35
+ border-top-color: var(--gl-feedback-strong-background-color);
36
36
  }
37
37
 
38
38
  .gl-tooltip.bs-tooltip-right .arrow::before {
39
39
  @apply gl-border-l-0;
40
- border-right-color: var(--gl-feedback-background-color-strong);
40
+ border-right-color: var(--gl-feedback-strong-background-color);
41
41
  }
42
42
 
43
43
  .gl-tooltip.bs-tooltip-bottom .arrow::before {
44
44
  @apply gl-border-t-0;
45
- border-bottom-color: var(--gl-feedback-background-color-strong);
45
+ border-bottom-color: var(--gl-feedback-strong-background-color);
46
46
  }
47
47
 
48
48
  .gl-tooltip.bs-tooltip-left .arrow::before {
49
49
  @apply gl-border-r-0;
50
- border-left-color: var(--gl-feedback-background-color-strong);
50
+ border-left-color: var(--gl-feedback-strong-background-color);
51
51
  }