Add theming support

Author: jxnblk

ThemeProvider.js

@@ -0,0 +1 @@
+module.exports = require('./dist/ThemeProvider')

docs/App.js

@@ -1,27 +1,32 @@
 import React from 'react'
 import cxs from 'cxs/component'
+import ThemeProvider from 'cxs/ThemeProvider'
+import theme from './theme'
 import Container from './Container'
 import Header from './Header'
 import About from './About'
 import Usage from './Usage'
 import CTA from './CTA'
 import Footer from './Footer'
 
-const Root = cxs('div')({
+const Root = cxs('div')(props => ({
   fontFamily: '"Roboto Mono", Menlo, monospace',
+  color: typeof props.theme,
   lineHeight: '1.5'
-})
+}))
 
 const App = props => (
-  <Root>
-    <Container>
-      <Header />
-      <About />
-      <Usage />
-      <CTA />
-      <Footer />
-    </Container>
-  </Root>
+  <ThemeProvider theme={theme}>
+    <Root>
+      <Container>
+        <Header />
+        <About />
+        <Usage />
+        <CTA />
+        <Footer />
+      </Container>
+    </Root>
+  </ThemeProvider>
 )
 
 export default App

docs/Box.js

@@ -1,97 +1,11 @@
 import cxs from 'cxs/component'
 import colors from './colors'
-
-const reg = /^[mp][trblxy]?$/
-
-const scale = [
-  0,
-  4,
-  8,
-  16,
-  32,
-  64,
-  128
-]
-
-const scaleVal = n => {
-  if (typeof n !== 'number') return n
-  const neg = n < 0 ? -1 : 1
-  const i = Math.abs(n)
-  return neg * (scale[i] || i)
-}
-
-const space = props => {
-  const decs = []
-
-  for (let key in props) {
-    if (!reg.test(key)) continue
-    const [ a, b ] = key
-    const prop = [ properties[a], directions[b] ]
-      .filter(n => !!n)
-      .join('')
-    const val = scaleVal(props[key])
-    decs.push({ [prop]: val })
-  }
-
-  return decs.reduce((a, b) => Object.assign(a, b), {})
-  return decs.join(';')
-}
-
-const properties = {
-  m: 'margin',
-  p: 'padding'
-}
-
-const directions = {
-  t: 'Top',
-  r: 'Right',
-  b: 'Bottom',
-  l: 'Left',
-}
-
-const per = n => typeof n !== 'number' || n > 1 ? n : (n * 100) + '%'
-
-const width = props => props.w
-  ? { width: per(props.w) }
-  : null
-
-const color = props => props.color
-  ? { color: colors[props.color] || props.color }
-  : null
-
-const bg = props => props.bg
-  ? { backgroundColor: colors[props.bg] || props.bg }
-  : null
-
-const opts = {
-  removeProps: [
-    'w',
-    'color',
-    'bg',
-    'm',
-    'mt',
-    'mr',
-    'mb',
-    'ml',
-    'p',
-    'pt',
-    'pr',
-    'pb',
-    'pl',
-    'f',
-    'bold',
-    'wrap',
-    'column',
-    'justify',
-    'align',
-  ]
-}
+import { space, width, color } from 'styled-system'
 
 const Box = cxs('div')(
   space,
   width,
-  color,
-  bg
+  color
 )
 
 export default Box

docs/theme.js

@@ -0,0 +1,13 @@
+const space = [
+  0,
+  4,
+  8,
+  16,
+  32,
+  64,
+  128
+]
+
+module.exports = {
+  space
+}

package.json

@@ -38,6 +38,7 @@
     "react-test-renderer": "^15.6.1",
     "standard": "^10.0.2",
     "static-react": "^4.0.0-2",
+    "styled-system": "^1.0.0-12",
     "webpack": "^3.3.0",
     "webpack-dev-server": "^2.6.0"
   },
@@ -68,6 +69,10 @@
     {
       "path": "./dist/index.js",
       "maxSize": "0.8 kb"
+    },
+    {
+      "path": "./dist/component.js",
+      "maxSize": "0.6 kb"
     }
   ],
   "static-react": {

src/ThemeProvider.js

@@ -0,0 +1,23 @@
+const React = require('react')
+const PropTypes = require('prop-types')
+const h = React.createElement
+
+class ThemeProvider extends React.Component {
+  getChildContext () {
+    return {
+      theme: this.props.theme
+    }
+  }
+
+  render () {
+    return (
+      h('div', null, this.props.children)
+    )
+  }
+}
+
+ThemeProvider.childContextTypes = {
+  theme: PropTypes.object
+}
+
+module.exports = ThemeProvider

src/component.js

@@ -3,11 +3,13 @@ const PropTypes = require('prop-types')
 const cxs = require('./index')
 
 module.exports = C => (...args) => {
-  const Comp = props =>
+  const Comp = (props, context) =>
     h(C, Object.assign({}, props, {
       className: [
         props.className,
-        ...args.map(a => typeof a === 'function' ? a(props) : a)
+        ...args.map(a => typeof a === 'function'
+          ? a(Object.assign({ theme: context.theme }, props))
+          : a)
           .filter(s => s !== null)
           .map(s => cxs(s))
       ].join(' ')