diginet-core-ui 1.4.14-beta.2 → 1.4.14-beta.3

package/components/badge/index.js

@@ -5,28 +5,15 @@ import { Icon } from "./..";
 import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { itemsCenter, boxBorder, borderRadius4px, flexRow, flexWrap, displayInlineFlex, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative } from "../../styles/general";
-import { useColor as colors, useTheme } from "../../theme";
-import { classNames } from "../../utils";
-const {
-  colors: {
-    system: {
-      rest: systemRest,
-      white: systemWhite
-    }
-  },
-  typography: {
-    paragraph1,
-    paragraph2,
-    paragraph3
-  },
-  spacing
-} = useTheme();
-const colorMap = new Map([['default', systemRest]]);
+import { bgColor, borderRadius4px, boxBorder, displayInlineFlex, flexRow, flexWrap, itemsCenter, justifyCenter, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, textColor } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
+const colorMap = new Map([['default', 'system/rest']]);
 const iconSizeMap = new Map([['medium', 24], ['large', 32], ['giant', 40]]);
 const dotSizeMap = new Map([['medium', 8], ['large', 10], ['giant', 12]]);
 const dotIndentMap = new Map([['medium', 4], ['large', 2]]);
-const typographySizeMap = new Map([['medium', paragraph3], ['large', paragraph2], ['giant', paragraph1]]);
+const typographySizeMap = new Map([['medium', 'paragraph3'], ['large', 'paragraph2'], ['giant', 'paragraph1']]);
 const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) => {
   const halfDotSize = dotSize / 2;
   const {
@@ -70,32 +57,45 @@ const calDotPos = (anchorOrigin, contentDirection, dotSize, hasContent, size) =>
     }
   }
 };
-const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  anchorOrigin,
-  children,
-  className,
-  color,
-  content,
-  contentDirection,
-  iconProps,
-  id,
-  invisible,
-  max,
-  name,
-  showZero,
-  size,
-  style,
-  ...props
-}, reference) => {
+const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+  const {
+    colors,
+    typography
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Badge'
+  });
+  const {
+    action = {},
+    anchorOrigin,
+    children,
+    className,
+    color,
+    content,
+    contentDirection,
+    iconProps,
+    id,
+    invisible,
+    max,
+    name,
+    showZero,
+    size,
+    style,
+    ...other
+  } = props;
   const ref = useRef(null);
-  const typographySize = typographySizeMap.get(size);
+  const typographySize = typography[typographySizeMap.get(size)];
   const iconSize = iconSizeMap.get(size);
   const dotSize = content || content === 0 && showZero ? dotSizeMap.get(size) + 8 : dotSizeMap.get(size);
-  const dotColor = colors[color] || colorMap.get(color) || color;
+  let dotColor = colorMap.get(color) || color;
+  dotColor = getProp(colors, dotColor, dotColor);
   const dotPos = calDotPos(anchorOrigin, !children && name ? 'right' : contentDirection, dotSize, content || content === 0, size);
-  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor);
+  const _BadgeNumberCSS = BadgeNumberCSS(typographySize, children, name, dotSize, dotColor, theme);
   const _BadgeRootCSS = BadgeRootCSS(children, name, dotPos, _BadgeNumberCSS.name);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
@@ -125,16 +125,19 @@ const Badge = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id,
       className: classNames('DGN-UI-Badge', className),
       style: style,
-      ...props
+      ...other
     }, jsx("span", {
       className: 'DGN-UI-Badge-Children'
     }, node), content !== undefined && !invisible ? jsx("span", {
       css: _BadgeNumberCSS,
       className: 'DGN-UI-Badge-Dot'
     }, max && content > max ? max + '+' : content === 0 && !showZero ? null : content) : null);
-  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, showZero, size, style, props]);
+  }, [anchorOrigin, children, className, color, content, contentDirection, iconProps, id, invisible, max, name, other, showZero, size, style, theme]);
 }));
-const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => css`
+const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor, {
+  colors,
+  spacing
+}) => css`
     ${typographySize};
     ${flexRow};
     ${itemsCenter};
@@ -143,9 +146,9 @@ const BadgeNumberCSS = (typographySize, children, name, dotSize, dotColor) => cs
     ${boxBorder};
     ${pointerEventsNone};
     ${children || name ? positionAbsolute : positionRelative};
-    color: ${systemWhite};
+    ${textColor(getProp(colors, 'system/standard'))};
+    ${bgColor(dotColor)};
     ${parseMinWidthHeight(dotSize)};
