@hixme-ui/theme/lib/index.js

hixme-ui theme

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ThemeProvider = exports.colorTheme = exports.fontFamily = exports.colors = undefined;

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _ThemeProvider2 = require('./ThemeProvider');

var _ThemeProvider3 = _interopRequireDefault(_ThemeProvider2);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var colors = exports.colors = {
  white: 'white',
  black: 'black',
  grey30: '#3A4951',
  grey80: '#8F9DA8',
  grey100: '#AAB5BD',
  grey110: '#B9C5CD',
  grey120: '#CBD6DB',
  grey130: '#f7fcff',
  teal: '#2EAE8F',
  lightGreen: '#31d5a3',
  blue: '#3997E2',
  darkBlue: '#003146', // '#5874d0',
  red: '#FF1442',
  yellow: '#E0BC4D',
  purple: '#A374D2',
  green: '#88b963'
};

var gradients = {
  teal: 'linear-gradient(180deg, #20BCA1 0%, #159777 100%)',
  red: 'linear-gradient(0deg, #DE293C 0%, #FF7272 100%)',
  yellow: 'linear-gradient(-1deg, #FF8C00 0%, #F3C200 100%)',
  blue: 'linear-gradient(-1deg, #2583C4 0%, #30A0EE 100%)',
  darkBlue: 'linear-gradient(-1deg, #5874d0 0%, #313677 100%)',
  grey: 'linear-gradient(180deg, #CCD2D6 0%, #a4adb3 100%)'
};

var fontSizes = {
  jumbo: '22px',
  larger: '20px',
  large: '18px',
  medium: '16px',
  default: '14px',
  small: '12px',
  smaller: '10px',
  smallest: '8px'
};

var fontWeights = {
  default: 'normal'
};

var titleFontSizes = {
  jumbo: '38px',
  larger: '36px',
  large: '34px',
  medium: '32px',
  default: '30px',
  small: '28px',
  smaller: '26px',
  smallest: '24px'
};

var buttonFontSizes = {
  mini: fontSizes.small,
  small: fontSizes.default,
  large: fontSizes.large,
  jumbo: fontSizes.jumbo
};

var buttonHeights = {
  mini: '28px',
  small: '36px',
  default: '42px',
  large: '50px',
  jumbo: '65px'
};

var buttonMinWidths = {
  mini: '80px',
  small: '80px',
  default: '100px',
  large: '100px',
  jumbo: '100px'
};

var buttonTextColors = {
  default: colors.white
};

var buttonGradientColors = {
  primary: gradients.lightGreen,
  secondary: gradients.grey,
  default: gradients.darkBlue,
  red: gradients.red,
  danger: gradients.red,
  error: gradients.red,
  blue: gradients.blue,
  gold: gradients.yellow
};

var backgroundColorStates = {
  darkBlue: {
    default: colors.darkBlue,
    hover: '#00a0a8'
  },
  grey: {
    default: '#CCD2D6',
    hover: '#a4adb3'
  },
  default: {
    default: colors.darkBlue,
    hover: '#00a0a8'
  },
  red: {
    default: '#DE293C',
    hover: '#FF7272'
  },
  yellow: {
    default: '#FF8C00',
    hover: '#F3C200'
  },
  blue: {
    default: '#2583C4',
    hover: '#30A0EE'
  }
};

var buttonColors = {
  primary: backgroundColorStates.darkBlue,
  secondary: backgroundColorStates.grey,
  default: backgroundColorStates.darkBlue,
  red: backgroundColorStates.red,
  danger: backgroundColorStates.red,
  error: backgroundColorStates.red,
  blue: backgroundColorStates.blue,
  gold: backgroundColorStates.yellow
};

var shadows = {
  medium: '0px 5px 9px 0px rgba(56,59,60,0.22);',
  default: '0px 2px 6px 0px rgba(56,59,60,0.18);',
  none: '0px 0px 0px 0px rgba(0,0,0,0);'
};

var buttonBorderRadius = {
  none: '0',
  default: '4px'

  /* eslint-disable max-len */
};var fontFamily = exports.fontFamily = {
  thinnest: "'SF Pro Text', 'Arial', 'sans-serif'",
  thinner: "'SF Pro Text', 'Arial', 'sans-serif'",
  thin: "'SF Pro Text', 'Arial', 'sans-serif'",
  normal: "'SF Pro Text', 'Arial', 'sans-serif'",
  bold: "'SF Pro Text', 'Arial', 'sans-serif'",
  bolder: "'SF Pro Text', 'Arial', 'sans-serif'",
  boldest: "'SF Pro Text', 'Arial', 'sans-serif'"
};

var defaults = {
  gradient: gradients.darkBlue,
  fontSize: fontSizes.default,
  buttonHeight: buttonHeights.default,
  textColor: colors.grey30,
  fontFamily: fontFamily.normal,
  fontWeight: fontWeights.default,
  backgroundColor: colors.white,
  borderColor: colors.grey110,
  titleFontSize: titleFontSizes.default
};

var colorTheme = exports.colorTheme = {
  default: colors.grey30,
  primary: colors.darkBlue,
  success: colors.lightGreen,
  warning: colors.yellow,
  error: colors.red,
  danger: colors.red,
  muted: colors.grey80,

  white: colors.white,
  black: colors.black,
  red: colors.red,
  blue: colors.blue,
  darkBlue: colors.darkBlue,
  purple: colors.purple,
  yellow: colors.yellow,
  green: colors.green,

  lighter: colors.grey110,
  light: colors.grey80,
  lightest: colors.grey130
};

var outlineButtonColors = (0, _extends3.default)({}, colorTheme, {
  default: colors.grey110
});

var theme = {
  colors: colorTheme,
  backgroundColors: (0, _extends3.default)({}, colorTheme, {
    default: defaults.backgroundColor
  }),
  borderColors: (0, _extends3.default)({}, colorTheme, {
    default: defaults.borderColor
  }),
  buttonTextColors: buttonTextColors,
  buttonColors: buttonColors,
  buttonGradientColors: buttonGradientColors,
  buttonFontSizes: buttonFontSizes,
  buttonHeights: buttonHeights,
  buttonMinWidths: buttonMinWidths,
  buttonBorderRadius: buttonBorderRadius,
  outlineButtonColors: outlineButtonColors,
  defaults: defaults,
  fontSizes: fontSizes,
  fontFamily: fontFamily,
  fontWeights: fontWeights,
  gradients: gradients,
  shadows: shadows,
  textColors: (0, _extends3.default)({}, colorTheme, {
    default: defaults.textColor
  }),
  titleFontSizes: titleFontSizes
};

exports.default = theme;
exports.ThemeProvider = _ThemeProvider3.default;
//# sourceMappingURL=index.js.map