diginet-core-ui 1.4.39 → 1.4.40

package/src/styles/animations.js

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

package/src/styles/color-helper.js

@@ -0,0 +1,364 @@
+/* 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 + ')';
+    }
+};