Skip to content

Commit 57a3843

Browse files
awesomephantawesomephant
authored
feat: DesignTokens (#25)
* Migrate colour chips and scales from Figma * Block out DesignTokens component * Formatting * Block out components * Apply DesignTokens to card components * Tweak copy
1 parent f1f5c9b commit 57a3843

File tree

19 files changed

+536
-29
lines changed

19 files changed

+536
-29
lines changed

‎components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,4 +64,4 @@
6464
}
6565
},
6666
"version": "1.0.6"
67-
}
67+
}

‎components/src/Card/Card.stories.svelte‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script context="module">
22
import Card from './Card.svelte';
3+
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
34
45
export const meta = {
56
title: 'Input Components/Card',
@@ -24,8 +25,10 @@
2425
</script>
2526

2627
<Story name="Basic card">
27-
<Card>
28-
<h1>Any content</h1>
29-
<p>can be added to a basic <code>Card</code> component.</p>
30-
</Card>
28+
<DesignTokens>
29+
<Card>
30+
<h1>Any content</h1>
31+
<p>can be added to a basic <code>Card</code> component.</p>
32+
</Card>
33+
</DesignTokens>
3134
</Story>

‎components/src/Card/Card.svelte‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
@import '../styles/base.scss';
77
.card {
88
@extend %copy;
9+
color: white;
910
width: auto;
1011
max-width: $app-max-width;
11-
color: white;
12-
background: $color-violetblue;
13-
border-radius: $border-radius-container;
12+
background: var(--violet-dark-5);
13+
border-radius: var(--br-large);
1414
padding: 1.5rem;
1515
@include bp($break-tablet) {
1616
padding: 2.5rem;

‎components/src/ChartFooter/ChartFooter.stories.svelte‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script context="module">
2+
import ChartFooter from './ChartFooter.svelte';
3+
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
4+
import Middot from '../Middot/Middot.svelte';
5+
6+
export const meta = {
7+
title: 'Chart/ChartFooter',
8+
component: ChartFooter
9+
};
10+
</script>
11+
12+
<script>
13+
import { Story } from '@storybook/addon-svelte-csf';
14+
</script>
15+
16+
<Story name="One-up">
17+
<DesignTokens>
18+
<ChartFooter layout="one-up">
19+
Daten: <a href="https://www.zensus2022.de/DE/Aktuelles/Hinweis_Zensusatlas.html#_ck0gbia65"
20+
>Zensus 2022</a
21+
>
22+
(Durchschnittsmieten und Einwohnerzahlen),
23+
<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (Kartenmaterial) <Middot
24+
/> In unserer Darstellung wurde das Zensusgitter auf bewohnte Gebiete begrenzt.</ChartFooter
25+
>
26+
</DesignTokens>
27+
</Story>
28+
29+
<Story name="Two-up">
30+
<DesignTokens>
31+
<ChartFooter layout="two-up">
32+
Daten: <a href="https://www.zensus2022.de/DE/Aktuelles/Hinweis_Zensusatlas.html#_ck0gbia65"
33+
>Zensus 2022</a
34+
>
35+
(Durchschnittsmieten und Einwohnerzahlen),
36+
<a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> (Kartenmaterial) <Middot
37+
/> In unserer Darstellung wurde das Zensusgitter auf bewohnte Gebiete begrenzt.
38+
</ChartFooter>
39+
</DesignTokens>
40+
</Story>

‎components/src/ChartFooter/ChartFooter.svelte‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
<script>
2+
import Logotype from '../Logotype/Logotype.svelte';
3+
export let layout = 'one-up';
4+
</script>
5+
6+
<footer class={`container ${layout}`}>
7+
<div class="notes">
8+
<slot />
9+
</div>
10+
<Logotype />
11+
</footer>
12+
13+
<style lang="scss">
14+
@use '../styles/vars.scss';
15+
16+
.container {
17+
gap: 0.5rem;
18+
font-size: var(--fs-small-1);
19+
font-family: var(--swr-sans);
20+
line-height: 1.4;
21+
}
22+
.notes {
23+
width: 100%;
24+
}
25+
footer :global(*) {
26+
margin-bottom: 0;
27+
color: var(--gray-base);
28+
}
29+
footer :global(a),
30+
footer :global(summary) {
31+
&:hover,
32+
&:focus-visible {
33+
color: rgb(50, 50, 50);
34+
}
35+
}
36+
37+
.one-up {
38+
display: flex;
39+
flex-flow: column;
40+
align-items: flex-start;
41+
}
42+
.two-up {
43+
display: grid;
44+
grid-template-columns: 1fr;
45+
@include vars.bp(vars.$break-phone) {
46+
grid-template-columns: 2.5fr 1fr;
47+
align-items: last baseline;
48+
justify-items: flex-end;
49+
}
50+
}
51+
</style>

‎components/src/ChartFooter/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import ChartFooter from './ChartFooter.svelte';
2+
export default ChartFooter;

‎components/src/ChartHeader/ChartHeader.stories.svelte‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script context="module">
2+
import ChartHeader from './ChartHeader.svelte';
3+
4+
export const meta = {
5+
title: 'Chart/ChartHeader',
6+
component: ChartHeader
7+
};
8+
</script>
9+
10+
<script>
11+
import { Story } from '@storybook/addon-svelte-csf';
12+
</script>
13+
14+
<Story name="Basic ChartHeader">
15+
<ChartHeader
16+
title="Mehr über-60-Jährige in allen Berufen"
17+
subtitle="Veränderung des Anteils der Beschäftigen über 60 Jahren in allen Berufsgruppen seit 2013 (Bundesweit)"
18+
/>
19+
</Story>

‎components/src/ChartHeader/ChartHeader.svelte‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<script>
2+
import DesignTokens from '../DesignTokens/DesignTokens.svelte';
3+
4+
export let title = '';
5+
export let subtitle = '';
6+
</script>
7+
8+
<DesignTokens>
9+
<header class="container">
10+
<h2 class="title">{title}</h2>
11+
<p class="subtitle">{subtitle}</p>
12+
<slot />
13+
</header>
14+
</DesignTokens>
15+
16+
<style lang="scss">
17+
@use '../styles/vars.scss';
18+
19+
.container {
20+
color: var(--violet-blue);
21+
font-family: var(--swr-sans);
22+
}
23+
.title {
24+
font-size: var(--fs-large-3);
25+
line-height: 1.05;
26+
text-wrap: balance;
27+
font-weight: 700;
28+
margin-bottom: 0.2em;
29+
}
30+
.subtitle {
31+
text-wrap: balance;
32+
margin-bottom: 0.25em;
33+
font-size: var(--fs-large-1);
34+
&:last-child {
35+
margin-bottom: 0;
36+
}
37+
}
38+
</style>

‎components/src/ChartHeader/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
import ChartHeader from './ChartHeader.svelte';
2+
export default ChartHeader;

‎components/src/DesignTokens/DesignTokens.mdx‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
import { Title, Story, ColorPalette, ColorItem, Meta, Typeset } from '@storybook/blocks';
2+
import {shades, scales} from "./Tokens"
3+
4+
<Meta title='Design Tokens'/>
5+
6+
# Design Tokens
7+
8+
## Usage
9+
10+
The `<DesignTokens>` component makes colours, type sizes and other design tokens available to its children as CSS variables.
11+
12+
```jsx
13+
<script>
14+
import DesignTokens from "components"
15+
</script>
16+
17+
<DesignTokens>
18+
<p>I'm a sample paragraph</p>
19+
</DesignTokens>
20+
21+
<style>
22+
p {
23+
color: var(--violet-dark-1) // this works
24+
}
25+
</style>
26+
```
27+
28+
You can also import from `Tokens` directly to use colours in maps and charts:
29+
30+
```js
31+
import { scales } from 'Tokens'
32+
import { scaleThreshold } from 'd3-scale';
33+
const sampleScale = scaleThreshold([0, 10], scales.red_blue);
34+
```
35+
36+
## Available Tokens
37+
38+
### Typography
39+
40+
### Colours
41+
42+
<ColorPalette>
43+
{["violet", "red", "teal", "yellow", "forest", "pink", "orange", "plum", "apple", "blue", "gray"].map((el, i) => {
44+
return(
45+
<ColorItem
46+
title={`${el.split("")[0].toUpperCase()}${el.slice(1)}`}
47+
colors={shades[el]}
48+
/>
49+
)
50+
})}
51+
</ColorPalette>
52+
53+
### Linear Scales
54+
### Categorical Scales
55+
### Divergent Scales
56+
57+
<ColorPalette>
58+
{["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) => {
59+
return(
60+
<ColorItem
61+
62+
title={`${el.split("_").join("/")}`}
63+
subtitle={el}
64+
colors={scales[el]}
65+
/>
66+
)
67+
})}
68+
</ColorPalette>

0 commit comments

Comments
 (0)