text: const theme = {
    colors: {
      text: '#000',
      background: '#fff',
      primary: '#07c',
      secondary: '#609',
      lightgray: '#fafafa',
    },
    fonts: {
      body:
        'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif',
      heading: 'inherit',
      monospace: 'Menlo, monospace',
    },
    lineHeights: {
      body: 1.5,
      heading: 1.125,
    },
    styles: {
      root: {
        fontFamily: 'body',
        lineHeight: 'body',
        color: 'text',
        bg: 'background',
      },
      pre: {
        variant: 'prism',
        fontFamily: 'monospace',
        p: 3,
        bg: 'lightgray',
        borderRadius: 4,
      },
      code: {
        fontFamily: 'monospace',
      },
      a: {
        color: 'primary',
        textDecoration: 'none',
        ':hover': {
          color: 'secondary',
          textDecoration: 'underline',
        },
      },
    },
    prism: {
      [[
        '.comment',
        '.prolog',
        '.doctype',
        '.cdata',
        '.punctuation',
        '.operator',
        '.entity',
        '.url',
      ]]: {
        color: 'gray',
      },
      '.comment': {
        fontStyle: 'italic',
      },
      [[
        '.property',
        '.tag',
        '.boolean',
        '.number',
        '.constant',
        '.symbol',
        '.deleted',
        '.function',
        '.class-name',
        '.regex',
        '.important',
        '.variable',
      ]]: {
        color: 'purple',
      },
      [['.atrule', '.attr-value', '.keyword']]: {
        color: 'primary',
      },
      [[
        '.selector',
        '.attr-name',
        '.string',
        '.char',
        '.builtin',
        '.inserted',
      ]]: {
        color: 'secondary',
      },
    },
  }
  
  export default theme
  