From ee531c0119b9e17df0fad55438e4184436bc007d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Mon, 15 Jul 2024 11:00:52 +0200
Subject: [PATCH 1/4] feat(workflows): add a build-tokens workflow (#3256)
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>
---
 .github/workflows/build-tokens.yaml | 71 +++++++++++++++++++++++++++++
 1 file changed, 71 insertions(+)
 create mode 100644 .github/workflows/build-tokens.yaml

diff --git a/.github/workflows/build-tokens.yaml b/.github/workflows/build-tokens.yaml
new file mode 100644
index 0000000000..d463475e55
--- /dev/null
+++ b/.github/workflows/build-tokens.yaml
@@ -0,0 +1,71 @@
+name: Build Tokens
+on:
+  pull_request:
+    types: [opened, synchronize, edited, reopened]
+    paths:
+      - 'packages/tokens/**'
+
+jobs:
+  build:
+    name: Build Tokens
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup
+        uses: ./.github/actions/setup-pnpm
+
+      - name: Install dependencies
+        run: pnpm --filter design-system-tokens... install
+
+      - name: Build tokens & dependencies
+        run: pnpm --filter design-system-tokens... build
+
+      - name: Create Summary
+        id: summary
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const fs = require('fs')
+            const path = require('path')
+
+            const inputFileNames = fs.readdirSync('packages/tokens/tokensstudio-generated')
+            const inputFiles = inputFileNames.map(fileName => ({
+              type: path.extname(fileName),
+              name: fileName,
+              content: fs.readFileSync(`packages/tokens/tokensstudio-generated/${fileName}`, 'utf8')
+            }))
+
+            const outputOrder = [
+              'index.scss',
+              'core.scss',
+              'mode.scss',
+              'device.scss',
+              'channel.scss',
+              'theme.scss',
+              'components.scss',
+            ]
+            const outputFileNames = fs.readdirSync('packages/tokens/dist')
+            const outputFiles = outputFileNames.map(fileName => ({
+              type: path.extname(fileName),
+              name: fileName,
+              content: fs.readFileSync(`packages/tokens/dist/${fileName}`, 'utf8')
+            })).sort((a, b) => (outputOrder.includes(a.name) ? outputOrder.indexOf(a.name) : 1000) - (outputOrder.includes(b.name) ? outputOrder.indexOf(b.name) : 1000))
+
+            return `# Token Build
+            ## Input
+            ${inputFiles.map(({ type, name, content }) => `<details>
+              <summary><code>${name}</code></summary>
+              <pre lang="${type}">${content}</pre>
+            </details>`).join('\n')}
+
+            ## Output
+            ${outputFiles.map(({ type, name, content }) => `<details>
+              <summary><code>${name}</code></summary>
+              <pre lang="${type}">${content}</pre>
+            </details>`).join('\n')}
+            `
+
+      - name: Output Summary
+        run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY

From 822fd9ddfd0c6ad51d0332325c8cb89cac8e1c51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= <oliver.schuerch@post.ch>
Date: Mon, 15 Jul 2024 13:57:36 +0200
Subject: [PATCH 2/4] fix(documentation): Fix headers for versions.json (#3267)

---
 .changeset/quick-birds-own.md                                | 5 +++++
 .github/workflows/release.yaml                               | 3 +++
 .../.storybook/addons/version-switcher/version-switcher.scss | 1 +
 packages/documentation/public/_headers                       | 5 +++++
 packages/documentation/public/netlify.toml                   | 4 ----
 5 files changed, 14 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/quick-birds-own.md
 create mode 100644 packages/documentation/public/_headers
 delete mode 100644 packages/documentation/public/netlify.toml

diff --git a/.changeset/quick-birds-own.md b/.changeset/quick-birds-own.md
new file mode 100644
index 0000000000..765bb8eb5a
--- /dev/null
+++ b/.changeset/quick-birds-own.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fix headers for the `versions.json` file. So it can be loaded and used from the version-switcher of older documentation pages.
diff --git a/.github/workflows/release.yaml b/.github/workflows/release.yaml
index dba82aa30b..0e3a698200 100644
--- a/.github/workflows/release.yaml
+++ b/.github/workflows/release.yaml
@@ -307,6 +307,9 @@ jobs:
       - name: Remove Documentation versions.json
         run: rm -f ./packages/documentation/public/assets/versions.json
 
+      - name: Remove Documentation _headers
+        run: rm -f ./packages/documentation/public/_headers
+
       - name: Remove Documentation _redirects
         run: rm -f ./packages/documentation/public/_redirects
 
diff --git a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
index c2bd39a987..366e947df5 100644
--- a/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
+++ b/packages/documentation/.storybook/addons/version-switcher/version-switcher.scss
@@ -60,5 +60,6 @@
   }
 
   .dep__version {
+    white-space: nowrap;
   }
 }
