moq-ui/src/styles/theme-manager.js

Simple, customizable UI components built with React

var Color = require('./colors');
var Spacing = require('./spacing');
var ColorManipulator = require('../utils/color-manipulator');
var Extend = require('../utils/extend');

var Types = {
  DEFAULT: require('./themes/default-theme'),
  PURE:  require('./themes/pure-theme')
};

var ThemeManager = function() {
  return {
    template: Types.DEFAULT,

    spacing: Spacing,
    fontFamily: 'Helvetica Neue, Helvetica, Arial, sans-serif',

    palette: Types.DEFAULT.getPalette(),
    component: Types.DEFAULT.getComponentThemes(Types.DEFAULT.getPalette()),

    getCurrentTheme: function() {
      return this;
    },

    // Component gets updated to reflect palette changes.
    setTheme: function(newTheme) {
      this.setPalette(newTheme.getPalette());
      this.setComponentThemes(newTheme.getComponentThemes(newTheme.getPalette()));
      return this;
    },

    setPalette: function(newPalette) {
      this.palette = Extend(this.palette, newPalette);
      this.component = Extend(this.component, this.template.getComponentThemes(this.palette));
    },

    setComponentThemes: function(overrides) {
      this.component = Extend(this.component, overrides);
    }
  };
};

ThemeManager.types = Types;

module.exports = ThemeManager;