How to use the @theme-ui/presets.system.styles function in @theme-ui/presets

import pragma from './pragma'

import Header from './header'
import Canvas from './canvas'
import Layout from './layout'
import SidePanel from './side-panel'

// blocks app theme
const appTheme = {
  ...systemTheme,
  colors: {
    ...systemTheme.colors,
    border: '#e1e6eb'
  },
  styles: {
    ...systemTheme.styles,
    navlink: {
      color: 'inherit',
      textDecoration: 'none',
      fontWeight: 600
    }
  },
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      '&:hover': {
        bg: 'text'
      }
    },
    secondary: {
      color: 'text',

import pragma from './pragma'

import Header from './header'
import Canvas from './canvas'
import Layout from './layout'
import SidePanel from './side-panel'

// blocks app theme
const appTheme = {
  ...systemTheme,
  colors: {
    ...systemTheme.colors,
    border: '#e1e6eb'
  },
  styles: {
    ...systemTheme.styles,
    navlink: {
      color: 'inherit',
      textDecoration: 'none',
      fontWeight: 600
    }
  },
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      '&:hover': {
        bg: 'text'
      }
    },
    secondary: {
      color: 'text',

import { system as systemTheme } from '@theme-ui/presets'

export default {
  ...systemTheme,
  colors: {
    ...systemTheme.colors,
    border: '#e1e6eb'
  },
  styles: {
    ...systemTheme.styles,
    navlink: {
      color: 'inherit',
      textDecoration: 'none',
      fontWeight: 600
    }
  },
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      '&:hover': {
        bg: 'text'
      }
    },
    secondary: {
      color: 'text',

...system,
  colors: {
    ...system.colors,
    border: '#e1e6eb'
  },
  fontWeights: {
    body: 400,
    heading: 600,
    display: 600
  },
  sizes: {
    container: '48em',
    measure: '32em'
  },
  styles: {
    ...system.styles,
    h1: {
      ...system.styles.h1,
      '&:first-of-type': {
        mt: 0
      }
    },
    navLink: {
      color: 'inherit',
      textDecoration: 'none',
      fontWeight: 600
    },
    p: {
      ...system.styles.p,
      fontSize: [2, 3]
    },
    li: {

/** @jsx jsx */
import * as recipes from 'blocks-ui/recipes'
import { jsx, ThemeProvider, Styled } from 'theme-ui'
import { system } from '@theme-ui/presets'

const theme = {
  ...system,
  styles: {
    ...system.styles,
    navlink: {
      color: 'inherit',
      textDecoration: 'none',
      fontWeight: 600
    }
  },
  buttons: {
    primary: {
      color: 'background',
      bg: 'primary',
      '&:hover': {
        bg: 'text'
      }
    },
    secondary: {
      color: 'background',

...system.colors,
    border: '#e1e6eb'
  },
  fontWeights: {
    body: 400,
    heading: 600,
    display: 600
  },
  sizes: {
    container: '48em',
    measure: '32em'
  },
  styles: {
    ...system.styles,
    h1: {
      ...system.styles.h1,
      '&:first-of-type': {
        mt: 0
      }
    },
    navLink: {
      color: 'inherit',
      textDecoration: 'none',
      fontWeight: 600
    },
    p: {
      ...system.styles.p,
      fontSize: [2, 3]
    },
    li: {
      fontSize: [2, 3]
    },