custom theme initial commit + added theme provider

docs/Theme.md

@@ -0,0 +1,11 @@
+<b>Examples:</b>
+
+```js
+const theme = {
+    bgColorLight: "#000"
+};
+
+<ThemeProvider theme={theme}>
+    <Button>Default Button</Button>
+</ThemeProvider>
+```

src/Button/Button.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'preact';
 import PropTypes from 'prop-types';
-
 import { StyledButton } from './styles';
 
 /**
@@ -51,6 +50,10 @@ class Button extends Component {
 		clicked: false
 	};
 
+	static contextTypes = {
+		theme: PropTypes.object,
+	};
+
 	_handleClick = (event) => {
 		this.setState({
 			clicked: true
@@ -74,8 +77,10 @@ class Button extends Component {
 	render() {
 		const clicked = this.state.clicked ? 'clicked' : '';
 		const {badge='', loading=false, className, left, right} = this.props;
+		const { theme = {} } = this.context
+		console.log(theme);
 		return (
-			<StyledButton {...this.props} onClick={this._handleClick} className={`${clicked} ${loading && 'loading'} ${className}`}>
+			<StyledButton {...this.props} theme={theme} onClick={this._handleClick} className={`${clicked} ${loading && 'loading'} ${className}`}>
 				<span className="item-left">
 					{left}
 				</span>

src/Button/styles.js

@@ -1,8 +1,7 @@
 import styled, { css } from 'styled-components';
-
-import colors from '../theme';
 import keyframes from '../keyframes';
 import animations from '../Animations';
+import theme from '../theme';
 
 export const StyledButton = styled.button`
 	position: relative;
@@ -18,10 +17,10 @@ export const StyledButton = styled.button`
 	font-size: 14px;
 	line-height: 14px;
 	padding: 10px 20px;
-	background: ${colors.bgColorLight};
-	border: 1px solid ${colors.primaryColor};
+	background: ${theme.bgColorLight};
+	border: 1px solid ${theme.primaryColor};
 	border-radius: 2px;
-	color: ${colors.linkColor};
+	color: ${theme.linkColor};
 	
 	&.clicked:after {
 		content: '';
@@ -31,7 +30,7 @@ export const StyledButton = styled.button`
 		bottom: -1px;
 		right: -1px;
 		border-radius: inherit;
-		border: 0 solid ${colors.primaryColor};
+		border: 0 solid ${theme.primaryColor};
 		opacity: 0.4;
 		animation: ${keyframes.buttonEffect} .4s;
 		display: block;
@@ -54,7 +53,7 @@ export const StyledButton = styled.button`
 	    display: inline-block;
 	    font-size: 12px;
 	    ${props => props.badge && css`
-			background: ${props.badge.color ? props.badge.color : colors.primaryColor};
+			background: ${props.badge.color ? props.badge.color : theme.primaryColor};
 			padding: ${props.badge.value && props.badge.value.toString().length > 1 ? '3px 8px' : '3px'};
 		`}
 	}
@@ -66,7 +65,7 @@ export const StyledButton = styled.button`
 	
 	&.loading:after {
 		animation: ${keyframes.loading} 500ms infinite linear;
-	    border: 2px solid ${colors.primaryColorDark};
+	    border: 2px solid ${theme.primaryColorDark};
 	    border-radius: 50%;
 	    border-right-color: transparent;
 	    border-top-color: transparent;
@@ -95,29 +94,29 @@ export const StyledButton = styled.button`
 	`}
 
 	${props => props.primary && css`
-		background: ${colors.primaryColor};
-		border: 1px solid ${colors.primaryColorDark};
+		background: ${theme.primaryColor};
+		border: 1px solid ${theme.primaryColorDark};
 		border-radius: 2px;
-		color: ${colors.lightColor};
+		color: ${theme.lightColor};
 		
 		&.loading:after {
-			border: 2px solid ${colors.lightColor};
-			border-right-color: ${colors.primaryColor};
-	        border-top-color: ${colors.primaryColor};
+			border: 2px solid ${theme.lightColor};
+			border-right-color: ${theme.primaryColor};
+	        border-top-color: ${theme.primaryColor};
 		}
 	`}
 	
 	
 	${props => props.secondary && css`
-		background: ${colors.secondaryColor};
-		border: 1px solid ${colors.secondaryColorDark};
+		background: ${theme.secondaryColor};
+		border: 1px solid ${theme.secondaryColorDark};
 		border-radius: 2px;
-		color: ${colors.lightColor};
+		color: ${theme.lightColor};
 		
 		&.loading:after {
-			border: 2px solid ${colors.lightColor};
-			border-right-color: ${colors.primaryColor};
-	        border-top-color: ${colors.primaryColor};
+			border: 2px solid ${theme.lightColor};
+			border-right-color: ${theme.primaryColor};
+	        border-top-color: ${theme.primaryColor};
 		}
 	`}
 	

src/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,20 @@
+import React, { Component } from 'preact';
+import PropTypes from 'prop-types';
+
+/**
+ * Custom theme provider for application 
+ */
+class ThemeProvider extends Component {
+    static propTypes = {
+        theme: PropTypes.object.isRequired,
+    }
+    getChildContext () {
+      let { children, ...context } = this.props;
+      return context;
+    }
+    render ({ children }) {
+      return children && children[0] || null
+    }
+  }
+
+  export default ThemeProvider;

src/ThemeProvider/index.js

@@ -0,0 +1 @@
+export default from './ThemeProvider';

src/index.js

@@ -1,3 +1,4 @@
+export ThemeProvider from './ThemeProvider';
 export AppBar from './AppBar';
 export Button from './Button';
 export Link from './Link';

src/theme.js

@@ -34,7 +34,6 @@ const controlErrorColor = '#e85600';
 const codeColor = '#e06870';
 const highlightColor = '#ffe9b3';
 const notifyBgColor = '#ececec';
-const listActiveColor = '#f0f3f5';
 
 export default {
 	primaryColor,
@@ -60,7 +59,6 @@ export default {
 	controlErrorColor,
 	codeColor,
 	highlightColor,
-	notifyBgColor,
-	listActiveColor
+	notifyBgColor
 };
 

styleguide.config.js

@@ -43,6 +43,8 @@ module.exports = {
 				'./src/Animate/Animate.js'
 			];
 		}
+	}, {
+		name: 'Theme', content: './docs/Theme.md'
 	}],
 	theme: {
 		baseBackground: '#fdfdfc',

styleguide/setup.js

@@ -8,6 +8,7 @@ import ListSection from './../src/List/ListSection';
 import ListItem from './../src/List/ListItem';
 import ListFooter from './../src/List/ListFooter';
 import Cell from './../src/Layout/Cell';
+import ThemeProvider from './../src/ThemeProvider/ThemeProvider';
 import lodash from 'lodash';
 
 global.lodash = lodash;
@@ -19,4 +20,5 @@ global.ListHeader = ListHeader;
 global.ListSection = ListSection;
 global.ListItem = ListItem;
 global.ListFooter = ListFooter;
-global.Cell = Cell;
+global.Cell = Cell;
+global.ThemeProvider = ThemeProvider;