diginet-core-ui 1.3.93 → 1.3.94

package/components/breadcrumb/index.js

@@ -1,43 +1,42 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
-import { ButtonIcon, Typography } from "./..";
-import { Icon } from "../../icons/effect";
+import { ButtonMore, Typography } from "./..";
 import OptionWrapper from "../others/option-wrapper";
+import { Icon } from "../../icons/effect";
 import PropTypes from 'prop-types';
 import React, { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { displayFlex, flexWrap, itemsCenter, mg, mgx, pd, userSelectNone } from "../../styles/general";
+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";
-const insertSeparators = (items, separator) => {
-  return items.reduce((acc, current, index) => {
-    if (index < items.length - 1) {
-      acc = acc.concat(current, jsx("li", {
-        css: BreadcrumbSeparatorCSS,
-        "aria-hidden": true,
-        key: `separator-${index}`,
-        className: 'DGN-UI-Breadcrumb-separator'
-      }, separator));
-    } else {
-      acc.push(current);
-    }
-    return acc;
-  }, []);
-};
+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) => {
   if (!reference) reference = useRef(null);
+  if (color === 'default') color = 'system/rest';
   const ref = useRef(null);
-  const [expanded, setExpanded] = React.useState(false);
+  const sizeIcon = sizeIconMap.get(size);
+  const sizeTypographyP = sizeTypographyPMap.get(size);
+  const sizeTypographyH = sizeTypographyHMap.get(size);
+
+  // const [expanded, setExpanded] = React.useState(false);
+
+  const _BreadcrumbLiCSS = BreadcrumbLiCSS(color, sizeTypographyP, sizeTypographyH);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -48,39 +47,78 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
+  const renderSeparator = typeof separator === 'string' ? jsx(Icon, {
+    name: separator,
+    width: sizeIcon,
+    height: sizeIcon,
+    color: color,
+    viewBox: true
+  }) : separator;
   const renderItemsBeforeAndAfter = allItems => {
-    const handleClickExpand = () => {
-      setExpanded(true);
-    };
+    // const handleClickExpand = () => {
+    //     setExpanded(true);
+    // };
+
     if (itemsBeforeCollapse + itemsAfterCollapse >= allItems.length) {
       return allItems;
     }
-    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonIcon, {
+    let options = [];
+    data.slice(itemsBeforeCollapse, allItems.length - itemsAfterCollapse).map(item => {
+      var _item$onClick;
+      return options = [...options, {
+        label: (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name),
+        icon: item === null || item === void 0 ? void 0 : item.icon,
+        action: item === null || item === void 0 ? void 0 : (_item$onClick = item.onClick) === null || _item$onClick === void 0 ? void 0 : _item$onClick.call(item)
+      }];
+    });
+    return [...allItems.slice(0, itemsBeforeCollapse), jsx(ButtonMore, {
       key: "ellipsis",
-      name: 'MoreHoriz',
-      width: 24,
-      height: 16,
-      onClick: handleClickExpand
-    }), ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
+      options: options,
+      anchor: jsx("li", {
+        key: "ellipsis",
+        css: _BreadcrumbLiCSS
+      }, jsx(Icon, {
+        name: 'MoreHoriz',
+        width: sizeIcon,
+        height: sizeIcon,
+        color: color
+      }), renderSeparator)
+    }),
+    // <ButtonIcon key="ellipsis" name={'MoreHoriz'} width={24} height={16} onClick={handleClickExpand} />,
+    ...allItems.slice(allItems.length - itemsAfterCollapse, allItems.length)];
   };
   const allItems = data !== null && data !== void 0 && data.length ? data.map((item, idx) => {
-    var _data$onClick;
+    var _item$onClick2;
     return jsx("li", {
+      css: _BreadcrumbLiCSS,
       className: 'DGN-UI-Breadcrumb-li',
       key: `child-${idx}`
-    }, jsx(Typography, {
-      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? 'h5' : 'p3',
+    }, 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,
+      width: sizeIcon,
+      height: sizeIcon
+    }) : null, jsx(Typography, {
+      className: 'DGN-UI-Breadcrumb-li-label',
+      type: (data === null || data === void 0 ? void 0 : data.length) === idx + 1 ? sizeTypographyH : sizeTypographyP,
       mapping: 'a',
-      color: 'text.sub',
-      href: data === null || data === void 0 ? void 0 : data.href,
-      onClick: data === null || data === void 0 ? void 0 : (_data$onClick = data.onClick) === null || _data$onClick === void 0 ? void 0 : _data$onClick.call(data)
-    }, item === null || item === void 0 ? void 0 : item.name));
+      color: 'currentColor',
+      href: item === null || item === void 0 ? void 0 : item.href,
+      onClick: item === null || item === void 0 ? void 0 : (_item$onClick2 = item.onClick) === null || _item$onClick2 === void 0 ? void 0 : _item$onClick2.call(item)
+    }, (item === null || item === void 0 ? void 0 : item.label) || (item === null || item === void 0 ? void 0 : item.name)), (data === null || data === void 0 ? void 0 : data.length) !== idx + 1 ? renderSeparator : null);
   }) : React.Children.toArray(children).filter(child => {
     return /*#__PURE__*/React.isValidElement(child);
-  }).map((child, idx) => jsx("li", {
-    className: 'DGN-UI-Breadcrumb-li',
-    key: `child-${idx}`
-  }, child));
+  }).map((child, idx) => {
+    var _React$Children$toArr;
+    return jsx("li", {
+      css: _BreadcrumbLiCSS,
+      className: 'DGN-UI-Breadcrumb-li',
+      key: `child-${idx}`
+    }, child, ((_React$Children$toArr = React.Children.toArray(children).filter(child => {
+      return /*#__PURE__*/React.isValidElement(child);
+    })) === null || _React$Children$toArr === void 0 ? void 0 : _React$Children$toArr.length) !== idx + 1 ? renderSeparator : null);
+  });
   return useMemo(() => {
     return jsx("nav", {
       ref: ref,
@@ -88,34 +126,52 @@ const Breadcrumb = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames('DGN-UI-Breadcrumb', className)
     }, jsx("ol", {
-      css: BreadcrumbOlCSS,
+      css: BreadcrumbOlCSS(color),
       className: 'DGN-UI-Breadcrumb-ol'
-    }, insertSeparators(expanded || maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems), separator)));
-  }, [children, className, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, style, expanded]);
+    },
+    // expanded ||
+    maxItems && allItems.length <= maxItems ? allItems : renderItemsBeforeAndAfter(allItems)));
+  }, [children, className, color, data, id, itemsAfterCollapse, itemsBeforeCollapse, maxItems, separator, size, style
+  // expanded,
+  ]);
 }));
