@multiplay/ui/dist/helpers/themes/index.js

UI kit for Unity and Multiplay applications

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.buttonThemes = exports.themes = undefined;

var _colours = require('../colours');

/**
 * FIXED THEMES
 *
 * Themes to use for non dynamic / user set themes
 */
var themes = exports.themes = {
  multiplay: {
    primary: _colours.colours.navy,
    secondary: _colours.colours.pink,
    success: _colours.colours.sweetPea,
    error: _colours.colours.magenta,
    warning: _colours.colours.yellow,
    info: _colours.colours.blueGreen,
    header: _colours.colours.cyan,
    headerFont: '#fff',
    font: _colours.colours.charcoal,
    headingFont: _colours.colours.charcoal,
    fontInverse: '#fff',
    background: '#fff'
  },
  unity: {
    primary: '#000',
    secondary: _colours.colours.cyan,
    success: _colours.colours.sweetPea,
    error: _colours.colours.magenta,
    warning: _colours.colours.yellow,
    info: _colours.colours.blueGreen,
    header: '#fff',
    headerFont: '#000',
    font: _colours.colours.charcoal,
    headingFont: _colours.colours.charcoal,
    fontInverse: '#fff',
    background: '#fff'
  }
};

/**
 * BUTTON THEMES
 *
 * Dynamically generate the themes for buttons
 * using the values from the theme provider
 *
 * @param {*} {
 *   primary,
 *   secondary,
 *   font,
 *   fontInverse
 *   success,
 *   error,
 *   warning,
     info
 * }
 */
var buttonThemes = exports.buttonThemes = function buttonThemes(_ref) {
  var primary = _ref.primary,
      secondary = _ref.secondary,
      font = _ref.font,
      fontInverse = _ref.fontInverse,
      success = _ref.success,
      error = _ref.error,
      warning = _ref.warning,
      info = _ref.info;
  return {
    white: {
      border: font,
      background: '#fff',
      color: font,
      borderHov: font,
      backgroundHov: _colours.colours.paleGrey,
      colorHov: font
    },
    clear: {
      border: font,
      background: 'transparent',
      color: font,
      borderHov: font,
      backgroundHov: 'rgba(0,0,0,0.1)',
      colorHov: font
    },
    clear_inverse: {
      border: fontInverse,
      background: 'transparent',
      color: fontInverse,
      borderHov: (0, _colours.darkenColour)(fontInverse, 0.3),
      backgroundHov: 'transparent',
      colorHov: (0, _colours.darkenColour)(fontInverse, 0.3)
    },
    text: {
      border: 'transparent',
      background: 'transparent',
      color: _colours.colours.darkGrey,
      borderHov: 'transparent',
      backgroundHov: 'transparent',
      colorHov: font
    },
    text_inverse: {
      border: 'transparent',
      background: 'transparent',
      color: _colours.colours.stone,
      borderHov: 'transparent',
      backgroundHov: 'transparent',
      colorHov: fontInverse
    },
    primary: {
      border: primary,
      background: primary,
      color: fontInverse,
      borderHov: (0, _colours.darkenColour)(primary, 0.2),
      backgroundHov: (0, _colours.darkenColour)(primary, 0.2),
      colorHov: fontInverse
    },
    secondary: {
      border: secondary,
      background: secondary,
      color: fontInverse,
      borderHov: (0, _colours.darkenColour)(secondary, 0.2),
      backgroundHov: (0, _colours.darkenColour)(secondary, 0.2),
      colorHov: fontInverse
    },
    error: {
      border: error,
      background: error,
      color: fontInverse,
      borderHov: (0, _colours.darkenColour)(error, 0.2),
      backgroundHov: (0, _colours.darkenColour)(error, 0.2),
      colorHov: fontInverse
    },
    warning: {
      border: warning,
      background: warning,
      color: font,
      borderHov: (0, _colours.darkenColour)(warning, 0.2),
      backgroundHov: (0, _colours.darkenColour)(warning, 0.2),
      colorHov: fontInverse
    },
    info: {
      border: info,
      background: info,
      color: fontInverse,
      borderHov: (0, _colours.darkenColour)(info, 0.2),
      backgroundHov: (0, _colours.darkenColour)(info, 0.2),
      colorHov: fontInverse
    },
    success: {
      border: success,
      background: success,
      color: fontInverse,
      borderHov: (0, _colours.darkenColour)(success, 0.2),
      backgroundHov: (0, _colours.darkenColour)(success, 0.2),
      colorHov: fontInverse
    }
  };
};