diff --git a/cypress/e2e/badge.cy.js b/cypress/e2e/badge.cy.js
index 309c39ad8d0f3bcad41bbab664011c32f25828ce..364ada196062a916f8338d4ec153a4f20ca1e6d5 100644
--- a/cypress/e2e/badge.cy.js
+++ b/cypress/e2e/badge.cy.js
@@ -9,12 +9,6 @@ describe('GlBadge', () => {
     });
   }
 
-  function checkA11yTextOnlyState() {
-    cy.visitStory('base/badge', {
-      story: 'sizes',
-    });
-  }
-
   function checkA11yBadgeHoverState() {
     cy.visitStory('base/badge', {
       story: 'actionable',
@@ -41,7 +35,6 @@ describe('GlBadge', () => {
     cy.glRunA11yTests({
       checkA11YDefaultState,
       checkA11yIconOnlyState,
-      checkA11yTextOnlyState,
       checkA11yBadgeHoverState,
       checkA11yBadgeSelectedState,
       checkA11yIconWithTextState,
diff --git a/src/components/base/avatar_labeled/avatar_labeled.stories.js b/src/components/base/avatar_labeled/avatar_labeled.stories.js
index 1cf39264c245cc8f2b528cc9f777865cbec122e2..3b6b321d19a8467d1cd43170a87b9d8408442166 100644
--- a/src/components/base/avatar_labeled/avatar_labeled.stories.js
+++ b/src/components/base/avatar_labeled/avatar_labeled.stories.js
@@ -102,10 +102,10 @@ export const WithBadges = (args, { argTypes }) => ({
       >
         <template #meta>
           <div class="gl-p-1">
-            <gl-badge class="gl-display-flex!" size="sm" variant="info">2FA</gl-badge>
+            <gl-badge class="gl-display-flex!" variant="info">2FA</gl-badge>
           </div>
           <div class="gl-p-1">
-            <gl-badge class="gl-display-flex!" size="sm" variant="danger">Blocked</gl-badge>
+            <gl-badge class="gl-display-flex!" variant="danger">Blocked</gl-badge>
           </div>
         </template>
       </gl-avatar-labeled>
diff --git a/src/components/base/badge/badge.scss b/src/components/base/badge/badge.scss
index 823365894e3f5405f0ad89b90ad0348640042801..fb97dc46cd862596c48bdf7c775e12327635975c 100644
--- a/src/components/base/badge/badge.scss
+++ b/src/components/base/badge/badge.scss
@@ -1,3 +1,6 @@
+$badge-padding-horizontal: 0.75 * $grid-size;
+$badge-min-width: 2.5 * $grid-size;
+
 @mixin gl-badge-variant(
   $variant,
   $color,
@@ -15,7 +18,6 @@
     color: $color;
 
     .gl-badge-icon {
-      color: $icon-color;
       transition: inherit;
     }
   }
@@ -66,29 +68,18 @@
 .gl-badge {
   @include gl-display-inline-flex;
   @include gl-align-items-center;
+  @include gl-justify-content-center;
   @include gl-font-sm;
   @include gl-font-weight-normal;
   @include gl-line-height-normal;
-  @include gl-py-2;
-  @include gl-px-3;
+  gap: $gl-spacing-scale-2;
+  padding: $gl-spacing-scale-1 $badge-padding-horizontal;
+  min-width: $badge-min-width;
 
   @media (forced-colors: active) {
     border: 1px solid;
   }
 
-  &.sm {
-    @include gl-py-0;
-  }
-
-  &.md {
-    @include gl-py-2;
-  }
-
-  &.lg {
-    @include gl-py-3;
-    @include gl-font-base;
-  }
-
   .gl-badge-icon {
     @include gl-h-5;
     @include gl-w-5;
@@ -193,4 +184,11 @@
 // overriding Bootstap's `.btn .badge {top: -1px}` as the badge is not vertically centered otherwise
 .gl-button .gl-badge {
   top: 0;
+  @include gl-py-0;
+  @include gl-px-2;
+}
+
+.gl-new-dropdown-contents .gl-badge,
+.gl-tab-nav-item .gl-badge {
+  @include gl-my-n1;
 }
diff --git a/src/components/base/badge/badge.spec.js b/src/components/base/badge/badge.spec.js
index 1bc7f06c99c4313834cbc41040d05e233f259d78..670c0b5cbf48b9e6e9a88adf836be82f89bc65c3 100644
--- a/src/components/base/badge/badge.spec.js
+++ b/src/components/base/badge/badge.spec.js
@@ -40,12 +40,6 @@ describe('badge', () => {
             expect(icon.props('name')).toBe(iconName);
           });
 
-          it('with correct class', () => {
-            const icon = findIcon();
-
-            expect(icon.classes('gl-mr-2')).toBe(hasSlot);
-          });
-
           it('with correct size', () => {
             expect(findIcon().props('size')).toBe(expectedIconSize);
           });
diff --git a/src/components/base/badge/badge.stories.js b/src/components/base/badge/badge.stories.js
index 4187954fbe6da49924f9c18620935bcbf218c362..bc80545a1c65032fda2eb284afd1ca56b12a035f 100644
--- a/src/components/base/badge/badge.stories.js
+++ b/src/components/base/badge/badge.stories.js
@@ -1,9 +1,5 @@
 import iconSpriteInfo from '@gitlab/svgs/dist/icons.json';
-import {
-  badgeSizeOptions,
-  badgeVariantOptions,
-  badgeIconSizeOptions,
-} from '../../../utils/constants';
+import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
 import { disableControls } from '../../../utils/stories_utils';
 import GlBadge from './badge.vue';
 import readme from './badge.md';
@@ -12,9 +8,8 @@ const template = `
     <gl-badge
       :href="href"
       :variant="variant"
-      :size="size"
       :icon="icon"
-      :iconSize="iconSize"
+      :icon-size="iconSize"
     >{{ content }}</gl-badge>
   `;
 
@@ -22,14 +17,12 @@ const defaultValue = (prop) => GlBadge.props[prop].default;
 
 const generateProps = ({
   variant = defaultValue('variant'),
-  size = defaultValue('size'),
   href = '',
   content = 'TestBadge',
   icon = '',
   iconSize = defaultValue('iconSize'),
 } = {}) => ({
   variant,
-  size,
   href,
   content,
   icon,
@@ -56,7 +49,6 @@ export const Variants = (args, { argTypes }) => ({
         :key="variant"
         :href="href"
         :variant="variant"
-        :size="size"
         :icon="icon"
         :iconSize="iconSize"
         class="gl-mr-3"
@@ -80,7 +72,6 @@ export const Actionable = (args, { argTypes }) => ({
         :key="variant"
         :href="href"
         :variant="variant"
-        :size="size"
         :icon="icon"
         :iconSize="iconSize"
         class="gl-mr-3"
@@ -96,37 +87,15 @@ Actionable.args = generateProps({
 Actionable.tags = ['skip-visual-test'];
 Actionable.argTypes = disableControls(['content', 'variant']);
 
-export const Sizes = (args, { argTypes }) => ({
-  components: { GlBadge },
-  props: Object.keys(argTypes),
-  template: `
-    <div>
-      <gl-badge
-        v-for="size in $options.badgeSizeOptions"
-        :key="size"
-        :href="href"
-        :variant="variant"
-        :size="size"
-        :icon="icon"
-        :iconSize="iconSize"
-        class="gl-mr-3"
-      >{{ size }}</gl-badge>
-    </div>
-  `,
-  badgeSizeOptions,
-});
-Sizes.args = generateProps({
-  variant: badgeVariantOptions.danger,
-});
-Sizes.argTypes = disableControls(['content', 'size']);
-
 export const BadgeIcon = (args, { argTypes }) => ({
   components: { GlBadge },
   props: Object.keys(argTypes),
   template: `
     <div class="gl-display-flex gl-gap-3">
-      <gl-badge variant="tier" icon="license">16px icon</gl-badge>
-      <gl-badge variant="tier" icon="license-sm" iconSize="sm">12px icon</gl-badge>
+      <gl-badge variant="tier" icon="license" iconSize="md">With icon</gl-badge>
+      <gl-badge variant="success" icon="issue-open-m" iconSize="md">With status open</gl-badge>
+      <gl-badge variant="info" icon="issue-close" iconSize="md">With status closed</gl-badge>
+      <gl-badge variant="warning" icon="status-alert" iconSize="sm">With sm icon</gl-badge>
     </div>
   `,
 });
@@ -140,7 +109,6 @@ export const IconOnly = (args, { argTypes }) => ({
       <gl-badge
         :href="href"
         :variant="variant"
-        :size="size"
         :icon="icon"
         :iconSize="iconSize"
       />
@@ -168,10 +136,6 @@ export default {
       options: Object.keys(badgeVariantOptions),
       control: 'select',
     },
-    size: {
-      options: Object.keys(badgeSizeOptions),
-      control: 'select',
-    },
     icon: {
       options: ['', ...iconSpriteInfo.icons],
       control: 'select',
diff --git a/src/components/base/badge/badge.vue b/src/components/base/badge/badge.vue
index 2b886a6a892cb2318f8f76c44ad6d5999c1cb836..650e53eab86febdf71828944f941a41ec1b35b6b 100644
--- a/src/components/base/badge/badge.vue
+++ b/src/components/base/badge/badge.vue
@@ -1,11 +1,7 @@
 <!-- eslint-disable vue/multi-word-component-names -->
 <script>
 import { BBadge } from 'bootstrap-vue';
-import {
-  badgeSizeOptions,
-  badgeVariantOptions,
-  badgeIconSizeOptions,
-} from '../../../utils/constants';
+import { badgeVariantOptions, badgeIconSizeOptions } from '../../../utils/constants';
 import GlIcon from '../icon/icon.vue';
 
 export default {
@@ -16,17 +12,6 @@ export default {
   },
   inheritAttrs: false,
   props: {
-    /**
-     * The size of the badge.
-     */
-    size: {
-      type: String,
-      default: badgeSizeOptions.md,
-      validator(value) {
-        return badgeSizeOptions[value] !== undefined;
-      },
-      required: false,
-    },
     /**
      * The variant of the badge.
      */
@@ -61,6 +46,9 @@ export default {
       // eslint-disable-next-line @gitlab/vue-prefer-dollar-scopedslots
       return Boolean(this.icon && Object.keys(this.$slots).length === 0);
     },
+    isCircularIcon() {
+      return ['issue-open-m', 'issue-close'].includes(this.icon);
+    },
     role() {
       return this.hasIconOnly ? 'img' : undefined;
     },
@@ -82,7 +70,8 @@ export default {
   <b-badge
     v-bind="$attrs"
     :variant="variant"
-    :class="['gl-badge', size]"
+    class="gl-badge"
+    :class="{ 'gl-px-2!': !$scopedSlots.default }"
     :role="role"
     :aria-label="ariaLabel"
     pill
@@ -91,7 +80,7 @@ export default {
       v-if="icon"
       class="gl-badge-icon"
       :size="iconSizeComputed"
-      :class="{ 'gl-mr-2': !hasIconOnly }"
+      :class="{ '-gl-ml-2 gl-ml-n2': isCircularIcon }"
       :name="icon"
     />
     <!-- @slot The badge content to display. -->
diff --git a/src/components/base/button/button.stories.js b/src/components/base/button/button.stories.js
index cb16ac68fb934847098986a298473d283c8d3b4b..143bca546649c47ddbfc078eca1d6f3a68bbf1a9 100644
--- a/src/components/base/button/button.stories.js
+++ b/src/components/base/button/button.stories.js
@@ -475,7 +475,7 @@ export const Badges = (args, { argTypes = {} }) => ({
               <div v-for="category in $options.categories" :key="variant + category">
                   <gl-button :key="category" :category="category" :variant="variant" buttonTextClasses="gl-display-flex gl-align-items-center">
                       {{ category }} {{ variant }}
-                      <gl-badge size="sm" :variant="getBadgeVariant(variant)" class="gl-ml-2">00</gl-badge>
+                      <gl-badge :variant="getBadgeVariant(variant)" class="gl-ml-2">00</gl-badge>
                   </gl-button>
               </div>
           </template>
@@ -490,7 +490,7 @@ export const BadgeWithSROnlyText = (args, { argTypes = {} }) => ({
   template: `
       <gl-button variant="confirm" buttonTextClasses="gl-display-flex gl-align-items-center">
           Submit review
-          <gl-badge size="sm" variant="info" class="gl-ml-2">2</gl-badge>
+          <gl-badge variant="info" class="gl-ml-2">2</gl-badge>
           <span class="sr-only">pending comments</span>
       </gl-button>
   `,
diff --git a/src/components/base/label/label.scss b/src/components/base/label/label.scss
index 2f2a4c234f192bffaa8232de75497f3a24fdee53..48e94280f82c546c2c97314258ed0fe69ded68cf 100644
--- a/src/components/base/label/label.scss
+++ b/src/components/base/label/label.scss
@@ -1,5 +1,7 @@
 $label-max-width: 100%;
 $label-close-button: '.gl-label-close.gl-button';
+$label-padding-horizontal: 0.75 * $grid-size;
+$label-padding-horizontal-half: 0.375 * $grid-size;
 
 .gl-label {
   @include gl-align-items-center;
@@ -45,7 +47,7 @@ $label-close-button: '.gl-label-close.gl-button';
   .gl-label-text,
   .gl-label-text-scoped {
     @include gl-display-block;
-    padding: $gl-spacing-scale-1 #{$gl-spacing-scale-3 - $gl-spacing-scale-1};
+    padding: $gl-spacing-scale-1 $label-padding-horizontal;
     @include str-truncated($label-max-width);
   }
 
@@ -54,8 +56,8 @@ $label-close-button: '.gl-label-close.gl-button';
     @include gl-display-flex;
     width: px-to-rem(14px);
     height: px-to-rem(14px);
-    margin-left: calc(#{-$gl-spacing-scale-1} - (#{$gl-spacing-scale-1} / 2));
-    margin-right: calc(#{$gl-spacing-scale-2} - (#{$gl-spacing-scale-1} / 2));
+    margin-left: -$label-padding-horizontal-half;
+    margin-right: $label-padding-horizontal-half;
     @include gl-p-0;
     @include gl-rounded-full;
     @include gl-shadow-none;
@@ -152,7 +154,7 @@ $label-close-button: '.gl-label-close.gl-button';
   }
 
   #{$label-close-button} {
-    margin-left: #{-$gl-spacing-scale-2 - $gl-spacing-scale-1};
+    margin-left: #{-$label-padding-horizontal};
 
     &:focus,
     &:hover {
@@ -172,7 +174,7 @@ $label-close-button: '.gl-label-close.gl-button';
 
   .gl-label-text-scoped {
     @include gl-text-gray-950;
-    padding-left: #{$gl-spacing-scale-3 - $gl-spacing-scale-2};
+    padding-left: $gl-spacing-scale-2;
     padding-right: $gl-spacing-scale-3;
   }
 }
diff --git a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js
index 0be5c6817085093ceee84f47c6e193c09722883f..3c9bb431fe3ad8c3d4a5571744b13226ea2e452b 100644
--- a/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js
+++ b/src/components/base/new_dropdowns/disclosure/disclosure_dropdown.stories.js
@@ -101,7 +101,7 @@ export const CustomListItem = (args, { argTypes }) => ({
       <template #list-item="{ item }">
         <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
           {{ item.text }}
-          <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
+          <gl-badge pill variant="neutral">{{ item.count }}</gl-badge>
         </span>
       </template>
     `,
@@ -166,12 +166,12 @@ export const CustomGroupsAndItems = (args, { argTypes }) => ({
   template: template(
     `
       <template #group-label="{ group }">
-        {{ group.name }} <gl-badge pill size="sm" variant="neutral">{{ getTotalMrs(group.items) }}</gl-badge>
+        {{ group.name }} <gl-badge pill variant="neutral">{{ getTotalMrs(group.items) }}</gl-badge>
       </template>
       <template #list-item="{ item }">
         <span class="gl-display-flex gl-align-items-center gl-justify-content-space-between">
           {{ item.text }}
-          <gl-badge pill size="sm" variant="neutral">{{ item.count }}</gl-badge>
+          <gl-badge pill variant="neutral">{{ item.count }}</gl-badge>
         </span>
       </template>
     `
@@ -217,7 +217,7 @@ export const CustomGroupsItemsAndToggle = makeGroupedExample({
       <gl-disclosure-dropdown-group :bordered="bordered" :border-position="borderPosition">
         <template #group-label>
           <span class="gl-font-sm">Navigation redesign</span>
-          <gl-badge size="sm" variant="info">Beta</gl-badge>
+          <gl-badge variant="info">Beta</gl-badge>
         </template>
         <gl-disclosure-dropdown-item @action="toggleNewNavigation">
           <div  class="gl-new-dropdown-item-content">
diff --git a/src/components/base/new_dropdowns/listbox/listbox.stories.js b/src/components/base/new_dropdowns/listbox/listbox.stories.js
index e300a4eb31ff09aab2fec6d05e03da3ef003478e..77658a8af3dd57cbb102b149f001c0bab13b967b 100644
--- a/src/components/base/new_dropdowns/listbox/listbox.stories.js
+++ b/src/components/base/new_dropdowns/listbox/listbox.stories.js
@@ -419,10 +419,10 @@ Groups.args = generateProps({ multiple: true });
 export const CustomGroupsAndItems = makeGroupedExample({
   template: template(`
     <template #group-label="{ group }">
-      {{ group.text }} <gl-badge size="sm">{{ group.options.length }}</gl-badge>
+      {{ group.text }} <gl-badge>{{ group.options.length }}</gl-badge>
     </template>
     <template #list-item="{ item }">
-      {{ item.text }} <gl-badge v-if="item.value === 'main'" size="sm">default</gl-badge>
+      {{ item.text }} <gl-badge v-if="item.value === 'main'">default</gl-badge>
     </template>
   `),
 });
@@ -440,7 +440,7 @@ export const GroupWithoutLabel = (args, { argTypes }) => ({
   },
   template: template(`
     <template #list-item="{ item }">
-      {{ item.text }} <gl-badge v-if="item.value === 'main'" size="sm">default</gl-badge>
+      {{ item.text }} <gl-badge v-if="item.value === 'main'">default</gl-badge>
     </template>
   `),
 });
diff --git a/src/components/base/tabs/tabs/tabs.stories.js b/src/components/base/tabs/tabs/tabs.stories.js
index edffef169cc37fc476e6a08ba8f3630168cba7fb..2ae625ed550e73cf49b74fc086929acec88d1129 100644
--- a/src/components/base/tabs/tabs/tabs.stories.js
+++ b/src/components/base/tabs/tabs/tabs.stories.js
@@ -151,7 +151,7 @@ export const WithCounterBadges = (_args, { argTypes }) => ({
     >
       <template #title>
         <span>Tab</span>
-        <gl-badge size="sm" class="gl-tab-counter-badge" :variant="variant">500</gl-badge>
+        <gl-badge class="gl-tab-counter-badge" :variant="variant">500</gl-badge>
         <span class="sr-only">items</span>
       </template>
       Tab panel {{ variant }}
diff --git a/src/components/experimental/experiment_badge/experiment_badge.spec.js b/src/components/experimental/experiment_badge/experiment_badge.spec.js
index 0bb9604b15ad4a9516a2debd6024c3f8cccce314..44a9a90d4ce9c977a482ca3168b8594d308912f1 100644
--- a/src/components/experimental/experiment_badge/experiment_badge.spec.js
+++ b/src/components/experimental/experiment_badge/experiment_badge.spec.js
@@ -63,9 +63,7 @@ describe('GlExperimentBadge', () => {
 
     it('sets correct props on the badge', () => {
       const badgeVariant = 'neutral';
-      const badgeSize = 'md';
       expect(findBadge().props('variant')).toBe(badgeVariant);
-      expect(findBadge().props('size')).toBe(badgeSize);
       expect(findBadge().find('span').text()).toBe(i18n[expectedType].BADGE);
     });
 
diff --git a/src/components/experimental/experiment_badge/experiment_badge.vue b/src/components/experimental/experiment_badge/experiment_badge.vue
index d37258025eda24a0c6e2c2784e5031be8050d4d1..016fec5d24b3fb909e979c704b5c4d5b75b8c73a 100644
--- a/src/components/experimental/experiment_badge/experiment_badge.vue
+++ b/src/components/experimental/experiment_badge/experiment_badge.vue
@@ -80,7 +80,7 @@ export default {
 </script>
 
 <template>
-  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral" size="md">
+  <gl-badge :id="triggerId" class="gl-mx-4 gl-hover-cursor-pointer" variant="neutral">
     <span>{{ activeType.BADGE }}</span>
     <gl-popover
       triggers="click"
diff --git a/src/tokens/tokens_table.vue b/src/tokens/tokens_table.vue
index 6f98c1a2597198de4a7e95cf39894dd2b61cec1d..6f68ef1165a4e60a4be3a9889b001437d7cbbb12 100644
--- a/src/tokens/tokens_table.vue
+++ b/src/tokens/tokens_table.vue
@@ -142,7 +142,7 @@ export default {
         <code class="gl-font-base gl-text-strong">
           {{ name }}
         </code>
-        <gl-badge v-if="deprecated" size="sm" variant="danger">Deprecated</gl-badge>
+        <gl-badge v-if="deprecated" variant="danger">Deprecated</gl-badge>
         <div v-if="description" class="gl-mt-3 gl-text-subtle">
           {{ description }}
         </div>
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-avatar-labeled-with-badges-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-avatar-labeled-with-badges-1-snap.png
index 2eb029b438714ead11cb8247019fe02fa44c8675..ebd7f36539c83297cd9620ac6a894ff9c45dd4c5 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-avatar-labeled-with-badges-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-avatar-labeled-with-badges-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-badge-icon-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-badge-icon-1-snap.png
index 87ac288604c63e9d4939d317051115b948305c59..3c30eedc2180eae62d13540c2bb94adad4d87a5d 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-badge-icon-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-badge-icon-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-icon-only-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-icon-only-1-snap.png
index b0dd6f88b52cd4e4de2c411e1fb2ffc2ad233f0c..9668050abb37bf9b22af6f5845c75e55e5569213 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-icon-only-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-icon-only-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-sizes-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-sizes-1-snap.png
deleted file mode 100644
index 34b151fc008bf847abbfa3b5b240e33f1c32d745..0000000000000000000000000000000000000000
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-sizes-1-snap.png and /dev/null differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-variants-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-variants-1-snap.png
index 9408715a7b28796cb45616f4c6d696939389b567..0e55befc65d53d254cdcda6e1b840f52bd6dafa1 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-variants-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-badge-variants-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badge-with-sr-only-text-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badge-with-sr-only-text-1-snap.png
index 36ba9cfc0dad4ec38d5f49dc6b0b7171dff97b79..1d6caa96d2c4e97710242fc535e357d117d96c79 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badge-with-sr-only-text-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badge-with-sr-only-text-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badges-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badges-1-snap.png
index 6d7da360aa8db0bbb359d64d72bb18c6400ab872..58d15d7b85be43a69e14ba58d2bf8c3862bf0cd3 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badges-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-button-badges-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-custom-groups-and-items-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-custom-groups-and-items-1-snap.png
index aad4e05d106cfd5324f0fba3433fdbd199055783..1f6523fd3568b99318f6b3f593633c39a035c056 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-custom-groups-and-items-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-custom-groups-and-items-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-group-without-label-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-group-without-label-1-snap.png
index 5e67c455e4932aef306fec30f484126decaee958..96a8f2a1ad4e1a3f28114f9a3ad1ea223261cf5c 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-group-without-label-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-collapsible-listbox-group-without-label-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-and-items-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-and-items-1-snap.png
index af58f39bda4bef168bb99aead8016bbc0adada7a..283c7f712ec48b50721aa3185e85082ddc9b4a84 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-and-items-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-and-items-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-items-and-toggle-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-items-and-toggle-1-snap.png
index e770490d2071832d6a631d5ebbc1361163462bc0..39ecdb4b90cdecceb558718da8a16863d0782c87 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-items-and-toggle-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-groups-items-and-toggle-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-list-item-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-list-item-1-snap.png
index 0f723c99520df589aabc151e53a8125aaea5898c..daa85706ac09c82f936509a006d9da743ca028c1 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-list-item-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-dropdown-disclosure-dropdown-custom-list-item-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tabs-with-counter-badges-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tabs-with-counter-badges-1-snap.png
index 527871ecd8a8cc43273c61bd7f814e09076062c2..cfcfdb8e7426bf2254000b51fc4dd3ce2ddd24d4 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tabs-with-counter-badges-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-base-tabs-with-counter-badges-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-default-1-snap.png
index b68f64978cf8a3d1fdd430a35a9e9ca16802a239..5720e901bb5a5c5f7373d907fd37847aab29294c 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-default-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-interactive-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-interactive-1-snap.png
index e9cbb3514ea77c1b63ab27723ac2934533594acd..c0c5d6fe8774257fd5a33eaa51568addd4189ba9 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-interactive-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-interactive-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-slots-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-slots-1-snap.png
index 215e2d40f8fea700e7a9cdc972c080591f04bacb..0cfee74e01164bf7fede36dadecacb0390448959 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-slots-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-experimental-duo-chat-duo-chat-slots-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-gray-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-gray-1-snap.png
index 387f61cf09f94747db7fc1cee129e1dbffee5d59..dd8f142afeb3d5bf106aaef29b15c87d2bf67bb6 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-gray-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-gray-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-white-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-white-1-snap.png
index 78696b790cdb5e7788ae340085100218082fac23..db6ca206ee3c83eaed759374bd7cf186bca67a67 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-white-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-color-transparency-white-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png
index 44bfda50d03f5c618e8ed80dbec2fbf631da1719..78f0d7747fa354ecac6c964cc1cd53c402579062 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-dark-1-snap.png differ
diff --git a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-default-1-snap.png b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-default-1-snap.png
index f9bf7f27f55a25133e94cc3951bf845e277cde69..aeaf020f37e8f9390c1bc2794e69cbd557b14f9c 100644
Binary files a/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-default-1-snap.png and b/tests/__image_snapshots__/storyshots-spec-js-image-storyshots-tokens-text-default-1-snap.png differ