@evg-b/evg-ui/dist/styles/Color/ColorDetective.js

EVG-UI library inspired by Material Design.

import red from '../../colors/red.js';
import pink from '../../colors/pink.js';
import purple from '../../colors/purple.js';
import deepPurple from '../../colors/deepPurple.js';
import indigo from '../../colors/indigo.js';
import blue from '../../colors/blue.js';
import lightBlue from '../../colors/lightBlue.js';
import cyan from '../../colors/cyan.js';
import teal from '../../colors/teal.js';
import green from '../../colors/green.js';
import lightGreen from '../../colors/lightGreen.js';
import lime from '../../colors/lime.js';
import yellow from '../../colors/yellow.js';
import amber from '../../colors/amber.js';
import orange from '../../colors/orange.js';
import deepOrange from '../../colors/deepOrange.js';
import brown from '../../colors/brown.js';
import grey from '../../colors/gray.js';
import blueGrey from '../../colors/blueGray.js';
import getCssVar from '../../utils/dom/getCssVar.js';
import getСolorNameInTheme from '../../utils/dom/getСolorNameInTheme.js';

var DefaultPaletteColor = '600';
var palettes = {
  'red': red,
  'pink': pink,
  'purple': purple,
  'deepPurple': deepPurple,
  'indigo': indigo,
  'blue': blue,
  'lightBlue': lightBlue,
  'cyan': cyan,
  'teal': teal,
  'green': green,
  'lightGreen': lightGreen,
  'lime': lime,
  'yellow': yellow,
  'amber': amber,
  'orange': orange,
  'deepOrange': deepOrange,
  'brown': brown,
  'gray': grey,
  'blueGray': blueGrey
};
var MapTheme = {
  // 'default': '#FFFFFF00',
  'default': '#FFFFFF',
  // 'default': '#000000',
  'primary': blue[DefaultPaletteColor],
  'secondary': grey[DefaultPaletteColor],
  'background': '#FFFFFF',
  'surface': '#FFFFFF',
  'warn': orange[DefaultPaletteColor],
  'success': green[DefaultPaletteColor],
  'fail': red[DefaultPaletteColor]
};
var themes = ['default', 'primary', 'secondary', 'background', 'surface', 'warn', 'success', 'fail'];
var themeTemplate = themes.reduce(function (name, next) {
  return name + next;
});
var exRGB = /^rgb\((((((((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5]),\s?)){2}|((((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5])\s)){2})((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5]))|((((([1-9]?\d(\.\d+)?)|100|(\.\d+))%,\s?){2}|((([1-9]?\d(\.\d+)?)|100|(\.\d+))%\s){2})(([1-9]?\d(\.\d+)?)|100|(\.\d+))%))\)$/i;
var exRGBA = /^rgba\((((((((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5]),\s?)){3})|(((([1-9]?\d(\.\d+)?)|100|(\.\d+))%,\s?){3}))|(((((1?[1-9]?\d)|10\d|(2[0-4]\d)|25[0-5])\s){3})|(((([1-9]?\d(\.\d+)?)|100|(\.\d+))%\s){3}))\/\s)((0?\.\d+)|[01]|(([1-9]?\d(\.\d+)?)|100|(\.\d+))%)\)$/i;
var exHEX = /^#([\da-f]{3}){1,2}$/i;
var exHEXA = /^#([\da-f]{4}){1,2}$/i;
var exHSL = /^hsl\(((((([12]?[1-9]?\d)|[12]0\d|(3[0-5]\d))(\.\d+)?)|(\.\d+))(deg)?|(0|0?\.\d+)turn|(([0-6](\.\d+)?)|(\.\d+))rad)((,\s?(([1-9]?\d(\.\d+)?)|100|(\.\d+))%){2}|(\s(([1-9]?\d(\.\d+)?)|100|(\.\d+))%){2})\)$/i;
var exHSLA = /^hsla\(((((([12]?[1-9]?\d)|[12]0\d|(3[0-5]\d))(\.\d+)?)|(\.\d+))(deg)?|(0|0?\.\d+)turn|(([0-6](\.\d+)?)|(\.\d+))rad)(((,\s?(([1-9]?\d(\.\d+)?)|100|(\.\d+))%){2},\s?)|((\s(([1-9]?\d(\.\d+)?)|100|(\.\d+))%){2}\s\/\s))((0?\.\d+)|[01]|(([1-9]?\d(\.\d+)?)|100|(\.\d+))%)\)$/i;

function ColorDetective(colorName, grafFromRecursion) {
  //--- valid
  if (typeof colorName !== 'string' || colorName === '') {
    return DetectionRawFormat();
  } //--- valid
  //--- defender Recursion


  var graf = grafFromRecursion ? grafFromRecursion : new Map();

  if (graf.has(colorName)) {
    return DetectionRawFormat();
  } else {
    graf.set(colorName, colorName);
  } //---- defender Recursion


  if (colorName !== '' && themeTemplate.includes(colorName)) {
    var colorNameInTheme = getСolorNameInTheme(colorName);
    var cssVarTheme = getCssVar(colorNameInTheme);
    return cssVarTheme ? ColorDetective(cssVarTheme, graf) : ColorDetective(MapTheme[colorName], graf);
  }

  if (colorName.indexOf('--') === 0) {
    // find css-var
    var cssVar = getCssVar(colorName);
    cssVar = cssVar ? cssVar : MapTheme['default'];
    return ColorDetective(cssVar, graf);
  }

  for (var paletteName in palettes) {
    if (colorName.includes(paletteName)) {
      var paletteNumber = colorName.replace(paletteName, ''); // red700 -> 700

      var pallet = palettes[paletteName][paletteNumber];
      pallet = pallet ? pallet : palettes[paletteName][DefaultPaletteColor];
      return ColorDetective(pallet, graf);
    }
  }

  return DetectionRawFormat(colorName);
}

function DetectionRawFormat() {
  var colorName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
  var format;

  if (exRGB.test(colorName)) {
    format = 'RGB';
  }

  if (exRGBA.test(colorName)) {
    format = 'RGBA';
  }

  if (exHEX.test(colorName)) {
    format = 'HEX';
  }

  if (exHEXA.test(colorName)) {
    format = 'HEXA';
  }

  if (exHSL.test(colorName)) {
    format = 'HSL';
  }

  if (exHSLA.test(colorName)) {
    format = 'HSLA';
  }

  return new ColorRaw(format, colorName);
}

function ColorRaw() {
  var format = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'unknown';
  var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'unknown';
  this.format = format;
  this.value = value;
}

export default ColorDetective;