From 37bc19c2577e33caa7be515276379e95fffaa55f Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Tue, 17 Dec 2024 15:51:38 +0100
Subject: [PATCH 01/18] chore(documentation, styles): remove deprecated bg
 classes (#4201)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/poor-jars-call.md                  |  7 ++
 .../consumer-app/src/app/app.component.html   |  2 +-
 .../projects/consumer-app/src/styles.scss     |  2 +-
 packages/components/cypress/e2e/tag.cy.ts     |  2 +-
 .../components/post-popover/post-popover.scss |  3 -
 .../post-popovercontainer.scss                |  5 +-
 .../components/post-tooltip/post-tooltip.scss |  5 --
 .../.storybook/blocks/footer.tsx              |  2 +-
 .../.storybook/blocks/header.tsx              |  2 +-
 .../.storybook/blocks/layout/layout.scss      |  5 ++
 .../.storybook/styles/manager.scss            | 37 +-------
 .../cypress/e2e/components/hint.cy.ts         |  2 +-
 .../src/shared/decorators/dark-background.ts  | 10 ---
 .../components/avatar/avatar.stories.ts       |  6 +-
 .../stories/components/badge/badge.docs.mdx   |  1 -
 .../stories/components/badge/badge.stories.ts | 13 +--
 .../stories/components/button/button.docs.mdx |  6 --
 .../components/button/button.stories.ts       | 10 ---
 .../card-button/card-button.stories.ts        | 16 ++--
 .../card-control/card-control.docs.mdx        | 21 +----
 .../standard-html/card-control.stories.ts     | 40 +--------
 .../web-component/card-control.stories.ts     | 33 +-------
 .../card-product/card-product.stories.ts      | 22 ++---
 .../dialog/dialog.snapshot.stories.ts         |  2 +-
 .../components/dialog/dialog.stories.ts       | 13 ++-
 .../forms/hint/hint.snapshot.stories.ts       | 16 +---
 .../intranet-header-postweb.sample.html       |  4 +-
 ...ntranet-header-side-navigation.sample.html |  4 +-
 .../notification-overlay.sample.html          |  2 +-
 .../components/popover/popover.stories.ts     | 18 ++--
 .../subnavigation/subnavigation.docs.mdx      | 22 +++--
 .../subnavigation/subnavigation.module.scss   | 13 ---
 .../subnavigation.snapshot.stories.ts         |  3 +-
 .../subnavigation/subnavigation.stories.ts    | 23 ++---
 .../components/tooltip/tooltip.stories.ts     | 28 +++----
 .../stories/foundations/icons/icon.docs.mdx   |  6 +-
 .../stories/foundations/icons/icon.stories.ts | 10 +--
 .../foundations/icons/icon.styles.scss        |  5 ++
 .../src/stories/introduction.docs.mdx         | 31 +++++--
 .../src/stories/introduction.styles.scss      |  9 +-
 .../internet-header/header.stories.ts         |  2 +-
 .../error-page/error-page.stories.ts          |  2 +-
 .../background/background.blocks.tsx          | 20 -----
 .../utilities/background/background.docs.mdx  | 78 -----------------
 .../background/background.module.scss         | 22 -----
 .../background/background.stories.ts          | 49 -----------
 .../background/background.styles.scss         | 84 -------------------
 .../utilities/display/display.docs.mdx        |  1 +
 .../utilities/display/display.stories.ts      |  5 +-
 .../utilities/display/display.styles.scss     |  6 ++
 .../utilities/elevation/elevation.stories.ts  |  2 +-
 .../stories/utilities/flex/flex.blocks.tsx    | 58 ++++++-------
 .../utilities/flex/flex.snapshot.stories.ts   | 62 +++++++-------
 .../stories/utilities/flex/flex.stories.ts    | 73 ++++++++--------
 .../stories/utilities/flex/flex.styles.scss   | 25 ++++--
 .../utilities/overflow/overflow.stories.ts    |  2 +-
 .../utilities/overflow/overflow.styles.scss   |  4 +
 .../position/position.snapshot.stories.ts     | 18 ++--
 .../utilities/position/position.stories.ts    | 17 ++--
 .../utilities/position/position.styles.scss   | 38 +++++++--
 .../src/stories/utilities/text/text.docs.mdx  |  6 +-
 .../stories/utilities/text/text.stories.ts    |  6 +-
 .../stories/utilities/text/text.styles.scss   |  5 ++
 .../sidebar-with-searchbar.component.html     |  4 +-
 .../samples/sidebar/sidebar.component.html    |  4 +-
 packages/nextjs-integration/src/app/page.tsx  | 12 +--
 .../src/app/app.component.html                | 14 ----
 .../src/app/app.component.ts                  |  1 -
 packages/styles/src/components/badge.scss     |  8 ++
 .../styles/src/components/datepicker.scss     |  6 +-
 .../components/intranet-header/_sidebar.scss  |  2 +
 .../src/components/tabs/_tab-title.scss       | 42 ----------
 .../src/components/tabs/_tabs-wrapper.scss    |  9 --
 .../styles/src/utilities/temp/_legacy.scss    |  7 --
 74 files changed, 351 insertions(+), 804 deletions(-)
 create mode 100644 .changeset/poor-jars-call.md
 delete mode 100644 packages/documentation/src/shared/decorators/dark-background.ts
 delete mode 100644 packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss
 create mode 100644 packages/documentation/src/stories/foundations/icons/icon.styles.scss
 delete mode 100644 packages/documentation/src/stories/utilities/background/background.blocks.tsx
 delete mode 100644 packages/documentation/src/stories/utilities/background/background.docs.mdx
 delete mode 100644 packages/documentation/src/stories/utilities/background/background.module.scss
 delete mode 100644 packages/documentation/src/stories/utilities/background/background.stories.ts
 delete mode 100644 packages/documentation/src/stories/utilities/background/background.styles.scss
 create mode 100644 packages/documentation/src/stories/utilities/text/text.styles.scss

diff --git a/.changeset/poor-jars-call.md b/.changeset/poor-jars-call.md
new file mode 100644
index 0000000000..3ff6c4d4d9
--- /dev/null
+++ b/.changeset/poor-jars-call.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': major
+'@swisspost/design-system-components': major
+'@swisspost/design-system-styles': major
+---
+
+Removed `.bg-` classes to define background color of elements.
diff --git a/packages/components-angular/projects/consumer-app/src/app/app.component.html b/packages/components-angular/projects/consumer-app/src/app/app.component.html
index b129ac5352..81d4583196 100644
--- a/packages/components-angular/projects/consumer-app/src/app/app.component.html
+++ b/packages/components-angular/projects/consumer-app/src/app/app.component.html
@@ -1,4 +1,4 @@
-<header class="bg-dark">
+<header class="palette-alternate">
   <nav class="container py-8">
     <ul class="d-flex flex-wrap row-gap-4 column-gap-16 m-0 list-unstyled">
       <li *ngFor="let route of navigationRoutes">
diff --git a/packages/components-angular/projects/consumer-app/src/styles.scss b/packages/components-angular/projects/consumer-app/src/styles.scss
index 1bcba5ba5f..496f5a4f49 100644
--- a/packages/components-angular/projects/consumer-app/src/styles.scss
+++ b/packages/components-angular/projects/consumer-app/src/styles.scss
@@ -1 +1 @@
-@use '@swisspost/design-system-styles';
+@use '@swisspost/design-system-styles/post-external.scss';
diff --git a/packages/components/cypress/e2e/tag.cy.ts b/packages/components/cypress/e2e/tag.cy.ts
index 0d00db286e..89ada3d6f8 100644
--- a/packages/components/cypress/e2e/tag.cy.ts
+++ b/packages/components/cypress/e2e/tag.cy.ts
@@ -29,7 +29,7 @@ describe('Tag', () => {
       });
     });
 
