Merge branch 'main' into 2872-prevent-post-tabs-from-firing-a-change-…

…event-on-init

.changeset/famous-emus-appear.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Deprecated accent colors.

.changeset/gorgeous-frogs-build.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Updated tabs to improve visual continuity and readability.

.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.

.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

.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
 

packages/documentation/.storybook/addons/version-switcher/version-switcher.scss

@@ -60,5 +60,6 @@
   }
 
   .dep__version {
+    white-space: nowrap;
   }
 }

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;
+            }
+          }
+        }
       }
     }
   }

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,27 +24,15 @@
     }
   }
 
-  &::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: '';
       position: absolute;
       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;
+}

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: *

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} />

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">