diff --git a/packages/documentation/public/_headers b/packages/documentation/public/_headers
new file mode 100644
index 0000000000..af4809add8
--- /dev/null
+++ b/packages/documentation/public/_headers
@@ -0,0 +1,5 @@
+# Adds custom headers for specific resources
+# This file is used by Netlify to handle headers
+
+/assets/versions.json
+  Access-Control-Allow-Origin: *
diff --git a/packages/documentation/public/netlify.toml b/packages/documentation/public/netlify.toml
deleted file mode 100644
index 3e8cd3ecfe..0000000000
--- a/packages/documentation/public/netlify.toml
+++ /dev/null
@@ -1,4 +0,0 @@
-[[headers]]
-  for="/assets/versions.json"
-    [headers.values]
-      Access-Control-Allow-Origin = "*"

From 71b9abdf0a8bd524ae9820f4969867005a46f46f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Aliz=C3=A9=20Debray?=
 <33580481+alizedebray@users.noreply.github.com>
Date: Mon, 15 Jul 2024 18:08:26 +0200
Subject: [PATCH 3/4] fix(docs): update tabs and control tables (#3254)
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/gorgeous-frogs-build.md            |  5 +++
 .../.storybook/styles/components/blocks.scss  | 37 +++++++++++++++++++
 .../.storybook/styles/components/tabs.scss    | 30 ++++++---------
 3 files changed, 54 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/gorgeous-frogs-build.md

diff --git a/.changeset/gorgeous-frogs-build.md b/.changeset/gorgeous-frogs-build.md
new file mode 100644
index 0000000000..3ce1ba1eb8
--- /dev/null
+++ b/.changeset/gorgeous-frogs-build.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated tabs to improve visual continuity and readability.
diff --git a/packages/documentation/.storybook/styles/components/blocks.scss b/packages/documentation/.storybook/styles/components/blocks.scss
index 6c17a5bfa1..c4c26501c0 100644
--- a/packages/documentation/.storybook/styles/components/blocks.scss
+++ b/packages/documentation/.storybook/styles/components/blocks.scss
@@ -38,6 +38,43 @@
             border-top: post.$border-width solid post.$border-color;
           }
         }
+
+        // category headers
+        &[title] {
+          > td {
+            background-clip: padding-box !important;
+
+            &:first-child {
+              border-inline-start: post.$size-line solid transparent;
+            }
+
+            &:last-child {
+              border-inline-end: post.$size-line solid transparent;
+            }
+          }
+
+          &:first-child > td {
+            border-block-start: post.$size-hair solid transparent;
+
+            &:first-child {
+              border-start-start-radius: post.$size-mini;
+            }
+
+            &:last-child {
+              border-start-end-radius: post.$size-mini;
+            }
+          }
+
+          &:last-child > td {
+            &:first-child {
+              border-end-start-radius: post.$size-mini;
+            }
+
+            &:last-child {
+              border-end-end-radius: post.$size-mini;
+            }
+          }
+        }
       }
     }
   }
