@theme-ui/preset-polaris

@theme-ui/preset-polaris

Theme UI includes @theme-ui/preset-polaris which can be used as an example or starting point for extending your own themes. @theme-ui/preset-polaris is based on the Shopify design system, Polaris.

npm i @theme-ui/preset-polaris

// example theme
import theme from '@theme-ui/preset-polaris'

export default {
  ...theme,
  styles: {
    ...theme,
  },
}

See all built-in presets

Contributing

We'd love to have more presets added to the Theme UI project. If you'd like to add a new preset or improve upon the existing ones, please open an issue or pull request.

Changelog

v0.3.0 2020-01-22

• Split theme-ui package into @theme-ui/core, @theme-ui/mdx, and @theme-ui/color-modes
• Removes context.components (still available through MDX context)
• Adds separate ColorModeProvider component
• Removes support for theme.initialColorMode - use initialColorModeName instead
• Removes layout components (Layout, Header, Main, Footer) - use Box and Flex instead
• Updates CSS custom properties implementation for color modes
• When using useColorSchemeMediaQuery flag, it will initialize the mode to light when @media (prefers-color-scheme: light) is enabled
• Global color mode styles are automatically added to the body without needing to render the ColorMode component
• Adds global typographic styles, set useBodyStyles: false to disable
• Removes ThemeStateProvider
• Fix issue where <del> tag was incorrectly specified as delete
• The @theme-ui/editor API has changed significantly. See the README.md for more information.
• @theme-ui/components: on Grid component, allow custom columns definitions via strings #541
• @theme-ui/gatsby-theme-style-guide: add docs on shadowing #558
• Adds @theme-ui/preset-polaris #567
• Adjusts default font stack in presets #568