-    it('should set the tags bg-color according to the prop `variant`', () => {
+    it('should set the tags background color according to the prop `variant`', () => {
       ['gray', 'white', 'info', 'success', 'danger', 'warning', 'yellow'].forEach(bg => {
         cy.get('@tag').invoke('attr', 'variant', bg).should('have.attr', 'variant', bg);
         cy.get('@wrapper').should('have.class', `tag-${bg}`);
diff --git a/packages/components/src/components/post-popover/post-popover.scss b/packages/components/src/components/post-popover/post-popover.scss
index aa81fd5f0d..9bd6558e33 100644
--- a/packages/components/src/components/post-popover/post-popover.scss
+++ b/packages/components/src/components/post-popover/post-popover.scss
@@ -6,9 +6,6 @@
 }
 
 :host {
-  --post-contrast-color: #{post.$white};
-  --post-bg-rgb: #{post.rgb-values(post.$gray-80)};
-
   display: block;
 }
 
diff --git a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
index adeb6b4e4f..00fc94bfd8 100644
--- a/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
+++ b/packages/components/src/components/post-popovercontainer/post-popovercontainer.scss
@@ -22,9 +22,10 @@
 :where(post-popovercontainer) {
   @include elevation-mx.elevation('elevation-3');
 
+  background: var(--post-current-palette-bg);
+  color: var(--post-current-palette-fg);
   position: fixed;
   z-index: commons.$zindex-popover;
-
   width: max-content;
   margin: 0;
   padding: 0;
@@ -34,8 +35,6 @@
   }
 
   box-sizing: border-box;
-  color: var(--post-contrast-color);
-  background-color: rgb(var(--post-bg-rgb));
   border: 2px solid transparent; // Keeping the default border for HCM
   border-radius: commons.$border-radius;
 
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
index 48caed1ce9..8d1d131f33 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -4,11 +4,6 @@
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/variables/spacing';
 
-:host {
-  --post-contrast-color: #{color.$white};
-  --post-bg-rgb: #{color-fn.rgb-values(color.$gray-80)};
-}
-
 post-popovercontainer {
   padding: spacing.$size-micro spacing.$size-mini;
   max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
index b590055606..c705f1bc2a 100644
--- a/packages/documentation/.storybook/blocks/footer.tsx
+++ b/packages/documentation/.storybook/blocks/footer.tsx
@@ -92,7 +92,7 @@ export default (params: { pathToStoryFile?: String }) => (
       )}
     </div>
     <footer className="docs-footer mt-56">
-      <div className="bg-light">
+      <div>
         <div className="container">
           <div className="pt-big-r pb-big-r">
             <h2 className="mt-0">Design System Team Members</h2>
diff --git a/packages/documentation/.storybook/blocks/header.tsx b/packages/documentation/.storybook/blocks/header.tsx
index f607b8274b..8731d27fb0 100644
--- a/packages/documentation/.storybook/blocks/header.tsx
+++ b/packages/documentation/.storybook/blocks/header.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
 export default () => (
-  <header className="docs-header bg-yellow">
+  <header className="docs-header">
     <div className="container py-48">
       <h1>
         Swiss Post
diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
index c9c9cad20b..c4114a2cfc 100644
--- a/packages/documentation/.storybook/blocks/layout/layout.scss
+++ b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -6,6 +6,7 @@
   background-repeat: no-repeat;
   background-position: center left 60vw;
   background-size: auto 100%;
+  background-color: post.$yellow;
 
   .container {
     padding-right: 20vw;
@@ -28,6 +29,10 @@
 }
 
 .docs-footer {
+  > div:first-child {
+    background-color: post.$light;
+  }
+
   ul.list-profile {
     display: grid;
     grid-template-rows: auto;
diff --git a/packages/documentation/.storybook/styles/manager.scss b/packages/documentation/.storybook/styles/manager.scss
index 2d5b33aafa..2b8f3d1308 100644
--- a/packages/documentation/.storybook/styles/manager.scss
+++ b/packages/documentation/.storybook/styles/manager.scss
@@ -97,16 +97,16 @@
 
   #misc,
   [data-item-id^='health'],
-  :is(#raw-components, [data-parent-id="raw-components"]):where([data-env="production"] *) {
+  :is(#raw-components, [data-parent-id='raw-components']):where([data-env='production'] *) {
     display: none;
   }
 
   #introduction--docs,
-  [data-parent-id="misc"] a {
+  [data-parent-id='misc'] a {
     padding-inline-start: 0.5rem;
   }
 
-  [data-parent-id="misc"]:where(:not([data-parent-id="misc"] + *)) {
+  [data-parent-id='misc']:where(:not([data-parent-id='misc'] + *)) {
     margin-block-start: 1rem;
   }
 }
@@ -146,34 +146,3 @@
     letter-spacing: 0.1em;
   }
 }
-
-.bg-dark {
-  #storybook-explorer-tree {
-    .sidebar-item {
-      &:hover,
-      &:focus-visible {
-        background-color: var(--post-gray-80);
-      }
-
-      &[data-selected='true'] {
-        background-color: rgba(var(--post-yellow-rgb), 0.7);
-        color: var(--post-contrast-color);
-      }
-    }
-  }
-
-  #downshift-1-menu {
-    .search-result-item {
-      .search-result-item--label {
-        span {
-          color: var(--post-gray-40);
-        }
-      }
-
-      &:hover,
-      &:focus-visible {
-        background-color: var(--post-gray-80);
-      }
-    }
-  }
-}
diff --git a/packages/documentation/cypress/e2e/components/hint.cy.ts b/packages/documentation/cypress/e2e/components/hint.cy.ts
index 1fe02de8f4..5bffb66467 100644
--- a/packages/documentation/cypress/e2e/components/hint.cy.ts
+++ b/packages/documentation/cypress/e2e/components/hint.cy.ts
@@ -2,7 +2,7 @@ describe('Hint', () => {
   describe('Accessibility', () => {
     beforeEach(() => {
       cy.visit('/iframe.html?id=snapshots--hint');
-      cy.get('.hint', { timeout: 30000 }).should('be.visible');
+      cy.get('.form-hint', { timeout: 30000 }).should('be.visible');
       cy.injectAxe();
     });
 
diff --git a/packages/documentation/src/shared/decorators/dark-background.ts b/packages/documentation/src/shared/decorators/dark-background.ts
deleted file mode 100644
index 73b82b8680..0000000000
--- a/packages/documentation/src/shared/decorators/dark-background.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-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/avatar/avatar.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
index 628bbed4c4..d7854c2561 100644
--- a/packages/documentation/src/stories/components/avatar/avatar.stories.ts
+++ b/packages/documentation/src/stories/components/avatar/avatar.stories.ts
@@ -1,8 +1,7 @@
-import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
+import { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { components } from '@swisspost/design-system-components/dist/docs.json';
-import { coloredBackground } from '@/shared/decorators/dark-background';
 
 const AVATAR_ARGTYPES = components.find(c => c.tag === 'post-avatar');
 const USERID_ARGTYPE = AVATAR_ARGTYPES?.props.find(p => p.name === 'userid');
@@ -61,9 +60,6 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  decorators: [
-    (story: StoryFn, context: StoryContext) => coloredBackground(story, context, 'light'),
-  ],
   render: (args: Args) => html`<post-avatar
     firstname="${args.firstname || nothing}"
     lastname="${args.lastname || nothing}"
diff --git a/packages/documentation/src/stories/components/badge/badge.docs.mdx b/packages/documentation/src/stories/components/badge/badge.docs.mdx
index 847787302f..268d17b4f3 100644
--- a/packages/documentation/src/stories/components/badge/badge.docs.mdx
+++ b/packages/documentation/src/stories/components/badge/badge.docs.mdx
@@ -26,7 +26,6 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 ### 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} />
 
diff --git a/packages/documentation/src/stories/components/badge/badge.stories.ts b/packages/documentation/src/stories/components/badge/badge.stories.ts
index 48f53347f8..77df5446e8 100644
--- a/packages/documentation/src/stories/components/badge/badge.stories.ts
+++ b/packages/documentation/src/stories/components/badge/badge.stories.ts
@@ -2,7 +2,6 @@ import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components
 import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
 import backgroundColors from '@/shared/background-colors.module.scss';
-import { coloredBackground } from '@/shared/decorators/dark-background';
 import chipMeta from '@/stories/components/chip/chip.stories';
 
 const meta: MetaComponent = {
@@ -10,7 +9,6 @@ const meta: MetaComponent = {
   title: 'Components/Badge',
   tags: ['package:HTML'],
   render: renderBadge,
-  decorators: [adaptiveBackground],
   parameters: {
     badges: [],
     design: {
@@ -69,8 +67,8 @@ const meta: MetaComponent = {
       },
     },
     background: {
-      name: 'Backround',
-      description: 'You can use the Background classes to color the cards',
+      name: 'Background',
+      description: 'You can use the background classes to color the cards',
       control: {
         type: 'select',
       },
@@ -84,13 +82,6 @@ const meta: MetaComponent = {
 
 export default meta;
 
-// DECORATORS
-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
 function renderBadge(args: Args) {
   const sizingClass = args.showNumber && args.size !== 'large' ? ` ${args.size}` : '';
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 1bba1e812e..59f10871de 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -28,12 +28,6 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 
 The following examples show the different characteristics of the component. These can differ in the type of visualization, the html structure, as well as when, how and why they are displayed.
 
-### Inverted
-
-Inverted buttons don't need special classes, just use any of the [background classes](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) to set the background, as well as set the `data-color-scheme="dark"` to a parent element and you're done for the day.
-
-<Canvas of={ButtonStories.Inverted} />
-
 ### Full-width
 
 In some situation, it is desirable to display a button using the full available width,
diff --git a/packages/documentation/src/stories/components/button/button.stories.ts b/packages/documentation/src/stories/components/button/button.stories.ts
index f8d2ba788e..1cdcd7f4aa 100644
--- a/packages/documentation/src/stories/components/button/button.stories.ts
+++ b/packages/documentation/src/stories/components/button/button.stories.ts
@@ -230,16 +230,6 @@ export const Default: Story = {
   ...Template,
 };
 
-export const Inverted: Story = {
-  ...Template,
-  decorators: [
-    (story: StoryFn, context: StoryContext) =>
-      html`
-        <div class="p-16 bg-dark" data-color-scheme="dark">${story(context.args, context)}</div>
-      `,
-  ],
-};
-
 const VariantsTemplate = {
   parameters: {
     controls: {
diff --git a/packages/documentation/src/stories/components/card-button/card-button.stories.ts b/packages/documentation/src/stories/components/card-button/card-button.stories.ts
index 13e7a8b731..3850f2cbe5 100644
--- a/packages/documentation/src/stories/components/card-button/card-button.stories.ts
+++ b/packages/documentation/src/stories/components/card-button/card-button.stories.ts
@@ -2,7 +2,6 @@ import { Args, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { useArgs } from '@storybook/preview-api';
 import { MetaComponent } from '@root/types';
-import backgroundColors from '@/shared/background-colors.module.scss';
 
 const meta: MetaComponent = {
   id: '6f8f76ec-a2b5-4eb0-87f7-4021e1a5b8d0',
@@ -62,13 +61,13 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
-    background: {
-      name: 'Backround',
-      description: 'You can use the Background classes to color the cards',
+    palette: {
+      name: 'Palette',
+      description: 'You can use the color scheme of the cards',
       control: {
         type: 'select',
       },
-      options: Object.keys(backgroundColors),
+      options: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
       table: {
         category: 'General',
       },
@@ -79,7 +78,7 @@ export default meta;
 function cardButtonRender(args: Args, count = 42) {
   const [_, updateArgs] = useArgs();
   return html`
-    <div class="card card-button ${args.background}" id="${`card-button${count}`}">
+    <div class="card card-button ${args.palette}" id="${`card-button${count}`}">
       <button
         class="post-card-favourit"
         @click="${() => (count === 42 ? updateArgs({ favourite: !args.favourite }) : '')}"
@@ -129,18 +128,15 @@ const multipleArgs = [
     {
       focus: 'Schwerpunkt',
       title: 'Post zurückbehalten',
-      background: 'bg-nightblue',
     },
     {
       focus: 'Schwerpunkt',
       title: 'Briefmarken',
       favourite: true,
-      background: 'bg-nightblue',
     },
     {
       focus: 'Schwerpunkt',
       tittle: 'Meine Sendungen',
-      background: 'bg-nightblue',
     },
   ],
   [
@@ -148,11 +144,9 @@ const multipleArgs = [
       focus: 'Schwerpunkt',
       title: 'Pick@home',
       favourite: 'true',
-      background: 'bg-nightblue',
     },
     {
       title: 'E-Finance: Demoversion',
-      background: 'bg-nightblue',
     },
     {
       title: 'Adressänderung mit Nachsendung',
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index c191c0a889..9cd2c98798 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -43,12 +43,6 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
 
     ## Examples
 
-    ### Dark backgrounds
-    <Canvas of={CardControlStandardHTMLStories.DarkBackground} />
-    <div className="hide-col-default">
-      <Controls of={CardControlStandardHTMLStories.DarkBackground} />
-    </div>
-
     ### Grouping
 
     Checkbox cards can be grouped together. Use a `fieldset`/`legend` combination to label the group. If there is an error, link the legend with the error message through the `aria-describedby` attribute on the `legend`, pointing to the `id` of the error message.
@@ -95,23 +89,10 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
 
     ## Installation
 
-The `<post-card-control>` element is part of the `@swisspost/design-system-components` package. For more information, read the
-
-<a href="/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs">
-  getting started with components guide
-</a>
-.
+    The `<post-card-control>` element is part of the `@swisspost/design-system-components` package. For more information, read the <a href="/?path=/docs/edfb619b-fda1-4570-bf25-20830303d483--docs">getting started with components guide</a>.
 
     ## Examples
 
-    ### Dark backgrounds
-
-    <Canvas of={CardControlStories.DarkBackground}/>
-
-    <div className="hide-col-default">
-      <Controls of={CardControlStories.DarkBackground} />
-    </div>
-
     ### Custom icon
 
     You can use our built-in icons by just adding the `icon` property with the name of the desired icon.<br/>
diff --git a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
index 9ec50a47b3..d8e67a0cbb 100644
--- a/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
@@ -1,14 +1,10 @@
-import type { Args, StoryContext, StoryFn } from '@storybook/web-components';
+import type { Args } from '@storybook/web-components';
 import { useArgs, useState } from '@storybook/preview-api';
 import { nothing } from 'lit';
 import { html } from 'lit/static-html.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { mapClasses } from '@/utils';
 import { MetaComponent } from '@root/types';
-import { parse } from '@/utils/sass-export';
-import scss from '../card-control.module.scss';
-
-const SCSS_VARIABLES: { [key: string]: string } = parse(scss);
 
 type useStateFn = typeof useState;
 
@@ -185,40 +181,6 @@ export const Default = {
   },
 };
 
-export const DarkBackground = {
-  parameters: {
-    docs: {
-      controls: {
-        include: ['Background-Color', 'Type', 'Checked', 'Disabled', 'Validation'],
-      },
-    },
-  },
-  decorators: [
-    (story: StoryFn, context: StoryContext) =>
-      html`<div
-        class="bg-${context.args.background}"
-        style="margin: -40px -30px; padding: 40px 30px;"
-      >
-        ${story(context.args, context)}
-      </div>`,
-  ],
-  args: {
-    background: 'dark',
-    icon: '1001',
-  },
-  argTypes: {
-    background: {
-      name: 'Background-Color',
-      description: 'The background color of a surrounding wrapper element.',
-      control: {
-        type: 'select',
-      },
-      options: [...Object.keys(SCSS_VARIABLES.dark)],
-    },
-  },
-  render: Default.render,
-};
-
 function col(label: string, args: Args, useState: useStateFn) {
   const [id] = useState(cardControlId++);
 
diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
index 2114493b81..eb5f0a4275 100644
--- a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
@@ -3,11 +3,6 @@ import { useArgs } from '@storybook/preview-api';
 import { MetaComponent } from '@root/types';
 import { html, nothing } from 'lit';
 import { unsafeHTML } from 'lit/directives/unsafe-html.js';
-import { parse } from '@/utils/sass-export';
-import scss from '../card-control.module.scss';
-import { coloredBackground } from '@/shared/decorators/dark-background';
-
-const SCSS_VARIABLES: { [key: string]: string | object } = parse(scss);
 
 const meta: MetaComponent = {
   id: '886fabcf-148b-4054-a2ec-4869668294fb',
@@ -132,32 +127,6 @@ export const Default: Story = {
   },
 };
 
-export const DarkBackground: Story = {
-  parameters: {
-    docs: {
-      controls: {
-        include: ['Background-Color', 'type', 'checked', 'disabled', 'validity'],
-      },
-    },
-  },
-  decorators: [(story, context) => coloredBackground(story, context, context.args.background)],
-  args: {
-    background: 'dark',
-    icon: '1001',
-  },
-  argTypes: {
-    background: {
-      name: 'Background-Color',
-      description: 'The background color of a surrounding wrapper element.',
-      control: {
-        type: 'select',
-      },
-      options: [...Object.keys(SCSS_VARIABLES.dark)],
-    },
-  },
-  render: Default.render,
-};
-
 export const CustomContent: Story = {
   args: {
     'slots-default': '<ul class="mb-0"><li>List item</li><li>List item</li><li>List item</li></ul>',
@@ -274,7 +243,7 @@ export const FormIntegration: Story = {
       <div class="mt-16">
         <h4>FormData</h4>
         <p class="fs-small">Submit or reset the form to see how the FormData will look like.</p>
-        <pre id="AssociatedFormOutput" class="p-8 bg-dark rounded fs-tiny">{}</pre>
+        <pre id="AssociatedFormOutput" class="p-8 palette-accent rounded fs-tiny">{}</pre>
       </div>
     `,
   ],
diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
index 9ab28b83ce..69ddfe4f01 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts
+++ b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
@@ -94,7 +94,7 @@ function getText(args: Args) {
 function renderProductCard(args: Args) {
   return html`
     <a href="#" class="card product-card${args.cardClasses}">
-      <div class="card-body product-navigation bg-white">
+      <div class="card-body product-navigation">
         ${getTitle(args)} ${getText(args)}
         <span class="link-icon">
           <post-icon name="3020" aria-hidden="true"></post-icon>
@@ -143,7 +143,7 @@ export const Multipart: Story = {
     <div class="row row-cols-md-2 border-gutters">
       <div class="col-12">
         <div class="card product-card">
-          <div class="card-body bg-white" data-sync-height-with="product-header">
+          <div class="card-body" data-sync-height-with="product-header">
             <div class="product-navigation">
               <div>
                 <h3>Preiswert</h3>
@@ -161,7 +161,7 @@ export const Multipart: Story = {
             </div>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-1">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-1">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -173,7 +173,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-white" data-sync-height-with="product-body-2">
+          <div class="card-body" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16 align-items-stretch">
@@ -208,7 +208,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-3">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-3">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -223,7 +223,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light">
+          <div class="card-body palette-alternate">
             <button class="btn btn-secondary w-100 mb-12">
               <span>Order Sample Product</span>
             </button>
@@ -237,7 +237,7 @@ export const Multipart: Story = {
 
       <div class="col-12">
         <div class="card product-card">
-          <div class="card-body bg-white" data-sync-height-with="product-header">
+          <div class="card-body" data-sync-height-with="product-header">
             <div class="product-navigation">
               <div>
                 <h3>Schneller</h3>
@@ -257,7 +257,7 @@ export const Multipart: Story = {
             </div>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-1">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-1">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -272,7 +272,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-white" data-sync-height-with="product-body-2">
+          <div class="card-body" data-sync-height-with="product-body-2">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16 align-items-stretch">
@@ -295,7 +295,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light" data-sync-height-with="product-body-3">
+          <div class="card-body palette-alternate" data-sync-height-with="product-body-3">
             <h5 class="h6">Sample Product</h5>
             <p>140 x 90 mm bis B5 (250 x 176 mm)</p>
             <dl class="mt-16">
@@ -310,7 +310,7 @@ export const Multipart: Story = {
             </dl>
           </div>
 
-          <div class="card-body bg-light">
+          <div class="card-body palette-alternate">
             <button class="btn btn-secondary w-100 mb-12">
               <span>Order Sample Product</span>
             </button>
diff --git a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
index 5f05c52cfe..b74488df7d 100644
--- a/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/dialog/dialog.snapshot.stories.ts
@@ -26,7 +26,7 @@ export const Dialog: Story = {
         </style>
         <div class="d-flex flex-wrap align-items-start gap-regular">
           ${bombArgs({
-            backgroundColor: ['bg-white', 'bg-primary'],
+            palette: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
             size: context.argTypes.size.options,
             icon: ['none', '1034'],
             closeButton: [true, false],
diff --git a/packages/documentation/src/stories/components/dialog/dialog.stories.ts b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
index 8f21a73884..6ef2fde293 100644
--- a/packages/documentation/src/stories/components/dialog/dialog.stories.ts
+++ b/packages/documentation/src/stories/components/dialog/dialog.stories.ts
@@ -16,7 +16,7 @@ const meta: Meta = {
     size: 'medium',
     position: 'center',
     icon: 'none',
-    backgroundColor: 'bg-white',
+    palette: 'palette-default',
     animation: 'pop-in',
     closeButton: true,
     open: false,
@@ -75,13 +75,13 @@ const meta: Meta = {
       options: ['none', '1034', '2105', '2104', '2106'],
       table: { category: 'Content' },
     },
-    backgroundColor: {
-      name: 'Background color',
-      description: 'The background color of the dialog field',
+    palette: {
+      name: 'Palette',
+      description: 'The color scheme of the dialog',
       control: {
         type: 'select',
       },
-      options: ['bg-white', 'bg-light', 'bg-primary'],
+      options: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
       table: { category: 'Variant' },
     },
     closeButton: {
@@ -140,14 +140,13 @@ const Template = {
     const postDialogCloseButton = args.closeButton ? getCloseButton() : nothing;
 
     // Don't declare default values or show empty containers
-    if (args.backgroundColor === 'bg-white') args.backgroundColor = nothing;
     if (args.animation === 'pop-in') args.animation = nothing;
     if (args.position === 'center') args.position = nothing;
     if (args.size === 'medium') args.size = nothing;
 
     return html`
       <dialog
-        class="${args.backgroundColor}"
+        class="${args.palette}"
         data-size="${args.size}"
         data-position="${args.position}"
         data-animation="${args.animation}"
diff --git a/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts b/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts
index 9c7933a53e..2735a4d430 100644
--- a/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/forms/hint/hint.snapshot.stories.ts
@@ -1,6 +1,7 @@
 import type { Args, StoryContext, StoryObj } from '@storybook/web-components';
 import meta, { renderHint } from './hint.stories';
 import { html } from 'lit';
+import { schemes } from '@/shared/snapshots/schemes';
 
 const { id, ...metaWithoutId } = meta;
 
@@ -13,19 +14,6 @@ type Story = StoryObj;
 
 export const Hint: Story = {
   render: (_args: Args, context: StoryContext) => {
-    return html`
-      <div class="hint">
-        ${['bg-white', 'bg-dark'].map(
-          bg => html`
-            <div
-              class="${bg} d-flex gap-16 flex-column p-16"
-              data-color-scheme=${bg === 'bg-white' ? 'light' : 'dark'}
-            >
-              ${renderHint({ ..._args }, context, 'example-input-' + bg)}
-            </div>
-          `,
-        )}
-      </div>
-    `;
+    return schemes(() => html` ${renderHint({ ..._args }, context)} `);
   },
 };
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
index f2dcc8671c..b344c1d2ab 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-postweb.sample.html
@@ -10,10 +10,10 @@
     <div class="row flex-grow-1">
       <nav
         [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar p-md-16"
         id="sidebar"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
index 4abbf2b754..5efec79704 100644
--- a/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
+++ b/packages/documentation/src/stories/components/intranet-header/intranet-header-side-navigation.sample.html
@@ -4,10 +4,10 @@
     <div class="row flex-grow-1">
       <nav
         [ngClass]="{'closed': !openedMenu}"
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar p-md-16"
         id="sidebar"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
index 327653911e..f0ba1cb8c0 100644
--- a/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
+++ b/packages/documentation/src/stories/components/notification-overlay/notification-overlay.sample.html
@@ -1,4 +1,4 @@
-<div class="modal-header p-48 mb-16 rounded-top bg-danger">
+<div class="modal-header p-48 mb-16 rounded-top">
   <div class="text-center">
     <span aria-hidden="true" class="pi pi-3x pi-2104-white mt-24 mb-16"></span>
     <p class="h4 bold">Please check your details</p>
diff --git a/packages/documentation/src/stories/components/popover/popover.stories.ts b/packages/documentation/src/stories/components/popover/popover.stories.ts
index ed2cdd6f98..95c48c61e6 100644
--- a/packages/documentation/src/stories/components/popover/popover.stories.ts
+++ b/packages/documentation/src/stories/components/popover/popover.stories.ts
@@ -25,7 +25,7 @@ const meta: MetaComponent = {
     id: 'popover-one',
     innerHtml:
       'A longer message that needs more time to read. <a href="#">Links</a> are also possible.',
-    backgroundColor: 'primary',
+    palette: 'palette-accent',
     closeButtonCaption: 'Close',
     placement: 'top',
     arrow: true,
@@ -46,17 +46,13 @@ const meta: MetaComponent = {
         category: 'General',
       },
     },
-    backgroundColor: {
-      name: 'Background color',
-      description: 'Define a background color, either `bg-primary` or `bg-yellow`.',
+    palette: {
+      name: 'Palette',
+      description: 'Define the popover color scheme.',
       control: {
-        type: 'radio',
-        labels: {
-          yellow: 'Yellow',
-          primary: 'Primary',
-        },
+        type: 'select',
       },
-      options: ['primary', 'yellow'],
+      options: ['palette-accent', 'palette-brand'],
       table: {
         category: 'General',
         type: {
@@ -95,7 +91,7 @@ function render(args: Args) {
       </button>
     </div>
     <post-popover
-      class="bg-${args.backgroundColor}"
+      class="${args.palette}"
       id="${args.id}"
       placement="${args.placement}"
       ?arrow="${args.arrow}"
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx b/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx
index e5fae8462f..4e44e6f940 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.docs.mdx
@@ -6,15 +6,21 @@ import * as subnavigationStories from './subnavigation.stories.ts';
 
 # Subnavigation
 
-<p className="lead">Supplement the header navigation with a secondary entry-point,
-providing access to additional features in your application.</p>
+<p className="lead">
+  Supplement the header navigation with a secondary entry-point, providing access to additional
+  features in your application.
+</p>
 
 <ul>
   <li>
-    <a href="#style-imports" target="_self">Style Imports</a>
+    <a href="#style-imports" target="_self">
+      Style Imports
+    </a>
   </li>
   <li>
-    <a href="#examples" target="_self">Examples</a>
+    <a href="#examples" target="_self">
+      Examples
+    </a>
   </li>
 </ul>
 
@@ -23,15 +29,15 @@ providing access to additional features in your application.</p>
   <Controls of={subnavigationStories.Default} />
 </div>
 
-<StylesPackageImport components={["subnavigation"]} />
+<StylesPackageImport components={['subnavigation']} />
 
 ## Examples
 
-### Colored Background
+### Alternative colors
 
-To set the background of the component, simply use one of our [background utility](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) classes.
+To change the color scheme of the component, simply use one of our [palette](?path=/docs/43481535-5b39-40b5-a273-478b07dc3b31--docs) classes.
 
-<Canvas of={subnavigationStories.ColoredBackground} />
+<Canvas of={subnavigationStories.AlternativeColors} />
 
 ### Badges
 
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss b/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss
deleted file mode 100644
index 0f96859738..0000000000
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.module.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-@use 'sass:list';
-@use 'sass:map';
-@use '@swisspost/design-system-styles/core' as post;
-
-$background-classes: ();
-
-@each $key in map.keys(post.$background-colors) {
-  $background-classes: list.append($background-classes, 'bg-#{$key}', $separator: comma);
-}
-
-:export {
-  bg-classes: [$background-classes];
-}
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
index 209858814b..dd45460afa 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.snapshot.stories.ts
@@ -19,11 +19,10 @@ export const Subnavigation: Story = {
       () => html`
         <div class=" d-flex gap-16 flex-column">
           ${bombArgs({
-            backgroundColor: ['default', 'bg-light', 'bg-dark'],
+            palette: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
             badges: [false, true],
             itemCount: [2, 5],
           })
-            .filter(args => !(args.backgroundColor !== 'default' && args.badges === true))
             .filter(args => !(args.itemCount !== 5 && args.badges === true))
             .map((args: Args) => meta.render?.({ ...context.args, ...args }, context))}
         </div>
diff --git a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
index f36fe62933..8229f2ae73 100644
--- a/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
+++ b/packages/documentation/src/stories/components/subnavigation/subnavigation.stories.ts
@@ -1,11 +1,6 @@
 import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components';
 import { html } from 'lit';
 import { MetaComponent } from '@root/types';
-import { parse } from '@/utils/sass-export';
-import scss from './subnavigation.module.scss';
-
-/* eslint-disable-next-line @typescript-eslint/no-explicit-any */
-const SCSS_VARIABLES: any = parse(scss);
 
 const meta: MetaComponent = {
   id: '87ceabbb-f552-46eb-8a47-4d84e7f8cef0',
@@ -21,16 +16,16 @@ const meta: MetaComponent = {
   },
   args: {
     itemCount: 3,
-    backgroundColor: 'default',
+    palette: 'palette-default',
   },
   argTypes: {
-    backgroundColor: {
-      name: 'Background Color',
-      description: 'Sets the background of the component',
+    palette: {
+      name: 'Palette',
+      description: 'Sets the color scheme of the component',
       control: {
         type: 'select',
       },
-      options: ['default', ...SCSS_VARIABLES['bg-classes']],
+      options: ['palette-default', 'palette-accent', 'palette-alternate', 'palette-brand'],
       table: {
         category: 'General',
       },
@@ -68,9 +63,7 @@ function clickBlocker(story: StoryFn, context: StoryContext) {
 
 function renderTest(args: Args) {
   return html`
-    <div
-      class="subnavigation${args.backgroundColor !== 'default' ? ' ' + args.backgroundColor : ''}"
-    >
+    <div class="subnavigation ${args.palette}">
       <div class="container container-fluid-xs container-fluid-sm">
         <ul class="subnavigation-list">
           ${Array.from(
@@ -94,9 +87,9 @@ type Story = StoryObj;
 
 export const Default: Story = {};
 
-export const ColoredBackground: Story = {
+export const AlternativeColors: Story = {
   args: {
-    backgroundColor: 'bg-gray',
+    palette: 'palette-accent',
   },
 };
 
diff --git a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
index 6d9d41e4dc..aa84b8a140 100644
--- a/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
+++ b/packages/documentation/src/stories/components/tooltip/tooltip.stories.ts
@@ -21,7 +21,7 @@ const meta: MetaComponent = {
   args: {
     id: 'tooltip-one',
     innerHTML: 'Hi there 👋',
-    backgroundColor: 'primary',
+    palette: 'palette-accent',
     placement: 'top',
     delayed: false,
   },
@@ -42,17 +42,13 @@ const meta: MetaComponent = {
         },
       },
     },
-    backgroundColor: {
-      name: 'Background color',
-      description: 'Define a background color, either `bg-primary` or `bg-yellow`.',
+    palette: {
+      name: 'Palette',
+      description: 'Define the color scheme of the tooltip.',
       control: {
-        type: 'radio',
-        labels: {
-          yellow: 'Yellow',
-          primary: 'Primary',
-        },
+        type: 'select',
       },
-      options: ['primary', 'yellow'],
+      options: ['palette-accent', 'palette-brand'],
       table: {
         category: 'General',
         type: {
@@ -76,9 +72,9 @@ function render(args: Args) {
   const [currentArgs, updateArgs] = useArgs();
   // Just for fun
   const innerHTML =
-    args.backgroundColor === 'yellow'
-      ? args.innerHTML.replace('👋', '🤘🏾')
-      : args.innerHTML.replace('🤘🏾', '👋');
+    args.palette === 'palette-accent'
+      ? args.innerHTML.replace('🤘🏾', '👋')
+      : args.innerHTML.replace('👋', '🤘🏾');
 
   if (currentArgs.innerHTML !== innerHTML) updateArgs({ innerHTML });
 
@@ -86,7 +82,7 @@ function render(args: Args) {
     <button class="btn btn-secondary btn-large" data-tooltip-target="${args.id}">Button</button>
     <post-tooltip
       id="${args.id}"
-      class="bg-${args.backgroundColor}"
+      class="${args.palette}"
       placement="${ifDefined(args.placement)}"
       arrow="${ifDefined(args.arrow)}"
       delayed="${ifDefined(args.delayed)}"
@@ -108,7 +104,7 @@ export const NonFocusable: StoryObj = {
       <cite data-tooltip-target="${args.id}">This is a cite element with a tooltip on it.</cite>
       <post-tooltip
         id="${args.id}"
-        background-color=" ${ifDefined(args.backgroundColor)}"
+        class="${args.palette}"
         placement="${ifDefined(args.placement)}"
       >
         This is not the link you are looking for
@@ -131,7 +127,7 @@ export const Multiple: StoryObj = {
       </button>
       <post-tooltip
         id="${args.id}"
-        class="bg-${args.background}"
+        class="${args.palette}"
         placement="${ifDefined(args.placement)}"
       >
         I'm the same, no matter what
diff --git a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx
index b2fb68e6e2..69b60cc25b 100644
--- a/packages/documentation/src/stories/foundations/icons/icon.docs.mdx
+++ b/packages/documentation/src/stories/foundations/icons/icon.docs.mdx
@@ -2,6 +2,7 @@ import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as IconStories from './icon.stories';
 import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react';
 import { Search } from './search/search-icons.blocks';
+import './icon.styles.scss';
 
 <Meta of={IconStories} />
 
@@ -59,8 +60,7 @@ import { Search } from './search/search-icons.blocks';
 
     ### Style
 
-    With the use of our [border](#TODO),[background](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs)
-    and [padding](#TODO) utilities, you can create various styling effects.
+    With the use of our [border](#TODO) and [padding](#TODO) utilities, you can create various styling effects.
 
     <Canvas of={IconStories.Style} sourceState="shown" />
 
@@ -98,6 +98,7 @@ import { Search } from './search/search-icons.blocks';
     To use them, set the `animation` prop to one of the animation names above.
 
     <Canvas of={IconStories.Animate} sourceState="shown" />
+
   </PostTabPanel>
 
   <PostTabHeader panel="search">Find your Icon</PostTabHeader>
@@ -106,5 +107,6 @@ import { Search } from './search/search-icons.blocks';
     Use the grid below to browse all available icons.
 
     <Search />
+
   </PostTabPanel>
 </PostTabs>
diff --git a/packages/documentation/src/stories/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
index ee403f21c2..6e4f636648 100644
--- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts
+++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
@@ -141,7 +141,7 @@ export const Size: Story = {
 const styleVariants = [
   { class: 'border rounded p-16', style: 'font-size: 4rem' },
   { class: 'border border-success rounded p-16 text-success', style: 'font-size: 4rem' },
-  { class: 'rounded-circle bg-info p-16', style: 'font-size: 4rem' },
+  { class: 'rounded-circle p-16', style: 'font-size: 4rem; background-color: #cce4ee' },
 ];
 
 export const Style: Story = {
@@ -177,11 +177,7 @@ export const Flip: Story = {
   ],
 };
 
-const scaleVariants = [
-  { class: 'bg-info', scale: 0.5 },
-  { class: 'bg-info' },
-  { class: 'bg-info', scale: 1.5 },
-];
+const scaleVariants = [{ scale: 0.5 }, {}, { scale: 1.5 }];
 
 export const Scale: Story = {
   parameters: {
@@ -192,7 +188,7 @@ export const Scale: Story = {
   render: args => renderVariants(args, scaleVariants),
   decorators: [
     (story: StoryFn, context: StoryContext) =>
-      generateDecorators(story, context, 'd-flex flex-wrap gap-24'),
+      generateDecorators(story, context, 'd-flex flex-wrap gap-24 scale-container'),
   ],
 };
 
diff --git a/packages/documentation/src/stories/foundations/icons/icon.styles.scss b/packages/documentation/src/stories/foundations/icons/icon.styles.scss
new file mode 100644
index 0000000000..de679b582d
--- /dev/null
+++ b/packages/documentation/src/stories/foundations/icons/icon.styles.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.scale-container post-icon {
+  background-color: post.$info;
+}
diff --git a/packages/documentation/src/stories/introduction.docs.mdx b/packages/documentation/src/stories/introduction.docs.mdx
index 5397d32781..efb493a5e2 100644
--- a/packages/documentation/src/stories/introduction.docs.mdx
+++ b/packages/documentation/src/stories/introduction.docs.mdx
@@ -14,7 +14,7 @@ import { technologies } from './introduction.data';
     {packages.map(p => (
       <li key={p.name}>
         <ti-le title={p.name} href={p.link.github.href} ariaLabel={p.link.github.ariaLabel}>
-          <img src={p.img.src} alt={p.img.alt}/>
+          <img src={p.img.src} alt={p.img.alt} />
           <span>{p.version}</span>
         </ti-le>
       </li>
@@ -22,21 +22,30 @@ import { technologies } from './introduction.data';
   </ul>
   <div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
     <div className="mt-32 mb-16 w-100">
-      <a className="btn btn-primary btn-lg" href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs">Get started</a>
+      <a
+        className="btn btn-primary btn-lg"
+        href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs"
+      >
+        Get started
+      </a>
     </div>
     <a
       href="https://www.experience-hub.ch/document/2803"
       rel="noopener"
       className="btn btn-secondary"
     >
-      <span>Experience Hub<sup>1</sup></span>
+      <span>
+        Experience Hub<sup>1</sup>
+      </span>
     </a>
     <a
       href="https://www.figma.com/files/1052961410179009444/project/45002065/Web"
       rel="noopener"
       className="btn btn-secondary"
     >
-      <span>Figma<sup>2</sup></span>
+      <span>
+        Figma<sup>2</sup>
+      </span>
     </a>
     <a
       href="https://fonts.post.ch/frutigerneueforpost/#/"
@@ -53,11 +62,19 @@ import { technologies } from './introduction.data';
       <span>GitHub</span>
     </a>
   </div>
-  <p className="mb-0 fs-tiny lh-tiny"><sup>1</sup> Login required. Get access with your post account, or use the registration form on the login page.<br />
-    <sup>2</sup> Login required. Get access with your post account, or click <a href="mailto:ux@post.ch?subject=I need access to Figma&body=Hello%2C%20I%20need%20access%20to%20Figma%20%0A%E2%80%A2%20%20Project%20name%3A%20%0A%E2%80%A2%20Project%20Owner%20at%20the%20Post%20Office%20%28email%29%3A%20%0A%E2%80%A2%20Project%20Start%20Date%3A%20%0A%E2%80%A2%20Email%20address%20to%20be%20authorized%3A%20">here</a>.</p>
+  <p className="mb-0 fs-tiny lh-tiny">
+    <sup>1</sup> Login required. Get access with your post account, or use the registration form on
+    the login page.
+    <br />
+    <sup>2</sup> Login required. Get access with your post account, or click{' '}
+    <a href="mailto:ux@post.ch?subject=I need access to Figma&body=Hello%2C%20I%20need%20access%20to%20Figma%20%0A%E2%80%A2%20%20Project%20name%3A%20%0A%E2%80%A2%20Project%20Owner%20at%20the%20Post%20Office%20%28email%29%3A%20%0A%E2%80%A2%20Project%20Start%20Date%3A%20%0A%E2%80%A2%20Email%20address%20to%20be%20authorized%3A%20">
+      here
+    </a>
+    .
+  </p>
 </div>
 
-<div className="mt-56 py-56 bg-light bg-fullwidth text-center">
+<div className="mt-56 py-56 light-section text-center">
   <h2 className="h3 mb-32">Features</h2>
 
   <div className="row g-0">
diff --git a/packages/documentation/src/stories/introduction.styles.scss b/packages/documentation/src/stories/introduction.styles.scss
index 252cc95c97..5b2d3545bb 100644
--- a/packages/documentation/src/stories/introduction.styles.scss
+++ b/packages/documentation/src/stories/introduction.styles.scss
@@ -2,12 +2,13 @@
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/design-system-styles/mixins/utilities';
 
-#storybook-docs{
-  overflow-x:hidden;
+#storybook-docs {
+  overflow-x: hidden;
 }
 
-.bg-fullwidth {
+.light-section {
   position: relative;
+  background-color: post.$light;
 
   &:before,
   &:after {
@@ -32,7 +33,7 @@
 .tile-wrapper {
   display: flex;
   flex-wrap: wrap;
-  padding:0;
+  padding: 0;
   list-style-type: none;
   justify-content: center;
   gap: post.$size-big;
diff --git a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
index a0200a7ae3..d51fe7b296 100644
--- a/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
+++ b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
@@ -202,7 +202,7 @@ export const CssVariables = {
         }
       </style>
       ${meta.render && meta.render(args, context)}
-      <p id="my-div" class="position-sticky bg-dark p-16">
+      <p id="my-div" class="position-sticky palette-accent p-16">
         I am sticky! I am always positioned right below the header when you scroll up and down.
       </p>
     `;
diff --git a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
index 7da0cdbde8..7bba9184f8 100644
--- a/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
+++ b/packages/documentation/src/stories/templates/error-page/error-page.stories.ts
@@ -12,7 +12,7 @@ const meta: Meta = {
 
 function render() {
   return html`
-    <div class="bg-light error-container">
+    <div class="palette-alternate error-container">
       <div class="container">
         <div class="row">
           <div class="col-sm-8 py-56">
diff --git a/packages/documentation/src/stories/utilities/background/background.blocks.tsx b/packages/documentation/src/stories/utilities/background/background.blocks.tsx
deleted file mode 100644
index 24b7454f04..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.blocks.tsx
+++ /dev/null
@@ -1,20 +0,0 @@
-export function BackgroundContainer(props: { name: string; color: string }) {
-  return (
-    <article className="background-container">
-      <div className="background-container__description">
-        <h3 className="description__title h6">{props.name}</h3>
-      </div>
-      <div className="background-container__background">
-        <div className={`background__tile bg-${props.name}`}>Text</div>
-      </div>
-      <div className="background-container__props">
-        <dl>
-          <dt>Class</dt>
-          <dd>
-            <code>.bg-{props.name}</code>
-          </dd>
-        </dl>
-      </div>
-    </article>
-  );
-}
diff --git a/packages/documentation/src/stories/utilities/background/background.docs.mdx b/packages/documentation/src/stories/utilities/background/background.docs.mdx
deleted file mode 100644
index ce837f362f..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.docs.mdx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { Canvas, Meta } from '@storybook/blocks';
-import { forEach } from '@/utils/react';
-import { parse } from '@/utils/sass-export';
-import { BackgroundContainer } from './background.blocks';
-import * as BackgroundStories from './background.stories';
-import scss from './background.module.scss';
-import './background.styles.scss';
-
-export const SCSS_VARIABLES = parse(scss);
-
-<Meta of={BackgroundStories} />
-
-# Background
-
-<div className="lead">
-  Use the background utility classes to set the background of an element to any predefined color.
-</div>
-
-Background utilities also set the text color by defining the following CSS variables:
-
-- `--post-contrast-color` and `--post-contrast-color-rgb`
-- `--post-contrast-color-inverted` and `--post-contrast-color-inverted-rgb`
-
-## Background Containers
-
-To set a background on an element, simply add a `.bg-{colorname}` class to it.
-
-<Canvas of={BackgroundStories.ColoredBackground} sourceState="shown" />
-
-### Available Backgrounds
-
-#### Base
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES.base, function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
-#### Signal
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES.signal, function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
-#### Signal backgrounds
-
-<section className="background-container__section">
-  {forEach(SCSS_VARIABLES['signal-background'], function ({ key, value }) {
-    return <BackgroundContainer key={key} name={key} color={value} />;
-  })}
-</section>
-
-## Nested
-
-It is possible to nest backgrounds.
-
-<div className="banner banner-info banner-md">
-  Text color and inverted text color CSS variables are set for each background to always ensure the
-  best possible contrast.
-</div>
-
-<Canvas of={BackgroundStories.NestedBackgrounds} sourceState="shown" />
-
-## Opacity
-
-Change the background opacity simply by setting the CSS variable `--post-bg-opacity`.
-
-<div className="banner banner-info banner-md">
-  Low background opacity is not recommended as it can lead to poor contrast. It is then your
-  responsibility to ensure that the contrast ratio between foreground and background is at least
-  4.5:1. More information on that topic is available on our [accessibility
-  docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
-</div>
-
-<Canvas of={BackgroundStories.TranslucentBackgrounds} sourceState="shown" />
diff --git a/packages/documentation/src/stories/utilities/background/background.module.scss b/packages/documentation/src/stories/utilities/background/background.module.scss
deleted file mode 100644
index f630e81f1d..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.module.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-@use 'sass:map';
-@use '@swisspost/design-system-styles/core' as post;
-
-$non-base-background-colors: ();
-$non-base-background-colors: map.merge($non-base-background-colors, post.$signal-colors);
-$non-base-background-colors: map.merge($non-base-background-colors, post.$signal-background-colors);
-
-:export {
-  @each $color, $value in post.$background-colors {
-    @if (map.has-key($non-base-background-colors, $color) == false) {
-      base_#{$color}: $value;
-    }
-  }
-
-  @each $color, $value in post.$signal-colors {
-    signal_#{$color}: $value;
-  }
-
-  @each $color, $value in post.$signal-background-colors {
-    signal-background_#{$color}: $value;
-  }
-}
diff --git a/packages/documentation/src/stories/utilities/background/background.stories.ts b/packages/documentation/src/stories/utilities/background/background.stories.ts
deleted file mode 100644
index 3d8e27f20c..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.stories.ts
+++ /dev/null
@@ -1,49 +0,0 @@
-import type { StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
-import { MetaExtended } from '@root/types';
-
-const meta: MetaExtended = {
-  id: '60852fac-a861-4415-8276-bd38d68653bb',
-  title: 'Utilities/Background',
-  parameters: {
-    badges: [],
-  },
-};
-
-export default meta;
-
-type Story = StoryObj;
-
-export const ColoredBackground: Story = {
-  render: () => html` <div class="bg-yellow p-16">Content</div> `,
-};
-
-export const NestedBackgrounds: Story = {
-  render: () => html`
-    <div class="bg-gray p-16">
-      Content in
-      <code>.bg-gray</code>
-      container.
-      <div class="bg-dark p-16">
-        Content in
-        <code>.bg-dark</code>
-        container.
-        <div class="bg-light p-16">
-          Content in
-          <code>.bg-light</code>
-          container.
-        </div>
-      </div>
-    </div>
-  `,
-};
-
-export const TranslucentBackgrounds: Story = {
-  render: () => html`
-    <div class="bg-dark p-16">Container with default opacity (1).</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.8">Container with opacity 0.8.</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.6">Container with opacity 0.6.</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.4">Container with opacity 0.4.</div>
-    <div class="bg-dark p-16" style="--post-bg-opacity: 0.2">Container with opacity 0.2.</div>
-  `,
-};
diff --git a/packages/documentation/src/stories/utilities/background/background.styles.scss b/packages/documentation/src/stories/utilities/background/background.styles.scss
deleted file mode 100644
index af6b159dd0..0000000000
--- a/packages/documentation/src/stories/utilities/background/background.styles.scss
+++ /dev/null
@@ -1,84 +0,0 @@
-@use '@swisspost/design-system-styles/core' as post;
-
-.background-container__section {
-  display: grid;
-  grid-template-columns: minmax(max-content, 25%) minmax(100px, auto) minmax(max-content, 50%);
-
-  @include post.media-breakpoint-down(md) {
-    display: block;
-  }
-}
-
-.background-container {
-  display: contents;
-
-  > * {
-    padding: post.$size-mini (post.$size-regular * 0.5);
-    border-top: post.$border-width solid post.$border-color;
-
-    &:first-child {
-      padding-inline-start: 0;
-    }
-    &:last-child {
-      padding-inline-end: 0;
-    }
-  }
-
-  .background-container__description {
-    .description__title {
-      &:first-letter {
-        text-transform: uppercase;
-      }
-    }
-  }
-
-  .background-container__background {
-    .background__tile {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100%;
-      border-radius: post.$border-radius;
-      box-shadow: post.$elevation-1;
-      min-height: 1rem * post.$line-height-base * 2.5;
-    }
-  }
-
-  .background-container__props {
-    dl {
-      display: grid;
-      grid-template-columns: max-content auto;
-      gap: 0 post.$size-mini;
-      margin: 0;
-
-      dt,
-      dd {
-        margin: 0;
-      }
-    }
-  }
-
-  @include post.media-breakpoint-down(md) {
-    display: grid;
-    grid-template-rows: auto auto;
-    grid-template-columns: 40% 60%;
-
-    .background-container__description {
-      grid-row: 1;
-      grid-column: 1;
-    }
-
-    .background-container__background {
-      grid-row: 2;
-      grid-column: 1 / 3;
-      padding-top: 0;
-      padding-inline: 0;
-      border-top: 0 none;
-    }
-
-    .background-container__props {
-      grid-row: 1;
-      grid-column: 2;
-    }
-  }
-}
diff --git a/packages/documentation/src/stories/utilities/display/display.docs.mdx b/packages/documentation/src/stories/utilities/display/display.docs.mdx
index 9d3f04c309..5b2009434b 100644
--- a/packages/documentation/src/stories/utilities/display/display.docs.mdx
+++ b/packages/documentation/src/stories/utilities/display/display.docs.mdx
@@ -2,6 +2,7 @@ import { Canvas, Meta } from '@storybook/blocks';
 import * as DisplayStories from './display.stories';
 import { breakpoints, firstBreakpoint } from '../spacing/spacing.docs.mdx';
 import { forEach } from '@/utils/react';
+import './display.styles.scss';
 
 export const displayOptions = [
   'none',
diff --git a/packages/documentation/src/stories/utilities/display/display.stories.ts b/packages/documentation/src/stories/utilities/display/display.stories.ts
index 91b3a91143..ca41374c5f 100644
--- a/packages/documentation/src/stories/utilities/display/display.stories.ts
+++ b/packages/documentation/src/stories/utilities/display/display.stories.ts
@@ -12,9 +12,10 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
+  decorators: [story => html` <div class="display-story">${story()}</div> `],
   render: () =>
     html`
-      <div class="d-inline bg-yellow p-8">Content</div>
-      <div class="d-inline bg-black p-8">Content</div>
+      <div class="d-inline p-8">Content</div>
+      <div class="d-inline p-8">Content</div>
     `,
 };
diff --git a/packages/documentation/src/stories/utilities/display/display.styles.scss b/packages/documentation/src/stories/utilities/display/display.styles.scss
index 3bf9067e93..6619ae5899 100644
--- a/packages/documentation/src/stories/utilities/display/display.styles.scss
+++ b/packages/documentation/src/stories/utilities/display/display.styles.scss
@@ -9,3 +9,9 @@
     background-color: color.adjust(post.$border-color, $lightness: 15%);
   }
 }
+
+.display-story {
+  > div {
+    background-color: post.$yellow;
+  }
+}
diff --git a/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
index 30f22b3565..6d7231a49b 100644
--- a/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
@@ -15,5 +15,5 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => html` <div class="w-50 rounded p-16 bg-aubergine elevation-5">I'm elevated!</div> `,
+  render: () => html` <div class="w-50 rounded p-16 elevation-5">I'm elevated!</div> `,
 };
diff --git a/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx b/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
index 642f5ec5ee..7b762b1bc5 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
+++ b/packages/documentation/src/stories/utilities/flex/flex.blocks.tsx
@@ -57,8 +57,8 @@ export function FlexDirectionContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="flex">
       <div className={`d-flex flex-${props.name}`}>
-        <div className="bg-yellow p-12">First content</div>
-        <div className="bg-gray p-12">Second content</div>
+        <div className="p-12">First content</div>
+        <div className="p-12">Second content</div>
       </div>
     </FlexDocContainer>
   );
@@ -68,8 +68,8 @@ export function AlignItemsContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="align-items">
       <div className={`d-flex align-items-${props.name}`}>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray px-12 py-48">Content</div>
+        <div className="p-12">Small content</div>
+        <div className="px-12 py-48">Big content</div>
       </div>
     </FlexDocContainer>
   );
@@ -79,8 +79,8 @@ export function JustifyContentContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="justify-content">
       <div className={`d-flex justify-content-${props.name}`}>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -90,9 +90,9 @@ export function AlignSelfContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="align-self">
       <div className="d-flex align-items-start">
-        <div className="bg-gray px-12 py-48">Content</div>
-        <div className={`bg-yellow p-12 align-self-${props.name}`}>Content with align-self</div>
-        <div className="bg-gray px-12 py-48">Content</div>
+        <div className="px-12 py-48">Content</div>
+        <div className={`p-12 align-self-${props.name}`}>Content with align-self</div>
+        <div className="px-12 py-48">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -102,10 +102,10 @@ export function GrowContainer(props: { name: number }) {
   return (
     <FlexDocContainer name={props.name.toString()} prefix="flex-grow">
       <div className="d-flex align-items-start grow-shrink-container">
-        <div className={`bg-yellow p-12 flex-grow-${props.name}`}>
+        <div className={`p-12 flex-grow-${props.name}`}>
           I'm {props.name === 0 ? 'not' : ''} growing
         </div>
-        <div className="bg-gray p-12">Content</div>
+        <div className="p-12">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -115,12 +115,12 @@ export function ShrinkContainer(props: { name: number }) {
   return (
     <FlexDocContainer name={props.name.toString()} prefix="flex-shrink">
       <div className="d-flex align-items-start grow-shrink-container">
-        <div className="bg-gray p-12">
+        <div className="p-12">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
           ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
           ullamco laboris nisi ut aliquip ex ea commodo consequat.
         </div>
-        <div className={`bg-yellow p-12 flex-shrink-${props.name}`}>
+        <div className={`p-12 flex-shrink-${props.name}`}>
           I {props.name === 0 ? "don't" : ''} shrink
         </div>
       </div>
@@ -132,14 +132,14 @@ export function AlignContentContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="align-content">
       <div className={`align-content-container d-flex align-content-${props.name} flex-wrap`}>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
-        <div className="bg-gray p-12">Content</div>
-        <div className="bg-yellow p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
+        <div className="p-12">Content</div>
       </div>
     </FlexDocContainer>
   );
@@ -149,14 +149,14 @@ export function WrapContainer(props: { name: string }) {
   return (
     <FlexDocContainer name={props.name} prefix="flex">
       <div className={`d-flex flex-${props.name}`}>
-        <div className="bg-gray p-12">Content 1</div>
-        <div className="bg-yellow p-12">Content 2</div>
-        <div className="bg-gray p-12">Content 3</div>
-        <div className="bg-yellow p-12">Content 4</div>
-        <div className="bg-gray p-12">Content 5</div>
-        <div className="bg-yellow p-12">Content 6</div>
-        <div className="bg-gray p-12">Content 7</div>
-        <div className="bg-yellow p-12">Content 8</div>
+        <div className="p-12">Content 1</div>
+        <div className="p-12">Content 2</div>
+        <div className="p-12">Content 3</div>
+        <div className="p-12">Content 4</div>
+        <div className="p-12">Content 5</div>
+        <div className="p-12">Content 6</div>
+        <div className="p-12">Content 7</div>
+        <div className="p-12">Content 8</div>
       </div>
     </FlexDocContainer>
   );
diff --git a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
index 1add5d5375..b48be2628a 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/flex/flex.snapshot.stories.ts
@@ -18,6 +18,7 @@ const { id, ...metaWithoutId } = meta;
 export default {
   ...metaWithoutId,
   title: 'Snapshots',
+  decorators: null,
 };
 
 type Story = StoryObj;
@@ -28,9 +29,9 @@ function getFlex(type: string) {
       return html`
         ${flexDirectionValues.map(
           val => html`
-            <div class="d-flex flex-${val}">
-              <div class="bg-yellow p-12">Content</div>
-              <div class="bg-gray p-12">Content</div>
+            <div class="d-flex flex-snap-container flex-${val}">
+              <div class="p-12">Content 1</div>
+              <div class="p-12">Content 2</div>
             </div>
           `,
         )}
@@ -39,9 +40,9 @@ function getFlex(type: string) {
       return html`
         ${flexAlignItemsValues.map(
           val => html`
-            <div class="d-flex align-items-${val}">
-              <div class="bg-yellow p-12">Content</div>
-              <div class="bg-gray px-12 py-48">Content</div>
+            <div class="d-flex flex-snap-container align-items-${val}">
+              <div class="p-12">Small content</div>
+              <div class="px-12 py-48">Big content</div>
             </div>
           `,
         )}
@@ -50,9 +51,9 @@ function getFlex(type: string) {
       return html`
         ${flexJustifyContentValues.map(
           val => html`
-            <div class="d-flex justify-content-${val}">
-              <div class="bg-yellow p-12">Content</div>
-              <div class="bg-gray p-12">Content</div>
+            <div class="d-flex flex-snap-container justify-content-${val}">
+              <div class="p-12">Content</div>
+              <div class="p-12">Content</div>
             </div>
           `,
         )}
@@ -61,10 +62,10 @@ function getFlex(type: string) {
       return html`
         ${flexAlignSelfValues.map(
           val => html`
-            <div class="d-flex align-items-start">
-              <div class="bg-gray px-12 py-48">Content</div>
-              <div class="bg-yellow p-12 align-self-${val}">Content with align-self</div>
-              <div class="bg-gray px-12 py-48">Content</div>
+            <div class="d-flex flex-snap-container align-items-start">
+              <div class="px-12 py-48">Content</div>
+              <div class="p-12 align-self-${val}">Content with align-self</div>
+              <div class="px-12 py-48">Content</div>
             </div>
           `,
         )}
@@ -76,11 +77,11 @@ function getFlex(type: string) {
           value: [0, 1],
         }).map(
           args => html`
-            <div class="d-flex align-items-start grow-shrink-container">
-              <div class="bg-yellow p-12 flex-${args.type}-${args.value}">
+            <div class="d-flex flex-snap-container align-items-start grow-shrink-container">
+              <div class="p-12 flex-${args.type}-${args.value}">
                 I'm ${args.value === 0 ? 'not' : ''} ${args.type}ing
               </div>
-              <div class="bg-gray p-12">
+              <div class="p-12">
                 ${args.type === 'grow'
                   ? 'Content'
                   : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'}
@@ -93,11 +94,10 @@ function getFlex(type: string) {
       return html`
         ${flexAlignContentValues.map(
           val => html`
-            <div class="align-content-container d-flex flex-wrap align-content-${val}">
-              ${Array.from({ length: 8 }).map(
-                (_, i) =>
-                  html` <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-12">Content</div> `,
-              )}
+            <div
+              class="align-content-container d-flex flex-snap-container flex-wrap align-content-${val}"
+            >
+              ${Array.from({ length: 8 }).map(() => html` <div class="p-12">Content</div> `)}
             </div>
           `,
         )}
@@ -106,11 +106,9 @@ function getFlex(type: string) {
       return html`
         ${flexWrapValues.map(
           val => html`
-            <div class="d-flex flex-${val}">
+            <div class="d-flex flex-snap-container flex-${val}">
               ${Array.from({ length: 30 }).map(
-                (_, i) => html`
-                  <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-12">Content ${i + 1}</div>
-                `,
+                (_, i) => html` <div class="p-12">Content ${i + 1}</div> `,
               )}
             </div>
           `,
@@ -123,12 +121,10 @@ function getFlex(type: string) {
           ['last', 5, 4, 3, 2, 1, 0, 'first'],
         ].map(
           arr => html`
-            <div class="d-flex flex-wrap">
+            <div class="d-flex flex-snap-container flex-wrap">
               ${arr.map(
                 (order, i) =>
-                  html`<div class="bg-${i % 2 === 0 ? 'gray' : 'yellow'} p-8 order-${order}">
-                    Element ${i} with position: ${order}
-                  </div>`,
+                  html`<div class="p-8 order-${order}">Element ${i} with position: ${order}</div>`,
               )}
             </div>
           `,
@@ -138,12 +134,12 @@ function getFlex(type: string) {
       return html`
         ${[true, false].map(
           isEqual => html`
-            <div class="d-flex">
-              <div class="bg-yellow p-8 flex-fill">Content</div>
-              <div class="bg-gray p-8 flex-fill">
+            <div class="d-flex flex-snap-container">
+              <div class="p-8 flex-fill">Content</div>
+              <div class="p-8 flex-fill">
                 ${isEqual ? 'Content' : 'Element with more content than the others'}
               </div>
-              <div class="bg-yellow p-8 flex-fill">Content</div>
+              <div class="p-8 flex-fill">Content</div>
             </div>
           `,
         )}
diff --git a/packages/documentation/src/stories/utilities/flex/flex.stories.ts b/packages/documentation/src/stories/utilities/flex/flex.stories.ts
index b049815326..5fa1194325 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.stories.ts
+++ b/packages/documentation/src/stories/utilities/flex/flex.stories.ts
@@ -5,6 +5,7 @@ import { MetaExtended } from '@root/types';
 const meta: MetaExtended = {
   id: 'b0154a21-1138-4a69-953a-c17c3cb7c538',
   title: 'Utilities/Flex',
+  decorators: [story => html`<div class="flex-story-container">${story()}</div>`],
 };
 
 export default meta;
@@ -15,8 +16,8 @@ export const Default: Story = {
   render: () =>
     html`
       <div class="d-flex flex-row">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
       </div>
     `,
 };
@@ -25,8 +26,8 @@ export const AlignItems: Story = {
   render: () =>
     html`
       <div class="d-flex align-items-end">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray px-8 py-48">Content</div>
+        <div class="p-8">Small content</div>
+        <div class="px-8 py-48">Big content</div>
       </div>
     `,
 };
@@ -35,9 +36,9 @@ export const AlignSelf: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-gray px-8 py-48">Content</div>
-        <div class="bg-yellow align-self-end p-8">Content</div>
-        <div class="bg-gray px-8 py-48">Content</div>
+        <div class="px-8 py-48">Content</div>
+        <div class="align-self-end p-8">Content</div>
+        <div class="px-8 py-48">Content</div>
       </div>
     `,
 };
@@ -46,8 +47,8 @@ export const JustifyContent: Story = {
   render: () =>
     html`
       <div class="d-flex justify-content-between">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
       </div>
     `,
 };
@@ -56,8 +57,8 @@ export const GrowShrink: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow flex-grow-1 p-8">I'm growing</div>
-        <div class="bg-gray flex-shrink-1 p-8">I'm shrinking</div>
+        <div class="flex-grow-1 p-8">I'm growing</div>
+        <div class="flex-shrink-1 p-8">I'm shrinking</div>
       </div>
     `,
 };
@@ -66,9 +67,7 @@ export const AlignContent: Story = {
   render: () =>
     html`
       <div style="height: 14rem" class="d-flex flex-wrap align-content-around">
-        ${Array.from({ length: 14 }).map(
-          (_, i) => html` <div class="${i % 2 === 0 ? 'bg-gray' : 'bg-yellow'} p-8">Content</div> `,
-        )}
+        ${Array.from({ length: 14 }).map(() => html` <div class="p-8">Content</div> `)}
       </div>
     `,
 };
@@ -77,9 +76,9 @@ export const Order: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow p-8 order-3">First element, positioned last</div>
-        <div class="bg-gray p-8 order-2">Second element</div>
-        <div class="bg-yellow p-8 order-1">Last element, positioned first</div>
+        <div class="p-8 order-3">First element, positioned last</div>
+        <div class="p-8 order-2">Second element</div>
+        <div class="p-8 order-1">Last element, positioned first</div>
       </div>
     `,
 };
@@ -88,20 +87,20 @@ export const Wrap: Story = {
   render: () =>
     html`
       <div class="d-flex flex-wrap">
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
-        <div class="bg-yellow p-8">Content</div>
-        <div class="bg-gray p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
+        <div class="p-8">Content</div>
       </div>
     `,
 };
@@ -110,9 +109,9 @@ export const FillEqual: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow p-8 flex-fill">Same content, same width</div>
-        <div class="bg-gray p-8 flex-fill">Same content, same width</div>
-        <div class="bg-yellow p-8 flex-fill">Same content, same width</div>
+        <div class="p-8 flex-fill">Same content, same width</div>
+        <div class="p-8 flex-fill">Same content, same width</div>
+        <div class="p-8 flex-fill">Same content, same width</div>
       </div>
     `,
 };
@@ -121,9 +120,9 @@ export const Fill: Story = {
   render: () =>
     html`
       <div class="d-flex">
-        <div class="bg-yellow p-8 flex-fill">Content</div>
-        <div class="bg-gray p-8 flex-fill">Element with more content than the others</div>
-        <div class="bg-yellow p-8 flex-fill">Content</div>
+        <div class="p-8 flex-fill">Content</div>
+        <div class="p-8 flex-fill">Element with more content than the others</div>
+        <div class="p-8 flex-fill">Content</div>
       </div>
     `,
 };
diff --git a/packages/documentation/src/stories/utilities/flex/flex.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
index 065df88b56..6c1d78fed9 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss
+++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
@@ -1,5 +1,25 @@
 @use '@swisspost/design-system-styles/core' as post;
 
+.flex-story-container,
+.flex-doc-container__demo {
+  > * > * {
+    border-radius: post.$border-radius;
+    box-shadow: post.$elevation-1;
+  }
+}
+
+.flex-snap-container,
+.flex-story-container .d-flex,
+.flex-doc-container__demo .d-flex {
+  > *:nth-child(odd) {
+    background-color: post.$yellow;
+  }
+
+  > *:nth-child(even) {
+    background-color: post.$gray;
+  }
+}
+
 .flex-doc-container {
   > * {
     align-self: stretch;
@@ -30,11 +50,6 @@
   .flex-doc-container__demo {
     padding: post.$size-mini;
 
-    > * > * {
-      border-radius: post.$border-radius;
-      box-shadow: post.$elevation-1;
-    }
-
     @include post.media-breakpoint-up(lg) {
       border: post.$border-width solid post.$border-color;
     }
diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts b/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts
index b2b5bbd9f4..9e8e1ffaef 100644
--- a/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts
+++ b/packages/documentation/src/stories/utilities/overflow/overflow.stories.ts
@@ -47,7 +47,7 @@ const meta: MetaExtended = {
   render: (args: Args) => {
     return html`
       <div
-        class="bg-yellow ${args.overflow ? 'overflow-' + args.overflow : ''}${args.overflowX
+        class="my-container ${args.overflow ? 'overflow-' + args.overflow : ''}${args.overflowX
           ? ' overflow-x-' + args.overflowX
           : ''}${args.overflowY ? ' overflow-y-' + args.overflowY : ''}"
       >
diff --git a/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss b/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss
index 6c1ca1515f..7eacaa1299 100644
--- a/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss
+++ b/packages/documentation/src/stories/utilities/overflow/overflow.styles.scss
@@ -19,6 +19,10 @@
   }
 }
 
+.my-container {
+  background-color: post.$yellow;
+}
+
 // Snapshots
 .snapshot-container {
   width: 30rem;
diff --git a/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts b/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
index 9b4d17e3d2..6f42ddf356 100644
--- a/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
+++ b/packages/documentation/src/stories/utilities/position/position.snapshot.stories.ts
@@ -26,12 +26,14 @@ export const Position: Story = {
               return html`
                 <p>Position ${position}</p>
                 <div class="snapshot-outer-container">
-                  <div class="snapshot-container bg-gray m-0 position-relative">
-                    <div class="bg-dark"></div>
-                    <div class="bg-yellow position-${position} top-0 start-50">I'm ${position}</div>
-                    <div class="bg-dark"></div>
-                    <div class="bg-dark"></div>
-                    <div class="bg-dark"></div>
+                  <div class="snapshot-container m-0 position-relative">
+                    <div></div>
+                    <div class="my-element position-${position} top-0 start-50">
+                      I'm ${position}
+                    </div>
+                    <div></div>
+                    <div></div>
+                    <div></div>
                   </div>
                 </div>
               `;
@@ -48,7 +50,7 @@ export const Position: Story = {
               return html`
                 <p class="mt-12">${xArgName}: ${xArgValue}% / ${yArgName}: ${yArgValue}%</p>
                 <div class="snapshot-arrange-container">
-                  <div class="bg-info ${args.x} ${args.y}"></div>
+                  <div class="${args.x} ${args.y}"></div>
                 </div>
               `;
             })}
@@ -70,7 +72,7 @@ export const Position: Story = {
                   Translate middle: ${args.translateMiddle ? args.translateMiddle : 'none'}
                 </p>
                 <div class="snapshot-translate-middle-container">
-                  <div class="bg-yellow start-50 top-50 ${translateMiddleValue}"></div>
+                  <div class="start-50 top-50 ${translateMiddleValue}"></div>
                 </div>
               `;
             })}
diff --git a/packages/documentation/src/stories/utilities/position/position.stories.ts b/packages/documentation/src/stories/utilities/position/position.stories.ts
index 7c4532915a..08b91f9dca 100644
--- a/packages/documentation/src/stories/utilities/position/position.stories.ts
+++ b/packages/documentation/src/stories/utilities/position/position.stories.ts
@@ -108,11 +108,11 @@ const meta: MetaExtended = {
     }
     return html`
       <div
-        class="bg-yellow position-${args.position} ${args.top ? 'top-' + args.top : ''}${args.bottom
-          ? 'bottom-' + args.bottom
-          : ''} ${args.start ? 'start-' + args.start : ''}${args.end
-          ? 'end-' + args.end
-          : ''}${translateMiddleValue}"
+        class="my-element position-${args.position} ${args.top
+          ? 'top-' + args.top
+          : ''}${args.bottom ? 'bottom-' + args.bottom : ''} ${args.start
+          ? 'start-' + args.start
+          : ''}${args.end ? 'end-' + args.end : ''}${translateMiddleValue}"
       ></div>
     `;
   },
@@ -146,11 +146,10 @@ export const Default: Story = {
 
 export const TranslateMiddle: Story = {
   decorators: [
-    story =>
-      html` <div class="translate-middle-container position-relative bg-gray">${story()}</div> `,
+    story => html` <div class="translate-middle-container position-relative">${story()}</div> `,
   ],
   render: () => {
-    return html`<div class="position-absolute start-50 top-50 bg-yellow"></div>
-      <div class="position-absolute start-50 top-50 translate-middle bg-info"></div>`;
+    return html`<div class="position-absolute start-50 top-50"></div>
+      <div class="position-absolute start-50 top-50 translate-middle"></div>`;
   },
 };
diff --git a/packages/documentation/src/stories/utilities/position/position.styles.scss b/packages/documentation/src/stories/utilities/position/position.styles.scss
index 3f4769a3e7..79a80ce39e 100644
--- a/packages/documentation/src/stories/utilities/position/position.styles.scss
+++ b/packages/documentation/src/stories/utilities/position/position.styles.scss
@@ -25,10 +25,16 @@
 .translate-middle-container {
   height: 20rem;
   flex: 0 0 50%;
+  background-color: post.$gray;
   @include centered-dot();
 
   > * {
     @include square;
+    background-color: post.$yellow;
+
+    &.translate-middle {
+      background-color: post.$info;
+    }
   }
 }
 
@@ -53,7 +59,8 @@
       background-color: post.$dark;
     }
 
-    .bg-yellow {
+    .my-element {
+      background: post.$yellow;
       width: 2rem;
       height: 2rem;
       border-radius: post.$border-radius;
@@ -102,17 +109,22 @@
 .snapshot-container {
   height: 16rem;
   margin: 2rem;
+  background-color: post.$gray;
 
-  .bg-dark {
-    width: 2rem;
-    height: 2rem;
+  > * {
     border-radius: post.$border-radius;
-  }
 
-  .bg-yellow {
-    padding: 1rem;
-    display: inline-block;
-    border-radius: post.$border-radius;
+    &:not(.my-element) {
+      width: 2rem;
+      height: 2rem;
+      background-color: post.$dark;
+    }
+
+    &.my-element {
+      background-color: post.$yellow;
+      padding: 1rem;
+      display: inline-block;
+    }
   }
 }
 
@@ -130,6 +142,14 @@
   }
 }
 
+.snapshot-arrange-container > * {
+  background-color: post.$info;
+}
+
 .snapshot-translate-middle-container {
   @include centered-dot();
+
+  > * {
+    background-color: post.$yellow;
+  }
 }
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index bc53d3507d..7e093615a2 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -6,6 +6,7 @@ import SampleFontSize from './text-font-size.sample.scss?raw';
 import SampleFontWeight from './text-font-weight.sample.scss?raw';
 import SampleLineHeight from './text-line-height.sample.scss?raw';
 import SampleColor from './text-color.sample.scss?raw';
+import './text.styles.scss';
 
 <Meta of={TextStories} />
 
@@ -97,11 +98,6 @@ Define how text-blocks are displayed.
 
 ### Color
 
-<div className="banner banner-warning my-24">
-  The `.text-auto` class is deprecated since text color is now set by the{' '}
-  [backgrounds](/?path=/docs/60852fac-a861-4415-8276-bd38d68653bb--docs) themselves.
-</div>
-
 Colorize text with `.text-*` utility classes.
 To colorize links, use the `.link-*` classes instead as they also provide styling for the `:hover` and `:focus` states.
 
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index c580356f30..96372f13c9 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -63,12 +63,12 @@ export const TextAlign: Story = {
 
 export const TextWrapping: Story = {
   render: () => html`
-    <div class="w-50 bg-info">
+    <div class="my-container w-50">
       <p class="text-nowrap">
         This text should NOT wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
     </div>
-    <div class="w-50 bg-info text-nowrap">
+    <div class="my-container w-50 text-nowrap">
       <p class="text-wrap">
         This text should wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
@@ -78,7 +78,7 @@ export const TextWrapping: Story = {
 
 export const WordBreak: Story = {
   render: () => html`
-    <div class="w-50 bg-info">
+    <div class="my-container w-50">
       <p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
     </div>
   `,
diff --git a/packages/documentation/src/stories/utilities/text/text.styles.scss b/packages/documentation/src/stories/utilities/text/text.styles.scss
new file mode 100644
index 0000000000..509c0b15af
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/text/text.styles.scss
@@ -0,0 +1,5 @@
+@use '@swisspost/design-system-styles/core' as post;
+
+.my-container {
+  background-color: post.$info;
+}
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
index e9741bc70e..8f2669bd44 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar-with-searchbar/sidebar-with-searchbar.component.html
@@ -11,11 +11,11 @@
   <div class="site-content container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
index 0772621393..6b5b8ceb3a 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/src/samples/sidebar/sidebar.component.html
@@ -3,11 +3,11 @@
   <div class="container-fluid header-margin">
     <div class="row flex-grow-1">
       <nav
-        class="col-md-3 col-lg-2 d-md-flex bg-light sidebar site-content p-md-16"
+        class="col-md-3 col-lg-2 d-md-flex sidebar site-content p-md-16"
         id="sidebar"
         [ngClass]="{ closed: !openedMenu }"
       >
-        <div class="sidebar-sticky header-margin bg-light">
+        <div class="sidebar-sticky header-margin">
           <!-- left menu -->
           <ul>
             <li class="d-md-none">
diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx
index 5d0b4f9713..86ee385d3b 100644
--- a/packages/nextjs-integration/src/app/page.tsx
+++ b/packages/nextjs-integration/src/app/page.tsx
@@ -17,7 +17,7 @@ export default function Home() {
 
       <section>
         <h2 className="h4 mt-huge-r">Sendung Verfolgen</h2>
-        <form className="bg-yellow mt-16 py-16 px-32 d-flex gap-24">
+        <form className="palette-brand mt-16 py-16 px-32 d-flex gap-24">
           <PostIcon name="1010" className="fs-small-huge"></PostIcon>
           <div className="form-floating" style={{ minWidth: '50%' }}>
             <input
@@ -113,7 +113,7 @@ export default function Home() {
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
-              <div className="card-body bg-gray">
+              <div className="card-body palette-alternate">
                 <h3 className="card-title">Hier steckt mehr drin</h3>
                 <p className="card-text">Black-Week-Topangebote nicht verpassen</p>
                 <a href="#" className="btn btn-tertiary">
@@ -127,7 +127,7 @@ export default function Home() {
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
-              <div className="card-body bg-gray">
+              <div className="card-body palette-alternate">
                 <h3 className="card-title">Einfach easy frankieren</h3>
                 <p className="card-text">DigitalStamp: Mit der Post-App frankieren</p>
                 <a href="#" className="btn btn-tertiary">
@@ -141,7 +141,7 @@ export default function Home() {
           <div className="col-lg-4 col-sm-6 col-12 mb-16">
             <div className="card elevation-0">
               <Image width={400} height={200} className="card-img-top" src="/street.jpg" alt="" />
-              <div className="card-body bg-gray">
+              <div className="card-body palette-alternate">
                 <h3 className="card-title">Neue Briefmarken</h3>
                 <p className="card-text">Entdecken Sie jetzt Ihre liebsten Motive</p>
                 <a href="#" className="btn btn-tertiary">
@@ -166,7 +166,7 @@ export default function Home() {
           <PostTabHeader panel="two" data-tooltip-target="tooltip-two">
             Delivered
           </PostTabHeader>
-          <PostTooltip className="bg-yellow" id="tooltip-two">
+          <PostTooltip className="palette-brand" id="tooltip-two">
             👻
           </PostTooltip>
           <PostTabPanel name="two">
@@ -175,7 +175,7 @@ export default function Home() {
               <button className="btn btn-secondary" data-popover-target="popover-one">
                 See details
               </button>
-              <PostPopover id="popover-one" className="bg-primary" closeButtonCaption="close">
+              <PostPopover id="popover-one" className="palette-accent" closeButtonCaption="close">
                 <h3 className="h5 mt-0">Details for this content</h3>
                 <p>Here are some more details for this content.</p>
                 <div className="d-flex flex-row-reverse gap-16">
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
index 69061786fc..b2b7b9a9ca 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
+++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.html
@@ -1,21 +1,7 @@
 <h1 class="visually-hidden">PrimeNg data table showcase</h1>
-
 <div
   class="sticky-top border-bottom d-flex align-items-center justify-content-between py-16 mb-56"
-  [class.bg-white]="!hasDarkBackground"
-  [class.bg-dark]="hasDarkBackground"
 >
-  <div class="form-check form-switch">
-    <input
-      class="form-check-input"
-      type="checkbox"
-      role="switch"
-      id="bakgroundSwitch"
-      [(ngModel)]="hasDarkBackground"
-    />
-    <label class="form-check-label" for="bakgroundSwitch">Dark background</label>
-  </div>
-
   <fieldset class="btn-group" aria-label="Basic datatable style">
     <input
       type="radio"
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
index e44edab042..dea2bd6e33 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
+++ b/packages/styles-primeng-workspace/projects/styles-primeng-showcase/src/app/app.component.ts
@@ -19,7 +19,6 @@ interface Product {
 })
 export class AppComponent {
   @HostBinding('class') containerClasses = 'd-block container my-32 py-24';
-  @HostBinding('class.bg-dark') hasDarkBackground = false;
 
   datatableStyleClass = '';
 
diff --git a/packages/styles/src/components/badge.scss b/packages/styles/src/components/badge.scss
index 08c5ac9ecf..3a1ef96b67 100644
--- a/packages/styles/src/components/badge.scss
+++ b/packages/styles/src/components/badge.scss
@@ -3,6 +3,7 @@
 @use './../mixins/color' as color-mx;
 @use './../placeholders/badge' as badge-ph;
 @use './../variables/components/badge';
+@use './../variables/color';
 
 .badge {
   --post-badge-height: #{badge.$badge-height};
@@ -29,4 +30,11 @@
   &.badge-sm {
     @extend %badge-sm;
   }
+
+  // Add background options to the badge element only
+  @each $name, $color in color.$background-colors {
+    &.bg-#{$name} {
+      @include color-mx.colored-background($color);
+    }
+  }
 }
diff --git a/packages/styles/src/components/datepicker.scss b/packages/styles/src/components/datepicker.scss
index dc17321869..fc41252901 100644
--- a/packages/styles/src/components/datepicker.scss
+++ b/packages/styles/src/components/datepicker.scss
@@ -105,7 +105,7 @@ span.ngb-dp-navigation-chevron {
     height: 40px !important;
     line-height: 40px;
 
-    &.active:not(.bg-primary) {
+    &.active {
       outline: none;
     }
   }
@@ -129,10 +129,6 @@ span.ngb-dp-navigation-chevron {
   background-color: transparent;
 }
 
-.ngb-dp-day > .btn-light.bg-primary.text-white {
-  background-color: color.$yellow !important;
-}
-
 .ngb-dp-open {
   display: flex;
   align-items: center;
diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
index 48fcb3ace6..e34dd42ae8 100644
--- a/packages/styles/src/components/intranet-header/_sidebar.scss
+++ b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -14,6 +14,7 @@
   top: 0;
   bottom: 0;
   left: 0;
+  background-color: color.$light;
 
   flex: 1 0 auto;
   flex-direction: column;
@@ -92,6 +93,7 @@
     padding: spacing.$spacer 0;
     overflow-x: hidden;
     overflow-y: auto; // Scrollable contents if viewport is shorter than content.
+    background-color: color.$light;
 
     @include media-breakpoint-down(md) {
       bottom: auto;
diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss
index 835e957bc5..4c18c0b9f3 100644
--- a/packages/styles/src/components/tabs/_tab-title.scss
+++ b/packages/styles/src/components/tabs/_tab-title.scss
@@ -110,45 +110,3 @@
     }
   }
 }
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tab-title {
-      background-color: $color;
-
-      &.active {
-        background-color: $color;
-      }
-    }
-
-    .nav-item {
-      background-color: $color;
-    }
-  }
-}
-
-[class*='bg-'] .tab-title.active {
-  &:focus {
-    &::after {
-      background-color: rgba(255, 255, 255, 0.2);
-    }
-  }
-
-  // write supports for selectors this way: https://stackoverflow.com/a/62666132
-  // need to include * otherwise it throws build error
-  @supports #{'\selector(*:focus-visible)'} {
-    &:focus {
-      &::after {
-        background-color: unset;
-      }
-    }
-
-    // same styles as focus, can't use placeholder here because focus-visible can't be described outside of the support condition
-    &:focus-visible {
-      &::after {
-        background-color: rgba(255, 255, 255, 0.2);
-      }
-    }
-  }
-}
diff --git a/packages/styles/src/components/tabs/_tabs-wrapper.scss b/packages/styles/src/components/tabs/_tabs-wrapper.scss
index 2b5ccbf4bf..318bb7c0fe 100644
--- a/packages/styles/src/components/tabs/_tabs-wrapper.scss
+++ b/packages/styles/src/components/tabs/_tabs-wrapper.scss
@@ -61,12 +61,3 @@
 .tab-content {
   padding-top: spacing.$spacer;
 }
-
-// Careful, this generates a lot of code
-@each $key, $color in color.$background-colors {
-  .bg-#{$key} {
-    .tabs-wrapper {
-      background-color: $color;
-    }
-  }
-}
diff --git a/packages/styles/src/utilities/temp/_legacy.scss b/packages/styles/src/utilities/temp/_legacy.scss
index e6b757081f..4b4c0a8b3a 100644
--- a/packages/styles/src/utilities/temp/_legacy.scss
+++ b/packages/styles/src/utilities/temp/_legacy.scss
@@ -58,10 +58,3 @@ span.spacer {
 .no-toggle-arrow::after {
   display: none !important;
 }
-
-// Background Utility
-@each $name, $color in color.$background-colors {
-  .bg-#{$name} {
-    @include color-mx.colored-background($color);
-  }
-}

From 95f79834f963cbf80fab94ca4f1e48bac9fae8d1 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Tue, 17 Dec 2024 15:52:10 +0100
Subject: [PATCH 02/18] fix(styles): HCM banner icon color (#4304)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/quiet-dolls-lick.md                | 5 +++++
 packages/styles/src/mixins/_notification.scss | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/quiet-dolls-lick.md

diff --git a/.changeset/quiet-dolls-lick.md b/.changeset/quiet-dolls-lick.md
new file mode 100644
index 0000000000..929fe508ec
--- /dev/null
+++ b/.changeset/quiet-dolls-lick.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed icon color of banner in high contrast mode.
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index da218f342f..3d312d6ea1 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -111,6 +111,10 @@ tokens.$default-map: components.$post-banner;
   &:not(.no-icon)::before {
     @include icons-mx.icon($icon);
     color: $icon-color;
+
+    @include utilities-mx.high-contrast-mode {
+      color: CanvasText;
+    }
   }
 
   // Prevent flashing when using post-icon

From 53bcc2664b8e064fa50f2a58207afdb005399908 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Wed, 18 Dec 2024 08:52:46 +0100
Subject: [PATCH 03/18] chore(docs): added hint to not disable active chips
 (#4315)

---
 .changeset/quiet-pots-tickle.md                              | 5 +++++
 .../src/stories/components/chip/chip.stories.ts              | 3 ++-
 2 files changed, 7 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/quiet-pots-tickle.md

diff --git a/.changeset/quiet-pots-tickle.md b/.changeset/quiet-pots-tickle.md
new file mode 100644
index 0000000000..29d61ac9d0
--- /dev/null
+++ b/.changeset/quiet-pots-tickle.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added hint to not use active, disabled chips.
diff --git a/packages/documentation/src/stories/components/chip/chip.stories.ts b/packages/documentation/src/stories/components/chip/chip.stories.ts
index 6afc0eb00c..bfe043687c 100644
--- a/packages/documentation/src/stories/components/chip/chip.stories.ts
+++ b/packages/documentation/src/stories/components/chip/chip.stories.ts
@@ -74,7 +74,8 @@ const meta: MetaComponent = {
     },
     active: {
       name: 'Active',
-      description: 'If `true`, the chip is active.',
+      description:
+        'If `true`, the chip is active.<div className="mt-8 banner banner-info banner-sm">Disabling active chips can result in confusing or unexpected behavior and should be avoided.<br/>Please read our <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#disabled-state">disabled state accessibility guide</a>.</div>',
       if: {
         arg: 'type',
         eq: 'filter',

From 912198c9fefbc9ff9a23166b6a0421cc6b751110 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Wed, 18 Dec 2024 09:01:34 +0100
Subject: [PATCH 04/18] =?UTF-8?q?fix(styles):=20added=20hover=20color=20to?=
 =?UTF-8?q?=20=C2=B4post-accordion=C2=B4=20in=20HCM=20(#4316)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/violet-geckos-shave.md                    |  5 +++++
 .../post-accordion-item/post-accordion-item.scss     | 12 ++++--------
 2 files changed, 9 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/violet-geckos-shave.md

diff --git a/.changeset/violet-geckos-shave.md b/.changeset/violet-geckos-shave.md
new file mode 100644
index 0000000000..eccb818090
--- /dev/null
+++ b/.changeset/violet-geckos-shave.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added hover color to `post-accordion` in high contrast mode.
diff --git a/packages/components/src/components/post-accordion-item/post-accordion-item.scss b/packages/components/src/components/post-accordion-item/post-accordion-item.scss
index 0e4bc8249e..e5c7319221 100644
--- a/packages/components/src/components/post-accordion-item/post-accordion-item.scss
+++ b/packages/components/src/components/post-accordion-item/post-accordion-item.scss
@@ -21,6 +21,9 @@ tokens.$default-map: components.$post-accordion;
   }
   &:has(.accordion-button:hover)::after {
     border-color: tokens.get('accordion-hover-border');
+    @include utility-mx.high-contrast-mode() {
+      border-color: Highlight;
+    }
   }
 }
 
@@ -47,7 +50,6 @@ tokens.$default-map: components.$post-accordion;
     calc(
       tokens.get('accordion-header-padding-inline') + tokens.get('accordion-border-bottom-width')
     );
-  transition: accordion.$accordion-button-transition;
   cursor: pointer;
 
   &::before {
@@ -100,13 +102,7 @@ tokens.$default-map: components.$post-accordion;
   @include utility-mx.high-contrast-mode() {
     &:hover,
     &:focus-visible {
-      &:not(:disabled) {
-        outline: tokens.get('accordion-border-bottom-width') solid Highlight;
-      }
-    }
-
-    &:disabled {
-      opacity: 1 !important;
+      color: Highlight;
     }
   }
 }

From 004dbd4185fc18dc76510bf9d9e0ba482bc16e9f Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 19 Dec 2024 08:21:02 +0100
Subject: [PATCH 05/18] fix(documentation): width and height percentage sizing
 (#4328)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/good-spoons-tie.md                        |  6 ++++++
 .../src/stories/components/button/button.docs.mdx    |  2 +-
 .../components/card-control/card-control.docs.mdx    |  2 +-
 .../web-component/card-control.stories.ts            |  2 +-
 .../components/card-product/card-product.docs.mdx    |  2 +-
 .../components/card-product/card-product.stories.ts  | 10 +++++-----
 .../components/checkbox/checkbox.snapshot.stories.ts |  2 +-
 .../rating/post-rating.snapshot.stories.ts           |  8 ++++----
 .../segmented-button.snapshot.stories.ts             |  2 +-
 .../select-custom/select-custom-basic.sample.html    |  2 +-
 .../select-custom/select-custom-floating.sample.html |  2 +-
 .../src/stories/foundations/icons/icon.stories.ts    |  2 +-
 .../foundations/layout/columns/columns.stories.ts    |  2 +-
 .../foundations/typography/typography.blocks.tsx     | 12 ++++++------
 .../documentation/src/stories/introduction.docs.mdx  |  2 +-
 .../stories/utilities/elevation/elevation.stories.ts |  2 +-
 .../src/stories/utilities/text/text.stories.ts       |  6 +++---
 packages/nextjs-integration/src/app/page.tsx         | 12 ++++++------
 18 files changed, 42 insertions(+), 36 deletions(-)
 create mode 100644 .changeset/good-spoons-tie.md

diff --git a/.changeset/good-spoons-tie.md b/.changeset/good-spoons-tie.md
new file mode 100644
index 0000000000..757d40ce10
--- /dev/null
+++ b/.changeset/good-spoons-tie.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-nextjs-integration': patch
+'@swisspost/design-system-documentation': patch
+---
+
+Aligned `width` and `height` percentage classes, after utility update.
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 59f10871de..d8743a3ebb 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -38,7 +38,7 @@ To achieve that, you can use classes in the format:
 - `.w-{size}` for the xs breakpoint,
 - `.w-{breakpoint}-{size}` for breakpoints from sm to xl.
 
-For example, a button with classes `w-100 w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
+For example, a button with classes `w-full w-lg-auto` will use all available space only when the viewport size is smaller than `lg`.
 
 To learn more about breakpoints, see the <a href="/?path=/docs/20af6e2b-32b1-42ef-a187-b026aea7fe13--docs">Breakpoints documentation</a>.
 
diff --git a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
index 9cd2c98798..d163752e5c 100644
--- a/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
+++ b/packages/documentation/src/stories/components/card-control/card-control.docs.mdx
@@ -126,7 +126,7 @@ import SampleCardControlMethods from './web-component/card-control-methods.sampl
     ### Lined up
 
     Change the `width` of a `<card-control>` component, by putting it (for example) in a grid.
-    If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-100` to them.
+    If you like to stretch all `<card-control>` components within a row to the same `height`, simply add the class `.h-full` to them.
 
     <Canvas of={CardControlStories.LinedUp} />
     <div className="hide-col-default">
diff --git a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
index eb5f0a4275..f913fb1705 100644
--- a/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
+++ b/packages/documentation/src/stories/components/card-control/web-component/card-control.stories.ts
@@ -347,7 +347,7 @@ export const LinedUp: Story = {
           <div class="col-${12 / args.colCount}">
             ${Default.render?.(
               {
-                class: args.fullHeight ? 'h-100' : null,
+                class: args.fullHeight ? 'h-full' : null,
                 label: `Checkbox${i}`,
                 description: i === 6 ? '20.- per year' : null,
                 type: args.type,
diff --git a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx
index b1692e8273..a88c363129 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.docs.mdx
+++ b/packages/documentation/src/stories/components/card-product/card-product.docs.mdx
@@ -36,7 +36,7 @@ import ProductCardAngularSyncHeights from './card-product.sample.ts?raw';
 ### Product Card Group
 
 For organizing multiple product cards in a group, utilize the [grid system](/?path=/docs/7240f2ef-216a-490e-9bd8-c0cef19f7b31--docs).
-Ensure consistent height by applying the `.h-100` class to all product cards.
+Ensure consistent height by applying the `.h-full` class to all product cards.
 
 <Canvas of={ProductCardStories.Groupped} />
 
diff --git a/packages/documentation/src/stories/components/card-product/card-product.stories.ts b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
index 69ddfe4f01..624a9030da 100644
--- a/packages/documentation/src/stories/components/card-product/card-product.stories.ts
+++ b/packages/documentation/src/stories/components/card-product/card-product.stories.ts
@@ -134,7 +134,7 @@ export const Groupped: Story = {
     </div>
   `,
   args: {
-    cardClasses: ' h-100',
+    cardClasses: ' h-full',
   },
 };
 
@@ -224,11 +224,11 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body palette-alternate">
-            <button class="btn btn-secondary w-100 mb-12">
+            <button class="btn btn-secondary w-full mb-12">
               <span>Order Sample Product</span>
             </button>
 
-            <button class="btn btn-primary w-100">
+            <button class="btn btn-primary w-full">
               <span>Print Sample Product</span>
             </button>
           </div>
@@ -311,11 +311,11 @@ export const Multipart: Story = {
           </div>
 
           <div class="card-body palette-alternate">
-            <button class="btn btn-secondary w-100 mb-12">
+            <button class="btn btn-secondary w-full mb-12">
               <span>Order Sample Product</span>
             </button>
 
-            <button class="btn btn-primary w-100">
+            <button class="btn btn-primary w-full">
               <span>Print Sample Product</span>
             </button>
           </div>
diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
index a3bc447d70..ff4778d2c1 100644
--- a/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/checkbox/checkbox.snapshot.stories.ts
@@ -56,7 +56,7 @@ export const Checkbox: Story = {
               </span>
             `;
           })}
-          <div class="mt-32 w-100"></div>
+          <div class="mt-32 w-full"></div>
           ${Inline.render?.({ ...context.args, ...Inline.args }, context)}
         </div>
       `,
diff --git a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
index 6b43d11484..f4da0bc246 100644
--- a/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/rating/post-rating.snapshot.stories.ts
@@ -18,8 +18,8 @@ export const Rating: Story = {
     return schemes(
       () => html`
         <div class="d-flex gap-16 mb-16">
-          <div class="w-50 d-flex gap-4">readonly: false</div>
-          <div class="w-50 d-flex gap-4">readonly: true</div>
+          <div class="w-half d-flex gap-4">readonly: false</div>
+          <div class="w-half d-flex gap-4">readonly: true</div>
         </div>
         ${bombArgs({
           stars: [3, 5, 10],
@@ -30,10 +30,10 @@ export const Rating: Story = {
             (args: Args) =>
               html`
                 <div class="d-flex gap-16">
-                  <div class="w-50">
+                  <div class="w-half">
                     ${meta.render?.({ ...context.args, ...args, readonly: false }, context)}
                   </div>
-                  <div class="w-50">
+                  <div class="w-half">
                     ${meta.render?.({ ...context.args, ...args, readonly: true }, context)}
                   </div>
                 </div>
diff --git a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
index 309d2a5182..1045932fce 100644
--- a/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
+++ b/packages/documentation/src/stories/components/segmented-button/segmented-button.snapshot.stories.ts
@@ -18,7 +18,7 @@ export const SegmentedButton: Story = {
 
     return schemes(
       scheme => html`
-        <div class=" d-flex flex-column w-75 gap-16 p-16">
+        <div class=" d-flex flex-column w-three-quarters gap-16 p-16">
           ${labelCounts.map(count => {
             const labels = Array.from({ length: count }, (_, i) => `Label ${i + 1}`);
 
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
index 0a98a341b4..4ad7a02e91 100644
--- a/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
+++ b/packages/documentation/src/stories/components/select-custom/select-custom-basic.sample.html
@@ -12,7 +12,7 @@
     <span [class.visually-hidden]="selectedOption">Default custom-select</span>
     <span *ngIf="selectedOption" aria-hidden="true">{{ selectedOption.label }}</span>
   </button>
-  <div aria-labelledby="customSelectButton" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectButton" class="w-full max-w-full" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html b/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
index 3dbd83a857..53d1ba5daf 100644
--- a/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
+++ b/packages/documentation/src/stories/components/select-custom/select-custom-floating.sample.html
@@ -14,7 +14,7 @@
   <label class="form-label" id="customSelectLabel">
     Floatinglabel custom-select {{ infoText }}
   </label>
-  <div aria-labelledby="customSelectLabel" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectLabel" class="w-full max-w-full" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/foundations/icons/icon.stories.ts b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
index 6e4f636648..4065dbc5fe 100644
--- a/packages/documentation/src/stories/foundations/icons/icon.stories.ts
+++ b/packages/documentation/src/stories/foundations/icons/icon.stories.ts
@@ -229,7 +229,7 @@ const renderAnimateVariants = (args: Args, customAttrs: { name: string; animatio
     ${customAttrs.map(
       variantArgs =>
         html`
-          <div class="w-50 py-16">
+          <div class="w-half py-16">
             <p class="text-muted fs-tiny">Animation: ${variantArgs.animation}</p>
             <post-icon ${spread(normalizeArgs(args))} ${spread(variantArgs)}></post-icon>
           </div>
diff --git a/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts b/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
index e8b900a194..bd350c1c09 100644
--- a/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
+++ b/packages/documentation/src/stories/foundations/layout/columns/columns.stories.ts
@@ -244,7 +244,7 @@ export const ColumnBreakExample: Story = {
       ${args.renderBreakingElement
         ? html`
             <!-- Force next columns to break to new line -->
-            <div class="w-100"></div>
+            <div class="w-full"></div>
           `
         : nothing}
       <div class="col-3">.col-3</div>
diff --git a/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx b/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
index 7a605f2506..ecf9a056ca 100644
--- a/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
+++ b/packages/documentation/src/stories/foundations/typography/typography.blocks.tsx
@@ -50,7 +50,7 @@ export function FontSizesAndLineheights() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Name</th>
+            <th className="w-quarter">Name</th>
             <th>Class</th>
             <th>Scss variable</th>
             <th>Font Size</th>
@@ -125,7 +125,7 @@ export function Headings() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -190,7 +190,7 @@ export function Paragraphs() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -234,7 +234,7 @@ export function Links() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -284,7 +284,7 @@ export function Inlines() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
@@ -402,7 +402,7 @@ export function Lists() {
       <table className="table">
         <thead>
           <tr>
-            <th className="w-25">Tag</th>
+            <th className="w-quarter">Tag</th>
             <th>Visual</th>
           </tr>
         </thead>
diff --git a/packages/documentation/src/stories/introduction.docs.mdx b/packages/documentation/src/stories/introduction.docs.mdx
index efb493a5e2..b58e53ed0a 100644
--- a/packages/documentation/src/stories/introduction.docs.mdx
+++ b/packages/documentation/src/stories/introduction.docs.mdx
@@ -21,7 +21,7 @@ import { technologies } from './introduction.data';
     ))}
   </ul>
   <div className="mt-16 mb-16 d-flex gap-8 flex-wrap justify-content-center">
-    <div className="mt-32 mb-16 w-100">
+    <div className="mt-32 mb-16 w-full">
       <a
         className="btn btn-primary btn-lg"
         href="/?path=/docs/dfc70c3b-4726-406b-8a41-af5738c89d05--docs"
diff --git a/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
index 6d7231a49b..720a6574d7 100644
--- a/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
+++ b/packages/documentation/src/stories/utilities/elevation/elevation.stories.ts
@@ -15,5 +15,5 @@ export default meta;
 type Story = StoryObj;
 
 export const Default: Story = {
-  render: () => html` <div class="w-50 rounded p-16 elevation-5">I'm elevated!</div> `,
+  render: () => html` <div class="w-half rounded p-16 elevation-5">I'm elevated!</div> `,
 };
diff --git a/packages/documentation/src/stories/utilities/text/text.stories.ts b/packages/documentation/src/stories/utilities/text/text.stories.ts
index 96372f13c9..2499546b8b 100644
--- a/packages/documentation/src/stories/utilities/text/text.stories.ts
+++ b/packages/documentation/src/stories/utilities/text/text.stories.ts
@@ -63,12 +63,12 @@ export const TextAlign: Story = {
 
 export const TextWrapping: Story = {
   render: () => html`
-    <div class="my-container w-50">
+    <div class="my-container w-half">
       <p class="text-nowrap">
         This text should NOT wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
     </div>
-    <div class="my-container w-50 text-nowrap">
+    <div class="my-container w-half text-nowrap">
       <p class="text-wrap">
         This text should wrap, saepe excepturi quas nihil repudiandae eius assumenda voluptatem.
       </p>
@@ -78,7 +78,7 @@ export const TextWrapping: Story = {
 
 export const WordBreak: Story = {
   render: () => html`
-    <div class="my-container w-50">
+    <div class="my-container w-half">
       <p class="text-break">wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww</p>
     </div>
   `,
diff --git a/packages/nextjs-integration/src/app/page.tsx b/packages/nextjs-integration/src/app/page.tsx
index 86ee385d3b..8fe3fd197e 100644
--- a/packages/nextjs-integration/src/app/page.tsx
+++ b/packages/nextjs-integration/src/app/page.tsx
@@ -41,7 +41,7 @@ export default function Home() {
       <section className="mt-huge-r">
         <div className="row">
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2146" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">Umzug melden</p>
@@ -50,7 +50,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2026" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">Shop</p>
@@ -59,7 +59,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="3140" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -70,7 +70,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="2456" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -81,7 +81,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="1012" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">
@@ -92,7 +92,7 @@ export default function Home() {
           </div>
 
           <div className="col-xl-2 col-md-6">
-            <a href="#" className="card h-100 product-card">
+            <a href="#" className="card h-full product-card">
               <div className="card-body p-16 product-navigation justify-content-start d-flex flex-column align-items-center">
                 <PostIcon name="1024" className="fs-bigger-big"></PostIcon>
                 <p className="mt-8 text-center text-muted fs-regular fw-normal">

From 1e856c03844a8987dd4368cd1f106005a6daa91d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 08:42:42 +0100
Subject: [PATCH 06/18] fix(styles): refactor icons declarations (#3518)

---
 .changeset/warm-walls-stare.md                       | 5 +++++
 packages/styles/src/variables/components/_close.scss | 6 ++++--
 2 files changed, 9 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/warm-walls-stare.md

diff --git a/.changeset/warm-walls-stare.md b/.changeset/warm-walls-stare.md
new file mode 100644
index 0000000000..8ec7a47d0a
--- /dev/null
+++ b/.changeset/warm-walls-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Refactored icon declarations to comply with Angular 18's new build system requirements.
diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss
index c4e6a3d419..739415c0d9 100644
--- a/packages/styles/src/variables/components/_close.scss
+++ b/packages/styles/src/variables/components/_close.scss
@@ -15,7 +15,9 @@ $btn-close-width: spacing.$size-large !default;
 $btn-close-height: $btn-close-width !default;
 $btn-close-padding-x: spacing.$size-regular !default;
 $btn-close-color: color.$black !default;
-$btn-close-bg: url('#{icons.get-colored-svg-url('2043', $btn-close-color)}') !default;
-$btn-close-hcm-bg: url('#{icons.get-colored-svg-url('2043', color.$white)}') !default;
+$_btn-close-bg: icons.get-colored-svg-url(2043, $btn-close-color);
+$_btn-close-hcm-bg: icons.get-colored-svg-url(2043, color.$white);
+$btn-close-bg: url('#{$_btn-close-bg}') !default;
+$btn-close-hcm-bg: url('#{$_btn-close-hcm-bg}') !default;
 $btn-close-opacity: 0.5 !default;
 $btn-close-hover-opacity: 0.75 !default;

From c9145e83b62d3e06bd51230af1acb9c879b1bb05 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 19 Dec 2024 09:43:31 +0100
Subject: [PATCH 07/18] fix(components): add border top main navigation on
 mobile (#4301)

---
 .../components/src/components/post-header/post-header.scss | 4 ++++
 .../components/src/components/post-header/post-header.tsx  | 7 ++++++-
 .../components/post-megadropdown/post-megadropdown.scss    | 1 +
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/post-header/post-header.scss b/packages/components/src/components/post-header/post-header.scss
index cbded0ac45..2b22afd3ed 100644
--- a/packages/components/src/components/post-header/post-header.scss
+++ b/packages/components/src/components/post-header/post-header.scss
@@ -110,6 +110,10 @@ slot[name='post-logo'] {
     z-index: 1;
     inset-block-start: var(--global-header-height);
     padding-inline: var(--post-core-dimension-8) var(--post-core-dimension-16);
+
+    &.title-header-mobile-extended {
+      border-bottom: 1px solid var(--post-core-color-sandgrey-012);
+    }
   }
 }
 
diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 9e04361563..fa1d21ecb1 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -150,7 +150,12 @@ export class PostHeader {
             </div>
           </div>
         </div>
-        <div class="title-header d-flex space-between align-center">
+        <div
+          class={
+            'title-header d-flex space-between align-center ' +
+            (this.mobileMenuExtended ? 'title-header-mobile-extended' : '')
+          }
+        >
           <slot name="title"></slot>
           <div class="global-sub">
             <slot name="local-controls"></slot>
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index 3871f4d11c..c489f8c48b 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -45,6 +45,7 @@ post-popovercontainer {
     left: 0;
     width: 100%;
     height: auto;
+    border-top: unset;
 
     &.slide-in {
       animation: slide-in;

From e8d0d3676c4b4e1831a5071a9cc1d91b14a29f9b Mon Sep 17 00:00:00 2001
From: Philipp Gfeller <1659006+gfellerph@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:09:40 +0100
Subject: [PATCH 08/18] docs: add logo url for demo purposes (#4265)

---
 .../src/stories/modules/header/components/header.markup.ts      | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/documentation/src/stories/modules/header/components/header.markup.ts b/packages/documentation/src/stories/modules/header/components/header.markup.ts
index d6bf86c4f4..a20010f968 100644
--- a/packages/documentation/src/stories/modules/header/components/header.markup.ts
+++ b/packages/documentation/src/stories/modules/header/components/header.markup.ts
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 
 export default html`<post-header>
   <!-- Logo -->
-  <post-logo>Homepage</post-logo>
+  <post-logo url="/">Homepage</post-logo>
 
   <!-- Meta navigation -->
   <ul class="list-inline" slot="meta-navigation">

From aa7223fb0a089012416327390c6b73e2c6835bc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 10:29:51 +0100
Subject: [PATCH 09/18] fix(styles): added hover colors in hcm (#4331)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/four-jokes-tease.md                |  5 +++++
 packages/styles/src/components/button.scss    | 20 ++++++++++---------
 packages/styles/src/components/chip.scss      |  4 ++++
 .../src/components/form-search-input.scss     |  3 +++
 .../src/components/icon-close-button.scss     |  8 ++++++++
 5 files changed, 31 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/four-jokes-tease.md

diff --git a/.changeset/four-jokes-tease.md b/.changeset/four-jokes-tease.md
new file mode 100644
index 0000000000..8d7bcdf701
--- /dev/null
+++ b/.changeset/four-jokes-tease.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added hover styles in high contrast mode for the css components `Button`, `Chip`, `Form Search` and `Button Close`.
diff --git a/packages/styles/src/components/button.scss b/packages/styles/src/components/button.scss
index 0eaed65339..e19b8f19a2 100644
--- a/packages/styles/src/components/button.scss
+++ b/packages/styles/src/components/button.scss
@@ -57,17 +57,19 @@ tokens.$default-map: components.$post-button;
 
   // Styles  to improve accessibility in high contrast mode
   @include utilities.high-contrast-mode() {
-    border-color: ButtonBorder;
-    background-color: ButtonFace;
-
-    &:not(:disabled, .disabled) {
-      &:hover {
-        border-color: highlight;
+    &[class] {
+      border-color: ButtonBorder;
+      background-color: ButtonFace;
+
+      &:not(:disabled, .disabled) {
+        &:hover {
+          border-color: highlight;
+        }
       }
-    }
 
-    &:disabled {
-      border-color: GrayText !important;
+      &:disabled {
+        border-color: GrayText !important;
+      }
     }
   }
 }
diff --git a/packages/styles/src/components/chip.scss b/packages/styles/src/components/chip.scss
index 11e0c62038..9808a681ba 100644
--- a/packages/styles/src/components/chip.scss
+++ b/packages/styles/src/components/chip.scss
@@ -118,6 +118,10 @@
       color: chip.$chip-hover-color;
       background-color: chip.$chip-hover-bg;
 
+      @include utilities.high-contrast-mode() {
+        border-color: highlight;
+      }
+
       > .badge {
         background-color: chip.$chip-bg;
       }
diff --git a/packages/styles/src/components/form-search-input.scss b/packages/styles/src/components/form-search-input.scss
index f852b09a3c..8a0de94436 100644
--- a/packages/styles/src/components/form-search-input.scss
+++ b/packages/styles/src/components/form-search-input.scss
@@ -42,6 +42,9 @@ tokens.$default-map: components.$post-search-input;
     .search-button {
       post-icon {
         color: tokens.get('input-color-hover-fg', components.$post-text-input);
+        @include utilities.high-contrast-mode() {
+          color: Highlight;
+        }
       }
     }
   }
diff --git a/packages/styles/src/components/icon-close-button.scss b/packages/styles/src/components/icon-close-button.scss
index 8cf04ff0c1..1b0dbfcb30 100644
--- a/packages/styles/src/components/icon-close-button.scss
+++ b/packages/styles/src/components/icon-close-button.scss
@@ -15,6 +15,14 @@ tokens.$default-map: components.$post-close;
   background-color: tokens.get('close-enabled-bg');
   color: tokens.get('close-enabled-fg');
 
+  &:hover {
+    > post-icon {
+      @include utilities.high-contrast-mode() {
+        color: Highlight;
+      }
+    }
+  }
+
   > post-icon {
     min-width: tokens.get('close-icon-size');
     width: tokens.get('close-icon-size');

From 09afdbd89b83f408e935bc71d7668a78e3c3d64f Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 19 Dec 2024 11:26:04 +0100
Subject: [PATCH 10/18] fix(styles): HCM on form validation icons (#4319)

---
 .changeset/metal-geese-swim.md                |  5 ++
 .../styles/src/components/form-input.scss     |  8 +-
 .../styles/src/components/form-select.scss    | 76 ++++++++++++-------
 .../styles/src/components/form-textarea.scss  |  8 +-
 packages/styles/src/functions/_forms.scss     | 43 ++++++++++-
 packages/styles/src/mixins/_forms.scss        | 41 +++++-----
 packages/styles/src/mixins/_utilities.scss    | 14 ++++
 7 files changed, 133 insertions(+), 62 deletions(-)
 create mode 100644 .changeset/metal-geese-swim.md

diff --git a/.changeset/metal-geese-swim.md b/.changeset/metal-geese-swim.md
new file mode 100644
index 0000000000..7f3b1db1d5
--- /dev/null
+++ b/.changeset/metal-geese-swim.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed colors of validation icon in HCM on form elements.
diff --git a/packages/styles/src/components/form-input.scss b/packages/styles/src/components/form-input.scss
index c51862336e..8bbdcfc27e 100644
--- a/packages/styles/src/components/form-input.scss
+++ b/packages/styles/src/components/form-input.scss
@@ -192,13 +192,7 @@ input.form-control {
     }
   }
 
-  &.is-valid:not(:disabled) {
-    background-image: forms.$valid-icon;
-  }
-
-  &.is-invalid:not(:disabled) {
-    background-image: forms.$invalid-icon;
-  }
+  @include forms-mx.validation-icons;
 }
 
 .form-label:has(+ input.form-control[disabled]) {
diff --git a/packages/styles/src/components/form-select.scss b/packages/styles/src/components/form-select.scss
index b557ef2570..050c60efc5 100644
--- a/packages/styles/src/components/form-select.scss
+++ b/packages/styles/src/components/form-select.scss
@@ -1,10 +1,12 @@
 @forward './../variables/options';
 
 @use './../mixins/utilities';
-@use './../mixins/forms';
+@use './../functions/forms' as forms-fx;
+@use './../mixins/forms' as forms-mx;
 @use './../functions/tokens';
 @use './../tokens/components';
 @use './../tokens/elements';
+@use './../variables/components/forms';
 
 tokens.$default-map: components.$post-select;
 
@@ -26,7 +28,7 @@ tokens.$default-map: components.$post-select;
   border-color: tokens.get('select-color-enabled-border');
   border-radius: tokens.get('select-border-radius');
   color: tokens.get('select-color-enabled-fg');
-  @include forms.select-bg-image('enabled');
+  background-image: forms-fx.select-arrow-icon('enabled');
 
   &:disabled {
     opacity: 1;
@@ -36,7 +38,7 @@ tokens.$default-map: components.$post-select;
     border-style: tokens.get('select-border-style-disabled');
 
     &:not([multiple]) {
-      @include forms.select-bg-image('disabled');
+      background-image: forms-fx.select-arrow-icon('disabled');
     }
   }
 
@@ -45,7 +47,7 @@ tokens.$default-map: components.$post-select;
       background-color: tokens.get('select-color-selected-bg');
       color: tokens.get('select-color-selected-fg');
       border-color: tokens.get('select-color-selected-border');
-      @include forms.select-bg-image('selected');
+      background-image: forms-fx.select-arrow-icon('selected');
 
       @include utilities.focus-style;
 
@@ -60,7 +62,7 @@ tokens.$default-map: components.$post-select;
       border-color: tokens.get('select-color-hover-border');
 
       &:not([multiple]) {
-        @include forms.select-bg-image('hover');
+        background-image: forms-fx.select-arrow-icon('hover');
       }
 
       @include utilities.high-contrast-mode {
@@ -90,29 +92,53 @@ tokens.$default-map: components.$post-select;
   }
 
   &.is-valid:not(:disabled) {
-    @include forms.select-bg-image('enabled', 'valid');
+    background-image: forms-fx.select-arrow-icon('enabled'), forms.$valid-icon;
 
     &:focus {
-      @include forms.select-bg-image('selected', 'valid');
+      background-image: forms-fx.select-arrow-icon('selected'), forms.$valid-icon;
     }
 
     &:hover {
       &:not([multiple]) {
-        @include forms.select-bg-image('hover', 'valid');
+        background-image: forms-fx.select-arrow-icon('hover'), forms.$valid-icon;
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#e0e0e0');
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.valid-icon('#333333');
       }
     }
   }
 
   &.is-invalid:not(:disabled) {
-    @include forms.select-bg-image('enabled', 'invalid');
+    background-image: forms-fx.select-arrow-icon('enabled'), forms.$invalid-icon;
 
     &:focus {
-      @include forms.select-bg-image('selected', 'invalid');
+      background-image: forms-fx.select-arrow-icon('selected'), forms.$invalid-icon;
     }
 
     &:hover {
       &:not([multiple]) {
-        @include forms.select-bg-image('hover', 'invalid');
+        background-image: forms-fx.select-arrow-icon('hover'), forms.$invalid-icon;
+      }
+    }
+
+    &,
+    &:hover:not([multiple]),
+    &:focus {
+      @include utilities.high-contrast-mode-dark() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#e0e0e0');
+      }
+
+      @include utilities.high-contrast-mode-light() {
+        background-image: forms-fx.select-arrow-icon('enabled'), forms-fx.invalid-icon('#333333');
       }
     }
   }
@@ -126,13 +152,7 @@ tokens.$default-map: components.$post-select;
       background-position: center right tokens.get('select-validation-icon-position-inline-end');
     }
 
-    &.is-valid:not(:disabled) {
-      @include forms.select-bg-image($validation: 'valid');
-    }
-
-    &.is-invalid:not(:disabled) {
-      @include forms.select-bg-image($validation: 'invalid');
-    }
+    @include forms-mx.validation-icons();
   }
 }
 
@@ -224,43 +244,43 @@ tokens.$default-map: components.$post-select;
 
 [data-color-scheme='dark'] {
   .form-select:not([multiple]) {
-    @include forms.select-bg-image('enabled', null, 'dark');
+    background-image: forms-fx.select-arrow-icon('enabled', 'dark');
 
     &:disabled {
-      @include forms.select-bg-image('disabled', null, 'dark');
+      background-image: forms-fx.select-arrow-icon('disabled', 'dark');
     }
 
     &:not(:disabled) {
       &:focus {
-        @include forms.select-bg-image('selected', null, 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark');
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', null, 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark');
       }
     }
 
     &.is-valid:not(:disabled) {
-      @include forms.select-bg-image('enabled', 'valid', 'dark');
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$valid-icon;
 
       &:focus {
-        @include forms.select-bg-image('selected', 'valid', 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$valid-icon;
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', 'valid', 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$valid-icon;
       }
     }
 
     &.is-invalid:not(:disabled) {
-      @include forms.select-bg-image('enabled', 'invalid', 'dark');
+      background-image: forms-fx.select-arrow-icon('enabled', 'dark'), forms.$invalid-icon;
 
       &:focus {
-        @include forms.select-bg-image('selected', 'invalid', 'dark');
+        background-image: forms-fx.select-arrow-icon('selected', 'dark'), forms.$invalid-icon;
       }
 
       &:hover {
-        @include forms.select-bg-image('hover', 'invalid', 'dark');
+        background-image: forms-fx.select-arrow-icon('hover', 'dark'), forms.$invalid-icon;
       }
     }
   }
diff --git a/packages/styles/src/components/form-textarea.scss b/packages/styles/src/components/form-textarea.scss
index bec86c5fad..2f54dbed56 100644
--- a/packages/styles/src/components/form-textarea.scss
+++ b/packages/styles/src/components/form-textarea.scss
@@ -86,13 +86,7 @@ textarea.form-control {
     }
   }
 
-  &.is-valid:not(:disabled) {
-    background-image: forms.$valid-icon;
-  }
-
-  &.is-invalid:not(:disabled) {
-    background-image: forms.$invalid-icon;
-  }
+  @include forms-mx.validation-icons;
 }
 
 .form-label:has(+ textarea.form-control[disabled]) {
diff --git a/packages/styles/src/functions/_forms.scss b/packages/styles/src/functions/_forms.scss
index 183f1d7d2f..376831a38a 100644
--- a/packages/styles/src/functions/_forms.scss
+++ b/packages/styles/src/functions/_forms.scss
@@ -1,7 +1,12 @@
-// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
+@use 'sass:map';
+
 @use './color';
 @use '../functions/tokens';
+@use '../functions/icons';
+@use '../functions/utilities';
+@use '../variables/components/forms';
 
+// Source: https://kovart.github.io/dashed-border-generator/ + added stroke-vector-effect
 @function get-background-svg-stroke(
   $type,
   $color,
@@ -25,3 +30,39 @@
     $svg-additional-attributes + " fill='none' stroke='" + #{color.encode-uri-color($color)} + "' stroke-width='" +
     $stroke-width "' stroke-dasharray='" + $stroke-dasharray + "'" + $stroke-pathlength-attribute + ' /%3e%3c/svg%3e';
 }
+
+@function select-arrow-icon($state: null, $mode: 'light') {
+  // Hardcoded colors because CSS variables cannot be used as fill color of background-image
+  $arrow-color-map: (
+    'enabled-light': #050400,
+    'enabled-dark': #fff,
+    'hover-light': #504f4b,
+    'hover-dark': #fff,
+    'selected-light': #050400,
+    'selected-dark': #fff,
+    'disabled-light': #696864,
+    'disabled-dark': #fff,
+  );
+
+  @if ($state) {
+    $state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
+  }
+
+  @return $state;
+}
+
+@function encode-color($color) {
+  @return utilities.replace($color, '#', '%23');
+}
+
+@function valid-icon($color) {
+  $encoded-color: encode-color($color);
+  $icon: utilities.replace(forms.$valid-icon, '%23107800', $encoded-color);
+  @return $icon;
+}
+
+@function invalid-icon($color) {
+  $encoded-color: encode-color($color);
+  $icon: utilities.replace(forms.$invalid-icon, '%23B20000', $encoded-color);
+  @return $icon;
+}
diff --git a/packages/styles/src/mixins/_forms.scss b/packages/styles/src/mixins/_forms.scss
index 0854d6adf0..e22b4d2d62 100644
--- a/packages/styles/src/mixins/_forms.scss
+++ b/packages/styles/src/mixins/_forms.scss
@@ -2,6 +2,7 @@
 @use './../variables/components/forms';
 @use './../mixins/utilities';
 @use './../functions/icons';
+@use './../functions/forms' as forms-fx;
 @use './../functions/utilities' as utilities-fx;
 
 // Placeholder in input fields
@@ -30,29 +31,31 @@
   }
 }
 
-@mixin select-bg-image($state: null, $validation: null, $mode: 'light') {
-  // Hardcoded colors because CSS variables cannot be used as fill color of background-image
-  $arrow-color-map: (
-    'enabled-light': #050400,
-    'enabled-dark': #fff,
-    'hover-light': #504f4b,
-    'hover-dark': #fff,
-    'selected-light': #050400,
-    'selected-dark': #fff,
-    'disabled-light': #696864,
-    'disabled-dark': #fff,
-  );
+// Used on form elements to set the correct colored validation icon
+@mixin validation-icons() {
+  &.is-valid:not(:disabled) {
+    background-image: forms.$valid-icon;
 
-  @if ($validation == 'valid') {
-    $validation: forms.$valid-icon;
-  } @else if ($validation == 'invalid') {
-    $validation: forms.$invalid-icon;
+    @include utilities.high-contrast-mode-dark() {
+      background-image: forms-fx.valid-icon('#e0e0e0');
+    }
+
+    @include utilities.high-contrast-mode-light() {
+      background-image: forms-fx.valid-icon('#333333');
+    }
   }
 
-  @if ($state) {
-    $state: url('#{icons.get-colored-svg-url('2052', map.get($arrow-color-map, '#{$state}-#{$mode}'))}');
+  &.is-invalid:not(:disabled) {
+    background-image: forms.$invalid-icon;
+
+    @include utilities.high-contrast-mode-dark() {
+      background-image: forms-fx.invalid-icon('#e0e0e0');
+    }
+
+    @include utilities.high-contrast-mode-light() {
+      background-image: forms-fx.invalid-icon('#333333');
+    }
   }
-  background-image: $state, $validation;
 }
 
 @mixin textarea-resizer-svg($color) {
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 4eb10fd3a0..71cc9442aa 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -82,6 +82,20 @@
   }
 }
 
+@mixin high-contrast-mode-dark() {
+  @media (forced-colors: active) and (prefers-color-scheme: dark),
+    (-ms-high-contrast: white-on-black) {
+    @content;
+  }
+}
+
+@mixin high-contrast-mode-light() {
+  @media (forced-colors: active) and (prefers-color-scheme: light),
+    (-ms-high-contrast: black-on-white) {
+    @content;
+  }
+}
+
 @mixin not-disabled-focus-hover {
   &:focus,
   &:not(:disabled):hover,

From 3ac91be052e6f1799b188f2863fd181019f80076 Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:50:11 +0200
Subject: [PATCH 11/18] chore(components): close header megadropdown onfocusout
 (#4324)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/real-phones-scream.md                       |  5 +++++
 .../components/post-megadropdown/post-megadropdown.tsx | 10 +++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/real-phones-scream.md

diff --git a/.changeset/real-phones-scream.md b/.changeset/real-phones-scream.md
new file mode 100644
index 0000000000..76b359853e
--- /dev/null
+++ b/.changeset/real-phones-scream.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Modified header megadropdown to close when focus is moved outside.
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
index 03d0ff5db9..0ccbc975d6 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.tsx
@@ -80,6 +80,14 @@ export class PostMegadropdown {
     this.popoverRef.hide();
   }
 
+  private handleFocusout(event: FocusEvent) {
+    const relatedTarget = event.relatedTarget as HTMLElement;
+    const megadropdown= this.popoverRef.querySelector('.megadropdown');
+    if (!megadropdown.contains(relatedTarget)) {
+      this.hide();
+    }
+  }
+
   render() {
     return (
       <Host>
@@ -89,7 +97,7 @@ export class PostMegadropdown {
           edge-gap="0"
           ref={el => (this.popoverRef = el)}
         >
-          <div class="megadropdown">
+          <div class="megadropdown" onFocusout={e => this.handleFocusout(e)}>
             <div onClick={() => this.handleBackButtonClick()} class="back-button">
               <slot name="back-button"></slot>
             </div>

From d4b578d7ea82d7592e3306ce2835a0fae69034ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:39:17 +0100
Subject: [PATCH 12/18] chore(components, docs): removed auto slotting from
 post-logo (#4345)

---
 .changeset/big-maps-pay.md                                   | 5 +++++
 .changeset/nice-beans-impress.md                             | 5 +++++
 packages/components/src/components/post-logo/post-logo.tsx   | 2 +-
 packages/components/src/index.html                           | 2 +-
 .../src/stories/modules/header/components/header.markup.ts   | 2 +-
 5 files changed, 13 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/big-maps-pay.md
 create mode 100644 .changeset/nice-beans-impress.md

diff --git a/.changeset/big-maps-pay.md b/.changeset/big-maps-pay.md
new file mode 100644
index 0000000000..abaf495264
--- /dev/null
+++ b/.changeset/big-maps-pay.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated header documentation by specifying `post-logo` slot explicitly.
diff --git a/.changeset/nice-beans-impress.md b/.changeset/nice-beans-impress.md
new file mode 100644
index 0000000000..811fe3119b
--- /dev/null
+++ b/.changeset/nice-beans-impress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed auto slotting from `post-logo` component to enable more flexible usage.
diff --git a/packages/components/src/components/post-logo/post-logo.tsx b/packages/components/src/components/post-logo/post-logo.tsx
index 313cb0389d..d5ba21c1da 100644
--- a/packages/components/src/components/post-logo/post-logo.tsx
+++ b/packages/components/src/components/post-logo/post-logo.tsx
@@ -41,7 +41,7 @@ export class PostLogo {
     const LogoTag = logoLink ? 'a' : 'span';
 
     return (
-      <Host data-version={version} slot="post-logo">
+      <Host data-version={version}>
         <LogoTag class="logo" {...(logoLink ? { href: logoLink } : {})}>
           <span class="description">
             <slot onSlotchange={() => this.checkDescription()}></slot>
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index 60605cbfb7..a4f12a2ccc 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -18,7 +18,7 @@
   <body style="min-height: 200vh">
     <post-header>
       <!-- Logo -->
-      <post-logo>Homepage</post-logo>
+      <post-logo slot="post-logo">Homepage</post-logo>
 
       <!-- Meta navigation -->
       <ul class="list-inline" slot="meta-navigation">
diff --git a/packages/documentation/src/stories/modules/header/components/header.markup.ts b/packages/documentation/src/stories/modules/header/components/header.markup.ts
index a20010f968..a892d2ab9a 100644
--- a/packages/documentation/src/stories/modules/header/components/header.markup.ts
+++ b/packages/documentation/src/stories/modules/header/components/header.markup.ts
@@ -2,7 +2,7 @@ import { html } from 'lit-html';
 
 export default html`<post-header>
   <!-- Logo -->
-  <post-logo url="/">Homepage</post-logo>
+  <post-logo slot="post-logo" url="/">Homepage</post-logo>
 
   <!-- Meta navigation -->
   <ul class="list-inline" slot="meta-navigation">

From 9f1e888997429beeba030b3fbf43e06a47f70fdb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 12:39:31 +0100
Subject: [PATCH 13/18] chore(components): added type=button to prevent form
 submission (#4332)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Alizé Debray <33580481+alizedebray@users.noreply.github.com>
---
 .changeset/early-baboons-cross.md                            | 5 +++++
 .../src/components/post-closebutton/post-closebutton.tsx     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/early-baboons-cross.md

diff --git a/.changeset/early-baboons-cross.md b/.changeset/early-baboons-cross.md
new file mode 100644
index 0000000000..2d21811616
--- /dev/null
+++ b/.changeset/early-baboons-cross.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Added a `type="button"` attribute to the `post-close-button` to prevent it from submitting forms.
diff --git a/packages/components/src/components/post-closebutton/post-closebutton.tsx b/packages/components/src/components/post-closebutton/post-closebutton.tsx
index 0d447ab844..fbd679d15c 100644
--- a/packages/components/src/components/post-closebutton/post-closebutton.tsx
+++ b/packages/components/src/components/post-closebutton/post-closebutton.tsx
@@ -14,7 +14,7 @@ export class PostClosebutton {
   render() {
     return (
       <Host data-version={version}>
-        <button class="btn btn-icon-close">
+        <button class="btn btn-icon-close" type="button">
           <post-icon aria-hidden="true" name="closex"></post-icon>
           <span class="visually-hidden">
             <slot></slot>

From 65ebf3dde71106e5f29080e49f1adeede04eaf60 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 13:40:25 +0100
Subject: [PATCH 14/18] chore(components, docs): removed auto slotting from
 post-togglebutton (#4346)

---
 .changeset/early-knives-own.md                               | 5 +++++
 .changeset/smooth-spoons-matter.md                           | 5 +++++
 .../src/components/post-togglebutton/post-togglebutton.tsx   | 1 -
 packages/components/src/index.html                           | 2 +-
 .../src/stories/modules/header/components/header.markup.ts   | 2 +-
 5 files changed, 12 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/early-knives-own.md
 create mode 100644 .changeset/smooth-spoons-matter.md

diff --git a/.changeset/early-knives-own.md b/.changeset/early-knives-own.md
new file mode 100644
index 0000000000..a9957352a8
--- /dev/null
+++ b/.changeset/early-knives-own.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed auto slotting from `post-togglebutton` component to enable more flexible usage.
diff --git a/.changeset/smooth-spoons-matter.md b/.changeset/smooth-spoons-matter.md
new file mode 100644
index 0000000000..81dd15621a
--- /dev/null
+++ b/.changeset/smooth-spoons-matter.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated header documentation by specifying `post-togglebutton` slot explicitly.
diff --git a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
index b0eb329d9d..ac8d98375b 100644
--- a/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
+++ b/packages/components/src/components/post-togglebutton/post-togglebutton.tsx
@@ -51,7 +51,6 @@ export class PostTogglebutton {
   render() {
     return (
       <Host
-        slot="post-togglebutton"
         data-version={version}
         role="button"
         tabindex="0"
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index a4f12a2ccc..8bffd715bf 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -27,7 +27,7 @@
       </ul>
 
       <!-- Menu button for mobile -->
-      <post-togglebutton>
+      <post-togglebutton slot="post-togglebutton">
         <span class="visually-hidden-sm">Menu</span>
         <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
         <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>
diff --git a/packages/documentation/src/stories/modules/header/components/header.markup.ts b/packages/documentation/src/stories/modules/header/components/header.markup.ts
index a892d2ab9a..43542e2c62 100644
--- a/packages/documentation/src/stories/modules/header/components/header.markup.ts
+++ b/packages/documentation/src/stories/modules/header/components/header.markup.ts
@@ -11,7 +11,7 @@ export default html`<post-header>
   </ul>
 
   <!-- Menu button for mobile -->
-  <post-togglebutton>
+  <post-togglebutton slot="post-togglebutton">
     <span class="visually-hidden-sm">Menu</span>
     <post-icon aria-hidden="true" name="burger" data-showWhen="untoggled"></post-icon>
     <post-icon aria-hidden="true" name="closex" data-showWhen="toggled"></post-icon>

From 53267852ccc31b350070b99bed8be675f46a149d Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:29:13 +0200
Subject: [PATCH 15/18] chore(components): disable focus when accordion item
 collapsed (#4309)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/wicked-scissors-buy.md                            | 5 +++++
 .../src/components/post-collapsible/post-collapsible.tsx     | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/wicked-scissors-buy.md

diff --git a/.changeset/wicked-scissors-buy.md b/.changeset/wicked-scissors-buy.md
new file mode 100644
index 0000000000..79950fb357
--- /dev/null
+++ b/.changeset/wicked-scissors-buy.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Removed focus from collapsible when in collapsed state.
diff --git a/packages/components/src/components/post-collapsible/post-collapsible.tsx b/packages/components/src/components/post-collapsible/post-collapsible.tsx
index e44c2d25c2..424fc8ebbb 100644
--- a/packages/components/src/components/post-collapsible/post-collapsible.tsx
+++ b/packages/components/src/components/post-collapsible/post-collapsible.tsx
@@ -96,7 +96,7 @@ export class PostCollapsible {
 
   render() {
     return (
-      <Host data-version={version}>
+      <Host data-version={version} tabindex={this.collapsed ? -1 : undefined}>
         <slot />
       </Host>
     );

From 7508c15be88509b20c4be248b2e8b268743ea8af Mon Sep 17 00:00:00 2001
From: Alona Zherdetska <138328641+alionazherdetska@users.noreply.github.com>
Date: Thu, 19 Dec 2024 14:54:21 +0100
Subject: [PATCH 16/18] fix(style): applied styles to the links and icon-btns
 in the Composible Footer for HCM (#4333)

---
 .changeset/fresh-schools-peel.md              |  5 +++++
 .../src/components/globals/post-footer.scss   | 19 +++++++++++++++++++
 2 files changed, 24 insertions(+)
 create mode 100644 .changeset/fresh-schools-peel.md

diff --git a/.changeset/fresh-schools-peel.md b/.changeset/fresh-schools-peel.md
new file mode 100644
index 0000000000..23adcd9eb2
--- /dev/null
+++ b/.changeset/fresh-schools-peel.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Added styles for text links and icon-buttons for Composible Footer in HCM.
\ No newline at end of file
diff --git a/packages/styles/src/components/globals/post-footer.scss b/packages/styles/src/components/globals/post-footer.scss
index 087415d8ab..47eb5033a5 100644
--- a/packages/styles/src/components/globals/post-footer.scss
+++ b/packages/styles/src/components/globals/post-footer.scss
@@ -1,6 +1,7 @@
 @use '../../variables/color';
 @use '../../mixins/media';
 @use '../../mixins/list';
+@use '../../mixins/utilities';
 
 post-footer {
   // mobile
@@ -37,6 +38,24 @@ post-footer {
     &:not(.btn-icon, .app-store-badge) {
       display: block;
       text-decoration: none;
+
+      &:hover {
+        @include utilities.high-contrast-mode() {
+          text-decoration: underline;
+        }
+      }
+    }
+
+    &.btn-icon {
+      @include utilities.high-contrast-mode() {
+        color: CanvasText !important;
+      }
+
+      &:hover {
+        @include utilities.high-contrast-mode() {
+          color: LinkText !important;
+        }
+      }
     }
   }
 

From 277ef0d4c2ed8cbdcdbca5564b8ce9ab40ebf306 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tim=20Sch=C3=A4r?=
 <59233938+schaertim@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:38:02 +0100
Subject: [PATCH 17/18] fix(styles): Form-switch label alignment on mobile
 (#4314)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/flat-badgers-fly.md             | 5 +++++
 packages/styles/src/components/switch.scss | 1 +
 2 files changed, 6 insertions(+)
 create mode 100644 .changeset/flat-badgers-fly.md

diff --git a/.changeset/flat-badgers-fly.md b/.changeset/flat-badgers-fly.md
new file mode 100644
index 0000000000..6e60585de5
--- /dev/null
+++ b/.changeset/flat-badgers-fly.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed alignment of ´form-switch´ label.
diff --git a/packages/styles/src/components/switch.scss b/packages/styles/src/components/switch.scss
index 566afada11..52095498ec 100644
--- a/packages/styles/src/components/switch.scss
+++ b/packages/styles/src/components/switch.scss
@@ -198,6 +198,7 @@ $switch-handle-icon: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='htt
 
   .form-check-label {
     color: tokens.get('switch-text-enabled-fg');
+    padding-block: tokens.get('switch-padding-block-container-text');
 
     &.order-first {
       flex: 0 auto;

From 85297d34cebbe968f6988035f5932a50229ab18f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Thu, 19 Dec 2024 15:54:59 +0100
Subject: [PATCH 18/18] =?UTF-8?q?chore(components):=20update=20the=20post-?=
 =?UTF-8?q?menu=20to=20be=20usable=20inside=20other=20com=E2=80=A6=20(#433?=
 =?UTF-8?q?7)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

…ponents
---
 .../post-menu-item/post-menu-item.scss        |  3 --
 .../post-menu-item/post-menu-item.tsx         |  6 +--
 .../src/components/post-menu/post-menu.scss   |  7 ++-
 .../src/components/post-menu/post-menu.tsx    | 44 ++++++++++++-------
 ...focusable.ts => get-focusable-children.ts} |  5 ++-
 packages/components/src/utils/get-root.ts     |  2 +-
 6 files changed, 39 insertions(+), 28 deletions(-)
 delete mode 100644 packages/components/src/components/post-menu-item/post-menu-item.scss
 rename packages/components/src/utils/{is-focusable.ts => get-focusable-children.ts} (74%)

diff --git a/packages/components/src/components/post-menu-item/post-menu-item.scss b/packages/components/src/components/post-menu-item/post-menu-item.scss
deleted file mode 100644
index f09d32524a..0000000000
--- a/packages/components/src/components/post-menu-item/post-menu-item.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-:host {
-    display: block;
-}
\ No newline at end of file
diff --git a/packages/components/src/components/post-menu-item/post-menu-item.tsx b/packages/components/src/components/post-menu-item/post-menu-item.tsx
index b4c7de0469..5f6685d5d9 100644
--- a/packages/components/src/components/post-menu-item/post-menu-item.tsx
+++ b/packages/components/src/components/post-menu-item/post-menu-item.tsx
@@ -1,14 +1,10 @@
-import { Component, h, Element, Host } from '@stencil/core';
+import { Component, h, Host } from '@stencil/core';
 import { version } from '@root/package.json';
 
 @Component({
   tag: 'post-menu-item',
-  shadow: true,
-  styleUrl: 'post-menu-item.scss',
 })
 export class PostMenuItem {
-  @Element() host: HTMLPostMenuItemElement;
-  
   render() {
     return (
       <Host role="menuitem" data-version={version}>
diff --git a/packages/components/src/components/post-menu/post-menu.scss b/packages/components/src/components/post-menu/post-menu.scss
index 95b15284b7..d207ad3f3d 100644
--- a/packages/components/src/components/post-menu/post-menu.scss
+++ b/packages/components/src/components/post-menu/post-menu.scss
@@ -8,4 +8,9 @@ post-popovercontainer {
   padding: var(--post-menu-padding);
   background-color: var(--post-menu-bg, #ffffff);
   border-color: var(--post-menu-bg, #ffffff);
-}
\ No newline at end of file
+}
+
+.popover-container {
+  display: flex;
+  flex-direction: column;
+}
diff --git a/packages/components/src/components/post-menu/post-menu.tsx b/packages/components/src/components/post-menu/post-menu.tsx
index 865a24a729..775c831172 100644
--- a/packages/components/src/components/post-menu/post-menu.tsx
+++ b/packages/components/src/components/post-menu/post-menu.tsx
@@ -1,7 +1,17 @@
-import { Component, Element, Event, EventEmitter, h, Host, Method, Prop, State } from '@stencil/core';
+import {
+  Component,
+  Element,
+  Event,
+  EventEmitter,
+  h,
+  Host,
+  Method,
+  Prop,
+  State,
+} from '@stencil/core';
 import { Placement } from '@floating-ui/dom';
 import { version } from '@root/package.json';
-import { isFocusable } from '@/utils/is-focusable';
+import { getFocusableChildren } from '@/utils/get-focusable-children';
 import { getRoot } from '@/utils';
 
 @Component({
@@ -76,7 +86,7 @@ export class PostMenu {
 
   /**
    * Displays the popover menu, focusing the first menu item.
-   * 
+   *
    * @param target - The HTML element relative to which the popover menu should be displayed.
    */
   @Method()
@@ -131,12 +141,15 @@ export class PostMenu {
 
   private controlKeyDownHandler(e: KeyboardEvent) {
     const menuItems = this.getSlottedItems();
+
     if (!menuItems.length) {
       return;
     }
 
-    const currentFocusedElement = this.root.activeElement as HTMLElement; // Use root's activeElement
-    let currentIndex = menuItems.findIndex(el => el === currentFocusedElement);
+    let currentIndex = menuItems.findIndex(el => {
+      // Check if the item is currently focused within its rendered scope (document or shadow root)
+      return el === getRoot(el).activeElement;
+    });
 
     switch (e.key) {
       case this.KEYCODES.UP:
@@ -169,20 +182,19 @@ export class PostMenu {
     }
   }
 
-  private getSlottedItems() {
+  private getSlottedItems(): Element[] {
     const slot = this.host.shadowRoot.querySelector('slot');
     const slottedElements = slot ? slot.assignedElements() : [];
 
-    const menuItems = slottedElements
-      .filter(el => el.tagName === 'POST-MENU-ITEM')
-      .map(el => {
-        const slot = el.shadowRoot.querySelector('slot');
-        const assignedElements = slot ? slot.assignedElements() : [];
-        return assignedElements.filter(isFocusable);
-      })
-      .flat();
-
-    return menuItems;
+    return (
+      slottedElements
+        // If the element is a slot, get the assigned elements
+        .flatMap(el => (el instanceof HTMLSlotElement ? el.assignedElements() : el))
+        // Filter out elements that have a 'menuitem' role
+        .filter(el => el.getAttribute('role') === 'menuitem')
+        // For each menu item, get any focusable children (e.g., buttons, links)
+        .flatMap(el => Array.from(getFocusableChildren(el)))
+    );
   }
 
   render() {
diff --git a/packages/components/src/utils/is-focusable.ts b/packages/components/src/utils/get-focusable-children.ts
similarity index 74%
rename from packages/components/src/utils/is-focusable.ts
rename to packages/components/src/utils/get-focusable-children.ts
index 66aa7d74dc..12a33efc02 100644
--- a/packages/components/src/utils/is-focusable.ts
+++ b/packages/components/src/utils/get-focusable-children.ts
@@ -21,8 +21,9 @@ const focusDisablingSelector = `:where(${[
   '[popover]:not(:popover-open) *',
   'details:not([open]) > *:not(details > summary:first-of-type)',
   'details:not([open]) > *:not(details > summary:first-of-type) *',
+  '[tabindex^="-"]',
 ].join(',')})`;
 
-export const isFocusable = (element: Element) => {
-  return element?.matches(focusableSelector) && !element?.matches(focusDisablingSelector);
+export const getFocusableChildren = (element: Element): NodeListOf<HTMLElement> => {
+  return element.querySelectorAll(`& > ${focusableSelector}:not(${focusDisablingSelector})`);
 };
diff --git a/packages/components/src/utils/get-root.ts b/packages/components/src/utils/get-root.ts
index 0c84953d8c..ad33d956ab 100644
--- a/packages/components/src/utils/get-root.ts
+++ b/packages/components/src/utils/get-root.ts
@@ -1,4 +1,4 @@
-export function getRoot(element: HTMLElement): Document | ShadowRoot {
+export function getRoot(element: Element): Document | ShadowRoot {
   const root = element.getRootNode();
 
   if (root instanceof Document || root instanceof ShadowRoot) {