How to use @theme-ui/preset-base - 3 common examples

To help you get started, we’ve selected a few @theme-ui/preset-base examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github system-ui / theme-ui / packages / preset-funk / src / index.js View on Github external
lineHeights: {
    body: 1.625,
    heading: 1.25,
  },
  fontWeights: {
    body: 400,
    heading: 900,
    bold: 700,
  },
  colors: {
    ...base.colors,
    primary: '#609',
    secondary: '#306',
  },
  styles: {
    ...base.styles,
  },
}

export default funk
github Chronoblog / gatsby-theme-chronoblog / packages / gatsby-theme-chronoblog / src / gatsby-plugin-theme-ui / theme.js View on Github external
img: 6,
    authorBanner: 6,
    blockquote: 6
  },
  borderWidth: {
    card: 2,
    search: 2
  },
  fonts: {
    body: '-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif',
    heading: 'inherit',
    monospace: 'Menlo, monospace'
  },
  prism,
  styles: {
    ...base.styles,
    ...styles
  },
  badges: {
    primary: {
      color: 'background',
      bg: 'primary'
    },
    tags: {
      color: 'inherit',
      bg: 'transparent',
      opacity: 0.7
    }
  },
  buttons: {
    ...buttons
  },
github system-ui / theme-ui / packages / preset-funk / src / index.js View on Github external
fonts: {
    body: 'Poppins, sans-serif',
    heading: 'Poppins, sans-serif',
    monospace: 'Menlo, monospace',
  },
  lineHeights: {
    body: 1.625,
    heading: 1.25,
  },
  fontWeights: {
    body: 400,
    heading: 900,
    bold: 700,
  },
  colors: {
    ...base.colors,
    primary: '#609',
    secondary: '#306',
  },
  styles: {
    ...base.styles,
  },
}

export default funk

@theme-ui/preset-base

Theme UI includes `@theme-ui/preset-base` which can be used as an example or starting point for extending your own themes.

MIT
Latest version published 2 months ago

Package Health Score

90 / 100
Full package analysis

Popular @theme-ui/preset-base functions

Similar packages