JSPM

theme-ui

0.0.6
  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 48346
  • Score
    100M100P100Q136362F
  • License MIT

Package Exports

  • theme-ui
  • theme-ui/layout

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (theme-ui) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

theme-ui

WIP Themeable UI components for themes

npm i theme-ui
// basic usage
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    {props.children}
  </ThemeProvider>

css prop

The css utility is from @styled-system/css. This could potentially be handled with something like Emotion plugins.

import React from 'react'
import { css } from 'theme-ui'

export default () =>
  <div
    css={css({
      fontSize: 4,
      fontWeight: 'bold',
      color: 'primary', // picks up values from theme
    })}>
    Hello
  </div>

MDX Components

Use the components prop to add components to MDX scope. The ThemeProvider (name TBD) is a combination of MDXProvider and Emotion's ThemeProvider.

// with mdx components
import React from 'react'
import { ThemeProvider } from 'theme-ui'
import mdxComponents from './mdx-components'
import theme from './theme'

export default props =>
  <ThemeProvider
    components={mdxComponents}
    theme={theme}>
    {props.children}
  </ThemeProvider>

This will render child MDX documents with the components provided via context. For use outside of MDX (e.g. Remark Markdown) the styles could be applied with a wrapper component.

theme.styles

The MDX components can also be styled via the theme.styles object. This can be used as a mechanism to pass Typography.js-like styles to MDX content.

// example theme
export default {
  colors: {
    primary: '#33e',
  },
  styles: {
    // this styles child MDX `<h1>` components
    h1: {
      fontSize: 32,
      // this value comes from the `color` object
      color: 'primary',
    },
  }
}

Styled components

These components' styles can also be consumed outside of an MDX doc with the Styled component. Note that these are only styled using the same theme.styles object and not the same components passed to the ThemeProvider context.

import React from 'react'
import { Styled } from 'theme-ui'

export default props =>
  <Styled.div>
    <Styled.h1>
      Hello
    </Styled.h1>
  </Styled.div>

To change the underlying component in Styled, use the as prop.

<Styled.a as={Link} to='/'>Home</Styled.a>

Layout Components

Page layout components are included in the theme-ui/layout module.

import React from 'react'
import {
  Layout,
  Header,
  Main,
  Container,
  Footer
} from 'theme-ui/layout'

export default props =>
  <Layout>
    <Header>
      Hello
    </Header>
    <Main>
      <Container>
        {props.children}
      </Container>
    </Main>
    <Footer>
      © 2019
    </Footer>
  </Layout>

Experimental

MIT License