-    background-color: ${dotColor};
     border-radius: ${dotSize / 2}px;
     padding: ${spacing([0, 1])};
 `;
@@ -162,21 +165,20 @@ const BadgeRootCSS = (children, name, dotPos, BadgeNumberCSSName) => css`
         ${(children || name) && dotPos};
     }
 `;
-Badge.defaultProps = {
-  anchorOrigin: {
-    vertical: 'top',
-    horizontal: 'right'
-  },
-  className: '',
-  color: 'default',
-  content: null,
-  contentDirection: 'left',
-  invisible: false,
-  max: 99,
-  showZero: false,
-  size: 'medium',
-  style: {}
-};
+
+// Badge.defaultProps = {
+//     anchorOrigin: { vertical: 'top', horizontal: 'right' },
+//     className: '',
+//     color: 'default',
+//     content: null,
+//     contentDirection: 'left',
+//     invisible: false,
+//     max: 99,
+//     showZero: false,
+//     size: 'medium',
+//     style: {},
+// };
+
 Badge.propTypes = {
   /** The anchor of the badge. */
   anchorOrigin: PropTypes.shape({
@@ -201,28 +203,28 @@ Badge.propTypes = {
   name: PropTypes.string,
   /** Controls whether the badge is hidden when `content` is zero. */
   showZero: PropTypes.bool,
-  /** Size of the components.
-   *
-   * * medium (dot 8px, typography p3)
-   * * large (button 10px, typography p2)
-   * * giant (button 12px, typography p1)
+  /** Size of the components.
+   *
+   * * medium (dot 8px, typography p3)
+   * * large (button 10px, typography p2)
+   * * giant (button 12px, typography p1)
    * */
   size: PropTypes.oneOf(['medium', 'large', 'giant']),
   /** Style inline of component. */
   style: PropTypes.object
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };
 

package/components/breadcrumb/index.js

@@ -7,28 +7,41 @@ import { Icon } from "../../icons/effect";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { hexToRGBA } from "../../styles/color-helper";
-import { alphaPseudo, bgColor, borderRadius, cursorPointer, displayFlex, flexWrap, gap, itemsCenter, listNone, mg, pd, pdl, pdr, textColor, userSelectNone } from "../../styles/general";
-import { useTypography as typography } from "../../theme";
-import { classNames } from "../../utils";
+import { alphaPseudo, bgColor, borderRadius, cursorPointer, displayFlex, flexWrap, itemsCenter, listNone, textColor, userSelectNone } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
 const sizeIconMap = new Map([['tiny', 16], ['small', 18], ['medium', 20]]);
 const sizeTypographyPMap = new Map([['tiny', 'p3'], ['small', 'p2'], ['medium', 'p1']]);
 const sizeTypographyHMap = new Map([['tiny', 'h5'], ['small', 'h4'], ['medium', 'h3']]);
-const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  color,
-  data,
-  id,
-  itemsAfterCollapse,
-  itemsBeforeCollapse,
-  maxItems,
-  separator,
-  size,
-  style
-}, reference) => {
+const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
-  if (color === 'default') color = 'system/rest';
+  const theme = useTheme();
+  const {
+    colors
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Breadcrumb'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    color: colorProp,
+    data,
+    id,
+    itemsAfterCollapse,
+    itemsBeforeCollapse,
+    maxItems,
+    separator,
+    size,
+    style
+  } = props;
+  const color = colorProp === 'default' ? 'system/rest' : colorProp;
+  const colorCode = getProp(colors, color, color);
   const ref = useRef(null);
   const sizeIcon = sizeIconMap.get(size);
   const sizeTypographyP = sizeTypographyPMap.get(size);
@@ -36,7 +49,8 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   // const [expanded, setExpanded] = React.useState(false);
 
-  const _BreadcrumbLiCSS = BreadcrumbLiCSS(color, sizeTypographyP, sizeTypographyH);
+  const _BreadcrumbOlCSS = BreadcrumbOlCSS(colorCode, theme);
+  const _BreadcrumbLiCSS = BreadcrumbLiCSS(colorCode, sizeTypographyP, sizeTypographyH, theme);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -51,7 +65,7 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     name: separator,
     width: sizeIcon,
     height: sizeIcon,
-    color: color,
+    color: colorCode,
     viewBox: true
   }) : separator;
   const renderItemsBeforeAndAfter = allItems => {
@@ -81,7 +95,7 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         name: 'MoreHoriz',
         width: sizeIcon,
         height: sizeIcon,
-        color: color
+        color: colorCode
       }), renderSeparator)
     }),
     // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
@@ -94,7 +108,7 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   }, item !== null && item !== void 0 && item.icon ? jsx(Icon, {
     className: 'DGN-UI-Breadcrumb-li-icon',
     name: item === null || item === void 0 ? void 0 : item.icon,
-    color: color,
+    color: colorCode,
     width: sizeIcon,
     height: sizeIcon
   }) : null, jsx(Typography, {
@@ -123,36 +137,38 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames('DGN-UI-Breadcrumb', className)
     }, jsx("ol", {
-      css: BreadcrumbOlCSS(color),
+      css: _BreadcrumbOlCSS,
       className: 'DGN-UI-Breadcrumb-ol'
     },
     // expanded ||
     maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems)));
-  }, [children, className, color, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, size, style
-  // expanded,
-  ]);
+  }, [children, className, colorProp, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, size, style, theme]);
 }));
-
-const BreadcrumbOlCSS = color => css`
+const BreadcrumbOlCSS = (color, {
+  spacing
+}) => css`
     ${displayFlex};
     ${flexWrap};
     ${itemsCenter};
-    ${pd(0)};
-    ${mg(0)};
+    padding: ${spacing([0])};
+    margin: ${spacing([0])};
     ${listNone};
     ${textColor(color)};
 `;
