{"ava":{"require":["@babel/register"]},"nyc":{"exclude":["test/**/*","**/babel.config.js","docs","bench","examples"]},"bugs":{"url":"https://github.com/jxnblk/styled-system/issues"},"dist":{"shasum":"78973453d8bf79b41d7233e35be5c03a82ea3932","tarball":"https://registry.npmjs.org/styled-system/-/styled-system-4.0.0-0.tgz","fileCount":8,"integrity":"sha512-V1MBYZ4kxd7z54WLMLTUdBckPgsdW6QDHb+k3VcmiI4Hyq9TwHKXlvvGFe38uijuBQ4wYxv0cyNERWiwR2hMAA==","signatures":[{"sig":"MEQCIBrm++A3apsloWKxm0Ans2wnff/pUy4lNYbez6YDQyXXAiBMz4EUOVYKZJ4Wg3WcAeM2HyIz/POJDHwqKOJtC6+XDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":47486,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcYzG8CRA9TVsSAnZWagAARxoP/j2nvyc57JThPM0ISMjr\nIFVieU+qHUcnOHXy5fMCEjUr4vH8OuBSI2ggFkVfFWUCB7fjUR+m8UQ8gZZ0\nS6v6/phfP6aSu3b0eosoiTHHQ9PvOofpEYgjmY0seek9TFTVn+6R7197UEkH\ngxD0wu+W+veIQnvAnKA+KkkozpwOJUuj0cG1Rlu/IDQ0QlaKX8CLBDgKKFtv\nQs1LzZrVbZEc4TbgEHurShMVu6wX8UzL+Zo0Aiv0QLKYZKVXTtXZbhy0kct2\nOVe67oxRqKvoqEMc8TxhW+iiWSNzV6jIFKWn1SuLp6VIOBzmij6b6aUQXHWp\ndJnfn/DFYKzWvnrw79CuvwUlQYocv8o+5aFjWPj9SFoXyGoOYfB+nuilZHq9\n8Pzf1Dvl5FqMJAHfnBurBfqr42VVPzFZOVOatIaMOt4piWYvrYs+gSIeyVaf\nPUzlABXS6hsKjkOHkYEv8ct7PNBpqpSNO+/zWxIS70GpoZ/0PpeFZPHQ48FI\nHusANZ0nIhMLInT0qFFY5yieFpTu28P5w1t7uwSAaNMre0XiZUMSP6GqeAS1\n5kpx5yJZyjO23R7fPVu2akxXgnVBgibvlqFtCI+ZIF+JQSUaAUHakqo0axBs\nJvg7jYdd+DMjxM9rZd9hTmiIbJY8GIj4m0GQTebNROmphwRNDo+r1GA6P8mU\ngdkU\r\n=+1f1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.cjs.js","name":"styled-system","husky":{"hooks":{"precommit":"lint-staged"}},"author":{"name":"Brent Jackson"},"module":"dist/index.esm.js","readme":"\n<img src='https://jxnblk.com/styled-system/logo.svg' width='128' height='128' />\n\n# Styled System\n\nResponsive, theme-based style props for building design systems with React\n\n[![stars][]][github]\n[![Build Status][ci]][travis]\n[![Downloads][]][npm]\n[![Version][]][npm]\n![size][]\n![MIT License][license]\n\n[ci]: https://flat.badgen.net/travis/jxnblk/styled-system\n[version]: https://flat.badgen.net/npm/v/styled-system\n[downloads]: https://flat.badgen.net/npm/dw/styled-system\n[license]: https://flat.badgen.net/badge/license/MIT/blue\n[stars]: https://flat.badgen.net/github/stars/jxnblk/styled-system\n[size]: https://flat.badgen.net/bundlephobia/minzip/styled-system\n\n[npm]: https://npmjs.com/package/styled-system\n[travis]: https://travis-ci.org/jxnblk/styled-system\n[github]: https://github.com/jxnblk/styled-system\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://grid.rebassjs.org/), 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> \"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[dalgleish]: https://mobile.twitter.com/markdalgleish/status/913191186944241665\n[mrmrs]: https://mobile.twitter.com/mrmrs_/status/913189805055401984\n\n<!--\n\ntodo: react-scripts is borked\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- [Theme Aliases](https://codesandbox.io/s/github/jxnblk/styled-system/tree/master/examples/theme-aliases)\n\n-->\n\n\n### Table of Contents\n\n- [Usage](#usage)\n- [Getting Started](#getting-started)\n- [Docs](#docs)\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](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#variants)\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\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- [Defining Component APIs in React](http://jxnblk.com/writing/posts/defining-component-apis-in-react/)\n\n\n## Related\n\n- [Rebass](https://rebassjs.org)\n- [Rebass Grid](https://grid.rebassjs.org)\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<!-- 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":"558d035ff1c5eaffe0a0c60947e3416bee002175","license":"MIT","scripts":{"logo":"npx repng docs/Logo.js -d docs -f logo.png -w 512 -h 512 -p '{\"size\":512}'","size":"npx 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 && npx codecov","prepare":"npm run clean && npm run build:cjs && npm run build:esm","logo-svg":"scrs docs/Logo.js --svg > docs/logo.svg","prettier":"prettier \"{src,test}/**/*.js\" --write","build:cjs":"cross-env NODE_ENV=cjs babel src -o dist/index.cjs.js","build:esm":"cross-env NODE_ENV=esm babel src -o dist/index.esm.js","now-build":"mdx-go build docs -d public"},"_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.7.0","description":"Responsive, theme-based style props for building design systems with React","directories":{},"lint-staged":{"*.{js,md}":["prettier --write","git add"]},"maintainers":[{"name":"johno","email":"johnotander@gmail.com"},{"name":"jxnblk","email":"jxnblk@gmail.com"}],"sideEffects":false,"_nodeVersion":"10.15.0","dependencies":{"prop-types":"^15.6.2","@babel/runtime":"^7.3.1"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"ava":"^1.2.0","nyc":"^12.0.2","scrs":"^1.1.0","husky":"^1.3.1","is-ci":"^1.1.0","react":"^16.7.0","mdx-go":"^2.0.0-32","rebass":"^3.0.1","prettier":"^1.16.1","benchmark":"^2.1.4","cross-env":"^5.2.0","@babel/cli":"^7.2.3","react-live":"^1.12.0","@babel/core":"^7.2.2","lint-staged":"^8.1.3","@emotion/core":"^10.0.6","@babel/register":"^7.0.0","@emotion/styled":"^10.0.6","@babel/preset-env":"^7.3.1","styled-components":"^4.1.3","@babel/preset-react":"^7.0.0","react-test-renderer":"^16.7.0","@babel/plugin-transform-runtime":"^7.2.0"},"_npmOperationalInternal":{"tmp":"tmp/styled-system_4.0.0-0_1550004667251_0.17643656608785419","host":"s3://npm-registry-packages"},"_id":"styled-system@4.0.0-0","version":"4.0.0-0"}