-const BreadcrumbOlCSS = css`
+
+const BreadcrumbOlCSS = color => css`
     ${displayFlex};
     ${flexWrap};
     ${itemsCenter};
     ${pd(0)};
     ${mg(0)};
-    list-style: none;
+    ${listNone};
+    ${textColor(color)};
 `;
-const BreadcrumbSeparatorCSS = css`
+const BreadcrumbLiCSS = (color, sizeTypographyP, sizeTypographyH) => css`
+    ${typography[sizeTypographyP]};
     ${displayFlex};
+    ${itemsCenter};
+    ${gap('4px')};
+    ${pdl([1])};
+    ${borderRadius(4)};
+    ${cursorPointer};
     ${userSelectNone};
-    ${mgx([2])};
+    &:last-child {
+        ${pdr([1])};
+        ${typography[sizeTypographyH]};
+    }
+    ${Object.keys(alphaPseudo).map(key => css`
+                &: ${key} {
+                    ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
+                }
+            `)}
 `;
 Breadcrumb.defaultProps = {
   className: '',
-  itemsBeforeCollapse: 1,
+  color: 'default',
   itemsAfterCollapse: 1,
+  itemsBeforeCollapse: 1,
   maxItems: 8,
-  separator: jsx(Icon, {
-    name: 'ArrowRight',
-    width: 16,
-    height: 16
-  }),
+  separator: 'ArrowRight',
+  size: 'medium',
   style: {}
 };
 Breadcrumb.propTypes = {
@@ -123,9 +179,11 @@ Breadcrumb.propTypes = {
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
   /** Class for component. */
   className: PropTypes.string,
+  /** The color of the component. */
+  color: PropTypes.string,
   /** Class for component. */
-  data: PropTypes.PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
     href: PropTypes.string,
     onClick: PropTypes.func
   })),