-const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH) => css`
+const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH, {
+  spacing,
+  typography
+}) => css`
     ${typography[sizeTypographyP]};
     ${displayFlex};
     ${itemsCenter};
-    ${gap('4px')};
-    ${pdl([1])};
+    gap: ${spacing([1])};
+    padding-left: ${spacing([1])};
     ${borderRadius(4)};
     ${cursorPointer};
     ${userSelectNone};
     &:last-child {
-        ${pdr([1])};
+        padding-right: ${spacing([1])};
         ${typography[sizeTypographyH]};
     }
     ${Object.keys(alphaPseudo).map(key => css`
@@ -161,16 +177,18 @@ const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH) => css`
                 }
             `)}
 `;
-Breadcrumb.defaultProps = {
-  className: '',
-  color: 'default',
-  itemsAfterCollapse: 1,
-  itemsBeforeCollapse: 1,
-  maxItems: 8,
-  separator: 'ArrowRight',
-  size: 'medium',
-  style: {}
-};
+
+// Breadcrumb.defaultProps = {
+//     className: '',
+//     color: 'default',
+//     itemsAfterCollapse: 1,
+//     itemsBeforeCollapse: 1,
+//     maxItems: 8,
+//     separator: 'ArrowRight',
+//     size: 'medium',
+//     style: {},
+// };
+
 Breadcrumb.propTypes = {
   /** The content of the component. */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),

package/components/button/icon.js

@@ -6,10 +6,11 @@ import OptionWrapper from "../others/option-wrapper";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
 import { hexToRGBA } from "../../styles/color-helper";
-import * as allColors from "../../styles/colors";
-import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { alphaPseudo, bgColor, border, borderColor, borderNone, borderRadius, boxBorder, cursorNotAllowed, cursorPointer, displayFlex, displayInlineFlex, flexRow, itemsCenter, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { getColor } from "../../styles/utils";
-import { capitalize, classNames } from "../../utils";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { capitalize, classNames, getProp } from "../../utils";
 import { getRippleColor } from '.';
 import Ripple from "./ripple-effect";
 const sizeMap = new Map([['tiny', {
@@ -31,7 +32,7 @@ const sizeMap = new Map([['tiny', {
   buttonSize: '96px',
   iconSize: '56px'
 }]]);
-const iconColorMap = new Map([['Close', 'semantic.danger'], ['Cancel', 'semantic.danger'], ['Approval', 'semantic.success'], ['Delete', 'semantic.warning'], ['Trash', 'semantic.warning'], ['Edit', 'semantic.info'], ['EditV2', 'semantic.info'], ['View', 'semantic.info']]);
+const iconColorMap = new Map([['Close', 'semantic/danger'], ['Cancel', 'semantic/danger'], ['Approval', 'semantic/success'], ['Delete', 'semantic/warning'], ['Trash', 'semantic/warning'], ['Edit', 'semantic/info'], ['EditV2', 'semantic/info'], ['View', 'semantic/info']]);
 const alphaLoading = 0.2;
 // customIconSize calculated based on design size
 // Button size <= 24 => icon size = Button size - 8
@@ -47,33 +48,47 @@ const IconLoadingView = iconSize => {
     width: parseInt(iconSize)
   });
 };
-const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  circular,
-  className,
-  color: colorProp,
-  colorHover,
-  disabled,
-  height,
-  id,
-  loading,
-  name,
-  onClick,
-  size,
-  style,
-  viewBox,
-  viewType,
-  width
-}, reference) => {
+const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   var _sizeMap$get, _sizeMap$get2;
+  if (!reference) reference = useRef(null);
+  const theme = useTheme();
+  const {
+    colors
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'ButtonIcon'
+  });
+  const {
+    action = {},
+    children,
+    circular,
+    className,
+    color: colorProp,
+    colorHover,
+    disabled,
+    height,
+    id,
+    loading,
+    name,
+    onClick,
+    size,
+    style,
+    viewBox,
+    viewType,
+    width
+  } = props;
   const ref = useRef(null);
   const rippleRef = useRef(null);
   const isColorDefault = colorProp === 'default';
   const isViewTypeGhost = viewType === 'ghost';
   const buttonSize = ((_sizeMap$get = sizeMap.get(size)) === null || _sizeMap$get === void 0 ? void 0 : _sizeMap$get.buttonSize) || '40px';
   const iconSize = width ? isNaN(width) ? '60%' : customIconSize(parseInt(width)) + 'px' : ((_sizeMap$get2 = sizeMap.get(size)) === null || _sizeMap$get2 === void 0 ? void 0 : _sizeMap$get2.iconSize) || '24px';
-  const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, colorProp, name, isColorDefault, viewType, loading);
+  const colorCss = getProp(colors, colorProp, colorProp);
+  const colorHoverCss = getProp(colors, colorHover, colorHover);
+  const _ButtonRootCSS = ButtonRootCSS(circular, colorHoverCss, colorCss, name, isColorDefault, viewType, loading, theme);
   const _ButtonSizeCSS = ButtonSizeCSS(width, height, buttonSize, iconSize);
   const _ButtonIconCSS = ButtonIconCSS(iconSize);
   const _onClick = event => {
@@ -112,10 +127,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       viewBox: viewBox
     })), !disabled && !loading && !isViewTypeGhost && jsx(Ripple, {
       ref: rippleRef,
-      color: getRippleColor(colorProp, viewType, allColors),
+      color: getRippleColor(colorProp, viewType, colors),
       circular: circular
     }));
