System Props

Inspired by styled-system, a responsive, theme-based style props for building design systems with React.

Functions almost identically to styled-system, but adds the following features:

• Written in TypeScript
• Chakra's PseudoBox inspired pseudo selector props
• Access the theme object at any time by using the function syntax
• Supports common themed shorthand properties, like border, margin, padding, and box-shadow
• Strict mode: allow only values that are present in the theme
• Visually distinguish theme values by prefixing system prop values with $

Installation

yarn add system-props

Quick Start

See the examples directory for more.

import { createSystem, color, space } from 'system-props';
import styled, { ThemeProvider } from 'styled-components';

const theme = {
  space: ['0px', '4px', '8px', '16px', '32px'],
  colors: {
    blue100: 'lightblue',
    blue200: 'blue',
    //...etc
  },
};

const system = createSystem({
  strict, // default: false
  pseudoSelectors, // default: { _hover: '&:hover', ...etc }
});

const Box = styled.div(system({ ...color, ...space }));

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Box
        bg="$blue500"
        margin="$1 $2 $3 $4"
        border="1px solid $blue200"
        borderBottom={theme => `3px dotted ${theme.colors.blue200}`}
        _hover={{
          bg: 'blue700',
        }}
      />
    </ThemeProvider>
  );
};

TODO

• Improve TypeScript support for users
• Improve API documentation
• Add variant API

Credits

Many of the concepts here come from so many great, existing open-source projects, and they deserve a shout-out!

• styled-system, duh
• Chakra UI and the PseudoBox
• Stitches
• Sprout's System Props documentation