@helpscout/hsds-react/styles/utilities/color.js

React component library for Help Scout's Design System

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.makeBrandColors = exports.defaultBrandColor = exports.getThemeBrandProp = exports.getColor = exports.rgba = void 0;

var _lodash = _interopRequireDefault(require("lodash.get"));

var _lodash2 = _interopRequireDefault(require("lodash.isnil"));

var _lodash3 = _interopRequireDefault(require("lodash.isnumber"));

var _lodash4 = _interopRequireDefault(require("lodash.isplainobject"));

var _colors = _interopRequireDefault(require("../configs/colors"));

var _color = require("../../utilities/color");

exports.rgba = _color.rgba;

// TODO: remove uses in HS App

/**
 * Retrieves a color/shade from the Color palette
 * @param   {number | string} args The color arguments.
 * @returns {string} The fetched color HEX code.
 */
var getColor = function getColor() {
  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
    args[_key] = arguments[_key];
  }

  var path = args.map(function (arg) {
    return (0, _lodash3.default)(arg) ? arg.toString() : arg;
  });
  var defaultColor = 'currentColor';
  var firstArg = path[0]; // Defaults to Blue "500"

  if (path.length === 0) {
    return defaultColor;
  } // Dot notation


  if (firstArg.indexOf('.') >= 0) {
    path = firstArg.split('.');
  } // Default to shade "default"


  if (path.length === 1) {
    path.push('default');
  }

  var index = 0;
  var color = _colors.default;

  while (!(0, _lodash2.default)(color) && index < path.length) {
    color = color[path[index++]];
  }

  if ((0, _lodash4.default)(color)) {
    color = color['default'];
  }

  return color || defaultColor;
};
/**
 * Retrieves a brand property from ThemeProvider.
 * @param   {Object} props The styled props.
 * @param   {string} path  The props path to retrieve
 * @param   {any} fallback The fallback prop.
 * @returns {any} The fetched property
 */


exports.getColor = getColor;

var getThemeBrandProp = function getThemeBrandProp(props, path, fallback) {
  if (props === void 0) {
    props = {};
  }

  if (path === void 0) {
    path = '';
  }

  if (fallback === void 0) {
    fallback = '';
  }

  return (0, _lodash.default)(props, "theme.brandColor." + path, fallback);
};

exports.getThemeBrandProp = getThemeBrandProp;
var defaultBrandColor = getColor('blue.500');
/**
 * Generates a series of color variables based on a single HEX code used
 * for theming.
 *
 * @param {string} brandColor  The brand color
 * @returns {Object} The generated brandColor props
 */

exports.defaultBrandColor = defaultBrandColor;

var makeBrandColors = function makeBrandColors(brandColor) {
  if (brandColor === void 0) {
    brandColor = defaultBrandColor;
  }

  // Possible Values: Darkest, Dark, Light, Lightest
  var colorShade = (0, _color.getColorShade)(brandColor);
  var isWhite = brandColor.toLowerCase() === '#fff' || brandColor.toLowerCase() === '#ffffff'; // Setup and adjust props based on theme color choice
  // These colors need to be adjusted based on the brandColor's shade.

  var backgroundColorInteractive;
  var backgroundColorHover;
  var backgroundColorActive;
  var backgroundColorUI;
  var backgroundColorUIMuted;
  var backgroundColorUIHover;
  var backgroundColorUIActive;
  var backgroundColorUIFocus;
  var svgPathPrimary;
  var svgPathSecondary;
  var textColor;
  var textColorInteractive;
  var textColorInactive;
  var textColorMuted;

  if (colorShade === 'lightest' || colorShade === 'light') {
    backgroundColorHover = (0, _color.darken)(brandColor, 3);
    backgroundColorActive = (0, _color.darken)(brandColor, 5);
    backgroundColorUI = brandColor;
    backgroundColorUIMuted = (0, _color.darken)(brandColor, 10);
    backgroundColorUIHover = (0, _color.darken)(brandColor, 3);
    backgroundColorUIActive = (0, _color.darken)(brandColor, 6);
    backgroundColorUIFocus = (0, _color.darken)(brandColor, 10);
    svgPathPrimary = (0, _color.darken)(brandColor, 30);
    svgPathSecondary = 'white';
  }

  if (colorShade === 'lightest') {
    backgroundColorInteractive = (0, _color.darken)(brandColor, 5);
    textColor = (0, _color.darken)(brandColor, 70);
    textColorInteractive = (0, _color.darken)(brandColor, 70);
    textColorInactive = (0, _color.darken)(brandColor, 35);
    textColorMuted = (0, _color.darken)(brandColor, 10);

    if (isWhite) {
      textColor = '#394956';
      backgroundColorUIMuted = '#fff';
    }
  }

  if (colorShade === 'light') {
    backgroundColorInteractive = (0, _color.darken)(brandColor, 8);
    textColor = (0, _color.darken)(brandColor, 55);
    textColorInteractive = (0, _color.darken)(brandColor, 55);
    textColorInactive = (0, _color.darken)(brandColor, 35);
    textColorMuted = (0, _color.darken)(brandColor, 10);
  }

  if (colorShade === 'dark' || colorShade === 'darkest') {
    backgroundColorHover = (0, _color.lighten)(brandColor, 3);
    backgroundColorActive = (0, _color.lighten)(brandColor, 5);
    backgroundColorUI = brandColor;
    textColor = 'white';
    textColorInteractive = 'white';
    textColorInactive = (0, _color.lighten)(brandColor, 35);
    textColorMuted = (0, _color.lighten)(brandColor, 10);
  }

  if (colorShade === 'dark') {
    backgroundColorInteractive = (0, _color.darken)(brandColor, 8);
    backgroundColorUIHover = (0, _color.darken)(brandColor, 3);
    backgroundColorUIActive = (0, _color.darken)(brandColor, 6);
    backgroundColorUIFocus = (0, _color.darken)(brandColor, 10);
    backgroundColorUIMuted = (0, _color.darken)(brandColor, 6);
    svgPathPrimary = (0, _color.darken)(brandColor, 30);
    svgPathSecondary = 'white';
  }

  if (colorShade === 'darkest') {
    backgroundColorInteractive = (0, _color.lighten)(brandColor, 16);
    backgroundColorUIHover = (0, _color.lighten)(brandColor, 3);
    backgroundColorUIActive = (0, _color.lighten)(brandColor, 6);
    backgroundColorUIFocus = (0, _color.lighten)(brandColor, 10);
    backgroundColorUIMuted = (0, _color.lighten)(brandColor, 10);
    svgPathPrimary = (0, _color.lighten)(brandColor, 60);
    svgPathSecondary = (0, _color.lighten)(brandColor, 40);
  } // Setup props for style generators


  return {
    backgroundColorActive: backgroundColorActive,
    backgroundColorHover: backgroundColorHover,
    backgroundColorInteractive: backgroundColorInteractive,
    backgroundColorUI: backgroundColorUI,
    backgroundColorUIActive: backgroundColorUIActive,
    backgroundColorUIFocus: backgroundColorUIFocus,
    backgroundColorUIHover: backgroundColorUIHover,
    backgroundColorUIMuted: backgroundColorUIMuted,
    brandColor: brandColor,
    colorShade: colorShade,
    isWhite: isWhite,
    svgPathPrimary: svgPathPrimary,
    svgPathSecondary: svgPathSecondary,
    textColor: textColor,
    textColorInactive: textColorInactive,
    textColorInteractive: textColorInteractive,
    textColorMuted: textColorMuted
  };
};

exports.makeBrandColors = makeBrandColors;