@braineet/ui/dist/cjs/components/theme/utils.js

Braineet design system

"use strict";

exports.__esModule = true;
exports.textColorContrast = exports.getPalette = exports.getContrast = void 0;
var _chromaJs = _interopRequireDefault(require("chroma-js"));
var _isObject = _interopRequireDefault(require("lodash/isObject"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/* eslint-disable import/prefer-default-export */

var getKeyByValue = function getKeyByValue(object, value) {
  return Object.keys(object).find(function (key) {
    return !(0, _isObject.default)(object[key]) && object[key].toLowerCase() === value.toLowerCase();
  });
};
var getContrast = exports.getContrast = function getContrast(bgColor, textColor) {
  try {
    return _chromaJs.default.contrast(bgColor, textColor);
  } catch (error) {
    return 1;
  }
};
var textColorContrast = exports.textColorContrast = function textColorContrast(color, lightColor, darkColor) {
  var textColor = color;
  if (!textColor) return;
  if (textColor.slice(0, 1) === '#') {
    textColor = textColor.slice(1);
  }

  // If a three-character hexcode, make six-character
  if (textColor.length === 3) {
    textColor = textColor.split('').map(function (hex) {
      return hex + hex;
    }).join('');
  }

  // Convert to RGB value
  var r = parseInt(textColor.substr(0, 2), 16);
  var g = parseInt(textColor.substr(2, 2), 16);
  var b = parseInt(textColor.substr(4, 2), 16);

  // Get YIQ ratio
  var yiq = (r * 299 + g * 587 + b * 114) / 1000;
  return yiq >= 128 ? darkColor || 'black' : lightColor || 'white';
};
var getPalette = exports.getPalette = function getPalette(object, color, selector) {
  if (object && (0, _isObject.default)(object) && color) {
    if (object[color] && ['10', '20', '50', '90', '100'].every(function (c) {
      return !color.includes(c);
    })) {
      var paletteGenerated = {
        default: object[color],
        100: object[color + "100"],
        90: object[color + "90"],
        50: object[color],
        20: object[color + "20"],
        10: object[color + "10"]
      };
      if (selector && paletteGenerated[selector]) {
        return paletteGenerated[selector];
      }
      return paletteGenerated;
    }
    if (color.includes('#')) {
      var keyColor = getKeyByValue(object, color);
      if (keyColor) {
        var mainKeyColor = ['10', '20', '50', '90', '100'].some(function (c) {
          return keyColor.includes(c);
        }) ? keyColor.substring(0, keyColor.length - 2) : keyColor;
        var palette = {
          default: object[mainKeyColor + "50"],
          100: object[mainKeyColor + "100"],
          90: object[mainKeyColor + "90"],
          50: object[mainKeyColor + "50"],
          20: object[mainKeyColor + "20"],
          10: object[mainKeyColor + "10"]
        };
        if (selector && palette[selector]) return palette[selector];
        return palette;
      }
      var defaultColor = color;
      var chromaColor = (0, _chromaJs.default)(defaultColor);
      var tint100 = chromaColor.darken(3);
      var tint90 = chromaColor.darken();
      var tint20 = chromaColor.saturate().luminance(0.6);
      var tint10 = chromaColor.saturate(3).luminance(0.9);
      var _paletteGenerated = {
        default: color,
        100: tint100.hex(),
        90: tint90.hex(),
        50: defaultColor,
        20: tint20.hex(),
        10: tint10.hex()
      };
      if (selector && _paletteGenerated[selector]) return _paletteGenerated[selector];
      return _paletteGenerated;
    }
  }
  if (selector) return '';
  return {
    default: color,
    100: '',
    90: '',
    50: '',
    20: '',
    10: ''
  };
};