Creating `styled-components` theme from CSS variables

theme.js

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: