From 597b15bdc3961cb2cdaf7d6a3921cd856373e4cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 14 Nov 2024 14:32:40 +0100
Subject: [PATCH 1/9] feat(tokens): export raw palettes

---
 .changeset/nasty-ads-greet.md              |  5 ++
 packages/tokens/_build/configs/index.js    |  1 +
 packages/tokens/_build/configs/palettes.js | 67 +++++++++++++++++++++
 packages/tokens/_build/methods.js          | 68 +++++++++++-----------
 4 files changed, 107 insertions(+), 34 deletions(-)
 create mode 100644 .changeset/nasty-ads-greet.md
 create mode 100644 packages/tokens/_build/configs/palettes.js

diff --git a/.changeset/nasty-ads-greet.md b/.changeset/nasty-ads-greet.md
new file mode 100644
index 0000000000..69d3f53961
--- /dev/null
+++ b/.changeset/nasty-ads-greet.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-tokens': minor
+---
+
+Export new SASS maps for Post and Cargo palettes, directly linking to the raw color values for both light and dark color schemes.
diff --git a/packages/tokens/_build/configs/index.js b/packages/tokens/_build/configs/index.js
index 35351414ff..f73fa60e5f 100644
--- a/packages/tokens/_build/configs/index.js
+++ b/packages/tokens/_build/configs/index.js
@@ -1,2 +1,3 @@
 import './all.js';
+import './palettes.js';
 import './tailwind.js';
