diff --git a/components/src/Caption/Caption.stories.svelte b/components/src/Caption/Caption.stories.svelte
index a1d61a33..30047a3a 100644
--- a/components/src/Caption/Caption.stories.svelte
+++ b/components/src/Caption/Caption.stories.svelte
@@ -30,6 +30,6 @@
diff --git a/components/src/ChartHeader/ChartHeader.svelte b/components/src/ChartHeader/ChartHeader.svelte
index 77e81d64..7fbc8bc4 100644
--- a/components/src/ChartHeader/ChartHeader.svelte
+++ b/components/src/ChartHeader/ChartHeader.svelte
@@ -27,7 +27,7 @@
diff --git a/components/src/DesignTokens/DesignTokens.mdx b/components/src/DesignTokens/DesignTokens.mdx
index d9b27df2..16126e9b 100644
--- a/components/src/DesignTokens/DesignTokens.mdx
+++ b/components/src/DesignTokens/DesignTokens.mdx
@@ -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';
@@ -49,8 +49,7 @@ The `` component makes colours, type sizes and other design tokens
```
@@ -96,7 +95,7 @@ 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()}
@@ -104,6 +103,28 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
## Colours
+### Semantics
+
+Light / Dark
+
+
+ {[
+ 'textPrimary',
+ 'textSecondary',
+ 'textSecondaryHover',
+ 'logoFill',
+ 'surfaceFill',
+ 'pageFill'
+ ].map((el, i) => {
+ return (
+
+ );
+ })}
+
+
### Shades
@@ -125,40 +146,3 @@ Type sizes and paragraph styles are designed to match the typography on [swr.de]
);
})}
-
-### Linear Scales
-
-### Categorical Scales
-
-### 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, _) => {
- return (
- {
- return c[0].toUpperCase() + c.slice(1);
- })
- .join('/')}`}
- subtitle={el}
- colors={scales[el]}
- />
- );
- })}
-
diff --git a/components/src/DesignTokens/DesignTokens.svelte b/components/src/DesignTokens/DesignTokens.svelte
index e9564564..7d5f6eaf 100644
--- a/components/src/DesignTokens/DesignTokens.svelte
+++ b/components/src/DesignTokens/DesignTokens.svelte
@@ -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;
diff --git a/components/src/DesignTokens/Tokens.ts b/components/src/DesignTokens/Tokens.ts
index 9059808e..6284bc69 100644
--- a/components/src/DesignTokens/Tokens.ts
+++ b/components/src/DesignTokens/Tokens.ts
@@ -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'
},
diff --git a/components/src/Headline/Headline.stories.svelte b/components/src/Headline/Headline.stories.svelte
index 5923aebd..f49b21c8 100644
--- a/components/src/Headline/Headline.stories.svelte
+++ b/components/src/Headline/Headline.stories.svelte
@@ -20,6 +20,6 @@
diff --git a/components/src/Logotype/Logotype.svelte b/components/src/Logotype/Logotype.svelte
index e4a981e2..a5c204e6 100644
--- a/components/src/Logotype/Logotype.svelte
+++ b/components/src/Logotype/Logotype.svelte
@@ -42,6 +42,6 @@
height: calc(var(--fs-small-2) * 0.8);
}
path {
- fill: var(--colour-logoFill);
+ fill: var(--color-logoFill);
}
diff --git a/components/src/Middot/Middot.svelte b/components/src/Middot/Middot.svelte
index 15a44907..07ddf028 100644
--- a/components/src/Middot/Middot.svelte
+++ b/components/src/Middot/Middot.svelte
@@ -2,7 +2,7 @@