diginet-core-ui 1.4.14 → 1.4.15-beta.1

package/assets/images/menu/dhr/MHRM15N0001.svg

@@ -0,0 +1,18 @@
+<svg width="39" height="39" viewBox="0 0 39 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_1538_58)">
+<path d="M38.9627 16.8C39.0626 16.1 38.7629 15.3 38.0636 14.7L35.9656 12.9V15.5L36.7648 16.2C36.8647 16.3 36.9646 16.4 36.9646 16.5C36.9646 16.6 36.9646 16.6 36.8647 16.7L36.7648 16.8L35.9656 17.5L33.9675 19.2L26.2749 25.7L24.6765 27L20.2807 30.7C20.0809 30.9 19.7812 31 19.4814 31C19.1817 31 18.882 30.9 18.6822 30.7L14.2864 27L12.7879 25.7L4.99537 19.2L2.9973 17.5L2.19806 16.8L2.09816 16.7C1.99826 16.6 1.99826 16.6 1.99826 16.5C1.99826 16.4 2.09816 16.3 2.19806 16.2L2.9973 15.5V12.9L0.899313 14.7C0.199985 15.3 -0.0997266 16 0.000177302 16.8C0.000177302 16.9 0.000177302 17 0.000177302 17V36C0.000177302 36.3 0.000177306 36.6 0.100081 36.8C0.499697 38.1 1.59864 39 2.9973 39H35.9656C37.3643 39 38.4632 38.1 38.8628 36.8C38.9627 36.6 38.9627 36.3 38.9627 36V17C38.9627 16.9 38.9627 16.8 38.9627 16.8ZM1.99826 19.2L2.9973 20L4.99537 21.7L11.1894 26.9L4.99537 32.2L2.9973 33.9L1.99826 34.7V19.2ZM35.9656 37H2.9973C2.89739 37 2.69758 37 2.59768 36.9L2.9973 36.5L4.99537 34.8L12.688 28.3L17.0838 32L17.3835 32.3C17.9829 32.8 18.7821 33 19.4814 33C20.2807 33 20.98 32.7 21.5794 32.3L21.8791 32L26.2749 28.3L33.9675 34.8L35.9656 36.5L36.3652 36.9C36.2653 37 36.1654 37 35.9656 37ZM36.9646 34.8L35.9656 34L33.9675 32.3L27.7735 27L33.9675 21.8L35.9656 20.1L36.9646 19.3V34.8Z" fill="#2680EB"/>
+<path d="M25.4757 4H22.3787L21.1798 2.9L20.3806 2.2C20.0809 2.1 19.7812 2 19.4814 2C19.1817 2 18.882 2.1 18.6822 2.3L17.883 3L16.5842 4H13.4872L14.6861 2.9L17.2836 0.7C17.9829 0.3 18.6822 0 19.4814 0C20.2807 0 20.98 0.3 21.5794 0.7L25.4757 4Z" fill="#2680EB"/>
+<path d="M31.9694 5H6.99345C5.29509 5 3.99634 6.4 3.99634 8V16.3L5.99441 18V8C5.99441 7.5 6.49393 7 6.99345 7H31.9694C32.469 7 32.9685 7.5 32.9685 8V18L34.9666 16.3V8C34.9666 6.4 33.6678 5 31.9694 5Z" fill="#2680EB"/>
+<path d="M30.9701 19.1C30.8702 19.6 30.5705 19.9 30.1709 20.2C29.4715 20.7 28.6723 21.1 27.8731 21.3C27.0738 21.6 26.2746 21.4 25.4754 21.1C25.2756 21 25.1757 20.8 25.0758 20.6C24.9759 19.9 24.7761 19.1 24.6761 18.4C24.5762 17.9 24.2765 17.5 23.8769 17.2C23.8769 17.2 23.777 17.2 23.777 17.1C23.3774 16.9 23.3774 16.7 23.4773 16.3C23.5772 15.9 23.9768 15.6 24.3764 15.6C26.0748 15.6 27.8731 15.6 29.5714 15.6C30.071 15.6 30.3707 15.9 30.4706 16.4C30.5705 17.2 30.7703 17.9 30.8702 18.7V18.8C30.9701 18.8 30.9701 18.9 30.9701 19.1Z" fill="#FFAA00"/>
+<path d="M26.9739 14.5C25.3755 14.5 24.0767 13.2 24.0767 11.6C24.0767 9.99995 25.3755 8.69995 26.9739 8.69995C28.5724 8.69995 29.8712 9.99995 29.8712 11.6C29.8712 13.2 28.5724 14.5 26.9739 14.5Z" fill="#FFAA00"/>
+<path d="M7.99219 19.1C8.09209 19.6 8.3918 19.9 8.79142 20.2C9.49075 20.7 10.29 21.1 11.0892 21.3C11.8884 21.6 12.6877 21.4 13.4869 21.1C13.6867 21 13.7866 20.8 13.8865 20.6C13.9864 19.9 14.1862 19.1 14.2861 18.4C14.386 17.9 14.6858 17.5 15.0854 17.2C15.0854 17.2 15.1853 17.2 15.1853 17.1C15.5849 16.9 15.5849 16.7 15.485 16.3C15.3851 15.9 14.9855 15.6 14.5858 15.6C12.8875 15.6 11.0892 15.6 9.39084 15.6C8.89132 15.6 8.59161 15.9 8.49171 16.4C8.3918 17.2 8.192 17.9 8.09209 18.7V18.8C7.99219 18.8 7.99219 18.9 7.99219 19.1Z" fill="#FFAA00"/>
+<path d="M11.9883 14.5C13.5868 14.5 14.8856 13.2 14.8856 11.6C14.8856 9.99995 13.5868 8.69995 11.9883 8.69995C10.3899 8.69995 9.09113 9.99995 9.09113 11.6C9.09113 13.2 10.3899 14.5 11.9883 14.5Z" fill="#FFAA00"/>
+<path d="M19.4813 15.8999C17.5831 15.8999 16.0846 14.2999 16.0846 12.3999C16.0846 10.4999 17.683 8.8999 19.5812 8.8999C21.4794 8.8999 22.9779 10.4999 22.9779 12.3999C22.878 14.3999 21.3795 15.8999 19.4813 15.8999Z" fill="#FF8C00"/>
+<path d="M24.0769 19.9999L23.8771 18.9999C23.7772 18.3999 22.878 17.7999 22.878 17.7999C22.878 17.7999 21.6792 17.0999 21.1797 16.9999C20.6801 16.8999 18.4823 16.8999 18.0826 16.9999C17.683 17.0999 16.3843 17.7999 16.3843 17.7999C16.3843 17.7999 15.585 18.2999 15.4851 18.6999L15.2853 19.6999C15.1854 19.9999 15.1854 20.2999 15.0855 20.5999C14.9856 21.0999 15.1854 21.5999 15.585 21.8999C16.3843 22.4999 17.1835 22.9999 18.1825 23.3999C18.9818 23.6999 19.8809 23.8999 20.78 23.5999C21.9789 23.1999 23.0778 22.5999 23.977 21.8999C24.3766 21.5999 24.5764 21.0999 24.4765 20.5999C24.0769 20.3999 24.0769 20.1999 24.0769 19.9999Z" fill="#FF8C00"/>
+</g>
+<defs>
+<clipPath id="clip0_1538_58">
+<rect width="39" height="39" fill="white"/>
+</clipPath>
+</defs>
+</svg>

