diginet-core-ui 1.3.87 → 1.3.88

package/styles/color-helper.js

@@ -1,11 +1,12 @@
 /* eslint-disable no-undef */
-/**
- * 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]
+
+/**
+ * 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') {
@@ -13,62 +14,72 @@ const clamp = (value, min = 0, max = 1) => {
       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
+/**
+ * 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
+/**
+ * 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
+/**
+ * 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);
+  color = color.substr(5).split(')')[0].split(sep); // Strip the slash if using space-separated syntax
 
-  // 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 {
@@ -76,23 +87,24 @@ export const rgbaToHexA = color => {
       }
     }
   }
+
   let r = (+color[0]).toString(16),
-    g = (+color[1]).toString(16),
-    b = (+color[2]).toString(16),
-    a = Math.round(+color[3] * 255).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
+/**
+ * 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 {
@@ -102,39 +114,47 @@ export const hslToRgb = color => {
   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[]}
+/**
+ * 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 {
@@ -142,15 +162,15 @@ export const decomposeColor = color => {
     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
+/**
+ * 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
@@ -158,6 +178,7 @@ export const recomposeColor = 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);
@@ -165,87 +186,91 @@ export const recomposeColor = color => {
     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.
+/**
+ * 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
+/**
+ * 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
 
-  // 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
+/**
+ * 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
+/**
+ * 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
+/**
+ * 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) {
@@ -253,21 +278,23 @@ export const darken = (color, coefficient) => {
       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
+/**
+ * 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) {
@@ -275,26 +302,27 @@ export const lighten = (color, coefficient) => {
       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
+/**
+ * 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
+/**
+ * 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';
@@ -304,33 +332,35 @@ export const detectColor = color => {
     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
+/**
+ * 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()
+/**
+ * Convert from #ffffff to rgba()
+ * @param hex color - #ffffff
+ * @param {number} alpha - 0.5
+ * @returns {string} color - rgba()
  */
+
 export const hexToRGBA = (hex, alpha) => {
   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);
+      g = parseInt(hex.slice(3, 5), 16),
+      b = parseInt(hex.slice(5, 7), 16);
+
   if (alpha) {
     return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
   } else {

package/styles/colors.js

@@ -1,6 +1,5 @@
-import { hexToRGBA } from "./color-helper";
+import { hexToRGBA } from "./color-helper"; //color brand
 
-//color brand
 export const white = '#fff';
 export const brand1 = '#E9EAF0';
 export const brand2 = '#D4D6E2';
@@ -32,8 +31,8 @@ export const brand26 = '#E4E5ED';
 export const brand27 = '#E0E1EA';
 export const brand28 = '#DBDDE7';
 export const brand29 = '#D7D8E4';
-export const brand30 = '#D2D4E1';
-//// blue
+export const brand30 = '#D2D4E1'; //// blue
+
 export const blue1 = '#E8F3FF';
 export const blue2 = '#D1E7FF';
 export const blue3 = '#B9DBFF';
@@ -54,8 +53,7 @@ export const blue16 = '#C0DEFF';
 export const blue17 = '#B5D9FF';
 export const blue18 = '#ABD3FF';
 export const blue19 = '#A0CEFF';
-export const blue20 = '#96C8FF';
-///dark
+export const blue20 = '#96C8FF'; ///dark
 
 export const dark1 = '#EAEAEC';
 export const dark2 = '#D4D5D9';
@@ -77,9 +75,7 @@ export const dark16 = '#C5C6CC';
 export const dark17 = '#BCBDC3';
 export const dark18 = '#B2B3BB';
 export const dark19 = '#A8AAB2';
-export const dark20 = '#9FA0AA';
-
-/// Info
+export const dark20 = '#9FA0AA'; /// Info
 
 export const info1 = '#CCF5FF';
 export const info2 = '#99E6FF';
@@ -89,9 +85,8 @@ export const info5 = '#0095FF';
 export const info6 = '#0073DB';
 export const info7 = '#0056B7';
 export const info8 = '#003C93';
-export const info9 = '#002B7A';
+export const info9 = '#002B7A'; // success
 
-// success
 export const success1 = '#C9FCD3';
 export const success2 = '#95F9B2';
 export const success3 = '#5FEE96';
@@ -100,9 +95,8 @@ export const success5 = '#00C875';
 export const success6 = '#00AC75';
 export const success7 = '#009070';
 export const success8 = '#007466';
-export const success9 = '#00605E';
+export const success9 = '#00605E'; //warning
 
-//warning
 export const warning1 = '#FFF4CC';
 export const warning2 = '#FFE799';
 export const warning3 = '#FFD666';
@@ -111,9 +105,8 @@ export const warning5 = '#FFAA00';
 export const warning6 = '#DB8A00';
 export const warning7 = '#B76D00';
 export const warning8 = '#935300';
-export const warning9 = '#7A4000';
+export const warning9 = '#7A4000'; //danger
 
-//danger
 export const danger1 = '#FFDCD8';
 export const danger2 = '#FFB3B1';
 export const danger3 = '#FF8A93';
@@ -122,9 +115,8 @@ export const danger5 = '#FF3D71';
 export const danger6 = '#DB2C6C';
 export const danger7 = '#B71E65';
 export const danger8 = '#93135B';
-export const danger9 = '#7A0B54';
+export const danger9 = '#7A0B54'; //FORMAL
 
-//FORMAL
 export const formal1 = '#CED7F6';
 export const formal2 = '#A0B0EE';
 export const formal3 = '#697ccE';