Block out dark mode support

components/.storybook/darkModeDecorator.ts

@@ -0,0 +1,26 @@
+import React from 'react';
+import { themes, ThemeProvider } from 'storybook/theming';
+
+// Add a global decorator that will render a dark background when the
+// "Color Scheme" knob is set to dark
+const darkModeDecorator = (storyFn) => {
+	// A knob for color scheme added to every story
+	const colorScheme = select('Color Scheme', ['light', 'dark'], 'light');
+
+	// Hook your theme provider with some knobs
+	return React.createElement(ThemeProvider, {
+		// A knob for theme added to every story
+		theme: select('Theme', Object.keys(themes), 'default'),
+		colorScheme,
+		children: [
+			React.createElement('style', {
+				dangerouslySetInnerHTML: {
+					__html: `html { ${colorScheme === 'dark' ? 'background-color: rgb(35,35,35);' : ''} }`
+				}
+			}),
+			storyFn()
+		]
+	});
+};
+
+export default darkModeDecorator;

components/.storybook/main.ts

@@ -20,7 +20,8 @@ const config: StorybookConfig = {
 		},
 		getAbsolutePath('@storybook/addon-links'),
 		getAbsolutePath('@storybook/addon-vitest'),
-		getAbsolutePath('@storybook/addon-docs')
+		getAbsolutePath('@storybook/addon-docs'),
+		getAbsolutePath('@vueless/storybook-dark-mode')
 	],
 	framework: {
 		name: getAbsolutePath('@storybook/sveltekit'),

components/.storybook/preview.ts

@@ -1,7 +1,17 @@
 import type { Preview } from '@storybook/sveltekit';
+import { themes } from 'storybook/theming';
 
 const preview: Preview = {
 	parameters: {
+		backgrounds: {
+			options: [
+				{ name: 'dark', value: '#0C0C0C' }, // tokens.pageFill.dark
+				{ name: 'light', value: '#fff' } // tokens.pageFill.light
+			]
+		},
+		initialGlobals: {
+			backgrounds: { value: 'dark' }
+		},
 		options: {
 			storySort: {
 				order: [
@@ -40,8 +50,15 @@ const preview: Preview = {
 				color: /(background|color)$/i,
 				date: /Date$/i
 			}
+		},
+		darkMode: {
+			dark: { ...themes.dark },
+			light: { ...themes.normal },
+			stylePreview: true
 		}
 	},
+
+	decorators: [],
 	tags: ['autodocs']
 };
 

components/package.json

@@ -53,6 +53,7 @@
 		"@versatiles/style": "^5.7.0",
 		"@vitest/browser": "^3.2.4",
 		"@vitest/coverage-v8": "^3.2.4",
+		"@vueless/storybook-dark-mode": "^9.0.8",
 		"concurrently": "^9.2.1",
 		"http-server": "^14.1.1",
 		"mdx-mermaid": "^2.0.3",

components/src/Caption/Caption.stories.svelte

@@ -12,13 +12,24 @@
 
 <Story name="Default" asChild>
 	<DesignTokens>
-		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
+		<div class="container">
+			<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
+		</div>
 	</DesignTokens>
 </Story>
+
 <Story name="Bold" asChild>
 	<DesignTokens>
-		<Caption weight="bold">
-			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
-		</Caption>
+		<div class="container">
+			<Caption weight="bold">
+				Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
+			</Caption>
+		</div>
 	</DesignTokens>
 </Story>
+
+<style>
+	.container {
+		color: var(--colour-copyPrimary);
+	}
+</style>

components/src/ChartHeader/ChartHeader.svelte

@@ -27,7 +27,7 @@
 
 <style>
 	.container {
-		color: var(--gray-dark-5);
+		color: var(--colour-copyPrimary);
 		font-family: var(--swr-sans);
 		display: flex;
 		flex-flow: column;

components/src/Copy/Copy.svelte

@@ -20,6 +20,7 @@
 		font-size: var(--fs-base);
 		letter-spacing: 0.005em;
 		line-height: 1.475;
+		color: var(--colour-copyPrimary);
 	}
 
 	.bold {

components/src/DesignTokens/DesignTokens.svelte

@@ -1,20 +1,21 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import { shades } from './Tokens';
+	import { shades, semantics } from './Tokens';
 
 	interface DesignTokensProps {
 		children?: Snippet;
 	}
 	let { children }: DesignTokensProps = $props();
 
+	const colours = { ...shades, ...semantics };
 	const rules = [
-		...Object.keys(shades).map((key) => {
-			return Object.entries(shades[key])
+		...Object.keys(colours).map((key) => {
+			return Object.entries(colours[key])
 				.map(([shade, value]) => {
 					const [ldb, index] = shade.split(/(\d+)/);
 					return ldb === 'base'
 						? `--${key}-${ldb}: ${value}`
-						: `--${key}-${ldb}-${index}: ${value}`;
+						: `--${key}-${ldb}${index ? `-${index}` : ''}: ${value}`;
 				})
 				.join(';');
 		})
@@ -43,11 +44,24 @@
 		--br-large: 8px;
 		--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);
+		@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);
+		}
+
 		--swr-text: 'SWR-VAR-Text', sans-serif;
 		--swr-sans: 'SWR-VAR-Sans', sans-serif;
 
 		// Type scale copied 1:1 from swr.de
-
 		--fs-small-3: 0.75rem;
 		--fs-small-2: 0.875rem;
 		--fs-small-1: 1rem;

components/src/DesignTokens/Tokens.ts

@@ -156,6 +156,33 @@ const shades: ColourMap = {
 	}
 };
 
+const semantics: ColourMap = {
+	copyPrimary: {
+		light: '#0c0c0c',
+		dark: '#f8f7f5'
+	},
+	copySecondary: {
+		light: shades.gray.base,
+		dark: '#a3a3a3'
+	},
+	copySecondaryHover: {
+		light: shades.gray.dark1,
+		dark: '#b4b4b4'
+	},
+	logoFill: {
+		light: shades.gray.light3,
+		dark: shades.gray.base
+	},
+	surfaceFill: {
+		dark: '#222325',
+		light: '#f1eeeb'
+	},
+	pageFill: {
+		dark: '#0C0C0C',
+		light: '#fff'
+	}
+};
+
 const scales: ColourMap = {
 	red_blue: [...Object.values(shades.red).reverse(), ...Object.values(shades.blue)],
 	red_violet: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
@@ -187,4 +214,4 @@ const typography = {
 	}
 };
 
-export { shades, scales, typography };
+export { shades, scales, typography, semantics };

components/src/Headline/Headline.stories.svelte

@@ -12,6 +12,14 @@
 
 <Story name="Default" asChild>
 	<DesignTokens>
-		<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
+		<div class="container">
+			<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
+		</div>
 	</DesignTokens>
 </Story>
+
+<style>
+	.container {
+		color: var(--colour-copyPrimary);
+	}
+</style>

components/src/Headline/Headline.svelte

@@ -15,9 +15,9 @@
 
 <style>
 	.container {
-		font-family: var(--swr-text);
+		font-family: var(--swr-sans);
 		font-size: var(--fs-large-1);
-		font-weight: 680;
+		font-weight: 700;
 		letter-spacing: 0.005em;
 		line-height: 1.35;
 	}

components/src/Logotype/Logotype.svelte

@@ -42,6 +42,6 @@
 		height: calc(var(--fs-small-2) * 0.8);
 	}
 	path {
-		fill: var(--gray-light-1);
+		fill: var(--colour-logoFill);
 	}
 </style>

components/src/Middot/Middot.svelte

@@ -2,9 +2,9 @@
 
 <style>
 	.middot {
-		background: currentColor;
-		width: 0.65em;
-		height: 0.65em;
+		background: var(--colour-copySecondary);
+		width: 0.6em;
+		height: 0.6em;
 		display: inline-block;
 		border-radius: 1000px;
 		opacity: 0.65;

components/src/Note/Note.svelte

@@ -16,10 +16,10 @@
 <style lang="scss">
 	.container {
 		font-family: var(--swr-sans);
-		font-size: var(--fs-small-2);
+		font-size: calc(var(--fs-small-2) * 0.9);
 		line-height: 1.4;
-		letter-spacing: 0.001em;
-		color: var(--gray-base);
+		letter-spacing: 0.0015em;
+		color: var(--colour-copySecondary);
 
 		:global(*) {
 			color: inherit;
@@ -32,7 +32,7 @@
 			text-underline-offset: 0.15em;
 			&:hover,
 			&:focus-visible {
-				color: var(--gray-dark-3);
+				color: var(--colour-copySecondaryHover);
 			}
 		}
 	}

components/src/Switcher/Switcher.svelte

@@ -76,8 +76,9 @@
 		overflow: hidden;
 		padding: 0;
 		margin: 0;
-		border: 1px solid currentColor;
-		background: white;
+		border: 1px solid var(--colour-copySecondary);
+		color: var(--colour-copyPrimary);
+		background: var(--colour-surfaceFill);
 		border-radius: var(--br-small);
 
 		@media (min-width: base.$bp-s) {
@@ -118,14 +119,12 @@
 		position: relative;
 		transition: var(--fast);
 		text-underline-offset: 0.2em;
-		border-bottom: 1px solid currentColor;
 		height: 2.25em;
 		@media (min-width: base.$bp-s) {
 			justify-content: center;
 			padding: 0 1em;
 			flex-basis: 0;
 			flex-grow: 1;
-			border-right: 1px solid currentColor;
 			border-bottom: 0;
 		}
 		@media (min-width: base.$bp-s) {
@@ -136,12 +135,8 @@
 			text-decoration: underline;
 		}
 		.is-selected & {
-			background: rgb(247, 247, 247);
-			font-weight: 600;
-			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
-			@media (min-width: base.$bp-s) {
-				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
-			}
+			background: var(--colour-copySecondary);
+			font-weight: 700;
 		}
 	}
 </style>