From a3ce33d0b72020afd8258d37d71f0d007adc6c30 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 13 Dec 2024 14:57:54 +0100
Subject: [PATCH 01/30] fix(documentation): move internet-header, footer and
 breadcrumbs to raw-components and new header to modules (#4258)

---
 packages/documentation/.storybook/manager.ts                    | 1 +
 .../{header => }/language-switch/language-switch.docs.mdx       | 0
 .../language-switch/language-switch.snapshot.stories.ts         | 0
 .../{header => }/language-switch/language-switch.stories.ts     | 2 +-
 .../header/components/header.markup.ts                          | 0
 .../stories/{raw-components => modules}/header/header.docs.mdx  | 0
 .../{raw-components => modules}/header/header.stories.ts        | 2 +-
 .../stories/raw-components/breadcrumbs/breadcrumbs.stories.ts   | 2 +-
 .../src/stories/raw-components/footer/footer.stories.ts         | 2 +-
 .../internet-header/config/custom-config.ts                     | 0
 .../internet-header/config/language-switch-overrides.ts         | 0
 .../internet-header/config/os-flyout-overrides.ts               | 0
 .../internet-header/header.docs.mdx                             | 0
 .../{components => raw-components}/internet-header/header.scss  | 0
 .../internet-header/header.stories.ts                           | 2 +-
 15 files changed, 6 insertions(+), 5 deletions(-)
 rename packages/documentation/src/stories/components/{header => }/language-switch/language-switch.docs.mdx (100%)
 rename packages/documentation/src/stories/components/{header => }/language-switch/language-switch.snapshot.stories.ts (100%)
 rename packages/documentation/src/stories/components/{header => }/language-switch/language-switch.stories.ts (98%)
 rename packages/documentation/src/stories/{raw-components => modules}/header/components/header.markup.ts (100%)
 rename packages/documentation/src/stories/{raw-components => modules}/header/header.docs.mdx (100%)
 rename packages/documentation/src/stories/{raw-components => modules}/header/header.stories.ts (94%)
 rename packages/documentation/src/stories/{components => raw-components}/internet-header/config/custom-config.ts (100%)
 rename packages/documentation/src/stories/{components => raw-components}/internet-header/config/language-switch-overrides.ts (100%)
 rename packages/documentation/src/stories/{components => raw-components}/internet-header/config/os-flyout-overrides.ts (100%)
 rename packages/documentation/src/stories/{components => raw-components}/internet-header/header.docs.mdx (100%)
 rename packages/documentation/src/stories/{components => raw-components}/internet-header/header.scss (100%)
 rename packages/documentation/src/stories/{components => raw-components}/internet-header/header.stories.ts (99%)

diff --git a/packages/documentation/.storybook/manager.ts b/packages/documentation/.storybook/manager.ts
index c52ce3e90d..ec30bb63de 100644
--- a/packages/documentation/.storybook/manager.ts
+++ b/packages/documentation/.storybook/manager.ts
@@ -17,6 +17,7 @@ addons.setConfig({
       'layout',
       'raw-components',
       'components',
+      'modules',
       'utilities',
       'templates',
       'guidelines',
diff --git a/packages/documentation/src/stories/components/header/language-switch/language-switch.docs.mdx b/packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/header/language-switch/language-switch.docs.mdx
rename to packages/documentation/src/stories/components/language-switch/language-switch.docs.mdx
diff --git a/packages/documentation/src/stories/components/header/language-switch/language-switch.snapshot.stories.ts b/packages/documentation/src/stories/components/language-switch/language-switch.snapshot.stories.ts
similarity index 100%
rename from packages/documentation/src/stories/components/header/language-switch/language-switch.snapshot.stories.ts
rename to packages/documentation/src/stories/components/language-switch/language-switch.snapshot.stories.ts
diff --git a/packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts b/packages/documentation/src/stories/components/language-switch/language-switch.stories.ts
similarity index 98%
rename from packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts
rename to packages/documentation/src/stories/components/language-switch/language-switch.stories.ts
index 013f6d01d9..e3cb30133e 100644
--- a/packages/documentation/src/stories/components/header/language-switch/language-switch.stories.ts
+++ b/packages/documentation/src/stories/components/language-switch/language-switch.stories.ts
@@ -4,7 +4,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent<HTMLPostLanguageSwitchElement> = {
   id: 'decbb10c-2b39-4f47-b67d-337d8111a3ae',
-  title: 'Components/Header/Language Switch',
+  title: 'Components/Language Switch',
   tags: ['package:WebComponents'],
   component: 'post-language-switch',
   render: renderLanguageSwitch,
diff --git a/packages/documentation/src/stories/raw-components/header/components/header.markup.ts b/packages/documentation/src/stories/modules/header/components/header.markup.ts
similarity index 100%
rename from packages/documentation/src/stories/raw-components/header/components/header.markup.ts
rename to packages/documentation/src/stories/modules/header/components/header.markup.ts
diff --git a/packages/documentation/src/stories/raw-components/header/header.docs.mdx b/packages/documentation/src/stories/modules/header/header.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/raw-components/header/header.docs.mdx
rename to packages/documentation/src/stories/modules/header/header.docs.mdx
diff --git a/packages/documentation/src/stories/raw-components/header/header.stories.ts b/packages/documentation/src/stories/modules/header/header.stories.ts
similarity index 94%
rename from packages/documentation/src/stories/raw-components/header/header.stories.ts
rename to packages/documentation/src/stories/modules/header/header.stories.ts
index 21c5eb7178..06546b6b31 100644
--- a/packages/documentation/src/stories/raw-components/header/header.stories.ts
+++ b/packages/documentation/src/stories/modules/header/header.stories.ts
@@ -4,7 +4,7 @@ import HeaderMarkup from './components/header.markup';
 
 const meta: MetaComponent = {
   id: 'header',
-  title: 'Raw Components/Header',
+  title: 'Modules/Header',
   tags: ['package:HTML'],
   parameters: {
     layout: 'fullscreen',
diff --git a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
index 24c46fb995..96fcb2f2de 100644
--- a/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
+++ b/packages/documentation/src/stories/raw-components/breadcrumbs/breadcrumbs.stories.ts
@@ -7,7 +7,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent<HTMLSwisspostInternetBreadcrumbsElement> = {
   id: '4347e5bf-8bf2-4f44-9075-9faaa53591ed',
-  title: 'Raw Components/Breadcrumbs',
+  title: 'Raw Components/Internet Header/Breadcrumbs',
   component: 'swisspost-internet-breadcrumbs',
   tags: ['package:InternetHeader'],
   render: renderInternetBreadcrumbs,
diff --git a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
index 86fbed7f1d..85fd8c1677 100644
--- a/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
+++ b/packages/documentation/src/stories/raw-components/footer/footer.stories.ts
@@ -6,7 +6,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: '27fc009d-3eec-43a9-b3a2-55531e721817',
-  title: 'Raw Components/Footer',
+  title: 'Raw Components/Internet Header/Footer',
   component: 'swisspost-internet-footer',
   tags: ['package:InternetHeader'],
   render: renderInternetFooter,
diff --git a/packages/documentation/src/stories/components/internet-header/config/custom-config.ts b/packages/documentation/src/stories/raw-components/internet-header/config/custom-config.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/config/custom-config.ts
rename to packages/documentation/src/stories/raw-components/internet-header/config/custom-config.ts
diff --git a/packages/documentation/src/stories/components/internet-header/config/language-switch-overrides.ts b/packages/documentation/src/stories/raw-components/internet-header/config/language-switch-overrides.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/config/language-switch-overrides.ts
rename to packages/documentation/src/stories/raw-components/internet-header/config/language-switch-overrides.ts
diff --git a/packages/documentation/src/stories/components/internet-header/config/os-flyout-overrides.ts b/packages/documentation/src/stories/raw-components/internet-header/config/os-flyout-overrides.ts
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/config/os-flyout-overrides.ts
rename to packages/documentation/src/stories/raw-components/internet-header/config/os-flyout-overrides.ts
diff --git a/packages/documentation/src/stories/components/internet-header/header.docs.mdx b/packages/documentation/src/stories/raw-components/internet-header/header.docs.mdx
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/header.docs.mdx
rename to packages/documentation/src/stories/raw-components/internet-header/header.docs.mdx
diff --git a/packages/documentation/src/stories/components/internet-header/header.scss b/packages/documentation/src/stories/raw-components/internet-header/header.scss
similarity index 100%
rename from packages/documentation/src/stories/components/internet-header/header.scss
rename to packages/documentation/src/stories/raw-components/internet-header/header.scss
diff --git a/packages/documentation/src/stories/components/internet-header/header.stories.ts b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
similarity index 99%
rename from packages/documentation/src/stories/components/internet-header/header.stories.ts
rename to packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
index d6ccd59d79..a0200a7ae3 100644
--- a/packages/documentation/src/stories/components/internet-header/header.stories.ts
+++ b/packages/documentation/src/stories/raw-components/internet-header/header.stories.ts
@@ -8,7 +8,7 @@ import { MetaComponent } from '@root/types';
 
 const meta: MetaComponent = {
   id: 'ebb11274-091b-4cb7-9a3f-3e0451c9a865',
-  title: 'Components/Internet Header',
+  title: 'Raw Components/Internet Header',
   tags: ['package:InternetHeader'],
   component: 'swisspost-internet-header',
   parameters: {

From fe50ee2a241a8f466779e210815c7f5016fd5dc3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Fri, 13 Dec 2024 15:24:03 +0100
Subject: [PATCH 02/30] chore(components): update generated post-icon readme
 (#4259)

---
 packages/components/src/components/post-icon/readme.md | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/components/src/components/post-icon/readme.md b/packages/components/src/components/post-icon/readme.md
index 9160671c20..8643e53c7d 100644
--- a/packages/components/src/components/post-icon/readme.md
+++ b/packages/components/src/components/post-icon/readme.md
@@ -27,7 +27,6 @@ some content
  - [post-banner](../post-banner)
  - [post-breadcrumb](../post-breadcrumb)
  - [post-breadcrumb-item](../post-breadcrumb-item)
- - [post-breadcrumb-item](../post-breadcrumb-item)
  - [post-card-control](../post-card-control)
  - [post-closebutton](../post-closebutton)
  - [post-language-switch](../post-language-switch)
@@ -42,7 +41,6 @@ graph TD;
   post-banner --> post-icon
   post-breadcrumb --> post-icon
   post-breadcrumb-item --> post-icon
-  post-breadcrumb-item --> post-icon
   post-card-control --> post-icon
   post-closebutton --> post-icon
   post-language-switch --> post-icon

From d7e11728f4b352f37d44f785f07a4c593e083bfc Mon Sep 17 00:00:00 2001
From: Myrta Sakellariou <66249294+myrta2302@users.noreply.github.com>
Date: Fri, 13 Dec 2024 16:45:24 +0200
Subject: [PATCH 03/30] feat(styles): updated sizing utility (no tokens) 
 (#4012)
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>
Co-authored-by: Oliver Schürch <oliver.schuerch@post.ch>
---
 .changeset/soft-pugs-dream.md                 |   6 +
 .changeset/violet-poems-attend.md             |   6 +
 .../snapshots/utilities/sizing.snapshot.ts    |  22 +++
 .../select-custom-basic.sample.html           |   2 +-
 .../select-custom-floating.sample.html        |   2 +-
 .../components/slider/slider.stories.ts       |   2 +-
 .../foundations/logo/logo.snapshot.stories.ts |   2 +-
 .../stories/foundations/logo/logo.stories.ts  |   4 +-
 .../stories/utilities/sizing/sizing.docs.mdx  |  61 +++----
 .../utilities/sizing/sizing.module.scss       |  18 +-
 .../sizing/sizing.snapshot.stories.ts         | 139 ++++++++++++++++
 .../utilities/sizing/sizing.stories.ts        | 156 ++++++++++--------
 .../utilities/sizing/sizing.styles.scss       |  30 +++-
 .../utilities/spacing/spacing.stories.ts      |   2 +-
 packages/documentation/src/utils/naming.ts    |   3 +
 packages/migrations/src/utils/constants.ts    |   1 +
 packages/styles/src/components/sizing.scss    |  21 +--
 .../src/themes/bootstrap/_utilities.scss      |  13 ++
 packages/styles/src/utilities/_variables.scss | 121 ++++++++++++++
 packages/styles/src/variables/_index.scss     |   1 +
 packages/styles/src/variables/_sizing.scss    |  69 ++++++++
 packages/styles/src/variables/_spacing.scss   |  13 --
 22 files changed, 548 insertions(+), 146 deletions(-)
 create mode 100644 .changeset/soft-pugs-dream.md
 create mode 100644 .changeset/violet-poems-attend.md
 create mode 100644 packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
 create mode 100644 packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
 create mode 100644 packages/documentation/src/utils/naming.ts
 create mode 100644 packages/styles/src/variables/_sizing.scss

diff --git a/.changeset/soft-pugs-dream.md b/.changeset/soft-pugs-dream.md
new file mode 100644
index 0000000000..10b4189721
--- /dev/null
+++ b/.changeset/soft-pugs-dream.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor 
+---
+
+Updated the utility classes for sizing.
diff --git a/.changeset/violet-poems-attend.md b/.changeset/violet-poems-attend.md
new file mode 100644
index 0000000000..cfec36d36d
--- /dev/null
+++ b/.changeset/violet-poems-attend.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Implemented new pixel based sizes.
diff --git a/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
new file mode 100644
index 0000000000..e539797cc7
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/utilities/sizing.snapshot.ts
@@ -0,0 +1,22 @@
+describe('Sizing', () => {
+  // Parent based sizing classes [e.g. .quarter, .third, .half, etc.]
+  it('Sizing Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Percentage sizing classes relative to viewport [e.g. vh-25, vw-33, min-vh-50, max-vw-100, etc.]
+  it('Sizing Viewport Percentages', () => {
+    cy.visit('/iframe.html?id=snapshots--percentage-vp-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+
+  // Pixel based sizing classes [e.g. h-80, w-56, max-w-24, min-h-24, etc.]
+  it('Sizing Pixel Based', () => {
+    cy.visit('/iframe.html?id=snapshots--pixel-sizing');
+    cy.get('.snapshot', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Sizing', { widths: [320, 1440] });
+  });
+});
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 eb42edb536..0a98a341b4 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 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectButton" class="w-100 max-w-100" 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 37f20358b2..3dbd83a857 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 mw-100" ngbDropdownMenu role="listbox">
+  <div aria-labelledby="customSelectLabel" class="w-100 max-w-100" ngbDropdownMenu role="listbox">
     <button
       (click)="toggle.focus()"
       (focus)="selectedOption = option"
diff --git a/packages/documentation/src/stories/components/slider/slider.stories.ts b/packages/documentation/src/stories/components/slider/slider.stories.ts
index 5acb16ee25..c5ae75fcdb 100644
--- a/packages/documentation/src/stories/components/slider/slider.stories.ts
+++ b/packages/documentation/src/stories/components/slider/slider.stories.ts
@@ -215,7 +215,7 @@ function render(args: Args, context: StoryContext) {
           <label class="form-label visually-hidden" for="${inputId}">Range controller</label>
           <input
             id="${inputId}"
-            class="form-control mw-giant"
+            class="form-control min-w-80"
             type="text"
             inputmode="decimal"
             value="${args.value}"
diff --git a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
index 95fb494fab..9f201decc4 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.snapshot.stories.ts
@@ -23,7 +23,7 @@ export const PostLogo: Story = {
                 <p>${url ? 'Links' : 'Images'}</p>
                 <div class="row">
                   <div class="col">
-                    ${['big', 'huge', 'giant'].map(
+                    ${['32', '56', '80'].map(
                       (height, i) => html`
                         <div class="h-${height} ${i === 0 ? 'my' : 'mb'}-16">
                           ${meta.render?.({ ...context.args, url }, context)}
diff --git a/packages/documentation/src/stories/foundations/logo/logo.stories.ts b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
index 9fc01f60e5..2d165a4115 100644
--- a/packages/documentation/src/stories/foundations/logo/logo.stories.ts
+++ b/packages/documentation/src/stories/foundations/logo/logo.stories.ts
@@ -24,7 +24,7 @@ export default meta;
 
 // DECORATORS
 function containerWithHeight(story: StoryFn, context: StoryContext) {
-  return html` <div class="h-giant">${story(context.args, context)}</div> `;
+  return html` <div class="h-80">${story(context.args, context)}</div> `;
 }
 
 // RENDERER
@@ -57,5 +57,5 @@ export const Link: Story = {
 };
 
 export const Height: Story = {
-  render: () => html` <post-logo class="h-huge">Logo of the Post</post-logo> `,
+  render: () => html` <post-logo class="h-56">Logo of the Post</post-logo> `,
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
index 2305a8a96e..eab0361910 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.docs.mdx
@@ -13,60 +13,49 @@ import * as SizingStories from './sizing.stories';
 
 ## Height & Width
 
-Height and width can be set using `h-*` and `w-*` prefixes, max-height and max-width can be set using prefixes `mh-*` and `mw-*` .
+Height and width can be set using our utility classes `h-{size}` and `w-{size}`, max-height and max-width can be set with `max-h-{size}` and `max-w-{size}` and min-height and min-width can be set with `min-h-{size}` and `min-w-{size}`.
 
 ### Parent Based
 
-Bootstrap offers sizing classes with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element (see [Bootstrap Sizing](https://getbootstrap.com/docs/5.3/utilities/sizing/) for reference).
+The design system offers classes for percentage based sizing with the suffixes bellow. They allow you to set a height / width as a percentage of the parent element.
 
-> - `*-25`
-> - `*-50`
-> - `*-75`
-> - `*-100`
+- `*-auto`
+- `*-quarter`
+- `*-third`
+- `*-half`
+- `*-two-thirds`
+- `*-three-quarters`
+- `*-full`
 
-#### Example
+### Example
 
-<Canvas sourceState="shown" of={SizingStories.SizesPercent} />
+<Canvas sourceState="shown" of={SizingStories.PercentSizes} />
 <div className="hide-col-default">
-  <Controls of={SizingStories.SizesPercent} />
+  <Controls of={SizingStories.PercentSizes} />
 </div>
 
-### Relative to breakpoints
-
-For width, we offer additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-100`) so that you can size only for some specific breakpoints.
+### Pixel Based
 
-See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
+Additional pixel-based sizing classes allow precise height `h-{size}` and width `w-{size}` definitions in pixels (e.g., `w-12` for 12px width and `h-26` for 26px height).
 
-### Post-Sizes
+See all available sizes in the example bellow.
 
-Post sizes can be used as suffixes in the same way. To find out which size name to use, see the "Size name in classes" column in the reference table above or use the "Example Post-Sizes" below.
+### Example
 
-#### Sass variables
-
-{/* prettier-ignore */}
-<div className="banner banner-warning mb-40">
-  <h2 className="banner-heading">Sizing variables are deprecated</h2>
-  <p>The current set of the post-specific sizing variables is deprecated in favour of a new naming system that is consistent with the Design. For further information, please read the <a href="https://github.com/swisspost/design-system/discussions/588">discussion on sizing variables on GitHub</a> and have a look at the <a href="https://www.figma.com/file/ojCcgC5Zd12eUSzq6V5m24/Foundations?node-id=3%3A2&t=l8qimsXlxeMLOzs6-0">implementation in Figma</a>.</p>
-  <p>There is a new solution with updated naming system up coming for spacing sizes.</p>
+<Canvas sourceState="shown" of={SizingStories.PxSizes} />
+<div className="hide-col-default">
+  <Controls of={SizingStories.PxSizes} />
 </div>
 
-<Source
-  language="scss"
-  dark
-  code={Object.entries(SizingStories.SCSS_VARIABLES)
-    .filter(([key, value]) => key !== 'parameters')
-    .map(([key, value]) => `$${key}: ${formatAsMap(value)};`)
-    .join('\n')}
-></Source>
+### Relative to breakpoints
 
-<Canvas of={SizingStories.Sizes} />
-<div className="hide-col-default">
-  <Controls of={SizingStories.Sizes} />
-</div>
+For width and height, the design system provides additionally `.w-{breakpoint}-{size}` classes (e.g. `w-md-full`, `h-md-56`) so that you can set different sizes for specific breakpoints.
+
+See <a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs#full-width">Full-width button</a> for a practical example.
 
-## Viewport Based
+### Viewport Based
 
-There is the possibility to set the width and height relative to the viewport.
+There is the possibility to set the width and height as a percentage relative to the viewport. Available percentages: `25`, `33`, `50`, `66`, `75`, `100`.
 
 > - `min-vh-100`
 > - `min-vw-100`
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
index e747d1f7da..3413b40b27 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.module.scss
@@ -1,7 +1,21 @@
+@use 'sass:list';
+@use 'sass:map';
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/variables/sizing' as tokens;
 
 :export {
-  @each $key, $value in post.$post-sizes {
-    #{$key}: #{$value};
+  @each $key, $value in tokens.$post-percentage-sizes {
+    pcsizes_#{$key}: #{$value};
+  }
+  @each $key, $value in tokens.$post-px-sizes {
+    pxsizes_#{$key}: #{$value};
+  }
+  @each $breakpoint in post.$grid-breakpoints-list {
+    @if (map.get(post.$grid-breakpoints, $breakpoint) == 0) {
+      firstBreakpoint_#{$breakpoint}: $breakpoint;
+    }
+    @if (map.get(post.$grid-breakpoints, $breakpoint) != 0) {
+      breakpoints_#{$breakpoint}: $breakpoint;
+    }
   }
 }
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
new file mode 100644
index 0000000000..be6d562b5c
--- /dev/null
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.snapshot.stories.ts
@@ -0,0 +1,139 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import './sizing.styles.scss';
+import meta from './sizing.stories';
+import { COLOR_SCHEMES, schemes } from '@/shared/snapshots/schemes';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+const samples = [
+  { w: 'third', h: 'full', maxW: 'third', minW: 'full', maxH: 'half', minH: 'two-thirds' },
+  { w: 'quarter', h: 'half', maxW: 'quarter', minW: 'half', maxH: 'full', minH: 'quarter' },
+  { w: 'half', h: 'quarter', maxW: 'half', minW: 'quarter', maxH: 'two-thirds', minH: 'third' },
+  {
+    w: 'three-quarters',
+    h: 'quarter',
+    maxW: 'three-quarters',
+    minW: 'three-quarters',
+    maxH: 'quarter',
+    minH: 'half',
+  },
+  { w: 'full', h: 'half', maxW: 'full', minW: 'third', maxH: 'auto', minH: 'auto' },
+];
+
+const vpSamples = [
+  { w: '33', h: '100', maxvW: '33', minvW: '100', maxvH: '50', minvH: '66' },
+  { w: '50', h: '50', maxvW: '25', minvW: '50', maxvH: '100', minvH: '25' },
+  { w: '50', h: '25', maxvW: '50', minvW: '25', maxvH: '66', minvH: '33' },
+  {
+    w: '75',
+    h: '25',
+    maxvW: '75',
+    minvW: '25',
+    maxvH: '50',
+    minvH: '25',
+  },
+  { w: '100', h: '50', maxvW: '100', minvW: '33', maxvH: 'auto', minvH: 'auto' },
+];
+
+const pxSamples = [
+  { w: '12', h: '18', maxW: '33', minW: '12', maxH: '48', minH: '22' },
+  { w: '24', h: '36', maxW: '32', minW: '20', maxH: '40', minH: '24' },
+  { w: '40', h: '56', maxW: '48', minW: '24', maxH: '56', minH: '32' },
+  { w: '28', h: '64', maxW: '80', minW: '56', maxH: '96', minH: '36' },
+  { w: '96', h: '48', maxW: '100', minW: '40', maxH: '112', minH: '48' },
+  { w: '64', h: '56', maxW: '80', minW: '32', maxH: '78', minH: '64' },
+  { w: '20', h: '15', maxW: '22', minW: '12', maxH: '32', minH: '18' },
+  { w: '32', h: '22', maxW: '40', minW: '24', maxH: '36', minH: '20' },
+  { w: '78', h: '96', maxW: '80', minW: '40', maxH: '112', minH: '56' },
+  { w: '48', h: '80', maxW: '96', minW: '50', maxH: '112', minH: '56' },
+  { w: '80', h: '96', maxW: '112', minW: '64', maxH: '100', minH: '36' },
+];
+function generateClassNames(sample: Record<string, string>, isViewport = false) {
+  const prefix = isViewport ? 'v' : '';
+
+  const classNames = ['content'];
+
+  classNames.push(prefix + 'h-' + sample.h);
+  classNames.push(prefix + 'w-' + sample.w);
+
+  if (sample['max' + prefix + 'H'] && sample['max' + prefix + 'H'] !== 'none') {
+    classNames.push('max-vh-' + sample['max' + prefix + 'H']);
+  }
+
+  if (sample['max' + prefix + 'W'] && sample['max' + prefix + 'W'] !== 'none') {
+    classNames.push('max-vw-' + sample['max' + prefix + 'W']);
+  }
+
+  if (sample['min' + prefix + 'H'] && sample['min' + prefix + 'H'] !== 'none') {
+    classNames.push('min-vh-' + sample['min' + prefix + 'H']);
+  }
+
+  if (sample['min' + prefix + 'W'] && sample['min' + prefix + 'W'] !== 'none') {
+    classNames.push('min-vw-' + sample['min' + prefix + 'W']);
+  }
+
+  return classNames.filter(Boolean).join(' ');
+}
+
+export const PercentageSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${samples.map(sample => {
+            return html`<div class="sizing-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })};
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PercentageVpSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          <div class="grid">
+            ${vpSamples.map(sample => {
+              return html`
+                <div class="grid-item">
+                  <div class="sizing-example snapshot">
+                    <div class="${generateClassNames(sample, true)}"></div>
+                  </div>
+                </div>
+              `;
+            })}
+          </div>
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
+
+export const PixelSizing: StoryObj = {
+  render() {
+    return schemes(
+      () => {
+        return html`
+          ${pxSamples.map(sample => {
+            return html`<div class="sizing-px-example snapshot">
+              <div class="${generateClassNames(sample)}"></div>
+            </div>`;
+          })}
+        `;
+      },
+      { filter: scheme => scheme === COLOR_SCHEMES.light },
+    );
+  },
+};
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
index 38558d2899..f28ebe9daa 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.stories.ts
@@ -1,14 +1,14 @@
-import type { Args, StoryObj } from '@storybook/web-components';
+import type { Args, StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
 import { html } from 'lit';
-import './sizing.styles.scss';
-import scss from './sizing.module.scss';
+import sizing from './sizing.module.scss';
+import { parse } from '@/utils/sass-export';
 import { MetaExtended } from '@root/types';
+import './sizing.styles.scss';
+import { camelToKebabCase } from '@/utils/naming';
 
-export const SCSS_VARIABLES = scss;
-
-const sizingOptions = ['auto', ...Object.keys(SCSS_VARIABLES)];
-
-const sizeOptionsPercent = ['auto', '25', '50', '75', '100'];
+const sizes: Record<string, string> = parse(sizing);
+const percentageSizes = Object.keys(sizes.pcsizes);
+const pixelSizes = Object.keys(sizes.pxsizes);
 
 const meta: MetaExtended = {
   render: renderSizing,
@@ -18,45 +18,25 @@ const meta: MetaExtended = {
     badges: [],
   },
   args: {
-    height: 'bigger-giant',
-    width: 'bigger-giant',
-    maxHeight: 'null',
-    maxWidth: 'null',
+    height: 'none',
+    width: 'none',
+    maxHeight: 'none',
+    maxWidth: 'none',
+    minHeight: 'none',
+    minWidth: 'none',
   },
-  argTypes: {
-    height: {
-      name: 'height',
-      description: 'Set the height of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: sizingOptions,
-    },
-    width: {
-      name: 'width',
-      description: 'Set the width of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: sizingOptions,
-    },
-    maxHeight: {
-      name: 'max-height',
-      description: 'Set the maximum height of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...sizingOptions],
-    },
-    maxWidth: {
-      name: 'max-width',
-      description: 'Set the maximum width of the rectangle',
-      control: {
-        type: 'select',
-      },
-      options: ['none', ...sizingOptions],
+  decorators: [
+    (story: StoryFn, context: StoryContext) => {
+      const storyTemplate = html`
+        <div class="sizing-example">
+          <div class="h-112">
+            ${story(context.args, context)}
+          </div>
+        </div>
+      `;
+      return storyTemplate;
     },
-  },
+  ],
 };
 
 export default meta;
@@ -64,33 +44,73 @@ export default meta;
 type Story = StoryObj;
 
 function renderSizing(args: Args) {
-  const maximumHeight = args.maxHeight && args.maxHeight !== 'null' ? `mh-${args.maxHeight}` : '';
-  const maximumWidth = args.maxWidth && args.maxWidth !== 'null' ? `mw-${args.maxWidth}` : '';
-  const classes = `content h-${args.height} w-${args.width} ${maximumHeight} ${maximumWidth}`;
+  const classNames = [
+    `content`,
+    `h-${args.height}`,
+    `w-${args.width}`,
+    args.maxHeight && args.maxHeight !== 'none' ? `max-h-${args.maxHeight}` : '',
+    args.maxWidth && args.maxWidth !== 'none' ? `max-w-${args.maxWidth}` : '',
+    args.minHeight && args.minHeight !== 'none' ? `min-h-${args.minHeight}` : '',
+    args.minWidth && args.minWidth !== 'none' ? `min-w-${args.minWidth}` : '',
+  ]
+    .filter(Boolean)
+    .join(' ');
 
-  return html`
-    <div class="sizing-example">
-      <div class="d-flex p-16 gap-16" style="height: 150px">
-        <div class="flex-fill">
-          <div class="${classes}"></div>
-        </div>
-      </div>
-    </div>
-  `;
+  return html`<div class="${classNames}"></div>`;
 }
 
-export const Sizes: Story = {};
-export const SizesPercent: Story = {
+const pcArgTypes = [
+  { name: 'height', category: 'Height', options: percentageSizes },
+  { name: 'width', category: 'Width', options: percentageSizes },
+  { name: 'maxHeight', category: 'Height', options: percentageSizes },
+  { name: 'maxWidth', category: 'Width', options: percentageSizes },
+  { name: 'minHeight', category: 'Height', options: percentageSizes },
+  { name: 'minWidth', category: 'Width', options: percentageSizes },
+];
+
+export const PercentSizes: Story = {
   args: {
-    width: '25',
-    height: '100',
+    width: 'quarter',
+    height: 'full',
   },
-  argTypes: {
-    height: {
-      options: sizeOptionsPercent,
-    },
-    width: {
-      options: sizeOptionsPercent,
-    },
+  argTypes: Object.fromEntries(
+    pcArgTypes.map(argType => [
+      argType.name,
+      {
+        name: camelToKebabCase(argType.name),
+        description: `Set the ${camelToKebabCase(argType.name).toLowerCase()} of the rectangle`,
+        control: { type: 'select' },
+        options: argType.options,
+        table: { category: argType.category },
+      },
+    ]),
+  ),
+};
+
+const pxArgTypes = [
+  { name: 'height', category: 'Height', options: pixelSizes },
+  { name: 'width', category: 'Width', options: pixelSizes },
+  { name: 'maxHeight', category: 'Height', options: pixelSizes },
+  { name: 'maxWidth', category: 'Width', options: pixelSizes },
+  { name: 'minHeight', category: 'Height', options: pixelSizes },
+  { name: 'minWidth', category: 'Width', options: pixelSizes },
+];
+
+export const PxSizes: Story = {
+  args: {
+    width: '100',
+    height: '80',
   },
+  argTypes: Object.fromEntries(
+    pxArgTypes.map(argType => [
+      argType.name,
+      {
+        name: camelToKebabCase(argType.name),
+        description: `Set the ${camelToKebabCase(argType.name).toLowerCase()} of the rectangle`,
+        control: { type: 'select' },
+        options: argType.options,
+        table: { category: argType.category },
+      },
+    ]),
+  ),
 };
diff --git a/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss b/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
index 6d46035c47..84f5536836 100644
--- a/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
+++ b/packages/documentation/src/stories/utilities/sizing/sizing.styles.scss
@@ -2,7 +2,35 @@
 
 .sizing-example {
   .content {
-    background-color: post.$white;
+    background-color: post.$gray-40;
+  }
+
+  .grid-item {
+    width: 20vw;
+    height: 20vw;
     border: 1px solid post.$gray-40;
+
+    div {
+      background-color: post.$gray-40;
+    }
+  }
+}
+
+.sizing-example .grid {
+  display: grid;
+  grid-template-columns: 100vw;
+  grid-template-rows: 100vh;
+  gap: 30px;
+  .grid-item {
+    width: 100vw;
+    height: 100vh;
   }
 }
+
+.sizing-example.snapshot,
+.sizing-px-example.snapshot {
+  display: flex;
+  width: 20vw;
+  height: 20vw;
+  border: 1px solid post.$gray-40 !important;
+}
diff --git a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
index 4abdc3b371..6e93e63899 100644
--- a/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
+++ b/packages/documentation/src/stories/utilities/spacing/spacing.stories.ts
@@ -47,7 +47,7 @@ function withLegend(template: TemplateResult, ...legendItems: string[]) {
         ${legendItems.map(
           item => html`
             <li class="d-flex align-items-center">
-              <div class="h-regular w-regular me-8 ${item}"></div>
+              <div class="h-16 w-16 me-8 ${item}"></div>
               <span>${item}</span>
             </li>
           `,
diff --git a/packages/documentation/src/utils/naming.ts b/packages/documentation/src/utils/naming.ts
new file mode 100644
index 0000000000..a57c671fae
--- /dev/null
+++ b/packages/documentation/src/utils/naming.ts
@@ -0,0 +1,3 @@
+export function camelToKebabCase(str: string) {
+  return str.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase();
+}
diff --git a/packages/migrations/src/utils/constants.ts b/packages/migrations/src/utils/constants.ts
index 1da92da3a0..f2f4d69cf3 100644
--- a/packages/migrations/src/utils/constants.ts
+++ b/packages/migrations/src/utils/constants.ts
@@ -1,6 +1,7 @@
 export const breakpoints = [ 'xs', 'sm', 'rg', 'md', 'lg', 'xl', 'xxl' ];
 
 const bootstrapSizes = [ '0', '1', '2', '3', '4', '5', 'auto' ];
+
 const postSizes = [
   'hair',
   'line',
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index 228e836d8e..bf76e9bf87 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -3,33 +3,16 @@
 @use 'sass:map';
 @use './../themes/bootstrap/core' as *;
 @use './../variables/spacing';
+@use './../variables/sizing';
 @use './../variables/breakpoints';
 @use './../mixins/utilities';
 
-// Post sizes
-@each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
-  @include media-breakpoint-up($breakpoint) {
-    $infix: if($breakpoint == 'xs', '', '-#{$breakpoint}');
-
-    @each $prop,
-      $abbrev
-        in (/* Deprecated */ line-height: lh, height: h, max-height: mh, width: w, max-width: mw)
-    {
-      @each $size, $length in spacing.$post-sizes {
-        .#{$abbrev}#{$infix}-#{$size} {
-          #{$prop}: $length !important;
-        }
-      }
-    }
-  }
-}
-
 // Post breakpoints width - e.g. w-sm-100
 @each $breakpoint in map.keys(breakpoints.$grid-breakpoints) {
   @include media-breakpoint-up($breakpoint) {
     @if $breakpoint != 'xs' {
       @each $prop, $abbrev in (width: w) {
-        @each $size, $length in spacing.$sizes {
+        @each $size, $length in sizing.$post-percentage-sizes {
           .#{$abbrev}-#{$breakpoint}-#{$size} {
             #{$prop}: $length !important;
           }
diff --git a/packages/styles/src/themes/bootstrap/_utilities.scss b/packages/styles/src/themes/bootstrap/_utilities.scss
index 0696634c6c..e8d4bde6d1 100644
--- a/packages/styles/src/themes/bootstrap/_utilities.scss
+++ b/packages/styles/src/themes/bootstrap/_utilities.scss
@@ -26,6 +26,17 @@ $utilities: map.remove($utilities, 'gap');
 $utilities: map.remove($utilities, 'row-gap');
 $utilities: map.remove($utilities, 'column-gap');
 
+$utilities: map.remove($utilities, 'width');
+$utilities: map.remove($utilities, 'height');
+$utilities: map.remove($utilities, 'max-width');
+$utilities: map.remove($utilities, 'max-height');
+$utilities: map.remove($utilities, 'min-width');
+$utilities: map.remove($utilities, 'min-height');
+$utilities: map.remove($utilities, 'viewport-width');
+$utilities: map.remove($utilities, 'viewport-height');
+$utilities: map.remove($utilities, 'min-viewport-width');
+$utilities: map.remove($utilities, 'min-viewport-height');
+
 $utilities: map.remove($utilities, 'flex');
 $utilities: map.remove($utilities, 'flex-direction');
 $utilities: map.remove($utilities, 'align-items');
@@ -34,7 +45,9 @@ $utilities: map.remove($utilities, 'align-self');
 $utilities: map.remove($utilities, 'flex-grow');
 $utilities: map.remove($utilities, 'flex-shrink');
 $utilities: map.remove($utilities, 'flex-wrap');
+
 $utilities: map.remove($utilities, 'order');
+
 $utilities: map.remove($utilities, 'justify-content');
 
 $utilities: map.remove($utilities, 'display');
diff --git a/packages/styles/src/utilities/_variables.scss b/packages/styles/src/utilities/_variables.scss
index d09cf091b1..04b78b2890 100644
--- a/packages/styles/src/utilities/_variables.scss
+++ b/packages/styles/src/utilities/_variables.scss
@@ -2,6 +2,7 @@
 
 @use './functions' as *;
 
+@use '../variables/sizing' as *;
 /*
   Utilities are generated with our utility API using bellow $utilities map.
 
@@ -28,6 +29,126 @@ $position-values: (
 );
 
 $utilities: (
+  'width': (
+    responsive: true,
+    property: width,
+    class: w,
+    values: $post-combined-sizes,
+  ),
+  'height': (
+    responsive: true,
+    property: height,
+    class: h,
+    values: $post-combined-sizes,
+  ),
+  'max-width': (
+    responsive: true,
+    property: max-width,
+    class: max-w,
+    values: $post-combined-sizes,
+  ),
+  'max-height': (
+    responsive: true,
+    property: max-height,
+    class: max-h,
+    values: $post-combined-sizes,
+  ),
+  'min-width': (
+    responsive: true,
+    property: min-width,
+    class: min-w,
+    values: $post-combined-sizes,
+  ),
+  'min-height': (
+    responsive: true,
+    property: min-height,
+    class: min-h,
+    values: $post-combined-sizes,
+  ),
+  'viewport-width': (
+    responsive: true,
+    property: width,
+    class: vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'viewport-height': (
+    responsive: true,
+    property: height,
+    class: vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'min-viewport-width': (
+    responsive: true,
+    property: min-width,
+    class: min-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'min-viewport-height': (
+    responsive: true,
+    property: min-height,
+    class: min-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
+  'max-viewport-width': (
+    responsive: true,
+    property: max-width,
+    class: max-vw,
+    values: (
+      0: 0,
+      25: 25vw,
+      33: 25vw,
+      50: 50vw,
+      66: 66vw,
+      75: 75vw,
+      100: 100vw,
+    ),
+  ),
+  'max-viewport-height': (
+    responsive: true,
+    property: max-height,
+    class: max-vh,
+    values: (
+      0: 0,
+      25: 25vh,
+      33: 33vh,
+      50: 50vh,
+      66: 66vh,
+      75: 75vh,
+      100: 100vh,
+    ),
+  ),
   'align': (
     property: vertical-align,
     class: align,
diff --git a/packages/styles/src/variables/_index.scss b/packages/styles/src/variables/_index.scss
index aff8c98c7e..a2a1c02cbc 100644
--- a/packages/styles/src/variables/_index.scss
+++ b/packages/styles/src/variables/_index.scss
@@ -11,5 +11,6 @@
 @forward 'icons';
 @forward 'options';
 @forward 'spacing';
+@forward 'sizing';
 @forward 'type';
 @forward 'components';
diff --git a/packages/styles/src/variables/_sizing.scss b/packages/styles/src/variables/_sizing.scss
new file mode 100644
index 0000000000..139cde6afa
--- /dev/null
+++ b/packages/styles/src/variables/_sizing.scss
@@ -0,0 +1,69 @@
+@use 'sass:map';
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
+// Sizing
+//
+// Control the default sizing by modifying these variables.
+
+// Post-Sizes
+$post-px-sizes: () !default;
+$post-px-sizes: map.merge(
+  (
+    '0': tokens.get('post-utility-gap-0'),
+    '1': tokens.get('post-utility-gap-1'),
+    '2': tokens.get('post-utility-gap-2'),
+    '3': tokens.get('post-utility-gap-3'),
+    '4': tokens.get('post-utility-gap-4'),
+    '5': tokens.get('post-utility-gap-5'),
+    '6': tokens.get('post-utility-gap-6'),
+    '8': tokens.get('post-utility-gap-8'),
+    '10': tokens.get('post-utility-gap-10'),
+    '11': tokens.get('post-utility-gap-11'),
+    '12': tokens.get('post-utility-gap-12'),
+    '14': tokens.get('post-utility-gap-14'),
+    '15': tokens.get('post-utility-gap-15'),
+    '16': tokens.get('post-utility-gap-16'),
+    '18': tokens.get('post-utility-gap-18'),
+    '19': tokens.get('post-utility-gap-19'),
+    '20': tokens.get('post-utility-gap-20'),
+    '22': tokens.get('post-utility-gap-22'),
+    '24': tokens.get('post-utility-gap-24'),
+    '26': tokens.get('post-utility-gap-26'),
+    '28': tokens.get('post-utility-gap-28'),
+    '30': tokens.get('post-utility-gap-30'),
+    '32': tokens.get('post-utility-gap-32'),
+    '34': tokens.get('post-utility-gap-34'),
+    '36': tokens.get('post-utility-gap-36'),
+    '40': tokens.get('post-utility-gap-40'),
+    '48': tokens.get('post-utility-gap-48'),
+    '56': tokens.get('post-utility-gap-56'),
+    '64': tokens.get('post-utility-gap-64'),
+    '78': tokens.get('post-utility-gap-78'),
+    '80': tokens.get('post-utility-gap-80'),
+    '96': tokens.get('post-utility-gap-96'),
+    '100': tokens.get('post-utility-gap-100'),
+    '112': tokens.get('post-utility-gap-112'),
+  ),
+  $post-px-sizes
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$post-percentage-sizes: () !default;
+$post-percentage-sizes: map.merge(
+  (
+    'quarter': 25%,
+    'third': 33%,
+    'half': 50%,
+    'two-thirds': 66%,
+    'three-quarters': 75%,
+    'full': 100%,
+    auto: auto,
+  ),
+  $post-percentage-sizes
+);
+
+$post-combined-sizes: map.merge($post-px-sizes, $post-percentage-sizes);
diff --git a/packages/styles/src/variables/_spacing.scss b/packages/styles/src/variables/_spacing.scss
index 7c7ee7b242..b4d8528415 100644
--- a/packages/styles/src/variables/_spacing.scss
+++ b/packages/styles/src/variables/_spacing.scss
@@ -55,19 +55,6 @@ $post-sizes: map.merge(
   $post-sizes
 );
 
-// This variable affects the `.h-*` and `.w-*` classes.
-$sizes: () !default;
-$sizes: map.merge(
-  (
-    25: 25%,
-    50: 50%,
-    75: 75%,
-    100: 100%,
-    auto: auto,
-  ),
-  $sizes
-);
-
 // Abstand Gross, Section
 $size-curve-giant: (
   'xs': $size-huge,

From d97c16dc77364125dcd7dc9ca71f6cea1da80bb2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:05:17 +0100
Subject: [PATCH 04/30] fix(components): update menu button state when
 navigation is toggled (#4305)

---
 .../components/src/components/post-header/post-header.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/post-header/post-header.tsx b/packages/components/src/components/post-header/post-header.tsx
index 1639cc87d8..9e04361563 100644
--- a/packages/components/src/components/post-header/post-header.tsx
+++ b/packages/components/src/components/post-header/post-header.tsx
@@ -47,6 +47,10 @@ export class PostHeader {
       ? slideUp(this.mobileMenu)
       : slideDown(this.mobileMenu);
 
+    // Update the state of the toggle button
+    const menuButton = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
+    menuButton.toggled = !this.mobileMenuExtended;
+
     // Toggle menu visibility before it slides down and after it slides back up
     if (this.mobileMenuExtended) await this.mobileMenuAnimation.finished;
     this.mobileMenuExtended = !this.mobileMenuExtended;
@@ -107,10 +111,6 @@ export class PostHeader {
     if (newDevice === 'desktop' && this.mobileMenuExtended) {
       this.toggleMobileMenu();
       this.mobileMenuAnimation.finish(); // no animation
-
-
-      const menuToggler = this.host.querySelector<HTMLPostTogglebuttonElement>('post-togglebutton');
-      if (menuToggler) menuToggler.toggled = false;
     }
 
     // Apply only on change for doing work only when necessary

From 3b22142173692ae6df1ff8a35e8c31695af2d4e9 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Mon, 16 Dec 2024 17:20:39 +0100
Subject: [PATCH 05/30] fix(components): mega dropdown trigger focus style
 (#4303)

---
 .../src/components/post-mainnavigation/post-mainnavigation.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 9e767ffa25..191a00ae3c 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -1,5 +1,6 @@
 @use '@swisspost/design-system-styles/mixins/button';
 @use '@swisspost/design-system-styles/mixins/icons';
+@use '@swisspost/design-system-styles/mixins/utilities';
 @use '@swisspost/design-system-styles/mixins/media';
 @use '@swisspost/design-system-styles/functions/tokens';
 @use '@swisspost/design-system-styles/tokens/elements';
@@ -19,6 +20,7 @@ post-mainnavigation {
     post-megadropdown-trigger button {
       @include button.reset-button;
       text-align: start;
+      @include utilities.focus-style;
     }
 
     > a,

From 0aac415d66f03fb2b7660491e51ec1cf87a73835 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Mon, 16 Dec 2024 17:20:53 +0100
Subject: [PATCH 06/30] fix(components): mega dropdown to one column on mobile
 (#4300)

---
 .changeset/bright-insects-unite.md                           | 5 +++++
 .../src/components/post-megadropdown/post-megadropdown.scss  | 4 ++++
 2 files changed, 9 insertions(+)
 create mode 100644 .changeset/bright-insects-unite.md

diff --git a/.changeset/bright-insects-unite.md b/.changeset/bright-insects-unite.md
new file mode 100644
index 0000000000..1b9e20b4d1
--- /dev/null
+++ b/.changeset/bright-insects-unite.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Switched mega dropdown content to one column on mobile.
diff --git a/packages/components/src/components/post-megadropdown/post-megadropdown.scss b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
index ba5e0d7465..3871f4d11c 100644
--- a/packages/components/src/components/post-megadropdown/post-megadropdown.scss
+++ b/packages/components/src/components/post-megadropdown/post-megadropdown.scss
@@ -77,6 +77,10 @@ post-popovercontainer {
     @include media.max(lg) {
       grid-template-columns: repeat(auto-fit, minmax(min(35vw, 100%), 1fr));
     }
+
+    @include media.max(sm) {
+      grid-template-columns: 1fr;
+    }
   }
 
   h2 {

From 8177d2119d0f5e473cc7a629dd281c47664bc4df Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Mon, 16 Dec 2024 17:21:15 +0100
Subject: [PATCH 07/30] fix(components): add opening state to mega dropdown
 trigger + fix expanded detection (#4299)

---
 .changeset/dry-trainers-stare.md                   |  5 +++++
 .../post-mainnavigation/post-mainnavigation.scss   |  6 ++++--
 .../post-megadropdown-trigger.tsx                  | 14 +++++++++++---
 3 files changed, 20 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/dry-trainers-stare.md

diff --git a/.changeset/dry-trainers-stare.md b/.changeset/dry-trainers-stare.md
new file mode 100644
index 0000000000..9c39d2ade3
--- /dev/null
+++ b/.changeset/dry-trainers-stare.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-components': patch
+---
+
+Fixed opening state of megadropdown trigger and expanded detection.
diff --git a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
index 191a00ae3c..c6f08ed52b 100644
--- a/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
+++ b/packages/components/src/components/post-mainnavigation/post-mainnavigation.scss
@@ -75,7 +75,8 @@ post-mainnavigation {
           border-block-width: var(--post-core-dimension-2);
         }
 
-        &.selected {
+        &.selected,
+        &[aria-expanded='true'] {
           border-block-width: var(--post-core-dimension-4);
           font-weight: var(--post-core-font-weight-700);
         }
@@ -95,7 +96,8 @@ post-mainnavigation {
           transition: transform animation.$transition-base-timing;
         }
 
-        &.selected::after {
+        &.selected::after,
+        &[aria-expanded='true']::after {
           transform: rotate(180deg);
         }
       }
diff --git a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
index a9d5e32f23..f63d1add6e 100644
--- a/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
+++ b/packages/components/src/components/post-megadropdown-trigger/post-megadropdown-trigger.tsx
@@ -43,9 +43,7 @@ export class PostMegadropdownTrigger {
   }
 
   private handleToggle() {
-    if (this.megadropdown && this.slottedButton) {
-      this.ariaExpanded = !this.ariaExpanded;
-      this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+    if (this.megadropdown) {
       this.megadropdown.toggle(this.host);
     } else {
       console.warn(`No post-megadropdown found with ID: ${this.for}`);
@@ -55,6 +53,16 @@ export class PostMegadropdownTrigger {
   componentDidLoad() {
     this.validateControlFor();
 
+    // Check if the mega dropdown attached to the trigger is expanded or not
+    document.addEventListener('postToggleMegadropdown', (event: CustomEvent) => {
+      if ((event.target as HTMLPostMegadropdownElement).id === this.for) {
+        this.ariaExpanded = event.detail;
+        if (this.slottedButton) {
+          this.slottedButton.setAttribute('aria-expanded', this.ariaExpanded.toString());
+        }
+      }
+    });
+
     this.slottedButton = this.host.querySelector('button');
     if (this.slottedButton) {
       this.slottedButton.setAttribute('aria-haspopup', 'menu');

From e09b88e43f99a82f3bcfcb6e83c9bd487439097c Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Mon, 16 Dec 2024 17:43:10 +0100
Subject: [PATCH 08/30] =?UTF-8?q?chore(changesets):=20=F0=9F=A6=8B?=
 =?UTF-8?q?=F0=9F=93=A6=20publish=20packages=20(main)=20(next)=20(#4198)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This PR was opened by the [Changesets
release](https://github.com/changesets/action) GitHub action. When
you're ready to do a release, you can merge this and the packages will
be published to npm automatically. If you're not ready to do a release
yet, that's fine, whenever you add more changesets to main, this PR will
be updated.

⚠️⚠️⚠️⚠️⚠️⚠️

`main` is currently in **pre mode** so this branch has prereleases
rather than normal releases. If you want to exit prereleases, run
`changeset pre exit` on `main`.

⚠️⚠️⚠️⚠️⚠️⚠️

# Releases
## @swisspost/design-system-components@9.0.0-next.9

### Major Changes

- Updated the `post-togglebutton` component to offer greater
flexibility. You can now control the visibility of elements within the
`post-togglebutton` using the `data-showwhen="toggled"` and
`data-showwhen="untoggled"` attributes. Any content without a
`data-showwhen` attribute will always be visible, regardless of the
toggle state. (by [@alizedebray](https://github.com/alizedebray) with
[#4223](https://github.com/swisspost/design-system/pull/4223))

### Minor Changes

- Added composable footer component. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Added the `post-megadropdown` component. (by
[@leagrdv](https://github.com/leagrdv) with
[#4177](https://github.com/swisspost/design-system/pull/4177))

- Added the parts `button` and `body` in the `post-accordion-item`
component, so one can override styles from the outside. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Added the `post-breadcrumb` component to provide a standalone
breadcrumb navigation solution. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4065](https://github.com/swisspost/design-system/pull/4065))

- Added the css parts `button` and `body` in the `post-accorddion-item`
component. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Added the `post-language-switch` component that enables users to
change the language of a page. (by
[@leagrdv](https://github.com/leagrdv) with
[#4044](https://github.com/swisspost/design-system/pull/4044))

### Patch Changes

- Switched mega dropdown content to one column on mobile. (by
[@leagrdv](https://github.com/leagrdv) with
[#4300](https://github.com/swisspost/design-system/pull/4300))

- Fixed opening state of megadropdown trigger and expanded detection.
(by [@leagrdv](https://github.com/leagrdv) with
[#4299](https://github.com/swisspost/design-system/pull/4299))

- Fix tab isolation in nested `post-tabs` components by scoping tab
queries and interactions to the current instance. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4211](https://github.com/swisspost/design-system/pull/4211))

- Added a fixed slot `post-list-item` on the `post-list-item` host
element, so it is no longer necessary to add it manually. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Fixed the used `headingLevel` in the `post-accorddion-item` component.
The component now uses the value from its closest `post-accorddion`
parent component, if this is specified and falls back to `h2` if not
specified. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Updated the `post-togglebutton` to function like a real button,
including support for keyboard navigation and proper focus styles. (by
[@alizedebray](https://github.com/alizedebray) with
[#4242](https://github.com/swisspost/design-system/pull/4242))

- Fixed an issue with the post-list component where the `horizontal`
property could not be set programmatically. Also, reduced the
specificity of the component's styles to make customization easier. (by
[@alizedebray](https://github.com/alizedebray) with
[#4137](https://github.com/swisspost/design-system/pull/4137))

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9
    -   @swisspost/design-system-icons@9.0.0-next.9

## @swisspost/design-system-styles@9.0.0-next.9

### Minor Changes

- Added composable footer component. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Removed outdated portal-specific styles, including
subnavigation-related rules. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4186](https://github.com/swisspost/design-system/pull/4186))

- Added the possibility to define a `$child-selector` parameter with our
list mixins, so they can be used also with custom elements. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Updated the utility classes for sizing. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](https://github.com/swisspost/design-system/pull/4012))

- Updated `.btn-link` to look like a regular link and old `.btn-link` is
now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv)
with [#4200](https://github.com/swisspost/design-system/pull/4200))

- Implemented new pixel based sizes. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](https://github.com/swisspost/design-system/pull/4012))

### Patch Changes

- Fixed the `btn-icon` styles, so icons within can no longer be rendered
too small, because of the inline-padding on the button. (by
[@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Fixed the appstore-badge styles to get rid of the inline gap below.
(by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

## @swisspost/design-system-components-angular@9.0.0-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.9

## @swisspost/design-system-components-react@9.0.0-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.9

## @swisspost/design-system-intranet-header@9.0.0-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9

## @swisspost/design-system-styles-primeng@9.0.0-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9

## @swisspost/design-system-icons@9.0.0-next.9



## @swisspost/design-system-migrations@9.0.0-next.9



## @swisspost/design-system-tokens@9.0.0-next.9



## @swisspost/design-system-documentation@6.0.0-next.10

### Minor Changes

- Added the `post-breadcrumb` component to provide a standalone
breadcrumb navigation solution. (by
[@alionazherdetska](https://github.com/alionazherdetska) with
[#4065](https://github.com/swisspost/design-system/pull/4065))

- Updated the utility classes for sizing. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](https://github.com/swisspost/design-system/pull/4012))

- Added the css parts `button` and `body` in the `post-accorddion-item`
component. (by [@oliverschuerch](https://github.com/oliverschuerch) with
[#4190](https://github.com/swisspost/design-system/pull/4190))

- Updated `.btn-link` to look like a regular link and old `.btn-link` is
now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv)
with [#4200](https://github.com/swisspost/design-system/pull/4200))

- Implemented new pixel based sizes. (by
[@myrta2302](https://github.com/myrta2302) with
[#4012](https://github.com/swisspost/design-system/pull/4012))

- Added the `post-language-switch` component that enables users to
change the language of a page. (by
[@leagrdv](https://github.com/leagrdv) with
[#4044](https://github.com/swisspost/design-system/pull/4044))

### Patch Changes

- Updated the `post-togglebutton` component to offer greater
flexibility. You can now control the visibility of elements within the
`post-togglebutton` using the `data-showwhen="toggled"` and
`data-showwhen="untoggled"` attributes. Any content without a
`data-showwhen` attribute will always be visible, regardless of the
toggle state. (by [@alizedebray](https://github.com/alizedebray) with
[#4223](https://github.com/swisspost/design-system/pull/4223))
-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.9
    -   @swisspost/design-system-styles@9.0.0-next.9
    -   @swisspost/design-system-components-react@9.0.0-next.9
    -   @swisspost/internet-header@2.0.0-next.9
    -   @swisspost/design-system-tokens@9.0.0-next.9
    -   @swisspost/design-system-icons@9.0.0-next.9

## @swisspost/design-system-components-angular-workspace@1.1.10-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-components@9.0.0-next.9
    -   @swisspost/design-system-styles@9.0.0-next.9

## @swisspost/internet-header@2.0.0-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9

## @swisspost/design-system-intranet-header-workspace@3.0.22-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9

## @swisspost/design-system-intranet-header-showcase@1.0.10-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-intranet-header@9.0.0-next.9

## @swisspost/design-system-nextjs-integration@0.1.14-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9
    -   @swisspost/design-system-components-react@9.0.0-next.9
    -   @swisspost/internet-header@2.0.0-next.9

## @swisspost/design-system-styles-primeng-workspace@1.0.6-next.9

### Patch Changes

-   Updated dependencies:
    -   @swisspost/design-system-styles@9.0.0-next.9

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .changeset/pre.json                           | 21 +++++++
 packages/components-angular/CHANGELOG.md      |  8 +++
 packages/components-angular/package.json      |  6 +-
 .../projects/components/CHANGELOG.md          |  7 +++
 .../projects/components/package.json          |  4 +-
 packages/components-react/CHANGELOG.md        |  7 +++
 packages/components-react/package.json        |  4 +-
 packages/components/CHANGELOG.md              | 39 ++++++++++++
 packages/components/package.json              |  6 +-
 packages/documentation/CHANGELOG.md           | 27 ++++++++
 packages/documentation/package.json           | 18 +++---
 packages/documentation/public/_redirects      |  1 +
 .../documentation/public/assets/versions.json | 62 ++++++++++++++-----
 packages/icons/CHANGELOG.md                   |  2 +
 packages/icons/package.json                   |  2 +-
 packages/internet-header/CHANGELOG.md         |  7 +++
 packages/internet-header/package.json         |  4 +-
 .../intranet-header-workspace/CHANGELOG.md    |  7 +++
 .../intranet-header-workspace/package.json    |  4 +-
 .../intranet-header-showcase/CHANGELOG.md     |  7 +++
 .../intranet-header-showcase/package.json     |  4 +-
 .../projects/intranet-header/CHANGELOG.md     |  7 +++
 .../projects/intranet-header/package.json     |  6 +-
 packages/migrations/CHANGELOG.md              |  2 +
 packages/migrations/package.json              |  2 +-
 packages/nextjs-integration/CHANGELOG.md      |  9 +++
 packages/nextjs-integration/package.json      |  8 +--
 .../styles-primeng-workspace/CHANGELOG.md     |  7 +++
 .../styles-primeng-workspace/package.json     |  4 +-
 .../projects/styles-primeng/CHANGELOG.md      |  7 +++
 .../projects/styles-primeng/package.json      |  4 +-
 packages/styles/CHANGELOG.md                  | 22 +++++++
 packages/styles/package.json                  |  6 +-
 packages/tokens/CHANGELOG.md                  |  2 +
 packages/tokens/package.json                  |  2 +-
 pnpm-lock.yaml                                | 52 ++++++++--------
 36 files changed, 302 insertions(+), 85 deletions(-)

diff --git a/.changeset/pre.json b/.changeset/pre.json
index dd59e1d095..0a150682b6 100644
--- a/.changeset/pre.json
+++ b/.changeset/pre.json
@@ -33,7 +33,9 @@
     "blue-kings-beg",
     "brave-kings-dance",
     "breezy-cups-add",
+    "bright-insects-unite",
     "brown-badgers-dream",
+    "calm-rabbits-pull",
     "chatty-kiwis-travel",
     "chatty-spoons-unite",
     "chilled-owls-walk",
@@ -47,6 +49,7 @@
     "dirty-mayflies-taste",
     "dirty-squids-hunt",
     "dry-moons-walk",
+    "dry-trainers-stare",
     "dull-falcons-hope",
     "eight-turkeys-matter",
     "eleven-keys-work",
@@ -64,13 +67,18 @@
     "gold-chairs-grin",
     "gold-chefs-rule",
     "gold-dryers-drop",
+    "gold-news-repair",
     "gorgeous-flowers-flow",
+    "gorgeous-glasses-end",
+    "gorgeous-needles-run",
     "great-humans-talk",
     "grumpy-lobsters-agree",
     "grumpy-parrots-wonder",
+    "heavy-eyes-live",
     "heavy-rats-explode",
     "hip-gifts-give",
     "honest-numbers-end",
+    "hungry-penguins-turn",
     "itchy-meals-drum",
     "khaki-cougars-itch",
     "kind-buses-trade",
@@ -87,11 +95,16 @@
     "metal-rivers-look",
     "nasty-ads-greet",
     "neat-suits-provide",
+    "nervous-lizards-laugh",
     "nervous-rocks-shop",
+    "new-cougars-count",
     "new-goats-impress",
     "new-pianos-mix",
+    "nice-cycles-provide",
     "nice-ligers-attend",
+    "nine-baboons-rule",
     "ninety-nails-float",
+    "old-spiders-travel",
     "orange-maps-tan",
     "pink-weeks-relate",
     "plenty-apricots-raise",
@@ -108,6 +121,7 @@
     "quick-mails-joke",
     "quiet-apes-rhyme",
     "rare-dryers-count",
+    "real-gorillas-behave",
     "red-cobras-cry",
     "red-lies-lick",
     "red-moose-do",
@@ -128,25 +142,32 @@
     "slimy-plums-sniff",
     "slimy-rockets-pull",
     "slow-fishes-reply",
+    "smooth-bugs-explode",
     "soft-moles-whisper",
+    "soft-pugs-dream",
     "strange-bottles-impress",
     "strange-mice-bake",
     "stupid-walls-tie",
     "tame-terms-push",
+    "tender-laws-confess",
     "thirty-cats-juggle",
     "three-lies-do",
     "tidy-dolls-walk",
     "tidy-keys-push",
     "tidy-paws-type",
     "tiny-socks-count",
+    "tough-cheetahs-clean",
     "tricky-crews-agree",
+    "twenty-chairs-kick",
     "twenty-items-drum",
+    "violet-poems-attend",
     "warm-drinks-prove",
     "weak-falcons-study",
     "weak-jars-rhyme",
     "wild-bugs-work",
     "wise-spies-shave",
     "wise-tomatoes-brake",
+    "yellow-gifts-sit",
     "yellow-yaks-jog"
   ]
 }
diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
index dac8ffd293..dfef9566ba 100644
--- a/packages/components-angular/CHANGELOG.md
+++ b/packages/components-angular/CHANGELOG.md
@@ -1,5 +1,13 @@
 # @swisspost/design-system-components-angular-workspace
 
+## 1.1.10-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 1.1.10-next.8
 
 ### Patch Changes
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
index 77476b8813..f3fcec1e57 100644
--- a/packages/components-angular/package.json
+++ b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular-workspace",
-  "version": "1.1.10-next.8",
+  "version": "1.1.10-next.9",
   "scripts": {
     "start": "ng serve --port 9210",
     "build": "ng build components",
@@ -18,8 +18,8 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "zone.js": "0.14.8"
diff --git a/packages/components-angular/projects/components/CHANGELOG.md b/packages/components-angular/projects/components/CHANGELOG.md
index 9711a4ec09..f08d9d448d 100644
--- a/packages/components-angular/projects/components/CHANGELOG.md
+++ b/packages/components-angular/projects/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-angular
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/components-angular/projects/components/package.json b/packages/components-angular/projects/components/package.json
index 845bdc6452..bd4a0c44b7 100644
--- a/packages/components-angular/projects/components/package.json
+++ b/packages/components-angular/projects/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-angular",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Swiss Post Design System - Angular Wrapper Components",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "tslib": "2.6.3",
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
index 8c9419a1cd..816d41a2c6 100644
--- a/packages/components-react/CHANGELOG.md
+++ b/packages/components-react/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-components-react
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
index 6db0c2c351..9d8dad0a91 100644
--- a/packages/components-react/package.json
+++ b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components-react",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design System React Components for easy integration with the React ecosystem",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -29,7 +29,7 @@
     "lint": "eslint src/**/*.ts"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9"
   },
   "devDependencies": {
     "@types/node": "20.14.14",
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 22e837531b..f40588bf27 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -1,5 +1,44 @@
 # @swisspost/design-system-components
 
+## 9.0.0-next.9
+
+### Major Changes
+
+- Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state. (by [@alizedebray](https://github.com/alizedebray) with [#4223](https://github.com/swisspost/design-system/pull/4223))
+
+### Minor Changes
+
+- Added composable footer component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-megadropdown` component. (by [@leagrdv](https://github.com/leagrdv) with [#4177](https://github.com/swisspost/design-system/pull/4177))
+
+- Added the parts `button` and `body` in the `post-accordion-item` component, so one can override styles from the outside. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4065](https://github.com/swisspost/design-system/pull/4065))
+
+- Added the css parts `button` and `body` in the `post-accorddion-item` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Added the `post-language-switch` component that enables users to change the language of a page. (by [@leagrdv](https://github.com/leagrdv) with [#4044](https://github.com/swisspost/design-system/pull/4044))
+
+### Patch Changes
+
+- Switched mega dropdown content to one column on mobile. (by [@leagrdv](https://github.com/leagrdv) with [#4300](https://github.com/swisspost/design-system/pull/4300))
+
+- Fixed opening state of megadropdown trigger and expanded detection. (by [@leagrdv](https://github.com/leagrdv) with [#4299](https://github.com/swisspost/design-system/pull/4299))
+
+- Fix tab isolation in nested `post-tabs` components by scoping tab queries and interactions to the current instance. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4211](https://github.com/swisspost/design-system/pull/4211))
+
+- Added a fixed slot `post-list-item` on the `post-list-item` host element, so it is no longer necessary to add it manually. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Fixed the used `headingLevel` in the `post-accorddion-item` component. The component now uses the value from its closest `post-accorddion` parent component, if this is specified and falls back to `h2` if not specified. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated the `post-togglebutton` to function like a real button, including support for keyboard navigation and proper focus styles. (by [@alizedebray](https://github.com/alizedebray) with [#4242](https://github.com/swisspost/design-system/pull/4242))
+
+- Fixed an issue with the post-list component where the `horizontal` property could not be set programmatically. Also, reduced the specificity of the component's styles to make customization easier. (by [@alizedebray](https://github.com/alizedebray) with [#4137](https://github.com/swisspost/design-system/pull/4137))
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-icons@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Minor Changes
diff --git a/packages/components/package.json b/packages/components/package.json
index 2068ff5214..d261b38173 100644
--- a/packages/components/package.json
+++ b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-components",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "A collection of web components built with Stencil JS for the Swiss Post Design System.",
   "license": "Apache-2.0",
   "main": "dist/index.cjs.js",
@@ -40,8 +40,8 @@
   "dependencies": {
     "@floating-ui/dom": "1.6.8",
     "@oddbird/popover-polyfill": "0.3.7",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "ally.js": "1.4.1",
     "long-press-event": "2.5.0",
     "nanoid": "5.0.9"
diff --git a/packages/documentation/CHANGELOG.md b/packages/documentation/CHANGELOG.md
index b7c127a363..9ea15657c3 100644
--- a/packages/documentation/CHANGELOG.md
+++ b/packages/documentation/CHANGELOG.md
@@ -1,5 +1,32 @@
 # @swisspost/design-system-documentation
 
+## 6.0.0-next.10
+
+### Minor Changes
+
+- Added the `post-breadcrumb` component to provide a standalone breadcrumb navigation solution. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4065](https://github.com/swisspost/design-system/pull/4065))
+
+- Updated the utility classes for sizing. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+- Added the css parts `button` and `body` in the `post-accorddion-item` component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated `.btn-link` to look like a regular link and old `.btn-link` is now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv) with [#4200](https://github.com/swisspost/design-system/pull/4200))
+
+- Implemented new pixel based sizes. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+- Added the `post-language-switch` component that enables users to change the language of a page. (by [@leagrdv](https://github.com/leagrdv) with [#4044](https://github.com/swisspost/design-system/pull/4044))
+
+### Patch Changes
+
+- Updated the `post-togglebutton` component to offer greater flexibility. You can now control the visibility of elements within the `post-togglebutton` using the `data-showwhen="toggled"` and `data-showwhen="untoggled"` attributes. Any content without a `data-showwhen` attribute will always be visible, regardless of the toggle state. (by [@alizedebray](https://github.com/alizedebray) with [#4223](https://github.com/swisspost/design-system/pull/4223))
+- Updated dependencies:
+  - @swisspost/design-system-components@9.0.0-next.9
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-components-react@9.0.0-next.9
+  - @swisspost/internet-header@2.0.0-next.9
+  - @swisspost/design-system-tokens@9.0.0-next.9
+  - @swisspost/design-system-icons@9.0.0-next.9
+
 ## 6.0.0-next.9
 
 ### Major Changes
diff --git a/packages/documentation/package.json b/packages/documentation/package.json
index 6c16faee3d..275e7f7bf1 100644
--- a/packages/documentation/package.json
+++ b/packages/documentation/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-documentation",
-  "version": "6.0.0-next.9",
+  "version": "6.0.0-next.10",
   "description": "Swiss Post Design System Documentation.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -28,12 +28,12 @@
     "lint": "eslint **/*.{ts,tsx,mdx}"
   },
   "dependencies": {
-    "@swisspost/design-system-components": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.8",
-    "@swisspost/internet-header": "workspace:2.0.0-next.8",
+    "@swisspost/design-system-components": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.9",
+    "@swisspost/internet-header": "workspace:2.0.0-next.9",
     "bootstrap": "5.3.3"
   },
   "devDependencies": {
@@ -54,8 +54,8 @@
     "@storybook/types": "8.3.6",
     "@storybook/web-components": "8.3.6",
     "@storybook/web-components-vite": "8.3.6",
-    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-components-angular": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.9",
     "@types/css-modules": "1.0.5",
     "@types/mdx": "2.0.13",
     "@types/react": "18.3.3",
diff --git a/packages/documentation/public/_redirects b/packages/documentation/public/_redirects
index 9537b51f5f..a9163cf506 100644
--- a/packages/documentation/public/_redirects
+++ b/packages/documentation/public/_redirects
@@ -11,3 +11,4 @@
 
 
 
+
diff --git a/packages/documentation/public/assets/versions.json b/packages/documentation/public/assets/versions.json
index 3aff9f35d1..8c103ea1da 100644
--- a/packages/documentation/public/assets/versions.json
+++ b/packages/documentation/public/assets/versions.json
@@ -1,7 +1,7 @@
 [
   {
     "title": "Version 9",
-    "version": "9.0.0-next.8",
+    "version": "9.0.0-next.9",
     "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
     "url": "https://design-system.post.ch",
     "dependencies": {
@@ -9,22 +9,50 @@
       "@ng-bootstrap/ng-bootstrap": "^17.0.0",
       "bootstrap": "~5.3.0",
       "@swisspost/design-system-changelog-github": "1.0.2",
-      "@swisspost/design-system-components": "9.0.0-next.8",
-      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.8",
-      "@swisspost/design-system-components-angular": "9.0.0-next.8",
-      "@swisspost/design-system-components-react": "9.0.0-next.8",
-      "@swisspost/design-system-documentation": "6.0.0-next.9",
-      "@swisspost/design-system-icons": "9.0.0-next.8",
-      "@swisspost/internet-header": "2.0.0-next.8",
-      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.8",
-      "@swisspost/design-system-intranet-header": "9.0.0-next.8",
-      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.8",
-      "@swisspost/design-system-migrations": "9.0.0-next.8",
-      "@swisspost/design-system-nextjs-integration": "0.1.14-next.8",
-      "@swisspost/design-system-styles": "9.0.0-next.8",
-      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.8",
-      "@swisspost/design-system-styles-primeng": "9.0.0-next.8",
-      "@swisspost/design-system-tokens": "9.0.0-next.8"
+      "@swisspost/design-system-components": "9.0.0-next.9",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.9",
+      "@swisspost/design-system-components-angular": "9.0.0-next.9",
+      "@swisspost/design-system-components-react": "9.0.0-next.9",
+      "@swisspost/design-system-documentation": "6.0.0-next.10",
+      "@swisspost/design-system-icons": "9.0.0-next.9",
+      "@swisspost/internet-header": "2.0.0-next.9",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.9",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.9",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.9",
+      "@swisspost/design-system-migrations": "9.0.0-next.9",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.9",
+      "@swisspost/design-system-styles": "9.0.0-next.9",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.9",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.9",
+      "@swisspost/design-system-tokens": "9.0.0-next.9"
+    }
+  },
+  {
+    "title": "Version 9",
+    "version": "9.0.0-next.8",
+    "description": "Pattern documentation, code snippets and implementation guidelines for the Design System Styles.",
+    "url": "https://swisspost-design-system-version-9.netlify.app",
+    "dependencies": {
+      "@angular/core": "^18.0.0",
+      "@ng-bootstrap/ng-bootstrap": "^17.0.0",
+      "bootstrap": "~5.3.0",
+      "@swisspost/design-system-changelog-github": "1.0.2",
+      "@swisspost/design-system-components": "9.0.0-next.2",
+      "@swisspost/design-system-components-angular-workspace": "1.1.10-next.2",
+      "@swisspost/design-system-components-angular": "9.0.0-next.2",
+      "@swisspost/design-system-components-react": "9.0.0-next.2",
+      "@swisspost/design-system-documentation": "6.0.0-next.2",
+      "@swisspost/design-system-icons": "9.0.0-next.2",
+      "@swisspost/internet-header": "1.14.6-next.2",
+      "@swisspost/design-system-intranet-header-workspace": "3.0.22-next.2",
+      "@swisspost/design-system-intranet-header": "9.0.0-next.2",
+      "@swisspost/design-system-intranet-header-showcase": "1.0.10-next.2",
+      "@swisspost/design-system-migrations": "9.0.0-next.2",
+      "@swisspost/design-system-nextjs-integration": "0.1.14-next.2",
+      "@swisspost/design-system-styles": "9.0.0-next.2",
+      "@swisspost/design-system-styles-primeng-workspace": "1.0.6-next.2",
+      "@swisspost/design-system-styles-primeng": "9.0.0-next.2",
+      "@swisspost/design-system-tokens": "9.0.0-next.2"
     }
   },
   {
diff --git a/packages/icons/CHANGELOG.md b/packages/icons/CHANGELOG.md
index a7bace80e0..807dd0d607 100644
--- a/packages/icons/CHANGELOG.md
+++ b/packages/icons/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-icons
 
+## 9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Minor Changes
diff --git a/packages/icons/package.json b/packages/icons/package.json
index b03a924ce3..0f3b5682c3 100644
--- a/packages/icons/package.json
+++ b/packages/icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-icons",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "A collection of Swiss Post icons intended for use with the Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/internet-header/CHANGELOG.md b/packages/internet-header/CHANGELOG.md
index 2db462b044..f7dd748648 100644
--- a/packages/internet-header/CHANGELOG.md
+++ b/packages/internet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/internet-header
 
+## 2.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 2.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/internet-header/package.json b/packages/internet-header/package.json
index 76ecec1354..6dde983e09 100644
--- a/packages/internet-header/package.json
+++ b/packages/internet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/internet-header",
-  "version": "2.0.0-next.8",
+  "version": "2.0.0-next.9",
   "description": "The header for client facing applications.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -43,7 +43,7 @@
     "generate": "stencil generate"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "body-scroll-lock": "4.0.0-beta.0",
     "iframe-resizer": "4.4.5",
     "jquery": "3.7.1",
diff --git a/packages/intranet-header-workspace/CHANGELOG.md b/packages/intranet-header-workspace/CHANGELOG.md
index 0f5df4ea7d..97f5d85a8c 100644
--- a/packages/intranet-header-workspace/CHANGELOG.md
+++ b/packages/intranet-header-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-workspace
 
+## 3.0.22-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 3.0.22-next.8
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/package.json b/packages/intranet-header-workspace/package.json
index 95956f194b..de134fc131 100644
--- a/packages/intranet-header-workspace/package.json
+++ b/packages/intranet-header-workspace/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header-workspace",
-  "version": "3.0.22-next.8",
+  "version": "3.0.22-next.9",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -23,7 +23,7 @@
     "@angular/router": "18.2.13",
     "@ng-bootstrap/ng-bootstrap": "17.0.0",
     "@popperjs/core": "2.11.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
     "watch": "1.0.2",
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
index b21c4ce804..aafbc814da 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header-showcase
 
+## 1.0.10-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-intranet-header@9.0.0-next.9
+
 ## 1.0.10-next.8
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
index c18ba6a52f..75ca1ed84b 100644
--- a/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header-showcase/package.json
@@ -1,9 +1,9 @@
 {
   "name": "@swisspost/design-system-intranet-header-showcase",
-  "version": "1.0.10-next.8",
+  "version": "1.0.10-next.9",
   "license": "Apache-2.0",
   "private": true,
   "dependencies": {
-    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.8"
+    "@swisspost/design-system-intranet-header": "workspace:9.0.0-next.9"
   }
 }
diff --git a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
index 7e2cc17e10..49b833b831 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
+++ b/packages/intranet-header-workspace/projects/intranet-header/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-intranet-header
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/intranet-header-workspace/projects/intranet-header/package.json b/packages/intranet-header-workspace/projects/intranet-header/package.json
index cee0dd96ac..b395ba1e61 100644
--- a/packages/intranet-header-workspace/projects/intranet-header/package.json
+++ b/packages/intranet-header-workspace/projects/intranet-header/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-intranet-header",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Intranet header for internal Swiss Post applications as an Angular component.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -18,11 +18,11 @@
     "linkDirectory": true
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "tslib": "2.6.3"
   },
   "devDependencies": {
-    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.8"
+    "@swisspost/design-system-intranet-header-workspace": "workspace:3.0.22-next.9"
   },
   "peerDependencies": {
     "@angular/common": "^16.0.0 || ^17.0.0 || ^18.0.0",
diff --git a/packages/migrations/CHANGELOG.md b/packages/migrations/CHANGELOG.md
index 95272121a5..e52c6ddcde 100644
--- a/packages/migrations/CHANGELOG.md
+++ b/packages/migrations/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-migrations
 
+## 9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ## 9.0.0-next.7
diff --git a/packages/migrations/package.json b/packages/migrations/package.json
index 856c6ed0fa..92123fafcd 100644
--- a/packages/migrations/package.json
+++ b/packages/migrations/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-migrations",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Scripts to migrate an Angular application from one Design System version to another.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/packages/nextjs-integration/CHANGELOG.md b/packages/nextjs-integration/CHANGELOG.md
index 26d7a15efb..940f3dfe9c 100644
--- a/packages/nextjs-integration/CHANGELOG.md
+++ b/packages/nextjs-integration/CHANGELOG.md
@@ -1,5 +1,14 @@
 # @swisspost/design-system-nextjs-integration
 
+## 0.1.14-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+  - @swisspost/design-system-components-react@9.0.0-next.9
+  - @swisspost/internet-header@2.0.0-next.9
+
 ## 0.1.14-next.8
 
 ### Patch Changes
diff --git a/packages/nextjs-integration/package.json b/packages/nextjs-integration/package.json
index a343f8f10b..be32dc764c 100644
--- a/packages/nextjs-integration/package.json
+++ b/packages/nextjs-integration/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-nextjs-integration",
-  "version": "0.1.14-next.8",
+  "version": "0.1.14-next.9",
   "private": true,
   "scripts": {
     "dev": "next dev",
@@ -9,9 +9,9 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@swisspost/design-system-components-react": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
-    "@swisspost/internet-header": "workspace:2.0.0-next.8",
+    "@swisspost/design-system-components-react": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
+    "@swisspost/internet-header": "workspace:2.0.0-next.9",
     "next": "15.0.1",
     "react": "^18",
     "react-dom": "^18"
diff --git a/packages/styles-primeng-workspace/CHANGELOG.md b/packages/styles-primeng-workspace/CHANGELOG.md
index b4d766e1b4..1208e871ef 100644
--- a/packages/styles-primeng-workspace/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng-workspace
 
+## 1.0.6-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 1.0.6-next.8
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/package.json b/packages/styles-primeng-workspace/package.json
index 5a58e45f77..60cb3e674e 100644
--- a/packages/styles-primeng-workspace/package.json
+++ b/packages/styles-primeng-workspace/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@swisspost/design-system-styles-primeng-workspace",
   "description": "Showcase for a Post like custom prime-ng theme",
-  "version": "1.0.6-next.8",
+  "version": "1.0.6-next.9",
   "license": "Apache-2.0",
   "private": true,
   "scripts": {
@@ -22,7 +22,7 @@
     "@angular/platform-browser": "18.2.13",
     "@angular/platform-browser-dynamic": "18.2.13",
     "@angular/router": "18.2.13",
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "primeng": "17.18.7",
     "rxjs": "7.8.1",
     "tslib": "2.6.3",
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
index e384aee8c3..3395842e1d 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @swisspost/design-system-styles-primeng
 
+## 9.0.0-next.9
+
+### Patch Changes
+
+- Updated dependencies:
+  - @swisspost/design-system-styles@9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ### Patch Changes
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/package.json b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
index 90f2fe1261..82bed38adc 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/package.json
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles-primeng",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Swiss Post styles for PrimeNg datatable.",
   "author": "Swiss Post <oss@post.ch>",
   "license": "Apache-2.0",
@@ -23,7 +23,7 @@
     "primeng": "^17.18.0"
   },
   "dependencies": {
-    "@swisspost/design-system-styles": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-styles": "workspace:9.0.0-next.9",
     "tslib": "2.6.3"
   },
   "sideEffects": false,
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 3edf73590f..de60763ac3 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -1,5 +1,27 @@
 # @swisspost/design-system-styles
 
+## 9.0.0-next.9
+
+### Minor Changes
+
+- Added composable footer component. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Removed outdated portal-specific styles, including subnavigation-related rules. (by [@alionazherdetska](https://github.com/alionazherdetska) with [#4186](https://github.com/swisspost/design-system/pull/4186))
+
+- Added the possibility to define a `$child-selector` parameter with our list mixins, so they can be used also with custom elements. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Updated the utility classes for sizing. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+- Updated `.btn-link` to look like a regular link and old `.btn-link` is now `.btn-tertiary .px-0`. (by [@leagrdv](https://github.com/leagrdv) with [#4200](https://github.com/swisspost/design-system/pull/4200))
+
+- Implemented new pixel based sizes. (by [@myrta2302](https://github.com/myrta2302) with [#4012](https://github.com/swisspost/design-system/pull/4012))
+
+### Patch Changes
+
+- Fixed the `btn-icon` styles, so icons within can no longer be rendered too small, because of the inline-padding on the button. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
+- Fixed the appstore-badge styles to get rid of the inline gap below. (by [@oliverschuerch](https://github.com/oliverschuerch) with [#4190](https://github.com/swisspost/design-system/pull/4190))
+
 ## 9.0.0-next.8
 
 ### Major Changes
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 2c1fd2a663..83cf01001d 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-styles",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design System Styles for the Swiss Post web platform.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
@@ -49,8 +49,8 @@
     "gulp-sourcemaps": "3.0.0"
   },
   "devDependencies": {
-    "@swisspost/design-system-icons": "workspace:9.0.0-next.8",
-    "@swisspost/design-system-tokens": "workspace:9.0.0-next.8",
+    "@swisspost/design-system-icons": "workspace:9.0.0-next.9",
+    "@swisspost/design-system-tokens": "workspace:9.0.0-next.9",
     "@types/node": "20.14.14",
     "autoprefixer": "10.4.19",
     "copyfiles": "2.4.1",
diff --git a/packages/tokens/CHANGELOG.md b/packages/tokens/CHANGELOG.md
index ee303ee4eb..7df602c786 100644
--- a/packages/tokens/CHANGELOG.md
+++ b/packages/tokens/CHANGELOG.md
@@ -1,5 +1,7 @@
 # @swisspost/design-system-tokens
 
+## 9.0.0-next.9
+
 ## 9.0.0-next.8
 
 ## 9.0.0-next.7
diff --git a/packages/tokens/package.json b/packages/tokens/package.json
index ed53edebf7..08f97ec4b3 100644
--- a/packages/tokens/package.json
+++ b/packages/tokens/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@swisspost/design-system-tokens",
-  "version": "9.0.0-next.8",
+  "version": "9.0.0-next.9",
   "description": "Design Tokens for the Swiss Post Design System.",
   "author": "Swiss Post <design-system@post.ch>",
   "license": "Apache-2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5031b6aa97..93cd856493 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -47,10 +47,10 @@ importers:
         specifier: 0.3.7
         version: 0.3.7
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       ally.js:
         specifier: 1.4.1
@@ -159,10 +159,10 @@ importers:
         specifier: 18.2.13
         version: 18.2.13(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.13(@angular/animations@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -241,7 +241,7 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../../components
       tslib:
         specifier: 2.6.3
@@ -251,7 +251,7 @@ importers:
   packages/components-react:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components
     devDependencies:
       '@types/node':
@@ -303,22 +303,22 @@ importers:
   packages/documentation:
     dependencies:
       '@swisspost/design-system-components':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components-react
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../icons
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../tokens/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.8
+        specifier: workspace:2.0.0-next.9
         version: link:../internet-header
       bootstrap:
         specifier: 5.3.3
@@ -376,10 +376,10 @@ importers:
         specifier: 8.3.6
         version: 8.3.6(lit@3.1.4)(storybook@8.2.7(@babel/preset-env@7.25.3(@babel/core@7.25.2)))(typescript@5.5.4)(vite@5.4.8(@types/node@22.7.9)(less@4.2.0)(sass-embedded@1.78.0)(sass@1.78.0)(terser@5.31.6))
       '@swisspost/design-system-components-angular':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components-angular/dist/components
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../intranet-header-workspace/dist/intranet-header
       '@types/css-modules':
         specifier: 1.0.5
@@ -520,7 +520,7 @@ importers:
   packages/internet-header:
     dependencies:
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       body-scroll-lock:
         specifier: 4.0.0-beta.0
@@ -671,7 +671,7 @@ importers:
         specifier: 2.11.8
         version: 2.11.8
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       rxjs:
         specifier: 7.8.1
@@ -765,21 +765,21 @@ importers:
         specifier: ^16.0.0 || ^17.0.0 || ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../../styles/dist
       tslib:
         specifier: 2.6.3
         version: 2.6.3
     devDependencies:
       '@swisspost/design-system-intranet-header-workspace':
-        specifier: workspace:3.0.22-next.8
+        specifier: workspace:3.0.22-next.9
         version: link:../..
     publishDirectory: ../../dist/intranet-header
 
   packages/intranet-header-workspace/projects/intranet-header-showcase:
     dependencies:
       '@swisspost/design-system-intranet-header':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../dist/intranet-header
 
   packages/migrations:
@@ -825,13 +825,13 @@ importers:
   packages/nextjs-integration:
     dependencies:
       '@swisspost/design-system-components-react':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../components-react
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       '@swisspost/internet-header':
-        specifier: workspace:2.0.0-next.8
+        specifier: workspace:2.0.0-next.9
         version: link:../internet-header
       next:
         specifier: 15.0.1
@@ -893,10 +893,10 @@ importers:
         version: 3.0.0
     devDependencies:
       '@swisspost/design-system-icons':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../icons
       '@swisspost/design-system-tokens':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../tokens/dist
       '@types/node':
         specifier: 20.14.14
@@ -987,7 +987,7 @@ importers:
         specifier: 18.2.13
         version: 18.2.13(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(@angular/platform-browser@18.2.13(@angular/animations@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(@angular/common@18.2.13(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8))(rxjs@7.8.1))(@angular/core@18.2.13(rxjs@7.8.1)(zone.js@0.14.8)))(rxjs@7.8.1)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../styles/dist
       primeng:
         specifier: 17.18.7
@@ -1063,7 +1063,7 @@ importers:
         specifier: ^18.0.0
         version: 18.1.1(rxjs@7.8.1)(zone.js@0.14.8)
       '@swisspost/design-system-styles':
-        specifier: workspace:9.0.0-next.8
+        specifier: workspace:9.0.0-next.9
         version: link:../../../styles/dist
       primeng:
         specifier: ^17.18.0

From 0300fba665ceb74c24ff3153ea4e6997a39905e7 Mon Sep 17 00:00:00 2001
From: Swiss Post Bot <103635272+swisspost-bot@users.noreply.github.com>
Date: Tue, 17 Dec 2024 11:09:31 +0100
Subject: [PATCH 09/30] chore(tokens): :art: update tokens (#4235)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Merge this PR to update the tokens in the main branch.

Co-authored-by: Tim Schär <59233938+schaertim@users.noreply.github.com>
---
 .../tokens/tokensstudio-generated/tokens.json | 39 +++++++++++++------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/packages/tokens/tokensstudio-generated/tokens.json b/packages/tokens/tokensstudio-generated/tokens.json
index f9f4255a0d..fe27410856 100644
--- a/packages/tokens/tokensstudio-generated/tokens.json
+++ b/packages/tokens/tokensstudio-generated/tokens.json
@@ -1247,7 +1247,7 @@
               "disabled": {
                 "bg": {
                   "$type": "color",
-                  "$value": "{post.core.color.brand.white}"
+                  "$value": "{post.core.color.colorless}"
                 },
                 "fg": {
                   "$type": "color",
@@ -1948,10 +1948,18 @@
               }
             },
             "input": {
-              "enabled": {
+              "disabled": {
+                "bg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.colorless}"
+                },
                 "border": {
                   "$type": "color",
-                  "$value": "{post.core.color.sandgrey.080}"
+                  "$value": "{post.core.color.sandgrey.alpha.lightsand.60}"
+                },
+                "fg": {
+                  "$type": "color",
+                  "$value": "{post.core.color.sandgrey.alpha.lightsand.60}"
                 }
               }
             }
@@ -7113,6 +7121,12 @@
             "text": {
               "$type": "spacing",
               "$value": "{post.device.spacing.padding.block.7}"
+            },
+            "container": {
+              "text": {
+                "$type": "spacing",
+                "$value": "{post.device.spacing.padding.block.9}"
+              }
             }
           },
           "inline": {
@@ -8957,7 +8971,6 @@
         "post.scheme.color.interactive.notification.error.bg": "6165ecb63010c190df5bf65b59d442a4f802a05d",
         "post.scheme.color.interactive.notification.error.icon": "6a602959aae6c213148ff0f586280a123ebff780",
         "post.scheme.color.interactive.notification.error.stroke": "f6a25a2fe2b3146d1684d3906e635ef9505a4c23",
-        "post.scheme.color.interactive.input.enabled.border": "0acd1351445659355ab8d6f7f370fe1c217ebe91",
         "post.scheme.color.surface.default.bg": "76160b240c5dee3ecddf678e49fb08e554103e19",
         "post.scheme.color.surface.default.fg": "0497e52aa5f3173648ad5d0a10d8433eb3f229d4",
         "post.scheme.color.surface.default.stroke": "acff34c0c7e3f3b7360988406c18af0b164393ff",
@@ -8989,16 +9002,17 @@
         "post.cargo.scheme.color.surface.accent.bg": "2dc2983e13aad7ec4e60552838d56966fa9908d6",
         "post.cargo.scheme.color.surface.accent.fg": "e724294b65aca52dcb29118010534f0482bd0881",
         "post.cargo.scheme.color.surface.accent.fg-accent": "9d2202f6c4937b0a006f5bf8886480984ab8efb2",
+        "post.scheme.color.interactive.input.disabled.bg": "751b8e0c0c47287585e354becf6a35bc76d3ef30",
+        "post.scheme.color.interactive.input.disabled.border": "03fcc579a4ae77e80ca5f0e8b4a33c17b07b9944",
+        "post.scheme.color.interactive.input.disabled.fg": "ab50ae4da2b62ef7e661bbd499b51e51b20b6289",
         "post.scheme.color.signal.neutral-dark": "790da7ad43fa67de3b2da99582d332791fb09e9f",
         "post.scheme.color.signal.neutral": "daad7eeff08d93aeed6c1ad67af23e58bdffd198",
         "post.scheme.color.interactive.input.enabled.bg": "ee1559ba9c687a96a4f52b60241ad08d6af675ef",
         "post.scheme.color.interactive.input.enabled.fg": "c0b646bc7315b3eb57777ada948f08b0fd3d718d",
+        "post.scheme.color.interactive.input.enabled.border": "0acd1351445659355ab8d6f7f370fe1c217ebe91",
         "post.scheme.color.interactive.input.hover.bg": "9e0464752dbef48d2c13c82b1865fb29baa976d6",
         "post.scheme.color.interactive.input.hover.fg": "4191ea628c0c943fa24e832a57e02fce109f0a73",
-        "post.scheme.color.interactive.input.hover.border": "69ac281e1d33ebdb46f1512dd957323d89a6cc66",
-        "post.scheme.color.interactive.input.disabled.bg": "751b8e0c0c47287585e354becf6a35bc76d3ef30",
-        "post.scheme.color.interactive.input.disabled.fg": "ab50ae4da2b62ef7e661bbd499b51e51b20b6289",
-        "post.scheme.color.interactive.input.disabled.border": "03fcc579a4ae77e80ca5f0e8b4a33c17b07b9944"
+        "post.scheme.color.interactive.input.hover.border": "69ac281e1d33ebdb46f1512dd957323d89a6cc66"
       }
     },
     {
@@ -10490,6 +10504,7 @@
         "post.switch.element.handle": "c09fd2baa596cab64d62c4fb1fca8fa8c26291c5",
         "post.switch.gap.inline.text": "247b45d301bcca98b2d94934a5bf224368055263",
         "post.switch.padding.block.text": "fdf8cc0d615a1cd0116f36d0e88f0909474b74c2",
+        "post.switch.padding.block.container.text": "29cbdc47443a3446365e6d2120aabaadd5072b50",
         "post.switch.padding.inline.handle": "b512bd24b1efc090fbf71338c7581b91be49db5c",
         "post.switch.border-radius.round": "4cc09b8f409accc41f0553e1fb332ba603b3e501",
         "post.switch.border-width": "c45a9f2a969bb1f731fbb1f2c1433a57d238be0e",
@@ -10597,14 +10612,14 @@
         "post.toast.color.error-icon": "3096bb0553257be18a766df213ba83685ab63040",
         "post.validation.group.gap.inline": "a76607434c393d743d38b71824d9d76e533acca2",
         "post.validation.group.icon.size": "ce5d0ae47c1f80a7ea39a6e5b25a00055c450e7d",
+        "post.validation.group.icon.block.start": "e52e3d301a820f000d2cd339f1fab72a5f09ce81",
+        "post.validation.group.icon.block.end": "f30710c36d79b96b33c33ad8e67524cc1ae3cd7a",
+        "post.validation.group.padding.inline.start": "37c8364dbc202912a5a557a5f8cc026e1f84a3bf",
         "post.validation.error": "796bdb2fc917b5948438070371ae60d214216795",
         "post.validation.success": "b59a525aa81840396e6310baa880de4a66d23371",
         "post.validation.input.padding.block": "4006573d3a03f1b053a844aaf89e14742a3d3646",
         "post.validation.input.padding.inline": "8df0e5f5587acbb1f7acb67a97e200e2175d6469",
-        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f",
-        "post.validation.group.padding.inline.start": "37c8364dbc202912a5a557a5f8cc026e1f84a3bf",
-        "post.validation.group.icon.block.start": "e52e3d301a820f000d2cd339f1fab72a5f09ce81",
-        "post.validation.group.icon.block.end": "f30710c36d79b96b33c33ad8e67524cc1ae3cd7a"
+        "post.validation.font-size": "67f550629b478f48c1579f8acb13edceabbaee4f"
       }
     },
     {

From 019aac1b979d0131440353cff7622b3e2601253b Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Tue, 17 Dec 2024 13:28:26 +0100
Subject: [PATCH 10/30] chore(documentation): add palette scss file import
 documentation (#4127)

---
 .changeset/four-beers-leave.md                               | 5 +++++
 .../src/stories/foundations/palettes/palettes.docs.mdx       | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 .changeset/four-beers-leave.md

diff --git a/.changeset/four-beers-leave.md b/.changeset/four-beers-leave.md
new file mode 100644
index 0000000000..7b61eca6d8
--- /dev/null
+++ b/.changeset/four-beers-leave.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added scss file import documentation to palette.
diff --git a/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx b/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx
index 83a3402eaf..dfb95071a9 100644
--- a/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx
+++ b/packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx
@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as paletteStories from './palettes.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
 
 <Meta of={paletteStories} />
 
@@ -25,3 +26,5 @@ You can apply this text color to any element by using the `.palette-text` class.
 <div className="hide-col-default">
   <Controls of={paletteStories.Default} />
 </div>
+
+<StylesPackageImport components={['post-palettes']} />

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 11/30] 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 12/30] 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 13/30] 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 14/30] =?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 15/30] 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 16/30] 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 17/30] 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 18/30] 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 19/30] 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 20/30] 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 21/30] 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 22/30] 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 23/30] 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 24/30] 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 25/30] 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 26/30] 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 27/30] 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 28/30] =?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) {

From d621d593e2f1444ab9948a11d3562525d8aa0f22 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Thu, 19 Dec 2024 16:38:01 +0100
Subject: [PATCH 29/30] fix(styles): HCM card control checkbox text color
 (#4321)

---
 .changeset/olive-squids-enjoy.md                 | 5 +++++
 packages/styles/src/components/card-control.scss | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/olive-squids-enjoy.md

diff --git a/.changeset/olive-squids-enjoy.md b/.changeset/olive-squids-enjoy.md
new file mode 100644
index 0000000000..f667d96864
--- /dev/null
+++ b/.changeset/olive-squids-enjoy.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': patch
+---
+
+Fixed card control checkboxes' text color in HCM.
diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss
index 049fad2671..325b319bd6 100644
--- a/packages/styles/src/components/card-control.scss
+++ b/packages/styles/src/components/card-control.scss
@@ -173,7 +173,7 @@ fieldset {
       &:where(:has(input:checked), .checked) {
         --post-card-control-border-color: FieldText;
         --post-card-control-bg: SelectedItem;
-        --post-card-control-color: SelectedItemText;
+        --post-card-control-color: FieldText;
         --post-card-control-input-border-color: FieldText;
 
         input.form-check-input[type] {

From ede92e48e7513c627f744070efd4cddd5896ca97 Mon Sep 17 00:00:00 2001
From: Lea <lea.gardavaud@post.ch>
Date: Fri, 20 Dec 2024 10:23:54 +0100
Subject: [PATCH 30/30] chore(styles, documentation): remove usage of
 deprecated utility sizing classes (#4343)
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/fresh-files-crash.md               |   7 +
 .changeset/stale-guests-love.md               |   5 +
 .../cypress/fixtures/post-popover.test.html   |   4 +
 .../post-card-control/post-card-control.scss  |  36 ++---
 .../components/post-rating/post-rating.scss   |   4 +-
 .../components/post-tooltip/post-tooltip.scss |  10 +-
 .../.storybook/addons/addons.scss             |  12 +-
 .../version-switcher/version-switcher.scss    |   8 +-
 .../.storybook/styles/components/blocks.scss  |  26 ++--
 .../.storybook/styles/components/tabs.scss    |  10 +-
 .../.storybook/styles/preview.scss            |   8 +-
 .../src/shared/tile/tile.component.scss       |  21 +--
 .../icons/search/search-icons.styles.scss     |  18 ++-
 .../typography/typography.styles.scss         |  16 ++-
 .../guidelines/angular/angular.styles.scss    |   8 +-
 .../src/stories/introduction.styles.scss      |  15 +-
 .../utilities/elevation/elevation.styles.scss |  14 +-
 .../stories/utilities/flex/flex.styles.scss   |   8 +-
 .../src/stories/utilities/text/text.docs.mdx  |   4 -
 .../stories/utilities/text/text.module.scss   |   1 -
 .../src/lib/primeng-theme/_extensions.scss    |  10 +-
 .../styles/src/components/breadcrumb.scss     |   5 +-
 .../styles/src/components/button-group.scss   |  11 +-
 .../styles/src/components/card-control.scss   |  38 ++---
 packages/styles/src/components/card.scss      |  19 ++-
 packages/styles/src/components/datatable.scss |  39 +++---
 packages/styles/src/components/dialog.scss    |  29 ++--
 packages/styles/src/components/dropdown.scss  |  13 +-
 .../styles/src/components/form-range.scss     |  14 +-
 .../intranet-header/_language-chooser.scss    |   5 +-
 .../components/intranet-header/_sidebar.scss  |  14 +-
 packages/styles/src/components/modal.scss     |   4 +-
 .../styles/src/components/pagination.scss     |  17 ++-
 .../styles/src/components/product-card.scss   |  13 +-
 packages/styles/src/components/sizing.scss    |  45 ------
 packages/styles/src/components/stepper.scss   |  68 ++++-----
 .../styles/src/components/subnavigation.scss  |  29 ++--
 .../src/components/tabs/_tab-title.scss       |  11 +-
 packages/styles/src/mixins/_index.scss        |   1 -
 packages/styles/src/mixins/_notification.scss |   2 +-
 packages/styles/src/mixins/_size.scss         |  65 ---------
 packages/styles/src/mixins/_utilities.scss    |   6 -
 packages/styles/src/variables/_animation.scss |  16 ++-
 packages/styles/src/variables/_spacing.scss   | 131 ------------------
 packages/styles/src/variables/_type.scss      |  13 +-
 .../src/variables/components/_badge.scss      |  14 +-
 .../src/variables/components/_button.scss     |  21 +--
 .../src/variables/components/_card.scss       |   9 +-
 .../src/variables/components/_chip.scss       |  16 ++-
 .../src/variables/components/_close.scss      |  10 +-
 .../src/variables/components/_datatable.scss  |  20 +--
 .../src/variables/components/_form-check.scss |  14 +-
 .../src/variables/components/_forms.scss      |   9 +-
 .../src/variables/components/_modal.scss      |  29 ++--
 .../src/variables/components/_navbar.scss     |  11 +-
 .../variables/components/_notification.scss   |  10 +-
 .../src/variables/components/_pagination.scss |  20 ++-
 .../src/variables/components/_spinners.scss   |   9 +-
 .../src/variables/components/_stepper.scss    |  17 ++-
 .../variables/components/_subnavigation.scss  |  14 +-
 .../src/variables/components/_tables.scss     |  13 +-
 .../styles/src/variables/components/_tag.scss |  17 ++-
 packages/styles/tests/mixins/index.test.scss  |   8 --
 packages/styles/tests/mixins/size.test.scss   |  11 --
 64 files changed, 535 insertions(+), 590 deletions(-)
 create mode 100644 .changeset/fresh-files-crash.md
 create mode 100644 .changeset/stale-guests-love.md
 delete mode 100644 packages/styles/src/mixins/_size.scss
 delete mode 100644 packages/styles/tests/mixins/size.test.scss

diff --git a/.changeset/fresh-files-crash.md b/.changeset/fresh-files-crash.md
new file mode 100644
index 0000000000..56ad7a873e
--- /dev/null
+++ b/.changeset/fresh-files-crash.md
@@ -0,0 +1,7 @@
+---
+'@swisspost/design-system-documentation': patch
+'@swisspost/design-system-components': patch
+'@swisspost/design-system-styles': patch
+---
+
+Removed all usage of deprecated utility sizing classes.
diff --git a/.changeset/stale-guests-love.md b/.changeset/stale-guests-love.md
new file mode 100644
index 0000000000..eb7a80587d
--- /dev/null
+++ b/.changeset/stale-guests-love.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': major
+---
+
+Removed deprecated utility sizing and line-height classes as well as `responsive-size`, `generate-utility-class` and all `bezel-*` mixins.
diff --git a/packages/components/cypress/fixtures/post-popover.test.html b/packages/components/cypress/fixtures/post-popover.test.html
index 23d880fb52..94ba27b7be 100644
--- a/packages/components/cypress/fixtures/post-popover.test.html
+++ b/packages/components/cypress/fixtures/post-popover.test.html
@@ -4,6 +4,10 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Document</title>
+    <link
+      href="../../node_modules/@swisspost/design-system-styles/post-external.css"
+      rel="stylesheet"
+    />
     <script src="../../dist/post-components/post-components.esm.js" type="module"></script>
   </head>
   <body>
diff --git a/packages/components/src/components/post-card-control/post-card-control.scss b/packages/components/src/components/post-card-control/post-card-control.scss
index ba070ab501..4922e020a0 100644
--- a/packages/components/src/components/post-card-control/post-card-control.scss
+++ b/packages/components/src/components/post-card-control/post-card-control.scss
@@ -4,6 +4,10 @@
 @use '@swisspost/design-system-styles/components/form-check';
 @use '@swisspost/design-system-styles/components/checkbox';
 @use '@swisspost/design-system-styles/components/radio-button';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 /*
 * There are a whole bunch of !important statements in this file.
@@ -22,7 +26,7 @@
 :host-context(fieldset) {
   &:host(:not(:last-child)) {
     .card-control {
-      margin-bottom: post.$size-regular;
+      margin-bottom: tokens.get('utility-gap-16');
     }
   }
 }
@@ -38,18 +42,18 @@
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   align-items: center;
-  gap: 0 post.$size-mini;
+  gap: 0 tokens.get('utility-gap-8');
   margin: 0;
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-12');
   background-color: var(--post-card-control-bg);
-  border: post.$size-line solid var(--post-card-control-border-color);
+  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
   border-radius: post.$border-radius;
   color: var(--post-card-control-color) !important;
   cursor: pointer;
 
   .card-control--input {
     grid-area: input;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     background-color: var(--post-card-control-input-bg) !important;
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
@@ -79,7 +83,7 @@
 
   .card-control--label {
     grid-area: label;
-    margin: post.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     padding: 0 !important;
     color: inherit !important;
     pointer-events: none;
@@ -101,8 +105,8 @@
 
   .card-control--icon {
     grid-area: icon;
-    width: post.$size-big;
-    height: post.$size-big;
+    width: tokens.get('utility-gap-32');
+    height: tokens.get('utility-gap-32');
     pointer-events: none;
 
     > slot {
@@ -195,11 +199,11 @@
     --post-card-control-input-border-color: FieldText;
     --post-card-control-input-bg: Field;
 
-    outline: post.$size-line solid Field;
-    outline-offset: post.$size-line * -2;
+    outline: tokens.get('utility-gap-2') solid Field;
+    outline-offset: calc(tokens.get('utility-gap-2') * -2);
 
     .card-control--input {
-      outline: post.$size-line solid Field;
+      outline: tokens.get('utility-gap-2') solid Field;
 
       // selector needed to override the .form-check styles
       &[type] {
@@ -264,7 +268,7 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
+          inset: tokens.get('utility-gap-2');
           background-color: SelectedItem;
           z-index: 1;
         }
@@ -296,8 +300,8 @@
           display: block;
           content: '';
           position: absolute;
-          inset: post.$size-line;
-          border-radius: post.$size-line * 0.5;
+          inset: tokens.get('utility-gap-2');
+          border-radius: calc(tokens.get('utility-gap-2') * 0.5);
           background-color: SelectedItem;
         }
 
@@ -306,7 +310,7 @@
         }
 
         .card-control--input {
-          outline: post.$size-line solid Field;
+          outline: tokens.get('utility-gap-2') solid Field;
         }
       }
     }
@@ -432,7 +436,7 @@
 
 :host([data-context*='fieldset']:not(:last-child)) {
   .card-control {
-    margin-bottom: post.$size-regular;
+    margin-bottom: tokens.get('utility-gap-16');
   }
 }
 
diff --git a/packages/components/src/components/post-rating/post-rating.scss b/packages/components/src/components/post-rating/post-rating.scss
index d3de559cac..852a8100e1 100644
--- a/packages/components/src/components/post-rating/post-rating.scss
+++ b/packages/components/src/components/post-rating/post-rating.scss
@@ -1,4 +1,6 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
 
 :host {
   display: inline-block;
@@ -8,7 +10,7 @@
   display: flex;
   flex-wrap: wrap;
   overflow: hidden;
-  margin: 0 (-(post.$size-micro));
+  margin: 0 calc(tokens.get('utility-gap-4', utilities.$post-spacing) * -1);
   border-radius: post.$border-radius;
 
   .star {
diff --git a/packages/components/src/components/post-tooltip/post-tooltip.scss b/packages/components/src/components/post-tooltip/post-tooltip.scss
index 8d1d131f33..ab40d871bb 100644
--- a/packages/components/src/components/post-tooltip/post-tooltip.scss
+++ b/packages/components/src/components/post-tooltip/post-tooltip.scss
@@ -3,11 +3,15 @@
 @use '@swisspost/design-system-styles/variables/color';
 @use '@swisspost/design-system-styles/functions/color' as color-fn;
 @use '@swisspost/design-system-styles/variables/spacing';
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 post-popovercontainer {
-  padding: spacing.$size-micro spacing.$size-mini;
-  max-width: 2 * spacing.$size-bigger-giant - spacing.$size-mini;
-  min-height: spacing.$size-regular;
+  padding: tokens.get('utility-gap-4') tokens.get('utility-gap-8');
+  max-width: calc(2 * tokens.get('utility-gap-112') - tokens.get('utility-gap-8'));
+  min-height: tokens.get('utility-gap-16');
 
   // Creates a safe space around the popovercontainer for save pointer crossing between trigger and tooltip
   &[arrow] {
diff --git a/packages/documentation/.storybook/addons/addons.scss b/packages/documentation/.storybook/addons/addons.scss
index f6861fbce9..ddaae2c01c 100644
--- a/packages/documentation/.storybook/addons/addons.scss
+++ b/packages/documentation/.storybook/addons/addons.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-spacing;
 
 .addon-label {
   color: post.$body-color !important;
@@ -8,11 +12,11 @@
   min-width: 12rem;
   display: flex;
   flex-flow: column nowrap;
-  gap: post.$size-line;
+  gap: tokens.get('utility-gap-2');
   position: absolute;
   top: -5px;
   right: 0;
-  padding: post.$size-mini;
+  padding: tokens.get('utility-gap-8');
   background-color: post.$white;
   border: post.$border-width solid post.$border-color;
   border-radius: post.$border-radius;
@@ -20,7 +24,7 @@
 
   .addon-dropdown__item {
     display: block;
-    padding: post.$size-mini post.$size-small-regular;
+    padding: tokens.get('utility-gap-8') tokens.get('utility-gap-12');
     border-radius: post.$border-radius-sm;
     text-decoration: none;
     color: post.$body-color !important;
@@ -38,6 +42,6 @@
 .addon-button {
   post-icon {
     font-size: post.$font-size-20;
-    margin-inline-end: post.$size-line;
+    margin-inline-end: tokens.get('utility-gap-2');
   }
 }
diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
index 68ad4c73d5..00be20668d 100644
--- a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
+++ b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens' as tokens;
+@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+
+tokens.$default-map: utilities.$post-spacing;
 
 .version-switcher__loading {
   display: flex;
@@ -17,12 +21,12 @@
 
   .item__deps {
     display: flex;
-    gap: post.$size-small-regular;
+    gap: tokens.get('utility-gap-12');
   }
 
   .deps_dep {
     display: flex;
-    gap: post.$size-line;
+    gap: tokens.get('utility-gap-2');
     font-size: 85%;
   }
 
diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss
index 4d1b551b8c..e7205b7a97 100644
--- a/packages/documentation/.storybook/styles/components/blocks.scss
+++ b/packages/documentation/.storybook/styles/components/blocks.scss
@@ -1,15 +1,19 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use '@swisspost/design-system-styles/elements/body';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 #storybook-docs {
   .sbdocs-preview {
     border-color: post.$border-color;
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
     box-shadow: none;
   }
 
   .docblock-argstable {
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
 
     tbody {
       position: relative;
@@ -22,7 +26,7 @@
         position: absolute;
         inset: 0;
         border: post.$border-width solid post.$border-color;
-        border-radius: post.$size-mini;
+        border-radius: tokens.get('utility-gap-8');
         z-index: -1;
       }
 
@@ -46,33 +50,33 @@
             background-clip: padding-box !important;
 
             &:first-child {
-              border-inline-start: post.$size-line solid transparent;
+              border-inline-start: tokens.get('utility-gap-2') solid transparent;
             }
 
             &:last-child {
-              border-inline-end: post.$size-line solid transparent;
+              border-inline-end: tokens.get('utility-gap-2') solid transparent;
             }
           }
 
           &:first-child > td {
-            border-block-start: post.$size-hair solid transparent;
+            border-block-start: tokens.get('utility-gap-1') solid transparent;
 
             &:first-child {
-              border-start-start-radius: post.$size-mini;
+              border-start-start-radius: tokens.get('utility-gap-8');
             }
 
             &:last-child {
-              border-start-end-radius: post.$size-mini;
+              border-start-end-radius: tokens.get('utility-gap-8');
             }
           }
 
           &:last-child > td {
             &:first-child {
-              border-end-start-radius: post.$size-mini;
+              border-end-start-radius: tokens.get('utility-gap-8');
             }
 
             &:last-child {
-              border-end-end-radius: post.$size-mini;
+              border-end-end-radius: tokens.get('utility-gap-8');
             }
           }
         }
@@ -81,7 +85,7 @@
   }
 
   .docblock-source {
-    border-radius: post.$size-mini;
+    border-radius: tokens.get('utility-gap-8');
     box-shadow: none;
   }
 }
diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss
index 83e1a23c67..7943371d8b 100644
--- a/packages/documentation/.storybook/styles/components/tabs.scss
+++ b/packages/documentation/.storybook/styles/components/tabs.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use '../mixins';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 @include mixins.style-docs-only-guard('post-tabs') {
   &::part(tabs) {
@@ -30,7 +34,7 @@
   }
 
   &:where(.sb-tabs-lg, :has(post-tab-panel > .sbdocs)) {
-    margin-top: post.$size-big;
+    margin-top: tokens.get('utility-gap-32');
 
     &::part(tabs) {
       &::before {
@@ -57,9 +61,9 @@
         display: block;
         content: '';
         position: absolute;
-        top: calc(100% + #{post.$size-regular});
+        top: calc(100% + tokens.get('utility-gap-16'));
         left: 0;
-        right: post.$size-mini * -1;
+        right: calc(tokens.get('utility-gap-8') * -1);
         border-top: post.$border-width dashed post.$border-color;
       }
     }
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index 17ad69d1f9..8e4983d47c 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -2,8 +2,8 @@
 @use '@swisspost/design-system-styles/core.scss' as post;
 @use '@swisspost/internet-header/dist/swisspost-internet-header/swisspost-internet-header.css';
 @use './components';
-@use '@swisspost/design-system-styles/functions/tokens' as tokens;
-@use '@swisspost/design-system-styles/tokens/utilities' as utilities;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
 
 tokens.$default-map: utilities.$post-color;
 
@@ -91,10 +91,10 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
     display: flex;
     flex-wrap: wrap;
     align-items: center;
-    gap: post.$size-mini;
+    gap: tokens.get('utility-gap-8', utilities.$post-spacing);
   }
   .docs-title {
-    margin-bottom: post.$size-mini;
+    margin-bottom: tokens.get('utility-gap-8', utilities.$post-spacing);
 
     :first-child {
       margin-right: auto;
diff --git a/packages/documentation/src/shared/tile/tile.component.scss b/packages/documentation/src/shared/tile/tile.component.scss
index 9896087eb0..f62c4e030d 100644
--- a/packages/documentation/src/shared/tile/tile.component.scss
+++ b/packages/documentation/src/shared/tile/tile.component.scss
@@ -1,13 +1,17 @@
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core.scss' as post;
-@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/mixins/utilities' as utilities-mx;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $tile-size: var(--post-docs-tile-size, 120px);
 $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
 
 :host {
   a {
-    @include utilities.focus-style {
+    @include utilities-mx.focus-style {
       border-radius: post.$border-radius;
     }
   }
@@ -18,12 +22,12 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
     width: $tile-size;
     height: $tile-size;
     background-color: post.$white;
-    border-radius: post.$size-regular;
+    border-radius: tokens.get('utility-gap-16');
     box-shadow: 0 2px 5px 0 rgba(82, 49, 120, 0.3);
     text-decoration: none;
     text-align: center;
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       border: 2px solid transparent;
     }
 
@@ -32,8 +36,8 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
       justify-content: center;
       align-items: center;
       flex: 0 0 auto;
-      padding: 0 post.$size-micro;
-      height: calc(#{post.$size-mini * 2} + 2.2em);
+      padding: 0 tokens.get('utility-gap-4');
+      height: calc((tokens.get('utility-gap-8') * 2) + 2.2em);
       background-color: post.$yellow;
       border-top-left-radius: inherit;
       border-top-right-radius: inherit;
@@ -57,7 +61,7 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
       flex-direction: column;
       justify-content: center;
       align-items: center;
-      gap: post.$size-micro;
+      gap: tokens.get('utility-gap-4');
       border-bottom-left-radius: inherit;
       border-bottom-right-radius: inherit;
 
@@ -83,8 +87,9 @@ $tile-rg-size: var(--post-docs-tile-rg-size, calc($tile-size / 1.2));
     @include post.media-breakpoint-down(md) {
       width: $tile-rg-size;
       height: $tile-rg-size;
+
       .tile--title {
-        height: calc(#{post.$size-mini * 1.5} + 2.2em);
+        height: calc((tokens.get('utility-gap-8') * 1.5) + 2.2em);
 
         ~ .tile--icon {
           ::slotted(img) {
diff --git a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
index df1c6f2194..c85c6fe719 100644
--- a/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
+++ b/packages/documentation/src/stories/foundations/icons/search/search-icons.styles.scss
@@ -1,8 +1,12 @@
-@use '../../../../../node_modules/@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .icon-search {
   .icon-search--filters {
-    margin: post.$size-huge auto;
+    margin: tokens.get('utility-gap-56') auto;
     max-width: 500px;
 
     .freetext {
@@ -30,13 +34,13 @@
 
   .icon-search--results {
     display: grid;
-    gap: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
     grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
-    margin-top: post.$size-big;
+    margin-top: tokens.get('utility-gap-32');
 
     .results--empty {
       display: flex;
-      gap: post.$size-mini;
+      gap: tokens.get('utility-gap-8');
       align-items: center;
       margin-left: auto;
       margin-right: auto;
@@ -61,7 +65,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    padding: post.$size-micro post.$size-regular;
+    padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16');
     width: 100%;
     height: 80px;
     background-color: var(--post-contrast-color-inverted);
@@ -80,7 +84,7 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    padding: post.$size-micro post.$size-regular;
+    padding: tokens.get('utility-gap-4') tokens.get('utility-gap-16');
     background-color: var(--post-gray-10);
     border-top: post.$border-width solid var(--post-gray-20);
     border-bottom-left-radius: post.$border-radius;
diff --git a/packages/documentation/src/stories/foundations/typography/typography.styles.scss b/packages/documentation/src/stories/foundations/typography/typography.styles.scss
index 0a67da490d..2517952df0 100644
--- a/packages/documentation/src/stories/foundations/typography/typography.styles.scss
+++ b/packages/documentation/src/stories/foundations/typography/typography.styles.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .sb-fontface-wrapper {
   display: grid;
@@ -7,8 +11,8 @@
 
   @include post.media-breakpoint-up(md) {
     grid-template-columns: max-content min-content max-content;
-    gap: post.$size-regular;
-    margin-bottom: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
+    margin-bottom: tokens.get('utility-gap-16');
   }
 }
 
@@ -22,9 +26,9 @@
   }
 
   .sb-fontface__settings {
-    margin-top: post.$size-mini;
-    margin-bottom: post.$size-regular;
-    padding-top: post.$size-mini;
+    margin-top: tokens.get('utility-gap-8');
+    margin-bottom: tokens.get('utility-gap-16');
+    padding-top: tokens.get('utility-gap-8');
     border-top: post.$border-width dashed post.$border-color;
 
     .settings__face {
@@ -51,7 +55,7 @@
       margin-top: 0;
       margin-bottom: 0;
       padding-top: 0;
-      padding-left: post.$size-regular;
+      padding-left: tokens.get('utility-gap-16');
       border-top: 0 none;
       border-left: post.$border-width dashed post.$border-color;
     }
diff --git a/packages/documentation/src/stories/guidelines/angular/angular.styles.scss b/packages/documentation/src/stories/guidelines/angular/angular.styles.scss
index e94d151458..cb9d889870 100644
--- a/packages/documentation/src/stories/guidelines/angular/angular.styles.scss
+++ b/packages/documentation/src/stories/guidelines/angular/angular.styles.scss
@@ -1,13 +1,17 @@
 @use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .tile-wrapper {
   display: flex;
   flex-wrap: wrap;
   padding-left: 0;
   list-style-type: none;
-  gap: post.$size-big;
+  gap: tokens.get('utility-gap-32');
 
   @include post.media-breakpoint-down(sm) {
-    gap: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
   }
 }
diff --git a/packages/documentation/src/stories/introduction.styles.scss b/packages/documentation/src/stories/introduction.styles.scss
index 5b2d3545bb..c44c996075 100644
--- a/packages/documentation/src/stories/introduction.styles.scss
+++ b/packages/documentation/src/stories/introduction.styles.scss
@@ -1,6 +1,9 @@
 @use 'sass:map';
 @use '@swisspost/design-system-styles/core.scss' as post;
-@use '@swisspost/design-system-styles/mixins/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 #storybook-docs {
   overflow-x: hidden;
@@ -36,19 +39,19 @@
   padding: 0;
   list-style-type: none;
   justify-content: center;
-  gap: post.$size-big;
+  gap: tokens.get('utility-gap-32');
 
   @include post.media-breakpoint-down(sm) {
-    gap: post.$size-regular;
+    gap: tokens.get('utility-gap-16');
   }
 }
 
 .feature {
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-16');
 
   .feature--icon {
-    margin-bottom: post.$size-regular;
-    font-size: post.$size-huge;
+    margin-bottom: tokens.get('utility-gap-16');
+    font-size: tokens.get('utility-gap-56');
     color: #523178;
   }
 
diff --git a/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss b/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss
index 27a06abd6d..29dc4a3008 100644
--- a/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss
+++ b/packages/documentation/src/stories/utilities/elevation/elevation.styles.scss
@@ -1,25 +1,29 @@
 @use '../../../../node_modules/@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .elevation-container {
   display: flex;
   flex-wrap: wrap;
-  gap: post.$size-big;
-  margin-block: post.$size-large post.$size-bigger-big;
+  gap: tokens.get('utility-gap-32');
+  margin-block: tokens.get('utility-gap-24') tokens.get('utility-gap-40');
 }
 
 .elevation-tile {
-  padding: post.$size-regular;
+  padding: tokens.get('utility-gap-16');
   border-radius: post.$border-radius;
 
   .h3 {
-    margin-bottom: post.$size-large;
+    margin-bottom: tokens.get('utility-gap-24');
     text-transform: capitalize;
   }
 
   dl {
     display: grid;
     grid-template-columns: max-content 1fr;
-    column-gap: post.$size-regular;
+    column-gap: tokens.get('utility-gap-16');
     margin-bottom: 0;
   }
 
diff --git a/packages/documentation/src/stories/utilities/flex/flex.styles.scss b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
index 6c1d78fed9..fca112fcb4 100644
--- a/packages/documentation/src/stories/utilities/flex/flex.styles.scss
+++ b/packages/documentation/src/stories/utilities/flex/flex.styles.scss
@@ -1,4 +1,8 @@
 @use '@swisspost/design-system-styles/core' as post;
+@use '@swisspost/design-system-styles/functions/tokens';
+@use '@swisspost/design-system-styles/tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .flex-story-container,
 .flex-doc-container__demo {
@@ -23,7 +27,7 @@
 .flex-doc-container {
   > * {
     align-self: stretch;
-    padding: post.$size-mini (post.$size-regular * 0.5);
+    padding: tokens.get('utility-gap-8') calc(tokens.get('utility-gap-16') * 0.5);
     border-top: post.$border-width solid post.$border-color;
     flex: 0 0 50%;
 
@@ -48,7 +52,7 @@
   }
 
   .flex-doc-container__demo {
-    padding: post.$size-mini;
+    padding: tokens.get('utility-gap-8');
 
     @include post.media-breakpoint-up(lg) {
       border: post.$border-width solid post.$border-color;
diff --git a/packages/documentation/src/stories/utilities/text/text.docs.mdx b/packages/documentation/src/stories/utilities/text/text.docs.mdx
index 7e093615a2..22dabfe4f2 100644
--- a/packages/documentation/src/stories/utilities/text/text.docs.mdx
+++ b/packages/documentation/src/stories/utilities/text/text.docs.mdx
@@ -80,10 +80,6 @@ import './text.styles.scss';
 
 #### Possible Values
 
-##### Fixed-size (deprecated)
-
-<TextUtilityAPI values={SCSS_VARIABLES.fixedLineHeights} cssPrefix="lh" scssPrefix="line-height" />
-
 ##### Relative
 
 For good accessibility, the line height is set to <code>1.5</code> for body text and <code>1.2</code> for headings.
diff --git a/packages/documentation/src/stories/utilities/text/text.module.scss b/packages/documentation/src/stories/utilities/text/text.module.scss
index 77d9affad9..a25016a868 100644
--- a/packages/documentation/src/stories/utilities/text/text.module.scss
+++ b/packages/documentation/src/stories/utilities/text/text.module.scss
@@ -6,7 +6,6 @@
   fontSizes: [map.keys(post.$font-sizes)];
   fontWeights: [('light', 'normal', 'bold')];
   fontStyles: [('normal', 'italic')];
-  fixedLineHeights: [map.keys(post.$post-sizes)];
   relativeLineHeights: [('1', 'base', 'sm', 'lg')];
   colors: [map.keys(post.$theme-colors)];
 }
diff --git a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss
index ef2b905c51..f953e6ad90 100644
--- a/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss
+++ b/packages/styles-primeng-workspace/projects/styles-primeng/src/lib/primeng-theme/_extensions.scss
@@ -1,5 +1,9 @@
 @use '@swisspost/design-system-styles/core' as post;
 @use './variables' as variables;
+@use '@swisspost/design-system-styles/tokens/utilities';
+@use '@swisspost/design-system-styles/functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .p-datatable-wrapper {
   overflow: initial;
@@ -7,7 +11,7 @@
 
 .p-datatable {
   .p-datatable-thead > tr > th {
-    gap: post.$size-mini;
+    gap: tokens.get('utility-gap-8');
   }
 
   .p-sortable-column {
@@ -31,7 +35,7 @@
   }
 
   p-columnfilter {
-    margin-inline: post.$size-mini;
+    margin-inline: tokens.get('utility-gap-8');
     height: 1.5rem;
 
     filtericon {
@@ -123,7 +127,7 @@
 }
 
 .p-button {
-  gap: post.$size-mini;
+  gap: tokens.get('utility-gap-8');
 
   &.p-button-text {
     color: post.$dark;
diff --git a/packages/styles/src/components/breadcrumb.scss b/packages/styles/src/components/breadcrumb.scss
index 2f821f09e8..2d4a8b4b26 100644
--- a/packages/styles/src/components/breadcrumb.scss
+++ b/packages/styles/src/components/breadcrumb.scss
@@ -10,10 +10,13 @@
 @use './../variables/components/breadcrumbs';
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
 .breadcrumb {
   @extend %font-curve-small;
   flex-wrap: nowrap;
-  height: map.get(spacing.$post-sizes, 'bigger-big');
+  height: tokens.get('utility-gap-40', utilities.$post-spacing);
   overflow: hidden;
   font-weight: type.$font-weight-normal;
   white-space: nowrap;
diff --git a/packages/styles/src/components/button-group.scss b/packages/styles/src/components/button-group.scss
index f8774ffd6d..9179db8931 100644
--- a/packages/styles/src/components/button-group.scss
+++ b/packages/styles/src/components/button-group.scss
@@ -3,16 +3,19 @@
 @use './../themes/bootstrap/core' as *;
 @use './../themes/bootstrap/button-group' as bg;
 
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 @use './../variables/color';
 @use './../variables/spacing';
 @use './../variables/components/button';
 @use './../variables/components/forms';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
 .btn-group {
   max-width: 100%;
   flex-wrap: wrap;
-  row-gap: spacing.$size-micro;
+  row-gap: tokens.get('utility-gap-4', utilities.$post-spacing);
   padding-inline-start: button.$btn-border-width;
 
   > .btn {
@@ -31,7 +34,7 @@
     background-color: color.$yellow;
     color: color.$black;
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       background-color: Highlight;
     }
   }
@@ -41,5 +44,5 @@
   position: absolute;
   clip: rect(0, 0, 0, 0);
   pointer-events: none;
-  @include utilities.focus-style('+ .btn');
+  @include utilities-mx.focus-style('+ .btn');
 }
diff --git a/packages/styles/src/components/card-control.scss b/packages/styles/src/components/card-control.scss
index 325b319bd6..9f4cd95c18 100644
--- a/packages/styles/src/components/card-control.scss
+++ b/packages/styles/src/components/card-control.scss
@@ -3,7 +3,11 @@
 @use '../variables/spacing';
 @use '../variables/components/forms';
 @use '../variables/components/form-check';
-@use '../mixins/utilities';
+@use '../mixins/utilities' as utilities-mx;
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 /*
 * There are a whole bunch of !important statments in this file.
@@ -13,7 +17,7 @@ fieldset {
   .radio-button-card,
   .checkbox-button-card {
     &:not(:last-child) {
-      margin-bottom: spacing.$size-regular;
+      margin-bottom: tokens.get('utility-gap-16');
     }
   }
 }
@@ -29,12 +33,12 @@ fieldset {
   display: grid;
   grid-template: 'input label icon' 'input content content' / min-content auto min-content;
   align-items: center;
-  gap: 0 spacing.$size-mini;
+  gap: 0 tokens.get('utility-gap-8');
   position: relative;
-  padding: spacing.$size-regular;
+  padding: tokens.get('utility-gap-16');
   width: 100%;
   background-color: var(--post-card-control-bg);
-  border: spacing.$size-line solid var(--post-card-control-border-color);
+  border: tokens.get('utility-gap-2') solid var(--post-card-control-border-color);
   border-radius: commons.$border-radius;
   color: var(--post-card-control-color);
   cursor: pointer;
@@ -43,14 +47,14 @@ fieldset {
     grid-area: input;
     position: relative;
     z-index: 2;
-    margin: spacing.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     background-color: var(--post-card-control-input-bg) !important;
     border-color: var(--post-card-control-input-border-color) !important;
     color: var(--post-card-control-input-border-color) !important;
     cursor: inherit;
     transition: none;
 
-    @include utilities.focus-style-none();
+    @include utilities-mx.focus-style-none();
 
     &:hover:not([disabled]) ~ label {
       color: var(--post-contrast-color);
@@ -69,7 +73,7 @@ fieldset {
 
   label {
     grid-area: label;
-    margin: spacing.$size-micro 0;
+    margin: tokens.get('utility-gap-4') 0;
     padding: 0;
     border-radius: inherit;
     transition: none;
@@ -78,7 +82,7 @@ fieldset {
       display: block;
       content: '';
       position: absolute;
-      inset: spacing.$size-line * -1;
+      inset: calc(tokens.get('utility-gap-2') * -1);
       border-radius: inherit;
     }
 
@@ -100,8 +104,8 @@ fieldset {
 
   post-icon {
     grid-area: icon;
-    width: spacing.$size-big;
-    height: spacing.$size-big;
+    width: tokens.get('utility-gap-32');
+    height: tokens.get('utility-gap-32');
     pointer-events: none;
   }
 
@@ -145,18 +149,18 @@ fieldset {
     }
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     --post-card-control-border-color: FieldText;
     --post-card-control-bg: Field;
     --post-card-control-color: FieldText;
     --post-card-control-input-border-color: FieldText;
     --post-card-control-input-bg: Field;
 
-    outline: spacing.$size-line solid Field;
-    outline-offset: spacing.$size-line * -2;
+    outline: tokens.get('utility-gap-2') solid Field;
+    outline-offset: calc(tokens.get('utility-gap-2') * -2);
 
     input.form-check-input[type] {
-      outline: spacing.$size-line solid Field;
+      outline: tokens.get('utility-gap-2') solid Field;
       background-color: Field !important;
 
       &::after {
@@ -209,7 +213,7 @@ fieldset {
           display: block;
           content: '';
           position: absolute;
-          inset: spacing.$size-line;
+          inset: tokens.get('utility-gap-2');
           background-color: SelectedItem;
           z-index: 1;
         }
@@ -286,7 +290,7 @@ fieldset {
         --post-card-control-input-bg: transparent;
       }
 
-      @include utilities.high-contrast-mode() {
+      @include utilities-mx.high-contrast-mode() {
         --post-card-control-border-color: FieldText;
         --post-card-control-bg: Field;
         --post-card-control-color: FieldText;
diff --git a/packages/styles/src/components/card.scss b/packages/styles/src/components/card.scss
index c66363159e..5249aefa17 100644
--- a/packages/styles/src/components/card.scss
+++ b/packages/styles/src/components/card.scss
@@ -7,10 +7,15 @@
 @use './../variables/commons';
 @use './../variables/components/card';
 @use './../functions/sizing';
-@use './../mixins/icons' as icons-mixins;
+@use './../mixins/icons' as icons-mx;
 @use './../variables/icons';
 @use './../variables/animation';
 
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .card-group {
   margin-top: commons.$border-width;
   margin-left: commons.$border-width;
@@ -95,15 +100,15 @@
   .product-card &,
   .card-button & {
     @include media-breakpoint-down(sm) {
-      padding: spacing.$size-regular;
+      padding: tokens.get('utility-gap-16');
     }
 
     @include media-breakpoint-between(sm, md) {
-      padding: spacing.$size-large;
+      padding: tokens.get('utility-gap-24');
     }
 
     @include media-breakpoint-up(md) {
-      padding: spacing.$size-big;
+      padding: tokens.get('utility-gap-32');
     }
   }
 
@@ -172,14 +177,14 @@
   a {
     display: inline-flex;
     align-items: center;
-    padding-inline: spacing.$size-mini;
-    gap: spacing.$size-mini;
+    padding-inline: tokens.get('utility-gap-8');
+    gap: tokens.get('utility-gap-8');
     color: color.$gray-60;
     text-decoration: none;
     -ms-flex-align: center;
 
     &::before {
-      @include icons-mixins.icon(3020);
+      @include icons-mx.icon(3020);
       content: '';
       display: inline-block;
       width: icons.$icon-size-default;
diff --git a/packages/styles/src/components/datatable.scss b/packages/styles/src/components/datatable.scss
index b6f9d0b598..25a86b09c5 100644
--- a/packages/styles/src/components/datatable.scss
+++ b/packages/styles/src/components/datatable.scss
@@ -7,12 +7,17 @@
 @use './../variables/components/datatable';
 @use './../variables/components/forms';
 
-@use './../mixins/button' as button-mixins;
+@use './../mixins/button' as button-mx;
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .datatable-header-cell {
   padding: datatable.$datatable-cell-padding;
   font-weight: datatable.$datatable-header-font-weight;
@@ -65,9 +70,9 @@
 
 .ngx-datatable .sort-btn {
   flex: 0 0 auto;
-  width: spacing.$size-regular;
-  height: spacing.$size-regular;
-  margin-left: spacing.$size-mini;
+  width: tokens.get('utility-gap-16');
+  height: tokens.get('utility-gap-16');
+  margin-left: tokens.get('utility-gap-8');
 
   &.datatable-icon-sort-unset {
     @include icons-mx.icon(2127);
@@ -96,7 +101,7 @@
   .datatable-button {
     display: flex;
     align-items: center;
-    @include button-mixins.reset-button;
+    @include button-mx.reset-button;
     width: datatable.$datatable-button-width;
     height: datatable.$datatable-button-height;
     margin: datatable.$datatable-button-margin;
@@ -120,7 +125,7 @@
   .datatable-row-count-label {
     @extend %font-curve-small;
     flex: 0 0 auto;
-    margin: 0 spacing.$size-mini 0 0;
+    margin: 0 tokens.get('utility-gap-8') 0 0;
   }
 
   .datatable-row-count-input {
@@ -131,7 +136,7 @@
     padding-bottom: 0;
 
     + .datatable-pagination {
-      padding-left: spacing.$size-mini;
+      padding-left: tokens.get('utility-gap-8');
       border-left: datatable.$datatable-footer-separator;
     }
   }
@@ -195,7 +200,7 @@
   }
 }
 
-@include utilities.high-contrast-mode() {
+@include utilities-mx.high-contrast-mode() {
   .ngx-datatable {
     .datatable-header-cell,
     .datatable-body-cell,
@@ -209,8 +214,8 @@
     .datatable-button {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-line);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-2') * -1);
       }
     }
 
@@ -218,12 +223,12 @@
     &:not(.datatable-spaced-cells) {
       .datatable-row-wrapper {
         .datatable-body-cell {
-          border-top: spacing.$size-line solid CanvasText;
+          border-top: tokens.get('utility-gap-2') solid CanvasText;
         }
 
         &:last-child {
           .datatable-body-cell {
-            border-bottom: spacing.$size-line solid CanvasText;
+            border-bottom: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
       }
@@ -233,17 +238,17 @@
     &.datatable-spaced-cells {
       .datatable-row-wrapper {
         .datatable-body-cell {
-          border-top: spacing.$size-line solid CanvasText;
-          border-left: spacing.$size-line solid CanvasText;
+          border-top: tokens.get('utility-gap-2') solid CanvasText;
+          border-left: tokens.get('utility-gap-2') solid CanvasText;
 
           &:last-child {
-            border-right: spacing.$size-line solid CanvasText;
+            border-right: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
 
         &:last-child {
           .datatable-body-cell {
-            border-bottom: spacing.$size-line solid CanvasText;
+            border-bottom: tokens.get('utility-gap-2') solid CanvasText;
           }
         }
       }
diff --git a/packages/styles/src/components/dialog.scss b/packages/styles/src/components/dialog.scss
index 42b4ca2a4b..b241eca883 100644
--- a/packages/styles/src/components/dialog.scss
+++ b/packages/styles/src/components/dialog.scss
@@ -1,11 +1,16 @@
 @use '../mixins/elevation';
-@use '../mixins/utilities';
+@use '../mixins/utilities' as utilities-mx;
 @use '../variables/spacing';
 @use '../variables/color';
 @use '../variables/animation';
 
 @use './../themes/bootstrap/core' as *;
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 dialog {
   @include elevation.elevation('elevation-5');
 
@@ -23,7 +28,7 @@ dialog {
     backdrop-filter: blur(0);
   }
 
-  @include utilities.high-contrast-mode {
+  @include utilities-mx.high-contrast-mode {
     // Show the border in HCM
     border-width: 2px;
 
@@ -72,9 +77,9 @@ dialog {
 }
 
 dialog > .dialog-grid {
-  margin: spacing.$size-regular spacing.$size-regular 0 spacing.$size-regular;
+  margin: tokens.get('utility-gap-16') tokens.get('utility-gap-16') 0 tokens.get('utility-gap-16');
   display: grid;
-  column-gap: spacing.$size-regular;
+  column-gap: tokens.get('utility-gap-16');
   grid-template-columns: auto 1fr auto;
   grid-template-areas:
     'icon header close-button'
@@ -93,14 +98,14 @@ dialog > .dialog-grid {
   grid-area: icon;
   display: block;
 
-  width: spacing.$size-big;
-  height: spacing.$size-big;
+  width: tokens.get('utility-gap-32');
+  height: tokens.get('utility-gap-32');
 
   // Larger icon for bigger notification dialogs
   dialog:not([size='small']) & {
     @include media-breakpoint-up(sm) {
-      width: spacing.$size-small-huge;
-      height: spacing.$size-small-huge;
+      width: tokens.get('utility-gap-48');
+      height: tokens.get('utility-gap-48');
     }
   }
 }
@@ -123,11 +128,11 @@ dialog > .dialog-grid {
   grid-area: controls;
   position: sticky;
   bottom: 0;
-  padding-block: spacing.$size-regular;
+  padding-block: tokens.get('utility-gap-16');
   display: flex;
   flex-wrap: wrap;
   flex-direction: row-reverse;
-  gap: spacing.$size-regular;
+  gap: tokens.get('utility-gap-16');
   background-color: inherit;
 
   button {
@@ -141,8 +146,8 @@ dialog > .dialog-grid {
   position: sticky;
   top: 0;
   grid-area: close-button;
-  width: spacing.$size-large;
-  height: spacing.$size-large;
+  width: tokens.get('utility-gap-24');
+  height: tokens.get('utility-gap-24');
   min-height: 0;
 }
 
diff --git a/packages/styles/src/components/dropdown.scss b/packages/styles/src/components/dropdown.scss
index 4e0499438f..5656e61fc3 100644
--- a/packages/styles/src/components/dropdown.scss
+++ b/packages/styles/src/components/dropdown.scss
@@ -7,7 +7,12 @@
 @use './../variables/icons';
 @use './../variables/spacing';
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 %toggler-icon {
   content: '';
@@ -40,12 +45,12 @@
     margin: 0.25rem 0;
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     .dropdown-item {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-line);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-2') * -1);
       }
     }
   }
diff --git a/packages/styles/src/components/form-range.scss b/packages/styles/src/components/form-range.scss
index 692f4b847a..5992098b6a 100644
--- a/packages/styles/src/components/form-range.scss
+++ b/packages/styles/src/components/form-range.scss
@@ -7,21 +7,23 @@
 @use './../variables/color';
 @use './../variables/spacing';
 @use './../variables/components/forms';
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
+@use '../functions/tokens';
+@use '../tokens/utilities';
 
 $track-height: 4px;
 $webkit-progress-height-adjustment: 2px;
 $webkit-thumb-width: 32px;
 
 .form-range-wrapper {
-  @include utilities.focus-style {
+  @include utilities-mx.focus-style {
     border-radius: commons.$border-radius;
   }
 }
 
 :not(.form-range-wrapper) > {
   .form-range {
-    @include utilities.focus-style {
+    @include utilities-mx.focus-style {
       border-radius: commons.$border-radius;
     }
   }
@@ -90,7 +92,7 @@ $webkit-thumb-width: 32px;
       box-shadow: none; // Remove default style
     }
 
-    @include utilities.focus-style-custom('::-moz-range-thumb') {
+    @include utilities-mx.focus-style-custom('::-moz-range-thumb') {
       outline: none;
     }
   }
@@ -114,12 +116,12 @@ $webkit-thumb-width: 32px;
   }
 
   + .form-hint {
-    margin-top: spacing.$size-regular;
+    margin-top: tokens.get('utility-gap-16', utilities.$post-spacing);
     transform: translateY(#{-0.5 * forms.$form-range-height});
   }
 }
 
-@include utilities.high-contrast-mode() {
+@include utilities-mx.high-contrast-mode() {
   .form-range {
     // linear-gradient is forced to the value of "none" in forced-color mode
     // so, the "forced-color-adjust" property is necessary for "linear-gradient" to continue to work
diff --git a/packages/styles/src/components/intranet-header/_language-chooser.scss b/packages/styles/src/components/intranet-header/_language-chooser.scss
index 173f937b8a..fe15311c2f 100644
--- a/packages/styles/src/components/intranet-header/_language-chooser.scss
+++ b/packages/styles/src/components/intranet-header/_language-chooser.scss
@@ -2,7 +2,8 @@
 @use './../../variables/spacing';
 @use './../../variables/commons';
 
-@use './../../mixins/icons' as icon-mixin;
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
 #languageParent {
   min-width: 18rem;
@@ -14,7 +15,7 @@
 
     .dropdown-item {
       flex: auto 1 1;
-      padding: spacing.$size-small-regular 0;
+      padding: tokens.get('utility-gap-12', utilities.$post-spacing) 0;
       border: commons.$border-width solid color.$gray-20;
       border-top: 0;
       border-left: 0;
diff --git a/packages/styles/src/components/intranet-header/_sidebar.scss b/packages/styles/src/components/intranet-header/_sidebar.scss
index e34dd42ae8..68289de487 100644
--- a/packages/styles/src/components/intranet-header/_sidebar.scss
+++ b/packages/styles/src/components/intranet-header/_sidebar.scss
@@ -1,10 +1,14 @@
-@use './../../mixins/utilities';
+@use './../../mixins/utilities' as utilities-mx;
 @use './../../variables/color';
 @use './../../variables/commons';
 @use './../../variables/spacing';
 @use './../../variables/components/intranet-header';
 
 @use './../../themes/bootstrap/core' as *;
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Sidebar
 #sidebar {
@@ -28,7 +32,7 @@
       background: none;
       border: 0;
 
-      @include utilities.focus-style {
+      @include utilities-mx.focus-style {
         border-radius: commons.$border-radius;
       }
     }
@@ -50,13 +54,13 @@
 
       margin: spacing.$spacer * -1;
       margin-bottom: 0;
-      padding: spacing.$size-mini;
-      padding-left: spacing.$size-regular;
+      padding: tokens.get('utility-gap-8');
+      padding-left: tokens.get('utility-gap-16');
       border-bottom: commons.$border-width solid rgba(var(--post-contrast-color-rgb), 0.2);
       background-color: color.$white;
 
       button {
-        padding: spacing.$size-mini;
+        padding: tokens.get('utility-gap-8');
       }
 
       &:hover,
diff --git a/packages/styles/src/components/modal.scss b/packages/styles/src/components/modal.scss
index e918313797..d1e2a2ea05 100644
--- a/packages/styles/src/components/modal.scss
+++ b/packages/styles/src/components/modal.scss
@@ -44,7 +44,7 @@ post-ngb-modal-content {
 @include media-breakpoint-up(sm) {
   post-ngb-modal-content {
     // prevents the modal from exceeding the height of the screen
-    max-height: calc(100vh - #{2 * modal.$modal-dialog-margin-y-sm-up});
+    max-height: calc(100vh - (2 * modal.$modal-dialog-margin-y-sm-up));
   }
 
   // Right and left margins are set to "auto" from the sm breakpoint
@@ -58,7 +58,7 @@ post-ngb-modal-content {
 @include media-breakpoint-down(sm) {
   post-ngb-modal-content {
     // make the modal cover the full height available on small screens
-    height: calc(100vh - #{2 * modal.$modal-dialog-margin});
+    height: calc(100vh - (2 * modal.$modal-dialog-margin));
   }
 
   .modal-body,
diff --git a/packages/styles/src/components/pagination.scss b/packages/styles/src/components/pagination.scss
index 56309a1682..44b9b19b30 100644
--- a/packages/styles/src/components/pagination.scss
+++ b/packages/styles/src/components/pagination.scss
@@ -5,8 +5,11 @@
 @use './../variables/spacing';
 @use './../variables/commons';
 @use './../variables/icons';
-@use './../mixins/icons' as icon-mixin;
-@use './../mixins/utilities';
+@use './../mixins/icons' as icon-mx;
+@use './../mixins/utilities' as utilities-mx;
+
+@use '../functions/tokens';
+@use '../tokens/utilities';
 
 .pagination {
   .page-item {
@@ -24,12 +27,12 @@
       text-align: center;
       text-decoration: none;
 
-      @include utilities.high-contrast-mode() {
+      @include utilities-mx.high-contrast-mode() {
         &:focus,
         &:focus-within,
         &:focus-visible {
           border-radius: commons.$border-radius;
-          outline: spacing.$size-line solid highlight;
+          outline: tokens.get('utility-gap-2', utilities.$post-spacing) solid highlight;
         }
       }
 
@@ -48,14 +51,14 @@
       &[aria-label='Previous'],
       &[aria-label='Next'] {
         > span {
-          @include icon-mixin.icon(2110);
+          @include icon-mx.icon(2110);
         }
       }
 
       &[aria-label='First'],
       &[aria-label='Last'] {
         > span {
-          @include icon-mixin.icon(2396);
+          @include icon-mx.icon(2396);
         }
       }
 
@@ -79,7 +82,7 @@
       color: pagination.$pagination-active-color;
     }
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       &.active > .page-link {
         background-color: Highlight;
       }
diff --git a/packages/styles/src/components/product-card.scss b/packages/styles/src/components/product-card.scss
index 2cc7536983..35a8b34005 100644
--- a/packages/styles/src/components/product-card.scss
+++ b/packages/styles/src/components/product-card.scss
@@ -9,7 +9,12 @@
 @use './../variables/breakpoints';
 @use './../variables/components/card';
 @use './../functions/sizing';
-@use './../mixins/size' as size-mixin;
+@use './../mixins/media';
+
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 .product-navigation {
   display: flex;
@@ -57,7 +62,11 @@
   }
 
   .card-body {
-    @include size-mixin.responsive-size(regular);
+    padding: tokens.get('utility-gap-16');
+
+    @include media.min(md) {
+      padding: tokens.get('utility-gap-24');
+    }
   }
 
   .post-card-favourit {
diff --git a/packages/styles/src/components/sizing.scss b/packages/styles/src/components/sizing.scss
index bf76e9bf87..4e51471f45 100644
--- a/packages/styles/src/components/sizing.scss
+++ b/packages/styles/src/components/sizing.scss
@@ -21,48 +21,3 @@
     }
   }
 }
-
-// Generate responsive spacing utility classes, a lot of them
-$cache: ();
-
-@each $breakpoint-key, $breakpoint-value in breakpoints.$grid-breakpoints {
-  @if ($breakpoint-key == 'xs') {
-    @each $curve-name, $curve-sizes in spacing.$size-curves {
-      $value: map.get($curve-sizes, $breakpoint-key);
-
-      @each $classname, $property in spacing.$responsive-spacing-properties {
-        $cache: map.set($cache, $classname + $curve-name, $value);
-        @include utilities.generate-utility-class($classname, $curve-name, $property, $value);
-      }
-    }
-  } @else {
-    // Media queries create a scope, upstream variables become read-only and updating the $cache
-    // is impossible from within the media query. Therefore we first compile a stack of utility
-    // classes to compile, and then compile them. With caching, we're able to skip 370 utility
-    // classes from being written (765 vs. 2248 lines of code unminified)
-
-    $stack: ();
-
-    @each $curve-name, $curve-sizes in spacing.$size-curves {
-      $value: map.get($curve-sizes, $breakpoint-key);
-
-      @each $classname, $property in spacing.$responsive-spacing-properties {
-        @if (map.get($cache, $classname + $curve-name) != $value) {
-          $stack: map.set($stack, $classname, $curve-name, $property, $value);
-          $cache: map.set($cache, $classname + $curve-name, $value);
-        }
-      }
-    }
-
-    // Render the stack
-    @include media-breakpoint-up($breakpoint-key) {
-      @each $classname, $class-map in $stack {
-        @each $curve-name, $curve-map in $class-map {
-          @each $property, $value in $curve-map {
-            @include utilities.generate-utility-class($classname, $curve-name, $property, $value);
-          }
-        }
-      }
-    }
-  }
-}
diff --git a/packages/styles/src/components/stepper.scss b/packages/styles/src/components/stepper.scss
index 53159b2d6c..07e4653ae0 100644
--- a/packages/styles/src/components/stepper.scss
+++ b/packages/styles/src/components/stepper.scss
@@ -1,18 +1,29 @@
-@use 'sass:math';
-
 @use './../mixins/icons' as icons-mx;
-@use './../mixins/size' as size-mx;
-@use './../mixins/utilities';
+@use './../mixins/utilities' as utilities-mx;
 
 @use './../variables/color';
 @use './../variables/commons';
 @use './../variables/components/stepper';
 
 @use './../themes/bootstrap/core' as *;
+@use './../mixins/media';
+
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // for backward compatibility
 .stepper-container {
-  @include size-mx.responsive-size('big', 'margin-bottom');
+  margin-bottom: tokens.get('utility-gap-20');
+
+  @include media.min(md) {
+    margin-bottom: tokens.get('utility-gap-32');
+  }
+
+  @include media.min(xl) {
+    margin-bottom: tokens.get('utility-gap-40');
+  }
 
   > .stepper-bar {
     display: none;
@@ -20,7 +31,7 @@
 }
 
 .stepper {
-  @include utilities.reset-list;
+  @include utilities-mx.reset-list;
   // start a counter for the step numbers
   counter-reset: step-index;
 
@@ -29,13 +40,13 @@
   overflow: hidden;
 
   // the first column is half a step wide to make sure the separators are the same size even on small screens
-  grid-template-columns: math.div(stepper.$stepper-indicator-size, 2);
+  grid-template-columns: calc(stepper.$stepper-indicator-size / 2);
 
   // all other columns are 1 fraction of the available space ase we don't know the number of steps
   grid-auto-columns: minmax(0, 1fr);
 
   // we use a padding and negative margin on the last step for the same reason we need the first column
-  padding-inline-end: math.div(stepper.$stepper-indicator-size, 2);
+  padding-inline-end: calc(stepper.$stepper-indicator-size / 2);
 }
 
 .stepper-item {
@@ -44,11 +55,11 @@
   padding-inline-start: 0;
 
   &:not(:first-child) {
-    padding-inline-start: math.div(stepper.$stepper-link-spacing, 2);
+    padding-inline-start: calc(stepper.$stepper-link-spacing / 2);
   }
 
   &:not(:last-child) {
-    padding-inline-end: math.div(stepper.$stepper-link-spacing, 2);
+    padding-inline-end: calc(stepper.$stepper-link-spacing / 2);
     grid-column: span 2;
   }
 
@@ -58,7 +69,7 @@
     content: '';
     display: block;
     position: absolute;
-    inset-block-start: math.div((stepper.$stepper-indicator-size - stepper.$stepper-bar-height), 2);
+    inset-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2);
     height: stepper.$stepper-bar-height;
     background-color: stepper.$stepper-bar-color;
     inset-inline: 0;
@@ -109,7 +120,9 @@
 
   .stepper-item:last-child > & {
     margin-inline-start: auto;
-    margin-inline-end: -1 * math.div(stepper.$stepper-indicator-size, 2); // negative margin matching the container padding
+    margin-inline-end: calc(
+      stepper.$stepper-indicator-size / -2
+    ); // negative margin matching the container padding
     text-align: end;
   }
 
@@ -162,7 +175,7 @@
   @include icons-mx.icon(2105);
   display: block;
   position: absolute;
-  top: math.div((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size), 2);
+  top: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);
   z-index: 1;
   height: stepper.$stepper-indicator-check-icon-size;
   width: stepper.$stepper-indicator-check-icon-size;
@@ -170,21 +183,17 @@
   color: stepper.$stepper-indicator-color;
 
   .stepper-item:first-child > & {
-    left: math.div(
-      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
-      2
+    left: calc(
+      (#{stepper.$stepper-indicator-size} - stepper.$stepper-indicator-check-icon-size) / 2
     );
   }
 
   .stepper-item:not(:first-child, :last-child) > & {
-    left: calc(50% - #{math.div(stepper.$stepper-indicator-check-icon-size, 2)});
+    left: calc(50% - (stepper.$stepper-indicator-check-icon-size / 2));
   }
 
   .stepper-item:last-child > & {
-    right: math.div(
-      (stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size),
-      2
-    );
+    right: calc((stepper.$stepper-indicator-size - stepper.$stepper-indicator-check-icon-size) / 2);
   }
 
   // show only for completed steps
@@ -195,11 +204,11 @@
 
 // hover/focus state
 .stepper-link:is(a[href]) {
-  @include utilities.focus-style {
+  @include utilities-mx.focus-style {
     border-radius: commons.$border-radius;
   }
 
-  @include utilities.focus-hover-style-custom() {
+  @include utilities-mx.focus-hover-style-custom() {
     color: stepper.$stepper-link-color;
 
     .stepper-item[aria-current='step'] > & {
@@ -238,10 +247,7 @@
     // progress bar
     &::before {
       grid-row: -1;
-      margin-block-start: math.div(
-        (stepper.$stepper-indicator-size - stepper.$stepper-bar-height),
-        2
-      );
+      margin-block-start: calc((stepper.$stepper-indicator-size - stepper.$stepper-bar-height) / 2);
       position: static;
     }
 
@@ -291,7 +297,7 @@
   }
 }
 
-@include utilities.high-contrast-mode {
+@include utilities-mx.high-contrast-mode {
   .stepper-item {
     &::before,
     &::after {
@@ -332,7 +338,7 @@
 
   .stepper-link:is(a[href]) {
     .stepper-item[aria-current='step'] > & {
-      @include utilities.focus-hover-style-custom() {
+      @include utilities-mx.focus-hover-style-custom() {
         &::before {
           border-color: Highlight;
         }
@@ -344,7 +350,7 @@
         color: Canvas;
       }
 
-      @include utilities.focus-hover-style-custom() {
+      @include utilities-mx.focus-hover-style-custom() {
         &::before {
           background-color: Highlight;
           color: HighlightText;
@@ -357,7 +363,7 @@
         background-color: LinkText;
       }
 
-      @include utilities.focus-hover-style-custom() {
+      @include utilities-mx.focus-hover-style-custom() {
         &::before {
           background-color: Highlight;
         }
diff --git a/packages/styles/src/components/subnavigation.scss b/packages/styles/src/components/subnavigation.scss
index 7db696a807..0f02c20ed9 100644
--- a/packages/styles/src/components/subnavigation.scss
+++ b/packages/styles/src/components/subnavigation.scss
@@ -2,13 +2,18 @@
 
 @use './../themes/bootstrap/core' as *;
 
-@use './../mixins/utilities';
-@use './../functions/utilities' as utility-functions;
+@use './../mixins/utilities' as utilities-mx;
+@use './../functions/utilities' as utilities-fx;
 @use './../variables/components/subnavigation';
 @use './../variables/animation';
 @use './../variables/spacing';
 @use './../placeholders/text';
 
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 $module-name: 'subnavigation';
 
 .#{$module-name} {
@@ -16,11 +21,11 @@ $module-name: 'subnavigation';
   background-color: subnavigation.$subnavigation-background-color;
 
   &::after {
-    @include utilities.full-width-underscore(
+    @include utilities-mx.full-width-underscore(
       subnavigation.$subnavigation-border-bottom-color,
       subnavigation.$subnavigation-border-bottom-width
     );
-    z-index: utility-functions.z-index(subnavigation, underscore-root);
+    z-index: utilities-fx.z-index(subnavigation, underscore-root);
   }
 
   &-alternate {
@@ -69,11 +74,11 @@ $module-name: 'subnavigation';
       padding: subnavigation.$subnavigation-link-padding-lg;
     }
 
-    @include utilities.high-contrast-mode() {
+    @include utilities-mx.high-contrast-mode() {
       &:hover,
       &:focus-visible {
-        outline: spacing.$size-line solid Highlight;
-        outline-offset: -(spacing.$size-micro);
+        outline: tokens.get('utility-gap-2') solid Highlight;
+        outline-offset: calc(tokens.get('utility-gap-4') * -1);
       }
     }
 
@@ -90,11 +95,11 @@ $module-name: 'subnavigation';
     }
 
     &:not(.active)::after {
-      @include utilities.full-width-underscore(
+      @include utilities-mx.full-width-underscore(
         #{subnavigation.$subnavigation-link-underscore-color-hover},
         #{subnavigation.$subnavigation-link-underscore-height}
       );
-      z-index: utility-functions.z-index(subnavigation, underscore-link);
+      z-index: utilities-fx.z-index(subnavigation, underscore-link);
       right: animation.$transition-distance-medium;
       left: animation.$transition-distance-medium;
       opacity: 0;
@@ -116,16 +121,16 @@ $module-name: 'subnavigation';
       font-weight: $font-weight-bold;
 
       &::after {
-        @include utilities.full-width-underscore(
+        @include utilities-mx.full-width-underscore(
           #{subnavigation.$subnavigation-link-underscore-color-active},
           #{subnavigation.$subnavigation-link-underscore-height}
         );
-        z-index: utility-functions.z-index(subnavigation, underscore-link);
+        z-index: utilities-fx.z-index(subnavigation, underscore-link);
       }
     }
   }
 
-  @include utilities.high-contrast-mode() {
+  @include utilities-mx.high-contrast-mode() {
     &::after {
       background-color: CanvasText;
     }
diff --git a/packages/styles/src/components/tabs/_tab-title.scss b/packages/styles/src/components/tabs/_tab-title.scss
index 4c18c0b9f3..e28d3be958 100644
--- a/packages/styles/src/components/tabs/_tab-title.scss
+++ b/packages/styles/src/components/tabs/_tab-title.scss
@@ -6,6 +6,11 @@
 @use './../../variables/spacing';
 @use './../../variables/components/nav';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 .tab-title[role='tab'] {
   display: inline-block;
   cursor: pointer;
@@ -69,7 +74,7 @@
       top: 0;
       right: -1px;
       left: -1px;
-      height: spacing.$size-micro;
+      height: tokens.get('utility-gap-4');
       background-color: nav.$nav-tabs-link-active-border-color;
     }
   }
@@ -95,8 +100,8 @@
     &:focus,
     &:focus-within,
     &:focus-visible {
-      outline: spacing.$size-line solid Highlight;
-      outline-offset: -(spacing.$size-micro);
+      outline: tokens.get('utility-gap-2') solid Highlight;
+      outline-offset: calc(tokens.get('utility-gap-4') * -1);
     }
 
     &.active {
diff --git a/packages/styles/src/mixins/_index.scss b/packages/styles/src/mixins/_index.scss
index 5db656187d..208705c310 100644
--- a/packages/styles/src/mixins/_index.scss
+++ b/packages/styles/src/mixins/_index.scss
@@ -10,6 +10,5 @@
 @forward 'list';
 @forward 'notification';
 @forward 'scroll-shadows';
-@forward 'size';
 @forward 'type';
 @forward 'utilities';
diff --git a/packages/styles/src/mixins/_notification.scss b/packages/styles/src/mixins/_notification.scss
index 3d312d6ea1..3a191aac10 100644
--- a/packages/styles/src/mixins/_notification.scss
+++ b/packages/styles/src/mixins/_notification.scss
@@ -60,7 +60,7 @@ tokens.$default-map: components.$post-banner;
   }
 
   &.no-icon {
-    min-height: calc(2 * #{$padding-y} + close.$close-size);
+    min-height: calc(2 * $padding-y + close.$close-size);
     padding-inline-start: $padding-x;
 
     &::before {
diff --git a/packages/styles/src/mixins/_size.scss b/packages/styles/src/mixins/_size.scss
deleted file mode 100644
index 51d27bfe0a..0000000000
--- a/packages/styles/src/mixins/_size.scss
+++ /dev/null
@@ -1,65 +0,0 @@
-@use 'sass:map';
-@use 'sass:string';
-
-@use './../themes/bootstrap/core' as *;
-
-@use './../variables/spacing';
-@use './../functions/utilities';
-
-@mixin bezel-small() {
-  padding: map.get(spacing.$post-sizes, 'mini') map.get(spacing.$post-sizes, 'regular');
-}
-
-@mixin bezel-small-regular() {
-  padding: map.get(spacing.$post-sizes, 'small-regular') map.get(spacing.$post-sizes, 'regular');
-}
-
-@mixin bezel-regular() {
-  padding: map.get(spacing.$post-sizes, 'regular');
-}
-
-@mixin bezel-bigger-regular() {
-  padding: map.get(spacing.$post-sizes, 'small-large');
-}
-
-@mixin bezel-medium() {
-  padding: map.get(spacing.$post-sizes, 'small-large') map.get(spacing.$post-sizes, 'large');
-}
-
-@mixin bezel-large() {
-  padding: map.get(spacing.$post-sizes, 'big');
-}
-
-@mixin bezel-big() {
-  padding: map.get(spacing.$post-sizes, 'bigger-big');
-}
-
-/**
- * Generate responsive size properties for things like height, width, margin, padding, etc.
- * @param $curve-size One of the curve sizes predefined at https://www.experience-hub.ch/document/2307#/grundlagen-web/abstaende
- * @param $property Property key (height, width, padding, margin, top, etc.)
- * @param $template Value template string used for shorthand declarations like padding ("$value auto" = padding: 1rem auto)
- */
-@mixin responsive-size($curve-size: 'regular', $property-key: 'padding', $template: '$value') {
-  $curve: map.get(spacing.$size-curves, $curve-size);
-
-  @if ($curve) {
-    $cache: '';
-
-    @each $key, $value in $curve {
-      @if ($key == 'xs') {
-        #{$property-key}: string.unquote(utilities.replace($template, '$value', $value));
-      } @else {
-        // Don't write unnecessary media queries
-        @if ($cache != $value) {
-          @include media-breakpoint-up($key) {
-            #{$property-key}: string.unquote(utilities.replace($template, '$value', $value));
-          }
-        }
-      }
-      $cache: $value;
-    }
-  } @else {
-    @warn "@mixin responsive-size: Can't find $curve-size: " + $curve-size;
-  }
-}
diff --git a/packages/styles/src/mixins/_utilities.scss b/packages/styles/src/mixins/_utilities.scss
index 71cc9442aa..910b02a29a 100644
--- a/packages/styles/src/mixins/_utilities.scss
+++ b/packages/styles/src/mixins/_utilities.scss
@@ -70,12 +70,6 @@
   pointer-events: none;
 }
 
-@mixin generate-utility-class($classname, $size, $property, $value) {
-  .#{$classname}-#{$size}-r {
-    #{$property}: $value !important;
-  }
-}
-
 @mixin high-contrast-mode() {
   @media (forced-colors: active), (-ms-high-contrast: active), (-ms-high-contrast: white-on-black) {
     @content;
diff --git a/packages/styles/src/variables/_animation.scss b/packages/styles/src/variables/_animation.scss
index 48df5ee979..42489ca857 100644
--- a/packages/styles/src/variables/_animation.scss
+++ b/packages/styles/src/variables/_animation.scss
@@ -1,5 +1,9 @@
 @use 'sass:map';
 @use './spacing';
+@use '../functions/tokens';
+@use '../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Material Design - Motion Guidelines implementation
 // https://material.io/design/motion/
@@ -42,12 +46,12 @@ $transition-easing-bump-in: linear(
 );
 
 // Distances
-$transition-distance-xsmall: map.get(spacing.$post-sizes, 'micro') !default;
-$transition-distance-small: map.get(spacing.$post-sizes, 'small-regular') !default;
-$transition-distance-medium: map.get(spacing.$post-sizes, 'regular') !default;
-$transition-distance-medium-md: map.get(spacing.$post-sizes, 'big') !default;
-$transition-distance-large: map.get(spacing.$post-sizes, 'huge') !default;
-$transition-distance-large-md: map.get(spacing.$post-sizes, 'giant') !default;
+$transition-distance-xsmall: tokens.get('utility-gap-4') !default;
+$transition-distance-small: tokens.get('utility-gap-12') !default;
+$transition-distance-medium: tokens.get('utility-gap-16') !default;
+$transition-distance-medium-md: tokens.get('utility-gap-32') !default;
+$transition-distance-large: tokens.get('utility-gap-56') !default;
+$transition-distance-large-md: tokens.get('utility-gap-80') !default;
 
 $transition-base-timing: $transition-time-default $transition-easing-default !default;
 $transition-base: all $transition-base-timing !default;
diff --git a/packages/styles/src/variables/_spacing.scss b/packages/styles/src/variables/_spacing.scss
index b4d8528415..dae648a9a7 100644
--- a/packages/styles/src/variables/_spacing.scss
+++ b/packages/styles/src/variables/_spacing.scss
@@ -16,137 +16,6 @@ $spacers: (
   5: $spacer * 3,
 ) !default;
 
-// Post-Sizes
-$size-hair: 1px !default;
-$size-line: 2px !default;
-$size-micro: 0.25rem !default; //   ~4px
-$size-mini: 0.5rem !default; //   ~8px
-$size-small-regular: 0.75rem !default; //  ~12px
-$size-regular: 1rem !default; //  ~16px
-$size-small-large: 1.25rem !default; //  ~20px
-$size-large: 1.5rem !default; //  ~24px
-$size-big: 2rem !default; //  ~32px
-$size-bigger-big: 2.5rem !default; //  ~40px
-$size-small-huge: 3rem !default; //  ~48px
-$size-huge: 3.5rem !default; //  ~56px
-$size-small-giant: 4.5rem !default; //  ~72px
-$size-giant: 5rem !default; //  ~80px
-$size-bigger-giant: 7rem !default; // ~112px
-
-$post-sizes: () !default;
-$post-sizes: map.merge(
-  (
-    'hair': $size-hair,
-    'line': $size-line,
-    'micro': $size-micro,
-    'mini': $size-mini,
-    'small-regular': $size-small-regular,
-    'regular': $size-regular,
-    'small-large': $size-small-large,
-    'large': $size-large,
-    'big': $size-big,
-    'bigger-big': $size-bigger-big,
-    'small-huge': $size-small-huge,
-    'huge': $size-huge,
-    'small-giant': $size-small-giant,
-    'giant': $size-giant,
-    'bigger-giant': $size-bigger-giant,
-  ),
-  $post-sizes
-);
-
-// Abstand Gross, Section
-$size-curve-giant: (
-  'xs': $size-huge,
-  'sm': $size-huge,
-  'rg': $size-huge,
-  'md': $size-giant,
-  'lg': $size-giant,
-  'xl': $size-giant,
-) !default;
-
-// Abstand standard
-$size-curve-huge: (
-  'xs': $size-big,
-  'sm': $size-big,
-  'rg': $size-big,
-  'md': $size-bigger-big,
-  'lg': $size-bigger-big,
-  'xl': $size-huge,
-) !default;
-
-// Abstand Section halb
-$size-curve-bigger-big: (
-  'xs': $size-large,
-  'sm': $size-large,
-  'rg': $size-large,
-  'md': $size-small-huge,
-  'lg': $size-small-huge,
-  'xl': $size-small-huge,
-) !default;
-
-// Abstand Breadcrumb, Stepper
-$size-curve-big: (
-  'xs': $size-small-large,
-  'sm': $size-small-large,
-  'rg': $size-small-large,
-  'md': $size-big,
-  'lg': $size-big,
-  'xl': $size-bigger-big,
-) !default;
-
-// H2
-$size-curve-large: (
-  'xs': $size-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-small-large,
-  'lg': $size-small-large,
-  'xl': $size-big,
-) !default;
-
-// Button
-$size-curve-regular: (
-  'xs': $size-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-large,
-  'lg': $size-large,
-  'xl': $size-large,
-) !default;
-
-// Teaser
-$size-curve-small: (
-  'xs': $size-small-regular,
-  'sm': $size-regular,
-  'rg': $size-regular,
-  'md': $size-regular,
-  'lg': $size-regular,
-  'xl': $size-regular,
-) !default;
-
-// Eingabefelder, p, h3, h4
-$size-curve-tiny: (
-  'xs': $size-small-regular,
-  'sm': $size-small-regular,
-  'rg': $size-small-regular,
-  'md': $size-regular,
-  'lg': $size-regular,
-  'xl': $size-regular,
-) !default;
-
-// List of all adaptive size curves
-$size-curves: (
-  'giant': $size-curve-giant,
-  'huge': $size-curve-huge,
-  'bigger-big': $size-curve-bigger-big,
-  'big': $size-curve-big,
-  'large': $size-curve-large,
-  'regular': $size-curve-regular,
-  'small': $size-curve-small,
-  'tiny': $size-curve-tiny,
-) !default;
-
 $responsive-spacing-properties: (
   'm': 'margin',
   'mt': 'margin-top',
diff --git a/packages/styles/src/variables/_type.scss b/packages/styles/src/variables/_type.scss
index 75272390f1..ce1b609e50 100644
--- a/packages/styles/src/variables/_type.scss
+++ b/packages/styles/src/variables/_type.scss
@@ -6,6 +6,11 @@
 @use './components/paragraph';
 @use './../functions/sizing';
 
+@use './../functions/tokens';
+@use './../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Fonts
 //
 // Font, line-height, and color for body text, headings, and more.
@@ -180,10 +185,10 @@ $text-muted: color.$gray-60;
 
 $blockquote-font-weight: $font-weight-bold !default;
 $blockquote-border-left: commons.$border-thick solid color.$black !default;
-$blockquote-border-left-width-md: spacing.$size-micro !default;
-$blockquote-padding-left: spacing.$size-small-regular !default;
-$blockquote-margin-top: spacing.$size-large !default;
-$blockquote-margin-y: spacing.$size-regular !default;
+$blockquote-border-left-width-md: tokens.get('utility-gap-4') !default;
+$blockquote-padding-left: tokens.get('utility-gap-12') !default;
+$blockquote-margin-top: tokens.get('utility-gap-24') !default;
+$blockquote-margin-y: tokens.get('utility-gap-16') !default;
 $blockquote-footer-font-size: math.div(1em * sizing.strip-unit($small-font-size), 100) !default;
 $blockquote-cite-font-weight: $font-weight-normal !default;
 
diff --git a/packages/styles/src/variables/components/_badge.scss b/packages/styles/src/variables/components/_badge.scss
index d4c5a14145..65f09893d3 100644
--- a/packages/styles/src/variables/components/_badge.scss
+++ b/packages/styles/src/variables/components/_badge.scss
@@ -5,6 +5,10 @@
 
 @use './button';
 @use './../../functions/sizing';
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $badge-border-radius: 50rem;
 $badge-line-height: type.$line-height-copy;
@@ -12,12 +16,12 @@ $badge-color: color.$white;
 $badge-bg: color.$error;
 $badge-border: color.$white solid commons.$border-thick;
 
-$badge-height: spacing.$size-large;
-$badge-height-sm: spacing.$size-regular;
-$badge-height-empty: spacing.$size-mini;
+$badge-height: tokens.get('utility-gap-24');
+$badge-height-sm: tokens.get('utility-gap-16');
+$badge-height-empty: tokens.get('utility-gap-8');
 
-$badge-padding-x: spacing.$size-mini;
-$badge-padding-x-sm: spacing.$size-micro;
+$badge-padding-x: tokens.get('utility-gap-8');
+$badge-padding-x-sm: tokens.get('utility-gap-4');
 $badge-padding-x-empty: 0%; // needs a unit for the calculated min-width
 
 $badge-font-size: type.$font-size-12;
diff --git a/packages/styles/src/variables/components/_button.scss b/packages/styles/src/variables/components/_button.scss
index 1249905b40..4c5c9d6748 100644
--- a/packages/styles/src/variables/components/_button.scss
+++ b/packages/styles/src/variables/components/_button.scss
@@ -10,6 +10,7 @@
 
 @use '../../functions/tokens';
 @use '../../tokens/components';
+@use '../../tokens/utilities';
 
 tokens.$default-map: components.$post-button;
 
@@ -60,29 +61,29 @@ $btn-icon-size-map: (
 // Old variables / Used elsewhere than on the v2 button component
 $input-btn-border-width-rem: sizing.px-to-rem($input-btn-border-width);
 
-$input-btn-padding-y: spacing.$size-regular - $input-btn-border-width-rem !default;
-$input-btn-padding-x: spacing.$size-small-large - $input-btn-border-width-rem !default;
+$input-btn-padding-y: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors
+$input-btn-padding-x: sizing.px-to-rem(20) - $input-btn-border-width-rem !default; // px value to avoid build errors
 $input-btn-line-height: type.$line-height-copy !default;
 
-$input-btn-padding-y-sm: spacing.$size-micro !default;
-$input-btn-padding-x-sm: spacing.$size-regular !default;
+$input-btn-padding-y-sm: 4px !default; // px value to avoid build errors
+$input-btn-padding-x-sm: 16px !default; // px value to avoid build errors
 
-$input-btn-padding-y-rg: spacing.$size-small-regular - $input-btn-border-width-rem !default;
-$input-btn-padding-x-rg: spacing.$size-regular - $input-btn-border-width-rem !default;
+$input-btn-padding-y-rg: sizing.px-to-rem(12) - $input-btn-border-width-rem !default; // px value to avoid build errors
+$input-btn-padding-x-rg: sizing.px-to-rem(16) - $input-btn-border-width-rem !default; // px value to avoid build errors
 
-$input-btn-padding-y-lg: spacing.$size-small-regular !default;
-$input-btn-padding-x-lg: spacing.$size-regular !default;
+$input-btn-padding-y-lg: 12px !default; // px value to avoid build errors
+$input-btn-padding-x-lg: 16px !default; // px value to avoid build errors
 
 $input-btn-focus-width: 0.125rem !default; // 2px
 $input-btn-focus-color: rgba(color.$gray-80, 0.25) !default;
 $input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
 
 $btn-height-sm: 2rem;
-$btn-icon-size-sm: spacing.$size-regular !default;
+$btn-icon-size-sm: tokens.get('utility-gap-16', utilities.$post-spacing) !default;
 $btn-font-size-rg: type.$font-size-14 !default;
 $btn-icon-size-rg: 1.125rem !default;
 $btn-height-md: 3rem;
-$btn-icon-size-md: spacing.$size-small-large !default;
+$btn-icon-size-md: tokens.get('utility-gap-20', utilities.$post-spacing) !default;
 $btn-icon-size-lg: 1.375rem !default;
 $old-btn-icon-size-map: (
   'sm': $btn-icon-size-sm,
diff --git a/packages/styles/src/variables/components/_card.scss b/packages/styles/src/variables/components/_card.scss
index e8836a87ab..8e4b3aab3b 100644
--- a/packages/styles/src/variables/components/_card.scss
+++ b/packages/styles/src/variables/components/_card.scss
@@ -4,6 +4,10 @@
 @use './../type';
 @use './../spacing';
 @use './../../functions/sizing';
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Cards
 $card-font-size: type.$font-size-small !default; // Design System only
@@ -14,8 +18,9 @@ $card-margin-top: sizing.calculate-single-box-shadow-size(
   commons.$box-shadow
 ) !default; // ensures the shadow is visible
 
-$card-spacer-y: spacing.$size-small-large !default; // Design System 20px
-$card-spacer-x: spacing.$size-regular !default; // Design System 16px
+$card-spacer-y: 20px !default; // px value to avoid bootstrap build errors
+$card-spacer-x: tokens.get('utility-gap-16') !default;
+
 $card-border-width: commons.$border-width !default;
 $card-border-radius: commons.$border-width * 2 !default; // Design System
 $card-border-color: color.$gray-20 !default; // Design System
diff --git a/packages/styles/src/variables/components/_chip.scss b/packages/styles/src/variables/components/_chip.scss
index df2c9e4617..aa3ca00459 100644
--- a/packages/styles/src/variables/components/_chip.scss
+++ b/packages/styles/src/variables/components/_chip.scss
@@ -8,6 +8,10 @@
 @use './../type';
 
 @use './../../functions/sizing';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $chip-color: color.$gray-80;
 $chip-bg: color.$white;
@@ -17,8 +21,8 @@ $chip-border-radius: commons.$border-radius-pill;
 
 $chip-height: map.get(button.$btn-height-map, 'md');
 $chip-max-width: 100%;
-$chip-padding-x: spacing.$size-regular;
-$chip-gap: spacing.$size-mini;
+$chip-padding-x: tokens.get('utility-gap-16');
+$chip-gap: tokens.get('utility-gap-8');
 
 $chip-font-size: type.$font-size-16;
 $chip-font-weight: type.$font-weight-normal;
@@ -32,7 +36,7 @@ $chip-transition:
 $chip-height-sm: button.$btn-height-sm;
 $chip-gap-sm: sizing.px-to-rem(6px);
 $chip-font-size-sm: type.$font-size-14;
-$chip-padding-x-sm: spacing.$size-small-regular;
+$chip-padding-x-sm: tokens.get('utility-gap-12');
 
 $chip-hover-color: color.$black;
 $chip-hover-bg: color.$gray-20;
@@ -53,7 +57,7 @@ $chip-close-button-icon: 2043;
 $chip-close-button-border-width: commons.$border-width;
 $chip-close-button-border-radius: commons.$border-radius-round;
 $chip-close-button-border: $chip-close-button-border-width solid $chip-border-color;
-$chip-close-button-height: spacing.$size-large;
-$chip-close-button-height-sm: spacing.$size-regular;
+$chip-close-button-height: tokens.get('utility-gap-24');
+$chip-close-button-height-sm: tokens.get('utility-gap-16');
 
-$chip-dismissable-padding-start: spacing.$size-mini;
+$chip-dismissable-padding-start: tokens.get('utility-gap-8');
diff --git a/packages/styles/src/variables/components/_close.scss b/packages/styles/src/variables/components/_close.scss
index 739415c0d9..05b9f2ea36 100644
--- a/packages/styles/src/variables/components/_close.scss
+++ b/packages/styles/src/variables/components/_close.scss
@@ -2,8 +2,12 @@
 @use './../color';
 @use './../spacing';
 @use './../../functions/icons';
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
 
-$close-size: spacing.$size-large !default;
+tokens.$default-map: utilities.$post-spacing;
+
+$close-size: tokens.get('utility-gap-24') !default;
 $close-border-radius: button.$btn-border-radius !default;
 $close-color: color.$black !default;
 $close-hover-color: color.$black !default;
@@ -11,9 +15,9 @@ $close-disabled-color: var(--post-gray-40) !default;
 $close-transition: button.$btn-transition !default;
 
 // DEPRECATED
-$btn-close-width: spacing.$size-large !default;
+$btn-close-width: tokens.get('utility-gap-24') !default;
 $btn-close-height: $btn-close-width !default;
-$btn-close-padding-x: spacing.$size-regular !default;
+$btn-close-padding-x: tokens.get('utility-gap-16') !default;
 $btn-close-color: color.$black !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);
diff --git a/packages/styles/src/variables/components/_datatable.scss b/packages/styles/src/variables/components/_datatable.scss
index 2ee6321713..d38707b9a3 100644
--- a/packages/styles/src/variables/components/_datatable.scss
+++ b/packages/styles/src/variables/components/_datatable.scss
@@ -7,37 +7,41 @@
 @use './../type';
 @use './button';
 @use './../../functions/icons';
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
 
 $datatable-header-font-weight: type.$font-weight-bold;
 $datatable-header-unsorted-color: color.$gray-60;
 
 $datatable-cell-bg: color.$light;
-$datatable-cell-padding-x: spacing.$size-regular;
-$datatable-cell-padding-y: spacing.$size-mini;
+$datatable-cell-padding-x: tokens.get('utility-gap-16');
+$datatable-cell-padding-y: tokens.get('utility-gap-8');
 $datatable-cell-padding: $datatable-cell-padding-y $datatable-cell-padding-x;
-$datatable-cell-margin: spacing.$size-line;
+$datatable-cell-margin: tokens.get('utility-gap-2');
 
 $datatable-inverted-cell-bg: color.$white;
 
-$datatable-flush-border-width: spacing.$size-line;
+$datatable-flush-border-width: tokens.get('utility-gap-2');
 $datatable-flush-border-color: color.$gray-10;
 $datatable-flush-border: $datatable-flush-border-width solid $datatable-flush-border-color;
 
-$datatable-footer-padding-x: spacing.$size-regular;
+$datatable-footer-padding-x: tokens.get('utility-gap-16');
 $datatable-footer-padding-y: button.$input-btn-focus-width;
 $datatable-footer-padding: $datatable-footer-padding-y $datatable-footer-padding-x;
 
-$datatable-footer-separator-width: spacing.$size-line;
+$datatable-footer-separator-width: tokens.get('utility-gap-2');
 $datatable-footer-separator-color: color.$gray-10;
 $datatable-footer-separator: $datatable-flush-border-width solid $datatable-flush-border-color;
 
-$datatable-row-count-input-width: spacing.$size-bigger-giant;
+$datatable-row-count-input-width: tokens.get('utility-gap-112');
 
 $datatable-button-margin: button.$btn-focus-width;
 $datatable-button-width: calc(100% - 2 * #{$datatable-button-margin});
 $datatable-button-height: $datatable-button-width;
 $datatable-button-focus-shadow: button.$btn-focus-box-shadow;
 
-$datatable-progressbar-height: spacing.$size-micro;
+$datatable-progressbar-height: tokens.get('utility-gap-4');
 $datatable-progressbar-backgroundcolor: color.$gray-10;
 $datatable-progressbar-activecolor: color.$yellow;
diff --git a/packages/styles/src/variables/components/_form-check.scss b/packages/styles/src/variables/components/_form-check.scss
index 3623b8676a..85eddf0d30 100644
--- a/packages/styles/src/variables/components/_form-check.scss
+++ b/packages/styles/src/variables/components/_form-check.scss
@@ -6,13 +6,17 @@
 @use './../../functions/icons';
 @use './../../functions/sizing';
 @use './../../functions/forms' as forms-fn;
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
-$form-check-row-gap: spacing.$size-small-regular !default;
-$form-check-column-gap: spacing.$size-mini !default;
-$form-check-margin-bottom: spacing.$size-regular !default;
-$form-check-inline-margin-right: spacing.$size-large !default;
+tokens.$default-map: utilities.$post-spacing;
+
+$form-check-row-gap: tokens.get('utility-gap-12') !default;
+$form-check-column-gap: tokens.get('utility-gap-8') !default;
+$form-check-margin-bottom: tokens.get('utility-gap-16') !default;
+$form-check-inline-margin-right: tokens.get('utility-gap-24') !default;
 $form-check-input-size: 1.375rem !default;
-$form-check-input-size-sm: spacing.$size-regular !default;
+$form-check-input-size-sm: tokens.get('utility-gap-16') !default;
 $form-check-input-border-width: forms.$input-border-width !default;
 $form-check-input-focus-box-shadow: forms.$input-focus-box-shadow !default;
 $form-check-input-disabled-svg-border-width: $form-check-input-border-width * 2;
diff --git a/packages/styles/src/variables/components/_forms.scss b/packages/styles/src/variables/components/_forms.scss
index 4d3d685670..d6832822f4 100644
--- a/packages/styles/src/variables/components/_forms.scss
+++ b/packages/styles/src/variables/components/_forms.scss
@@ -8,6 +8,9 @@
 @use './../spacing';
 @use './../../functions/sizing';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
 // Forms
 
 // Used elsewhere than text input, textarea or select
@@ -16,14 +19,14 @@ $input-padding-y: button.$input-btn-padding-y !default;
 $input-padding-x: button.$input-btn-padding-x !default;
 $input-line-height: type.$line-height-copy !default;
 
-$input-padding-y-sm: button.$input-btn-padding-y-sm !default;
+$input-padding-y-sm: sizing.px-to-rem(button.$input-btn-padding-y-sm) !default;
 $input-line-height-sm: type.$line-height-copy !default;
 
 $input-padding-y-rg: button.$input-btn-padding-y-rg !default;
 $input-padding-x-rg: button.$input-btn-padding-x-rg !default;
 $input-line-height-rg: type.$line-height-copy !default;
 
-$input-padding-y-lg: button.$input-btn-padding-y-lg !default;
+$input-padding-y-lg: sizing.px-to-rem(button.$input-btn-padding-y-lg) !default;
 $input-line-height-lg: type.$line-height-copy !default;
 
 $input-disabled-border-color: var(--post-gray-40); // Design System only
@@ -33,7 +36,7 @@ $input-border-width: button.$input-btn-border-width !default;
 
 $input-focus-width: button.$input-btn-focus-width !default;
 $input-focus-box-shadow: none !default;
-$input-focus-outline-thickness: spacing.$size-line;
+$input-focus-outline-thickness: tokens.get('utility-gap-2', utilities.$post-spacing);
 
 $input-height-border: $input-border-width * 2 !default;
 
diff --git a/packages/styles/src/variables/components/_modal.scss b/packages/styles/src/variables/components/_modal.scss
index 8588f965f8..33eb2d2c74 100644
--- a/packages/styles/src/variables/components/_modal.scss
+++ b/packages/styles/src/variables/components/_modal.scss
@@ -7,21 +7,26 @@
 
 @use './button';
 
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Modals
 
 // Padding applied to the modal footer
-$modal-inner-padding: spacing.$size-regular !default;
+$modal-inner-padding: tokens.get('utility-gap-16') !default;
 
 // Padding applied to the modal body
-$modal-body-padding-y: spacing.$size-mini !default;
-$modal-body-padding-x: spacing.$size-big !default;
+$modal-body-padding-y: tokens.get('utility-gap-8') !default;
+$modal-body-padding-x: tokens.get('utility-gap-32') !default;
 $modal-body-padding: $modal-body-padding-y $modal-body-padding-x !default;
 
 // Margin between elements in footer, must be lower than or equal to 2 * $modal-inner-padding
 $modal-footer-margin-between: 0.5rem !default;
 
-$modal-dialog-margin: spacing.$size-small-regular !default;
-$modal-dialog-margin-y-sm-up: spacing.$size-big !default;
+$modal-dialog-margin: tokens.get('utility-gap-12') !default;
+$modal-dialog-margin-y-sm-up: tokens.get('utility-gap-32') !default;
 
 $modal-title-line-height: type.$line-height-copy !default;
 
@@ -43,7 +48,7 @@ $modal-header-border-color: commons.$border-color !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: $modal-content-border-width !default;
 $modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding-y: spacing.$size-large !default;
+$modal-header-padding-y: tokens.get('utility-gap-24') !default;
 $modal-header-padding-x: $modal-body-padding-x !default;
 $modal-header-padding: $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
 
@@ -52,10 +57,10 @@ $modal-dialog-width-lg: 800px !default;
 $modal-dialog-width-md: 500px !default;
 $modal-dialog-width-sm: 300px !default;
 
-$modal-xl: sizing.px-to-rem($modal-dialog-width-xl) - 2 * $modal-dialog-margin !default;
-$modal-lg: sizing.px-to-rem($modal-dialog-width-lg) - 2 * $modal-dialog-margin !default;
-$modal-md: sizing.px-to-rem($modal-dialog-width-md) - 2 * $modal-dialog-margin !default;
-$modal-sm: sizing.px-to-rem($modal-dialog-width-sm) - 2 * $modal-dialog-margin !default;
+$modal-xl: calc(sizing.px-to-rem($modal-dialog-width-xl) - 2 * #{$modal-dialog-margin}) !default;
+$modal-lg: calc(sizing.px-to-rem($modal-dialog-width-lg) - 2 * #{$modal-dialog-margin}) !default;
+$modal-md: calc(sizing.px-to-rem($modal-dialog-width-md) - 2 * #{$modal-dialog-margin}) !default;
+$modal-sm: calc(sizing.px-to-rem($modal-dialog-width-sm) - 2 * #{$modal-dialog-margin}) !default;
 
 $modal-fade-transform: translate(0, -50px) !default;
 $modal-show-transform: none !default;
@@ -63,6 +68,6 @@ $modal-transition: transform 0.3s ease-out !default;
 $modal-scale-transform: scale(1.02) !default;
 
 // Padding applied to the close button
-$modal-btn-close-margin-y: spacing.$size-mini !default;
-$modal-btn-close-margin-x: spacing.$size-regular !default;
+$modal-btn-close-margin-y: tokens.get('utility-gap-8') !default;
+$modal-btn-close-margin-x: tokens.get('utility-gap-16') !default;
 $modal-btn-close-margin: $modal-btn-close-margin-y $modal-btn-close-margin-x !default;
diff --git a/packages/styles/src/variables/components/_navbar.scss b/packages/styles/src/variables/components/_navbar.scss
index 78365061db..1f5d88e864 100644
--- a/packages/styles/src/variables/components/_navbar.scss
+++ b/packages/styles/src/variables/components/_navbar.scss
@@ -3,13 +3,16 @@
 @use './../type';
 @use './../components/button';
 @use './../components/nav';
-@use './../../functions/utilities';
+@use './../../functions/utilities' as utilities-fx;
+
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
 
 // Bootstrap variables
 $navbar-padding-y: (spacing.$spacer * 0.5) !default;
 $navbar-padding-x: spacing.$spacer !default;
 
-$navbar-nav-link-padding-x: spacing.$size-small-huge !default;
+$navbar-nav-link-padding-x: tokens.get('utility-gap-48', utilities.$post-spacing) !default;
 
 $navbar-brand-font-size: type.$font-size-bigger-regular !default;
 $navbar-brand-height: $navbar-brand-font-size * type.$line-height-copy !default;
@@ -25,7 +28,7 @@ $navbar-dark-hover-color: rgba(color.$white, 0.75) !default;
 $navbar-dark-active-color: color.$white !default;
 $navbar-dark-disabled-color: rgba(color.$white, 0.25) !default;
 
-$navbar-dark-toggler-icon-bg: utilities.replace(
+$navbar-dark-toggler-icon-bg: utilities-fx.replace(
   url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
   '#',
   '%23'
@@ -36,7 +39,7 @@ $navbar-light-color: rgba(color.$black, 0.5) !default;
 $navbar-light-hover-color: rgba(color.$black, 0.7) !default;
 $navbar-light-active-color: rgba(color.$black, 0.9) !default;
 $navbar-light-disabled-color: rgba(color.$black, 0.3) !default;
-$navbar-light-toggler-icon-bg: utilities.replace(
+$navbar-light-toggler-icon-bg: utilities-fx.replace(
   url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"),
   '#',
   '%23'
diff --git a/packages/styles/src/variables/components/_notification.scss b/packages/styles/src/variables/components/_notification.scss
index 5e04f515a5..d99239e64b 100644
--- a/packages/styles/src/variables/components/_notification.scss
+++ b/packages/styles/src/variables/components/_notification.scss
@@ -5,10 +5,12 @@
 @use './../spacing';
 @use './../type';
 @use '../../tokens/components';
+@use '../../tokens/utilities';
 @use '../../functions/tokens';
 
 tokens.$default-map: components.$post-banner;
-$notification-body-gap: spacing.$size-micro !default;
+
+$notification-body-gap: tokens.get('utility-gap-4', utilities.$post-spacing) !default;
 $notification-font-weight: type.$font-weight-normal !default;
 $notification-link-font-weight: type.$font-weight-normal !default;
 
@@ -52,8 +54,10 @@ $notification-hr-margin-block-map: () !default;
 $notification-hr-margin-block-map: map.merge(
   $notification-hr-margin-block-map,
   (
-    'banner': spacing.$size-mini spacing.$size-small-regular,
-    'toast': spacing.$size-micro spacing.$size-small-regular,
+    'banner': tokens.get('utility-gap-8', utilities.$post-spacing)
+      tokens.get('utility-gap-12', utilities.$post-spacing),
+    'toast': tokens.get('utility-gap-4', utilities.$post-spacing)
+      tokens.get('utility-gap-12', utilities.$post-spacing),
   )
 );
 
diff --git a/packages/styles/src/variables/components/_pagination.scss b/packages/styles/src/variables/components/_pagination.scss
index 5bb76ab1e4..736bf986c5 100644
--- a/packages/styles/src/variables/components/_pagination.scss
+++ b/packages/styles/src/variables/components/_pagination.scss
@@ -3,14 +3,18 @@
 @use './../type';
 @use './../commons';
 @use './button';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Pagination
 
-$pagination-padding-y: spacing.$size-mini !default;
+$pagination-padding-y: tokens.get('utility-gap-8') !default;
 $pagination-padding-x: 0 !default;
-$pagination-padding-y-sm: spacing.$size-micro !default;
+$pagination-padding-y-sm: tokens.get('utility-gap-4') !default;
 $pagination-padding-x-sm: 0 !default;
-$pagination-padding-y-lg: spacing.$size-small-regular !default;
+$pagination-padding-y-lg: tokens.get('utility-gap-12') !default;
 $pagination-padding-x-lg: 0 !default;
 $pagination-line-height: 1.25 !default;
 
@@ -35,8 +39,12 @@ $pagination-disabled-bg: color.$light !default;
 $pagination-disabled-border-color: color.$gray-10 !default;
 
 $pagination-height-border: $pagination-border-width * 2 !default;
-$pagination-height-inner: (type.$font-size-base * $pagination-line-height) +
-  ($pagination-padding-y * 2) !default;
-$pagination-height: calc(#{$pagination-height-inner} + #{$pagination-height-border}) !default;
+$pagination-height-inner: calc(
+  (type.$font-size-base * $pagination-line-height) + ($pagination-padding-y * 2)
+) !default;
+$pagination-height: calc(
+  ((type.$font-size-base * $pagination-line-height) + (tokens.get('utility-gap-8') * 2)) +
+    $pagination-height-border
+) !default;
 
 $pagination-width: $pagination-height !default;
diff --git a/packages/styles/src/variables/components/_spinners.scss b/packages/styles/src/variables/components/_spinners.scss
index 7567fa52a8..3a8146b840 100644
--- a/packages/styles/src/variables/components/_spinners.scss
+++ b/packages/styles/src/variables/components/_spinners.scss
@@ -4,6 +4,11 @@
 @use './../type';
 @use './../../functions/sizing';
 
+@use './../../functions/tokens';
+@use './../../tokens/utilities';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Spinners
 
 $spinner-color-primary: color.$yellow !default;
@@ -27,7 +32,7 @@ $spinner-size-map: (
 
 // DEPRECATED
 $spinner-size-sm: type.$font-size-40 !default;
-$spinner-border-width-sm: spacing.$size-micro !default;
+$spinner-border-width-sm: tokens.get('utility-gap-4') !default;
 
 $spinner-size-xs: type.$font-size-16 !default;
-$spinner-border-width-xs: spacing.$size-line !default;
+$spinner-border-width-xs: tokens.get('utility-gap-2') !default;
diff --git a/packages/styles/src/variables/components/_stepper.scss b/packages/styles/src/variables/components/_stepper.scss
index 60bab4b596..e141e3df44 100644
--- a/packages/styles/src/variables/components/_stepper.scss
+++ b/packages/styles/src/variables/components/_stepper.scss
@@ -5,17 +5,22 @@
 
 @use './../../functions/icons' as icon-fn;
 
-$stepper-bar-height: spacing.$size-micro;
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
+$stepper-bar-height: tokens.get('utility-gap-4');
 $stepper-bar-color: color.$gray-40;
 $stepper-bar-fill-color: color.$yellow;
 
-$stepper-indicator-size: spacing.$size-bigger-big;
-$stepper-indicator-border-width: spacing.$size-micro;
+$stepper-indicator-size: tokens.get('utility-gap-40');
+$stepper-indicator-border-width: tokens.get('utility-gap-4');
 $stepper-indicator-border-color: rgb(var(--post-bg-rgb, 255 255 255));
 $stepper-indicator-font-weight: type.$font-weight-bold;
 $stepper-indicator-bg: color.$yellow;
 $stepper-indicator-color: color.$black;
-$stepper-indicator-check-size: spacing.$size-large;
+$stepper-indicator-check-size: tokens.get('utility-gap-24');
 $stepper-indicator-transition:
   color animation.$transition-base-timing,
   background-color animation.$transition-base-timing;
@@ -29,8 +34,8 @@ $stepper-indicator-check-icon: url('#{icon-fn.get-colored-svg-url('2105', $stepp
 $stepper-indicator-check-icon-size: $stepper-indicator-check-size;
 
 $stepper-link-line-height: type.$line-height-sm;
-$stepper-link-gap: spacing.$size-mini;
-$stepper-link-spacing: spacing.$size-regular;
+$stepper-link-gap: tokens.get('utility-gap-8');
+$stepper-link-spacing: tokens.get('utility-gap-16');
 $stepper-link-color: var(--post-gray-60);
 
 $stepper-link-current-color: var(--post-gray-80);
diff --git a/packages/styles/src/variables/components/_subnavigation.scss b/packages/styles/src/variables/components/_subnavigation.scss
index bf9c3f0c60..d40991e025 100644
--- a/packages/styles/src/variables/components/_subnavigation.scss
+++ b/packages/styles/src/variables/components/_subnavigation.scss
@@ -3,6 +3,10 @@
 @use './../commons';
 @use './../spacing';
 @use './../../functions/sizing';
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
 
 // Subnavigation
 
@@ -20,13 +24,11 @@ $subnavigation-height-xl: sizing.px-to-rem(72);
 $subnavigation-link-color: rgba(var(--post-contrast-color-rgb), 0.6);
 $subnavigation-link-color-hover: var(--post-contrast-color);
 
-$subnavigation-link-underscore-height: map.get(spacing.$post-sizes, 'micro');
+$subnavigation-link-underscore-height: tokens.get('utility-gap-4');
 $subnavigation-link-underscore-color-active: color.$yellow;
 $subnavigation-link-underscore-color-hover: rgba(var(--post-contrast-color-rgb), 0.4);
 
-$subnavigation-link-padding-xs: map.get(spacing.$post-sizes, 'regular')
-  map.get(spacing.$post-sizes, 'small-regular');
-$subnavigation-link-padding-lg: map.get(spacing.$post-sizes, 'small-large')
-  map.get(spacing.$post-sizes, 'regular');
+$subnavigation-link-padding-xs: tokens.get('utility-gap-16') tokens.get('utility-gap-12');
+$subnavigation-link-padding-lg: tokens.get('utility-gap-20') tokens.get('utility-gap-16');
 
-$subnavigation-result-margin-left: map.get(spacing.$post-sizes, 'mini');
+$subnavigation-result-margin-left: tokens.get('utility-gap-8');
diff --git a/packages/styles/src/variables/components/_tables.scss b/packages/styles/src/variables/components/_tables.scss
index 685041d26d..7c1aa688af 100644
--- a/packages/styles/src/variables/components/_tables.scss
+++ b/packages/styles/src/variables/components/_tables.scss
@@ -4,11 +4,16 @@
 @use './../spacing';
 @use './../type';
 
+@use '../../tokens/utilities';
+@use '../../functions/tokens';
+
+tokens.$default-map: utilities.$post-spacing;
+
 // Bootstrap variables
-$table-cell-padding-y: spacing.$size-small-regular !default;
-$table-cell-padding-x: spacing.$size-mini !default;
-$table-cell-padding-y-sm: spacing.$size-mini !default;
-$table-cell-padding-x-sm: spacing.$size-micro !default;
+$table-cell-padding-y: tokens.get('utility-gap-12') !default;
+$table-cell-padding-x: tokens.get('utility-gap-4') !default;
+$table-cell-padding-y-sm: tokens.get('utility-gap-8') !default;
+$table-cell-padding-x-sm: tokens.get('utility-gap-4') !default;
 $table-cell-vertical-align: top !default;
 $table-color: var(--post-contrast-color) !default;
 $table-bg: transparent !default;
diff --git a/packages/styles/src/variables/components/_tag.scss b/packages/styles/src/variables/components/_tag.scss
index a54518da39..0234e5516e 100644
--- a/packages/styles/src/variables/components/_tag.scss
+++ b/packages/styles/src/variables/components/_tag.scss
@@ -1,19 +1,22 @@
 @use './../color' as color;
 @use './../spacing' as spacing;
 @use './../type' as type;
-@use '../../functions/sizing' as sizing;
+@use '../../functions/tokens';
+@use '../../tokens/utilities';
 
-$tag-gap: spacing.$size-micro;
+tokens.$default-map: utilities.$post-spacing;
+
+$tag-gap: tokens.get('utility-gap-4');
 $tag-padding-y: 0;
-$tag-padding-x: spacing.$size-mini;
+$tag-padding-x: tokens.get('utility-gap-8');
 $tag-max-width: 100%;
-$tag-border-width: spacing.$size-hair;
-$tag-border-radius: spacing.$size-micro;
+$tag-border-width: tokens.get('utility-gap-1');
+$tag-border-radius: tokens.get('utility-gap-4');
 $tag-font-size: type.$font-size-16;
-$tag-line-height: spacing.$size-big - (sizing.px-to-rem($tag-border-width) * 2);
+$tag-line-height: calc(tokens.get('utility-gap-32') - ($tag-border-width * 2));
 $tag-icon-size: $tag-font-size * 1.25;
 
-$tag-sm-line-height: spacing.$size-large;
+$tag-sm-line-height: tokens.get('utility-gap-24');
 $tag-sm-icon-size: $tag-font-size;
 
 $tag-default-background: color.$gray-10;
diff --git a/packages/styles/tests/mixins/index.test.scss b/packages/styles/tests/mixins/index.test.scss
index acaf720c69..bac65e5f80 100644
--- a/packages/styles/tests/mixins/index.test.scss
+++ b/packages/styles/tests/mixins/index.test.scss
@@ -9,14 +9,6 @@ body {
   }
   @include mixins.focus-outline();
 
-  @include mixins.bezel-small();
-  @include mixins.bezel-small-regular();
-  @include mixins.bezel-regular();
-  @include mixins.bezel-bigger-regular();
-  @include mixins.bezel-medium();
-  @include mixins.bezel-large();
-  @include mixins.bezel-big();
-
   @include mixins.font-curve('tiny');
   @include mixins.font-smoothing();
   @include mixins.font-smoothing-reset();
diff --git a/packages/styles/tests/mixins/size.test.scss b/packages/styles/tests/mixins/size.test.scss
deleted file mode 100644
index 3c96e1d58b..0000000000
--- a/packages/styles/tests/mixins/size.test.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-@use 'src/mixins/size';
-
-body {
-  @include size.bezel-small();
-  @include size.bezel-small-regular();
-  @include size.bezel-regular();
-  @include size.bezel-bigger-regular();
-  @include size.bezel-medium();
-  @include size.bezel-large();
-  @include size.bezel-big();
-}