@gitlab/ui 119.1.0 → 120.0.0

package/dist/tokens/figma/contextual.tokens.json

@@ -514,7 +514,8 @@
                 "FRAME_FILL",
                 "SHAPE_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "hover": {
             "$value": "{badge.muted.background.color.default}",
@@ -525,7 +526,8 @@
                 "FRAME_FILL",
                 "SHAPE_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "focus": {
             "$value": "{badge.muted.background.color.hover}",
@@ -536,7 +538,8 @@
                 "FRAME_FILL",
                 "SHAPE_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -637,7 +640,8 @@
               "com.figma.scope": [
                 "TEXT_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -693,7 +697,8 @@
                 "SHAPE_FILL",
                 "TEXT_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {

package/dist/tokens/json/tokens.dark.json

@@ -7237,6 +7237,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7252,6 +7253,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.default}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_DEFAULT",
@@ -7275,6 +7277,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7287,6 +7290,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.hover}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_HOVER",
@@ -7310,6 +7314,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7322,6 +7327,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.focus}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_FOCUS",
@@ -7597,6 +7603,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7608,6 +7615,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.text.color.focus}"
             },
             "name": "BADGE_MUTED_TEXT_COLOR_FOCUS",
@@ -7747,6 +7755,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7759,6 +7768,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.icon.color.focus}"
             },
             "name": "BADGE_MUTED_ICON_COLOR_FOCUS",

package/dist/tokens/json/tokens.json

@@ -7237,6 +7237,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7252,6 +7253,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.default}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_DEFAULT",
@@ -7275,6 +7277,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7287,6 +7290,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.hover}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_HOVER",
@@ -7310,6 +7314,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7322,6 +7327,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.focus}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_FOCUS",
@@ -7597,6 +7603,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7608,6 +7615,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.text.color.focus}"
             },
             "name": "BADGE_MUTED_TEXT_COLOR_FOCUS",
@@ -7747,6 +7755,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7759,6 +7768,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.icon.color.focus}"
             },
             "name": "BADGE_MUTED_ICON_COLOR_FOCUS",

package/dist/utils/constants.js

@@ -33,7 +33,6 @@ const badgeSizeOptions = {
   lg: 'lg'
 };
 const badgeVariantOptions = {
-  muted: 'muted',
   neutral: 'neutral',
   info: 'info',
   success: 'success',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "119.1.0",
+  "version": "120.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -69,7 +69,7 @@
     "tailwind-config-viewer:export": "tailwind-config-viewer export ./tailwind-config-viewer-static"
   },
   "dependencies": {
-    "@floating-ui/dom": "1.7.3",
+    "@floating-ui/dom": "1.7.4",
     "echarts": "^5.6.0",
     "gridstack": "^12.3.3",
     "iframe-resizer": "^4.4.5",
@@ -102,8 +102,8 @@
     "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@cypress/grep": "^4.1.1",
-    "@gitlab/fonts": "^1.3.0",
-    "@gitlab/svgs": "3.143.0",
+    "@gitlab/fonts": "^1.3.1",
+    "@gitlab/svgs": "3.145.0",
     "@jest/test-sequencer": "30.0.5",
     "@rollup/plugin-commonjs": "^28.0.6",
     "@rollup/plugin-node-resolve": "^16.0.1",
@@ -122,9 +122,9 @@
     "@storybook/vue3": "^7.6.20",
     "@storybook/vue3-webpack5": "^7.6.20",
     "@types/jest-image-snapshot": "^6.4.0",
-    "@vue/compat": "^3.5.18",
-    "@vue/compiler-sfc": "^3.5.18",
-    "@vue/server-renderer": "^3.5.18",
+    "@vue/compat": "^3.5.19",
+    "@vue/compiler-sfc": "^3.5.19",
+    "@vue/server-renderer": "^3.5.19",
     "@vue/test-utils": "1.3.6",
     "@vue/test-utils-vue3": "npm:@vue/test-utils@^2.4.6",
     "@vue/vue2-jest": "29.2.6",
@@ -152,8 +152,8 @@
     "mockdate": "^3.0.5",
     "module-alias": "^2.2.3",
     "pikaday": "^1.8.0",
-    "playwright": "^1.54.2",
-    "playwright-core": "^1.54.2",
+    "playwright": "^1.55.0",
+    "playwright-core": "^1.55.0",
     "postcss": "8.5.6",
     "postcss-loader": "8.1.1",
     "postcss-scss": "4.0.9",
@@ -171,7 +171,7 @@
     "start-server-and-test": "^2.0.13",
     "storybook": "^7.6.20",
     "storybook-dark-mode": "4.0.2",
-    "style-dictionary": "^5.0.1",
+    "style-dictionary": "^5.0.2",
     "style-loader": "^4",
     "tailwind-config-viewer": "2.0.4",
     "tailwindcss": "3.4.17",

package/src/components/base/badge/badge.scss

@@ -40,7 +40,6 @@ $badge-min-width: $gl-spacing-scale-3;
       }
     }
 
