From 5030123f3040bfbd559adb6ec82d6b20b654bd77 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Mar 2024 10:44:25 +0100
Subject: [PATCH 01/11] feat(docs): update badges documentation

---
 .../background-colors.module.scss}            |   0
 .../stories/components/badge/badge.docs.mdx   |  35 ++-
 .../stories/components/badge/badge.stories.ts | 234 +++++-------------
 .../cards/card-button/card-button.stories.ts  |   4 +-
 packages/styles/src/components/badge.scss     | 103 ++------
 .../src/variables/components/_badge.scss      |  42 ++--
 6 files changed, 135 insertions(+), 283 deletions(-)
 rename packages/documentation/src/{stories/components/cards/card-button/card-button.module.scss => shared/background-colors.module.scss} (100%)

diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.module.scss b/packages/documentation/src/shared/background-colors.module.scss
similarity index 100%
rename from packages/documentation/src/stories/components/cards/card-button/card-button.module.scss
rename to packages/documentation/src/shared/background-colors.module.scss
diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index b46b72edd1..743c5fbabc 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -11,17 +11,6 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
   Documentation and examples for badges, our small count and labeling component.
 </div>
 
-<PostAlert type="warning">
-  <p slot="heading">Badge is deprecated</p>
-  <p>
-    The current `badge` component is deprecated and will be replaced with the `chip` component which will behave similarly to the current `badge` component.
-    There will also be a new `badge` component, but with a different behavior. Check out the new components in figma:
-    [Chip](https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=11194-50777&mode=design&t=SeiMf2Vt3dmUnpMT-0)
-    /
-    [Badge](https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=11038-51303&mode=design&t=SeiMf2Vt3dmUnpMT-0)
-  </p>
-</PostAlert>
-
 <Canvas sourceState="shown" of={badgeStories.Default} />
 <div className="hide-col-default">
   <Controls of={badgeStories.Default} />
@@ -31,17 +20,23 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 ## Examples
 
-### Checkable
+### Colors
+
+You can change the badge color simply by applying a `.bg-*` class to it.
+See all available classes in the [background utilities documentation](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs).
+
+<Canvas of={badgeStories.Colors} />
+
+### Large number
 
-Checkable badges are nothing more than personalized checkboxes.
-Therefore, you can handle then like standard checkboxes.
+A large number will extend the badge with.
+To prevent the badge from being too large you can simply use the `+` notation as shown hereafter.
 
-<Canvas of={badgeStories.Checkable} />
+<Canvas of={badgeStories.LargeNumber} />
 
-### Dismissible
+### Position
 
-Dismissible badges include a close button, allowing users to easily clear them from the page.
-Because the close button does not have a visible text,
-it should always include a visually hidden label to ensure accessibility for assistive technology users.
+As inline elements, the badges can be placed inside other element such as tags.
+They can also be place absolutely to appear above other elements such as icons for example.
 
-<Canvas of={badgeStories.Dismissible} />
+<Canvas of={badgeStories.Position} />
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 2be92512ef..66a0282bea 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -1,32 +1,40 @@
-import { useArgs } from '@storybook/preview-api';
-import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
-import { mapClasses } from '../../../utils';
 import { MetaComponent } from '../../../../types';
