@swr-data-lab/components 1.9.0 → 1.10.0

package/.storybook/preview.ts

@@ -3,7 +3,7 @@ import type { Preview } from "@storybook/svelte";
 const preview: Preview = {
   parameters: {
     options: {
-      storySort: { order: ['About', 'Design Tokens', "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
+      storySort: { order: ['About', 'Design Tokens', "Typography", ["Headline", "Copy", "Caption"], "Display", "Chart", ["ChartHeader"], "Form", "Deprecated"] },
     },
     controls: {
       matchers: {

package/package.json

@@ -67,5 +67,5 @@
 			"svelte": "./src/index.js"
 		}
 	},
-	"version": "1.9.0"
+	"version": "1.10.0"
 }

package/src/Autocomplete/Autocomplete.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { createEventDispatcher } from 'svelte';
 	import Circle from '../assets/times-circle-solid.svg.svelte';
+	import Caption from '../Caption/Caption.svelte';
 
 	export let data = [];
 	export let query: string = '';
@@ -137,7 +138,9 @@ Data should be provided as array of objects. Each object contains the informatio
 						handleItemClick(i);
 					}}
 				>
-					{item.label}
+					<Caption>
+						{item.label}
+					</Caption>
 				</button>
 			</li>
 		{/each}
@@ -188,7 +191,6 @@ Data should be provided as array of objects. Each object contains the informatio
 			}
 
 			.item {
-				@extend %caption;
 				padding: 0.5em;
 				width: 100%;
 				background: transparent;

package/src/Button/Button.stories.svelte

@@ -0,0 +1,21 @@
+<script context="module" lang="ts">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import Button from './Button.svelte';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Form/Button',
+		component: Button
+	});
+</script>
+
+<Story name="Basic">
+	<DesignTokens>
+		<Button label="This is a button label"></Button>
+	</DesignTokens>
+</Story>
+<Story name="Disabled">
+	<DesignTokens>
+		<Button disabled label="This button is disabled"></Button>
+	</DesignTokens>
+</Story>

