{"_id":"styled-theming","_rev":"6-ba7a566a17d8b5175ed007d195d2ae89","name":"styled-theming","description":"Create themes for your app using styled-components","dist-tags":{"latest":"2.2.0"},"versions":{"1.0.0":{"name":"styled-theming","description":"Create themes for your app using css-in-js","version":"1.0.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","styled-components":"^2.1.1"},"dependencies":{"create-react-class":"^15.6.0","prop-types":"^15.5.10","react":"^15.6.1"},"gitHead":"b440ac7351e059e477b03847cf47b0f5ff1404dc","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@1.0.0","_shasum":"fc5a1eec456d41ffa5230caa6dd4951e8a6ff489","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"fc5a1eec456d41ffa5230caa6dd4951e8a6ff489","tarball":"https://registry.npmjs.org/styled-theming/-/styled-theming-1.0.0.tgz","integrity":"sha512-JgYtQLbttik3HbtDpaA5yk0dAMJMM9DUdlX3OhnYw1sh8ZdN7R4QdsJEKOzmqJVvUGJYdzzrwU30kEg0M3svuQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHln9xOHKzBBXZkzpHShFyWl5FlMSMtgbbgnu20NK4/GAiEAlugKqv71omH/eIdXTXgxijx40lcMLimkOoml+yoU9CQ="}]},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-1.0.0.tgz_1501107391608_0.8730154412332922"}},"2.0.0":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.0.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","styled-components":"^2.1.1"},"gitHead":"c79bcc6629fe1795eeb00dc9ae8063a409514c3e","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@2.0.0","_shasum":"7c4dc40c0ca24fa3e1346b8f5d3b0f78f3407dd8","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"7c4dc40c0ca24fa3e1346b8f5d3b0f78f3407dd8","tarball":"https://registry.npmjs.org/styled-theming/-/styled-theming-2.0.0.tgz","integrity":"sha512-n37uMlThIxqGJlsA+k5VSKrr8EVkx/XmTwhz3zC3WYs3T8bnPx0i/14h3RYglLBorg+75jSYtk/U8s2OlRBBCQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCvgIf2OoMUJlU2wRxVbhx5p8puiwdXckGC/M/741VrwgIhAL5a06acobfCqj0nPYxIwOJoeBtPF9J8HIqCMUTm9Yfk"}]},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.0.0.tgz_1501555366641_0.269393939524889"}},"2.1.0":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.1.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug","build":"rollup -c && NODE_ENV=production rollup -c","prepublish":"yarn build"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","rollup":"^0.45.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-uglify":"^2.0.1","styled-components":"^2.1.1"},"gitHead":"684b4a374e40912ac6f059aea738887cc7b3205a","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@2.1.0","_shasum":"62eabe45babe7aec31b44b76033811cbb03b7df0","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"62eabe45babe7aec31b44b76033811cbb03b7df0","tarball":"https://registry.npmjs.org/styled-theming/-/styled-theming-2.1.0.tgz","integrity":"sha512-8fDzRiQJRtfwTrD1+ATysZrKdQVzCfLSbf2oQS3DsxlT2VDYpYr2pLMxj7r4cRkOqOKsL5WEQDWQkLddm8pTCQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQCMoNbWBxemjcXf5bRsYFQ0YXcARY1vIduFS12/d69QjAIgUuSL+K36SZnGDXCFKh9j++UsIaL6cWH0UJ/S/HvjuOY="}]},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.1.0.tgz_1501557712416_0.18326201848685741"}},"2.1.1":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.1.1","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/thejameskyle/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow","dist/styled-theming.js","dist/styled-theming.min.js"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug","build":"rm -rf dist && rollup -c && NODE_ENV=production rollup -c","prepublish":"yarn build"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","rollup":"^0.45.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-uglify":"^2.0.1","styled-components":"^2.1.1"},"gitHead":"785d6bf23073e0d391eb5f52e1b2dc2a471f95fb","bugs":{"url":"https://github.com/thejameskyle/styled-theming/issues"},"homepage":"https://github.com/thejameskyle/styled-theming#readme","_id":"styled-theming@2.1.1","_shasum":"a7059ee4a91410c9fd2f1d981d319d2dfd8128d3","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"a7059ee4a91410c9fd2f1d981d319d2dfd8128d3","tarball":"https://registry.npmjs.org/styled-theming/-/styled-theming-2.1.1.tgz","integrity":"sha512-Jic1fKW1iLHUpvXy81LbzFwh4+UzUDPeVgPYTHFu4fLbrfKbYYyG1eofDE1sWtppG/ntlSWna0tDStBZqQ8vtQ==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIDOU6MHMcjewAl9o6pwmtiQNJ4VHLgJ7OxHpFjebfQo8AiBAY7sYthluJaEUvuPKks/0qYcGGUF0CZo4a0PJ/BBKiw=="}]},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.1.1.tgz_1501557823128_0.3201335333287716"}},"2.2.0":{"name":"styled-theming","description":"Create themes for your app using styled-components","version":"2.2.0","main":"index.js","repository":{"type":"git","url":"git+ssh://git@github.com/styled-components/styled-theming.git"},"author":{"name":"James Kyle","email":"me@thejameskyle.com"},"license":"MIT","files":["index.js","index.js.flow","dist/styled-theming.js","dist/styled-theming.min.js"],"scripts":{"test":"jest","example":"browserify -t babelify example/index.js -o example/bundle.js --debug","build":"rm -rf dist && rollup -c && NODE_ENV=production rollup -c","prepublish":"yarn build"},"devDependencies":{"babel-plugin-transform-class-properties":"^6.24.1","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","babelify":"^7.3.0","browserify":"^14.4.0","flow-bin":"^0.51.0","jest":"^20.0.4","prop-types":"^15.5.10","react":"^15.6.1","react-dom":"^15.6.1","react-test-renderer":"^15.6.1","rollup":"^0.45.2","rollup-plugin-commonjs":"^8.0.2","rollup-plugin-uglify":"^2.0.1","styled-components":"^2.1.1"},"gitHead":"e2b04171fd229146804659da65833afe3dee287a","bugs":{"url":"https://github.com/styled-components/styled-theming/issues"},"homepage":"https://github.com/styled-components/styled-theming#readme","_id":"styled-theming@2.2.0","_shasum":"3084e43d40eaab4bc11ebafd3de04e3622fee37e","_from":".","_npmVersion":"3.10.8","_nodeVersion":"6.9.1","_npmUser":{"name":"thejameskyle","email":"me@thejameskyle.com"},"dist":{"shasum":"3084e43d40eaab4bc11ebafd3de04e3622fee37e","tarball":"https://registry.npmjs.org/styled-theming/-/styled-theming-2.2.0.tgz","integrity":"sha512-5nqUoCR/BJ6ziJ39xN/K5nmrzMn37BgPc693vgeQlO0hMaat/hJvJ0/u0vtm1ZQxU82sdltEbynqjkoYYMVwaA==","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICXHxhSyrRV+M3T56gXYkTod+5xVxxHXrEupvADjrqZ3AiBPFu7nXf33MY71/qHnGpe3ARuaRl3V5TtA2YEO2UepZw=="}]},"maintainers":[{"name":"thejameskyle","email":"me@thejameskyle.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/styled-theming-2.2.0.tgz_1505352823494_0.49431299744173884"}}},"readme":"# styled-theming\n\n> Create themes for your app using [styled-components](https://www.styled-components.com/)\n\nRead the [introductory blog post](http://thejameskyle.com/styled-theming.html)\n\n## Installation\n\n```sh\nyarn add styled-components styled-theming\n```\n\n## Example\n\n```js\nimport React from 'react';\nimport styled, {ThemeProvider} from 'styled-components';\nimport theme from 'styled-theming';\n\nconst boxBackgroundColor = theme('mode', {\n light: '#fff',\n dark: '#000',\n});\n\nconst Box = styled.div`\n background-color: ${boxBackgroundColor};\n`;\n\nexport default function App() {\n return (\n \n \n Hello World\n \n \n );\n}\n```\n\n## API\n\n### ``\n\nSee [styled-components docs](https://www.styled-components.com/docs/advanced#theming)\n\n`` is part of styled-components, but is required for styled-theming.\n\n```js\nimport {ThemeProvider} from 'styled-components';\n```\n\n`` accepts a single prop `theme` which you should pass an object\nwith either strings or getter functions. For example:\n\n```js\n\n modes.dark, size: sizes => sizes.large }}>\n```\n\nYou should generally set up a `` at the root of your app:\n\n```js\nfunction App() {\n return (\n \n {/* rest of your app */}\n \n );\n}\n```\n\n### `theme(name, values)`\n\nMost of your theming will be done with this function.\n\n`name` should match one of the keys in your `` theme.\n\n```js\n\n\ntheme('whatever', {...});\n```\n\n`values` should be an object where one of the keys will be selected by the\nvalue provided to `` theme.\n\n```js\n\n\n\ntheme('mode', {\n light: '...',\n dark: '...',\n});\n```\n\nThe values of this object can be any CSS value.\n\n```js\ntheme('mode', {\n light: '#fff',\n dark: '#000',\n});\n\ntheme('font', {\n sansSerif: '\"Helvetica Neue\", Helvetica, Arial, sans-serif',\n serif: 'Georgia, Times, \"Times New Roman\", serif',\n monoSpaced: 'Consolas, monaco, monospace',\n});\n```\n\nThese values can also be functions that return CSS values.\n\n```js\ntheme('mode', {\n light: props => props.theme.userProfileAccentColor.light,\n dark: props => props.theme.userProfileAccentColor.dark,\n});\n```\n\n`theme` will create a function that you can use as a value in\nstyled-component's `styled` function.\n\n```js\nimport styled from 'styled-components';\nimport theme from 'styled-theming';\n\nconst backgroundColor = theme('mode', {\n light: '#fff',\n dark: '#000',\n});\n\nconst Box = styled.div`\n background-color: ${backgroundColor}\n`;\n```\n\n### `theme.variants(name, prop, themes)`\n\nIt's often useful to create variants of the same component that are selected\nvia an additional prop.\n\nTo make this easier with theming, styled-theming provides a `theme.variants`\nfunction.\n\n```js\nimport styled from 'styled-components';\nimport theme from 'styled-theming';\n\nconst backgroundColor = theme.variants('variant', 'mode', {\n default: { light: 'gray', dark: 'darkgray' },\n primary: { light: 'blue', dark: 'darkblue' },\n success: { light: 'green', dark: 'darkgreen' },\n warning: { light: 'orange', dark: 'darkorange' },\n});\n\nconst Button = styled.button`\n background-color: ${backgroundColor};\n`;\n\nButton.propTypes = {\n variant: PropTypes.oneOf(['default', 'primary', 'success', 'warning'])\n};\n\nButton.defaultProps = {\n variant: 'default',\n};\n\n\n