+import backgroundColors from '../../../shared/background-colors.module.scss';
 
 const meta: MetaComponent = {
   id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
   title: 'Components/Badge',
   tags: ['package:HTML'],
   render: renderBadge,
-  decorators: [externalControl],
-  parameters: {
-    badges: [],
-  },
+  decorators: [adaptiveBackground],
   args: {
-    text: 'Insigno',
-    size: 'default',
-    nestedBadge: false,
-    interactionType: 'none',
-    checked: false,
-    dismissed: false,
+    showNumber: true,
+    number: 1,
+    size: 'large',
   },
   argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text contained in the badge.',
+    showNumber: {
+      name: 'Show Number',
+      description: 'If `true`, the badge contains a number otherwise it is empty.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'Content',
+      },
+    },
+    number: {
+      name: 'Number',
+      description: 'The number contained in the badge.',
+      if: {
+        arg: 'showNumber',
+        truthy: true,
+      },
       control: {
-        type: 'text',
+        type: 'number',
+        min: 0,
       },
       table: {
         category: 'Content',
@@ -35,161 +43,50 @@ const meta: MetaComponent = {
     size: {
       name: 'Size',
       description: 'The size of the badge.',
+      if: {
+        arg: 'showNumber',
+        truthy: true,
+      },
       control: {
         type: 'radio',
         labels: {
-          'default': 'Default',
+          'large': 'Large',
           'badge-sm': 'Small',
         },
       },
-      options: ['default', 'badge-sm'],
+      options: ['large', 'badge-sm'],
       table: {
         category: 'General',
       },
     },
-    nestedBadge: {
-      name: 'Nested Badge',
-      description: 'If `true`, a nested badge is displayed inside the main badge.',
+    background: {
+      name: 'Backround',
+      description: 'You can use the Background classes to color the cards',
       control: {
-        type: 'boolean',
+        type: 'select',
       },
+      options: Object.keys(backgroundColors),
       table: {
         category: 'General',
       },
     },
-    interactionType: {
-      name: 'Interaction Type',
-      description: 'Defines how the badge can be interacted with.',
-      control: {
-        type: 'inline-radio',
-        labels: {
-          none: 'None',
-          checkable: 'Checkable',
-          dismissible: 'Dismissible',
-        },
-      },
-      options: ['none', 'checkable', 'dismissible'],
-      table: {
-        category: 'Interactions',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'If `true`, the badge is checked otherwise it is unchecked.',
-      if: {
-        arg: 'interactionType',
-        eq: 'checkable',
-      },
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Interactions',
-      },
-    },
-    dismissed: {
-      name: 'Dismissed',
-      description: 'If `true`, the badge is removed from the page otherwise it is displayed.',
-      if: {
-        arg: 'interactionType',
-        eq: 'dismissible',
-      },
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Interactions',
-      },
-    },
   },
 };
 
 export default meta;
 
 // DECORATORS
-function externalControl(story: any, { args }: StoryContext) {
-  const [_, updateArgs] = useArgs();
-
-  const button = html`
-    <a
-      href="#"
-      @click="${(e: Event) => {
-        e.preventDefault();
-        updateArgs({ dismissed: false });
-      }}"
-    >
-      Show badge
-    </a>
-  `;
-
-  return html` ${args.dismissed ? button : nothing} ${story()} `;
+function adaptiveBackground(story: StoryFn, { args, context }: StoryContext) {
+  const bgClass = args.background === 'bg-white' ? ` bg-dark` : '';
+  return html` <div class=${`p-2${bgClass}`}>${story(args, context)}</div> `;
 }
 
 // RENDERER
-function getDefaultContent(args: Args) {
-  return html`
-    <span>${args.text}</span>
-    ${args.nestedBadge ? html` <span class="badge">10</span> ` : nothing}
-  `;
-}
-
-function getCheckableContent(args: Args, updateArgs: (args: Args) => void, context: StoryContext) {
-  const checkboxId = `badge-example--${context.name.replace(/ /g, '-').toLowerCase()}`;
-  const labelClasses = mapClasses({
-    'badge-check-label': true,
-    [args.size]: args.size !== 'default',
-  });
-
-  const handleChange = (e: Event) => {
-    updateArgs({ checked: !args.checked });
-
-    if (document.activeElement === e.target) {
-      setTimeout(() => {
-        const element: HTMLInputElement | null = document.querySelector(`#${checkboxId}`);
-        if (element) element.focus();
-      }, 25);
-    }
-  };
-
-  return html`
-    <input
-      id="${checkboxId}"
-      class="badge-check-input"
-      type="checkbox"
-      ?checked="${args.checked}"
-      @change="${handleChange}"
-    />
-    <label class="${labelClasses}" for="${checkboxId}">${getDefaultContent(args)}</label>
-  `;
-}
-
-function getDismissButton(updateArgs: (args: Args) => void) {
+function renderBadge(args: Args) {
+  const sizingClass = args.showNumber && args.size !== 'large' ? ` ${args.size}` : '';
+  const bgClass = args.background && args.background !== 'bg-danger' ? ` ${args.background}` : '';
   return html`
-    <button class="btn-close" @click="${() => updateArgs({ dismissed: true })}">
-      <span class="visually-hidden">Forigi insignon</span>
-    </button>
-  `;
-}
-
-function renderBadge(args: Args, context: StoryContext) {
-  const [_, updateArgs] = useArgs();
-
-  if (args.dismissed) return html` ${nothing} `;
-
-  const isCheckable = args.interactionType === 'checkable';
-  const isDismissible = args.interactionType === 'dismissible';
-
-  const badgeClasses = mapClasses({
-    'badge': !isCheckable,
-    'badge-check': isCheckable,
-    [args.size]: args.size !== 'default' && !isCheckable,
-  });
-
-  return html`
-    <div class="${badgeClasses}">
-      ${isCheckable ? getCheckableContent(args, updateArgs, context) : getDefaultContent(args)}
-      ${isDismissible ? getDismissButton(updateArgs) : nothing}
-    </div>
+    <div class=${`badge${sizingClass}${bgClass}`}>${args.showNumber ? args.number : nothing}</div>
   `;
 }
 
@@ -198,26 +95,31 @@ type Story = StoryObj;
 
 export const Default: Story = {};
 
-export const Checkable: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Interaction Type'],
-    },
-  },
-  args: {
-    text: 'Kontrolebla Insigno',
-    interactionType: 'checkable',
-  },
+export const Colors: Story = {
+  render: args => html`
+    ${renderBadge({ ...args, background: 'bg-success' })}
+    ${renderBadge({ ...args, background: 'bg-warning' })}
+    ${renderBadge({ ...args, background: 'bg-yellow' })}
+    ${renderBadge({ ...args, background: 'bg-light' })}
+  `,
 };
 
-export const Dismissible: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Interaction Type'],
-    },
-  },
-  args: {
-    text: 'Malakceptebla Insigno',
-    interactionType: 'dismissible',
-  },
+export const LargeNumber: Story = {
+  render: args => html`
+    ${renderBadge({ ...args, number: 256 })} ${renderBadge({ ...args, number: '+99' })}
+  `,
+};
+
+export const Position: Story = {
+  render: args => html`
+    <post-tag>
+      Filter
+      <div class="badge bg-light">1</div>
+    </post-tag>
+
+    <div class="position-relative d-inline">
+      <post-icon name="2026" scale="1.5"></post-icon>
+      <div class="badge badge-sm position-absolute top-0 start-100 translate-middle">3</div>
+    </div>
+  `,
 };
diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
index 9b9757a4e9..8ea937dff0 100644
--- a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
@@ -1,8 +1,8 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
-import scss from './card-button.module.scss';
 import { MetaComponent } from '../../../../../types';
