- Exciting release!Introducing "safe npm". Learn more →
system-props
Advanced tools
- Version published
- Maintainers
- 1
- Weekly downloads
- 677
- decreased by-21.28%
Weekly downloads
Changelog
Readme
System Props
Responsive, theme-based style props for building design systems with React. https://system-props.com
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, andbox-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.
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>
);
};
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
FAQs
Inspired by styled-system, a responsive, theme-based style props for building design systems with React.
The npm package system-props receives a total of 556 weekly downloads. As such, system-props popularity was classified as not popular.
We found that system-props demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.