diff --git a/components/.storybook/preview.ts b/components/.storybook/preview.ts index ee59718..4beebcc 100644 --- a/components/.storybook/preview.ts +++ b/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: { diff --git a/components/src/Autocomplete/Autocomplete.svelte b/components/src/Autocomplete/Autocomplete.svelte index ce301d6..5e91e5d 100644 --- a/components/src/Autocomplete/Autocomplete.svelte +++ b/components/src/Autocomplete/Autocomplete.svelte @@ -1,6 +1,7 @@ + + + + + + + + + + + diff --git a/components/src/Button/Button.svelte b/components/src/Button/Button.svelte index a23e5fc..c28adcc 100644 --- a/components/src/Button/Button.svelte +++ b/components/src/Button/Button.svelte @@ -1,7 +1,9 @@ {#if as === 'a'} - {label} + + + {label} + + {:else} - + {/if} diff --git a/components/src/Caption/index.ts b/components/src/Caption/index.ts new file mode 100644 index 0000000..9fafd15 --- /dev/null +++ b/components/src/Caption/index.ts @@ -0,0 +1,2 @@ +import Caption from './Caption.svelte'; +export default Caption; diff --git a/components/src/Card/Card.svelte b/components/src/Card/Card.svelte index 0ee5c53..e878f21 100644 --- a/components/src/Card/Card.svelte +++ b/components/src/Card/Card.svelte @@ -1,5 +1,6 @@
-

{title}

+ {title} {#if subtitle} -

{subtitle}

+

{subtitle}

 {/if} {#if children}
@@ -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; } diff --git a/components/src/Copy/Copy.stories.svelte b/components/src/Copy/Copy.stories.svelte new file mode 100644 index 0000000..fc46e45 --- /dev/null +++ b/components/src/Copy/Copy.stories.svelte @@ -0,0 +1,32 @@ + + + + + + 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." + + + + + + + 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." + + + diff --git a/components/src/Copy/Copy.svelte b/components/src/Copy/Copy.svelte new file mode 100644 index 0000000..db5cab0 --- /dev/null +++ b/components/src/Copy/Copy.svelte @@ -0,0 +1,29 @@ + + +
+ {#if children} + {@render children()} + {/if} +
+ + diff --git a/components/src/Copy/index.ts b/components/src/Copy/index.ts new file mode 100644 index 0000000..affce32 --- /dev/null +++ b/components/src/Copy/index.ts @@ -0,0 +1,2 @@ +import Copy from './Copy.svelte'; +export default Copy; diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx index 7d795c9..5a7112f 100644 --- a/components/src/DesignTokens/DesignTokens.mdx +++ b/components/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" # 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 + + +#### Copy + + +#### Caption + -### Colours +#### Note + +### Sizes + { + return size +}).reverse()}/> + + +## Colours +### Shades {["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 -{["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( - {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( {return c[0].toUpperCase() + c.slice(1)}).join("/")}`} + subtitle={el} + colors={scales[el]} + />) })} \ No newline at end of file diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte index 6fc9847..bc120ca 100644 --- a/components/src/DesignTokens/DesignTokens.svelte +++ b/components/src/DesignTokens/DesignTokens.svelte @@ -1,4 +1,4 @@ - @@ -37,9 +19,45 @@
- diff --git a/components/src/DesignTokens/Tokens.js b/components/src/DesignTokens/Tokens.ts similarity index 59% rename from components/src/DesignTokens/Tokens.js rename to components/src/DesignTokens/Tokens.ts index 592efd4..7ce74e0 100644 --- a/components/src/DesignTokens/Tokens.js +++ b/components/src/DesignTokens/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 }; diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte new file mode 100644 index 0000000..fcb267d --- /dev/null +++ b/components/src/Headline/Headline.stories.svelte @@ -0,0 +1,17 @@ + + + + + Baden-Württemberg heizt überdurchschnittlich viel mit Wärmepumpe + + diff --git a/components/src/Headline/Headline.svelte b/components/src/Headline/Headline.svelte new file mode 100644 index 0000000..c145960 --- /dev/null +++ b/components/src/Headline/Headline.svelte @@ -0,0 +1,23 @@ + + +

+ {#if children} + {@render children()} + {/if} +

+ + diff --git a/components/src/Headline/index.ts b/components/src/Headline/index.ts new file mode 100644 index 0000000..a5d92a6 --- /dev/null +++ b/components/src/Headline/index.ts @@ -0,0 +1,2 @@ +import Headline from './Headline.svelte'; +export default Headline; diff --git a/components/src/HighlightCard/HighlightCard.svelte b/components/src/HighlightCard/HighlightCard.svelte index 80a98a7..ba73ebe 100644 --- a/components/src/HighlightCard/HighlightCard.svelte +++ b/components/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; } diff --git a/components/src/Note/Note.stories.svelte b/components/src/Note/Note.stories.svelte new file mode 100644 index 0000000..9e58413 --- /dev/null +++ b/components/src/Note/Note.stories.svelte @@ -0,0 +1,23 @@ + + + + + + Daten: Zensus 2022 + (Durchschnittsmieten und Einwohnerzahlen), + OpenStreetMap (Kartenmaterial) In unserer Darstellung wurde das Zensusgitter + auf bewohnte Gebiete begrenzt. + + + diff --git a/components/src/Note/Note.svelte b/components/src/Note/Note.svelte new file mode 100644 index 0000000..0e6bf2f --- /dev/null +++ b/components/src/Note/Note.svelte @@ -0,0 +1,38 @@ + + +
+ {#if children} + {@render children()} + {/if} +
+ + diff --git a/components/src/Note/index.ts b/components/src/Note/index.ts new file mode 100644 index 0000000..9e44112 --- /dev/null +++ b/components/src/Note/index.ts @@ -0,0 +1,2 @@ +import Note from './Note.svelte'; +export default Note; diff --git a/components/src/Switcher/Switcher.svelte b/components/src/Switcher/Switcher.svelte index e015026..7a99c73 100644 --- a/components/src/Switcher/Switcher.svelte +++ b/components/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); } } diff --git a/components/src/styles/base.scss b/components/src/styles/base.scss index 65443bd..a9a0518 100644 --- a/components/src/styles/base.scss +++ b/components/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;