{"dist":{"shasum":"adc713de45915c7e140cb5f09a9fc4ba0829a15c","tarball":"https://registry.npmjs.org/styled-system/-/styled-system-5.0.0-7.tgz","fileCount":5,"integrity":"sha512-UjH3GzF5s3z2ToSh/+Ey1tDaeGXuXhQvLiUYYtlKdD2sA6uj2ZGemC2uYpE5z56WJlEaGBe1re1x7rOlpHifrw==","signatures":[{"sig":"MEQCIBOEl6Wduq3kvCsjjcsT44cXVz2+K/8g5FBcjqmKZkPCAiAoeVY+iaghGFe5RdUmIrid6b/sgC+A/w1UZsk0+Tm4VA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":18371,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7JW/CRA9TVsSAnZWagAArBwP/imwEUpURyTE1LrzuYhA\nSTkPj+N1grHUpCXYbPWUE48BzkQYMqf8ZByAZgvEYNAGYwKf2GHGDJ6O4EY9\n4uKU/Rcxnmfo260aKNpUrehKFeKHOA4gj2dXGW815NmAUmU1+dbrlTga+Jfz\n5A8WucLSzsS86NsaaagmRHY4vzTSQay3I7VlYduHS0oI91THqXNRhHA0epTN\nFdlWgIsGsYKm7ALDK9zvDedwDFnUWrggSahna53pPGIxncHnKWQBMPT+pXMi\nEUBDc2y2JUNKNrmIfjMk9ALYqyuToB1erlzI+is5r3mufIj8rhYo3TDYBtOW\nWp+pCvM8MAAP7n8twhwbsqTXyDygjkZ9mv3LJJ8rtjPrIwIrp//7DcZWame3\nZa3L7uI3xR/LdA96rS4gfDuNtpNpey+r79jWencVIEzupU09kph/bwMuD0sB\n7piWEc917joZaL7yZgXPWpztQJJk6Ld8DZh75YFO5g/mMYw3s4UCWSZFVhHf\nis2gIulO/0QGom31SQgG+a48hQBCeeE0yt9CcW4qEH0yi9PsopzwJv7ARZvW\nZN83uNafJ1oua/3/akIy9vHErep+Hsva4ptFjDJ3SHC5FFosvv8jBQJNBS7m\nMgUukd3ruKEEKM06MVVcz2eX/sZK00y1EyCR7aWlOc6yXHQttDGn/Sjg7hjh\nOU8i\r\n=gL1e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"styled-system","author":{"name":"Brent Jackson"},"readme":"\n<img src='https://styled-system.com/logo.svg' width='128' height='128' />\n\n# Styled System\n\nResponsive, theme-based style props for building design systems with React\nhttps://styled-system.com\n\n[![stars][]][github]\n[![Build Status][circleci-badge]][circleci]\n[![Downloads][]][npm]\n[![Version][]][npm]\n[![spectrum-badge][]][spectrum]\n![size][]\n![MIT License][license]\n[![system-ui/theme][system-ui-badge]](https://system-ui.com/theme)\n\n[version]: https://flat.badgen.net/npm/v/styled-system\n[downloads]: https://flat.badgen.net/npm/dm/styled-system\n[license]: https://flat.badgen.net/badge/license/MIT/blue\n[stars]: https://flat.badgen.net/github/stars/styled-system/styled-system\n[size]: https://flat.badgen.net/bundlephobia/minzip/styled-system\n[spectrum-badge]: https://flat.badgen.net/badge/spectrum/community/purple\n[system-ui-badge]: https://flat.badgen.net/badge/system-ui/theme/black\n\n[npm]: https://npmjs.com/package/styled-system\n[github]: https://github.com/styled-system/styled-system\n[spectrum]: https://spectrum.chat/styled-system\n[circleci]: https://circleci.com/gh/styled-system/styled-system\n[circleci-badge]: https://flat.badgen.net/circleci/github/styled-system/styled-system/master\n\n\n```sh\nnpm i styled-system\n```\n\n## Features\n\n- Add style props that hook into your own theme\n- Quickly set responsive font-size, margin, padding, width, and more with props\n- Influenced by constraint-based design system principles\n- Typographic scale\n- Spacing scale for margin and padding\n- Works with any color palette\n- Works with most css-in-js libraries, including [styled-components][] & [emotion][emotion]\n- Used in [Rebass](https://rebassjs.org), [Rebass Grid](https://rebassjs.org/grid/), and the [Priceline Design System](https://github.com/pricelinelabs/design-system)\n\n> \"This is honestly my favourite way to build UI components right now ![party parrot][party-parrot]\"\n>\n> – [Varun Vachhar][varun-post]\n\n[party-parrot]: https://github.com/jmhobbs/cultofthepartyparrot.com/raw/master/parrots/parrot.gif\n\n\n> \"If you haven't seen Styled System before, do yourself a favour and check it out. It's been a huge influence in my thinking on component-oriented styles.\"\n>\n> – [Mark Dalgleish][markdalgleish]\n\n<!--\n> \"Fantastic set of tools that offer the ease and API of tachyons/functional CSS but, are way more customisable.\"\n>\n> – [Varun Vachhar](https://mobile.twitter.com/winkerVSbecks/status/955619873463431168)\n-->\n\n> \"The future of css-in-js is going to look something like styled-system with its responsive values.\"<br/>\n>\n> – [Kye Hohenberger](https://mobile.twitter.com/kyehohenberger/status/905474043729416192)\n\n> \"Coming from @tachyons_css, the styled-system utilities from @jxnblk is the missing link I’ve been looking for.\"<br/>\n>\n> – [Nathan Young](https://mobile.twitter.com/nathanyoung/status/891353221880360960)\n\n> \"If you make websites/apps with React check out Styled System if you haven't already. You will be amazed at how much faster you can build.\"\n>\n> – [David Yeiser][david-tweet]\n\n> \"If you like Tachyons you will love styled-system. If you don't like Tachyons, you will love styled-system.\"\n>\n> – [Adam Morse][mrmrs]\n\n[mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984\n\n\n## Try It Out\n\nTry the [examples](examples) on CodeSandbox\n\n- [Basic Example](https://codesandbox.io/s/github/jxnblk/styled-system/tree/master/examples/basic)\n- [Emotion](https://codesandbox.io/s/github/jxnblk/styled-system/tree/master/examples/emotion)\n\n### Table of Contents\n\n- [Usage](#usage)\n- [Docs](#docs)\n- [Further Reading](#further-reading)\n- [Built with Styled System](#built-with-styled-system)\n- [Related](#related)\n\n## Usage\n\n```jsx\n// Example uses styled-components, but styled-system works with most other css-in-js libraries as well\nimport styled from 'styled-components'\nimport { space, width, fontSize, color } from 'styled-system'\n\n// Add styled-system functions to your component\nconst Box = styled.div`\n  ${space}\n  ${width}\n  ${fontSize}\n  ${color}\n`\n```\n\nEach style function exposes its own set of component props\nthat handle styles based on values defined in a theme.\n\n```jsx\n// width: 50%\n<Box width={1/2} />\n\n// font-size: 20px (theme.fontSizes[4])\n<Box fontSize={4} />\n\n// margin: 16px (theme.space[2])\n<Box m={2} />\n\n// padding: 32px (theme.space[3])\n<Box p={3} />\n\n// color\n<Box color='tomato' />\n\n// color: #333 (theme.colors.gray[0])\n<Box color='gray.0' />\n\n// background color\n<Box bg='tomato' />\n```\n\n## Responsive Style Props\n\nSet responsive width, margin, padding, font-size, and other properties with a shorthand array syntax.\n[Read more](https://styled-system.com/responsive-styles)\n\n```jsx\n// responsive width\n<Box width={[ 1, 1/2, 1/4 ]} />\n\n// responsive font-size\n<Box fontSize={[ 2, 3, 4 ]} />\n\n// responsive margin\n<Box m={[ 1, 2, 3 ]} />\n\n// responsive padding\n<Box p={[ 1, 2, 3 ]} />\n```\n\nTo learn more, see the [Getting Started](https://styled-system.com/getting-started) guide or read the docs.\n\n<!-- link shims for previous readme -->\n<a name='getting-started'></a>\n<a name='how-it-works'></a>\n<a name='responsive-styles'></a>\n<a name='api'></a>\n<a name='system-components'></a>\n<a name='default-theme'></a>\n<a name='troubleshooting'></a>\n<a name='cleanelement'></a>\n\n## Docs\n\n- [Getting Started](https://styled-system.com/getting-started)\n- [Responsive Styles](https://styled-system.com/responsive-styles)\n- [How it Works](https://styled-system.com/how-it-works)\n- [API](https://styled-system.com/api)\n- [Table of Style Functions](https://styled-system.com/table)\n- [Custom Props](https://styled-system.com/custom-props)\n\n---\n\n## Further Reading\n\n- [Component Based Design System With Styled-System][varun-post]\n- [Build Better Component Libraries with Styled System][alan-b-smith-post]\n- [Building a beautiful, reusable button with Styled System](https://johno.com/styled-system-button)\n- [Defining Component APIs in React](http://jxnblk.com/blog/defining-component-apis-in-react/)\n- [The Three Tenets of Styled System](https://jxnblk.com/blog/the-three-tenets-of-styled-system/)\n\n\n## Built with Styled System\n\n- [Primer Components](https://primer.style/components)\n- [Priceline Design System](https://pricelinelabs.github.io/design-system/)\n- [Cloudflare Design Color](https://cloudflare.design/color/)\n- [Styled System HTML](https://johnpolacek.github.io/styled-system-html/)\n- [Rebass](https://rebassjs.org)\n- [Rebass Grid](https://grid.rebassjs.org)\n\n## Related\n\n- [System UI](https://system-ui.com)\n- [Spectrum.Chat Community](https://spectrum.chat/styled-system)\n- [styled-components][]\n- [emotion][]\n\n[styled-components]: https://github.com/styled-components/styled-components\n[emotion]: https://github.com/emotion-js/emotion\n[varun-post]: https://varun.ca/styled-system/\n[alan-b-smith-post]: https://medium.com/styled-components/build-better-component-libraries-with-styled-system-4951653d54ee\n[david-tweet]: https://mobile.twitter.com/davidyeiser/status/965920740582285312\n\n<!-- extra links -->\n[cole-tweet]: https://mobile.twitter.com/colebemis/status/996565848138526721\n[mrmrs-elements]: https://github.com/mrmrs/elements\n[broccs-react-starter]: https://github.com/broccolini/react-website-starter\n[markdalgleish]: https://mobile.twitter.com/markdalgleish/status/1107732365474848768\n[Varun Vachhar]: https://mobile.twitter.com/winkerVSbecks/status/955619873463431168\n\n[MIT License](LICENSE.md)\n","gitHead":"e1e240e1dc5ca903cfbf0dc0527a19e0cc6ff749","license":"MIT","scripts":{"prepare":"NODE_ENV=cjs babel src -d dist"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"keywords":["react","css-in-js","styled-components","emotion"],"_npmVersion":"lerna/3.14.1/node@v10.9.0+x64 (darwin)","description":"Responsive, theme-based style props for building design systems with React","directories":{},"maintainers":[{"name":"johno","email":"johnotander@gmail.com"},{"name":"jxnblk","email":"jxnblk@gmail.com"}],"_nodeVersion":"10.9.0","dependencies":{"object-assign":"^4.1.1","@styled-system/core":"^5.0.0-7","@styled-system/grid":"^5.0.0-7","@styled-system/color":"^5.0.0-7","@styled-system/space":"^5.0.0-7","@styled-system/border":"^5.0.0-7","@styled-system/layout":"^5.0.0-7","@styled-system/flexbox":"^5.0.0-7","@styled-system/variant":"^5.0.0-7","@styled-system/position":"^5.0.0-7","@styled-system/background":"^5.0.0-7","@styled-system/typography":"^5.0.0-7"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@babel/cli":"^7.4.4"},"_npmOperationalInternal":{"tmp":"tmp/styled-system_5.0.0-7_1559008702520_0.0349432678419086","host":"s3://npm-registry-packages"},"_id":"styled-system@5.0.0-7","version":"5.0.0-7"}