package/components/accordion/details.js

@@ -3,23 +3,28 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { boxBorder, overflowHidden, parseHeight, pd, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { boxBorder, overflowHidden, parseHeight, pointerEventsNone, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames } from "../../utils";
-const {
-  typography: {
-    paragraph1
-  }
-} = useTheme();
-const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  id,
-  style
-}, reference) => {
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
+const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'AccordionDetails'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    id,
+    style
+  } = props;
   const ref = useRef(null);
+  const _DetailsRootCSS = DetailsRootCSS(theme);
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
@@ -32,7 +37,7 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: DetailsRootCSS,
+      css: _DetailsRootCSS,
       className: 'DGN-UI-Accordion-Details',
       ref: ref,
       id: id
@@ -40,29 +45,35 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       style: style,
       className: classNames('DGN-UI-Accordion-Details-Content', className)
     }, children));
-  }, [children, className, id, style]);
+  }, [children, className, id, style, theme]);
 }));
-const DetailsRootCSS = css`
+const DetailsRootCSS = ({
+  colors,
+  spacing,
+  typography
+}) => css`
     ${positionRelative};
     ${overflowHidden};
     ${parseHeight(0)};
     transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${boxBorder};
-        ${paragraph1};
-        ${pd([0, 6, 4, 6])};
-        ${textColor('text/main')};
+        ${typography.paragraph1};
+        padding: ${spacing([0, 6, 4, 6])};
+        ${textColor(getProp(colors, 'text/main'))};
         &.disabled {
             ${pointerEventsNone};
             ${userSelectNone};
         }
     }
 `;
-AccordionDetails.defaultProps = {
-  className: '',
-  id: '',
-  style: {}
-};
+
+// AccordionDetails.defaultProps = {
+//     className: '',
+//     id: '',
+//     style: {},
+// };
+
 AccordionDetails.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,

package/components/accordion/group.js

@@ -3,17 +3,28 @@
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { Children, cloneElement, forwardRef, memo, useImperativeHandle, useMemo, useRef } from 'react';
-import { borderRadius, borderRadius4px, mg } from "../../styles/general";
+import { borderRadius, borderRadius4px } from "../../styles/general";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
 import { classNames } from "../../utils";
-const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  children,
-  className,
-  collapseOther,
-  style
-}, reference) => {
+const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'AccordionGroup'
+  });
+  const {
+    action = {},
+    children,
+    className,
+    collapseOther,
+    style
+  } = props;
   const ref = useRef(null);
+  const _AccordionGroupRootCSS = AccordionGroupRootCSS(theme);
   const onCollapseOther = (e, onExpand) => {
     if (collapseOther) {
       const accordions = ref.current.querySelectorAll('.DGN-UI-Accordion');
@@ -38,7 +49,7 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   });
   return useMemo(() => {
     return jsx("div", {
-      css: AccordionGroupRootCSS,
+      css: _AccordionGroupRootCSS,
       ref: ref,
       style: style,
       className: classNames('DGN-UI-Accordion-Group', className)
@@ -47,7 +58,9 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     })));
   }, [children, className, collapseOther, style]);
 }));
-const AccordionGroupRootCSS = css`
+const AccordionGroupRootCSS = ({
+  spacing
+}) => css`
     ${borderRadius4px};
     .DGN-UI-Accordion {
         &:first-of-type {
@@ -57,7 +70,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                ${mg([0, 0, 4, 0])};
+                margin: ${spacing([0, 0, 4, 0])};
                 .DGN-UI-Divider {
                     display: none !important;
                 }
@@ -70,7 +83,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                ${mg([4, 0, 0, 0])};
+                margin: ${spacing([4, 0, 0, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -86,7 +99,7 @@ const AccordionGroupRootCSS = css`
             }
             &.expanding {
                 ${borderRadius4px};
-                ${mg([4, 0])};
+                margin: ${spacing([4, 0])};
                 .DGN-UI-Accordion-Summary {
                     border-radius: 4px 4px 0px 0px;
                 }
@@ -108,11 +121,13 @@ const AccordionGroupRootCSS = css`
         }
     }
 `;
-AccordionGroup.defaultProps = {
-  className: '',
-  collapseOther: true,
-  style: {}
-};
+
+// AccordionGroup.defaultProps = {
+//     className: '',
+//     collapseOther: true,
+//     style: {},
+// };
+
 AccordionGroup.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,

package/components/accordion/index.js

@@ -5,7 +5,9 @@ import { Divider } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import { bgColor, borderRadius4px, cursorNotAllowed, displayBlock, parseHeight, parseWidth, positionRelative, shadowNone } from "../../styles/general";
-import { classNames } from "../../utils";
+import { useTheme } from "../../theme";
+import useThemeProps from "../../theme/utils/useThemeProps";
+import { classNames, getProp } from "../../utils";
 import AccordionContext from "./context";
 const handleTransition = (timer, el, beginHeight, endHeight = null) => {
   const getAutoHeightDuration = height => {
@@ -27,26 +29,34 @@ const handleTransition = (timer, el, beginHeight, endHeight = null) => {
     el.style.height = endHeight;
   }, duration);
 };
-const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  boxShadow,
-  children,
-  className,
-  disabled,
-  expand,
-  expanded,
-  fullHeight,
-  id,
-  onClick,
-  onCollapse,
-  onExpand,
-  style
-}, reference) => {
+const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'Accordion'
+  });
+  const {
+    action = {},
+    boxShadow,
+    children,
+    className,
+    disabled,
+    expand,
+    expanded,
+    fullHeight,
+    id,
+    onClick,
+    onCollapse,
+    onExpand,
+    style
+  } = props;
   const ref = useRef(null);
   const timer = useRef(null);
   const [expandState, setExpandState] = useState(expanded || expand);
