v1.0.0

.editorconfig

@@ -0,0 +1,13 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitignore

@@ -0,0 +1,2 @@
+node_modules
+dist

.npmignore

@@ -0,0 +1 @@
+src

README.md

@@ -0,0 +1,121 @@
+# react-themeable
+
+Utility for making React components easily themeable.
+
+**This project is still experimental, so feedback from component authors would be greatly appreciated!**
+
+## Why?
+
+The React community is highly fragmented when it comes to styling. How do we write components that can happily co-exist with all of these competing approaches?
+
+With react-themeable, you can support custom themes provided by [CSS Modules](https://github.com/css-modules/css-modules), [Radium](http://projects.formidablelabs.com/radium/), [React Style](https://github.com/js-next/react-style), or even plain old style objects as easily as this:
+
+```js
+<MyComponent theme={theme} />
+```
+
+## Install
+
+`npm install --save react-themeable`
+
+## Usage
+
+`react-themeable` exposes just a single function.
+
+This function is designed to accept a `theme` prop inside of your `render` method. This then returns a small helper function that accepts a key and a series of classes/style names.
+
+This helper function detects whether a theme is class or style based, and creates the appropriate attributes for you.
+
+For example:
+
+```js
+import React, { Component } from 'react';
+import themeable from 'react-themeable';
+
+class MyComponent extends Component {
+  render() {
+    const theme = themeable(this.props.theme);
+
+    return (
+      <div {...theme(1, 'root')}>
+        <div {...theme(2, 'foo', 'bar')}>Foo Bar</div>
+        <div {...theme(3, 'baz')}>Baz</div>
+      </div>
+    );
+  }
+}
+```
+
+A theme can now be passed to your component like so:
+
+### CSS Modules
+
+```css
+.foo { color: red; }
+.foo:hover { color: green; }
+.bar { color: blue; }
+```
+
+```js
+import theme from './MyComponentTheme.css';
+...
+<MyComponent theme={theme} />
+```
+
+### Radium
+
+```js
+import Radium from 'radium';
+
+const theme = {
+  foo: {
+    color: 'red',
+    ':hover': {
+      color: 'green'
+    }
+  },
+  bar: {
+    color: 'blue'
+  }
+};
+
+const ThemedMyComponent = Radium(MyComponent);
+...
+<ThemedMyComponent theme={theme} />
+```
+
+### React Style
+
+```js
+import StyleSheet from 'react-style';
+
+const theme = StyleSheet.create({
+  foo: {
+    color: 'red'
+  },
+  bar: {
+    color: 'blue'
+  }
+});
+...
+<MyComponent theme={theme} />
+```
+
+### Plain style objects
+
+```js
+const theme = {
+  foo: {
+    color: 'red'
+  },
+  bar: {
+    color: 'blue'
+  }
+};
+...
+<MyComponent theme={theme} />
+```
+
+## License
+
+[MIT](http://markdalgleish.mit-license.org)

package.json

@@ -0,0 +1,27 @@
+{
+  "name": "react-themeable",
+  "version": "1.0.0",
+  "description": "Utility for making React components easily themeable",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "babel src -d dist",
+    "prepublish": "npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/markdalgleish/react-themeable.git"
+  },
+  "author": "Mark Dalgleish",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/markdalgleish/react-themeable/issues"
+  },
+  "homepage": "https://github.com/markdalgleish/react-themeable#readme",
+  "dependencies": {
+    "object-assign": "^3.0.0"
+  },
+  "devDependencies": {
+    "babel": "^5.6.14"
+  }
+}

src/index.js

@@ -0,0 +1,13 @@
+import assign from 'object-assign';
+
+const truthy = x => x;
+
+export default theme => (key, ...names) => {
+  const styles = names
+    .map(name => theme[name])
+    .filter(truthy);
+
+  return typeof styles[0] === 'string' ?
+    { key, className: styles.join(' ') } :
+    { key, style: assign({}, ...styles) };
+};