DesignTokens: Add typography

components/.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: {

components/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;

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

components/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;

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

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

components/src/Caption/index.ts

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

components/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,22 +11,23 @@
 
 <div class="card">
 	{#if children}
-		{@render children()}
+		<Copy>
+			{@render children()}
+		</Copy>
 	{/if}
 </div>
 
 <style lang="scss">
 	@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;
 		}
 	}

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

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

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

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

components/src/Copy/index.ts

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