-  const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState);
+  const _AccordionRootCSS = AccordionRootCSS(fullHeight, expandState, theme);
   useEffect(() => {
     if (ref.current) {
       if (fullHeight) {
@@ -104,15 +114,17 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState]);
+  }, [boxShadow, children, className, disabled, expand, expanded, fullHeight, id, onClick, onCollapse, onExpand, style, expandState, theme]);
 }));
-const AccordionRootCSS = (fullHeight, expandState) => css`
+const AccordionRootCSS = (fullHeight, expandState, {
+  colors
+}) => css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
     ${parseWidth('100%')};
     ${fullHeight && expandState && parseHeight('100%')};
-    ${bgColor('system/white')};
+    ${bgColor(getProp(colors, 'system/standard'))};
     transition: margin 300ms ease, height 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
 `;
 const AccordionRootBoxShadowCSS = css`
@@ -122,14 +134,16 @@ const AccordionRootDisabledCSS = css`
     ${cursorNotAllowed};
     ${shadowNone};
 `;
-Accordion.defaultProps = {
-  boxShadow: true,
-  className: '',
-  disabled: false,
-  expand: false,
-  fullHeight: false,
-  style: {}
-};
+
+// Accordion.defaultProps = {
+//     boxShadow: true,
+//     className: '',
+//     disabled: false,
+//     expand: false,
+//     fullHeight: false,
+//     style: {},
+// };
+
 Accordion.propTypes = {
   /** The box-shadow of component. */
   boxShadow: PropTypes.bool,

package/components/accordion/summary.js

@@ -4,37 +4,38 @@ import { css, jsx } from '@emotion/core';
 import { ButtonIcon, Typography } from "./..";
 import PropTypes from 'prop-types';
 import { forwardRef, memo, useContext, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { bgColor, bgTransparent, borderRadius4px, boxBorder, breakWord, cursorPointer, displayFlex, displayInlineBlock, displayInlineFlex, flexRow, flexRowReverse, inset, itemsCenter, justifyBetween, justifyCenter, justifyEnd, mgl, mgr, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
+import { bgColor, bgTransparent, borderRadius4px, boxBorder, breakWord, cursorPointer, displayFlex, displayInlineBlock, displayInlineFlex, flexRow, flexRowReverse, inset, itemsCenter, justifyBetween, justifyCenter, justifyEnd, parseMaxWidthHeight, parseMinHeight, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionRelative, textColor, userSelectNone } from "../../styles/general";
 import { useTheme } from "../../theme";
-import { classNames } from "../../utils";
+import { classNames, getProp } from "../../utils";
 import AccordionContext from "./context";
-const {
-  colors: {
-    system: {
-      active: systemActive,
-      disabled: systemDisabled
-    }
-  },
-  typography: {
-    heading3
-  },
-  spacing
-} = useTheme();
-const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
-  action = {},
-  background,
-  children,
-  className,
-  collapseIcon,
-  expandIcon,
-  expandIconAt,
-  expandIconProps,
-  id,
-  onClick,
-  style,
-  title
-}, reference) => {
+import useThemeProps from "../../theme/utils/useThemeProps";
+const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef((inProps, reference) => {
   if (!reference) reference = useRef(null);
+  const theme = useTheme();
+  const {
+    colors,
+    spacing
+  } = theme;
+
+  // props priority: `inProps` > `themeDefaultProps`
+  const props = useThemeProps({
+    props: inProps,
+    name: 'AccordionSummary'
+  });
+  const {
+    action = {},
+    background: backgroundProp,
+    children,
+    className,
+    collapseIcon,
+    expandIcon,
+    expandIconAt,
+    expandIconProps,
+    id,
+    onClick,
+    style,
+    title
+  } = props;
   const {
     expanded,
     expandState,
@@ -49,7 +50,8 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const expandIconRef = useRef(null);
   const timer = useRef(null);
-  const _SummaryRootCSS = SummaryRootCSS(background);
+  const background = getProp(colors, backgroundProp, backgroundProp);
+  const _SummaryRootCSS = SummaryRootCSS(background, theme);
   const _onClick = e => {
     if (disabled) return;
     const target = e.target;
@@ -139,9 +141,13 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
+  }, [children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, background, disabled, expanded, expandState, onClickAccordion, theme, onCollapse, onExpand]);
 }));
-const SummaryRootCSS = background => css`
+const SummaryRootCSS = (background, {
+  colors,
+  spacing,
+  typography
+}) => css`
     ${displayFlex};
     ${flexRow};
     ${positionRelative};
@@ -152,17 +158,17 @@ const SummaryRootCSS = background => css`
     ${borderRadius4px};
     ${parseWidth('100%')};
     ${parseMinHeight(56)};
