{"dist":{"shasum":"a7b457aed79c8da91378242f1add6ac1b8bd0965","tarball":"https://registry.npmjs.org/@styled-system/css/-/css-5.0.0-7.tgz","fileCount":5,"integrity":"sha512-9JtB6oDZ2e5i77def08x/gfxZfB6frWRwPZZMAQ18kPMHi3KPH3DRtU1e2rY+KecVh+txbpjwN+mj2w9YzEhSw==","signatures":[{"sig":"MEQCICPgkv9JdTve17QVBdMFIXaWB5TzOxJrzM6DKLGKTi53AiAFxyF3FCynO1HQKpk7yHLuNSki1BFrrb0Ar6whS2Vp4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":13659,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7JWsCRA9TVsSAnZWagAAh6QP/iu2T1RYqvCJDo4Jh3Mg\nqU+J70FoqUfpT1ysvRVdQlF3Darp5a1M4MWHKc6C7YHfDxh8PUzgjaw/zB68\nLPcy8SkJQU8/R9npBZTu2l3dtO/bYsxnmECpE7USa8vdzdpZw9+ZLy1m2nDR\nUpGSrfIuIcVPUgDGw7y0MOTjapFs2X4Y1FwbAxTEoF/k3x8ICoVmOaeCsjVy\nhimy4tZE4bzby2w2sMLScmxA5tEfq3uGuH3OdjfU+lK1yXGxc/dukEjjEOCk\neNExsX55UpUWiLU8AFbv6E+d4DbugxyITtsxIM+lAYtuYtrmws4bHxf79OXY\nQPRW00TFhzEfXxzUmGdt6tJledUAYqnzSr/UjQruxvUVmiUqYDUw9NpZVGEb\niKTvJYhZWJZITCNvT4wRN4WbAGTnwNQWHJ+WDsZvll1k4ovqr5njvLeIF59T\nVkhRYCycW8QqUZ4Eyjtm2i6l7Vx98++GFru1LzOi/PX3x/GfmI8tLHcPQZ+6\nRegyFYxXZebLj38FvawGXbkS3EZfy+JL2+h6s23E+BqnE7ix+9DPdQQTrvCh\nccli6WeoCglSgOL0udUnyXzDZeRjnV2WubI4bm/kSF+D/pwpOygo36ZBVE0u\n4IyUV2CvzdUfDwe2EMyb6q2xedpPPP5Mix5y9Q2C475WdumVJzsFFFRLIN9i\nvrAJ\r\n=fBK4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/index.js","name":"@styled-system/css","author":{"name":"Brent Jackson","email":"jxnblk@gmail.com"},"module":"dist/index.esm.js","readme":"\n# @styled-system/css\n\nStyled System for the `css` prop\n\n```sh\nnpm i @styled-system/css\n```\n\nStyled System CSS lets you write style objects with responsive, theme-aware Styled System shortcuts.\n\n```jsx\n// usage with the css prop\nimport React from 'react'\nimport css from '@styled-system/css'\n\nconst Beep = props =>\n  <div\n    {...props}\n    css={css({\n      fontSize: [4, 5, 6],\n      color: 'primary',\n    })}\n  />\n```\n\n```js\n// usage with a styled HOC\nimport styled from '@emotion/styled'\nimport css from '@styled-system/css'\n\nconst Boop = styled('div')(\n  css({\n    fontSize: [ 4, 5, 6 ],\n    color: 'primary',\n    bg: 'gray',\n    '&:hover': {\n      color: 'secondary',\n    },\n  })\n)\n```\n\n## Theme Keys\n\nThe following keys in your style object will work the same as Styled System props, pulling values from your `theme` object.\n\nProperty  | Theme Key\n---|---\n`fontFamily` | `fonts`\n`fontSize` | `fontSizes`\n`fontWeight` | `fontWeights`\n`lineHeight` | `lineHeights`\n`letterSpacing` | `letterSpacings`\n`color` | `colors`\n`backgroundColor`, `bg` | `colors`\n`margin`, `m` | `space`\n`marginTop`, `mt` | `space`\n`marginRight`, `mr` | `space`\n`marginBottom`, `mb` | `space`\n`marginLeft`, `ml` | `space`\n`marginX`, `mx` | `space`\n`marginY`, `my` | `space`\n`padding`, `p` | `space`\n`paddingTop`, `pt` | `space`\n`paddingRight`, `pr` | `space`\n`paddingBottom`, `pb` | `space`\n`paddingLeft`, `pl` | `space`\n`paddingX`, `px` | `space`\n`paddingY`, `py` | `space`\n`border` | `borders`\n`borderTop` | `borders`\n`borderRight` | `borders`\n`borderBottom` | `borders`\n`borderLeft` | `borders`\n`borderColor` | `colors`\n`borderWidth` | `borderWidths`\n`borderStyle` | `borderStyles`\n`borderRadius` | `radii`\n`boxShadow` | `shadows`\n`zIndex` | `zIndices`\n`width` | `sizes`\n`minWidth` | `sizes`\n`maxWidth` | `sizes`\n`height` | `sizes`\n`minHeight` | `sizes`\n`maxHeight` | `sizes`\n\n## Responsive Arrays\n\nAll CSS properties accept arrays as values for responsive styles.\n\n```jsx\n<div\n  css={css({\n    fontSize: [ 4, 5, 6 ],\n  })}\n/>\n```\n\nIn this example, `fontSize` accepts an array, picking up values from the `theme.fontSizes` scale, and `borderBottom` is passed through as plain CSS.\n\n```jsx\n<div\n  css={css({\n    // Styled System key\n    fontSize: [ 3, 4, 5 ],\n    // CSS property\n    borderBottom: '2px solid tomato',\n  })}\n/>\n```\n\nMIT License\n","gitHead":"e1e240e1dc5ca903cfbf0dc0527a19e0cc6ff749","license":"MIT","scripts":{"prepare":"mkdir -p dist && npm run build:cjs && npm run build:esm","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.esm.js"},"_npmUser":{"name":"jxnblk","email":"jxnblk@gmail.com"},"keywords":["css","css-in-js","emotion","styled-components","style","react"],"_npmVersion":"lerna/3.14.1/node@v10.9.0+x64 (darwin)","description":"Styled System for the `css` prop","directories":{},"maintainers":[{"name":"jxnblk","email":"jxnblk@gmail.com"}],"sideEffects":false,"_nodeVersion":"10.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","devDependencies":{"@babel/cli":"^7.4.4"},"_npmOperationalInternal":{"tmp":"tmp/css_5.0.0-7_1559008683378_0.4800234419259486","host":"s3://npm-registry-packages"},"_id":"@styled-system/css@5.0.0-7","version":"5.0.0-7"}