-  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width]);
+  }, [children, circular, className, colorHover, colorProp, disabled, height, id, loading, name, onClick, size, style, viewBox, viewType, width, theme]);
 }));
 const ButtonIconCSS = iconSize => css`
     ${displayFlex};
@@ -135,7 +150,10 @@ const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
         ${parseMinWidthHeight(width || iconSize, height || iconSize)};
     }
 `;
-const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewType, loading) => css`
+const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewType, loading, {
+  colors,
+  spacing
+}) => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${justifyCenter};
@@ -145,7 +163,7 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
     ${cursorPointer};
     ${userSelectNone};
     ${borderRadius(circular ? '50%' : 4)};
-    ${pd(0)};
+    padding: ${spacing([0])};
     transition: background-color 0.5s, filter 0.5s;
     ${loading && pointerEventsNone};
     ${viewType === 'outlined' && css`
@@ -161,8 +179,8 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
                     }
                 `)}
         ${isColorDefault && css`
-            ${border(1, 'system/rest')};
-            ${textColor('system/rest')};
+            ${border(1, getProp(colors, 'system/rest'))};
+            ${textColor(getProp(colors, 'system/rest'))};
             ${loading && css`
                 ${textColor(colorHover)};
                 ${borderColor(colorHover)};
@@ -181,13 +199,13 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
                     `)}// &:hover | &:focus | &:active
         `}
         &.disabled {
-            ${borderColor('system/disabled')};
+            ${borderColor(getProp(colors, 'system/disabled'))};
             ${bgColor('transparent')};
         }
     `}
     ${viewType === 'filled' && css`
         ${borderNone};
-        ${textColor(color === getColor('system.white') ? 'system.rest' : 'system.white')};
+        ${textColor(color === getColor(getProp(colors, 'system/standard')) ? getProp(colors, 'system/rest') : getProp(colors, 'system/standard'))};
         ${bgColor(color)};
         font-weight: bold;
         ${loading && css`
@@ -201,8 +219,8 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
             filter: brightness(0.7);
         }
         ${isColorDefault && css`
-            ${bgColor('system/rest')};
-            ${loading && bgColor('system/active')};
+            ${bgColor(getProp(colors, 'system/rest'))};
+            ${loading && bgColor(getProp(colors, 'system/active'))};
             &:hover,
             &:focus,
             &:active {
@@ -210,7 +228,7 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
             }
         `}
         &.disabled {
-            ${bgColor('fill/disabled')};
+            ${bgColor(getProp(colors, 'fill/disabled'))};
         }
     `}
     ${viewType === 'text' && css`
