{"_id":"@abstractpoint/subatomic","_rev":"2-290433174703a433188fa3d1e741282f","name":"@abstractpoint/subatomic","dist-tags":{"latest":"0.0.6"},"versions":{"0.0.5":{"name":"@abstractpoint/subatomic","version":"0.0.5","description":"Inline style props for emotion and styled-components","main":"emotion.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/gragland/subatomic.git"},"author":{"name":"Gabe Ragland","email":"gabe.ragland@gmail.com"},"bugs":{"url":"https://github.com/gragland/subatomic/issues"},"devDependencies":{"babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","webpack":"^3.12.0","camelcase-css":"^2.0.0","known-css-properties":"^0.6.1","react-html-attributes":"^1.4.2"},"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","prepare":"npm run build"},"keywords":["react","component","inline-styles","css-in-js","emotion","styled-components","design-systems"],"gitHead":"dd02bb8710c9602d8e7c4a37e29c76fea359cd5a","homepage":"https://github.com/gragland/subatomic#readme","_id":"@abstractpoint/subatomic@0.0.5","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-UNYn45NzHWYPWPA5zB6c9uld79ih53hELYGzfYqFWT/PLA8kKnsPFVhlslniQn7DGl9HC8Hr2+Bb66C8Nnv6oQ==","shasum":"17b93a06815b2a0907ef0f7ae9da0486d468c218","tarball":"https://registry.npmjs.org/@abstractpoint/subatomic/-/subatomic-0.0.5.tgz","fileCount":18,"unpackedSize":110876,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhIKpCRA9TVsSAnZWagAA0AsP/3o0s56xBtEy1Oml2MZ6\n542l6TeqnQwRNc+5XgQAZaFO7z03Sa4MuyyShGOuHsSBd6UZq7raLIOO+Oeg\n1C4j/m+8NsS2LNapFX+BW6Lg82ZaZ4ooCZlB2jLwcVj0h1G+fZadgYn+wKMz\n4NTvy29W/E3zpsaMCujrbFXxKeDb5LRN02Z1LOYLeVFJH+R1KN035d07/s9g\nwdipXy9E7FxE1TdU78fZeYdh1fjZ2TEmTMUrPt6WnYCkOgaIvptycWTs1dEj\n5+PFxdjIj70TNGZkm342/iRWnInmviFNfwyFKx/95cSki0erosgN2Oj1lpLg\nhwT3mRDm0jUpL/Dz8NoEbttpaN0qHxLy6qq9MlOlUA78u/mik41swDTnaiSr\nEL+9sw6JfsEoVOF4D+qpxxA6nS8FjCc+tCxDjkNwwmn2mIy9ydTkgl3Jq/RZ\nZ4Xn8UqCluE39YN1f5kSS7rrzf9RJcIM+duiVOOZAWXL67LaAD3H5P5rzklf\nolavySD4xJlRqghzgfI2Glxhwrr4CxAxaepcanyNpO0FDqYslouh9QEUNm22\n7PPA6mS7s1VX3SnrZs7jhG3YDpWGYzf3ddXEiHlDMOQQLLYk4ZxgtfBZsQJY\nuxP20KRiy+EYE5FlYtUz5Hnl0gyTzEvSL05GT8vpjVEGr34ed2feB0osGO5l\nlBXl\r\n=k8tF\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIAgv5EdAQigK/jMMr1YAXV/AsIqPnYwbl3qlTNH0y2aFAiEAhX6hN6osbmYZDmhcc1au1K4r0UGWEwp8GjeAamx/GrI="}]},"maintainers":[{"name":"abstractpoint","email":"contact@abstractpoint.co.uk"}],"_npmUser":{"name":"abstractpoint","email":"contact@abstractpoint.co.uk"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/subatomic_0.0.5_1568965288302_0.09153985751897853"},"_hasShrinkwrap":false},"0.0.6":{"name":"@abstractpoint/subatomic","version":"0.0.6","description":"Inline style props for emotion and styled-components","main":"emotion.js","license":"MIT","repository":{"type":"git","url":"git+https://github.com/gragland/subatomic.git"},"author":{"name":"Gabe Ragland","email":"gabe.ragland@gmail.com"},"bugs":{"url":"https://github.com/gragland/subatomic/issues"},"devDependencies":{"babel-core":"6.26.3","babel-loader":"7.1.4","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-plugin-transform-runtime":"^6.23.0","babel-preset-es2015":"6.24.1","babel-preset-react":"6.24.1","webpack":"^3.12.0","camelcase-css":"^2.0.0","known-css-properties":"^0.6.1","react-html-attributes":"^1.4.2"},"scripts":{"build":"NODE_ENV=production webpack --config webpack.config.js","prepare":"npm run build"},"keywords":["react","component","inline-styles","css-in-js","emotion","styled-components","design-systems"],"gitHead":"dd02bb8710c9602d8e7c4a37e29c76fea359cd5a","homepage":"https://github.com/gragland/subatomic#readme","_id":"@abstractpoint/subatomic@0.0.6","_nodeVersion":"10.16.0","_npmVersion":"6.9.0","dist":{"integrity":"sha512-Owo1OTfd78FtrHzzzszUDWJ2RGdwjESwOv29CydpzespXK3QU8cI7Ct+9uWsJtH3R7Rv0BtdhiAr7KRpMRRrjA==","shasum":"6b8fcd4f111bacdd9788f1e48a359a4653fc2a1a","tarball":"https://registry.npmjs.org/@abstractpoint/subatomic/-/subatomic-0.0.6.tgz","fileCount":18,"unpackedSize":111136,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdhINuCRA9TVsSAnZWagAAr5MP/jJEmbPQE9yXYqnG26n4\nkn0I6rFViJ4ll9PGvzpZJgt+rquvCri/FmeS7xuXlEv+6O9Dsd24aUcGyYQV\nz3a0ogcvikMF5Y8sy9bWIQW2AoWhjphopdKRJ3kF24zihnmIncCHkiaBsDGg\nV9o50TrgbVQSj175rsgWWJJB1iGXKd835ca1TVnP34uT/qh1VfknFXLDxwBO\nMwIeicbMuSYK8Pm3z9AjQjfD4dBM0JvPyL6ohekbY3VeXzQ+Q9dJxub1c1xk\noJgK65hahOZT8+JdT7YD29neTwslp7S18BJSpkTNruoxcM/zw/q9EXAf2/6X\nlxN4/ZrNMtyB2+nOdUKqnExlH6/k6r+BEVZ+lOka2LCHrvv8Ho19WYHnoY6U\nKIp/+3iceHJ+im0Nm9d7rHhoxI0mSVNi7rxLRgXybyv7FeGOv0KCm9eHzj87\nCu95oPWdzm1NSqs9f/p1kWnBb/D2XajwjL9lGoEMa4toc1GsYQiS5+5Fc3L8\nwmHJLfYrokyQThHXgoYUeXZharp154Rp1Fd3+oy1xx3LXM+u/IQFrnCL5PvK\n41hnI0omlcW/xXeRh46Vri0Qep+U3tGKYleFmMp8fgMNIrjf0Csee/c+SYOK\nfoYf3BEb3nSVb8aRLiv7XweJQeS3uMC7vtkJbDGvBTM7lxfo7+dHrmJcJqjg\nu5P4\r\n=1MxT\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIB97zhtak8UiIaLrbcu+fK2oJprLvUt0i/ZNAr+3s/SUAiEA+a4sICwrNIra4Vy2R3eQepurB31LRa8YZcUXfM+0h0I="}]},"maintainers":[{"name":"abstractpoint","email":"contact@abstractpoint.co.uk"}],"_npmUser":{"name":"abstractpoint","email":"contact@abstractpoint.co.uk"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/subatomic_0.0.6_1568965485805_0.09744459283773188"},"_hasShrinkwrap":false}},"time":{"created":"2019-09-20T07:41:28.023Z","0.0.5":"2019-09-20T07:41:28.426Z","modified":"2022-04-04T11:02:33.955Z","0.0.6":"2019-09-20T07:44:46.005Z"},"maintainers":[{"name":"abstractpoint","email":"contact@abstractpoint.co.uk"}],"description":"Inline style props for emotion and styled-components","homepage":"https://github.com/gragland/subatomic#readme","keywords":["react","component","inline-styles","css-in-js","emotion","styled-components","design-systems"],"repository":{"type":"git","url":"git+https://github.com/gragland/subatomic.git"},"author":{"name":"Gabe Ragland","email":"gabe.ragland@gmail.com"},"bugs":{"url":"https://github.com/gragland/subatomic/issues"},"license":"MIT","readme":"<div align=\"center\">\n   <img alt=\"subatomic\" src=\"https://i.imgur.com/XrZUfMV.png\" />\n</div>\n\n<div align=\"center\">\n  Inline style props for emotion and styled-components.<br/>\n  Spend less time naming things. <i>Iterate faster</i> ⚡️\n</div>\n\n<br/>\n\n---\n\n<br/>\n\nSubatomic allows you to style your React components inline so that you can spend more time writing styles and less time thinking of new component names. It integrates with emotion and styled-components so that you have the best of both worlds: The power of your favorite css-in-js library plus an inline style system to help you move fast and try out new ideas.\n\n## 💁 Basic Usage\n\n```\nnpm install --save subatomic\n```\n\nSupercharge any component by making `subatomic('element')` the root element.\n\n```jsx\nimport styled from 'emotion';\nimport subatomic from 'subatomic/emotion';\n\n// Our components\nconst Box = subatomic('div');\nconst H1 = subatomic('h1');\nconst Button = styled(subatomic('button'))`\n  color: white;\n  background-color: blue;\n  &:hover {\n   background-color: lightblue;\n  }\n`\n\n// Now we have style props! Tweak any style inline.\n<Box padding=\"20px\" backgroundColor=\"white\">\n  <H1 fontSize=\"48px\" fontWeight=\"700\">\n    My Awesome Website\n  </H1>\n  <Box fontSize=\"32px\" fontWeight=\"300\">\n    All other websites are significantly less awesome\n  </Box>\n  <Button backgroundColor=\"green\">\n    Get Started\n  </Button>\n</Box>\n```\n\n> If you use styled-components import from `subatomic/styled-components` instead.\n\nWhile that's all you need to know to get started, we also support [responsive styles](#-responsive-style-props), [custom prop logic](#-custom-style-props), [pseudo-classes](#-psuedo-classes) and [dynamic elements](#-dynamic-elements). Read on to see how each of these features would affect the code example above.\n\n## 📲 Responsive Style Props\n\nSo let's say you're happy with the awesome website header but everything is way too big on mobile. With just a few tweaks to our example above we can decrease padding and font size on smaller screens.\n```jsx\n<Box padding={[\"10px\", \"20px\"]} backgroundColor=\"white\">\n  <H1 fontSize={[\"32px\", \"48px\"]} fontWeight=\"700\">\n    My Awesome Website\n  </H1>\n  <Box fontSize={[\"24px\", \"32px\"]} fontWeight=\"300\">\n    All other websites are significantly less awesome\n  </Box>\n  <Button backgroundColor=\"green\">\n    Get Started\n  </Button>\n</Box>\n```\nAs you can see we're now passing an array of values to the `padding` and `fontSize` props. These map to an array of screen widths (or \"responsive breakpoints\"). Subatomic uses a default set of breakpoints, so the above example works without any extra configuration, but you can also override them right in your website theme.\n\n```jsx\n// theme.js\nexport default {\n  // These are the default breakpoints\n  breakpoints: ['576px', '768px', '992px', '1200px']\n}\n\n// App\nimport { ThemeProvider } from 'emotion-theming'\nimport theme from './theme.js'\n\nconst App = props => (\n  <ThemeProvider theme={theme}>\n    {/* ... */}\n  </ThemeProvider>\n)\n```\nOnce your theme is made available via `ThemeProvider` subatomic will automatically use those values instead. For more info about theming see the ThemeProvider docs for [emotion](https://emotion.sh/docs/theming) or [styled-components](https://www.styled-components.com/docs/advanced#theming).\n\n## 🌈 Custom Style Props\n\nWant to use shorter prop names or hook them into your design system? We make that easy as well. In this example we're using some custom props with shorter names (because less typing is cool) and the prop values now map to these locations in our theme: `theme.spacing[i]`, `theme.fontSizes[i]`, `theme.colors.green[2]`.\n\n```jsx\n<Box p={[2, 3]} bg=\"white\">\n  <H1 f={[5, 6]} fontWeight=\"700\">\n    My Awesome Website\n  </H1>\n  <Box f={[4, 5]} fontWeight=\"300\">\n    All other websites are significantly less awesome\n  </Box>\n  <Button bg=\"greens.2\">\n    Get Started\n  </Button>\n</Box>\n```\nIn the [configuration section](#-configuration) we'll show you how actually set this up, but the basic idea is that you can quickly define styles inline without giving the up the wonderful consistency of a design system.\n\n## 👻 Psuedo-classes\n\nUse any psuedo-class or pseudo-element by prepending it to the prop name. Here we modify `<Button>` so that its hover color fits better with its green background-color.\n\n```jsx\n<Button bg=\"greens.2\" hoverBg=\"greens.1\">\n   Get Started\n</Button>\n```\n> You can even chain multiple pseudo-classes together. For example: `hoverPlaceholderColor`\n\n## 🎩 Dynamic Elements\n\nSometimes you want to change the underlying element. You can do that with the `is` prop. In the example below we've renamed `H1` to `Heading` and now use the `is` prop to make the subheading an `h2` element. We also made `Button` an `a` element because we want it to be a link that looks like a button.\n\n```jsx\nconst Heading = subatomic('h1');\n\n<Box p={[2, 3]} bg=\"white\">\n  <Heading f={[5, 6]} fontWeight=\"700\">\n    My Awesome Website\n  </Heading>\n  <Heading is=\"h2\" f={[4, 5]} fontWeight=\"300\">\n    All other websites are significantly less awesome\n  </Heading>\n  <Button is=\"a\" href=\"/start\" bg=\"greens.2\" hoverBg=\"greens.1\">\n    Get Started\n  </Button>\n</Box>\n```\n> You can even pass a component. Example: `<Button is={RouterLink} to=\"/start\">Get Started</Button>`\n\n## 🤹‍♀️ Tips and Tricks\n\n### Composition Is Your Friend\n\nIf you decide you want to turn a chunk of code into a named component you can of course re-write using `styled()` syntax, but consider using composition instead and pass along props using `{...props}` (spread syntax).\n\n```jsx\n// Our example from above\n<Box p={[2, 3]} bg=\"white\">\n  <Heading f={[5, 6]} fontWeight=\"700\">\n    My Awesome Website\n  </Heading>\n  <Heading is=\"h2\" f={[4, 5]} fontWeight=\"300\">\n    All other websites are significantly less awesome\n  </Heading>\n  <Button is=\"a\" href=\"/start\" bg=\"greens.2\" hoverBg=\"greens.1\">\n    Get Started\n  </Button>\n</Box>\n\n// ⬇ Becomes a reusable component\n\nconst PageHeading ({ title, subtitle, ...props }) => (\n  <Box p={[2, 3]} bg=\"white\" {...props}>\n    <Heading f={[5, 6]} fontWeight=\"700\">\n      {title}\n    </Heading>\n    <Heading is=\"h2\" f={[4, 5]} fontWeight=\"300\">\n      {subtitle}\n    </Heading>\n  </Box>\n);\n\n// Lets also break the button out into its own component\nconst GreenButton = props => (\n  <Button \n    bg=\"greens.2\" \n    hoverBg=\"greens.1\" \n    {...props} \n  />;\n);\n\n// ⬇ Which is rendered like so\n\n<PageHeading\n  title=\"My Awesome Website\"\n  subtitle=\"All other websites are significantly less awesome\"\n  // We can still pass in style props\n  textAlign=\"center\"\n/>\n\n<GreenButton is=\"a\" href=\"/start\">\n  Get Started\n</GreenButton>\n```\n\n### Fall Back to Styled When Needed\n\nSubatomic builds on emotion and styled-components so that you always have their styling syntax to fall back on when needed. The goal is to help you work faster, not completely change your workflow. Here are some cases where you might want to just create a normal `styled()` component (or use emotion's `css` prop).\n\n* You need to do do css animations with `@keyframes`\n* Component has a lot of hover styles and props like `hoverPlaceholderColor` are getting unwieldy\n* Cases where you need more advanced media queries (such as using both min and max width in one rule)\n* You'd rather just use subatomic for spacing and layout components\n\n## 🤖 Theme Configuration\n\nSubatomic will automatically use the following [default theme](https://github.com/gragland/subatomic/blob/master/themes/default.js) which comes with a basic style system and some useful custom props. See the inline comments below for an explanation of each property and a code example at the bottom that shows how to extend this theme to add your own style system and props.\n\n```js\nexport default {\n  breakpoints: ['576px', '768px', '992px', '1200px'],\n  space: [0, 4, 8, 16, 32, 64, 128, 256, 512 ],\n  fontSizes: [12, 14, 16, 20, 24, 32, 48, 64, 72],\n  // Custom style props go in the props object\n  props: {\n    f: {\n      // Where to find values in theme\n      themeKey: 'fontSizes',\n      // Default unit if none specified\n      defaultUnit: 'px',\n      // Resulting css property\n      style: 'fontSize'\n    },\n    color: {\n      // Extend theme and add colors object\n      themeKey: 'colors',\n      style: 'color'\n    },\n    bg: {\n      themeKey: 'colors',\n      style: 'backgroundColor'\n    },\n    borderColor: {\n      themeKey: 'colors',\n      style: 'borderColor'\n    },\n    d: {\n      style: 'display'\n    },\n    p: {\n      themeKey: 'space',\n      defaultUnit: 'px',\n      style: 'padding',\n      // Directional variations\n      variations: {\n        pt: 'paddingTop',\n        pr: 'paddingRight',\n        pb: 'paddingBottom',\n        pl: 'paddingLeft',\n        px: ['paddingLeft', 'paddingRight'],\n        py: ['paddingTop', 'paddingBottom']\n      }\n    },\n    m: {\n      themeKey: 'space',\n      defaultUnit: 'px',\n      style: 'margin',\n      variations: {\n        mt: 'marginTop',\n        mr: 'marginRight',\n        mb: 'marginBottom',\n        ml: 'marginLeft',\n        mx: ['marginLeft', 'marginRight'],\n        my: ['marginTop', 'marginBottom']\n      }\n    },\n    h: {\n      style: 'height'\n    },\n    // Advanced width prop\n    w: {\n      // Style is a function instead of a string\n      style: value => {\n        let width = value;\n        // If less than 1 make it a fraction of 100% (1/3 = 33.33...%, etc)\n        // Nice for column widths (<Row><Col w={1/3}><Col w={2/3}></Row>)\n        if (isNumber(width) && width <= 1) {\n          width = `${width * 100}%`;\n        }\n        return {\n          width: width\n        };\n      }\n    }\n  }\n}\n```\n### Extending the Default Theme\nHere's how you'd extend the above theme to add a colors object for the default colors prop to read from, as well as a custom prop for dealing with fonts.\n\n```js\nimport defaultTheme from \"subatomic/themes/default\";\n\nexport default {\n  breakpoints: defaultTheme.breakpoints,\n  space: defaultTheme.space,\n  fontSizes: defaultTheme.fontSizes,\n  fonts: {\n    primary: 'avenir, -apple-system, BlinkMacSystemFont',\n    monospace: '\"SF Mono\", \"Roboto Mono\", Menlo, monospace'\n  },\n  colors: { \n    greens: ['#84e47b', '#11cc00', '#0da200'] \n  },\n  props: {\n    ...defaultTheme.props,\n    // And then add any other custom props you want\n    fontFamily: {\n      themeKey: 'fonts',\n      style: 'fontFamily'\n    },\n  }\n};\n\n// App\nimport { ThemeProvider } from 'emotion-theming'\nimport theme from './theme.js'\n\nconst App = props => (\n  <ThemeProvider theme={theme}>\n    {/* ... */}\n  </ThemeProvider>\n)\n```\nAny theme you make available via `ThemeProvider` will override the default theme, so you can either extend (merge in the parts you want) or write your own custom theme.\n\n> Interested in helping us add new themes that mimic the look and utility classes of various UI kits like tachyons, bulma, etc? Feel free to add to our themes directory in a pull request.\n\n\n\n## 💡 Inspiration\n\nSubatomic was inspired by these excellent projects:\n\n* [jsxstyle](https://github.com/smyte/jsxstyle)\n* [styled-system](https://github.com/jxnblk/styled-system)\n","readmeFilename":"README.md"}