[Don't merge] Move to a CSS-in-JS model.

.babelrc

@@ -1,5 +1,9 @@
 {
   "plugins": [
+    ["babel-plugin-styled-components", {
+      "minify": false,
+      "displayName": true
+    }],
     "transform-class-properties",
     "transform-object-rest-spread",
     "transform-rebem-jsx"

demo/web/App.jsx

@@ -4,6 +4,8 @@ import {HashRouter, Link, Route, Switch} from 'react-router-dom'
 import React from 'react'
 import { render } from 'react-dom'
 
+import {ThemeProvider} from 'styled-components'
+
 import Github from './Github'
 import Home from './Home'
 import SASS from './SASS'
@@ -41,66 +43,68 @@ class App extends React.Component {
 
   render () {
     return (
-      <HashRouter>
-        <div>
-          <Navbar onDrawer={this.handleDrawer}>
-            <NavbarLink k='home' to='#/'>Home</NavbarLink>
-          </Navbar>
-          <Drawer onDrawer={this.handleDrawer} open={this.state.menu}>
-            <DrawerHeader title='Bulwark' subtitle='React UI Framework' />
-            <DrawerLink k='palette'><Link to='/sass'>SASS</Link></DrawerLink>
-            <DrawerLink k='code'><Link to='/github'>Source Code</Link></DrawerLink>
-            <DrawerHeader subtitle='Components' />
-            <DrawerLink><Link to='/badge'>Badge</Link></DrawerLink>
-            <DrawerLink><Link to='/button'>Button</Link></DrawerLink>
-            <DrawerLink><Link to='/card'>Card</Link></DrawerLink>
-            <DrawerLink><Link to='/chart'>Chart</Link></DrawerLink>
-            <DrawerLink><Link to='/checkbox'>Checkbox/Switch</Link></DrawerLink>
-            <DrawerLink><Link to='/grid'>Grid</Link></DrawerLink>
-            <DrawerLink><Link to='/menu'>Menu</Link></DrawerLink>
-            <DrawerLink><Link to='/modal'>Modal</Link></DrawerLink>
-            <DrawerLink><Link to='/pagination'>Pagination</Link></DrawerLink>
-            <DrawerLink><Link to='/panel'>Panel</Link></DrawerLink>
-            <DrawerLink><Link to='/progress'>Progress</Link></DrawerLink>
-            <DrawerLink><Link to='/radio'>Radio</Link></DrawerLink>
-            <DrawerLink><Link to='/selectinput'>Select Input</Link></DrawerLink>
-            <DrawerLink><Link to='/stepper'>Stepper</Link></DrawerLink>
-            <DrawerLink><Link to='/tab'>Tab</Link></DrawerLink>
-            <DrawerLink><Link to='/table'>Table</Link></DrawerLink>
-            <DrawerLink><Link to='/textinput'>Text Input</Link></DrawerLink>
-            <DrawerLink><Link to='/tooltip'>Tooltip</Link></DrawerLink>
-            <DrawerLink><Link to='/font'>Typography</Link></DrawerLink>
-          </Drawer>
-          <div block='wrapper'>
-            <Switch>
-              <Route path='/font' component={FontDemo} />
-              <Route path='/grid' component={GridDemo} />
-              <Route path='/button' component={ButtonDemo} />
-              <Route path='/card' component={CardDemo} />
-              <Route path='/tooltip' component={TooltipDemo} />
-              <Route path='/badge' component={BadgeDemo} />
-              <Route path='/modal' component={ModalDemo} />
-              <Route path='/checkbox' component={CheckboxDemo} />
-              <Route path='/radio' component={RadioDemo} />
-              <Route path='/panel' component={PanelDemo} />
-              <Route path='/textinput' component={TextInputDemo} />
-              <Route path='/selectinput' component={SelectInputDemo} />
-              <Route path='/menu' component={MenuDemo} />
-              <Route path='/tab' component={TabDemo} />
-              <Route path='/pagination' component={PaginationDemo} />
-              <Route path='/stepper' component={StepperDemo} />
-              <Route path='/table' component={TableDemo} />
-              <Route path='/chart' component={ChartDemo} />
-              <Route path='/progress' component={ProgressBarDemo} />
+      <ThemeProvider theme={{mode: 'light'}}>
+        <HashRouter>
+          <div>
+            <Navbar onDrawer={this.handleDrawer}>
+              <NavbarLink k='home' to='#/'>Home</NavbarLink>
+            </Navbar>
+            <Drawer onDrawer={this.handleDrawer} open={this.state.menu}>
+              <DrawerHeader title='Bulwark' subtitle='React UI Framework' />
+              <DrawerLink k='palette'><Link to='/sass'>SASS</Link></DrawerLink>
+              <DrawerLink k='code'><Link to='/github'>Source Code</Link></DrawerLink>
+              <DrawerHeader subtitle='Components' />
+              <DrawerLink><Link to='/badge'>Badge</Link></DrawerLink>
+              <DrawerLink><Link to='/button'>Button</Link></DrawerLink>
+              <DrawerLink><Link to='/card'>Card</Link></DrawerLink>
+              <DrawerLink><Link to='/chart'>Chart</Link></DrawerLink>
+              <DrawerLink><Link to='/checkbox'>Checkbox/Switch</Link></DrawerLink>
+              <DrawerLink><Link to='/grid'>Grid</Link></DrawerLink>
+              <DrawerLink><Link to='/menu'>Menu</Link></DrawerLink>
+              <DrawerLink><Link to='/modal'>Modal</Link></DrawerLink>
+              <DrawerLink><Link to='/pagination'>Pagination</Link></DrawerLink>
+              <DrawerLink><Link to='/panel'>Panel</Link></DrawerLink>
+              <DrawerLink><Link to='/progress'>Progress</Link></DrawerLink>
+              <DrawerLink><Link to='/radio'>Radio</Link></DrawerLink>
+              <DrawerLink><Link to='/selectinput'>Select Input</Link></DrawerLink>
+              <DrawerLink><Link to='/stepper'>Stepper</Link></DrawerLink>
+              <DrawerLink><Link to='/tab'>Tab</Link></DrawerLink>
+              <DrawerLink><Link to='/table'>Table</Link></DrawerLink>
+              <DrawerLink><Link to='/textinput'>Text Input</Link></DrawerLink>
+              <DrawerLink><Link to='/tooltip'>Tooltip</Link></DrawerLink>
+              <DrawerLink><Link to='/font'>Typography</Link></DrawerLink>
+            </Drawer>
+            <div block='wrapper'>
+              <Switch>
+                <Route path='/font' component={FontDemo} />
+                <Route path='/grid' component={GridDemo} />
+                <Route path='/button' component={ButtonDemo} />
+                <Route path='/card' component={CardDemo} />
+                <Route path='/tooltip' component={TooltipDemo} />
+                <Route path='/badge' component={BadgeDemo} />
+                <Route path='/modal' component={ModalDemo} />
+                <Route path='/checkbox' component={CheckboxDemo} />
+                <Route path='/radio' component={RadioDemo} />
+                <Route path='/panel' component={PanelDemo} />
+                <Route path='/textinput' component={TextInputDemo} />
+                <Route path='/selectinput' component={SelectInputDemo} />
+                <Route path='/menu' component={MenuDemo} />
+                <Route path='/tab' component={TabDemo} />
+                <Route path='/pagination' component={PaginationDemo} />
+                <Route path='/stepper' component={StepperDemo} />
+                <Route path='/table' component={TableDemo} />
+                <Route path='/chart' component={ChartDemo} />
+                <Route path='/progress' component={ProgressBarDemo} />
 
-              <Route path='/github' component={Github} />
-              <Route path='/sass' component={SASS} />
-              <Route path='/' component={Home} />
-            </Switch>
+                <Route path='/github' component={Github} />
+                <Route path='/sass' component={SASS} />
+                <Route path='/' component={Home} />
+              </Switch>
+            </div>
+            <div style={{height: 100}} />
           </div>
-          <div style={{height: 100}} />
-        </div>
-      </HashRouter>
+        </HashRouter>
+      </ThemeProvider>
     )
   }
 }

demo/web/Section/BadgeDemo.jsx

@@ -8,9 +8,9 @@ import Source from '../../../web/Source'
 const ButtonDemo = () => (
   <div>
     <h3>Badges</h3>
-    <Badge primary text='2'><Button>Default</Button></Badge>
+    <Badge color='primary' text='2'><Button>Default</Button></Badge>
     <Badge><Button text>Primary</Button></Badge>
-    <Badge primary text='6'><IconButton secondary k='lemon' /></Badge>
+    <Badge color='primary' text='6'><IconButton secondary k='lemon' /></Badge>
     <Badge><IconButton primary k='heartbeat' /></Badge>
     <h4>Code Example</h4>
     <Source

demo/web/Section/ButtonDemo.jsx

@@ -8,8 +8,8 @@ const ButtonDemo = () => (
   <div>
     <h3>Buttons</h3>
     <Button>Default</Button>
-    <Button primary>Primary</Button>
-    <Button secondary>Secondary</Button>
+    <Button color='primary'>Primary</Button>
+    <Button color='secondary'>Secondary</Button>
     <Button disabled>Disabled</Button>
     <h4>Code Example</h4>
     <Source
@@ -22,8 +22,8 @@ const ButtonDemo = () => (
 
     <h3>Large Buttons</h3>
     <Button large>Default</Button>
-    <Button large primary>Primary</Button>
-    <Button large secondary>Secondary</Button>
+    <Button large color='primary'>Primary</Button>
+    <Button large color='secondary'>Secondary</Button>
     <Button disabled large>Disabled</Button>
     <h4>Code Example</h4>
     <Source
@@ -36,8 +36,8 @@ const ButtonDemo = () => (
 
     <h3>Outlined Buttons</h3>
     <Button outline>Default</Button>
-    <Button primary outline>Primary</Button>
-    <Button secondary outline>Secondary</Button>
+    <Button color='primary' outline>Primary</Button>
+    <Button color='secondary' outline>Secondary</Button>
     <Button disabled outline>Disabled</Button>
     <h4>Code Example</h4>
     <Source
@@ -50,8 +50,8 @@ const ButtonDemo = () => (
 
     <h3>Large Outline Buttons</h3>
     <Button large outline>Default</Button>
-    <Button large primary outline>Primary</Button>
-    <Button large secondary outline>Secondary</Button>
+    <Button large color='primary' outline>Primary</Button>
+    <Button large color='secondary' outline>Secondary</Button>
     <Button disabled large outline>Disabled</Button>
     <h4>Code Example</h4>
     <Source
@@ -64,8 +64,8 @@ const ButtonDemo = () => (
 
     <h3>Text Buttons</h3>
     <Button text>Default</Button>
-    <Button primary text>Primary</Button>
-    <Button secondary text>Secondary</Button>
+    <Button color='primary' text>Primary</Button>
+    <Button color='secondary' text>Secondary</Button>
     <Button disabled text>Disabled</Button>
     <h4>Code Example</h4>
     <Source
@@ -78,8 +78,8 @@ const ButtonDemo = () => (
 
     <h3>Icon Buttons</h3>
     <IconButton icon k='home' />
-    <IconButton primary icon k='check' />
-    <IconButton secondary icon k='user' />
+    <IconButton color='primary' icon k='check' />
+    <IconButton color='secondary' icon k='user' />
     <IconButton disabled icon k='times' />
     <h4>Code Example</h4>
     <Source

demo/web/Section/CheckboxDemo.jsx

@@ -6,9 +6,9 @@ import Source from '../../../web/Source'
 const CheckboxDemo = () => (
   <div>
     <h3>Checkboxes</h3>
-    <Checkbox defaultChecked red />
-    <Checkbox defaultChecked primary />
-    <Checkbox defaultChecked primary indeterminate />
+    <Checkbox defaultChecked color='red' />
+    <Checkbox defaultChecked color='primary' />
+    <Checkbox defaultChecked color='primary' indeterminate />
     <Checkbox disabled />
     <Checkbox defaultChecked disabled />
     <br />
@@ -23,8 +23,8 @@ const CheckboxDemo = () => (
 <Checkbox defaultChecked disabled />`} />
     <br />
     <Checkbox defaultChecked />
-    <Checkbox defaultChecked primary />
-    <Checkbox defaultChecked secondary />
+    <Checkbox defaultChecked color='primary' />
+    <Checkbox defaultChecked color='secondary' />
     <Checkbox />
     <Checkbox defaultChecked disabled />
     <h4>Code Example</h4>
@@ -38,9 +38,9 @@ const CheckboxDemo = () => (
 <Checkbox defaultChecked disabled />`} />
     <h3>Switches</h3>
     <Checkbox switch defaultChecked />
-    <Checkbox switch defaultChecked primary />
-    <Checkbox switch defaultChecked secondary />
-    <Checkbox switch red />
+    <Checkbox switch defaultChecked color='primary' />
+    <Checkbox switch defaultChecked color='secondary' />
+    <Checkbox switch color='red' />
     <Checkbox switch defaultChecked disabled />
     <h4>Code Example</h4>
     <Source

demo/web/Section/RadioDemo.jsx

@@ -20,10 +20,10 @@ export default class RadioDemo extends React.Component {
     return (
       <div>
         <h3>Radio Buttons</h3>
-        <Radio checked={this.state.value === 0} value={0} onChange={this.handleChange} primary />
+        <Radio checked={this.state.value === 0} value={0} onChange={this.handleChange} color='primary' />
         <Radio checked={this.state.value === 1} value={1} onChange={this.handleChange} />
-        <Radio checked={this.state.value === 2} value={2} onChange={this.handleChange} secondary />
-        <Radio checked={this.state.value === 3} value={3} onChange={this.handleChange} red />
+        <Radio checked={this.state.value === 2} value={2} onChange={this.handleChange} color='secondary' />
+        <Radio checked={this.state.value === 3} value={3} onChange={this.handleChange} color='red' />
         <Radio checked={this.state.value === 4} value={4} disabled />
         <h4>Code Example</h4>
         <Source

demo/web/Section/TooltipDemo.jsx

@@ -9,8 +9,8 @@ const TooltipDemo = () => (
   <div>
     <h3>Tooltips</h3>
     <Tooltip top content='I am on the top'><Button>Default Top</Button></Tooltip>
-    <Tooltip primary bottom content='I am on the bottom'><Button primary>Primary Bottom</Button></Tooltip>
-    <Tooltip urgent right content='I am on the right'><Button secondary outline>Urgent Right</Button></Tooltip>
+    <Tooltip color='primary' bottom content='I am on the bottom'><Button primary>Primary Bottom</Button></Tooltip>
+    <Tooltip color='alert' right content='I am on the right'><Button secondary outline>Urgent Right</Button></Tooltip>
     <Tooltip left content='I am on the left'><IconButton icon k='home' /></Tooltip>
     <h4>Code Example</h4>
     <Source

lib/Animations.js

@@ -0,0 +1,58 @@
+import {keyframes, css} from 'styled-components'
+import {rgba} from 'polished'
+
+export const pulse = color => keyframes`
+  0% { box-shadow: 0 0 0 0 ${rgba(color, 0.4)}; }
+  70% { box-shadow: 0 0 0 10px ${rgba(color, 0)}; }
+  100% { box-shadow: 0 0 0 0 ${rgba(color, 0)}; }
+`
+
+export const ripple = keyframes`
+  0% {
+    opacity: 1;
+    transform: scale(0, 0);
+  }
+  20% {
+    opacity: 1;
+    transform: scale(25, 25);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(40, 40);
+  }
+`
+
+export const easeOutQuad = css`cubic-bezier(0.250, 0.460, 0.450, 0.940);`
+export const bounce = css`cubic-bezier(0.175, 0.885, 0.32, 1.275);`
+
+const swiftEaseOutDuration = css`0.4s`
+const swiftEaseOutTimingFunction = css`cubic-bezier(0.25, 0.8, 0.25, 1);`
+export const swiftEaseOut = css`all ${swiftEaseOutDuration} ${swiftEaseOutTimingFunction};`
+
+const swiftEaseInDuration = css`0.3s;`
+const swiftEaseInTimingFunction = css`cubic-bezier(0.55, 0, 0.55, 0.2);`
+export const swiftEaseIn = css`all ${swiftEaseInDuration} ${swiftEaseInTimingFunction};`
+
+const swiftEaseInOutDuration = css`0.5s;`
+const swiftEaseInOutTimingFunction = css`cubic-bezier(0.35, 0, 0.25, 1);`
+export const swiftEaseInOut = css`all ${swiftEaseInOutDuration} ${swiftEaseInOutTimingFunction};`
+
+const swiftLinearDuration = css`0.08s;`
+const swiftLinearTimingFunction = css`linear;`
+export const swiftLinear = css`all ${swiftLinearDuration} ${swiftLinearTimingFunction};`
+
+const materialEnterDuration = css`0.3s;`
+const materialEnterTimingFunction = css`cubic-bezier(0.0, 0.0, 0.2, 1);`
+export const materialEnter = css`all ${materialEnterDuration} ${materialEnterTimingFunction};`
+
+const materialLeaveDuration = css`0.3s;`
+const materialLeaveTimingFunction = css`cubic-bezier(0.4, 0.0, 1, 1);`
+export const materialLeave = css`all ${materialLeaveDuration} ${materialLeaveTimingFunction};`
+
+export const animationProgressbar = css`all 1s ${swiftEaseInTimingFunction} .1s;`
+
+export const animationSelectItem = css`opacity .15s ${swiftEaseInTimingFunction} .4s;`
+
+export const animationModalContainer = css`all ${swiftEaseInOutDuration} ${swiftEaseInOutTimingFunction} .1s;`
+
+export const animationStepper = css`background-color ${swiftEaseInDuration} ${swiftEaseInTimingFunction} 0s;`