{"ava":{"require":["@babel/register"]},"nyc":{"exclude":["test/**/*","**/babel.config.js","docs","bench","examples"]},"bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"dist":{"shasum":"d95cd415651a0ffe94203780e832bd9398d1b204","tarball":"https://registry.npmjs.org/styled-system/-/styled-system-3.1.2-5.tgz","fileCount":6,"integrity":"sha512-26S5YFQ8xi4hS550iLqCOGsXgysLpGvtS2RUxlUj3Bbk/DrA276/o7YROGX5NPWUOwhLYvwZoem2Lt6PYkdCtw==","signatures":[{"sig":"MEQCIBNs2HpFuZfw+pYzk4VcWv1s0RkZw7n6N35yI0niyhvCAiAo3MbWOwQB1aRZx5jW2IPci0pUg73VtVYyYzMV8C50+g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":48665,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbm864CRA9TVsSAnZWagAAJpkP/izH3N9iO7IjlncL+UTl\nwTM3W/PqtENva8CZeDB7JzYp6dubHpcUQiyeMwr3rgjAdtxmIHCHL3QI6usb\n5ltUS527Mxb4VBcLcoV69d63+iz6e/p/Yb8oNJNB232lk1tQ350+SUY8PFte\nDPLKCXc2LtluydQlA224deJMf1PRHGGf5TcdgXc0PcTIEaUEQYtAU+ks0YaX\nIx7gB8Fky8rl4OMYT4k0BzUtR4vBm+fc5hcGTJzZNjiE7uZcFVVgxGV4fxTc\n5WFaswbkLdj5wx/KYRL88lVpqh/wCVJ/xQ+hhPiXBKtTsVTITpSJONX8DciC\nlPWSPXB3bOF7i6W4GHadIgr9/EHCg2mQKsXmeeq1xcuSrYiSnF9FdkutOCGw\n1gR2BXTxv0Ah+pqa95ng0sWg6EUfy0NuvH5qkZ0huvPR/J9en4Q5l9awaRdG\nVBD6QxY/etvi/L4zosvSco2un4sFO6JoQwlzVM5AN8wZyn2i1cNPkVtSjDrs\n9uCskBmWK+mvfSeWM7fOISwuWIUBa4l//Ky+E6XyTOZC8bOddnhFx5LmHyhd\nkaf92EdEfJxMWDljfXcQOHpQ9Rc9PoEHW6akcJ0/qSF7AoSTCBrr1z0UM9LP\nKiyqzBm2YeQSHbJV5mlklYW/SuzI0xRF2AAk9xAUJAZwYXZtDdm16iTwkSJm\nwGyV\r\n=UFlm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index","name":"styled-system","author":{"name":"Brent Jackson"},"mdx-go":{"basename":"/styled-system"},"readme":"\n<img src='docs/logo.svg' width='128' height='128' />\n\n# styled-system\n\nDesign system utilities for [styled-components][sc] and other css-in-js libraries\n\n[![Build Status][build-badge]][build]\n[![Coverage][coverage-badge]][coverage]\n[![Downloads][downloads-badge]][npm]\n[![Version][version-badge]][npm]\n\n[build-badge]: https://img.shields.io/travis/jxnblk/styled-system/master.svg?style=flat-square\n[build]: https://travis-ci.org/jxnblk/styled-system\n[coverage-badge]: https://img.shields.io/codecov/c/github/jxnblk/styled-system.svg?style=flat-square\n[coverage]: https://codecov.io/github/jxnblk/styled-system\n\n[downloads-badge]: https://img.shields.io/npm/dw/styled-system.svg?style=flat-square\n[version-badge]: https://img.shields.io/npm/v/styled-system.svg?style=flat-square\n[npm]: https://npmjs.com/package/styled-system\n\n```sh\nnpm i styled-system\n```\n\n## Features\n\n- Add style props that hook into your own theme\n- Responsive prop values for quickly setting responsive font-size, margin, padding, width, and more\n- Influenced by constraint-based design system principles\n- Typographic scale\n- Spacing scale for margin and padding\n- Default 8px grid\n- Works with any color palette\n- Works with most css-in-js libraries, including [styled-components][sc], [glamorous][glamorous], [emotion][emotion], [fela][fela], and [cxs][cxs]\n- Used in [Rebass](http://jxnblk.com/rebass), [Grid Styled](http://jxnblk.com/grid-styled/), 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> \"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/tkh44/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[dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665\n[mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984\n\n## Try It Out\n\nTry the [examples](examples) on CodeSandbox\n\n- [Basic](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- [Getting Started](#getting-started)\n- [Docs](#docs)\n- [Optional Packages](#optional-packages)\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='grays.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](docs/responsive-styles.md)\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](docs/getting-started.md) 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\n- [Getting Started](docs/getting-started.md)\n- [Responsive Styles](docs/responsive-styles.md)\n- [How it Works](docs/how-it-works.md)\n- [API](docs/api.md)\n  - [Core](docs/api.md#core)\n    - [space](docs/api.md#space) (margins & paddings)\n    - [width](docs/api.md#width)\n    - [fontSize](docs/api.md#fontsize)\n    - [color](docs/api.md#color) (and background-color)\n  - [Typography](docs/api.md#typography)\n  - [Layout](docs/api.md#layout)\n  - [Flexbox](docs/api.md#flexbox)\n  - [Borders](docs/api.md#borders)\n  - [Position](docs/api.md#position)\n  - [Misc](docs/api.md#misc)\n  - [Variants](docs/api.md#variant)\n  - [Utilities](docs/api.md#utilities)\n    - [get](docs/api.md#get)\n  - [Customize](docs/api.md#customize)\n    - [style](docs/api.md#style)\n    - [variant](docs/api.md#variant)\n- [Table of Style Functions](docs/table.md)\n- [Custom Props](docs/custom-props.md)\n- [Troubleshooting](docs/troubleshooting.md)\n\n## Optional Packages\n\n- [clean-tag](clean-tag)\n- [system-components](system-components)\n- [system-loader](system-loader)\n- [system-classnames](system-classnames)\n- [clean-element](clean-element)\n\n---\n\n## Further Reading\n\n- [Component Based Design System With Styled-System][varun-post]\n\n\n## Related\n\n- [system-components](https://github.com/jxnblk/styled-system/tree/master/system-components)\n- [grid-styled](https://github.com/jxnblk/grid-styled)\n- [Rebass](http://jxnblk.com/rebass)\n- [Compositor Lab](https://compositor.io/lab)\n- [styled-components][sc]\n- [glamorous][]\n- [emotion][]\n- [fela][]\n- [nano-style][]\n- [cxs][]\n\n[sc]: https://github.com/styled-components/styled-components\n[glamorous]: https://github.com/paypal/glamorous\n[emotion]: https://github.com/emotion-js/emotion\n[fela]: https://github.com/rofrischmann/fela\n[nano-style]: https://github.com/jxnblk/nano-style\n[cxs]: https://github.com/jxnblk/cxs\n[varun-post]: https://varun.ca/styled-system/\n[david-tweet]: https://mobile.twitter.com/davidyeiser/status/965920740582285312\n\n<!-- new 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[dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665\n\n[MIT License](LICENSE.md)\n","gitHead":"e0221f007bb55fd9ebc2d71b56012656faafc13f","license":"MIT","scripts":{"docs":"mdx-go build docs -d site","logo":"repng docs/Logo.js -d docs -f logo.png -w 512 -h 512 -p '{\"size\":512}'","size":"bundlesize","test":"nyc ava","bench":"node bench","clean":"rm -rf dist && mkdir dist","cover":"nyc report --reporter=html --reporter=lcov > coverage.lcov","start":"mdx-go docs","codecov":"nyc report --reporter=html --reporter=lcov > coverage.lcov && codecov","prepare":"npm run clean && npm run build:cjs && npm run build:esm","logo-svg":"scrs docs/Logo.js --svg > docs/logo.svg","pkg:test":"node scripts/test","build:cjs":"NODE_ENV=cjs babel src/index.js -o dist/index.js","build:esm":"NODE_ENV=esm babel src/index.js -o dist/index.mjs","pkg:clean":"node scripts/clean","pkg:prepare":"node scripts/run install"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"homepage":"https://github.com/jxnblk/styled-system#readme","keywords":["react","css-in-js","styled-components","glamorous"],"bundlesize":[{"path":"dist/*"}],"repository":{"url":"git+https://github.com/jxnblk/styled-system.git","type":"git"},"_npmVersion":"6.4.0","description":"Design system utilities for styled-components, glamorous, and other css-in-js libraries","directories":{},"maintainers":[{"name":"johno","email":"johnotander@gmail.com"},{"name":"jxnblk","email":"jxnblk@gmail.com"}],"sideEffects":false,"_nodeVersion":"10.4.0","dependencies":{"prop-types":"^15.6.2"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ava":"^1.0.0-beta.8","nyc":"^12.0.2","scrs":"^1.1.0","is-ci":"^1.1.0","react":"^16.4.0","repng":"^3.0.0","sinon":"^4.3.0","mdx-go":"^1.1.6","rebass":"^3.0.0-4","codecov":"^3.0.3","benchmark":"^2.1.4","@babel/cli":"^7.0.0","bundlesize":"^0.17.0","@babel/core":"^7.0.1","lodash.sortby":"^4.7.0","@babel/register":"^7.0.0","@babel/preset-env":"^7.0.0","styled-components":"^4.0.0-beta.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.4.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-system_3.1.2-5_1536937656232_0.7872547559296619","host":"s3://npm-registry-packages"},"_id":"styled-system@3.1.2-5","version":"3.1.2-5"}