System Props

Responsive, theme-based style props for building design systems with React. https://system-props.com

[![Version][]][npm]
![size][]
![MIT License][license]

[version]: https://flat.badgen.net/npm/v/system-props
[npm]: https://npmjs.com/package/system-props
[size]: https://flat.badgen.net/bundlephobia/minzip/system-props
[license]: https://flat.badgen.net/badge/license/MIT/blue

``sh
yarn add system-props
`

Features

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 $

Quick Start

See the example project in this repo for a more complete example.

`tsx
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 (

bg="$blue500"
margin="$1 $2 $3 $4"
border="1px solid $blue200"
borderBottom={(theme) => 3px dotted ${theme.colors.blue200}}
_hover={{
bg: '$blue700',
}}
/>

);
};
``

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