Skip to content

Instantly share code, notes, and snippets.

@mfix22
Created May 8, 2019 21:06
Show Gist options
  • Save mfix22/ce8c8c9a039c5381c5dd50ea7fabe8be to your computer and use it in GitHub Desktop.
Save mfix22/ce8c8c9a039c5381c5dd50ea7fabe8be to your computer and use it in GitHub Desktop.
Creating `styled-components` theme from CSS variables
export const space = [
'var(--x1)',
'var(--x2)',
'var(--x3)',
'var(--x4)',
'var(--x5)',
'var(--x6)',
];
export const fonts = {
primary: 'var(--font-primary)',
mono: 'var(--font-mono)',
};
export const fontSizes = [
'var(--f1)',
'var(--f2)',
'var(--f3)',
'var(--f4)',
'var(--f5)',
'var(--f6)',
];
export const colors = {
primary: 'var(--primary)',
text: 'var(--text)',
borders: 'var(--borders)',
pageBackground: 'var(--page-background)',
navBackground: 'var(--nav-background)',
// add more colors here
};
// rest of theme:
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment