Adds base and custom theme.

Author: hackhat

gulpfile.js

@@ -37,6 +37,7 @@ var config = {
         alias: {
             // fluxmax         : absPath('../../src/index'),
             'event-emitter' : 'wolfy87-eventemitter',
+            'tinycolor'     : 'tinycolor2',
         },
     },
     plugins: [

src/ui/CustomTheme.js

@@ -0,0 +1,17 @@
+var BaseTheme = require('./tottys/BaseTheme');
+var tinycolor = require('tinycolor');
+var _         = require('lodash');
+
+
+
+
+
+var CustomTheme = _.merge({}, BaseTheme, {
+    // colors:
+});
+
+
+
+
+
+module.exports = CustomTheme;

src/ui/Tasks.js

@@ -1,8 +1,11 @@
-var React      = require('react');
-var SmartCSS   = require('smart-css');
-var App        = require('fluxmax').App;
-var Task       = React.createFactory(require('./Task'));
-var MainButton = require('./tottys/MainButton');
+var React       = require('react');
+var SmartCSS    = require('smart-css');
+var App         = require('fluxmax').App;
+var Task        = React.createFactory(require('./Task'));
+var CustomTheme = require('./CustomTheme');
+var MainButton  = require('./tottys/MainButton')({
+    theme: CustomTheme
+});
 
 
 

src/ui/tottys/BaseTheme.js

@@ -0,0 +1,17 @@
+var tinycolor = require('tinycolor');
+
+
+
+
+
+var BaseTheme = {
+    colors: {
+        main: tinycolor('hsl(196, 100%, 50%)')
+    }
+};
+
+
+
+
+
+module.exports = BaseTheme;

src/ui/tottys/MainButton.js

@@ -6,47 +6,59 @@ var _        = require('lodash');
 
 
 
-var css = new SmartCSS();
+module.exports = function(options){
+    options = _.extend({
+        theme: void 0,
+    }, options);
+    var theme = options.theme;
+    if(!theme) throw new Error('No theme defined.');
 
 
 
-css.setClass('root', {
-    width        : '320px',
-    padding      : '13px',
-    border       : '0',
-    background   : 'hsl(196, 100%, 50%)',
-    color        : 'white',
-    fontSize     : '26px',
-    outline      : 'none',
-    marginBottom : '1px',
-    boxSizing    : 'border-box',
-    cursor       : 'pointer',
-    transition   : 'all 0.2s',
-    ':hover': {
-    background   : 'hsl(196, 100%, 40%)',
-    }
-})
+    var css = new SmartCSS();
 
 
 
+    css.setClass('root', {
+        width        : '320px',
+        padding      : '13px',
+        border       : '0',
+        background   : theme.colors.main.toString(),
+        color        : 'white',
+        fontSize     : '26px',
+        outline      : 'none',
+        marginBottom : '1px',
+        boxSizing    : 'border-box',
+        cursor       : 'pointer',
+        transition   : 'all 0.2s',
+        ':hover': {
+            background   : 'hsl(196, 100%, 40%)',
+        }
+    })
 
 
-module.exports = React.createClass({
 
 
 
-    displayName: 'tottys.MainButton',
+    var MainButton = React.createClass({
 
 
 
-    render: function(){
-        return React.DOM.button(_.extend({}, _.omit(this.props, 'className'), {
-            className: css.getClass('root'),
-        }), this.props.label)
-    }
+        displayName: 'tottys.MainButton',
 
 
 
-});
+        render: function(){
+            return React.DOM.button(_.extend({}, _.omit(this.props, 'className'), {
+                className: css.getClass('root'),
+            }), this.props.label)
+        }
 
 
+
+    });
+
+
+
+    return MainButton;
+}