package/src/Button/Button.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+	import Copy from '../Copy/Copy.svelte';
+
 	interface ButtonProps {
-		as: 'button' | 'a';
 		label: string;
+		as?: 'button' | 'a';
 		href?: string;
 		disabled?: boolean;
 		onclick?: (e: MouseEvent) => any | void;
@@ -11,31 +13,32 @@
 </script>
 
 {#if as === 'a'}
-	<a class="button" class:disabled {href}>{label}</a>
+	<a class="button" class:disabled {href}>
+		<Copy weight="bold">
+			{label}
+		</Copy>
+	</a>
 {:else}
-	<button class="button" {onclick} {disabled}>{label}</button>
+	<button class="button" {onclick} {disabled}>
+		<Copy weight="bold">
+			{label}
+		</Copy>
+	</button>
 {/if}
 
 <style lang="scss">
-	@use '../styles/base.scss';
 	.button {
-		@extend %copy-bold;
 		background: var(--violet-dark-3);
 		display: inline-flex;
 		align-items: center;
 		justify-self: flex-start;
-		padding: 0.25em 1.25em;
-		padding-bottom: 0.35em;
+		padding: 0.45em 1.25em;
 		color: white;
 		border: 1px solid rgba(white, 0.1);
 		box-shadow: 0px 0px 10px rgba(black, 0.05);
 		border-radius: var(--br-small);
 		text-shadow: 0px 0px 5px rgba(black, 0.05);
-		font-size: 1.2rem;
 		text-decoration: none;
-		@media (min-width: base.$break-tablet) {
-			font-size: 1.4rem;
-		}
 		&:hover,
 		&:focus-visible {
 			text-decoration: underline;

package/src/Caption/Caption.stories.svelte

@@ -0,0 +1,24 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Caption from './Caption.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Caption',
+		component: Caption
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Caption>Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)</Caption>
+	</DesignTokens>
+</Story>
+<Story name="Bold">
+	<DesignTokens>
+		<Caption weight="bold">
+			Björn Schittenhelm, Apotheker aus Holzgerlingen (Kreis Böblingen)
+		</Caption>
+	</DesignTokens>
+</Story>

package/src/Caption/Caption.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface CaptionProps {
+		weight?: 'regular' | 'bold';
+		children?: Snippet;
+	}
+	let { weight = 'regular', children }: CaptionProps = $props();
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-2);
+		line-height: 1;
+		letter-spacing: 0.0045em;
+	}
+
+	.bold {
+		font-weight: 585;
+		letter-spacing: 0;
+	}
+</style>

package/src/Caption/index.ts

@@ -0,0 +1,2 @@
+import Caption from './Caption.svelte';
+export default Caption;

package/src/Card/Card.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import Copy from '../Copy/Copy.svelte';
 
 	interface CardProps {
 		children?: Snippet;
@@ -10,7 +11,9 @@
 
 <div class="card">
 	{#if children}
-		{@render children()}
+		<Copy>
+			{@render children()}
+		</Copy>
 	{/if}
 </div>
 
@@ -18,14 +21,13 @@
 	@use '../styles/base.scss';
 
 	.card {
-		@extend %copy;
 		color: white;
 		width: auto;
 		max-width: var(--app-max-width);
 		background: var(--violet-dark-5);
 		border-radius: var(--br-large);
 		padding: 1.5rem;
-		@media (min-width: base.$break-tablet) {
+		@media (min-width: base.$bp-m) {
 			padding: 2.5rem;
 		}
 	}

package/src/ChartFooter/ChartFooter.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import Logotype from '../Logotype/Logotype.svelte';
+	import Note from '../Note/Note.svelte';
 
 	interface ChartFooterProps {
 		layout: 'one-up' | 'two-up';
@@ -12,9 +13,9 @@
 
 <footer class={`container ${layout}`}>
 	{#if children}
-		<div class="notes">
+		<Note>
 			{@render children()}
-		</div>
+		</Note>
 	{/if}
 	<Logotype />
 </footer>
@@ -24,9 +25,9 @@
 
 	.container {
 		gap: 0.5rem;
-		font-size: var(--fs-small-1);
-		font-family: var(--swr-sans);
-		line-height: 1.4;
+		:global(div) {
+			width: 100%;
+		}
 	}
 	.one-up {
 		display: flex;
@@ -36,24 +37,10 @@
 	.two-up {
 		display: grid;
 		grid-template-columns: 1fr;
-		@media (min-width: base.$break-phone) {
+		@media (min-width: base.$bp-s) {
 			grid-template-columns: 2.5fr 1fr;
 			align-items: last baseline;
 			justify-items: flex-end;
 		}
 	}
-	.notes {
-		width: 100%;
-	}
-	footer :global(*) {
-		margin-bottom: 0;
-		color: var(--gray-base);
-	}
-	footer :global(a),
-	footer :global(summary) {
-		&:hover,
-		&:focus-visible {
-			color: var(--gray-dark-3);
-		}
-	}
 </style>

package/src/ChartHeader/ChartHeader.mdx

@@ -1,4 +1,4 @@
-import { Story,  Meta, Primary, Controls, Stories } from '@storybook/blocks';
+import { Story, Meta, Primary, Controls, Stories } from '@storybook/blocks';
  
 import * as ChartHeaderStories from './ChartHeader.stories.svelte';
 
@@ -8,6 +8,7 @@ import * as ChartHeaderStories from './ChartHeader.stories.svelte';
 
 Standard chart header.
 
+- The slugified `title` is set as the header element's `id` attribute (useful for linking to interactives from in-article table of contents)
 - Any nested HTML will render under the description (useful for i.e colour keys and interactives controls).
 
 <Controls  />

package/src/ChartHeader/ChartHeader.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
-	import slugify from "../utils/slugify.ts" 
-	
+	import Headline from '../Headline/Headline.svelte';
+	import Copy from '../Copy/Copy.svelte';
+	import slugify from '../utils/slugify';
+
 	interface ChartHeaderProps {
 		title: string;
 		subtitle?: string;
@@ -11,9 +13,9 @@
 </script>
 
 <header class="container" id={slugify(title)}>
-	<h2 class="title">{title}</h2>
+	<Headline>{title}</Headline>
 	{#if subtitle}
-		<p class="subtitle">{subtitle}</p>
+		<Copy><p class="subtitle">{subtitle}</p></Copy>
 	{/if}
 	{#if children}
 		<div class="content">
@@ -27,19 +29,10 @@
 		color: var(--violet-blue);
 		font-family: var(--swr-sans);
 	}
-	.title {
-		font-size: var(--fs-large-3);
-		line-height: 1.05;
-		text-wrap: balance;
-		font-weight: 700;
-		margin-bottom: 0.2em;
-	}
 	.subtitle {
 		text-wrap: balance;
-		margin-bottom: 0.25em;
-		font-size: var(--fs-large-1);
-		&:last-child {
-			margin-bottom: 0;
-		}
+	}
+	.content {
+		margin-top: 0.25em;
 	}
 </style>

package/src/Copy/Copy.stories.svelte

@@ -0,0 +1,32 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Copy from './Copy.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Copy',
+		component: Copy
+	});
+</script>
+
+<Story name="Default">
+	<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>
+	</DesignTokens>
+</Story>
+<Story name="Bold">
+	<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>
+	</DesignTokens>
+</Story>

package/src/Copy/Copy.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface CopyProps {
+		weight?: 'regular' | 'bold';
+		children?: Snippet;
+	}
+	let { weight = 'regular', children }: CopyProps = $props();
+</script>
+
+<div class={['container', weight]}>
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		font-family: var(--swr-sans);
+		font-size: var(--fs-base);
+		letter-spacing: 0.005em;
+		line-height: 1.475;
+	}
+
+	.bold {
+		font-weight: 585;
+		letter-spacing: 0;
+	}
+</style>

package/src/Copy/index.ts

@@ -0,0 +1,2 @@
+import Copy from './Copy.svelte';
+export default Copy;

package/src/DesignTokens/DesignTokens.mdx

@@ -1,10 +1,29 @@
-import { Title, Story, ColorPalette, ColorItem, Meta, Typeset } from '@storybook/blocks';
-import { shades, scales } from "./Tokens"
+import { Title, Story, ColorPalette, ColorItem, Meta, Typeset, Canvas } from '@storybook/blocks';
+import { shades, scales, typography } from "./Tokens"
+
+import * as HeadlineStories from "../Headline/Headline.stories.svelte"
+import * as CopyStories from "../Copy/Copy.stories.svelte"
+import * as CaptionStories from "../Caption/Caption.stories.svelte"
+import * as NoteStories from "../Note/Note.stories.svelte"
 
 <Meta title='Design Tokens'/>
 
 # Design Tokens
 
+## Table of Contents
+ 
+- [Usage](#usage)
+  - [Web](#web)
+  - [Figma](#figma) 
+- [Typography](#typography)
+  - [Sizes](#sizes)
+  - [Styles](#styles)
+- [Colours](#colours)
+	- [Shades](#shades)
+	- [Linear scales](#linear-scales)
+	- [Categorical Scales](#categorical-scales)
+	- [Divergent Scales](#divergent-scales)
+
 ## Usage
 
 ### Web
@@ -39,12 +58,32 @@ const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
 
 The tokens on this page are available as a [Figma library](https://www.figma.com/design/Wrd7uUV3GxpNXXkM5ozuHk/Datalab-Design-Tokens?node-id=0-1&t=iOqDxhuMdvEyY8VK-1). This is enabled by default for any file in the [SWR Data Lab team](https://www.figma.com/files/1125823985461580916/team/1415988138343592768). 
 
-## Available Tokens
 
-### Typography
+## Typography
+
+Type sizes and paragraph styles are designed to match the typography on [swr.de](https://www.swr.de/). **Styles** come with built-in settings for `line-height`, `letter-spacing`, etc. and should be preferred over using **sizes** directly.
+
+### Styles
+#### H2
+<Canvas of={HeadlineStories.Default}/>
+
+#### Copy
+<Canvas of={CopyStories.Default}/>
+
+#### Caption
+<Canvas of={CaptionStories.Default}/>
 
-### Colours
+#### Note
+<Canvas of={NoteStories.Default}/>
 
+### Sizes
+<Typeset fontWeight={600} fontFamily='SWR-VAR-Text' sampleText='Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten' fontSizes={Object.entries(typography.wide.sizes).map(([key, size]) => {
+	return size
+}).reverse()}/>
+
+
+## Colours
+### Shades
 <ColorPalette>
 {["violet", "plum", "pink", "red", "orange", "yellow", "apple" , "forest","teal",    "blue", "gray"].map((el, i) => {
 	return(
@@ -61,14 +100,11 @@ The tokens on this page are available as a [Figma library](https://www.figma.com
 ### 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, i) => {
-	return(
-		<ColorItem
-		
-		title={`${el.split("_").map(c => {return c[0].toUpperCase() + c.slice(1)}).join("-")}`}
-		subtitle={el}
-		colors={scales[el]}
-	/>
-			) 
+{["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>

package/src/DesignTokens/DesignTokens.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
 	import { shades } from './Tokens';
 
 	const rules = [
@@ -11,25 +11,7 @@
 						: `--${key}-${ldb}-${index}: ${value}`;
 				})
 				.join(';');
-		}),
-		,
-		'display: contents',
-		'--fast: 150ms',
-		'--slow: 300ms',
-		'--app-max-width: 40rem',
-		'--br-large: 8px',
-		'--br-small: 4px',
-		'--input-height: 2.5rem',
-		'--swr-sans: "SWR-VAR-Sans", sans-serif',
-		'--swr-text: "SWR-VAR-Text", sans-serif',
-		'--ratio: 1.15',
-		'--fs-small-3: calc(var(--fs-small-2) / var(--ratio))',
-		'--fs-small-2: calc(var(--fs-small-1) / var(--ratio))',
-		'--fs-small-1: calc(var(--fs-base) / var(--ratio))',
-		'--fs-base: clamp(1rem, calc(1.5vw + 0.25rem), 1.125rem)',
-		'--fs-large-1: calc(var(--fs-base) * var(--ratio))',
-		'--fs-large-2: calc(var(--fs-large-1) * var(--ratio))',
-		'--fs-large-3: calc(var(--fs-large-2) * var(--ratio))'
+		})
 	];
 </script>
 
@@ -37,9 +19,45 @@
 	<slot />
 </div>
 
-<style>
+<style lang="scss">
+	@use '../styles/base.scss';
+
 	:global(*) {
 		margin: 0;
 		padding: 0;
 	}
+
+	.container {
+		display: contents;
+		--fast: 150ms;
+		--slow: 300ms;
+		--app-max-width: 40rem;
+		--br-large: 8px;
+		--br-small: 4px;
+		--input-height: 2.5rem;
+		--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;
+		--fs-base: 1.125rem;
+		--fs-large-1: 1.25rem;
+		--fs-large-2: 1.5rem;
+		--fs-large-3: 1.75rem;
+		--fs-large-4: 2.25rem;
+
+		@media (min-width: base.$bp-m) {
+			--fs-small-3: 0.75rem;
+			--fs-small-2: 0.875rem;
+			--fs-small-1: 1rem;
+			--fs-base: 1.25rem;
+			--fs-large-1: 1.5rem;
+			--fs-large-2: 2rem;
+			--fs-large-3: 2.5rem;
+			--fs-large-4: 3.5rem;
+		}
+	}
 </style>

package/src/DesignTokens/{Tokens.js → Tokens.ts}

@@ -1,4 +1,14 @@
-const shades = {
+interface ColourMap {
+	[index: string]: ColourPalette | ColourList;
+}
+interface ColourPalette {
+	[index: string]: string
+}
+interface ColourList {
+	[index: number]: string
+}
+
+const shades: ColourMap = {
 	violet: {
 		light5: '#f3eefa',
 		light4: '#e5dbf5',
@@ -138,31 +148,36 @@ const shades = {
 	}
 };
 
-const scales = {
-	violets: [
-		shades.violet.dark3,
-		shades.violet.dark2,
-		shades.violet.dark1,
-		shades.violet.base,
-		shades.violet.light1,
-		shades.violet.light2,
-		shades.violet.light3
-	],
-	red_blue: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.blue)],
-	red_violet: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)],
-	violet_teal: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.teal)],
-	orange_teal: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.teal)],
-	red_forest: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.forest)],
-	red_apple: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.apple)],
-	red_teal: [...Object.entries(shades.red).reverse(), ...Object.entries(shades.violet)],
-	violet_orange: [...Object.entries(shades.violet).reverse(), ...Object.entries(shades.orange)],
-	orange_blue: [...Object.entries(shades.orange).reverse(), ...Object.entries(shades.blue)],
-	teal_pink: [...Object.entries(shades.teal).reverse(), ...Object.entries(shades.pink)],
-	blue_pink: [...Object.entries(shades.blue).reverse(), ...Object.entries(shades.pink)],
-	apple_plum: [...Object.entries(shades.apple).reverse(), ...Object.entries(shades.plum)],
-	forest_plum: [...Object.entries(shades.forest).reverse(), ...Object.entries(shades.plum)]
+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)],
+	violet_teal: [...Object.values(shades.violet).reverse(), ...Object.values(shades.teal)],
+	orange_teal: [...Object.values(shades.orange).reverse(), ...Object.values(shades.teal)],
+	red_forest: [...Object.values(shades.red).reverse(), ...Object.values(shades.forest)],
+	red_apple: [...Object.values(shades.red).reverse(), ...Object.values(shades.apple)],
+	red_teal: [...Object.values(shades.red).reverse(), ...Object.values(shades.violet)],
+	violet_orange: [...Object.values(shades.violet).reverse(), ...Object.values(shades.orange)],
+	orange_blue: [...Object.values(shades.orange).reverse(), ...Object.values(shades.blue)],
+	teal_pink: [...Object.values(shades.teal).reverse(), ...Object.values(shades.pink)],
+	blue_pink: [...Object.values(shades.blue).reverse(), ...Object.values(shades.pink)],
+	apple_plum: [...Object.values(shades.apple).reverse(), ...Object.values(shades.plum)],
+	forest_plum: [...Object.values(shades.forest).reverse(), ...Object.values(shades.plum)]
 };
 
-const typography = {};
 
-export { shades, scales };
+const typography = {
+	wide: {
+		sizes: {
+			"fs-small-3": "0.75rem",
+			"fs-small-2": "0.875rem",
+			"fs-small-1": "1rem",
+			"fs-base": "1.25rem",
+			"fs-large-1": "1.5rem",
+			"fs-large-2": "2rem",
+			"fs-large-3": "2.5rem",
+			"fs-large-4": "3.5rem"
+		}
+	}
+};
+
+export { shades, scales, typography };

package/src/Headline/Headline.stories.svelte

@@ -0,0 +1,17 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+
+	import Headline from './Headline.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Headline',
+		component: Headline
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Headline>Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe</Headline>
+	</DesignTokens>
+</Story>

package/src/Headline/Headline.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface HeadlineProps {
+		children?: Snippet;
+	}
+	let { children }: HeadlineProps = $props();
+</script>
+
+<h2 class="container">
+	{#if children}
+		{@render children()}
+	{/if}
+</h2>
+
+<style>
+	.container {
+		font-family: var(--swr-text);
+		font-size: var(--fs-large-1);
+		font-weight: 550;
+		letter-spacing: 0.005em;
+	}
+</style>

package/src/Headline/index.ts

@@ -0,0 +1,2 @@
+import Headline from './Headline.svelte';
+export default Headline;

package/src/HighlightCard/HighlightCard.svelte

@@ -47,8 +47,7 @@
 	}
 
 	.middle {
-		font-family: var(--swr-sans);
-		font-size: 54px;
+		font-size: var(--fs-large-4);
 		font-weight: 700;
 		padding-bottom: 0.2em;
 	}

package/src/Note/Note.stories.svelte

@@ -0,0 +1,23 @@
+<script context="module">
+	import { defineMeta } from '@storybook/addon-svelte-csf';
+	import DesignTokens from '../DesignTokens/DesignTokens.svelte';
+	import Middot from '../Middot/Middot.svelte';
+
+	import Note from './Note.svelte';
+
+	const { Story } = defineMeta({
+		title: 'Typography/Note',
+		component: Note
+	});
+</script>
+
+<Story name="Default">
+	<DesignTokens>
+		<Note>
+			Daten: <a href="#1">Zensus 2022</a>
+			(Durchschnittsmieten und Einwohnerzahlen),
+			<a href="#1">OpenStreetMap</a> (Kartenmaterial) <Middot /> In unserer Darstellung wurde das Zensusgitter
+			auf bewohnte Gebiete begrenzt.
+		</Note>
+	</DesignTokens>
+</Story>

package/src/Note/Note.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface NoteProps {
+		children?: Snippet;
+	}
+	let { children }: NoteProps = $props();
+</script>
+
+<div class="container">
+	{#if children}
+		{@render children()}
+	{/if}
+</div>
+
+<style lang="scss">
+	.container {
+		font-family: var(--swr-sans);
+		font-size: var(--fs-small-2);
+		line-height: 1.4;
+		letter-spacing: 0.001em;
+		color: var(--gray-base);
+
+		:global(*) {
+			color: inherit;
+		}
+		:global(p) {
+			margin-bottom: 0.5em;
+		}
+		:global(a),
+		:global(summary) {
+			&:hover,
+			&:focus-visible {
+				color: var(--gray-dark-3);
+			}
+		}
+	}
+</style>

package/src/Note/index.ts

@@ -0,0 +1,2 @@
+import Note from './Note.svelte';
+export default Note;

package/src/Switcher/Switcher.svelte

@@ -66,7 +66,7 @@
 		border: 1px solid currentColor;
 		border-radius: var(--br-small);
 
-		@media (min-width: base.$break-phone) {
+		@media (min-width: base.$bp-s) {
 			flex-flow: row;
 		}
 
@@ -106,7 +106,7 @@
 		text-underline-offset: 0.2em;
 		border-bottom: 1px solid currentColor;
 		height: 2.25em;
-		@media (min-width: base.$break-phone) {
+		@media (min-width: base.$bp-s) {
 			justify-content: center;
 			padding: 0 1em;
 			flex-basis: 0;
@@ -114,7 +114,7 @@
 			border-right: 1px solid currentColor;
 			border-bottom: 0;
 		}
-		@media (min-width: base.$break-tablet) {
+		@media (min-width: base.$bp-s) {
 			height: 2.5em;
 		}
 		&:hover,
@@ -123,9 +123,9 @@
 		}
 		.is-selected & {
 			background: rgb(247, 247, 247);
-			font-weight: 700;
+			font-weight: 600;
 			box-shadow: inset 5px 0px 0 0 var(--violet-dark-5);
-			@media (min-width: base.$break-phone) {
+			@media (min-width: base.$bp-s) {
 				box-shadow: inset 0 -3px 0 0 var(--violet-dark-5);
 			}
 		}

package/src/index.js

@@ -1,5 +1,4 @@
 export { default as Card } from './Card/Card.svelte';
-export { default as Container } from './Container/Container.svelte';
 export { default as Autocomplete } from './Autocomplete/Autocomplete.svelte';
 export { default as Switcher } from './Switcher/Switcher.svelte';
 export { default as Input } from './Input/Input.svelte';

package/src/styles/base.scss

@@ -1,43 +1,26 @@
-$break-phone: 510px;
-$break-tablet: 992px;
-$break-desktop-small: 1200px;
-$break-desktop-large: 1400px;
-$break-desktop-xl: 1400px;
+// Copied 1:1 from swr.de
+$bp-xxs: 320px;
+$bp-xs: 375px;
+$bp-s: 425px;
+$bp-m: 768px;
+$bp-l: 1024px;
+$bp-xl: 1440px;
 
 // TODO drop everything below
-
-%caption {
+%form-label {
 	font-family: var(--swr-sans);
 	font-size: 0.9rem;
 	line-height: 1;
 	letter-spacing: 0.0045em;
-}
-
-%caption-bold {
-	@extend %caption;
-	font-weight: 600;
-}
-
-%form-label {
-	@extend %caption;
 	display: block;
 	margin-bottom: 0.5em;
 }
 
-%copy {
+%form-input {
 	font-family: var(--swr-sans);
 	font-size: 1.1rem;
 	line-height: 1.45;
 	letter-spacing: 0.0045em;
-}
-
-%copy-bold {
-	@extend %copy;
-	font-weight: 600;
-}
-
-%form-input {
-	@extend %copy;
 	height: 2.5em;
 	width: 100%;
 	border: 1px solid currentColor;