From cecab53a5e08a5f109885c5f627f2982b832ebba Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Sep 2025 10:10:43 +0200
Subject: [PATCH 1/2] Iterate wording, clean up docs

---
 components/src/Caption/Caption.stories.svelte |   2 +-
 components/src/ChartHeader/ChartHeader.svelte |   2 +-
 components/src/DesignTokens/DesignTokens.mdx  |  66 +--
 .../src/DesignTokens/DesignTokens.svelte      |  20 +-
 components/src/DesignTokens/Tokens.ts         |   6 +-
 .../src/Headline/Headline.stories.svelte      |   2 +-
 components/src/Logotype/Logotype.svelte       |   2 +-
 components/src/Middot/Middot.svelte           |   2 +-
 components/src/Note/Note.svelte               |   4 +-
 components/src/Switcher/Switcher.svelte       |   8 +-
 package-lock.json                             | 427 ------------------
 11 files changed, 49 insertions(+), 492 deletions(-)

diff --git a/components/src/Caption/Caption.stories.svelte b/components/src/Caption/Caption.stories.svelte
index a1d61a33..30047a3a 100644
--- a/components/src/Caption/Caption.stories.svelte
+++ b/components/src/Caption/Caption.stories.svelte
@@ -30,6 +30,6 @@
 
 <style>
 	.container {
-		color: var(--colour-copyPrimary);
+		color: var(--color-textPrimary);
 	}
 </style>
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index 77e81d64..7fbc8bc4 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -27,7 +27,7 @@
 
 <style>
 	.container {
-		color: var(--colour-copyPrimary);
+		color: var(--color-textPrimary);
 		font-family: var(--swr-sans);
 		display: flex;
 		flex-flow: column;
diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx
index d9b27df2..16126e9b 100644
--- a/components/src/DesignTokens/DesignTokens.mdx
+++ b/components/src/DesignTokens/DesignTokens.mdx
@@ -7,7 +7,7 @@ import {
 	Typeset,
 	Canvas
 } from '@storybook/addon-docs/blocks';
-import { shades, scales, typography } from './Tokens';
+import { shades, scales, typography, semantics } from './Tokens';
 
 import * as HeadlineStories from '../Headline/Headline.stories.svelte';
 import * as CopyStories from '../Copy/Copy.stories.svelte';
@@ -49,8 +49,7 @@ The `<DesignTokens>` component makes colours, type sizes and other design tokens
 
 <style>
 	p {
-		color: var(--violet-dark-1); // this works
-
+	  color: var(--violet-dark-1); // this works
 	}
 </style>
 ```
@@ -96,7 +95,7 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
 	fontFamily="SWR-VAR-Text"
 	sampleText="Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten"
 	fontSizes={Object.entries(typography.wide.sizes)
-		.map(([key, size]) => {
+		.map(([_, size]) => {
 			return size;
 		})
 		.reverse()}
@@ -104,6 +103,28 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
 
 ## Colours
 
+### Semantics
+
+Light / Dark
+
+<ColorPalette>
+	{[
+		'textPrimary',
+		'textSecondary',
+		'textSecondaryHover',
+		'logoFill',
+		'surfaceFill',
+		'pageFill'
+	].map((el, i) => {
+		return (
+			<ColorItem
+				title={`${el.split('')[0].toUpperCase()}${el.slice(1)}`}
+				colors={[semantics[el]['light'], semantics[el]['dark']]}
+			/>
+		);
+	})}
+</ColorPalette>
+
 ### Shades
 
 <ColorPalette>
@@ -125,40 +146,3 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
 		);
 	})}
 </ColorPalette>
-
-### Linear Scales
-
-### Categorical Scales
-
-### Divergent Scales
-
-<ColorPalette>
-	{[
-		'red_blue',
-		'red_violet',
-		'red_forest',
-		'red_apple',
-		'red_teal',
-		'violet_teal',
-		'violet_orange',
-		'blue_pink',
-		'teal_pink',
-		'forest_plum',
-		'apple_plum',
-		'orange_blue',
-		'orange_teal'
-	].map((el, _) => {
-		return (
-			<ColorItem
-				title={`${el
-					.split('_')
-					.map((c) => {
-						return c[0].toUpperCase() + c.slice(1);
-					})
-					.join('/')}`}
-				subtitle={el}
-				colors={scales[el]}
-			/>
-		);
-	})}
-</ColorPalette>
diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte
index e9564564..7d5f6eaf 100644
--- a/components/src/DesignTokens/DesignTokens.svelte
+++ b/components/src/DesignTokens/DesignTokens.svelte
@@ -45,17 +45,17 @@
 		--br-small: 4px;
 		--input-height: 2.5rem;
 
-		--colour-copyPrimary: var(--copyPrimary-light);
-		--colour-copySecondary: var(--copySecondary-light);
-		--colour-copySecondaryHover: var(--copySecondaryHover-light);
-		--colour-logoFill: var(--logoFill-light);
-		--colour-surfaceFill: var(--surfaceFill-light);
+		--color-textPrimary: var(--textPrimary-light);
+		--color-textSecondary: var(--textSecondary-light);
+		--color-textSecondaryHover: var(--textSecondaryHover-light);
+		--color-logoFill: var(--logoFill-light);
+		--color-surfaceFill: var(--surfaceFill-light);
 		@media (prefers-color-scheme: dark) {
-			--colour-logoFill: var(--logoFill-dark);
-			--colour-surfaceFill: var(--surfaceFill-dark);
-			--colour-copyPrimary: var(--copyPrimary-dark);
-			--colour-copySecondary: var(--copySecondary-dark);
-			--colour-copySecondaryHover: var(--copySecondaryHover-dark);
+			--color-logoFill: var(--logoFill-dark);
+			--color-surfaceFill: var(--surfaceFill-dark);
+			--color-textPrimary: var(--textPrimary-dark);
+			--color-textSecondary: var(--textSecondary-dark);
+			--color-textSecondaryHover: var(--textSecondaryHover-dark);
 		}
 
 		--swr-text: 'SWR-VAR-Text', sans-serif;
diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 9059808e..6284bc69 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -157,15 +157,15 @@ const shades: ColourMap = {
 };
 
 const semantics: ColourMap = {
-	copyPrimary: {
+	textPrimary: {
 		light: '#0c0c0c',
 		dark: '#f8f7f5'
 	},
-	copySecondary: {
+	textSecondary: {
 		light: shades.gray.base,
 		dark: '#a3a3a3'
 	},
-	copySecondaryHover: {
+	textSecondaryHover: {
 		light: shades.gray.dark1,
 		dark: '#b4b4b4'
 	},
diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte
index 5923aebd..f49b21c8 100644
--- a/components/src/Headline/Headline.stories.svelte
+++ b/components/src/Headline/Headline.stories.svelte
@@ -20,6 +20,6 @@
 
 <style>
 	.container {
-		color: var(--colour-copyPrimary);
+		color: var(--color-textPrimary);
 	}
 </style>
diff --git a/components/src/Logotype/Logotype.svelte b/components/src/Logotype/Logotype.svelte
index e4a981e2..a5c204e6 100644
--- a/components/src/Logotype/Logotype.svelte
+++ b/components/src/Logotype/Logotype.svelte
@@ -42,6 +42,6 @@
 		height: calc(var(--fs-small-2) * 0.8);
 	}
 	path {
-		fill: var(--colour-logoFill);
+		fill: var(--color-logoFill);
 	}
 </style>
diff --git a/components/src/Middot/Middot.svelte b/components/src/Middot/Middot.svelte
index 15a44907..07ddf028 100644
--- a/components/src/Middot/Middot.svelte
+++ b/components/src/Middot/Middot.svelte
@@ -2,7 +2,7 @@
 
 <style>
 	.middot {
-		background: var(--colour-copySecondary);
+		background: var(--color-textSecondary);
 		width: 0.6em;
 		height: 0.6em;
 		display: inline-block;
diff --git a/components/src/Note/Note.svelte b/components/src/Note/Note.svelte
index 79d95163..a47be773 100644
--- a/components/src/Note/Note.svelte
+++ b/components/src/Note/Note.svelte
@@ -19,7 +19,7 @@
 		font-size: calc(var(--fs-small-2) * 0.9);
 		line-height: 1.4;
 		letter-spacing: 0.0015em;
-		color: var(--colour-copySecondary);
+		color: var(--color-textSecondary);
 
 		:global(*) {
 			color: inherit;
@@ -32,7 +32,7 @@
 			text-underline-offset: 0.15em;
 			&:hover,
 			&:focus-visible {
-				color: var(--colour-copySecondaryHover);
+				color: var(--color-textSecondaryHover);
 			}
 		}
 	}
diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte
index 753c6345..5dbe6286 100644
--- a/components/src/Switcher/Switcher.svelte
+++ b/components/src/Switcher/Switcher.svelte
@@ -76,9 +76,9 @@
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
-		border: 1px solid var(--colour-copySecondary);
-		color: var(--colour-copyPrimary);
-		background: var(--colour-surfaceFill);
+		border: 1px solid var(--color-textSecondary);
+		color: var(--color-textPrimary);
+		background: var(--color-surfaceFill);
 		border-radius: var(--br-small);
 
 		@media (min-width: base.$bp-s) {
@@ -135,7 +135,7 @@
 			text-decoration: underline;
 		}
 		.is-selected & {
-			background: var(--colour-copySecondary);
+			background: var(--color-textSecondary);
 			font-weight: 700;
 		}
 	}
diff --git a/package-lock.json b/package-lock.json
index 865f85ff..d307c690 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,7 +52,6 @@
 				"sass-embedded": "^1.89.2",
 				"semantic-release": "^24.2.7",
 				"storybook": "^9.1.4",
-				"storybook-dark-mode": "^4.0.2",
 				"svelte": "^5.23.0",
 				"svelte-check": "^4.0.0",
 				"svelte-preprocess": "^6.0.3",
@@ -4399,67 +4398,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/@storybook/components": {
-			"version": "8.6.14",
-			"resolved": "https://registry.npmjs.org/@storybook/components/-/components-8.6.14.tgz",
-			"integrity": "sha512-HNR2mC5I4Z5ek8kTrVZlIY/B8gJGs5b3XdZPBPBopTIN6U/YHXiDyOjY3JlaS4fSG1fVhp/Qp1TpMn1w/9m1pw==",
-			"dev": true,
-			"license": "MIT",
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/storybook"
-			},
-			"peerDependencies": {
-				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
-			}
-		},
-		"node_modules/@storybook/core": {
-			"version": "8.6.14",
-			"resolved": "https://registry.npmjs.org/@storybook/core/-/core-8.6.14.tgz",
-			"integrity": "sha512-1P/w4FSNRqP8j3JQBOi3yGt8PVOgSRbP66Ok520T78eJBeqx9ukCfl912PQZ7SPbW3TIunBwLXMZOjZwBB/JmA==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"@storybook/theming": "8.6.14",
-				"better-opn": "^3.0.2",
-				"browser-assert": "^1.2.1",
-				"esbuild": "^0.18.0 || ^0.19.0 || ^0.20.0 || ^0.21.0 || ^0.22.0 || ^0.23.0 || ^0.24.0 || ^0.25.0",
-				"esbuild-register": "^3.5.0",
-				"jsdoc-type-pratt-parser": "^4.0.0",
-				"process": "^0.11.10",
-				"recast": "^0.23.5",
-				"semver": "^7.6.2",
-				"util": "^0.12.5",
-				"ws": "^8.2.3"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/storybook"
-			},
-			"peerDependencies": {
-				"prettier": "^2 || ^3"
-			},
-			"peerDependenciesMeta": {
-				"prettier": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/@storybook/core-events": {
-			"version": "8.6.14",
-			"resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-8.6.14.tgz",
-			"integrity": "sha512-RrJ95u3HuIE4Nk8VmZP0tc/u0vYoE2v9fYlMw6K2GUSExzKDITs3voy6WMIY7Q3qbQun8XUXVlmqkuFzTEy/pA==",
-			"dev": true,
-			"license": "MIT",
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/storybook"
-			},
-			"peerDependencies": {
-				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
-			}
-		},
 		"node_modules/@storybook/csf": {
 			"version": "0.1.13",
 			"resolved": "https://registry.npmjs.org/@storybook/csf/-/csf-0.1.13.tgz",
@@ -4491,34 +4429,6 @@
 				"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0-beta"
 			}
 		},
-		"node_modules/@storybook/manager-api": {
-			"version": "8.6.14",
-			"resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.6.14.tgz",
-			"integrity": "sha512-ez0Zihuy17udLbfHZQXkGqwtep0mSGgHcNzGN7iZrMP1m+VmNo+7aGCJJdvXi7+iU3yq8weXSQFWg5DqWgLS7g==",
-			"dev": true,
-			"license": "MIT",
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/storybook"
-			},
-			"peerDependencies": {
-				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
-			}
-		},
-		"node_modules/@storybook/theming": {
-			"version": "8.6.14",
-			"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-8.6.14.tgz",
-			"integrity": "sha512-r4y+LsiB37V5hzpQo+BM10PaCsp7YlZ0YcZzQP1OCkPlYXmUAFy2VvDKaFRpD8IeNPKug2u4iFm/laDEbs03dg==",
-			"dev": true,
-			"license": "MIT",
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/storybook"
-			},
-			"peerDependencies": {
-				"storybook": "^8.2.0 || ^8.3.0-0 || ^8.4.0-0 || ^8.5.0-0 || ^8.6.0-0"
-			}
-		},
 		"node_modules/@sveltejs/acorn-typescript": {
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
@@ -6242,23 +6152,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/available-typed-arrays": {
-			"version": "1.0.7",
-			"resolved": "https://registry.npmjs.org/available-typed-arrays/-/available-typed-arrays-1.0.7.tgz",
-			"integrity": "sha512-wvUjBtSGN7+7SjNpq/9M2Tg350UZD3q62IFZLbRAR1bSMlCo1ZaeW+BJ+D090e4hIIZLBcTDWe4Mh4jvUDajzQ==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"possible-typed-array-names": "^1.0.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/axios": {
 			"version": "1.9.0",
 			"resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
@@ -6665,13 +6558,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/browser-assert": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/browser-assert/-/browser-assert-1.2.1.tgz",
-			"integrity": "sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==",
-			"dev": true,
-			"peer": true
-		},
 		"node_modules/browserslist": {
 			"version": "4.25.0",
 			"resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.25.0.tgz",
@@ -6830,26 +6716,6 @@
 				"typedarray-to-buffer": "^3.1.5"
 			}
 		},
-		"node_modules/call-bind": {
-			"version": "1.0.8",
-			"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.8.tgz",
-			"integrity": "sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"call-bind-apply-helpers": "^1.0.0",
-				"es-define-property": "^1.0.0",
-				"get-intrinsic": "^1.2.4",
-				"set-function-length": "^1.2.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/call-bind-apply-helpers": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/call-bind-apply-helpers/-/call-bind-apply-helpers-1.0.2.tgz",
@@ -8393,25 +8259,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/define-data-property": {
-			"version": "1.1.4",
-			"resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
-			"integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"es-define-property": "^1.0.0",
-				"es-errors": "^1.3.0",
-				"gopd": "^1.0.1"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/define-lazy-prop": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
@@ -10039,23 +9886,6 @@
 				}
 			}
 		},
-		"node_modules/for-each": {
-			"version": "0.3.5",
-			"resolved": "https://registry.npmjs.org/for-each/-/for-each-0.3.5.tgz",
-			"integrity": "sha512-dKx12eRCVIzqCxFGplyFKJMPvLEWgmNtUrpTiJIR5u97zEhRG8ySrtboPHZXx7daLxQVrl643cTzbab2tkQjxg==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"is-callable": "^1.2.7"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/foreground-child": {
 			"version": "2.0.0",
 			"resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-2.0.0.tgz",
@@ -10621,20 +10451,6 @@
 				"node": ">=8"
 			}
 		},
-		"node_modules/has-property-descriptors": {
-			"version": "1.0.2",
-			"resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
-			"integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"es-define-property": "^1.0.0"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/has-symbols": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.1.0.tgz",
@@ -11276,24 +11092,6 @@
 				"url": "https://github.com/sponsors/wooorm"
 			}
 		},
-		"node_modules/is-arguments": {
-			"version": "1.2.0",
-			"resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.2.0.tgz",
-			"integrity": "sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"call-bound": "^1.0.2",
-				"has-tostringtag": "^1.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/is-arrayish": {
 			"version": "0.2.1",
 			"resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -11338,20 +11136,6 @@
 				"node": ">=4"
 			}
 		},
-		"node_modules/is-callable": {
-			"version": "1.2.7",
-			"resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.7.tgz",
-			"integrity": "sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/is-core-module": {
 			"version": "2.16.1",
 			"resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
@@ -11432,26 +11216,6 @@
 				"node": ">=6"
 			}
 		},
-		"node_modules/is-generator-function": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/is-generator-function/-/is-generator-function-1.1.0.tgz",
-			"integrity": "sha512-nPUB5km40q9e8UfN/Zc24eLlzdSf9OfKByBw9CIdw4H1giPMeA0OIJvbchsCu4npfI2QcMVBsGEBHKZ7wLTWmQ==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"call-bound": "^1.0.3",
-				"get-proto": "^1.0.0",
-				"has-tostringtag": "^1.0.2",
-				"safe-regex-test": "^1.1.0"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/is-glob": {
 			"version": "4.0.3",
 			"resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -11523,26 +11287,6 @@
 				"@types/estree": "^1.0.6"
 			}
 		},
-		"node_modules/is-regex": {
-			"version": "1.2.1",
-			"resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.2.1.tgz",
-			"integrity": "sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"call-bound": "^1.0.2",
-				"gopd": "^1.2.0",
-				"has-tostringtag": "^1.0.2",
-				"hasown": "^2.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/is-stream": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -11556,23 +11300,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/is-typed-array": {
-			"version": "1.1.15",
-			"resolved": "https://registry.npmjs.org/is-typed-array/-/is-typed-array-1.1.15.tgz",
-			"integrity": "sha512-p3EcsicXjit7SaskXHs1hA91QxgTw46Fv6EFKKGS5DRFLD8yKnohjF3hxoju94b/OcMZoQukzpPpBE9uLVKzgQ==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"which-typed-array": "^1.1.16"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/is-typedarray": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
@@ -12938,17 +12665,6 @@
 			"license": "MIT",
 			"optional": true
 		},
-		"node_modules/jsdoc-type-pratt-parser": {
-			"version": "4.8.0",
-			"resolved": "https://registry.npmjs.org/jsdoc-type-pratt-parser/-/jsdoc-type-pratt-parser-4.8.0.tgz",
-			"integrity": "sha512-iZ8Bdb84lWRuGHamRXFyML07r21pcwBrLkHEuHgEY5UbCouBwv7ECknDRKzsQIXMiqpPymqtIf8TC/shYKB5rw==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"engines": {
-				"node": ">=12.0.0"
-			}
-		},
 		"node_modules/jsesc": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
@@ -18834,17 +18550,6 @@
 				"node": ">= 10.12"
 			}
 		},
-		"node_modules/possible-typed-array-names": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz",
-			"integrity": "sha512-/+5VFTchJDoVj3bhoqi6UeymcD00DAwb1nJwamzPvHEszJ4FpF6SNNbUbOS8yI56qHzdV8eK0qEfOSiodkTdxg==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"engines": {
-				"node": ">= 0.4"
-			}
-		},
 		"node_modules/postcss": {
 			"version": "8.5.4",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.4.tgz",
@@ -19213,17 +18918,6 @@
 				"url": "https://github.com/sponsors/sindresorhus"
 			}
 		},
-		"node_modules/process": {
-			"version": "0.11.10",
-			"resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
-			"integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"engines": {
-				"node": ">= 0.6.0"
-			}
-		},
 		"node_modules/process-nextick-args": {
 			"version": "2.0.1",
 			"resolved": "https://registry.npmjs.org/process-nextick-args/-/process-nextick-args-2.0.1.tgz",
@@ -20031,25 +19725,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/safe-regex-test": {
-			"version": "1.1.0",
-			"resolved": "https://registry.npmjs.org/safe-regex-test/-/safe-regex-test-1.1.0.tgz",
-			"integrity": "sha512-x/+Cz4YrimQxQccJf5mKEbIa1NzeCRNI5Ecl/ekmlYaampdNLPalVyIcCZNNH3MvmqBugV5TMYZXv0ljslUlaw==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"call-bound": "^1.0.2",
-				"es-errors": "^1.3.0",
-				"is-regex": "^1.2.1"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/safer-buffer": {
 			"version": "2.1.2",
 			"resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -20856,25 +20531,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/set-function-length": {
-			"version": "1.2.2",
-			"resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
-			"integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"define-data-property": "^1.1.4",
-				"es-errors": "^1.3.0",
-				"function-bind": "^1.1.2",
-				"get-intrinsic": "^1.2.4",
-				"gopd": "^1.0.1",
-				"has-property-descriptors": "^1.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			}
-		},
 		"node_modules/setprototypeof": {
 			"version": "1.2.0",
 			"resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.2.0.tgz",
@@ -21443,51 +21099,6 @@
 			"dev": true,
 			"license": "MIT"
 		},
-		"node_modules/storybook": {
-			"version": "8.6.14",
-			"resolved": "https://registry.npmjs.org/storybook/-/storybook-8.6.14.tgz",
-			"integrity": "sha512-sVKbCj/OTx67jhmauhxc2dcr1P+yOgz/x3h0krwjyMgdc5Oubvxyg4NYDZmzAw+ym36g/lzH8N0Ccp4dwtdfxw==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"@storybook/core": "8.6.14"
-			},
-			"bin": {
-				"getstorybook": "bin/index.cjs",
-				"sb": "bin/index.cjs",
-				"storybook": "bin/index.cjs"
-			},
-			"funding": {
-				"type": "opencollective",
-				"url": "https://opencollective.com/storybook"
-			},
-			"peerDependencies": {
-				"prettier": "^2 || ^3"
-			},
-			"peerDependenciesMeta": {
-				"prettier": {
-					"optional": true
-				}
-			}
-		},
-		"node_modules/storybook-dark-mode": {
-			"version": "4.0.2",
-			"resolved": "https://registry.npmjs.org/storybook-dark-mode/-/storybook-dark-mode-4.0.2.tgz",
-			"integrity": "sha512-zjcwwQ01R5t1VsakA6alc2JDIRVtavryW8J3E3eKLDIlAMcvsgtpxlelWkZs2cuNspk6Z10XzhQVrUWtYc3F0w==",
-			"dev": true,
-			"license": "MIT",
-			"dependencies": {
-				"@storybook/components": "^8.0.0",
-				"@storybook/core-events": "^8.0.0",
-				"@storybook/global": "^5.0.0",
-				"@storybook/icons": "^1.2.5",
-				"@storybook/manager-api": "^8.0.0",
-				"@storybook/theming": "^8.0.0",
-				"fast-deep-equal": "^3.1.3",
-				"memoizerific": "^1.11.3"
-			}
-		},
 		"node_modules/stream-combiner2": {
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/stream-combiner2/-/stream-combiner2-1.1.1.tgz",
@@ -23197,21 +22808,6 @@
 			"integrity": "sha512-H/A06tKD7sS1O1X2SshBVeA5FLycRpjqiBeqGKmBwBDBy28EnRjORxTNe269KSSr5un5qyWi1iL61wLxpd+ZOg==",
 			"license": "MIT"
 		},
-		"node_modules/util": {
-			"version": "0.12.5",
-			"resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz",
-			"integrity": "sha512-kZf/K6hEIrWHI6XqOFUiiMa+79wE/D8Q+NCNAWclkyg3b4d2k7s0QGepNjiABc+aR3N1PAyHL7p6UcLY6LmrnA==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"inherits": "^2.0.3",
-				"is-arguments": "^1.0.4",
-				"is-generator-function": "^1.0.7",
-				"is-typed-array": "^1.1.3",
-				"which-typed-array": "^1.1.2"
-			}
-		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -23817,29 +23413,6 @@
 			"dev": true,
 			"license": "ISC"
 		},
-		"node_modules/which-typed-array": {
-			"version": "1.1.19",
-			"resolved": "https://registry.npmjs.org/which-typed-array/-/which-typed-array-1.1.19.tgz",
-			"integrity": "sha512-rEvr90Bck4WZt9HHFC4DJMsjvu7x+r6bImz0/BrbWb7A2djJ8hnZMrWnHo9F8ssv0OMErasDhftrfROTyqSDrw==",
-			"dev": true,
-			"license": "MIT",
-			"peer": true,
-			"dependencies": {
-				"available-typed-arrays": "^1.0.7",
-				"call-bind": "^1.0.8",
-				"call-bound": "^1.0.4",
-				"for-each": "^0.3.5",
-				"get-proto": "^1.0.1",
-				"gopd": "^1.2.0",
-				"has-tostringtag": "^1.0.2"
-			},
-			"engines": {
-				"node": ">= 0.4"
-			},
-			"funding": {
-				"url": "https://github.com/sponsors/ljharb"
-			}
-		},
 		"node_modules/why-is-node-running": {
 			"version": "2.3.0",
 			"resolved": "https://registry.npmjs.org/why-is-node-running/-/why-is-node-running-2.3.0.tgz",

From fb9b68fff955d77983bff0e9d85ba660cb145742 Mon Sep 17 00:00:00 2001
From: Max Kohler <hello@maxkohler.com>
Date: Tue, 16 Sep 2025 10:17:27 +0200
Subject: [PATCH 2/2] Fix story

---
 components/src/Copy/Copy.stories.svelte | 36 ++++++++++++++++---------
 1 file changed, 24 insertions(+), 12 deletions(-)

diff --git a/components/src/Copy/Copy.stories.svelte b/components/src/Copy/Copy.stories.svelte
index 774f937c..ea64bf26 100644
--- a/components/src/Copy/Copy.stories.svelte
+++ b/components/src/Copy/Copy.stories.svelte
@@ -12,21 +12,33 @@
 
 <Story name="Default" asChild>
 	<DesignTokens>
-		<Copy>
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
-			größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die Pollensaison
-			hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die Pollensaison wird
-			länger, die Grippesaison wird länger und dadurch überlappt sich das Ganze."
-		</Copy>
+		<div class="container">
+			<Copy>
+				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
+				größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die
+				Pollensaison hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die
+				Pollensaison wird länger, die Grippesaison wird länger und dadurch überlappt sich das
+				Ganze."
+			</Copy>
+		</div>
 	</DesignTokens>
 </Story>
 <Story name="Bold" asChild>
 	<DesignTokens>
-		<Copy weight="bold">
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
-			größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die Pollensaison
-			hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die Pollensaison wird
-			länger, die Grippesaison wird länger und dadurch überlappt sich das Ganze."
-		</Copy>
+		<div class="container">
+			<Copy weight="bold">
+				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen), bedient derzeit
+				größtenteils Allergiegeplagte: "Wir gehen nahtlos von der Erkältungssaison in die
+				Pollensaison hinein. Wir merken definitiv eine Veränderung über die letzten Jahre: Die
+				Pollensaison wird länger, die Grippesaison wird länger und dadurch überlappt sich das
+				Ganze."
+			</Copy>
+		</div>
 	</DesignTokens>
 </Story>
+
+<style>
+	.container {
+		color: var(--color-textPrimary);
+	}
+</style>