diginet-core-ui 1.3.93 → 1.3.94

package/styles/color-helper.js

@@ -1,4 +1,7 @@
 /* eslint-disable no-undef */
+
+import { getColor } from "./utils";
+
 /**
  * Returns a number whose value is limited to the given range.
  *
@@ -326,6 +329,7 @@ export const isColorName = color => {
  * @returns {string} color - rgba()
  */
 export const hexToRGBA = (hex, alpha) => {
+  hex = getColor(hex);
   if (isColorName(hex)) hex = isColorName(hex);
   if (!isColor(hex)) return;
   var r = parseInt(hex.slice(1, 3), 16),

package/styles/general.js

@@ -2,6 +2,11 @@ import { css } from '@emotion/core';
 import { getColor, parseCSSValue, parseToPixel } from "./utils";
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
+export const alphaPseudo = {
+  hover: 0.1,
+  focus: 0.2,
+  active: 0.3
+};
 export const typographyTypes = ['t1', 't2', 't3', 't4', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p1', 'p2', 'p3', 'title1', 'title2', 'title3', 'title4', 'heading1', 'heading2', 'heading3', 'heading4', 'heading5', 'heading6', 'paragraph1', 'paragraph2', 'paragraph3'];
 
 /**
@@ -59,6 +64,9 @@ const borderBottomColor = cl => css`
 const borderColor = cl => css`
     border-color: ${getColor(cl)};
 `;
+const borderDashed = css`
+    border-style: dashed;
+`;
 const borderNone = css`
     border: none;
 `;
@@ -226,6 +234,9 @@ const justifyStart = css`
 const left = vl => css`
     left: ${parseCSSValue(vl)};
 `;
+const listNone = css`
+    list-style-type: none;
+`;
 const mg = vl => css`
     margin: ${getSpacing(vl)};
 `;
@@ -453,4 +464,4 @@ const whiteSpacePreWrap = css`
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+export { bgColor, bgCurrent, bgTransparent, border, borderBottom, borderBottomColor, borderColor, borderDashed, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, bottom, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorInitial, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, fill, flexCol, flexColReverse, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, invisible, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, left, listNone, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pd, pdb, pdl, pdr, pdt, pdx, pdy, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, right, scale, scaleX, scaleY, selfCenter, selfEnd, selfStart, shadowNone, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textSentence, textUnderline, textUppercase, top, truncate, userSelectNone, visible, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/utils.js

@@ -1,34 +1,34 @@
 import { color as colors } from "./colors";
 
-/**
- * Parse css value
- *
- * @param {string | number} vl
- * @returns {string | number}
+/**
+ * Parse css value
+ *
+ * @param {string | number} vl
+ * @returns {string | number}
  */
 export const parseCSSValue = vl => {
   return isNaN(vl) ? vl : vl + 'px';
 };
 
-/**
- * Parse to pixel
- *
- * @param {number} vl
- * @returns {string}
+/**
+ * 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}
+/**
+ * Get color from CORE colors
+ *
+ * @param {string} cl
+ * @returns {string}
  */
 export const getColor = cl => {
   if (typeof cl !== 'string') return;
   // example param cl: primary, info, system.rest, text.main, red, #333333,...
-  return cl.split('.').reduce((p, c) => p && p[c] || null, colors) || cl;
+  return cl.split(/[./]/).reduce((p, c) => p && p[c] || null, colors) || cl;
 };

package/components/accordion/css.js

@@ -1,172 +0,0 @@
-import { css } from '@emotion/core';
-import theme from "../../theme/settings";
-import { itemsCenter, bgTransparent, boxBorder, borderRadius4px, breakWord, cursorPointer, displayInlineBlock, flexRow, flexRowReverse, displayInlineFlex, justifyBetween, justifyCenter, justifyEnd, parseWidthHeight, pointerEventsNone, positionAbsolute, positionRelative, userSelectNone } from "../../styles/general";
-const {
-  colors: {
-    system: {
-      active,
-      disabled: systemDisabled
-    },
-    fill: {
-      disabled: fillDisabled,
-      headerbar,
-      focus,
-      hover,
-      pressed
-    }
-  },
-  typography: {
-    heading3
-  },
-  spacing
-} = theme;
-export const SummaryRootCSS = background => css`
-    ${flexRow};
-    ${positionRelative};
-    ${justifyBetween};
-    ${itemsCenter};
-    ${cursorPointer};
-    ${boxBorder};
-    ${borderRadius4px};
-    width: 100%;
-    min-height: 56px;
-    padding: ${spacing([4, 6])};
-    ${background && `background-color: ${background === true ? headerbar : theme.colors[background] || background};`};
-    .Accordion-Expand-Icon,
-    .Accordion-Collapse-Icon {
-        ${cursorPointer};
-        color: ${active} !important;
-        &:active,
-        &:focus,
-        &:hover {
-            ${bgTransparent};
-            color: ${active};
-        }
-    }
-    .Accordion-Icon-Root {
-        ${flexRow};
-        .Accordion-Icon.rotate-able {
-            ${boxBorder};
-            ${parseWidthHeight(24, 24)};
-            &:not(.TreeView) {
-                transform: rotateZ(0deg);
-                transform-origin: center;
-            }
-            &.TreeView {
-                transform-origin: center;
-            }
-        }
-    }
-    &.start {
-        ${flexRowReverse};
-        ${justifyEnd};
-        .Accordion-Icon.rotate-able {
-            margin-right: ${spacing([2])};
-            &.TreeView {
-                transform: rotateZ(-90deg);
-            }
-        }
-    }
-    &.end {
-        .Accordion-Icon.rotate-able {
-            margin-left: ${spacing([2])};
-            &.TreeView {
-                transform: rotateZ(90deg);
-            }
-        }
-    }
-    &.expanding {
-        border-radius: 4px 4px 0px 0px;
-        .Accordion-Icon.rotate-able {
-            &:not(.TreeView) {
-                transform: rotateZ(90deg);
-            }
-            &.TreeView {
-                transform: rotateZ(0deg);
-            }
-        }
-        .Accordion-Icon:not(.rotate-able) {
-            .Accordion-Expand-Icon {
-                transform: scale(0);
-            }
-            .Accordion-Collapse-Icon {
-                transform: scale(1);
-            }
-        }
-    }
-    &:not(.disabled) {
-        transition: background-color 300ms ease;
-        &:hover {
-            background-color: ${hover};
-        }
-        &:focus {
-            background-color: ${focus};
-        }
-        &:active {
-            background-color: ${pressed};
-        }
-    }
-    &.disabled {
-        ${pointerEventsNone};
-        background-color: ${fillDisabled};
-        .DGN-UI-Accordion-Summary-Content,
-        .Accordion-Expand-Icon {
-            color: ${systemDisabled} !important;
-        }
-    }
-    &.treeview-disabled {
-        ${pointerEventsNone};
-        &:hover {
-            ${bgTransparent};
-        }
-        .TreeView-Item {
-            color: ${systemDisabled};
-        }
-        .Accordion-Icon.rotate-able.TreeView .DGN-UI-Icon {
-            ${cursorPointer};
-            pointer-events: initial;
-        }
-    }
-    .DGN-UI-Accordion-Summary-Content {
-        ${heading3};
-        ${flexRow};
-        ${positionRelative};
-        ${breakWord};
-        ${userSelectNone};
-        ${boxBorder}
-        ${itemsCenter};
-        color: ${active};
-        width: 100%;
-        min-height: 24px;
-    }
-    .Accordion-Icon {
-        ${displayInlineBlock};
-        ${positionRelative};
-        ${cursorPointer};
-        ${parseWidthHeight(24, 24)};
-        transition: transform 200ms linear;
-        .Accordion-Expand-Icon {
-            transform: scale(1);
-            transition: transform 200ms linear;
-            &.effect {
-                ${positionRelative};
-            }
-        }
-        .Accordion-Collapse-Icon {
-            ${positionAbsolute};
-            inset: 0;
-            transform: scale(0);
-            transition: transform 200ms linear;
-        }
-        .effect {
-            ${displayInlineFlex};
-            ${justifyCenter};
-            ${itemsCenter};
-            ${cursorPointer};
-            min-width: 24px;
-            max-width: 34px;
-            min-height: 24px;
-            max-height: 34px;
-        }
-    }
-`;