diff --git a/packages/tokens/_build/configs/palettes.js b/packages/tokens/_build/configs/palettes.js
new file mode 100644
index 0000000000..0888437ef6
--- /dev/null
+++ b/packages/tokens/_build/configs/palettes.js
@@ -0,0 +1,67 @@
+import { expandTypesMap } from '@tokens-studio/sd-transforms';
+import { registerConfigMethod } from '../methods.js';
+
+const PALETTE_TOKENSET_NAME = 'palettes';
+
+/**
+ * Registers a config getter method to generate output files for all code relevant tokens in the tokens.json.
+ */
+registerConfigMethod((tokenSets, { sourcePath, buildPath }) => {
+  const paletteSet = tokenSets.output[PALETTE_TOKENSET_NAME];
+
+  if (!paletteSet) return;
+
+  const { type, layer, filePath, sets } = paletteSet;
+
+  const themes = Object.keys(tokenSets.source).filter(source => source.startsWith('theme/'));
+  const schemes = Object.keys(tokenSets.source).filter(source => source.startsWith('scheme/'));
+
+  const otherSources = Object.keys(tokenSets.source).filter(
+    source => !source.startsWith('theme/') && !source.startsWith('scheme/'),
+  );
+
+  const themeSchemeCombinations = themes.flatMap(theme => {
+    return schemes.map(scheme => [theme, scheme]);
+  });
+
+  return themeSchemeCombinations.map(([theme, scheme]) => {
+    const sourceFiles = Object.keys(tokenSets.source)
+      .filter(source => source === theme || source === scheme)
+      .concat(otherSources)
+      .map(source => `${sourcePath}_temp/source/${source}.json`);
+
+    const themeName = theme.replace('theme/', '');
+    const schemeName = scheme.replace('scheme/', '');
+
+    return {
+      meta: {
+        type,
+        layer,
+        filePath,
+        setNames: Object.keys(sets),
+      },
+      source: [`${sourcePath}_temp/output/${filePath}`],
+      include: sourceFiles,
+      platforms: {
+        scss: {
+          transforms: ['name/kebab'],
+          buildPath: `${buildPath}palettes/`,
+          expand: {
+            include: ['typography'],
+            typesMap: expandTypesMap,
+          },
+          files: [
+            {
+              destination: `_${themeName}-${schemeName}.scss`.toLowerCase(),
+              format: 'swisspost/scss-format',
+              filter: 'swisspost/scss-filter',
+              options: {
+                outputReferences: false,
+              },
+            },
+          ],
+        },
+      },
+    };
+  });
+});
diff --git a/packages/tokens/_build/methods.js b/packages/tokens/_build/methods.js
index 68cb76a1d8..dc2b6bbbb5 100644
--- a/packages/tokens/_build/methods.js
+++ b/packages/tokens/_build/methods.js
@@ -198,41 +198,41 @@ export async function createOutputFiles() {
   function getConfigs() {
     return registeredConfigMethods
       .map(method =>
-        method(tokenSets, { sourcePath: `${SOURCE_PATH}/`, buildPath: `${OUTPUT_PATH}/` }).map(
-          config => {
-            config = objectDeepmerge(config, {
-              // set log level
-              log: {
-                verbosity: CLI_OPTIONS.verbosity,
-              },
-              // extend preprocessors
-              preprocessors: [
-                'swisspost/box-shadow-keep-refs-workaround',
-                'tokens-studio',
-                ...(config.proprocessors ?? []),
-              ],
-            });
-
-            config.platforms = Object.entries(config.platforms).reduce(
-              (platforms, [name, platform]) => ({
-                ...platforms,
-                [name]: objectDeepmerge(platform, {
-                  // set default file header (can still be overridden on the file level)
-                  options: {
-                    fileHeader: 'swisspost/file-header',
-                  },
-                  // set transformGroup (this will override any given transform group)
-                  transformGroup: 'tokens-studio',
-                }),
-              }),
-              {},
-            );
-
-            return config;
-          },
-        ),
+        method(tokenSets, { sourcePath: `${SOURCE_PATH}/`, buildPath: `${OUTPUT_PATH}/` }),
       )
-      .flat();
+      .filter(configs => Array.isArray(configs))
+      .flat()
+      .map(config => {
+        config = objectDeepmerge(config, {
+          // set log level
+          log: {
+            verbosity: CLI_OPTIONS.verbosity,
+          },
+          // extend preprocessors
+          preprocessors: [
+            'swisspost/box-shadow-keep-refs-workaround',
+            'tokens-studio',
+            ...(config.proprocessors ?? []),
+          ],
+        });
+
+        config.platforms = Object.entries(config.platforms).reduce(
+          (platforms, [name, platform]) => ({
+            ...platforms,
+            [name]: objectDeepmerge(platform, {
+              // set default file header (can still be overridden on the file level)
+              options: {
+                fileHeader: 'swisspost/file-header',
+              },
+              // set transformGroup (this will override any given transform group)
+              transformGroup: 'tokens-studio',
+            }),
+          }),
+          {},
+        );
+
+        return config;
+      });
   }
 
   /**

From 14f0242fac61e5ed194c5be0a681f7998d296304 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 14 Nov 2024 14:45:30 +0100
Subject: [PATCH 2/9] feat(docs): add cargo theme

---
 .changeset/khaki-cougars-itch.md                |  6 ++++++
 .../addons/styles-switcher/StylesSwitcher.tsx   | 17 ++---------------
 .../.storybook/styles/preview.scss              |  2 ++
 packages/styles/src/cargo-external.scss         |  7 +++++++
 packages/styles/src/cargo-internal.scss         |  7 +++++++
 packages/styles/src/cargo-tokens-external.scss  |  8 ++++++++
 packages/styles/src/cargo-tokens-internal.scss  |  8 ++++++++
 packages/styles/src/post-external.scss          |  5 ++++-
 packages/styles/src/post-internal.scss          |  5 ++++-
 packages/styles/src/tokens/_cargo-theme.scss    |  8 ++++++++
 10 files changed, 56 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/khaki-cougars-itch.md
 create mode 100644 packages/styles/src/cargo-external.scss
 create mode 100644 packages/styles/src/cargo-internal.scss
 create mode 100644 packages/styles/src/cargo-tokens-external.scss
 create mode 100644 packages/styles/src/cargo-tokens-internal.scss
 create mode 100644 packages/styles/src/tokens/_cargo-theme.scss

diff --git a/.changeset/khaki-cougars-itch.md b/.changeset/khaki-cougars-itch.md
new file mode 100644
index 0000000000..cf48920dda
--- /dev/null
+++ b/.changeset/khaki-cougars-itch.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-styles': minor
+'@swisspost/design-system-documentation': minor
+---
+
+Addes Cargo theme styles.
diff --git a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
index 6b3ca6c08e..2980542b93 100644
--- a/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
+++ b/packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { IconButton, WithTooltip } from '@storybook/components';
 
-const THEMES = ['Post'] as const;
+const THEMES = ['Post', 'Cargo'] as const;
 const CHANNELS = ['External', 'Internal'] as const;
 const SCHEMES = ['Light', 'Dark'] as const;
 
@@ -15,18 +15,6 @@ const possibleStylesheets = THEMES.flatMap(theme => {
   return CHANNELS.map(channel => getStylesheetUrl(theme, channel));
 });
 
-/*
- * Backgrounds
- */
-const backgroundClasses: { [key in (typeof SCHEMES)[number]]: string } = {
-  Light: 'bg-white',
-  Dark: 'bg-dark',
-};
-const getBackgroundClass = (scheme: string) => {
-  return scheme in backgroundClasses ? backgroundClasses[scheme] : '';
-};
-const possibleBackgrounds = SCHEMES.map(scheme => getBackgroundClass(scheme));
-
 /*
  * Local storage access
  */
@@ -113,9 +101,8 @@ function StylesSwitcher() {
     if (!stories) return;
 
     stories.forEach(story => {
-      story.classList.remove(...possibleBackgrounds);
-      story.classList.add(getBackgroundClass(currentScheme));
       story.setAttribute('data-color-scheme', currentScheme.toLowerCase());
+      if (!story.classList.contains('palette-default')) story.classList.add('palette-default');
     });
   }, [stories, currentScheme]);
 
diff --git a/packages/documentation/.storybook/styles/preview.scss b/packages/documentation/.storybook/styles/preview.scss
index c5f0f5e49c..ae30b5f472 100644
--- a/packages/documentation/.storybook/styles/preview.scss
+++ b/packages/documentation/.storybook/styles/preview.scss
@@ -11,6 +11,8 @@ $monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier
 
 #storybook-root,
 #storybook-docs {
