{"_id":"@berikiushi/zen-styled","_rev":"3-a1e909eb76c459006236c5cb7aa01939","name":"@berikiushi/zen-styled","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@berikiushi/zen-styled","version":"1.0.0","description":"Style props based on Emmet css shortcuts","main":"lib/index.js","author":{"name":"Yury Lysov","email":"berikiushi@gmail.com"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","styled-components","emmet"],"scripts":{"prepublish":"rollup -c"},"peerDependencies":{"styled-components":">=5.0.0"},"devDependencies":{"@babel/core":"^7.9.0","@babel/preset-env":"^7.9.5","rollup":"^2.6.1","rollup-plugin-babel":"^4.4.0"},"gitHead":"f44d2745cccac451603ca2b610ca365529184631","_id":"@berikiushi/zen-styled@1.0.0","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-JKPAqjucwaudsTdMZK1P4JlUsb9R3mCS921iJGD6ZNgITh1GaGHOmYhgtiGfg+fppFNVQgTllFDUYKMZlS9JkQ==","shasum":"0fb3c14a5751924433159efab1332fb56e8223dd","tarball":"https://registry.npmjs.org/@berikiushi/zen-styled/-/zen-styled-1.0.0.tgz","fileCount":3,"unpackedSize":7604,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelihxCRA9TVsSAnZWagAAC8YQAJKs1VqXegmiX5k9PHq9\nl5EqgJMLkK+0lRGwj7DIxD1j0JDLigCKAq2iFfn43E67DlrbNVvB6aTOTTNM\nQvGBw42i6uCOf5YyZuTCfrSyF+QIix6/y5hGrnW1TYJVt/Rk8yT+2lrso7nT\nkO0IWNPU3x89weXRx1s2ac47kA4MkViJWdqIX1l57UgbmvQI6V3S6XdztKOe\nYTFyndijV++dwhSpvdtYaSZjTyf6mbThzjU7hbnxBqlJdu5dLmfkqamYyYlO\nED+DpQbM8H5u79IR9LcH9JZE6+7Gasy81kbg3vla8eIflzyxvWCtXCRQ7sWh\nuF6gbfMHXCHTEWpTtINuBEThjWb9Hz+MIxWJAfo1BpaikiwY+gX94Kl+Y8RW\nf3M2WQFuBCwN1JNXGTT/bKUeSHqRvrePnHJ1kz/fEqgZcCaXWmA0rSUxwlX9\nYIhTTgbcmDXmBn6Cj5AtBgaFzvNLhH9i+mY4IeMTsZfS+Sp1FiBicNKILYPY\n+QRJ0wh4Uz8g3ma5CsRx++Rwn2PhLn8aX3Lgy5aNCK0Sw7DjZ35UPycZ+GUx\nGgE1RcIuIOB8hTnyVYCk0+hgQBBucaJE2JPZKpZjefS6FztpoJhSyOynvyxp\nSsidnxMspMGEp0BsY0Ag8K51XrypdqtJSfxxtSJFwKwB2r3WN4z9Fv9Yp/gJ\nKPtD\r\n=Z/R0\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIC3DxJlWcSYkzS9+o4uRDBDD1E7Q2ZMA7olBNt3rejuzAiEAkFRjUqpM3jPwoLQ8XLJqZeroH+2hlyXotYeOkhcK5U4="}]},"maintainers":[{"name":"berikiushi","email":"berikiushi@gmail.com"}],"_npmUser":{"name":"berikiushi","email":"berikiushi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/zen-styled_1.0.0_1586899057344_0.41311753201535106"},"_hasShrinkwrap":false},"1.0.1":{"name":"@berikiushi/zen-styled","version":"1.0.1","description":"Style props based on Emmet css shortcuts","main":"lib/index.js","author":{"name":"Yury Lysov","email":"berikiushi@gmail.com"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","styled-components","emmet"],"scripts":{"prepublish":"rollup -c"},"peerDependencies":{"styled-components":">=5.0.0"},"devDependencies":{"@babel/core":"^7.9.0","@babel/preset-env":"^7.9.5","rollup":"^2.6.1","rollup-plugin-babel":"^4.4.0"},"repository":{"type":"git","url":"git+https://github.com/berikiushi/zen-styled.git"},"gitHead":"a1546b4766ead1d477e8ad7686eb63b6223b4586","bugs":{"url":"https://github.com/berikiushi/zen-styled/issues"},"homepage":"https://github.com/berikiushi/zen-styled#readme","_id":"@berikiushi/zen-styled@1.0.1","_nodeVersion":"10.19.0","_npmVersion":"6.13.4","dist":{"integrity":"sha512-1E1HRJltJ2KLX7ivmW/2TWXN/wAA/vPvwtIw4N3vLQ5FEmcpr+fxiUuGs2XaUjiKYQoF2ItXW75O2326qGoDjw==","shasum":"9b94d8ef037167eef56a1ce33b7d22f65ae84f47","tarball":"https://registry.npmjs.org/@berikiushi/zen-styled/-/zen-styled-1.0.1.tgz","fileCount":3,"unpackedSize":7732,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelittCRA9TVsSAnZWagAAl7AP/iyKqYX+JukWzclAIFK5\nsTHxvKr3zn8YPBqx7jS1HAOdUN3OlaOmL8P8bGyHvGaD3GYatb9bj+hHWYMh\nAN3xzJOB6jlkCyc4R8mCIfHZ+97NSgvuvToJe0+RSyLqmwyIwUaxxvgD6aJd\nwvpOSaTKDw6ZUjuj4Cqfs7wVgJZDso9yUrFWO7Zp2xb4AhJxoFRc146iuqkT\nNBsA1BkR4vhFiznEIeuvtwpEKPb4u+RTwUB9xfqN4J+yFEZi5vSMxjYazSQD\njs8utli/mnJ6zjjh9egljbBa45vlmI3Ec3ISkk0vC5PAhyIPMX4uUVVGfIhd\nMOSRKnJQ61c5gpJlepSZBZYrseRduIfUq3pMIkyXV1Rx2/FVOdQ/Y9SEpsK4\nvqiBhGzXxfRvfmJhJ4LU2WLUkJY/1RJsRTT8ofEkamyXiX1VV98J1xnOtqGp\nNjWFOeRknU2R5MdrCMQ4Hs5PqeiEQ1mFIQIRNi4RQCMVX987+wy9lCkhf1gg\n5crRfW+FFTG2ydCw+B+CaD0hM6TqsgJbVO3bcrV2vrGzwpQUdn4mpISS7mQQ\nS/zlVcvEV8Bhw/1AWOgRXWKm0lZTXAK3cnmWBOzLfBKB1KeIsvewD3KnigWp\n7IxCAMuy2kpuFBMM2sBpZ/GRiycslNhtOo8IOXvP747wCHSNEzf5c3ZRPjof\nm5CH\r\n=1NHV\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDX6DCaEaj6ZQB2VDQhk3Y/tf6SKTilSGA5j4mlOH1vqAIgBgwX5eQK9p+wWeYgNV/dhUPFEsQVhLNG0Ob7W6/rXNk="}]},"maintainers":[{"name":"berikiushi","email":"berikiushi@gmail.com"}],"_npmUser":{"name":"berikiushi","email":"berikiushi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/zen-styled_1.0.1_1586899820561_0.5856601592074884"},"_hasShrinkwrap":false},"1.0.2":{"name":"@berikiushi/zen-styled","version":"1.0.2","description":"Style props inspired by Emmet css shortcuts and styled-system","main":"lib/index.js","author":{"name":"Yury Lysov","email":"berikiushi@gmail.com"},"license":"MIT","publishConfig":{"access":"public"},"keywords":["react","styled-components","emmet"],"scripts":{"prepublish":"rollup -c"},"peerDependencies":{"styled-components":">=5.1.0"},"devDependencies":{"@babel/core":"^7.10.5","@babel/preset-env":"^7.10.4","rollup":"^2.23.0","rollup-plugin-babel":"^4.4.0"},"repository":{"type":"git","url":"git+https://github.com/berikiushi/zen-styled.git"},"gitHead":"6761e02688c8ef9b0f9c97d9fea0d91371e151d8","bugs":{"url":"https://github.com/berikiushi/zen-styled/issues"},"homepage":"https://github.com/berikiushi/zen-styled#readme","_id":"@berikiushi/zen-styled@1.0.2","_nodeVersion":"12.18.0","_npmVersion":"6.14.4","dist":{"integrity":"sha512-ac4bLzvv6N7KG1QTJSKS6no8gys8BupAXQQOHwhKKqleOzmgb0uXPJ4LrdY97voCnNqiLC7lVspoSb8+qIyQFg==","shasum":"43f748a3b785bdc7f1769fb6a85e28d4c30b28bf","tarball":"https://registry.npmjs.org/@berikiushi/zen-styled/-/zen-styled-1.0.2.tgz","fileCount":3,"unpackedSize":16804,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0NTCRA9TVsSAnZWagAAkBoP/RCmTCxAQVOEqPh1vbCZ\nfw8CLqmAZPXZbAeJD+aMYrZy15MR21DXwB129YdqimGx9wqtQYeiOVMFx8fw\nuVeAxZAvSNbfAMIuIQ7iqn92UeumGmgoSBccaWQRHxAZDenaNziTZvvweMAp\n56LBQjYN+LZV3FdUvYjzTfYHrSdbzs7ukfSe7sHmLf5Y6Xlfvm+6PAhlHLaA\nmGn02oNzkrorc2irjlOrKQ8JrYRXwcwut6/vUPORdHU96xHL21uNLAst084U\nb7oKL5LoAf9TX/y6zOGVtKs6NKS2oe+UncL77hBMJnx6ryPqiBc4YGpP5g1B\nMMVEncC2axxbXgshLueLN5IKiplVY4exPa1JYZNE2FVHeuUnKYw4lFJ7TDLb\nk79rkawyy2bQjauDI1TcEhczS/Ws6AsZaOGLtLwsYkqe2wQrLcXsih2PWEWR\nvvI4xmD3wYEsRTZ5ydKQp6PPr9WeGDUS/IYbL0bYq6jRzTXHmNTjmsKj0OMM\nli8H6OnrORI33Uw6Q1/y3Axx2YzfrJEfo+NMwxYVzKzjl7vlLWt8s9n0aD6C\nH41E+z4HSDali9sYrv8zzvUzcnxlb0FsSNWHk//8sG/z8Ed4eZklD6P+mYgp\nEBfh4atlq+MWOz8l3m96OkzV0wJPrXaH938W5xHY0H4twXFuHKK1qjykgxI4\nNCzk\r\n=Z72d\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCRgyWVefRrDe4Htm1eClFNGrQCyIqO04fXL+qqoQd/+AIhAI4O+XYQ3FdLmw+TUll07smrn79ESuORG2x8DitcREyO"}]},"maintainers":[{"name":"berikiushi","email":"berikiushi@gmail.com"}],"_npmUser":{"name":"berikiushi","email":"berikiushi@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/zen-styled_1.0.2_1595622227459_0.3694639478444486"},"_hasShrinkwrap":false}},"time":{"created":"2020-04-14T21:17:37.304Z","1.0.0":"2020-04-14T21:17:37.568Z","modified":"2022-04-04T18:28:58.734Z","1.0.1":"2020-04-14T21:30:20.701Z","1.0.2":"2020-07-24T20:23:47.575Z"},"maintainers":[{"name":"berikiushi","email":"berikiushi@gmail.com"}],"description":"Style props inspired by Emmet css shortcuts and styled-system","keywords":["react","styled-components","emmet"],"author":{"name":"Yury Lysov","email":"berikiushi@gmail.com"},"license":"MIT","readme":"# zen-styled\n\nStyle props inspired by Emmet css shortcuts and styled-system.\n\n## Usage\n\n```jsx\nimport styled from 'styled-components';\nimport { margin, padding, color, pseudo } from '@berikiushi/zen-styled';\n\nconst Box = styled.div`\n  ${margin}\n  ${padding}\n  ${color}\n  ${pseudo}\n`;\n\nexport default Box;\n```\n\nEach style function create set of component props.\n\n```jsx\n<Box mb=\"16px\" />\n// margin-bottom: 16px;\n\n<Box p=\"8px 16px\" />\n// padding: 8px 16px;\n\n<Box c=\"#f49\" />\n// color: #f49;\n\n<Box bgc=\"#f49\" />\n// background-color: #f49;\n\n<Box _hover={{ backgroundColor: '#f49' }} />\n// &:hover { background-color: #f49; }\n```\n\n## Abbreviations\n\n```jsx\n// layout\nimport { layout } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property   |\n| ----------------- | -------------- |\n| d                 | display        |\n| v                 | visibility     |\n| fl                | float          |\n| va                | vertical-align |\n| ov                | overflow       |\n| ovx               | overflow-x     |\n| ovy               | overflow-y     |\n| ovs               | overflow-style |\n\n```jsx\n// flexbox\nimport { flex } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property    |\n| ----------------- | --------------- |\n| fxd               | flex-direction  |\n| fxw               | flex-wrap       |\n| jc                | justify-content |\n| ali               | align-items     |\n| alc               | align-content   |\n| ord               | order           |\n| fxg               | flex-grow       |\n| fxsh              | flex-shrink     |\n| fxb               | flex-basis      |\n| als               | align-self      |\n\n```jsx\n// positioning\nimport { position } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property |\n| ----------------- | ------------ |\n| pos               | position     |\n| t                 | top          |\n| r                 | right        |\n| b                 | bottom       |\n| l                 | left         |\n| z                 | z-index      |\n\n```jsx\n// sizing\nimport { size } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property |\n| ----------------- | ------------ |\n| bxz               | box-sizing   |\n| w                 | width        |\n| h                 | height       |\n| maw               | max-width    |\n| mah               | max-height   |\n| miw               | min-width    |\n| mih               | min-height   |\n\n```jsx\n// margins\nimport { margin } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property  |\n| ----------------- | ------------- |\n| m                 | margin        |\n| mt                | margin-top    |\n| mr                | margin-right  |\n| mb                | margin-bottom |\n| ml                | margin-left   |\n\n```jsx\n// paddings\nimport { padding } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property   |\n| ----------------- | -------------- |\n| p                 | padding        |\n| pt                | padding-top    |\n| pr                | padding-right  |\n| pb                | padding-bottom |\n| pl                | padding-left   |\n\n```jsx\n// colors\nimport { color } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property     |\n| ----------------- | ---------------- |\n| c                 | color            |\n| bgc               | background-color |\n| op                | opacity          |\n\n```jsx\n// background\nimport { background } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property          |\n| ----------------- | --------------------- |\n| bgi               | background-image      |\n| bgp               | background-position   |\n| bgpx              | background-position-x |\n| bgpy              | background-position-y |\n| bgr               | background-repeat     |\n| bgsz              | background-size       |\n| bga               | background-attachment |\n| bgo               | background-origin     |\n\n```jsx\n// typography\nimport { font } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property    |\n| ----------------- | --------------- |\n| ff                | font-family     |\n| fz                | font-size       |\n| fw                | font-weight     |\n| fs                | font-style      |\n| fv                | font-variant    |\n| lh                | line-height     |\n| lts               | letter-spacing  |\n| ta                | text-align      |\n| td                | text-decoration |\n| ti                | text-indent     |\n| tt                | text-transform  |\n| tov               | text-overflow   |\n| whs               | white-space     |\n| wow               | word-wrap       |\n\n```jsx\n// borders\nimport { border } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property  |\n| ----------------- | ------------- |\n| bd                | border        |\n| bdw               | border-width  |\n| bds               | border-style  |\n| bdc               | border-color  |\n| bt                | border-top    |\n| br                | border-right  |\n| bb                | border-bottom |\n| bl                | border-left   |\n| bdr               | border-radius |\n\n```jsx\n// shadows\nimport { shadow } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property |\n| ----------------- | ------------ |\n| bxsh              | boxShadow    |\n| tsh               | textShadow   |\n\n```jsx\n// list style\nimport { list } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property        |\n| ----------------- | ------------------- |\n| lis               | list-style          |\n| lisp              | list-style-position |\n| list              | listStyle-type      |\n| lisi              | listStyle-image     |\n\n```jsx\n// animations\nimport { animation } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property              |\n| ----------------- | ------------------------- |\n| anim              | animation                 |\n| animdel           | animation-delay           |\n| animdir           | animation-direction       |\n| animdur           | animation-duration        |\n| animfm            | animation-fill-mode       |\n| animic            | animation-iteration-count |\n| animn             | animation-name            |\n| animps            | animation-play-state      |\n| animtf            | animation-timing-function |\n\n```jsx\n// transform\nimport { transform } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property     |\n| ----------------- | ---------------- |\n| trf               | transform        |\n| trfo              | transform-origin |\n| trfs              | transform-style  |\n\n```jsx\n// transitions\nimport { transition } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property               |\n| ----------------- | -------------------------- |\n| trs               | transition                 |\n| trsde             | transition-delay           |\n| trsdu             | transition-duration        |\n| trsp              | transition-property        |\n| trstf             | transition-timing-function |\n\n```jsx\n// columns\nimport { columns } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property |\n| ----------------- | ------------ |\n| colm              | columns      |\n| colmc             | column-count |\n| colmf             | column-fill  |\n| colmg             | column-gap   |\n| colmr             | column-rule  |\n| colms             | column-span  |\n| colmw             | column-width |\n\n```jsx\n// interactions\nimport { interaction } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property   |\n| ----------------- | -------------- |\n| cur               | cursor         |\n| ol                | outline        |\n| us                | user-select    |\n| pi                | pointer-events |\n\n```jsx\n// pseudo classes/elements\nimport { pseudo } from '@berikiushi/zen-styled';\n```\n\n| prop abbreviation | css property         |\n| ----------------- | -------------------- |\n| \\_hover           | :hover               |\n| \\_focus           | :focus               |\n| \\_active          | :active              |\n| \\_visited         | :visited             |\n| \\_disabled        | :disabled            |\n| \\_checked         | :checked             |\n| \\_empty           | :empty               |\n| \\_readOnly        | :read-only           |\n| \\_required        | :required            |\n| \\_first           | :first-of-type       |\n| \\_last            | :last-of-type        |\n| \\_notFirst        | :not(:first-of-type) |\n| \\_notLast         | :not(:last-of-type)  |\n| \\_even            | :nth-of-type(even)   |\n| \\_odd             | :nth-of-type(odd)    |\n| \\_before          | ::before             |\n| \\_after           | ::after              |\n| \\_firstLetter     | ::first-letter       |\n| \\_firstLine       | ::first-line         |\n| \\_selection       | ::selection          |\n| \\_placeholder     | ::placeholder        |\n\n## Custom Style Props\n\nYou can create your own sets of Style Props.\n\n```jsx\nimport styled from 'styled-components';\nimport { create } from '@berikiushi/zen-styled';\n\nconst customStyleProps = create({\n  d: 'display',\n  pos: 'position',\n  t: 'top',\n  r: 'right',\n  b: 'bottom',\n  l: 'left',\n  w: 'width',\n  h: 'height',\n  m: 'margin',\n  p: 'padding',\n});\n\nconst Box = styled.div`\n  ${customStyleProps}\n`;\n\nexport default Box;\n```\n\n## Custom Pseudo Props\n\nYou can create your own sets of Pseudo Props.\n\n```jsx\nimport styled from 'styled-components';\nimport { createPseudo } from '@berikiushi/zen-styled';\n\nconst customPseudoProps = create({\n  _f: ':first-child',\n  _l: ':last-child',\n});\n\nconst Box = styled.div`\n  ${customPseudoProps}\n`;\n\nexport default Box;\n```\n","readmeFilename":"README.md","homepage":"https://github.com/berikiushi/zen-styled#readme","repository":{"type":"git","url":"git+https://github.com/berikiushi/zen-styled.git"},"bugs":{"url":"https://github.com/berikiushi/zen-styled/issues"}}