@@ -136,7 +194,9 @@ Breadcrumb.propTypes = {
   /** Class for component. */
   maxItems: PropTypes.number,
   /**	Custom separator node. */
-  separator: PropTypes.node,
+  separator: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
+  /** The size of the component. */
+  size: PropTypes.oneOf(['tiny', 'small', 'medium']),
   /** Style inline of component. */
   style: PropTypes.object
 };

package/components/button/icon.js

@@ -1,37 +1,17 @@
 /** @jsxRuntime classic */
 /** @jsx jsx */
-import { memo, useRef, useMemo, forwardRef, useImperativeHandle } from 'react';
-import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
+import { CircularProgress, Icon } from "./..";
 import OptionWrapper from "../others/option-wrapper";
-import * as allColors from "../../styles/colors";
+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 { getColor } from "../../styles/utils";
 import { capitalize, classNames, refType as ref } from "../../utils";
-import Icon from "../../icons";
+import { getRippleColor } from '.';
 import Ripple from "./ripple-effect";
-import { getClassNameFromColor, getRippleColor } from '.';
-import CircularProgress from "../progress/circular";
-import { itemsCenter, bgTransparent, border, boxBorder, borderNone, borderRadius4px, borderRadius50, cursorPointer, flexRow, displayInlineFlex, justifyCenter, outlineNone, parseMinWidthHeight, parseWidthHeight, pointerEventsNone, positionRelative, userSelectNone } from "../../styles/general";
-import { useColor as colors, useTheme } from "../../theme";
-const {
-  colors: {
-    system: {
-      active,
-      disabled: systemDisabled,
-      rest: systemRest,
-      white: systemWhite
-    },
-    semantic: {
-      success: semanticSuccess,
-      warning: semanticWarning,
-      danger: semanticDanger,
-      info: semanticInfo
-    },
-    fill: {
-      disabled: fillDisabled
-    }
-  }
-} = useTheme();
 const sizeMap = new Map([['tiny', {
   buttonSize: '24px',
   iconSize: '16px'
@@ -51,12 +31,7 @@ const sizeMap = new Map([['tiny', {
   buttonSize: '96px',
   iconSize: '56px'
 }]]);
-const iconColorMap = new Map([['Close', semanticDanger], ['Cancel', semanticDanger], ['Approval', semanticSuccess], ['Delete', semanticWarning], ['Trash', semanticWarning], ['Edit', semanticInfo], ['EditV2', semanticInfo], ['View', semanticInfo]]);
-const alphaArr = {
-  hover: 0.1,
-  focus: 0.2,
-  active: 0.3
-};
+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
@@ -94,14 +69,20 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   var _sizeMap$get, _sizeMap$get2;
   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 isViewTypeGhost = viewType === 'ghost';
-  const color = colors[colorProp] || colorProp;
-  colorHover = colors[colorHover] || colorHover;
-  const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, color, name);
+  const _ButtonRootCSS = ButtonRootCSS(circular, colorHover, colorProp, name, isColorDefault, viewType, loading);
   const _ButtonSizeCSS = ButtonSizeCSS(width, height, buttonSize, iconSize);
   const _ButtonIconCSS = ButtonIconCSS(iconSize);
+  const _onClick = event => {
+    event.persist();
+    onClick && event.stopPropagation();
+    if (disabled || loading) return;
+    if (!isViewTypeGhost) rippleRef.current.start(event);
+    onClick && onClick(event);
+  };
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -112,22 +93,15 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     currentRef.instance = _instance;
     return currentRef;
   });
-  const _onClick = event => {
-    event.persist();
-    onClick && event.stopPropagation();
-    if (disabled || loading) return;
-    if (!isViewTypeGhost) rippleRef.current.start(event);
-    onClick && onClick(event);
-  };
   return useMemo(() => {
     return jsx("button", {
-      css: [_ButtonRootCSS, _ButtonSizeCSS, disabled && ButtonDisabledCSS],
+      css: [_ButtonRootCSS, _ButtonSizeCSS],
       ref: ref,
       id: id,
       disabled: disabled,
       style: style,
       onClick: _onClick,
-      className: classNames('DGN-UI-ButtonIcon', viewType, getClassNameFromColor(colorProp), size, loading && 'button-icon--loading', className)
+      className: classNames('DGN-UI-ButtonIcon', viewType, size, className)
     }, loading && IconLoadingView(iconSize), !loading && jsx("span", {
       className: 'DGN-UI-ButtonIcon-Icon',
       css: _ButtonIconCSS
@@ -142,9 +116,10 @@ const ButtonIcon = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       color: getRippleColor(colorProp, viewType, allColors),
       circular: circular
     }));
-  }, [children, circular, className, colorProp, colorHover, 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]);
 }));
 const ButtonIconCSS = iconSize => css`
+    ${displayFlex};
     ${flexRow};
     ${positionRelative};
     ${boxBorder};
@@ -153,21 +128,6 @@ const ButtonIconCSS = iconSize => css`
     ${parseWidthHeight(iconSize)};
     ${parseMinWidthHeight(iconSize)};
 `;
-const ButtonDisabledCSS = `
-    cursor: not-allowed !important;
-    color: ${systemDisabled} !important;
-    &.outlined {
-        border-color: ${systemDisabled} !important;
-        background-color: transparent !important;
-    }
-    &.filled {
-        background-color: ${fillDisabled} !important;
-        filter: brightness(1) !important;
-    }
-    &.text {
-        background-color: transparent !important;
-    }
-`;
 const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
     ${parseWidthHeight(width || buttonSize, height || buttonSize)};
     ${parseMinWidthHeight(width || buttonSize, height || buttonSize)};
@@ -176,7 +136,7 @@ const ButtonSizeCSS = (width, height, buttonSize, iconSize) => css`
         ${parseMinWidthHeight(width || iconSize, height || iconSize)};
     }
 `;
-const ButtonRootCSS = (circular, colorHover, color, name) => css`
+const ButtonRootCSS = (circular, colorHover, color, name, isColorDefault, viewType, loading) => css`
     ${displayInlineFlex};
     ${positionRelative};
     ${justifyCenter};
@@ -185,46 +145,55 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
     ${boxBorder};
     ${cursorPointer};
     ${userSelectNone};
-    ${circular ? borderRadius50 : borderRadius4px};
-    padding: 0;
+    ${borderRadius(circular ? '50%' : 4)};
+    ${pd(0)};
     transition: background-color 0.5s, filter 0.5s;
-    &.button-icon--loading {
-        ${pointerEventsNone};
-    }
-    &.outlined {
-        ${bgTransparent};
-        ${border(1, color)}
-        color: ${color};
-        &.button-icon--loading {
-            background-color: ${hexToRGBA(color, alphaLoading)};
-        }
-        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                }`)}
-        &.default {
-            ${border(1, systemRest)};
-            color: ${systemRest};
-            &.button-icon--loading,
+    ${loading && pointerEventsNone};
+    ${viewType === 'outlined' && css`
+        ${bgColor('transparent')};
+        ${border(1, color)};
+        ${textColor(color)};
+        ${loading && css`
+            ${bgColor(hexToRGBA(color, alphaLoading))};
+        `}
+        ${Object.keys(alphaPseudo).map(key => css`
+                    &: ${key} {
+                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
+                    }
+                `)}
+        ${isColorDefault && css`
+            ${border(1, 'system/rest')};
+            ${textColor('system/rest')};
+            ${loading && css`
+                ${textColor(colorHover)};
+                ${borderColor(colorHover)};
+                ${bgColor(hexToRGBA(colorHover, alphaLoading))};
+            `}
             &:hover,
             &:focus,
             &:active {
-                color: ${colorHover};
-                border-color: ${colorHover};
-            }
-            &.button-icon--loading {
-                background-color: ${hexToRGBA(colorHover, alphaLoading)};
+                ${textColor(colorHover)};
+                ${borderColor(colorHover)};
             }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
-                    }`)}// &:hover | &:focus | &:active
+            ${Object.keys(alphaPseudo).map(key => css`
+                        &: ${key} {
+                            ${bgColor(hexToRGBA(colorHover, alphaPseudo[key]))};
+                        }
+                    `)}// &:hover | &:focus | &:active
+        `}
+        :disabled {
+            ${borderColor('system/disabled')};
+            ${bgColor('transparent')};
         }
