Match type scale to swr.de NEU

components/src/DesignTokens/DesignTokens.mdx

@@ -1,28 +1,36 @@
-import { Title, Story, ColorPalette, ColorItem, Meta, Typeset, Canvas } from '@storybook/addon-docs/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'/>
+import {
+	Title,
+	Story,
+	ColorPalette,
+	ColorItem,
+	Meta,
+	Typeset,
+	Canvas
+} from '@storybook/addon-docs/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) 
+  - [Figma](#figma)
 - [Typography](#typography)
   - [Sizes](#sizes)
   - [Styles](#styles)
 - [Colours](#colours)
-	- [Shades](#shades)
-	- [Linear scales](#linear-scales)
-	- [Categorical Scales](#categorical-scales)
-	- [Divergent Scales](#divergent-scales)
+  - [Shades](#shades)
+  - [Linear scales](#linear-scales)
+  - [Categorical Scales](#categorical-scales)
+  - [Divergent Scales](#divergent-scales)
 
 ## Usage
 
@@ -32,78 +40,125 @@ The `<DesignTokens>` component makes colours, type sizes and other design tokens
 
 ```html
 <script>
-  import DesignTokens from "@swr-data-lab/components"
+	import DesignTokens from '@swr-data-lab/components';
 </script>
 
 <DesignTokens>
-  <p>I'm a sample paragraph</p>
+	<p>I'm a sample paragraph</p>
 </DesignTokens>
 
 <style>
-  p {
-    color: var(--violet-dark-1) // this works
-  }
+	p {
+		color: var(--violet-dark-1); // this works
+
+	}
 </style>
 ```
 
 You can also import `tokens` directly to use them in Javascript:
 
 ```jsx
-import tokens from "@swr-data-lab/components"
+import tokens from '@swr-data-lab/components';
 import { scaleThreshold } from 'd3-scale';
 const sampleScale = scaleThreshold([0, 10], tokens.scales.red_blue);
 ```
 
 ### Figma
 
-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). 
-
+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).
 
 ## 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}/>
+
+<Canvas of={HeadlineStories.Default} />
 
 #### Copy
-<Canvas of={CopyStories.Default}/>
+
+<Canvas of={CopyStories.Default} />
 
 #### Caption
-<Canvas of={CaptionStories.Default}/>
+
+<Canvas of={CaptionStories.Default} />
 
 #### Note
-<Canvas of={NoteStories.Default}/>
+
+<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()}/>
 
+<Typeset
+	fontWeight={700}
+	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(
-		<ColorItem
-		title={`${el.split("")[0].toUpperCase()}${el.slice(1)}`}
-		colors={shades[el]}
-	/>) 
-})}
+	{[
+		'violet',
+		'plum',
+		'pink',
+		'red',
+		'orange',
+		'yellow',
+		'apple',
+		'forest',
+		'teal',
+		'blue',
+		'gray'
+	].map((el, i) => {
+		return (
+			<ColorItem title={`${el.split('')[0].toUpperCase()}${el.slice(1)}`} colors={shades[el]} />
+		);
+	})}
 </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>
+	{[
+		'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>

components/src/DesignTokens/DesignTokens.svelte

@@ -54,17 +54,17 @@
 		--fs-base: 1.125rem;
 		--fs-large-1: 1.25rem;
 		--fs-large-2: 1.5rem;
-		--fs-large-3: 1.75rem;
+		--fs-large-3: 2rem;
 		--fs-large-4: 2.25rem;
 
-		@media (min-width: base.$bp-m) {
+		@media (min-width: 1024px) {
 			--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-3: 3rem;
 			--fs-large-4: 3.5rem;
 		}
 	}

components/src/DesignTokens/Tokens.ts

@@ -181,7 +181,7 @@ const typography = {
 			'fs-base': '1.25rem',
 			'fs-large-1': '1.5rem',
 			'fs-large-2': '2rem',
-			'fs-large-3': '2.5rem',
+			'fs-large-3': '3rem',
 			'fs-large-4': '3.5rem'
 		}
 	}