+import backgroundColors from '../../../../shared/background-colors.module.scss';
 
 const meta: MetaComponent = {
   id: '6f8f76ec-a2b5-4eb0-87f7-4021e1a5b8d0',
@@ -64,7 +64,7 @@ const meta: MetaComponent = {
       control: {
         type: 'select',
       },
-      options: Object.keys(scss),
+      options: Object.keys(backgroundColors),
       table: {
         category: 'General',
       },
diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index cc7ed9dbd9..d10f87c15a 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -1,85 +1,36 @@
 @forward './../variables/options';
 
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/badge' as bb;
-
+@use './../mixins/color' as color-mx;
 @use './../variables/components/badge';
-@use './../variables/components/forms';
-@use './../variables/components/form-check';
-@use './../variables/color';
-@use './../mixins/utilities';
-@use './../mixins/forms' as forms-mx;
-@use './../mixins/badge' as badge-mx;
-@use './../placeholders/badge' as badge-ph;
-@use './../functions/icons' as icons-fn;
 
 .badge {
-  @extend %badge;
-}
-
-a,
-button {
-  &.badge {
-    @include forms-mx.focus-outline;
-    background-color: transparent;
-    text-decoration: none;
-    transition: badge.$badge-transition;
-
-    @include utilities.not-disabled-focus-hover {
-      @include badge-mx.badge-hover-state;
-    }
-
-    &:active,
-    &.active {
-      @include badge-mx.badge-active-state;
-    }
-  }
-}
-
-.badge-check {
-  &-label {
-    @extend %badge;
-    @include forms-mx.focus-outline;
-    transition: badge.$badge-transition;
-    cursor: pointer;
-  }
-
-  &-input {
-    @include utilities.visuallyhidden;
-  }
-
-  &-input:focus-visible + &-label {
-    outline-offset: forms.$input-focus-outline-thickness;
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
-  }
-
-  &-input:not(:checked) + &-label:hover {
-    @include badge-mx.badge-hover-state;
-  }
-
-  &-input:checked + &-label {
-    @include badge-mx.badge-active-state;
+  --post-badge-height: #{badge.$badge-height};
+  --post-badge-padding-x: #{badge.$badge-padding-x};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  height: var(--post-badge-height);
+  min-width: calc(var(--post-badge-height) - 2 * var(--post-badge-padding-x));
+  padding-inline: var(--post-badge-padding-x);
+  border: badge.$badge-border-width solid badge.$badge-border-color;
+  border-radius: badge.$badge-border-radius;
+  line-height: badge.$badge-line-height;
+  font-size: badge.$badge-font-size;
+  background-color: badge.$badge-bg;
+  color: badge.$badge-color;
+
+  &:empty {
+    --post-badge-height: #{badge.$badge-height-empty};
+    --post-badge-padding-x: #{badge.$badge-padding-x-empty};
+    border-width: badge.$badge-border-width-empty;
   }
 }
 
-@include utilities.high-contrast-mode() {
-  .badge-check {
-    &-input:focus-visible + &-label {
-      border-color: Highlight;
-      outline-color: Highlight;
-    }
-
-    &-input:checked + &-label {
-      &:hover {
-        @include badge-mx.badge-hover-state;
-      }
-    }
-  }
-
-  button.badge,
-  a.badge,
-  .badge-check-label {
-    transition: none;
-  }
+.badge-sm {
+  --post-badge-height: #{badge.$badge-height-sm};
+  --post-badge-padding-x: #{badge.$badge-padding-x-sm};
+  border-width: badge.$badge-border-width-sm;
+  font-size: badge.$badge-font-size-sm;
 }
diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index d47f01e4fe..9214196eeb 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -1,19 +1,34 @@
-@use 'sass:math';
-
-@use './button';
-@use './../animation';
 @use './../color';
 @use './../commons';
 @use './../spacing';
 @use './../type';
 
+@use './button';
 @use './../../functions/sizing';
 
-// Design System custom variables
-$badge-height: button.$btn-height-rg;
-$badge-gap: spacing.$size-mini;
-$badge-border-color: var(--post-gray-60);
+$badge-border-radius: 50rem;
+$badge-line-height: type.$line-height-copy;
+$badge-color: color.$white;
+$badge-bg: color.$error-red;
+$badge-border-color: color.$white;
+
+$badge-height: spacing.$size-large;
+$badge-height-sm: spacing.$size-regular;
+$badge-height-empty: spacing.$size-mini;
+
+$badge-padding-x: spacing.$size-mini;
+$badge-padding-x-sm: spacing.$size-micro;
+$badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
+
 $badge-border-width: commons.$border-thick;
+$badge-border-width-sm: commons.$border-width;
+$badge-border-width-empty: commons.$border-width;
+
+$badge-font-size: type.$font-size-12;
+$badge-font-size-sm: 10px;
+
+// DEPRECATED
+$badge-gap: spacing.$size-mini;
 $badge-transition:
   color 250ms,
   background-color 250ms,
@@ -22,11 +37,7 @@ $badge-hover-color: color.$black;
 $badge-hover-bg-color: color.$gray-10;
 $badge-active-color: color.$black;
 $badge-active-bg-color: color.$yellow;
-
-$badge-height-sm: button.$btn-height-sm;
 $badge-gap-sm: sizing.px-to-rem(6px);
-$badge-font-size-sm: type.$font-size-tiny;
-
 $badge-nested-height: sizing.px-to-rem(22px);
 $badge-nested-color: color.$gray-60;
 $badge-nested-bg-color: color.$gray-10;
@@ -35,14 +46,7 @@ $badge-nested-font-size: sizing.px-to-rem(10px);
 $badge-nested-translate-x: ($badge-height - $badge-nested-height) * 0.5;
 $badge-nested-active-bg-color: color.$white;
 $badge-nested-translate-x-sm: ($badge-height-sm - $badge-nested-height) * 0.5;
-
 $badge-check-input-height: spacing.$size-small-large;
 $badge-check-input-bg-color: color.$white;
-
-// Bootstrap variables
-$badge-font-size: type.$font-size-small;
 $badge-font-weight: type.$font-weight-normal;
-$badge-color: var(--post-gray-80);
 $badge-padding-y: 0;
-$badge-padding-x: spacing.$size-regular - sizing.px-to-rem($badge-border-width);
-$badge-border-radius: 50rem;

From 3aa0c260f8f82c24e3d3a2ae484fc882fd5ad05d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Mar 2024 10:44:25 +0100
Subject: [PATCH 02/11] feat(docs): update badges documentation

---
 .changeset/dry-wasps-film.md                  |   6 +
 .../background-colors.module.scss}            |   0
 .../stories/components/badge/badge.docs.mdx   |  35 ++-
 .../badge/badge.snapshot.stories.ts           |  12 +-
 .../stories/components/badge/badge.stories.ts | 239 ++++++------------
 .../cards/card-button/card-button.stories.ts  |   4 +-
 packages/styles/src/components/badge.scss     | 109 +++-----
 .../src/variables/components/_badge.scss      |  42 +--
 8 files changed, 156 insertions(+), 291 deletions(-)
 create mode 100644 .changeset/dry-wasps-film.md
 rename packages/documentation/src/{stories/components/cards/card-button/card-button.module.scss => shared/background-colors.module.scss} (100%)

diff --git a/.changeset/dry-wasps-film.md b/.changeset/dry-wasps-film.md
new file mode 100644
index 0000000000..335ab35008
--- /dev/null
+++ b/.changeset/dry-wasps-film.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': major
+'@swisspost/design-system-documentation': patch
+---
+
+Restricted the badge to showing counts only and updated the styles accordingly.
diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.module.scss b/packages/documentation/src/shared/background-colors.module.scss
similarity index 100%
rename from packages/documentation/src/stories/components/cards/card-button/card-button.module.scss
rename to packages/documentation/src/shared/background-colors.module.scss
diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index b46b72edd1..743c5fbabc 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -11,17 +11,6 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
   Documentation and examples for badges, our small count and labeling component.
 </div>
 
-<PostAlert type="warning">
-  <p slot="heading">Badge is deprecated</p>
-  <p>
-    The current `badge` component is deprecated and will be replaced with the `chip` component which will behave similarly to the current `badge` component.
-    There will also be a new `badge` component, but with a different behavior. Check out the new components in figma:
-    [Chip](https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=11194-50777&mode=design&t=SeiMf2Vt3dmUnpMT-0)
-    /
-    [Badge](https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=11038-51303&mode=design&t=SeiMf2Vt3dmUnpMT-0)
-  </p>
-</PostAlert>
-
 <Canvas sourceState="shown" of={badgeStories.Default} />
 <div className="hide-col-default">
   <Controls of={badgeStories.Default} />
@@ -31,17 +20,23 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 
 ## Examples
 
-### Checkable
+### Colors
+
+You can change the badge color simply by applying a `.bg-*` class to it.
+See all available classes in the [background utilities documentation](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs).
+
+<Canvas of={badgeStories.Colors} />
+
+### Large number
 
-Checkable badges are nothing more than personalized checkboxes.
-Therefore, you can handle then like standard checkboxes.
+A large number will extend the badge with.
+To prevent the badge from being too large you can simply use the `+` notation as shown hereafter.
 
-<Canvas of={badgeStories.Checkable} />
+<Canvas of={badgeStories.LargeNumber} />
 
-### Dismissible
+### Position
 
-Dismissible badges include a close button, allowing users to easily clear them from the page.
-Because the close button does not have a visible text,
-it should always include a visually hidden label to ensure accessibility for assistive technology users.
+As inline elements, the badges can be placed inside other element such as tags.
+They can also be place absolutely to appear above other elements such as icons for example.
 
-<Canvas of={badgeStories.Dismissible} />
+<Canvas of={badgeStories.Position} />
diff --git a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
index 3a90dca504..2181c8b0c6 100644
--- a/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.snapshot.stories.ts
@@ -20,17 +20,11 @@ export const Badge: Story = {
           bg => html`
             <div class="${bg} d-flex flex-wrap align-items-start gap-regular p-regular">
               ${bombArgs({
-                text: [
-                  'Malakceptebla Insigno',
-                  'Contentus momentus vero siteos et accusam iretea et justo.',
-                ],
+                showNumber: [true, false],
                 size: context.argTypes.size.options,
-                interactionType: context.argTypes.interactionType.options,
-                nestedBadge: [false, true],
-                checked: [false, true],
-                dismissed: [false],
+                background: context.argTypes.background.options,
               })
-                .filter(args => !(args.interactionType !== 'checkable' && args.checked === true))
+                .filter(args => !(!args.showNumber && args.size === 'small'))
                 .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
             </div>
           `,
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 2be92512ef..55549f5773 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -1,32 +1,40 @@
-import { useArgs } from '@storybook/preview-api';
-import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html, nothing } from 'lit';
-import { mapClasses } from '../../../utils';
 import { MetaComponent } from '../../../../types';
+import backgroundColors from '../../../shared/background-colors.module.scss';
 
 const meta: MetaComponent = {
   id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
   title: 'Components/Badge',
   tags: ['package:HTML'],
   render: renderBadge,
-  decorators: [externalControl],
-  parameters: {
-    badges: [],
-  },
+  decorators: [adaptiveBackground],
   args: {
-    text: 'Insigno',
-    size: 'default',
-    nestedBadge: false,
-    interactionType: 'none',
-    checked: false,
-    dismissed: false,
+    showNumber: true,
+    number: 1,
+    size: 'large',
   },
   argTypes: {
-    text: {
-      name: 'Text',
-      description: 'The text contained in the badge.',
+    showNumber: {
+      name: 'Show Number',
+      description: 'If `true`, the badge contains a number otherwise it is empty.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        category: 'Content',
+      },
+    },
+    number: {
+      name: 'Number',
+      description: 'The number contained in the badge.',
+      if: {
+        arg: 'showNumber',
+        truthy: true,
+      },
       control: {
-        type: 'text',
+        type: 'number',
+        min: 0,
       },
       table: {
         category: 'Content',
@@ -35,161 +43,50 @@ const meta: MetaComponent = {
     size: {
       name: 'Size',
       description: 'The size of the badge.',
+      if: {
+        arg: 'showNumber',
+        truthy: true,
+      },
       control: {
         type: 'radio',
         labels: {
-          'default': 'Default',
+          'large': 'Large',
           'badge-sm': 'Small',
         },
       },
-      options: ['default', 'badge-sm'],
+      options: ['large', 'badge-sm'],
       table: {
         category: 'General',
       },
     },
-    nestedBadge: {
-      name: 'Nested Badge',
-      description: 'If `true`, a nested badge is displayed inside the main badge.',
+    background: {
+      name: 'Backround',
+      description: 'You can use the Background classes to color the cards',
       control: {
-        type: 'boolean',
+        type: 'select',
       },
+      options: Object.keys(backgroundColors),
       table: {
         category: 'General',
       },
     },
-    interactionType: {
-      name: 'Interaction Type',
-      description: 'Defines how the badge can be interacted with.',
-      control: {
-        type: 'inline-radio',
-        labels: {
-          none: 'None',
-          checkable: 'Checkable',
-          dismissible: 'Dismissible',
-        },
-      },
-      options: ['none', 'checkable', 'dismissible'],
-      table: {
-        category: 'Interactions',
-      },
-    },
-    checked: {
-      name: 'Checked',
-      description: 'If `true`, the badge is checked otherwise it is unchecked.',
-      if: {
-        arg: 'interactionType',
-        eq: 'checkable',
-      },
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Interactions',
-      },
-    },
-    dismissed: {
-      name: 'Dismissed',
-      description: 'If `true`, the badge is removed from the page otherwise it is displayed.',
-      if: {
-        arg: 'interactionType',
-        eq: 'dismissible',
-      },
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        category: 'Interactions',
-      },
-    },
   },
 };
 
 export default meta;
 
 // DECORATORS
-function externalControl(story: any, { args }: StoryContext) {
-  const [_, updateArgs] = useArgs();
-
-  const button = html`
-    <a
-      href="#"
-      @click="${(e: Event) => {
-        e.preventDefault();
-        updateArgs({ dismissed: false });
-      }}"
-    >
-      Show badge
-    </a>
-  `;
-
-  return html` ${args.dismissed ? button : nothing} ${story()} `;
+function adaptiveBackground(story: StoryFn, { args, context }: StoryContext) {
+  const bgClass = args.background === 'bg-white' ? ` bg-dark` : '';
+  return html` <div class=${`p-2${bgClass}`}>${story(args, context)}</div> `;
 }
 
 // RENDERER
-function getDefaultContent(args: Args) {
-  return html`
-    <span>${args.text}</span>
-    ${args.nestedBadge ? html` <span class="badge">10</span> ` : nothing}
-  `;
-}
-
-function getCheckableContent(args: Args, updateArgs: (args: Args) => void, context: StoryContext) {
-  const checkboxId = `badge-example--${context.name.replace(/ /g, '-').toLowerCase()}`;
-  const labelClasses = mapClasses({
-    'badge-check-label': true,
-    [args.size]: args.size !== 'default',
-  });
-
-  const handleChange = (e: Event) => {
-    updateArgs({ checked: !args.checked });
-
-    if (document.activeElement === e.target) {
-      setTimeout(() => {
-        const element: HTMLInputElement | null = document.querySelector(`#${checkboxId}`);
-        if (element) element.focus();
-      }, 25);
-    }
-  };
-
-  return html`
-    <input
-      id="${checkboxId}"
-      class="badge-check-input"
-      type="checkbox"
-      ?checked="${args.checked}"
-      @change="${handleChange}"
-    />
-    <label class="${labelClasses}" for="${checkboxId}">${getDefaultContent(args)}</label>
-  `;
-}
-
-function getDismissButton(updateArgs: (args: Args) => void) {
-  return html`
-    <button class="btn-close" @click="${() => updateArgs({ dismissed: true })}">
-      <span class="visually-hidden">Forigi insignon</span>
-    </button>
-  `;
-}
-
-function renderBadge(args: Args, context: StoryContext) {
-  const [_, updateArgs] = useArgs();
-
-  if (args.dismissed) return html` ${nothing} `;
-
-  const isCheckable = args.interactionType === 'checkable';
-  const isDismissible = args.interactionType === 'dismissible';
-
-  const badgeClasses = mapClasses({
-    'badge': !isCheckable,
-    'badge-check': isCheckable,
-    [args.size]: args.size !== 'default' && !isCheckable,
-  });
-
+function renderBadge(args: Args) {
+  const sizingClass = args.showNumber && args.size !== 'large' ? ` ${args.size}` : '';
+  const bgClass = args.background && args.background !== 'bg-danger' ? ` ${args.background}` : '';
   return html`
-    <div class="${badgeClasses}">
-      ${isCheckable ? getCheckableContent(args, updateArgs, context) : getDefaultContent(args)}
-      ${isDismissible ? getDismissButton(updateArgs) : nothing}
-    </div>
+    <div class=${`badge${sizingClass}${bgClass}`}>${args.showNumber ? args.number : nothing}</div>
   `;
 }
 
@@ -198,26 +95,36 @@ type Story = StoryObj;
 
 export const Default: Story = {};
 
-export const Checkable: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Interaction Type'],
-    },
-  },
-  args: {
-    text: 'Kontrolebla Insigno',
-    interactionType: 'checkable',
-  },
+export const Colors: Story = {
+  render: args => html`
+    ${renderBadge({ ...args, background: 'bg-success' })}
+    ${renderBadge({ ...args, background: 'bg-warning' })}
+    ${renderBadge({ ...args, background: 'bg-yellow' })}
+    ${renderBadge({ ...args, background: 'bg-light' })}
+  `,
 };
 
-export const Dismissible: Story = {
-  parameters: {
-    controls: {
-      exclude: ['Interaction Type'],
-    },
-  },
-  args: {
-    text: 'Malakceptebla Insigno',
-    interactionType: 'dismissible',
-  },
+export const LargeNumber: Story = {
+  render: args => html`
+    ${renderBadge({ ...args, number: 256 })} ${renderBadge({ ...args, number: '+99' })}
+  `,
+};
+
+export const Position: Story = {
+  render: args => html`
+    <div class="chip">
+      Filter
+      <div class="badge bg-gray">1</div>
+    </div>
+
+    <div class="position-relative d-inline">
+      <post-icon name="2026" scale="1.5"></post-icon>
+      <div class="badge badge-sm position-absolute top-0 start-100 translate-middle">3</div>
+    </div>
+  `,
+  decorators: [
+    (story: StoryFn, { args, context }: StoryContext) => html`
+      <div class="d-flex gap-large">${story(args, context)}</div>
+    `,
+  ],
 };
diff --git a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
index 9b9757a4e9..8ea937dff0 100644
--- a/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
+++ b/packages/documentation/src/stories/components/cards/card-button/card-button.stories.ts
@@ -1,8 +1,8 @@
 import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
-import scss from './card-button.module.scss';
 import { MetaComponent } from '../../../../../types';
+import backgroundColors from '../../../../shared/background-colors.module.scss';
 
 const meta: MetaComponent = {
   id: '6f8f76ec-a2b5-4eb0-87f7-4021e1a5b8d0',
@@ -64,7 +64,7 @@ const meta: MetaComponent = {
       control: {
         type: 'select',
       },
-      options: Object.keys(scss),
+      options: Object.keys(backgroundColors),
       table: {
         category: 'General',
       },
diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index cc7ed9dbd9..9a5a88874d 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -1,85 +1,44 @@
 @forward './../variables/options';
 
-@use './../lic/bootstrap-license';
-@use './../themes/bootstrap/core' as *;
-@use './../themes/bootstrap/badge' as bb;
-
+@use './../mixins/color' as color-mx;
 @use './../variables/components/badge';
-@use './../variables/components/forms';
-@use './../variables/components/form-check';
-@use './../variables/color';
-@use './../mixins/utilities';
-@use './../mixins/forms' as forms-mx;
-@use './../mixins/badge' as badge-mx;
-@use './../placeholders/badge' as badge-ph;
-@use './../functions/icons' as icons-fn;
 
 .badge {
-  @extend %badge;
-}
-
-a,
-button {
-  &.badge {
-    @include forms-mx.focus-outline;
-    background-color: transparent;
-    text-decoration: none;
-    transition: badge.$badge-transition;
-
-    @include utilities.not-disabled-focus-hover {
-      @include badge-mx.badge-hover-state;
-    }
-
-    &:active,
-    &.active {
-      @include badge-mx.badge-active-state;
-    }
+  --post-badge-height: #{badge.$badge-height};
+  --post-badge-padding-x: #{badge.$badge-padding-x};
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: content-box;
+  height: var(--post-badge-height);
+  min-width: calc(var(--post-badge-height) - 2 * var(--post-badge-padding-x));
+  padding-inline: var(--post-badge-padding-x);
+  border: badge.$badge-border-width solid badge.$badge-border-color;
+  border-radius: badge.$badge-border-radius;
+  line-height: badge.$badge-line-height;
+  font-size: badge.$badge-font-size;
+  background-color: badge.$badge-bg;
+  color: badge.$badge-color;
+
+  &:empty {
+    --post-badge-height: #{badge.$badge-height-empty};
+    --post-badge-padding-x: #{badge.$badge-padding-x-empty};
+    border-width: badge.$badge-border-width-empty;
+
+    // prevent blurry border effect
+    outline: badge.$badge-border-width solid badge.$badge-border-color;
+    outline-offset: -1 * badge.$badge-border-width;
   }
 }
 
-.badge-check {
-  &-label {
-    @extend %badge;
-    @include forms-mx.focus-outline;
-    transition: badge.$badge-transition;
-    cursor: pointer;
-  }
-
-  &-input {
-    @include utilities.visuallyhidden;
-  }
-
-  &-input:focus-visible + &-label {
-    outline-offset: forms.$input-focus-outline-thickness;
-    outline: forms.$input-focus-outline-thickness solid var(--post-contrast-color);
-  }
+.badge-sm {
+  --post-badge-height: #{badge.$badge-height-sm};
+  --post-badge-padding-x: #{badge.$badge-padding-x-sm};
+  border-width: badge.$badge-border-width-sm;
+  font-size: badge.$badge-font-size-sm;
 
-  &-input:not(:checked) + &-label:hover {
-    @include badge-mx.badge-hover-state;
-  }
-
-  &-input:checked + &-label {
-    @include badge-mx.badge-active-state;
-  }
-}
-
-@include utilities.high-contrast-mode() {
-  .badge-check {
-    &-input:focus-visible + &-label {
-      border-color: Highlight;
-      outline-color: Highlight;
-    }
-
-    &-input:checked + &-label {
-      &:hover {
-        @include badge-mx.badge-hover-state;
-      }
-    }
-  }
-
-  button.badge,
-  a.badge,
-  .badge-check-label {
-    transition: none;
-  }
+  // prevent blurry border effect
+  outline: badge.$badge-border-width-sm solid badge.$badge-border-color;
+  outline-offset: -1 * badge.$badge-border-width-sm;
 }
diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index d47f01e4fe..9214196eeb 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -1,19 +1,34 @@
-@use 'sass:math';
-
-@use './button';
-@use './../animation';
 @use './../color';
 @use './../commons';
 @use './../spacing';
 @use './../type';
 
+@use './button';
 @use './../../functions/sizing';
 
-// Design System custom variables
-$badge-height: button.$btn-height-rg;
-$badge-gap: spacing.$size-mini;
-$badge-border-color: var(--post-gray-60);
+$badge-border-radius: 50rem;
+$badge-line-height: type.$line-height-copy;
+$badge-color: color.$white;
+$badge-bg: color.$error-red;
+$badge-border-color: color.$white;
+
+$badge-height: spacing.$size-large;
+$badge-height-sm: spacing.$size-regular;
+$badge-height-empty: spacing.$size-mini;
+
+$badge-padding-x: spacing.$size-mini;
+$badge-padding-x-sm: spacing.$size-micro;
+$badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
+
 $badge-border-width: commons.$border-thick;
+$badge-border-width-sm: commons.$border-width;
+$badge-border-width-empty: commons.$border-width;
+
+$badge-font-size: type.$font-size-12;
+$badge-font-size-sm: 10px;
+
+// DEPRECATED
+$badge-gap: spacing.$size-mini;
 $badge-transition:
   color 250ms,
   background-color 250ms,
@@ -22,11 +37,7 @@ $badge-hover-color: color.$black;
 $badge-hover-bg-color: color.$gray-10;
 $badge-active-color: color.$black;
 $badge-active-bg-color: color.$yellow;
-
-$badge-height-sm: button.$btn-height-sm;
 $badge-gap-sm: sizing.px-to-rem(6px);
-$badge-font-size-sm: type.$font-size-tiny;
-
 $badge-nested-height: sizing.px-to-rem(22px);
 $badge-nested-color: color.$gray-60;
 $badge-nested-bg-color: color.$gray-10;
@@ -35,14 +46,7 @@ $badge-nested-font-size: sizing.px-to-rem(10px);
 $badge-nested-translate-x: ($badge-height - $badge-nested-height) * 0.5;
 $badge-nested-active-bg-color: color.$white;
 $badge-nested-translate-x-sm: ($badge-height-sm - $badge-nested-height) * 0.5;
-
 $badge-check-input-height: spacing.$size-small-large;
 $badge-check-input-bg-color: color.$white;
-
-// Bootstrap variables
-$badge-font-size: type.$font-size-small;
 $badge-font-weight: type.$font-weight-normal;
-$badge-color: var(--post-gray-80);
 $badge-padding-y: 0;
-$badge-padding-x: spacing.$size-regular - sizing.px-to-rem($badge-border-width);
-$badge-border-radius: 50rem;

From 7954f43e47cda0d93e831d58a54b579cabe2b5c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 28 Mar 2024 09:19:33 +0100
Subject: [PATCH 03/11] fix code smell

---
 .../src/stories/components/badge/badge.stories.ts             | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 55549f5773..5a6240aecf 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -77,8 +77,8 @@ export default meta;
 
 // DECORATORS
 function adaptiveBackground(story: StoryFn, { args, context }: StoryContext) {
-  const bgClass = args.background === 'bg-white' ? ` bg-dark` : '';
-  return html` <div class=${`p-2${bgClass}`}>${story(args, context)}</div> `;
+  const bgClass = args.background === 'bg-white' ? `p-2 bg-dark` : 'p-2';
+  return html`<div class=${bgClass}>${story(args, context)}</div>`;
 }
 
 // RENDERER

From 7728f6e50c8a186bf28dc963c0e6f8327becce74 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 28 Mar 2024 09:40:36 +0100
Subject: [PATCH 04/11] fix outline on empty badge

---
 packages/styles/src/components/badge.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index 9a5a88874d..07aa118425 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -27,8 +27,8 @@
     border-width: badge.$badge-border-width-empty;
 
     // prevent blurry border effect
-    outline: badge.$badge-border-width solid badge.$badge-border-color;
-    outline-offset: -1 * badge.$badge-border-width;
+    outline: badge.$badge-border-width-empty solid badge.$badge-border-color;
+    outline-offset: -0.75 * badge.$badge-border-width-empty;
   }
 }
 
@@ -40,5 +40,5 @@
 
   // prevent blurry border effect
   outline: badge.$badge-border-width-sm solid badge.$badge-border-color;
-  outline-offset: -1 * badge.$badge-border-width-sm;
+  outline-offset: -0.75 * badge.$badge-border-width-sm;
 }

From a34fa9d440e60c8e69eefcbafe7f5800ac10495f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 28 Mar 2024 10:07:03 +0100
Subject: [PATCH 05/11] Update documentation lead

---
 .../documentation/src/stories/components/badge/badge.docs.mdx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index 743c5fbabc..d1ba0c3485 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -8,7 +8,7 @@ import StylesPackageImport from '../../../shared/styles-package-import.mdx';
 # Badge
 
 <div className="lead">
-  Documentation and examples for badges, our small count and labeling component.
+  Highlight a numerical characteristic or mark an item with a status.
 </div>
 
 <Canvas sourceState="shown" of={badgeStories.Default} />

From c2e61671f4f2697aab99438ae6576fd937f5c08c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 28 Mar 2024 14:13:25 +0100
Subject: [PATCH 06/11] Update borders

---
 .../src/stories/components/badge/badge.stories.ts    |  2 +-
 packages/styles/src/components/badge.scss            | 12 +-----------
 packages/styles/src/variables/components/_badge.scss |  6 +-----
 3 files changed, 3 insertions(+), 17 deletions(-)

diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 5a6240aecf..fcd47d4381 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -118,7 +118,7 @@ export const Position: Story = {
     </div>
 
     <div class="position-relative d-inline">
-      <post-icon name="2026" scale="1.5"></post-icon>
+      <post-icon name="2026" class="fs-large"></post-icon>
       <div class="badge badge-sm position-absolute top-0 start-100 translate-middle">3</div>
     </div>
   `,
diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index 07aa118425..89b9995e53 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -14,7 +14,7 @@
   height: var(--post-badge-height);
   min-width: calc(var(--post-badge-height) - 2 * var(--post-badge-padding-x));
   padding-inline: var(--post-badge-padding-x);
-  border: badge.$badge-border-width solid badge.$badge-border-color;
+  border: badge.$badge-border;
   border-radius: badge.$badge-border-radius;
   line-height: badge.$badge-line-height;
   font-size: badge.$badge-font-size;
@@ -24,21 +24,11 @@
   &:empty {
     --post-badge-height: #{badge.$badge-height-empty};
     --post-badge-padding-x: #{badge.$badge-padding-x-empty};
-    border-width: badge.$badge-border-width-empty;
-
-    // prevent blurry border effect
-    outline: badge.$badge-border-width-empty solid badge.$badge-border-color;
-    outline-offset: -0.75 * badge.$badge-border-width-empty;
   }
 }
 
 .badge-sm {
   --post-badge-height: #{badge.$badge-height-sm};
   --post-badge-padding-x: #{badge.$badge-padding-x-sm};
-  border-width: badge.$badge-border-width-sm;
   font-size: badge.$badge-font-size-sm;
-
-  // prevent blurry border effect
-  outline: badge.$badge-border-width-sm solid badge.$badge-border-color;
-  outline-offset: -0.75 * badge.$badge-border-width-sm;
 }
diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index 9214196eeb..e29c6c54a8 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -10,7 +10,7 @@ $badge-border-radius: 50rem;
 $badge-line-height: type.$line-height-copy;
 $badge-color: color.$white;
 $badge-bg: color.$error-red;
-$badge-border-color: color.$white;
+$badge-border: color.$white solid commons.$border-thick;
 
 $badge-height: spacing.$size-large;
 $badge-height-sm: spacing.$size-regular;
@@ -20,10 +20,6 @@ $badge-padding-x: spacing.$size-mini;
 $badge-padding-x-sm: spacing.$size-micro;
 $badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
 
-$badge-border-width: commons.$border-thick;
-$badge-border-width-sm: commons.$border-width;
-$badge-border-width-empty: commons.$border-width;
-
 $badge-font-size: type.$font-size-12;
 $badge-font-size-sm: 10px;
 

From 04fb5e069296eb5ef4a8d1345c1c525788877c9f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 2 Apr 2024 11:33:35 +0200
Subject: [PATCH 07/11] fix sass variable not defined

---
 packages/styles/src/placeholders/_badge.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/placeholders/_badge.scss b/packages/styles/src/placeholders/_badge.scss
index 8c187aeb71..a98cfd3afa 100644
--- a/packages/styles/src/placeholders/_badge.scss
+++ b/packages/styles/src/placeholders/_badge.scss
@@ -9,7 +9,7 @@
   align-items: center;
   gap: badge.$badge-gap;
   padding: $badge-padding-y $badge-padding-x;
-  border: badge.$badge-border-width solid badge.$badge-border-color;
+  border: badge.$badge-border;
   height: badge.$badge-height;
   font-size: badge.$badge-font-size;
   font-weight: $badge-font-weight;

From a67c296b9b48e836809b193574d19ccf047f8f88 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 2 Apr 2024 17:29:13 +0200
Subject: [PATCH 08/11] Update badge.stories.ts

---
 .../documentation/src/stories/components/badge/badge.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index fcd47d4381..ddd8177b3a 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -100,7 +100,7 @@ export const Colors: Story = {
     ${renderBadge({ ...args, background: 'bg-success' })}
     ${renderBadge({ ...args, background: 'bg-warning' })}
     ${renderBadge({ ...args, background: 'bg-yellow' })}
-    ${renderBadge({ ...args, background: 'bg-light' })}
+    ${renderBadge({ ...args, background: 'bg-gray' })}
   `,
 };
 

From 5332a490f6221941c4f23afcdeb8ba8a9fa77f03 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Wed, 3 Apr 2024 18:24:47 +0200
Subject: [PATCH 09/11] Apply CR

---
 .../src/shared/decorators/dark-background.ts         | 10 ++++++++++
 .../src/stories/components/badge/badge.stories.ts    | 10 ++++++----
 .../components/card-control/card-control.stories.ts  | 12 +++---------
 packages/styles/src/components/badge.scss            |  1 -
 packages/styles/src/variables/components/_badge.scss |  1 -
 5 files changed, 19 insertions(+), 15 deletions(-)
 create mode 100644 packages/documentation/src/shared/decorators/dark-background.ts

diff --git a/packages/documentation/src/shared/decorators/dark-background.ts b/packages/documentation/src/shared/decorators/dark-background.ts
new file mode 100644
index 0000000000..73b82b8680
--- /dev/null
+++ b/packages/documentation/src/shared/decorators/dark-background.ts
@@ -0,0 +1,10 @@
+import { StoryContext, StoryFn } from '@storybook/web-components';
+import { html } from 'lit';
+
+export function coloredBackground(story: StoryFn, context: StoryContext, color: string) {
+  return html`
+    <div class="bg-${color}" style="margin: -40px -30px; padding: 40px 30px;">
+      ${story(context.args, context)}
+    </div>
+  `;
+}
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index ddd8177b3a..1173ce76e2 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -2,6 +2,7 @@ import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components
 import { html, nothing } from 'lit';
 import { MetaComponent } from '../../../../types';
 import backgroundColors from '../../../shared/background-colors.module.scss';
+import { coloredBackground } from '../../../shared/decorators/dark-background';
 
 const meta: MetaComponent = {
   id: 'bec68e8b-445e-4760-8bd7-1b9970206d8d',
@@ -76,9 +77,10 @@ const meta: MetaComponent = {
 export default meta;
 
 // DECORATORS
-function adaptiveBackground(story: StoryFn, { args, context }: StoryContext) {
-  const bgClass = args.background === 'bg-white' ? `p-2 bg-dark` : 'p-2';
-  return html`<div class=${bgClass}>${story(args, context)}</div>`;
+function adaptiveBackground(story: StoryFn, context: StoryContext) {
+  const { args } = context;
+  const isLight = ['bg-white', 'bg-light', 'bg-gray'].includes(args.background as string);
+  return isLight ? coloredBackground(story, context, 'dark') : story(args, context);
 }
 
 // RENDERER
@@ -97,10 +99,10 @@ export const Default: Story = {};
 
 export const Colors: Story = {
   render: args => html`
+    ${renderBadge({ ...args, background: 'bg-info' })}
     ${renderBadge({ ...args, background: 'bg-success' })}
     ${renderBadge({ ...args, background: 'bg-warning' })}
     ${renderBadge({ ...args, background: 'bg-yellow' })}
-    ${renderBadge({ ...args, background: 'bg-gray' })}
   `,
 };
 
diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
index 535849ec2a..43233aebec 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -6,6 +6,8 @@ import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { parse } from '../../../utils/sass-export';
 import './card-control.styles.scss';
 import scss from './card-control.module.scss';
+import { coloredBackground } from '../../../shared/decorators/dark-background';
+import { color } from '@storybook/theming';
 
 const SCSS_VARIABLES: { [key: string]: string } = parse(scss);
 
@@ -114,15 +116,7 @@ export const DarkBackground: Story = {
       },
     },
   },
-  decorators: [
-    (story, context) =>
-      html`<div
-        class="bg-${context.args.background}"
-        style="margin: -40px -30px; padding: 40px 30px;"
-      >
-        ${story()}
-      </div>`,
-  ],
+  decorators: [(story, context) => coloredBackground(story, context, context.args.background)],
   args: {
     background: 'dark',
     icon: '1001',
diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index 89b9995e53..b4c9fcff7e 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -16,7 +16,6 @@
   padding-inline: var(--post-badge-padding-x);
   border: badge.$badge-border;
   border-radius: badge.$badge-border-radius;
-  line-height: badge.$badge-line-height;
   font-size: badge.$badge-font-size;
   background-color: badge.$badge-bg;
   color: badge.$badge-color;
diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index e29c6c54a8..3ee404d778 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -7,7 +7,6 @@
 @use './../../functions/sizing';
 
 $badge-border-radius: 50rem;
-$badge-line-height: type.$line-height-copy;
 $badge-color: color.$white;
 $badge-bg: color.$error-red;
 $badge-border: color.$white solid commons.$border-thick;

From 96856d3d9819755b27c5c6747680d1680038149f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 4 Apr 2024 09:19:31 +0200
Subject: [PATCH 10/11] fix code smell

---
 .../src/stories/components/card-control/card-control.stories.ts  | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/documentation/src/stories/components/card-control/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
index ca425dfe49..7e78953284 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/card-control.stories.ts
@@ -7,7 +7,6 @@ import { parse } from '../../../utils/sass-export';
 import './card-control.styles.scss';
 import scss from './card-control.module.scss';
 import { coloredBackground } from '../../../shared/decorators/dark-background';
-import { color } from '@storybook/theming';
 
 const SCSS_VARIABLES: any = parse(scss);
 

From ea1333ae1d8a8ebb1b10517a8dd5af9d8dba71fe Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 4 Apr 2024 09:20:57 +0200
Subject: [PATCH 11/11] fix build

---
 packages/styles/src/variables/components/_badge.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index 3ee404d778..49ea1bfbad 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -8,7 +8,7 @@
 
 $badge-border-radius: 50rem;
 $badge-color: color.$white;
-$badge-bg: color.$error-red;
+$badge-bg: color.$error;
 $badge-border: color.$white solid commons.$border-thick;
 
 $badge-height: spacing.$size-large;