-    ${pd([4, 6])};
+    padding: ${spacing([4, 6])};
     ${bgColor(background)};
     .Accordion-Expand-Icon,
     .Accordion-Collapse-Icon {
         ${cursorPointer};
-        color: ${systemActive} !important;
+        color: ${getProp(colors, 'system/active')} !important;
         &:active,
         &:focus,
         &:hover {
             ${bgColor('transparent')};
-            ${textColor('system/active')};
+            ${textColor(getProp(colors, 'system/active'))};
         }
     }
     .Accordion-Icon-Root {
@@ -184,7 +190,7 @@ const SummaryRootCSS = background => css`
         ${flexRowReverse};
         ${justifyEnd};
         .Accordion-Icon.rotate-able {
-            ${mgr([2])};
+            margin-right: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(-90deg);
             }
@@ -192,7 +198,7 @@ const SummaryRootCSS = background => css`
     }
     &.end {
         .Accordion-Icon.rotate-able {
-            ${mgl([2])};
+            margin-left: ${spacing([2])};
             &.TreeView {
                 transform: rotateZ(90deg);
             }
@@ -220,21 +226,21 @@ const SummaryRootCSS = background => css`
     &:not(.disabled) {
         transition: background-color 300ms ease;
         &:hover {
-            ${bgColor('fill.hover')};
+            ${bgColor(getProp(colors, 'fill/hover'))};
         }
         &:focus {
-            ${bgColor('fill.focus')};
+            ${bgColor(getProp(colors, 'fill/focus'))};
         }
         &:active {
-            ${bgColor('fill.pressed')};
+            ${bgColor(getProp(colors, 'fill/pressed'))};
         }
     }
     &.disabled {
         ${pointerEventsNone};
-        ${bgColor('fill.disabled')};
+        ${bgColor(getProp(colors, 'fill/disabled'))};
         .DGN-UI-Accordion-Summary-Content,
         .Accordion-Expand-Icon {
-            color: ${systemDisabled} !important;
+            color: ${getProp(colors, 'system/disabled')} !important;
         }
     }
     &.treeview-disabled {
@@ -243,7 +249,7 @@ const SummaryRootCSS = background => css`
             ${bgTransparent};
         }
         .TreeView-Item {
-            ${textColor('system.disabled')};
+            ${textColor(getProp(colors, 'system/disabled'))};
         }
         .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
             ${cursorPointer};
@@ -251,14 +257,14 @@ const SummaryRootCSS = background => css`
         }
     }
     .DGN-UI-Accordion-Summary-Content {
-        ${heading3};
+        ${typography.heading3};
         ${flexRow};
         ${positionRelative};
         ${breakWord};
         ${userSelectNone};
         ${boxBorder}
         ${itemsCenter};
-        ${textColor('system.active')};
+        ${textColor(getProp(colors, 'system/active'))};
         ${parseWidth('100%')};
         ${parseMinHeight(24)};
     }
@@ -291,14 +297,16 @@ const SummaryRootCSS = background => css`
         }
     }
 `;
-AccordionSummary.defaultProps = {
-  background: 'system/white',
-  className: '',
-  expandIcon: 'ArrowRight',
-  expandIconAt: 'start',
-  expandIconProps: {},
-  style: {}
-};
+
+// AccordionSummary.defaultProps = {
+//     background: 'system/standard',
+//     className: '',
+//     expandIcon: 'ArrowRight',
+//     expandIconAt: 'start',
+//     expandIconProps: {},
+//     style: {},
+// };
+
 AccordionSummary.propTypes = {
   /** Background for label summary. */
   background: PropTypes.string,