Init commit

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": [["es2015", { "loose": true }], "react"],
+  "plugins": ["transform-class-properties"]
+}

.flowconfig

@@ -0,0 +1,10 @@
+[ignore]
+<PROJECT_ROOT>/node_modules/styled-components/.*
+
+[include]
+
+[libs]
+
+[options]
+
+[lints]

.gitignore

@@ -0,0 +1,3 @@
+node_modules
+*.log
+example/bundle.js

LICENSE

@@ -0,0 +1,19 @@
+Copyright (c) 2017-present James Kyle <me@thejameskyle.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,97 @@
+# styled-theming
+
+> Create themes for your app using css-in-js
+
+## Installation
+
+```sh
+yarn add styled-theming
+```
+
+## API
+
+### `createTheme(theme)`
+
+Create a theme for a `<ThemeProvider>`.
+
+`theme` can either be a `string` or a `function` that selects a theme from a set:
+
+```
+import {createTheme} from 'styled-theming';
+import {ThemeProvider} from 'styled-components';
+
+<ThemeProvider theme={createTheme('dark')}>
+<ThemeProvider theme={createTheme(themes => themes.dark}>
+```
+
+### `toThemeSet(themes)`
+
+Create a named set of CSS values where the keys are the names of your themes.
+
+```js
+import {toThemeSet} from 'styled-theming';
+import styled from 'styled-components';
+
+const backgroundColor = toThemeSet({
+  light: '#fff',
+  dark: '#000'
+});
+
+const Page = styled.div`
+  background-color: ${backgroundColor};
+`;
+```
+
+This will return a function that accepts props with a `theme` key that should
+be the theme from `createTheme`. As long as you set up a tool like
+styled-components properly it should just work.
+
+```js
+backgroundColor({ theme: createTheme('dark') });
+```
+
+Additionally, the returned value will have all the key-value pairs from your
+theme set as properties.
+
+```js
+backgroundColor.light === '#fff';
+backgroundColor.dark === '#000';
+```
+
+### `toVariantThemeSet(key, variants)`
+
+It is often useful to have different variants of your components. You could
+implement this yourself on top of `toThemeSet`, but since it is so common
+there's also a provided `toVariantThemeSet`.
+
+Provide a key to use for switching the variant and a named set of themes.
+
+```js
+import styled from 'styled-components';
+import {toVariantThemeSet} from 'styled-theming';
+
+const headingColor = toVariantThemeSet('variant', {
+  default: { light: '#000', dark: '#fff' },
+  fancy: { light: '#f0f', dark: '#f0f' },
+});
+
+const Heading = styled.h1`
+  color: ${headingColor};
+`;
+
+Heading.propTypes = {
+  variant: PropTypes.oneOf(['default', 'fancy'])
+};
+
+Heading.defaultProps = {
+  variant: 'default',
+};
+```
+
+The returned value will have all the key-value pairs from your variant theme
+set as properties.
+
+```js
+headingColor.default === { light: '#fff', dark: '#000' };
+headingColor.fancy === { light: '#f0f', dark: '#f0f' };
+```

__snapshots__/test.js.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`basic 1`] = `
+<div
+  className="sc-bdVaJa llQRsw"
+/>
+`;
+
+exports[`basic 2`] = `
+<div
+  className="sc-bdVaJa gXhLMb"
+/>
+`;
+
+exports[`variants 1`] = `
+<h1
+  className="sc-bwzfXH bONLXG"
+/>
+`;
+
+exports[`variants 2`] = `
+<h1
+  className="sc-bwzfXH kXifJm"
+/>
+`;

example/index.html

@@ -0,0 +1,11 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>styled-theming example</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>

example/index.js

@@ -0,0 +1,6 @@
+// @flow
+import React from 'react';
+import {render} from 'react-dom';
+import App from './src/App';
+
+render(<App/>, document.getElementById('root'));

example/src/App.js

