Skip to content
Branch: master
Find file History
Latest commit d585cc1 Jun 3, 2019
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
src Simplify build setup Jun 2, 2019
test Add tests Jun 2, 2019
.gitignore move `edit` into monorepo May 29, 2019
.npmignore move `edit` into monorepo May 29, 2019
README.md move `edit` into monorepo May 29, 2019
package.json v5.0.5 Jun 3, 2019

README.md

@styled-system/edit

WIP Debugging tool for live editing Styled System theme objects

Currently only works with Emotion

npm i @styled-system/edit
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'

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

Components

  • EditProvider a stateful theme provider with context for live editing – receives theme from parent context
  • ThemeControls a full, batteries-included theme editing form
  • FieldSet renders fields for part of a theme object
  • Field renders a form field for a single value from the theme object
// example using FieldSet
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <EditProvider>
      {props.children}
      <FieldSet name='colors' />
      <FieldSet name='fontSizes' />
    </EditProvider>
  </ThemeProvider>
// example using Field
import React from 'react'
import { ThemeProvider } from 'emotion-theming'
import { EditProvider, ThemeControls } from '@styled-system/edit'
import theme from './theme'

export default props =>
  <ThemeProvider theme={theme}>
    <EditProvider>
      {props.children}
      <FieldSet name='colors.text' />
      <FieldSet name='colors.background' />
    </EditProvider>
  </ThemeProvider>

FieldSet

Props

  • name (string) dot-notation key path for theme object
  • type (string) type prop for child Field components (see below)
  • ignore (array) array of key names to omit from the form

Field

Props

  • name (string) dot-notation key path for theme object
  • type (string | 'number', 'select', or 'color') type of form field to render
  • options (array) array of options to render for select type fields
  • render (function) render prop for custom field UI

MIT License

You can’t perform that action at this time.