-    }
-    &.filled {
+    `}
+    ${viewType === 'filled' && css`
         ${borderNone};
-        background-color: ${color};
-        color: ${color === systemWhite ? systemRest : systemWhite};
+        ${textColor(color === getColor('system.white') ? 'system.rest' : 'system.white')};
+        ${bgColor(color)};
         font-weight: bold;
-        &.button-icon--loading,
+        ${loading && css`
+            filter: brightness(0.85);
+        `}
         &:hover,
         &:focus {
             filter: brightness(0.85);
@@ -232,47 +201,54 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         &:active {
             filter: brightness(0.7);
         }
-        &.default {
-            background-color: ${systemRest};
-            &.button-icon--loading,
+        ${isColorDefault && css`
+            ${bgColor('system/rest')};
+            ${loading && bgColor('system/active')};
             &:hover,
             &:focus,
             &:active {
-                background-color: ${colorHover};
+                ${bgColor(colorHover)};
             }
+        `}
+        :disabled {
+            ${bgColor('fill/disabled')};
+            filter: brightness(1);
         }
-    }
-    &.text {
+    `}
+    ${viewType === 'text' && css`
         ${borderNone};
-        ${bgTransparent};
-        color: ${color};
-        &.button-icon--loading {
-            background-color: ${hexToRGBA(color, alphaLoading)};
+        ${textColor(color)};
+        ${bgColor('transparent')};
+        ${loading && bgColor(hexToRGBA(color, alphaLoading))};
+        ${Object.keys(alphaPseudo).map(key => css`
+                    &: ${key} {
+                        ${bgColor(hexToRGBA(color, alphaPseudo[key]))};
+                    }
+                `)}
+        ${isColorDefault && css`
+            ${textColor('system/rest')};
+            ${loading && css`
+                ${textColor('system/active')};
+                ${bgColor(hexToRGBA(colorHover, alphaLoading))};
+            `}
+            ${Object.keys(alphaPseudo).map(key => css`
+                        &: ${key} {
+                            ${textColor(colorHover)};
+                            ${bgColor(hexToRGBA(colorHover, alphaPseudo[key]))};
+                        }
+                    `)}
+        `}
+        :disabled {
+            ${bgColor('transparent')};
         }
-        ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(color, alphaArr[key])};
-                }`)}
-        &.default {
-            color: ${systemRest};
-            &:hover,
-            &:focus,
-            &:active {
-                color: ${colorHover};
-            }
-            &.button-icon--loading {
-                color: ${active};
-                background-color: ${hexToRGBA(colorHover, alphaLoading)};
-            }
-            ${Object.keys(alphaArr).map(key => `&:${key} {
-                        background-color: ${hexToRGBA(colorHover, alphaArr[key])};
-                    }`)}
-        }
-    }
-    &.ghost {
-        ${bgTransparent};
+    `}
+    ${viewType === 'ghost' && css`
         ${borderNone};
-        color: ${color};
-        &.loading,
+        ${bgColor('transparent')};
+        ${textColor(color)};
+        ${loading && css`
+            filter: brightness(0.85);
+        `}
         &:hover,
         &:focus {
             filter: brightness(0.85);
@@ -280,21 +256,25 @@ const ButtonRootCSS = (circular, colorHover, color, name) => css`
         &:active {
             filter: brightness(0.7);
         }
-        &.default {
-            color: ${systemRest};
+        ${isColorDefault && css`
+            ${textColor('system/rest')};
             &:hover,
             &:focus,
             &:active {
-                color: ${iconColorMap.get(capitalize(name)) || colorHover};
+                ${textColor(iconColorMap.get(capitalize(name)) || colorHover)};
             }
-        }
+        `}
+    `}
+    :disabled {
+        ${cursorNotAllowed};
+        ${textColor('system/disabled')};
     }
 `;
 ButtonIcon.defaultProps = {
   circular: false,
   className: '',
   color: 'default',
-  colorHover: active,
+  colorHover: 'system/active',
   disabled: false,
   size: 'medium',
   viewBox: true,