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

import * as transforms from './transforms'
import * as queries from './queries'

import { useEditor } from './editor-context'
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'

import * as transforms from './transforms'
import * as queries from './queries'

import { useEditor } from './editor-context'
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'

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'

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

const theme = {
  ...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': {