@styled-system/edit

v5.1.5

Types
ESM
CJS

WIP Debugging tool for live editing Styled System theme objects

License: MIT
Deps: 6/-
View dependency graph Inspect dependency tree
Install Size: 24 kB/-
Vulns: 1
Published: Feb 17, 2020

Get started

$npm install @styled-system/edit

$pnpm add @styled-system/edit

$yarn add @styled-system/edit

$bun add @styled-system/edit

$deno add npm:@styled-system/edit

$vlt install @styled-system/edit

Readme

@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>