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/.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/.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/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 }) => `
+ ${name}
+ ${content}
+ `).join('\n')}
+
+ ## Output
+ ${outputFiles.map(({ type, name, content }) => `
+ ${name}
+ ${content}
+ `).join('\n')}
+ `
+
+ - name: Output Summary
+ run: echo -e ${{ steps.summary.outputs.result }} >> $GITHUB_STEP_SUMMARY
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/.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;
+}
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 = "*"
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
+
+
The accent colors are deprecated
+
The CSS classes to apply to the buttons will be removed in the future.
+
+
There are a number of accent colors that you can apply to buttons instead of the usual colors.
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`
## Accent colors
+
+
+
The accent colors are deprecated
+
Its CSS and SASS variables will be removed in the future.
+
+
These colors are also available via the **Sass map** `$accent-colors`.