+  background-color: white;
+
   .sbdocs-content .container >,
   .sbdocs-content .container > post-tabs > post-tab-panel >,
   .sbdocs-content .container > migration-global-state {
diff --git a/packages/styles/src/cargo-external.scss b/packages/styles/src/cargo-external.scss
new file mode 100644
index 0000000000..845e06851a
--- /dev/null
+++ b/packages/styles/src/cargo-external.scss
@@ -0,0 +1,7 @@
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/external';
+@use './tokens/cargo-theme';
+@use './utilities';
+@use './elements';
+@use './components';
diff --git a/packages/styles/src/cargo-internal.scss b/packages/styles/src/cargo-internal.scss
new file mode 100644
index 0000000000..8a5de0f563
--- /dev/null
+++ b/packages/styles/src/cargo-internal.scss
@@ -0,0 +1,7 @@
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/internal';
+@use './tokens/cargo-theme';
+@use './utilities';
+@use './elements';
+@use './components';
diff --git a/packages/styles/src/cargo-tokens-external.scss b/packages/styles/src/cargo-tokens-external.scss
new file mode 100644
index 0000000000..4e4f2e9932
--- /dev/null
+++ b/packages/styles/src/cargo-tokens-external.scss
@@ -0,0 +1,8 @@
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/schemes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/external');
+  @include meta.load-css('./tokens/cargo-theme');
+}
diff --git a/packages/styles/src/cargo-tokens-internal.scss b/packages/styles/src/cargo-tokens-internal.scss
new file mode 100644
index 0000000000..481b7091aa
--- /dev/null
+++ b/packages/styles/src/cargo-tokens-internal.scss
@@ -0,0 +1,8 @@
+@use 'sass:meta';
+
+@layer design-system {
+  @include meta.load-css('./tokens/schemes');
+  @include meta.load-css('./tokens/device');
+  @include meta.load-css('./tokens/internal');
+  @include meta.load-css('./tokens/cargo-theme');
+}
diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss
index 87f2a3fa55..10e1746fa7 100644
--- a/packages/styles/src/post-external.scss
+++ b/packages/styles/src/post-external.scss
@@ -1,4 +1,7 @@
-@use './post-tokens-external';
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/external';
+@use './tokens/post-theme';
 @use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss
index 834c79f621..4e06884fe1 100644
--- a/packages/styles/src/post-internal.scss
+++ b/packages/styles/src/post-internal.scss
@@ -1,4 +1,7 @@
-@use './post-tokens-internal';
+@use './tokens/schemes';
+@use './tokens/device';
+@use './tokens/internal';
+@use './tokens/post-theme';
 @use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/tokens/_cargo-theme.scss b/packages/styles/src/tokens/_cargo-theme.scss
new file mode 100644
index 0000000000..ee29dc4877
--- /dev/null
+++ b/packages/styles/src/tokens/_cargo-theme.scss
@@ -0,0 +1,8 @@
+@use './temp/theme' as themes;
+
+@use './core';
+@use './../mixins/tokens';
+
+:root {
+  @include tokens.from(themes.$post-cargo);
+}

From c48ee1e3007bd863dd0718330f140961a0e071d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 14 Nov 2024 14:56:54 +0100
Subject: [PATCH 3/9] feat(styles): add palette styles

---
 .changeset/weak-jars-rhyme.md                 |  6 ++
 packages/styles/gulpfile.js                   |  2 +-
 packages/styles/src/cargo-external.scss       |  1 +
 packages/styles/src/cargo-internal.scss       |  1 +
 packages/styles/src/palettes/_mixins.scss     | 66 +++++++++++++++++++
 packages/styles/src/palettes/_utilities.scss  |  3 +
 packages/styles/src/palettes/_variables.scss  |  2 +
 .../styles/src/palettes/cargo-palettes.scss   | 12 ++++
 .../styles/src/palettes/post-palettes.scss    | 12 ++++
 packages/styles/src/post-external.scss        |  1 +
 packages/styles/src/post-internal.scss        |  1 +
 packages/styles/src/tokens/_palettes.scss     |  9 +++
 12 files changed, 115 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/weak-jars-rhyme.md
 create mode 100644 packages/styles/src/palettes/_mixins.scss
 create mode 100644 packages/styles/src/palettes/_utilities.scss
 create mode 100644 packages/styles/src/palettes/_variables.scss
 create mode 100644 packages/styles/src/palettes/cargo-palettes.scss
 create mode 100644 packages/styles/src/palettes/post-palettes.scss
 create mode 100644 packages/styles/src/tokens/_palettes.scss