@@ -0,0 +1,46 @@
+// @flow
+import React from 'react';
+import {ThemeProvider, injectGlobal} from 'styled-components';
+import {createTheme} from '../..';
+
+import Box from './Box';
+import Button from './Button';
+
+injectGlobal`
+  html,
+  body,
+  #root {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  body {
+    margin: 0;
+    font: normal 1em/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+`;
+
+export default class App extends React.Component {
+  state = {
+    theme: 'light',
+  };
+
+  handleToggleTheme = () => {
+    this.setState({ theme: this.state.theme === 'light' ? 'dark' : 'light' });
+  };
+
+  render() {
+    return (
+      <ThemeProvider theme={createTheme(this.state.theme)}>
+        <Box>
+          <Button onClick={this.handleToggleTheme}>Toggle Theme</Button>
+          <Button kind="primary" onClick={this.handleToggleTheme}>Toggle Theme</Button>
+          <Button kind="success" onClick={this.handleToggleTheme}>Toggle Theme</Button>
+          <Button kind="warning" onClick={this.handleToggleTheme}>Toggle Theme</Button>
+          <Button kind="danger" onClick={this.handleToggleTheme}>Toggle Theme</Button>
+        </Box>
+      </ThemeProvider>
+    );
+  }
+}

example/src/Box.js

@@ -0,0 +1,25 @@
+// @flow
+import styled from 'styled-components';
+import {toThemeSet} from '../..';
+import colors from './colors';
+
+const boxBackgroundColor = toThemeSet({
+  light: colors.white,
+  dark: colors.grayDarker,
+});
+
+const boxColor = toThemeSet({
+  light: colors.grayDarker,
+  dark: colors.grayLighter,
+});
+
+const Box = styled.div`
+  position: relative;
+  width: 100%;
+  height: 100%;
+  padding: 4em;
+  background-color: ${boxBackgroundColor};
+  color: ${boxColor};
+`;
+
+export default Box;

example/src/Button.js

@@ -0,0 +1,37 @@
+// @flow
+import styled from 'styled-components';
+import {toVariantThemeSet} from '../..';
+import colors from './colors';
+
+const buttonBackgroundColor = toVariantThemeSet('kind', {
+  default: { light: colors.grayLight, dark: colors.grayDark },
+  primary: { light: colors.blueLight, dark: colors.blueDark },
+  success: { light: colors.greenLight, dark: colors.greenDark, },
+  warning: { light: colors.yellowLight, dark: colors.yellowDark, },
+  danger: { light: colors.redLight, dark: colors.redDark, },
+});
+
+const buttonColor = toVariantThemeSet('kind', {
+  default: { light: colors.grayDarker, dark: colors.grayLighter },
+  primary: { light: colors.blueDark, dark: colors.blueLight },
+  success: { light: colors.greenDark, dark: colors.greenLight },
+  warning: { light: colors.yellowDark, dark: colors.yellowLight },
+  danger: { light: colors.redDark, dark: colors.redLight },
+});
+
+const Button = styled.button`
+  font: inherit;
+  padding: 0.5em 1em;
+  border: none;
+  background-color: ${buttonBackgroundColor};
+  color: ${buttonColor};
+  border-radius: 0.25em;
+  margin-right: 0.5em;
+  cursor: pointer;
+`;
+
+Button.defaultProps = {
+  kind: 'default',
+};
+
+export default Button;

example/src/colors.js

@@ -0,0 +1,21 @@
+// @flow
+export default {
+  white: '#fff',
+
+  grayLighter: '#eee',
+  grayLight: '#ccc',
+  grayDark: '#444',
+  grayDarker: '#222',
+
+  blueLight: '#2196F3',
+  blueDark: '#104977',
+
+  greenLight: '#8bc34a',
+  greenDark: '#3b5221',
+
+  yellowLight: '#ffc107',
+  yellowDark: '#715605',
+
+  redLight: '#e91e63',
+  redDark: '#670a2a',
+};