diginet-core-ui 1.3.66 → 1.3.67

package/components/progress/circular.js

@@ -65,8 +65,8 @@ const getDimension = size => {
     strokeWidth
   };
 };
-/**
- * Determinate circular progress
+/**
+ * Determinate circular progress
  */
 
 
@@ -115,8 +115,8 @@ const Determinate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
     return angle;
   };
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -218,8 +218,8 @@ Determinate.propTypes = {
   width: PropTypes.number
 };
 export const DeterminateCircularProgress = Determinate;
-/**
- * Indeterminate circular progress
+/**
+ * Indeterminate circular progress
  */
 
 const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
@@ -256,8 +256,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-dashoffset: -${r * 124 / 200};
         }
     `;
-  /**
-   * style
+  /**
+   * style
    */
 
 
@@ -288,8 +288,8 @@ const Indeterminate = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             stroke-linecap: round;
             stroke-width: ${circleStrokeW};
         `;
-  /**
-   * component
+  /**
+   * component
    */
 
   const CircleBackgroundMemo = useMemo(() => jsx("circle", {
@@ -332,8 +332,8 @@ Indeterminate.propTypes = {
   width: PropTypes.number
 };
 export const IndeterminateCircularProgress = Indeterminate;
-/**
- * Circular progress
+/**
+ * Circular progress
  */
 
 const CircularProgress = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({

package/components/transfer/index.js

@@ -456,9 +456,9 @@ Transfer.propTypes = {
   /** field name used for icon display */
   iconExpr: string,
 
-  /** field name used for text display<br/>
-   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
-   * Note: don't use 'id - name', return undefined
+  /** field name used for text display<br/>
+   * Example: 'name', '{id} - {name}', '{age} age(s)'<br/>
+   * Note: don't use 'id - name', return undefined
    */
   displayExpr: oneOfType([string, array]),
 

package/components/tree-view/index.js

@@ -227,8 +227,8 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         el.classList[isChecked ? 'add' : 'remove']('disabled');
 
         if (el.classList.contains('DGN-UI-Accordion')) {
-          el.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
-          el.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild.disabled = isChecked;
+          el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.classList[isChecked ? 'add' : 'remove']('disabled');
+          el.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild.disabled = isChecked;
           Array.from(el.childNodes).forEach(e => {
             e.classList[isChecked ? 'add' : 'remove']('treeview-disabled');
           });
@@ -248,7 +248,7 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (node.classList.contains('DGN-UI-Accordion') && node.firstChild.classList.contains('DGN-UI-Accordion-Summary')) {
         var _node$querySelectorAl;
 
-        const checkbox = node.firstChild.firstChild.firstChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
+        const checkbox = node.firstChild.firstChild.lastChild.firstChild.firstChild.firstChild; // Trường hợp phải set về false để xét các input đã check không bao gồm node này
 
         checkbox.firstChild.checked = isChecked;
         const mustDisabled = !!((_node$querySelectorAl = node.querySelectorAll('input:checked')) !== null && _node$querySelectorAl !== void 0 && _node$querySelectorAl.length); // Nếu có ít nhất một input con được check thì phải checked cho input này
@@ -299,14 +299,18 @@ const TreeView = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setValueIntoInput = data => {
+    var _clearIconRef$current2;
+
     if (!data || !(data !== null && data !== void 0 && data.length)) {
+      var _clearIconRef$current;
+
       inputValueRef.current.value = '';
-      clearIconRef.current.style.opacity = 0;
+      if ((_clearIconRef$current = clearIconRef.current) !== null && _clearIconRef$current !== void 0 && _clearIconRef$current.element) clearIconRef.current.element.style.opacity = 0;
       return;
     }
 
-    if (clearIconRef.current.style.opacity === '0') {
-      clearIconRef.current.style.opacity = null;
+    if ((_clearIconRef$current2 = clearIconRef.current) !== null && _clearIconRef$current2 !== void 0 && _clearIconRef$current2.element && clearIconRef.current.element.style.opacity === '0') {
+      clearIconRef.current.element.style.opacity = null;
     }
 
     let result = '';

package/icons/basic.js

@@ -2915,6 +2915,34 @@ export const List = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ListAlt = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M20.1 3H3.9C3.4 3 3 3.4 3 3.9V20.1C3 20.5 3.4 21 3.9 21H20.1C20.5 21 21 20.5 21 20.1V3.9C21 3.4 20.5 3 20.1 3ZM9 7H7V9H9V7ZM17 7H11V9H17V7ZM17 11H11V13H17V11ZM11 15H17V17H11V15ZM7 11H9V13H7V11ZM9 15H7V17H9V15ZM5 19H19V5H5V19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 18,
+    height: height || 18,
+    viewBox: "0 0 18 18",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.1 0H0.9C0.4 0 0 0.4 0 0.9V17.1C0 17.5 0.4 18 0.9 18H17.1C17.5 18 18 17.5 18 17.1V0.9C18 0.4 17.5 0 17.1 0ZM6 4H4V6H6V4ZM14 4H8V6H14V4ZM14 8H8V10H14V8ZM8 12H14V14H8V12ZM4 8H6V10H4V8ZM6 12H4V14H6V12ZM2 16H16V2H2V16Z",
+    fill: colors[color] || color
+  }));
+});
 export const ListApproval = /*#__PURE__*/memo(({
   width,
   height,
@@ -3720,6 +3748,30 @@ export const NotificationV2 = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const Undo = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M12.5 8C9.85 8 7.45 8.99 5.6 10.6L2 7V16H11L7.38 12.38C8.77 11.22 10.54 10.5 12.5 10.5C16.04 10.5 19.05 12.81 20.1 16L22.47 15.22C21.08 11.03 17.15 8 12.5 8Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 21,
+    height: height || 9,
+    viewBox: "0 0 21 9",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M10.5 1C7.85 1 5.45 1.99 3.6 3.6L0 0V9H9L5.38 5.38C6.77 4.22 8.54 3.5 10.5 3.5C14.04 3.5 17.05 5.81 18.1 9L20.47 8.22C19.08 4.03 15.15 1 10.5 1Z",
+    fill: colors[color] || color
+  }));
+});
 export const Unlock = /*#__PURE__*/memo(({
   width,
   height,
@@ -4276,6 +4328,46 @@ export const PersonRate = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const PersonSetting = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M11 11C13.21 11 15 9.21 15 7C15 4.79 13.21 3 11 3C8.79 3 7 4.79 7 7C7 9.21 8.79 11 11 11Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M11 13C8.33 13 3 14.34 3 17V19H12.8027C12.2922 18.1175 12 17.0929 12 16C12 14.9646 12.2623 13.9904 12.724 13.1403C12.0912 13.0468 11.4991 13 11 13Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M21.0851 16C21.0851 16.136 21.0727 16.264 21.0563 16.392L21.924 17.052C22.0021 17.112 22.0227 17.22 21.9733 17.308L21.1509 18.692C21.1015 18.78 20.9946 18.816 20.9 18.78L19.8761 18.38C19.6622 18.536 19.432 18.672 19.1811 18.772L19.0248 19.832C19.0125 19.928 18.9262 20 18.8234 20H17.1785C17.0757 20 16.9893 19.928 16.977 19.832L16.8207 18.772C16.5699 18.672 16.3396 18.54 16.1257 18.38L15.1018 18.78C15.0113 18.812 14.9003 18.78 14.851 18.692L14.0285 17.308C13.9792 17.22 13.9997 17.112 14.0779 17.052L14.9455 16.392C14.9291 16.264 14.9167 16.132 14.9167 16C14.9167 15.868 14.9291 15.736 14.9455 15.608L14.0779 14.948C13.9997 14.888 13.9751 14.78 14.0285 14.692L14.851 13.308C14.9003 13.22 15.0072 13.184 15.1018 13.22L16.1257 13.62C16.3396 13.464 16.5699 13.328 16.8207 13.228L16.977 12.168C16.9893 12.072 17.0757 12 17.1785 12H18.8234C18.9262 12 19.0125 12.072 19.0248 12.168L19.1811 13.228C19.432 13.328 19.6622 13.46 19.8761 13.62L20.9 13.22C20.9905 13.188 21.1015 13.22 21.1509 13.308L21.9733 14.692C22.0227 14.78 22.0021 14.888 21.924 14.948L21.0563 15.608C21.0727 15.736 21.0851 15.864 21.0851 16ZM16.5616 16C16.5616 16.772 17.2073 17.4 18.0009 17.4C18.7946 17.4 19.4402 16.772 19.4402 16C19.4402 15.228 18.7946 14.6 18.0009 14.6C17.2073 14.6 16.5616 15.228 16.5616 16Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 19,
+    height: height || 17,
+    viewBox: "0 0 19 17",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 8C10.21 8 12 6.21 12 4C12 1.79 10.21 0 8 0C5.79 0 4 1.79 4 4C4 6.21 5.79 8 8 8Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 10C5.33 10 0 11.34 0 14V16H9.80269C9.29218 15.1175 9 14.0929 9 13C9 11.9646 9.26227 10.9904 9.724 10.1403C9.09118 10.0468 8.49911 10 8 10Z",
+    fill: colors[color] || color
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M18.0851 13C18.0851 13.136 18.0727 13.264 18.0563 13.392L18.924 14.052C19.0021 14.112 19.0227 14.22 18.9733 14.308L18.1509 15.692C18.1015 15.78 17.9946 15.816 17.9 15.78L16.8761 15.38C16.6622 15.536 16.432 15.672 16.1811 15.772L16.0248 16.832C16.0125 16.928 15.9262 17 15.8234 17H14.1785C14.0757 17 13.9893 16.928 13.977 16.832L13.8207 15.772C13.5699 15.672 13.3396 15.54 13.1257 15.38L12.1018 15.78C12.0113 15.812 11.9003 15.78 11.851 15.692L11.0285 14.308C10.9792 14.22 10.9997 14.112 11.0779 14.052L11.9455 13.392C11.9291 13.264 11.9167 13.132 11.9167 13C11.9167 12.868 11.9291 12.736 11.9455 12.608L11.0779 11.948C10.9997 11.888 10.9751 11.78 11.0285 11.692L11.851 10.308C11.9003 10.22 12.0072 10.184 12.1018 10.22L13.1257 10.62C13.3396 10.464 13.5699 10.328 13.8207 10.228L13.977 9.168C13.9893 9.072 14.0757 9 14.1785 9H15.8234C15.9262 9 16.0125 9.072 16.0248 9.168L16.1811 10.228C16.432 10.328 16.6622 10.46 16.8761 10.62L17.9 10.22C17.9905 10.188 18.1015 10.22 18.1509 10.308L18.9733 11.692C19.0227 11.78 19.0021 11.888 18.924 11.948L18.0563 12.608C18.0727 12.736 18.0851 12.864 18.0851 13ZM13.5616 13C13.5616 13.772 14.2073 14.4 15.0009 14.4C15.7946 14.4 16.4402 13.772 16.4402 13C16.4402 12.228 15.7946 11.6 15.0009 11.6C14.2073 11.6 13.5616 12.228 13.5616 13Z",
+    fill: colors[color] || color
+  }));
+});
 export const PersonSync = /*#__PURE__*/memo(({
   width,
   height,
@@ -5547,6 +5639,34 @@ export const View = /*#__PURE__*/memo(({
     fill: colors[color] || color
   }));
 });
+export const ViewHeadline = /*#__PURE__*/memo(({
+  width,
+  height,
+  color = '#7F828E',
+  viewBox = false
+}) => {
+  return viewBox ? /*#__PURE__*/React.createElement("svg", {
+    width: width || 24,
+    height: height || 24,
+    viewBox: "0 0 24 24",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4 7V5H20V7H4ZM4 11H20V9H4V11ZM20 15H4V13H20V15ZM20 19H4V17H20V19Z",
+    fill: colors[color] || color
+  })) : /*#__PURE__*/React.createElement("svg", {
+    width: width || 16,
+    height: height || 14,
+    viewBox: "0 0 16 14",
+    fill: "none"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M0 2V0H16V2H0ZM0 6H16V4H0V6ZM16 10H0V8H16V10ZM16 14H0V12H16V14Z",
+    fill: colors[color] || color
+  }));
+});
 export const UnView = /*#__PURE__*/memo(({
   width,
   height,

package/icons/effect.js

@@ -45,15 +45,10 @@ const Icon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
             height: ${width ? isNaN(width) ? width : width + 'px' : '24px'};
             border: 1px dashed ${rest};
         `;
-  useImperativeHandle(reference, () => {
-    const currentRef = ref.current || {};
-    const _instance = {}; // methods
-
-    _instance.__proto__ = {}; // hidden methods
-
-    currentRef.instance = _instance;
-    return currentRef;
-  });
+  useImperativeHandle(reference, () => ({
+    element: ref.current,
+    instance: {}
+  }));
   return useMemo(() => {
     if (!name) return null;
     let node = null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "diginet-core-ui",
-  "version": "1.3.66",
+  "version": "1.3.67",
   "description": "The DigiNet core ui",
   "homepage": "https://diginet.com.vn",
   "main": "index.js",

package/readme.md

@@ -38,6 +38,20 @@ npm test
 ```
 
 ## Changelog
+## 1.3.67
+- \[Added\]: Icon – ListAlt, PersonSetting, Undo, ViewHeadline
+- \[Changed\]: OptionWrapper – Update OptionWrapper
+- \[Changed\]: Accordion – Change align AccordionSummary content to center
+- \[Changed\]: Dropdown – Add props searchExpr, searchMode
+- \[Changed\]: Row, Container – Update row spacing, Add component Container
+- \[Changed\]: Dropdown – Add hover tooltip when selected text value too long
+- \[Changed\]: Card – Update design
+- \[Changed\]: HelperText – Add props of Typography
+- \[Changed\]: Dropdown – Add hidden render item
+- \[Fixed\]: Button – Fix typography by size
+- \[Fixed\]: TECH – Fix babel warning
+- \[Fixed\]: Dropdown – Fix dropdown render out of screen
+
 ## 1.3.66
 - \[Changed\]: THEME – Update makestyles
 - \[Changed\]: THEME – Refactoring makeStyles

package/styles/color-helper.js

@@ -1,12 +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') {
@@ -17,11 +17,11 @@ const clamp = (value, min = 0, max = 1) => {
 
   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
  */
 
 
@@ -43,11 +43,11 @@ 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
  */
 
 
@@ -61,11 +61,11 @@ export const rgbToHex = color => {
   } = 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 => {
@@ -98,11 +98,11 @@ export const rgbaToHexA = color => {
   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 => {
@@ -130,13 +130,13 @@ export const hslToRgb = color => {
     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 => {
@@ -162,13 +162,13 @@ 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 => {
@@ -189,14 +189,14 @@ export const recomposeColor = color => {
 
   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) => {
@@ -204,14 +204,14 @@ export const getContrastRatio = (foreground, background) => {
   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 => {
@@ -225,25 +225,25 @@ export const getLuminance = color => {
 
   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) => {
@@ -257,12 +257,12 @@ export const fade = (color, value) => {
   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) => {
@@ -281,12 +281,12 @@ export const darken = (color, 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) => {
@@ -305,22 +305,22 @@ export const lighten = (color, 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 => {
@@ -335,11 +335,11 @@ export const detectColor = color => {
 
   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 => {
@@ -347,11 +347,11 @@ export const isColorName = color => {
   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) => {

package/styles/utils.js

@@ -1,10 +1,22 @@
-/**
- * parse to pixel
- *
- * @param {number} value
- * @returns {string}
+import { color as colors } from './colors';
+/**
+ * Parse to pixel
+ *
+ * @param {number} vl
+ * @returns {string}
  */
+
 export const parseToPixel = vl => {
   if (!vl) return '1px';
   return typeof vl === 'string' ? vl : `${vl}px`;
+};
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
+ */
+
+export const getColor = cl => {
+  return colors[cl] || cl;
 };