-
     &:focus {
       color: $focus-color;
       background-color: $focus-background-color;
@@ -86,10 +85,11 @@ $badge-min-width: $gl-spacing-scale-3;
   justify-content: center;
   gap: $gl-spacing-scale-2;
   padding: $gl-spacing-scale-1 $badge-padding-horizontal;
-  transition: color $gl-transition-duration-medium $gl-easing-out-cubic,
-              background-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              border-color $gl-transition-duration-medium $gl-easing-out-cubic,
-              box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
+  transition:
+    color $gl-transition-duration-medium $gl-easing-out-cubic,
+    background-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    border-color $gl-transition-duration-medium $gl-easing-out-cubic,
+    box-shadow $gl-transition-duration-medium $gl-easing-out-cubic;
   @include gl-prefers-reduced-motion-transition;
 
   &:has(.gl-truncate, .gl-text-truncate) {
@@ -118,26 +118,8 @@ a.gl-badge.disabled {
   cursor: not-allowed;
 }
 
-
 /* Variants */
 
-@include gl-badge-variant(
-  $variant: muted,
-  $color: var(--gl-badge-muted-text-color-default),
-  $icon-color: var(--gl-badge-muted-icon-color-default),
-  $background-color: var(--gl-badge-muted-background-color-default),
-  $hover-color: var(--gl-badge-muted-text-color-hover),
-  $hover-icon-color: var(--gl-badge-muted-icon-color-hover),
-  $hover-background-color: var(--gl-badge-muted-background-color-hover),
-  $hover-border-color: var(--gl-badge-muted-border-color-hover),
-  $focus-color: var(--gl-badge-muted-text-color-focus),
-  $focus-icon-color:var(--gl-badge-muted-icon-color-focus),
-  $focus-background-color: var(--gl-badge-muted-background-color-focus),
-  $active-color: var(--gl-badge-muted-text-color-active),
-  $active-icon-color:var(--gl-badge-muted-icon-color-active),
-  $active-background-color: var(--gl-badge-muted-background-color-active)
-);
-
 @include gl-badge-variant(
   $variant: neutral,
   $color: var(--gl-badge-neutral-text-color-default),
@@ -148,10 +130,10 @@ a.gl-badge.disabled {
   $hover-background-color: var(--gl-badge-neutral-background-color-hover),
   $hover-border-color: var(--gl-badge-neutral-border-color-hover),
   $focus-color: var(--gl-badge-neutral-text-color-focus),
-  $focus-icon-color:var(--gl-badge-neutral-icon-color-focus),
+  $focus-icon-color: var(--gl-badge-neutral-icon-color-focus),
   $focus-background-color: var(--gl-badge-neutral-background-color-focus),
   $active-color: var(--gl-badge-neutral-text-color-active),
-  $active-icon-color:var(--gl-badge-neutral-icon-color-active),
+  $active-icon-color: var(--gl-badge-neutral-icon-color-active),
   $active-background-color: var(--gl-badge-neutral-background-color-active)
 );
 
@@ -165,10 +147,10 @@ a.gl-badge.disabled {
   $hover-background-color: var(--gl-badge-info-background-color-hover),
   $hover-border-color: var(--gl-badge-info-border-color-hover),
   $focus-color: var(--gl-badge-info-text-color-focus),
-  $focus-icon-color:var(--gl-badge-info-icon-color-focus),
+  $focus-icon-color: var(--gl-badge-info-icon-color-focus),
   $focus-background-color: var(--gl-badge-info-background-color-focus),
   $active-color: var(--gl-badge-info-text-color-active),
-  $active-icon-color:var(--gl-badge-info-icon-color-active),
+  $active-icon-color: var(--gl-badge-info-icon-color-active),
   $active-background-color: var(--gl-badge-info-background-color-active)
 );
 
@@ -182,10 +164,10 @@ a.gl-badge.disabled {
   $hover-background-color: var(--gl-badge-success-background-color-hover),
   $hover-border-color: var(--gl-badge-success-border-color-hover),
   $focus-color: var(--gl-badge-success-text-color-focus),
-  $focus-icon-color:var(--gl-badge-success-icon-color-focus),
+  $focus-icon-color: var(--gl-badge-success-icon-color-focus),
   $focus-background-color: var(--gl-badge-success-background-color-focus),
   $active-color: var(--gl-badge-success-text-color-active),
-  $active-icon-color:var(--gl-badge-success-icon-color-active),
+  $active-icon-color: var(--gl-badge-success-icon-color-active),
   $active-background-color: var(--gl-badge-success-background-color-active)
 );
 
@@ -199,10 +181,10 @@ a.gl-badge.disabled {
   $hover-background-color: var(--gl-badge-warning-background-color-hover),
   $hover-border-color: var(--gl-badge-warning-border-color-hover),
   $focus-color: var(--gl-badge-warning-text-color-focus),
-  $focus-icon-color:var(--gl-badge-warning-icon-color-focus),
+  $focus-icon-color: var(--gl-badge-warning-icon-color-focus),
   $focus-background-color: var(--gl-badge-warning-background-color-focus),
   $active-color: var(--gl-badge-warning-text-color-active),
-  $active-icon-color:var(--gl-badge-warning-icon-color-active),
+  $active-icon-color: var(--gl-badge-warning-icon-color-active),
   $active-background-color: var(--gl-badge-warning-background-color-active)
 );
 
@@ -216,10 +198,10 @@ a.gl-badge.disabled {
   $hover-background-color: var(--gl-badge-danger-background-color-hover),
   $hover-border-color: var(--gl-badge-danger-border-color-hover),
   $focus-color: var(--gl-badge-danger-text-color-focus),
-  $focus-icon-color:var(--gl-badge-danger-icon-color-focus),
+  $focus-icon-color: var(--gl-badge-danger-icon-color-focus),
   $focus-background-color: var(--gl-badge-danger-background-color-focus),
   $active-color: var(--gl-badge-danger-text-color-active),
-  $active-icon-color:var(--gl-badge-danger-icon-color-active),
+  $active-icon-color: var(--gl-badge-danger-icon-color-active),
   $active-background-color: var(--gl-badge-danger-background-color-active)
 );
 
@@ -233,10 +215,10 @@ a.gl-badge.disabled {
   $hover-background-color: var(--gl-badge-tier-background-color-hover),
   $hover-border-color: var(--gl-badge-tier-border-color-hover),
   $focus-color: var(--gl-badge-tier-text-color-focus),
-  $focus-icon-color:var(--gl-badge-tier-icon-color-focus),
+  $focus-icon-color: var(--gl-badge-tier-icon-color-focus),
   $focus-background-color: var(--gl-badge-tier-background-color-focus),
   $active-color: var(--gl-badge-tier-text-color-active),
-  $active-icon-color:var(--gl-badge-tier-icon-color-active),
+  $active-icon-color: var(--gl-badge-tier-icon-color-active),
   $active-background-color: var(--gl-badge-tier-background-color-active)
 );
 

package/src/components/base/badge/badge.vue

@@ -9,7 +9,6 @@ import {
 import GlIcon from '../icon/icon.vue';
 
 const variantClass = {
-  [badgeVariantOptions.muted]: 'badge-muted',
   [badgeVariantOptions.neutral]: 'badge-neutral',
   [badgeVariantOptions.info]: 'badge-info',
   [badgeVariantOptions.success]: 'badge-success',
@@ -30,7 +29,7 @@ export default {
      */
     variant: {
       type: String,
-      default: badgeVariantOptions.muted,
+      default: badgeVariantOptions.neutral,
       validator(value) {
         return badgeVariantOptions[value] !== undefined;
       },

package/src/components/charts/bar/bar.vue

@@ -3,13 +3,14 @@
 import merge from 'lodash/merge';
 import truncate from 'lodash/truncate';
 import { grid, dataZoomAdjustments, mergeSeriesToOptions } from '../../../utils/charts/config';
-import { HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
+import { CHART_DEFAULT_SERIES_STACK, HEIGHT_AUTO_CLASSES } from '../../../utils/charts/constants';
 import { colorFromDefaultPalette } from '../../../utils/charts/theme';
 import { engineeringNotation } from '../../../utils/number_utils';
 import { hexToRgba } from '../../../utils/utils';
 import TooltipDefaultFormat from '../shared/tooltip/tooltip_default_format/tooltip_default_format.vue';
 import Chart from '../chart/chart.vue';
 import ChartTooltip from '../shared/tooltip/tooltip.vue';
+import { stackedPresentationOptions } from '../../../utils/constants';
 
 /**
  * `nameGap` in charts/config is set to 50 but it is not
@@ -97,6 +98,17 @@ export default {
       required: false,
       default: null,
     },
+    /**
+     * Controls how multiple series data are displayed in the chart –
+     * `stacked` stacks series horizontally, and
+     * `tiled` displays series as grouped bars.
+     */
+    presentation: {
+      type: String,
+      required: false,
+      default: stackedPresentationOptions.stacked,
+      validator: (value) => Object.values(stackedPresentationOptions).includes(value),
+    },
   },
   data() {
     return {
@@ -114,7 +126,10 @@ export default {
           name: key,
           data: this.data[key],
           type: 'bar',
-          stack: 'chart',
+          stack:
+            this.presentation === stackedPresentationOptions.tiled
+              ? null
+              : CHART_DEFAULT_SERIES_STACK,
           itemStyle: {
             color: hexToRgba(barColor, 0.2),
             borderColor: barColor,

package/src/components/charts/single_stat/single_stat.vue

@@ -37,7 +37,7 @@ export default {
     variant: {
       type: String,
       required: false,
-      default: badgeVariantOptions.muted,
+      default: badgeVariantOptions.neutral,
       validator: (variant) => Object.values(badgeVariantOptions).includes(variant),
     },
     titleIcon: {

package/src/tokens/build/figma/contextual.tokens.json

@@ -514,7 +514,8 @@
                 "FRAME_FILL",
                 "SHAPE_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "hover": {
             "$value": "{badge.muted.background.color.default}",
@@ -525,7 +526,8 @@
                 "FRAME_FILL",
                 "SHAPE_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "focus": {
             "$value": "{badge.muted.background.color.hover}",
@@ -536,7 +538,8 @@
                 "FRAME_FILL",
                 "SHAPE_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -637,7 +640,8 @@
               "com.figma.scope": [
                 "TEXT_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {
@@ -693,7 +697,8 @@
                 "SHAPE_FILL",
                 "TEXT_FILL"
               ]
-            }
+            },
+            "$deprecated": true
           },
           "active": {
             "$value": {

package/src/tokens/build/json/tokens.dark.json

@@ -7237,6 +7237,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7252,6 +7253,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.default}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_DEFAULT",
@@ -7275,6 +7277,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7287,6 +7290,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.hover}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_HOVER",
@@ -7310,6 +7314,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7322,6 +7327,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.focus}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_FOCUS",
@@ -7597,6 +7603,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7608,6 +7615,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.text.color.focus}"
             },
             "name": "BADGE_MUTED_TEXT_COLOR_FOCUS",
@@ -7747,6 +7755,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7759,6 +7768,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.icon.color.focus}"
             },
             "name": "BADGE_MUTED_ICON_COLOR_FOCUS",

package/src/tokens/build/json/tokens.json

@@ -7237,6 +7237,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7252,6 +7253,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.default}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_DEFAULT",
@@ -7275,6 +7277,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7287,6 +7290,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.hover}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_HOVER",
@@ -7310,6 +7314,7 @@
                 "SHAPE_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7322,6 +7327,7 @@
                   "SHAPE_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.background.color.focus}"
             },
             "name": "BADGE_MUTED_BACKGROUND_COLOR_FOCUS",
@@ -7597,6 +7603,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7608,6 +7615,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.text.color.focus}"
             },
             "name": "BADGE_MUTED_TEXT_COLOR_FOCUS",
@@ -7747,6 +7755,7 @@
                 "TEXT_FILL"
               ]
             },
+            "$deprecated": true,
             "filePath": "src/tokens/contextual/badge.tokens.json",
             "isSource": true,
             "original": {
@@ -7759,6 +7768,7 @@
                   "TEXT_FILL"
                 ]
               },
+              "$deprecated": true,
               "key": "{badge.muted.icon.color.focus}"
             },
             "name": "BADGE_MUTED_ICON_COLOR_FOCUS",