Skip to content

feat(DesignTokens): Improve naming #166

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
sjockers merged 2 commits into from
Sep 16, 2025
Merged

feat(DesignTokens): Improve naming #166

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cecab53
Iterate wording, clean up docs
awesomephant Sep 16, 2025
fb9b68f
Fix story
awesomephant Sep 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion components/src/Caption/Caption.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,6 @@

<style>
.container {
color: var(--colour-copyPrimary);
color: var(--color-textPrimary);
}
</style>
2 changes: 1 addition & 1 deletion components/src/ChartHeader/ChartHeader.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@

<style>
.container {
color: var(--colour-copyPrimary);
color: var(--color-textPrimary);
font-family: var(--swr-sans);
display: flex;
flex-flow: column;
Expand Down
36 changes: 24 additions & 12 deletions components/src/Copy/Copy.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,21 +12,33 @@

<Story name="Default" asChild>
<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>
<div class="container">
<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>
</div>
</DesignTokens>
</Story>
<Story name="Bold" asChild>
<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>
<div class="container">
<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>
</div>
</DesignTokens>
</Story>

<style>
.container {
color: var(--color-textPrimary);
}
</style>
66 changes: 25 additions & 41 deletions components/src/DesignTokens/DesignTokens.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
Typeset,
Canvas
} from '@storybook/addon-docs/blocks';
import { shades, scales, typography } from './Tokens';
import { shades, scales, typography, semantics } from './Tokens';

import * as HeadlineStories from '../Headline/Headline.stories.svelte';
import * as CopyStories from '../Copy/Copy.stories.svelte';
Expand Down Expand Up @@ -49,8 +49,7 @@ The `<DesignTokens>` component makes colours, type sizes and other design tokens

<style>
p {
color: var(--violet-dark-1); // this works

color: var(--violet-dark-1); // this works
}
</style>
```
Expand Down Expand Up @@ -96,14 +95,36 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
fontFamily="SWR-VAR-Text"
sampleText="Pollenflug in BW: Was Heuschnupfengeplagte jetzt wissen sollten"
fontSizes={Object.entries(typography.wide.sizes)
.map(([key, size]) => {
.map(([_, size]) => {
return size;
})
.reverse()}
/>

## Colours

### Semantics

Light / Dark

<ColorPalette>
{[
'textPrimary',
'textSecondary',
'textSecondaryHover',
'logoFill',
'surfaceFill',
'pageFill'
].map((el, i) => {
return (
<ColorItem
title={`${el.split('')[0].toUpperCase()}${el.slice(1)}`}
colors={[semantics[el]['light'], semantics[el]['dark']]}
/>
);
})}
</ColorPalette>

### Shades

<ColorPalette>
Expand All @@ -125,40 +146,3 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
);
})}
</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>
20 changes: 10 additions & 10 deletions components/src/DesignTokens/DesignTokens.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,17 +45,17 @@
--br-small: 4px;
--input-height: 2.5rem;

--colour-copyPrimary: var(--copyPrimary-light);
--colour-copySecondary: var(--copySecondary-light);
--colour-copySecondaryHover: var(--copySecondaryHover-light);
--colour-logoFill: var(--logoFill-light);
--colour-surfaceFill: var(--surfaceFill-light);
--color-textPrimary: var(--textPrimary-light);
--color-textSecondary: var(--textSecondary-light);
--color-textSecondaryHover: var(--textSecondaryHover-light);
--color-logoFill: var(--logoFill-light);
--color-surfaceFill: var(--surfaceFill-light);
@media (prefers-color-scheme: dark) {
--colour-logoFill: var(--logoFill-dark);
--colour-surfaceFill: var(--surfaceFill-dark);
--colour-copyPrimary: var(--copyPrimary-dark);
--colour-copySecondary: var(--copySecondary-dark);
--colour-copySecondaryHover: var(--copySecondaryHover-dark);
--color-logoFill: var(--logoFill-dark);
--color-surfaceFill: var(--surfaceFill-dark);
--color-textPrimary: var(--textPrimary-dark);
--color-textSecondary: var(--textSecondary-dark);
--color-textSecondaryHover: var(--textSecondaryHover-dark);
}

--swr-text: 'SWR-VAR-Text', sans-serif;
Expand Down
6 changes: 3 additions & 3 deletions components/src/DesignTokens/Tokens.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,15 +157,15 @@ const shades: ColourMap = {
};

const semantics: ColourMap = {
copyPrimary: {
textPrimary: {
light: '#0c0c0c',
dark: '#f8f7f5'
},
copySecondary: {
textSecondary: {
light: shades.gray.base,
dark: '#a3a3a3'
},
copySecondaryHover: {
textSecondaryHover: {
light: shades.gray.dark1,
dark: '#b4b4b4'
},
Expand Down
2 changes: 1 addition & 1 deletion components/src/Headline/Headline.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,6 @@

<style>
.container {
color: var(--colour-copyPrimary);
color: var(--color-textPrimary);
}
</style>
2 changes: 1 addition & 1 deletion components/src/Logotype/Logotype.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,6 @@
height: calc(var(--fs-small-2) * 0.8);
}
path {
fill: var(--colour-logoFill);
fill: var(--color-logoFill);
}
</style>
2 changes: 1 addition & 1 deletion components/src/Middot/Middot.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

<style>
.middot {
background: var(--colour-copySecondary);
background: var(--color-textSecondary);
width: 0.6em;
height: 0.6em;
display: inline-block;
Expand Down
4 changes: 2 additions & 2 deletions components/src/Note/Note.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
font-size: calc(var(--fs-small-2) * 0.9);
line-height: 1.4;
letter-spacing: 0.0015em;
color: var(--colour-copySecondary);
color: var(--color-textSecondary);

:global(*) {
color: inherit;
Expand All @@ -32,7 +32,7 @@
text-underline-offset: 0.15em;
&:hover,
&:focus-visible {
color: var(--colour-copySecondaryHover);
color: var(--color-textSecondaryHover);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions components/src/Switcher/Switcher.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,9 +76,9 @@
overflow: hidden;
padding: 0;
margin: 0;
border: 1px solid var(--colour-copySecondary);
color: var(--colour-copyPrimary);
background: var(--colour-surfaceFill);
border: 1px solid var(--color-textSecondary);
color: var(--color-textPrimary);
background: var(--color-surfaceFill);
border-radius: var(--br-small);

@media (min-width: base.$bp-s) {
Expand Down Expand Up @@ -135,7 +135,7 @@
text-decoration: underline;
}
.is-selected & {
background: var(--colour-copySecondary);
background: var(--color-textSecondary);
font-weight: 700;
}
}
Expand Down
Loading