@@ -224,9 +242,9 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
                     }
                 `)}
         ${isColorDefault && css`
-            ${textColor('system/rest')};
+            ${textColor(getProp(colors, 'system/rest'))};
             ${loading && css`
-                ${textColor('system/active')};
+                ${textColor(getProp(colors, 'system/active'))};
                 ${bgColor(hexToRGBA(colorHover, alphaLoading))};
             `}
             ${Object.keys(alphaPseudo).map(key => css`
@@ -255,7 +273,7 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
             filter: brightness(0.7);
         }
         ${isColorDefault && css`
-            ${textColor('system/rest')};
+            ${textColor(getProp(colors, 'system/rest'))};
             &:hover,
             &:focus,
             &:active {
@@ -265,20 +283,22 @@ const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewTy
     `}
     &.disabled {
         ${cursorNotAllowed};
-        ${textColor('system/disabled')};
+        ${textColor(getProp(colors, 'system/disabled'))};
         filter: brightness(1);
     }
 `;
-ButtonIcon.defaultProps = {
-  circular: false,
-  className: '',
-  color: 'default',
-  colorHover: 'system/active',
-  disabled: false,
-  size: 'medium',
-  viewBox: true,
-  viewType: 'outlined'
-};
+
+// ButtonIcon.defaultProps = {
+//     circular: false,
+//     className: '',
+//     color: 'default',
+//     colorHover: 'system/active',
+//     disabled: false,
+//     size: 'medium',
+//     viewBox: true,
+//     viewType: 'outlined',
+// };
+
 ButtonIcon.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
@@ -300,14 +320,14 @@ ButtonIcon.propTypes = {
   onClick: PropTypes.func,
   /** Name of [icon](https://core.diginet.com.vn/ui/?path=/story/icon-basic). */
   name: PropTypes.string,
-  /**
-   * 	The size of the component.
-   *
-   * * tiny (button 24px, icon 16px)
-   * * small (button 32px, icon 20px)
-   * * medium (button 40px, icon 24px)
-   * * large (button 48px, icon 32px)
-   * * giant (button 56px, icon 40px)
+  /**
+   * 	The size of the component.
+   *
+   * * tiny (button 24px, icon 16px)
+   * * small (button 32px, icon 20px)
+   * * medium (button 40px, icon 24px)
+   * * large (button 48px, icon 32px)
+   * * giant (button 56px, icon 40px)
    * */
   size: PropTypes.oneOf(['tiny', 'small', 'medium', 'large', 'giant', 'extraGiant']),
   /** Style inline of component. */
@@ -318,19 +338,19 @@ ButtonIcon.propTypes = {
   viewType: PropTypes.oneOf(['text', 'outlined', 'filled', 'ghost']),
   /** Width of the component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
-  /**
-   * ref methods (ref.current.instance.*method*)
-   *
-   * * option(): Gets all UI component properties
-   *  * Returns value - object
-   * * option(optionName): Gets the value of a single property
-   *  * @param {optionName} - string
-   *  * Returns value - any
-   * * option(optionName, optionValue): Updates the value of a single property
-   *  * @param {optionName} - string
-   *  * @param {optionValue} - any
-   * * option(options): Updates the values of several properties
-   *  * @param {options} - object
+  /**
+   * ref methods (ref.current.instance.*method*)
+   *
+   * * option(): Gets all UI component properties
+   *  * Returns value - object
+   * * option(optionName): Gets the value of a single property
+   *  * @param {optionName} - string
+   *  * Returns value - any
+   * * option(optionName, optionValue): Updates the value of a single property
+   *  * @param {optionName} - string
+   *  * @param {optionValue} - any
+   * * option(options): Updates the values of several properties
+   *  * @param {options} - object
    */
 };