@spicy-ui/styled-system

Responsive, theme-based style props for building design systems with React

Usage no npm install needed!

<script type="module">
  import spicyUiStyledSystem from 'https://cdn.skypack.dev/@spicy-ui/styled-system';
</script>

README

styled-system

🌶️ Responsive, theme-based style props for building design systems with React

npm Dependencies Dev Dependencies

⚠️ Caution

While it is almost a direct port of styled-system to TypeScript it does have a few minor changes.

  • bg is now for the background css property (but it still uses the color scale) and bgColor has been added
  • there are a bunch of new aliased props (e.g. h for height, maxW for max-width, etc)
  • there is an extendedFlexbox and extendedGrid parser which contains shorthands for flexbox and grid parsers (good for Flex and Grid components)
  • the css function now supports a collection of pseudo selectors (e.g. _hover for &:hover)
  • new animation and transition parsers (and scales) which are also rolled into the css function

A major part that is incomplete in this package is the types (both exported and internal and particulary around the css export) - if you're able and willing to have a crack at them please do, it would be super appreciated to get some help on this.

Issues and Bugs

If you happen to find any, please report them here so they can be squashed.

License

MIT, see the LICENSE file.