diff --git a/packages/documentation/.storybook/styles/components/tabs.scss b/packages/documentation/.storybook/styles/components/tabs.scss
index bd1b618255..fdc194c485 100644
--- a/packages/documentation/.storybook/styles/components/tabs.scss
+++ b/packages/documentation/.storybook/styles/components/tabs.scss
@@ -4,7 +4,13 @@
 @include mixins.style-docs-only-guard('post-tabs') {
   &::part(tabs) {
     background: none;
+  }
+
+  &::part(content) {
+    position: relative;
+  }
 
+  &:has(post-tab-panel > .sbdocs)::part(tabs) {
     &::before {
       display: block;
       content: '';
@@ -18,19 +24,7 @@
     }
   }
 
-  &::part(content) {
-    position: relative;
-
-    &::before {
-      display: block;
-      content: '';
-      position: absolute;
-      top: 0;
-      bottom: post.$size-regular * -1;
-      left: calc(100% + #{post.$size-mini});
-      border-left: post.$size-hair dotted post.$border-color;
-    }
-
+  &:not(:has(post-tab-panel > .sbdocs))::part(content) {
     &::after {
       display: block;
       content: '';
@@ -38,7 +32,7 @@
       top: calc(100% + #{post.$size-regular});
       left: 0;
       right: post.$size-mini * -1;
-      border-top: post.$size-hair dotted post.$border-color;
+      border-top: post.$border-width dashed post.$border-color;
     }
   }
 }
@@ -47,10 +41,6 @@
   border-top-left-radius: post.$border-radius;
   border-top-right-radius: post.$border-radius;
 
-  &:first-child {
-    margin-left: post.$size-big;
-  }
-
   &.active {
     border-top-left-radius: post.$border-radius;
     border-top-right-radius: post.$border-radius;
@@ -65,3 +55,7 @@
     margin-left: 1px;
   }
 }
+
+@include mixins.style-docs-only-guard('post-tab-header:not(post-tabs:has(post-tab-panel > .sbdocs) post-tab-header).tab-title[role="tab"]') {
+  font-size: post.$font-size-sm;
+}

From ea564190b365c086cd0c7e791da236e81c66a026 Mon Sep 17 00:00:00 2001
From: David Ritter <141235163+davidritter-dotcom@users.noreply.github.com>
Date: Tue, 16 Jul 2024 09:34:28 +0200
Subject: [PATCH 4/4] chore(documentation): add deprecated message on accent
 colors (#3195)

---
 .changeset/famous-emus-appear.md                            | 5 +++++
 .../src/stories/components/button/button.docs.mdx           | 5 +++++
 .../src/stories/foundation/color/color.docs.mdx             | 6 ++++++
 3 files changed, 16 insertions(+)
 create mode 100644 .changeset/famous-emus-appear.md

diff --git a/.changeset/famous-emus-appear.md b/.changeset/famous-emus-appear.md
new file mode 100644
index 0000000000..b6908b5b94
--- /dev/null
+++ b/.changeset/famous-emus-appear.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Deprecated accent colors.
diff --git a/packages/documentation/src/stories/components/button/button.docs.mdx b/packages/documentation/src/stories/components/button/button.docs.mdx
index 71f21d6f3a..be5b9cdbcd 100644
--- a/packages/documentation/src/stories/components/button/button.docs.mdx
+++ b/packages/documentation/src/stories/components/button/button.docs.mdx
@@ -36,6 +36,11 @@ Inverted buttons don't need special classes anymore, just use any of the [backgr
 
 ### Accent colors
 
+<div className="alert alert-md alert-warning">
+  <h2 className="alert-heading">The accent colors are deprecated</h2>
+  <p>The CSS classes to apply to the buttons will be removed in the future.</p>
+</div>
+
 There are a number of accent colors that you can apply to buttons instead of the usual colors.
 
 <Canvas of={ButtonStories.AccentColors} />
diff --git a/packages/documentation/src/stories/foundation/color/color.docs.mdx b/packages/documentation/src/stories/foundation/color/color.docs.mdx
index 703efbecb1..b0da9534b4 100644
--- a/packages/documentation/src/stories/foundation/color/color.docs.mdx
+++ b/packages/documentation/src/stories/foundation/color/color.docs.mdx
@@ -60,6 +60,12 @@ These colors are also available via the **Sass map** `$signal-background-colors`
 </section>
 
 ## Accent colors
+
+<div className="alert alert-md alert-warning">
+  <h2 className="alert-heading">The accent colors are deprecated</h2>
+  <p>Its CSS and SASS variables will be removed in the future.</p>
+</div>
+
 These colors are also available via the **Sass map** `$accent-colors`.
 
 <section className="color-swatch__section">