diginet-core-ui 1.4.39 → 1.4.40

package/styles/animations.js

@@ -1,13 +0,0 @@
-import { keyframes } from '@emotion/core';
-const fadeIn = keyframes`
-	from {
-		opacity: 0;
-	}
-
-	to {
-		opacity: 1;
-	}
-`;
-export const animations = {
-  fadeIn
-};

package/styles/color-helper.js

@@ -1,343 +0,0 @@
-/* eslint-disable no-undef */
-
-// import { getColor } from './utils';
-
-/**
- * Returns a number whose value is limited to the given range.
- *
- * @param {number} value The value to be clamped
- * @param {number} min The lower boundary of the output range
- * @param {number} max The upper boundary of the output range
- * @returns {number} A number in the range [min, max]
- */
-const clamp = (value, min = 0, max = 1) => {
-  if (process.env.NODE_ENV !== 'production') {
-    if (value < min || value > max) {
-      console.error(`DigiNet-CORE-UI: The value provided ${value} is out of range [${min}, ${max}].`);
-    }
-  }
-  return Math.min(Math.max(min, value), max);
-};
-
-/**
- * Converts a color from CSS hex format to CSS rgb format.
- *
- * @param {string} color - Hex color, i.e. #nnn or #nnnnnn
- * @returns {string} A CSS rgb color string
- */
-export const hexToRgb = color => {
-  color = color.substr(1);
-  const re = new RegExp(`.{1,${color.length >= 6 ? 2 : 1}}`, 'g');
-  let colors = color.match(re);
-  if (colors && colors[0].length === 1) {
-    colors = colors.map(n => n + n);
-  }
-  return colors ? `rgb${colors.length === 4 ? 'a' : ''}(${colors.map((n, index) => {
-    return index < 3 ? parseInt(n, 16) : Math.round(parseInt(n, 16) / 255 * 1000) / 1000;
-  }).join(', ')})` : '';
-};
-const intToHex = int => {
-  const hex = int.toString(16);
-  return hex.length === 1 ? `0${hex}` : hex;
-};
-
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGB color, i.e. rgb(n, n, n)
- * @returns {string} A CSS rgb color string, i.e. #nnnnnn
- */
-export const rgbToHex = color => {
-  if (color.indexOf('#') === 0) {
-    return color;
-  }
-  const {
-    values
-  } = decomposeColor(color);
-  return `#${values.map(n => intToHex(n)).join('')}`;
-};
-/**
- * Converts a color from CSS rgb format to CSS hex format.
- *
- * @param {string} color - RGBA color, i.e. rgba(n, n, n, f)
- * @returns {string} A CSS rgb A color string, i.e. #nnnnnnnn
- */
-export const rgbaToHexA = color => {
-  let sep = color.indexOf(',') > -1 ? ',' : ' ';
-  color = color.substr(5).split(')')[0].split(sep);
-
-  // Strip the slash if using space-separated syntax
-  if (color.indexOf('/') > -1) color.splice(3, 1);
-  for (let R in color) {
-    let r = color[R];
-    if (r.indexOf('%') > -1) {
-      let p = r.substr(0, r.length - 1) / 100;
-      if (R < 3) {
-        color[R] = Math.round(p * 255);
-      } else {
-        color[R] = p;
-      }
-    }
-  }
-  let r = (+color[0]).toString(16),
-    g = (+color[1]).toString(16),
-    b = (+color[2]).toString(16),
-    a = Math.round(+color[3] * 255).toString(16);
-  if (r.length == 1) r = '0' + r;
-  if (g.length == 1) g = '0' + g;
-  if (b.length == 1) b = '0' + b;
-  if (a.length == 1) a = '0' + a;
-  return '#' + r + g + b + a;
-};
-
-/**
- * Converts a color from hsl format to rgb format.
- *
- * @param {string} color - HSL color values
- * @returns {string} rgb color values
- */
-export const hslToRgb = color => {
-  color = decomposeColor(color);
-  const {
-    values
-  } = color;
-  const h = values[0];
-  const s = values[1] / 100;
-  const l = values[2] / 100;
-  const a = s * Math.min(l, 1 - l);
-  const f = (n, k = (n + h / 30) % 12) => l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
-  let type = 'rgb';
-  const rgb = [Math.round(f(0) * 255), Math.round(f(8) * 255), Math.round(f(4) * 255)];
-  if (color.type === 'hsla') {
-    type += 'a';
-    rgb.push(values[3]);
-  }
-  return recomposeColor({
-    type,
-    values: rgb
-  });
-};
-
-/**
- * Returns an object with the type and values of a color.
- *
- * Note: Does not support rgb % values.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {object} - A  color object: {type: string, values: number[]}
- */
-export const decomposeColor = color => {
-  if (color.type) {
-    return color;
-  }
-  if (color.charAt(0) === '#') {
-    return decomposeColor(hexToRgb(color));
-  }
-  const marker = color.indexOf('(');
-  const type = color.substring(0, marker);
-  if (['rgb', 'rgba', 'hsl', 'hsla'].indexOf(type) === -1) {
-    throw 'DigiNet-CORE-UI: Unsupported `%s` color.\n' + 'We support the following formats: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla().', color;
-  }
-  let values = color.substring(marker + 1, color.length - 1).split(',');
-  values = values.map(value => parseFloat(value));
-  return {
-    type,
-    values
-  };
-};
-
-/**
- * Converts a color object with type and values to a string.
- *
- * @param {object} color - Decomposed color
- * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
- * @param {array} color.values - [n,n,n] or [n,n,n,n]
- * @returns {string} A CSS color string
- */
-export const recomposeColor = color => {
-  const {
-    type
-  } = color;
-  let {
-    values
-  } = color;
-  if (type.indexOf('rgb') !== -1) {
-    // Only convert the first 3 values to int (i.e. not alpha)
-    values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
-  } else if (type.indexOf('hsl') !== -1) {
-    values[1] = `${values[1]}%`;
-    values[2] = `${values[2]}%`;
-  }
-  return `${type}(${values.join(', ')})`;
-};
-
-/**
- * Calculates the contrast ratio between two colors.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- *
- * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} A contrast ratio value in the range 0 - 21.
- */
-export const getContrastRatio = (foreground, background) => {
-  const lumA = getLuminance(foreground);
-  const lumB = getLuminance(background);
-  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
-};
-
-/**
- * The relative brightness of any point in a color space,
- * normalized to 0 for darkest black and 1 for lightest white.
- *
- * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {number} The relative brightness of the color in the range 0 - 1
- */
-export const getLuminance = color => {
-  color = decomposeColor(color);
-  let rgb = color.type === 'hsl' ? decomposeColor(hslToRgb(color)).values : color.values;
-  rgb = rgb.map(val => {
-    val /= 255; // normalized
-    return val <= 0.03928 ? val / 12.92 : ((val + 0.055) / 1.055) ** 2.4;
-  });
-
-  // Truncate at 3 digits
-  return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
-};
-
-/**
- * Darken or lighten a color, depending on its luminance.
- * Light colors are darkened, dark colors are lightened.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export const emphasize = (color, coefficient = 0.15) => {
-  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
-};
-
-/**
- * Set the absolute transparency of a color.
- * Any existing alpha values are overwritten.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} value - value to set the alpha channel to in the range 0 -1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export const fade = (color, value) => {
-  color = decomposeColor(color);
-  value = clamp(value);
-  if (color.type === 'rgb' || color.type === 'hsl') {
-    color.type += 'a';
-  }
-  color.values[3] = value;
-  return recomposeColor(color);
-};
-
-/**
- * Darkens a color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export const darken = (color, coefficient) => {
-  if (isColorName(color)) color = isColorName(color);
-  if (!isColor(color)) return;
-  color = decomposeColor(color);
-  coefficient = clamp(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
-    color.values[2] *= 1 - coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
-    for (let i = 0; i < 3; i += 1) {
-      color.values[i] *= 1 - coefficient;
-    }
-  }
-  return recomposeColor(color);
-};
-
-/**
- * Lightens a color.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @param {number} coefficient - multiplier in the range 0 - 1
- * @returns {string} A CSS color string. Hex input values are returned as rgb
- */
-export const lighten = (color, coefficient) => {
-  if (isColorName(color)) color = isColorName(color);
-  if (!isColor(color)) return;
-  color = decomposeColor(color);
-  coefficient = clamp(coefficient);
-  if (color.type.indexOf('hsl') !== -1) {
-    color.values[2] += (100 - color.values[2]) * coefficient;
-  } else if (color.type.indexOf('rgb') !== -1) {
-    for (let i = 0; i < 3; i += 1) {
-      color.values[i] += (255 - color.values[i]) * coefficient;
-    }
-  }
-  return recomposeColor(color);
-};
-
-/**
- * Validate a color string.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {boolean} is a color
- */
-export const isColor = color => {
-  const regex = /(^#([0-9a-f]{3}|[0-9a-f]{4}|[0-9a-f]{6}|[0-9a-f]{8})$|^(rgb|hsl)a\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$|^(rgb|hsl)\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$)/gim;
-  return regex.test(color);
-};
-
-/**
- * Detect a color string type.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {string | false} color type, string or false
- */
-export const detectColor = color => {
-  if (color && isColor(color)) {
-    if (/^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(color)) return 'hex';
-    if (/^#([0-9a-f]{4}|[0-9a-f]{8})$/i.test(color)) return 'hexa';
-    if (/^rgb\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$/i.test(color)) return 'rgb';
-    if (/^rgba\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$/i.test(color)) return 'rgba';
-    if (/^hsl\(\d{1,3}%?(,\s?\d{1,3}%?){2}\)$/i.test(color)) return 'hsl';
-    if (/^hsla\((\d{1,3}%?,\s?){3}(1|0|0?\.\d+)\)$/i.test(color)) return 'hsla';
-  }
-  return null;
-};
-
-/**
- * Validate a color name.
- *
- * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
- * @returns {boolean} is a color
- */
-export const isColorName = color => {
-  let ctx = document.createElement('canvas').getContext('2d');
-  ctx.fillStyle = color;
-  return ctx.fillStyle === '#000000' ? false : ctx.fillStyle;
-};
-
-/**
- * Convert from #ffffff to rgba()
- * @param hex color - #ffffff
- * @param {number} alpha - 0.5
- * @returns {string} color - rgba()
- */
-export const hexToRGBA = (hex, alpha) => {
-  // hex = getColor(hex);
-  if (isColorName(hex)) hex = isColorName(hex);
-  if (!isColor(hex)) return;
-  var r = parseInt(hex.slice(1, 3), 16),
-    g = parseInt(hex.slice(3, 5), 16),
-    b = parseInt(hex.slice(5, 7), 16);
-  if (alpha) {
-    return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
-  } else {
-    return 'rgb(' + r + ', ' + g + ', ' + b + ')';
-  }
-};