diff --git a/.changeset/weak-jars-rhyme.md b/.changeset/weak-jars-rhyme.md
new file mode 100644
index 0000000000..0a81503669
--- /dev/null
+++ b/.changeset/weak-jars-rhyme.md
@@ -0,0 +1,6 @@
+---
+'@swisspost/design-system-documentation': minor
+'@swisspost/design-system-styles': minor
+---
+
+Added color palettes to easily apply colors to a page section using predefined color sets.
diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js
index 1a663b1e9b..e1eac17f77 100644
--- a/packages/styles/gulpfile.js
+++ b/packages/styles/gulpfile.js
@@ -27,7 +27,7 @@ gulp.task('copy', () => {
  * See https://github.com/pnpm/pnpm/issues/8338 for more information and reproduction
  */
 gulp.task('temporarily-copy-token-files', () => {
-  return gulp.src(['../tokens/dist/*.scss']).pipe(gulp.dest('./src/tokens/temp'));
+  return gulp.src(['../tokens/dist/**/*.scss']).pipe(gulp.dest('./src/tokens/temp'));
 });
 
 /**
diff --git a/packages/styles/src/cargo-external.scss b/packages/styles/src/cargo-external.scss
index 845e06851a..fbeaeffede 100644
--- a/packages/styles/src/cargo-external.scss
+++ b/packages/styles/src/cargo-external.scss
@@ -2,6 +2,7 @@
 @use './tokens/device';
 @use './tokens/external';
 @use './tokens/cargo-theme';
+@use './palettes/cargo-palettes';
 @use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/cargo-internal.scss b/packages/styles/src/cargo-internal.scss
index 8a5de0f563..6e8dcdabb5 100644
--- a/packages/styles/src/cargo-internal.scss
+++ b/packages/styles/src/cargo-internal.scss
@@ -2,6 +2,7 @@
 @use './tokens/device';
 @use './tokens/internal';
 @use './tokens/cargo-theme';
+@use './palettes/cargo-palettes';
 @use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/palettes/_mixins.scss b/packages/styles/src/palettes/_mixins.scss
new file mode 100644
index 0000000000..8685d112f2
--- /dev/null
+++ b/packages/styles/src/palettes/_mixins.scss
@@ -0,0 +1,66 @@
+@use 'sass:map';
+@use 'sass:meta';
+
+@use '../functions/contrast';
+@use '../placeholders/schemes';
+
+@use '../functions/tokens';
+@use '../tokens/elements';
+@use '../tokens/palettes';
+
+@use './variables' as *;
+
+@mixin default-palette-styles($theme) {
+  background-color: var(--post-current-palette-bg) !important;
+
+  &:not([data-color-scheme='dark']) {
+    @include palette-tokens($default-palette, $theme, 'light');
+  }
+
+  &[data-color-scheme='dark'] {
+    @include palette-tokens($default-palette, $theme, 'dark');
+  }
+}
+
+@mixin generate-palette-class($name, $theme) {
+  .palette-#{$name} {
+    // redefining the body color is required so that the new color scheme is taken into account
+    color: tokens.get('body-color', elements.$post-body);
+    background-color: var(--post-current-palette-bg) !important;
+
+    // below selectors consider up to two nested `data-color-scheme` attributes on parent elements
+    // if `data-color-scheme` is set on the palette itself, it is always used
+
+    &[data-color-scheme='light'],
+    &:not([data-color-scheme='dark']):not([data-color-scheme='dark'] *),
+    &:where([data-color-scheme='light'] :not([data-color-scheme='dark'])) {
+      @include palette-tokens($name, $theme, 'light', $override-scheme: true);
+    }
+
+    &[data-color-scheme='dark'],
+    &:where([data-color-scheme='dark'] :not([data-color-scheme='dark'])) {
+      @include palette-tokens($name, $theme, 'dark', $override-scheme: true);
+    }
+  }
+}
+
+@mixin palette-tokens($name, $theme, $scheme, $override-scheme: false) {
+  $palette: map.get(meta.module-variables(palettes), '#{$theme}-#{$scheme}');
+
+  @if (not $palette) {
+    @error 'Palette #{$theme}-#{$scheme} not found.';
+  }
+
+  --post-current-palette-fg: #{tokens.get('palettes-color-#{$name}-fg', $palette)};
+  --post-current-palette-bg: #{tokens.get('palettes-color-#{$name}-bg', $palette)};
+
+  @if ($override-scheme == true) {
+    $bg-scheme: tokens.get('helper-color-#{$name}-bg-scheme', $palette);
+
+    @if ($bg-scheme == 'light') {
+      @extend %color-scheme-light;
+    } @else {
+      @extend %color-scheme-dark;
+    }
+  }
+}
diff --git a/packages/styles/src/palettes/_utilities.scss b/packages/styles/src/palettes/_utilities.scss
new file mode 100644
index 0000000000..e2b2e50157
--- /dev/null
+++ b/packages/styles/src/palettes/_utilities.scss
@@ -0,0 +1,3 @@
+.palette-text {
+  color: var(--post-current-palette-fg);
+}
diff --git a/packages/styles/src/palettes/_variables.scss b/packages/styles/src/palettes/_variables.scss
new file mode 100644
index 0000000000..facc770217
--- /dev/null
+++ b/packages/styles/src/palettes/_variables.scss
@@ -0,0 +1,2 @@
+$default-palette: 'default';
+$palettes: $default-palette, 'alternate', 'brand', 'accent';
diff --git a/packages/styles/src/palettes/cargo-palettes.scss b/packages/styles/src/palettes/cargo-palettes.scss
new file mode 100644
index 0000000000..515d38d0c7
--- /dev/null
+++ b/packages/styles/src/palettes/cargo-palettes.scss
@@ -0,0 +1,12 @@
+@use 'mixins' as *;
+@use 'variables' as *;
+
+@forward 'utilities';
+
+body {
+  @include default-palette-styles('cargo');
+}
+
+@each $palette in $palettes {
+  @include generate-palette-class($palette, 'cargo');
+}
diff --git a/packages/styles/src/palettes/post-palettes.scss b/packages/styles/src/palettes/post-palettes.scss
new file mode 100644
index 0000000000..20cd88fd58
--- /dev/null
+++ b/packages/styles/src/palettes/post-palettes.scss
@@ -0,0 +1,12 @@
+@use 'mixins' as *;
+@use 'variables' as *;
+
+@forward 'utilities';
+
+body {
+  @include default-palette-styles('post');
+}
+
+@each $palette in $palettes {
+  @include generate-palette-class($palette, 'post');
+}
diff --git a/packages/styles/src/post-external.scss b/packages/styles/src/post-external.scss
index 10e1746fa7..6a1d30e333 100644
--- a/packages/styles/src/post-external.scss
+++ b/packages/styles/src/post-external.scss
@@ -2,6 +2,7 @@
 @use './tokens/device';
 @use './tokens/external';
 @use './tokens/post-theme';
+@use './palettes/post-palettes';
 @use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/post-internal.scss b/packages/styles/src/post-internal.scss
index 4e06884fe1..c2884c77b0 100644
--- a/packages/styles/src/post-internal.scss
+++ b/packages/styles/src/post-internal.scss
@@ -2,6 +2,7 @@
 @use './tokens/device';
 @use './tokens/internal';
 @use './tokens/post-theme';
+@use './palettes/post-palettes';
 @use './utilities';
 @use './elements';
 @use './components';
diff --git a/packages/styles/src/tokens/_palettes.scss b/packages/styles/src/tokens/_palettes.scss
new file mode 100644
index 0000000000..930a16d2fb
--- /dev/null
+++ b/packages/styles/src/tokens/_palettes.scss
@@ -0,0 +1,9 @@
+@use './temp/palettes/post-light' as post-light;
+@use './temp/palettes/post-dark' as post-dark;
+@use './temp/palettes/cargo-light' as cargo-light;
+@use './temp/palettes/cargo-dark' as cargo-dark;
+
+$post-light: post-light.$post-palettes;
+$post-dark: post-dark.$post-palettes;
+$cargo-light: cargo-light.$post-palettes;
+$cargo-dark: cargo-dark.$post-palettes;

From 31fead71419aa020b0bd285a951fa7854008e87d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 14 Nov 2024 14:57:39 +0100
Subject: [PATCH 4/9] feat(docs): add palette stories

---
 .../foundation/palette/palette.docs.mdx       | 27 +++++++++
 .../palette/palette.snapshot.stories.ts       | 35 ++++++++++++
 .../foundation/palette/palette.stories.ts     | 57 +++++++++++++++++++
 3 files changed, 119 insertions(+)
 create mode 100644 packages/documentation/src/stories/foundation/palette/palette.docs.mdx
 create mode 100644 packages/documentation/src/stories/foundation/palette/palette.snapshot.stories.ts
 create mode 100644 packages/documentation/src/stories/foundation/palette/palette.stories.ts

diff --git a/packages/documentation/src/stories/foundation/palette/palette.docs.mdx b/packages/documentation/src/stories/foundation/palette/palette.docs.mdx
new file mode 100644
index 0000000000..0296bc2bfa
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/palette/palette.docs.mdx
@@ -0,0 +1,27 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as paletteStories from './palette.stories';
+
+<Meta of={paletteStories} />
+
+<div className="docs-title">
+  # Palettes
+</div>
+
+<div className="lead">
+  Easily apply colors to a section of your page using predefined color sets.
+</div>
+
+There are four different palettes:
+- **Default** - The standard palette used when no other palette is specified.
+- **Alternate** - Used to differentiate alternating sections from the body, without strong emphasis or highlighting.
+- **Accent** - A complementary color used for highlights and emphasis.
+- **Brand** - The primary color for the brand.
+
+Palettes may also include a specific text color that is different from the body color.
+You can apply this text color to any element by using the `.palette-text` class.
+
+<Canvas sourceState="shown" of={paletteStories.Default} />
+
+<div className="hide-col-default">
+  <Controls of={paletteStories.Default} />
+</div>
diff --git a/packages/documentation/src/stories/foundation/palette/palette.snapshot.stories.ts b/packages/documentation/src/stories/foundation/palette/palette.snapshot.stories.ts
new file mode 100644
index 0000000000..5fc42a0cb4
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/palette/palette.snapshot.stories.ts
@@ -0,0 +1,35 @@
+import type { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+import meta from './palette.stories';
+
+const { id, ...metaWithoutId } = meta;
+
+export default {
+  ...metaWithoutId,
+  title: 'Snapshots',
+};
+
+type Story = StoryObj;
+
+export const Palette: Story = {
+  render: () => {
+    return html`${['light', 'dark'].map(
+      mainScheme => html`
+        <div class="palette-default p-24 d-flex flex-column gap-48" data-color-scheme=${mainScheme}>
+          ${['', 'light', 'dark'].map(
+            paletteScheme => html`
+              <div>
+                <p class="px-24">Palette scheme: ${paletteScheme || 'none'}</p>
+                <div class="d-flex">
+                  ${meta.argTypes.palette.options.map(palette =>
+                    meta.render({ palette, colorScheme: paletteScheme }),
+                  )}
+                </div>
+              </div>
+            `,
+          )}
+        </div>
+      `,
+    )}`;
+  },
+};
diff --git a/packages/documentation/src/stories/foundation/palette/palette.stories.ts b/packages/documentation/src/stories/foundation/palette/palette.stories.ts
new file mode 100644
index 0000000000..1262c25d5a
--- /dev/null
+++ b/packages/documentation/src/stories/foundation/palette/palette.stories.ts
@@ -0,0 +1,57 @@
+import { Args, Meta, StoryObj } from '@storybook/web-components';
+import { html, nothing } from 'lit';
+
+const meta: Meta = {
+  id: '43481535-5b39-40b5-a273-478b07dc3b31',
+  title: 'Foundations/Palettes',
+  tags: ['package:HTML'],
+  render: renderPalette,
+  parameters: {
+    palettes: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/xZ0IW0MJO0vnFicmrHiKaY/Components-Post?type=design&node-id=18172-73431&mode=design&t=3lniLiZhl7q9Gqgn-4',
+    },
+  },
+  args: {
+    palette: 'default',
+  },
+  argTypes: {
+    palette: {
+      name: 'Palette',
+      description: 'The set of colors used for a section of the page.',
+      control: {
+        type: 'radio',
+        labels: {
+          default: 'Default',
+          alternate: 'Alternate',
+          brand: 'Brand',
+          accent: 'Accent',
+        },
+      },
+      options: ['default', 'alternate', 'accent', 'brand'],
+      table: {
+        category: 'General',
+      },
+    },
+  },
+};
+
+export default meta;
+
+// RENDERER
+function renderPalette(args: Args) {
+  return html`
+    <div class="palette-${args.palette} p-24" data-color-scheme=${args.colorScheme ?? nothing}>
+      <h2 class="palette-text">
+        I use a specific color from the palette (it might be the same as the body color).
+      </h2>
+      <p>I use the main body color.</p>
+    </div>
+  `;
+}
+
+// STORIES
+type Story = StoryObj;
+
+export const Default: Story = {};

From 60cd2edd2d93b4d416fc241f8d33f920d9613de3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 14 Nov 2024 14:58:47 +0100
Subject: [PATCH 5/9] chore: add palette tests

---
 .../cypress/e2e/components/palette.cy.ts            | 13 +++++++++++++
 .../snapshots/components/palette.snapshot.ts        |  7 +++++++
 .../styles/tests/palettes/cargo-palettes.test.scss  | 10 ++++++++++
 .../styles/tests/palettes/post-palettes.test.scss   | 10 ++++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 packages/documentation/cypress/e2e/components/palette.cy.ts
 create mode 100644 packages/documentation/cypress/snapshots/components/palette.snapshot.ts
 create mode 100644 packages/styles/tests/palettes/cargo-palettes.test.scss
 create mode 100644 packages/styles/tests/palettes/post-palettes.test.scss

diff --git a/packages/documentation/cypress/e2e/components/palette.cy.ts b/packages/documentation/cypress/e2e/components/palette.cy.ts
new file mode 100644
index 0000000000..dc38dc8312
--- /dev/null
+++ b/packages/documentation/cypress/e2e/components/palette.cy.ts
@@ -0,0 +1,13 @@
+describe('Palette', () => {
+  describe('Accessibility', () => {
+    beforeEach(() => {
+      cy.visit('/iframe.html?id=snapshots--palette');
+      cy.get('.palette-default', { timeout: 30000 }).should('be.visible');
+      cy.injectAxe();
+    });
+
+    it('Has no detectable a11y violations on load for all variants', () => {
+      cy.checkA11y('#root-inner');
+    });
+  });
+});
diff --git a/packages/documentation/cypress/snapshots/components/palette.snapshot.ts b/packages/documentation/cypress/snapshots/components/palette.snapshot.ts
new file mode 100644
index 0000000000..a0e3bedc09
--- /dev/null
+++ b/packages/documentation/cypress/snapshots/components/palette.snapshot.ts
@@ -0,0 +1,7 @@
+describe('Palette', () => {
+  it('default', () => {
+    cy.visit('/iframe.html?id=snapshots--palette');
+    cy.get('.palette-default', { timeout: 30000 }).should('be.visible');
+    cy.percySnapshot('Palettes', { widths: [1440] });
+  });
+});
diff --git a/packages/styles/tests/palettes/cargo-palettes.test.scss b/packages/styles/tests/palettes/cargo-palettes.test.scss
new file mode 100644
index 0000000000..40ea983fa8
--- /dev/null
+++ b/packages/styles/tests/palettes/cargo-palettes.test.scss
@@ -0,0 +1,10 @@
+@use 'src/palettes/cargo-palettes';
+
+/* stylelint-disable scss/at-extend-no-missing-placeholder */
+.palettes {
+  @extend .palette-text;
+  @extend .palette-default;
+  @extend .palette-alternate;
+  @extend .palette-brand;
+  @extend .palette-accent;
+}
diff --git a/packages/styles/tests/palettes/post-palettes.test.scss b/packages/styles/tests/palettes/post-palettes.test.scss
new file mode 100644
index 0000000000..10c75532e8
--- /dev/null
+++ b/packages/styles/tests/palettes/post-palettes.test.scss
@@ -0,0 +1,10 @@
+@use 'src/palettes/post-palettes';
+
+/* stylelint-disable scss/at-extend-no-missing-placeholder */
+.palettes {
+  @extend .palette-text;
+  @extend .palette-default;
+  @extend .palette-alternate;
+  @extend .palette-brand;
+  @extend .palette-accent;
+}

From 1f925c8ab01dc26d1fcd7c2fe117188b2436ae35 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Tue, 19 Nov 2024 18:06:04 +0100
Subject: [PATCH 6/9] Apply requested changes

---
 .../stories/foundation/palette/palette.stories.ts |  1 +
 packages/styles/src/palettes/_mixins.scss         | 15 +++++++++------
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/packages/documentation/src/stories/foundation/palette/palette.stories.ts b/packages/documentation/src/stories/foundation/palette/palette.stories.ts
index 1262c25d5a..0d54b51955 100644
--- a/packages/documentation/src/stories/foundation/palette/palette.stories.ts
+++ b/packages/documentation/src/stories/foundation/palette/palette.stories.ts
@@ -47,6 +47,7 @@ function renderPalette(args: Args) {
         I use a specific color from the palette (it might be the same as the body color).
       </h2>
       <p>I use the main body color.</p>
+      <button class="btn btn-primary">Primary button</button>
     </div>
   `;
 }
diff --git a/packages/styles/src/palettes/_mixins.scss b/packages/styles/src/palettes/_mixins.scss
index 8685d112f2..2dfb1adbea 100644
--- a/packages/styles/src/palettes/_mixins.scss
+++ b/packages/styles/src/palettes/_mixins.scss
@@ -24,20 +24,23 @@
 
 @mixin generate-palette-class($name, $theme) {
   .palette-#{$name} {
-    // redefining the body color is required so that the new color scheme is taken into account
+    // Redefining the body color is necessary to ensure that the new color scheme is applied correctly.
+    // Known limitation: body color may be incorrect with nested parent with different `data-color-scheme` values.
     color: tokens.get('body-color', elements.$post-body);
     background-color: var(--post-current-palette-bg) !important;
 
-    // below selectors consider up to two nested `data-color-scheme` attributes on parent elements
-    // if `data-color-scheme` is set on the palette itself, it is always used
-
+    // Light scheme explicitly set on the palette:
     &[data-color-scheme='light'],
-    &:not([data-color-scheme='dark']):not([data-color-scheme='dark'] *),
-    &:where([data-color-scheme='light'] :not([data-color-scheme='dark'])) {
+    // No scheme explicitly set on the palette, but parent has a light scheme:
+    &:where([data-color-scheme='light'] :not([data-color-scheme='dark'])),
+    // No scheme explicitly set on the palette, and no scheme on the parent either:
+    &:not([data-color-scheme='dark']):not([data-color-scheme='dark'] *) {
       @include palette-tokens($name, $theme, 'light', $override-scheme: true);
     }
 
+    // Dark scheme explicitly set on the palette:
     &[data-color-scheme='dark'],
+    // No scheme explicitly set on the palette, but parent has a dark scheme:
     &:where([data-color-scheme='dark'] :not([data-color-scheme='dark'])) {
       @include palette-tokens($name, $theme, 'dark', $override-scheme: true);
     }

From bc04828e8a44946de99ab3078c3b60f2b14a38ed Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Nov 2024 11:48:13 +0100
Subject: [PATCH 7/9] Simplify palette entry files

---
 packages/styles/src/palettes/_mixins.scss     | 63 ++++++++++---------
 .../styles/src/palettes/cargo-palettes.scss   | 11 +---
 .../styles/src/palettes/post-palettes.scss    | 11 +---
 3 files changed, 35 insertions(+), 50 deletions(-)

diff --git a/packages/styles/src/palettes/_mixins.scss b/packages/styles/src/palettes/_mixins.scss
index 2dfb1adbea..294bd8378f 100644
--- a/packages/styles/src/palettes/_mixins.scss
+++ b/packages/styles/src/palettes/_mixins.scss
@@ -1,48 +1,51 @@
 @use 'sass:map';
 @use 'sass:meta';
 
-@use '../functions/contrast';
-@use '../placeholders/schemes';
-
 @use '../functions/tokens';
+@use '../placeholders/schemes';
 @use '../tokens/elements';
 @use '../tokens/palettes';
 
 @use './variables' as *;
 
-@mixin default-palette-styles($theme) {
-  background-color: var(--post-current-palette-bg) !important;
+@mixin palettes($theme) {
+  body {
+    background-color: var(--post-current-palette-bg) !important;
 
-  &:not([data-color-scheme='dark']) {
-    @include palette-tokens($default-palette, $theme, 'light');
-  }
+    &:not([data-color-scheme='dark']) {
+      @include palette-tokens($default-palette, $theme, 'light');
+    }
 
-  &[data-color-scheme='dark'] {
-    @include palette-tokens($default-palette, $theme, 'dark');
+    &[data-color-scheme='dark'] {
+      @include palette-tokens($default-palette, $theme, 'dark');
+    }
   }
-}
 
-@mixin generate-palette-class($name, $theme) {
-  .palette-#{$name} {
-    // Redefining the body color is necessary to ensure that the new color scheme is applied correctly.
-    // Known limitation: body color may be incorrect with nested parent with different `data-color-scheme` values.
-    color: tokens.get('body-color', elements.$post-body);
-    background-color: var(--post-current-palette-bg) !important;
+  @each $palette in $palettes {
+    .palette-#{$palette} {
+      // Redefining the body color is necessary to ensure that the new color scheme is applied correctly.
+      // Known limitation: body color may be incorrect with nested parent with different `data-color-scheme` values.
+      color: tokens.get('body-color', elements.$post-body);
+      background-color: var(--post-current-palette-bg) !important;
 
-    // Light scheme explicitly set on the palette:
-    &[data-color-scheme='light'],
-    // No scheme explicitly set on the palette, but parent has a light scheme:
-    &:where([data-color-scheme='light'] :not([data-color-scheme='dark'])),
-    // No scheme explicitly set on the palette, and no scheme on the parent either:
-    &:not([data-color-scheme='dark']):not([data-color-scheme='dark'] *) {
-      @include palette-tokens($name, $theme, 'light', $override-scheme: true);
-    }
+      // Light scheme explicitly set on the palette:
+      &[data-color-scheme='light'],
+
+      // No scheme explicitly set on the palette, but parent has a light scheme:
+      &:where([data-color-scheme='light'] :not([data-color-scheme='dark'])),
+
+      // No scheme explicitly set on the palette, and no scheme on the parent either:
+      &:not([data-color-scheme='dark']):not([data-color-scheme='dark'] *) {
+        @include palette-tokens($palette, $theme, 'light', $override-scheme: true);
+      }
+
+      // Dark scheme explicitly set on the palette:
+      &[data-color-scheme='dark'],
 
-    // Dark scheme explicitly set on the palette:
-    &[data-color-scheme='dark'],
-    // No scheme explicitly set on the palette, but parent has a dark scheme:
-    &:where([data-color-scheme='dark'] :not([data-color-scheme='dark'])) {
-      @include palette-tokens($name, $theme, 'dark', $override-scheme: true);
+        // No scheme explicitly set on the palette, but parent has a dark scheme:
+      &:where([data-color-scheme='dark'] :not([data-color-scheme='dark'])) {
+        @include palette-tokens($palette, $theme, 'dark', $override-scheme: true);
+      }
     }
   }
 }
diff --git a/packages/styles/src/palettes/cargo-palettes.scss b/packages/styles/src/palettes/cargo-palettes.scss
index 515d38d0c7..5cbbd9d1c4 100644
--- a/packages/styles/src/palettes/cargo-palettes.scss
+++ b/packages/styles/src/palettes/cargo-palettes.scss
@@ -1,12 +1,3 @@
 @use 'mixins' as *;
-@use 'variables' as *;
 
-@forward 'utilities';
-
-body {
-  @include default-palette-styles('cargo');
-}
-
-@each $palette in $palettes {
-  @include generate-palette-class($palette, 'cargo');
-}
+@include palettes('cargo');
diff --git a/packages/styles/src/palettes/post-palettes.scss b/packages/styles/src/palettes/post-palettes.scss
index 20cd88fd58..9d99a8fc14 100644
--- a/packages/styles/src/palettes/post-palettes.scss
+++ b/packages/styles/src/palettes/post-palettes.scss
@@ -1,12 +1,3 @@
 @use 'mixins' as *;
-@use 'variables' as *;
 
-@forward 'utilities';
-
-body {
-  @include default-palette-styles('post');
-}
-
-@each $palette in $palettes {
-  @include generate-palette-class($palette, 'post');
-}
+@include palettes('post');

From 2479b4ba14c8b762b5a72b282e977dd96e5cc00e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Nov 2024 16:10:39 +0100
Subject: [PATCH 8/9] Update _mixins.scss

---
 packages/styles/src/palettes/_mixins.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/styles/src/palettes/_mixins.scss b/packages/styles/src/palettes/_mixins.scss
index 294bd8378f..b46dae0d7e 100644
--- a/packages/styles/src/palettes/_mixins.scss
+++ b/packages/styles/src/palettes/_mixins.scss
@@ -42,7 +42,7 @@
       // Dark scheme explicitly set on the palette:
       &[data-color-scheme='dark'],
 
-        // No scheme explicitly set on the palette, but parent has a dark scheme:
+      // No scheme explicitly set on the palette, but parent has a dark scheme:
       &:where([data-color-scheme='dark'] :not([data-color-scheme='dark'])) {
         @include palette-tokens($palette, $theme, 'dark', $override-scheme: true);
       }
@@ -61,7 +61,7 @@
   --post-current-palette-bg: #{tokens.get('palettes-color-#{$name}-bg', $palette)};
 
   @if ($override-scheme == true) {
-    $bg-scheme: tokens.get('helper-color-#{$name}-bg-scheme', $palette);
+    $bg-scheme: tokens.get('palettes-color-#{$name}-bg-scheme', $palette);
 
     @if ($bg-scheme == 'light') {
       @extend %color-scheme-light;

From 698620b9d3069990ba9f5928a671d508c9bc0538 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?= <alize.debray@post.ch>
Date: Thu, 21 Nov 2024 19:15:51 +0100
Subject: [PATCH 9/9] Add back palette utilities

---
 packages/styles/src/palettes/_mixins.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/styles/src/palettes/_mixins.scss b/packages/styles/src/palettes/_mixins.scss
index b46dae0d7e..b98cd0116e 100644
--- a/packages/styles/src/palettes/_mixins.scss
+++ b/packages/styles/src/palettes/_mixins.scss
@@ -8,6 +8,8 @@
 
 @use './variables' as *;
 
+@forward './utilities';
+
 @mixin palettes($theme) {
   body {
     background-color: var(--post-current-palette-bg) !important;