diginet-core-ui 1.3.88 → 1.3.89

package/styles/general.js

@@ -4,21 +4,22 @@ import { getColor, parseCSSValue, parseToPixel } from "./utils";
 export const rootSpacing = 4;
 export let rootZIndex = 1500;
 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'];
-/**
- * get value spacing with rootZIndex
- * @param number
- * @return {number}
- */
 
+/**
+ * get value spacing with rootZIndex
+ * @param number
+ * @return {number}
+ */
 export const zIndex = number => {
   number = Number(number || 0);
   if (isNaN(number)) return rootZIndex;
   return rootZIndex + number;
 };
-/**
- * get value spacing with rootSpacing
- * @param {(number|number[])} vl - default 1
- * @returns {(number|string)}
+
+/**
+ * get value spacing with rootSpacing
+ * @param {(number|number[])} vl - default 1
+ * @returns {(number|string)}
  */
 
 export const getSpacing = (vl = 1) => {
@@ -27,39 +28,35 @@ export const getSpacing = (vl = 1) => {
     return vl.flatMap(i => isNaN(i) ? i : i * rootSpacing + 'px').join(' ');
   } else return vl;
 };
-/**
- * replace rootZIndex
- * @param number
- */
 
+/**
+ * replace rootZIndex
+ * @param number
+ */
 export const setZIndex = number => {
   number = Number(number || 0);
   if (!isNaN(number)) rootZIndex = number;
-}; // Common CSS
+};
 
+// Common CSS
 const bgColor = cl => css`
     background-color: ${getColor(cl)};
 `;
-
 const bgCurrent = css`
     background-color: currentColor;
 `;
 const bgTransparent = css`
     background-color: transparent;
 `;
-
 const border = (withVl, colorVl) => css`
     border: ${parseToPixel(withVl)} solid ${colorVl || color.dark};
 `;
-
 const borderNone = css`
     border: none;
 `;
-
 const borderRadius = vl => css`
     border-radius: ${parseCSSValue(vl)};
 `;
-
 const borderRadius100 = css`
     border-radius: 100%;
 `;
@@ -159,33 +156,26 @@ const floatNone = css`
 const floatRight = css`
     float: right;
 `;
-
 const gap = vl => css`
     gap: ${getSpacing(vl)};
 `;
-
 const gapX = vl => css`
     column-gap: ${getSpacing(vl)};
 `;
-
 const gapY = vl => css`
     column-gap: ${getSpacing(vl)};
 `;
-
 const inset = vl => css`
     inset: ${parseCSSValue(vl)};
 `;
-
 const insetX = vl => css`
     right: ${parseCSSValue(vl)};
     left: ${parseCSSValue(vl)};
 `;
-
 const insetY = vl => css`
     top: ${parseCSSValue(vl)};
     bottom: ${parseCSSValue(vl)};
 `;
-
 const italic = css`
     font-style: italic;
 `;
@@ -216,37 +206,29 @@ const justifyEvenly = css`
 const justifyStart = css`
     justify-content: flex-start;
 `;
-
 const mg = vl => css`
     margin: ${getSpacing(vl)};
 `;
-
 const mgb = vl => css`
     margin-bottom: ${getSpacing(vl)};
 `;
-
 const mgl = vl => css`
     margin-left: ${getSpacing(vl)};
 `;
-
 const mgr = vl => css`
     margin-right: ${getSpacing(vl)};
 `;
-
 const mgt = vl => css`
     margin-top: ${getSpacing(vl)};
 `;
-
 const mgx = vl => css`
     margin-left: ${getSpacing(vl)};
     margin-right: ${getSpacing(vl)};
 `;
-
 const mgy = vl => css`
     margin-top: ${getSpacing(vl)};
     margin-bottom: ${getSpacing(vl)};
 `;
-
 const noBorder = css`
     border: none !important;
 `;
@@ -271,11 +253,9 @@ const objectFill = css`
 const objectNone = css`
     object-fit: none;
 `;
-
 const order = vl => css`
     order: ${vl};
 `;
-
 const outlineNone = css`
     outline: none;
 `;
@@ -285,76 +265,59 @@ const overflowAuto = css`
 const overflowHidden = css`
     overflow: hidden;
 `;
-
 const pd = vl => css`
     padding: ${getSpacing(vl)};
 `;
-
 const pdb = vl => css`
     padding-bottom: ${getSpacing(vl)};
 `;
-
 const pdl = vl => css`
     padding-left: ${getSpacing(vl)};
 `;
-
 const pdr = vl => css`
     padding-right: ${getSpacing(vl)};
 `;
-
 const pdt = vl => css`
     padding-top: ${getSpacing(vl)};
 `;
-
 const pdx = vl => css`
     padding-left: ${getSpacing(vl)};
     padding-right: ${getSpacing(vl)};
 `;
-
 const pdy = vl => css`
     padding-top: ${getSpacing(vl)};
     padding-bottom: ${getSpacing(vl)};
 `;
-
 const parseHeight = height => css`
     height: ${parseCSSValue(height)};
 `;
-
 const parseMaxHeight = height => css`
     max-height: ${parseCSSValue(height)};
 `;
-
 const parseMaxWidth = width => css`
     max-width: ${parseCSSValue(width)};
 `;
-
 const parseMaxWidthHeight = (width, height = width) => css`
     max-width: ${parseCSSValue(width)};
     max-height: ${parseCSSValue(height)};
 `;
-
 const parseMinHeight = height => css`
     min-height: ${parseCSSValue(height)};
 `;
-
 const parseMinWidth = width => css`
     min-width: ${parseCSSValue(width)};
 `;
-
 const parseMinWidthHeight = (width, height = width) => css`
     min-width: ${parseCSSValue(width)};
     min-height: ${parseCSSValue(height)};
 `;
-
 const parseWidth = width => css`
     width: ${parseCSSValue(width)};
 `;
-
 const parseWidthHeight = (width, height = width) => css`
     width: ${parseCSSValue(width)};
     height: ${parseCSSValue(height)};
 `;
-
 const pointerEventsAuto = css`
     pointer-events: auto;
 `;
@@ -394,11 +357,9 @@ const textCapitalize = css`
 const textCenter = css`
     text-align: center;
 `;
-
 const textColor = cl => css`
     color: ${getColor(cl)};
 `;
-
 const textCurrent = css`
     color: currentColor;
 `;
@@ -440,9 +401,7 @@ const whiteSpaceNoWrap = css`
 const whiteSpacePreWrap = css`
     white-space: pre-wrap;
 `;
-
 const z = vl => css`
     z-index: ${zIndex(vl)};
 `;
-
 export { bgColor, bgCurrent, bgTransparent, border, borderNone, borderRadius, borderRadius100, borderRadius4px, borderRadius50, boxBorder, boxContent, breakAll, breakWord, cursorDefault, cursorInherit, cursorMove, cursorNoDrop, cursorNotAllowed, cursorPointer, cursorText, displayBlock, displayFlex, displayInlineBlock, displayInlineFlex, displayNone, flexCol, flexColReverse, shadowNone, flexNowrap, flexRow, flexRowReverse, flexShrink, flexShrink0, flexWrap, flexWrapReverse, floatLeft, floatNone, floatRight, gap, gapX, gapY, inset, insetX, insetY, italic, itemsCenter, itemsEnd, itemsStart, justifyAround, justifyBetween, justifyCenter, justifyEnd, justifyEvenly, justifyStart, mg, mgb, mgl, mgr, mgt, mgx, mgy, noBorder, noBoxShadow, noMargin, noPadding, objectContain, objectCover, objectFill, objectNone, order, outlineNone, overflowAuto, overflowHidden, pd, pdb, pdl, pdr, pdt, pdx, pdy, parseHeight, parseMaxHeight, parseMaxWidth, parseMaxWidthHeight, parseMinHeight, parseMinWidth, parseMinWidthHeight, parseWidth, parseWidthHeight, pointerEventsAuto, pointerEventsInherit, pointerEventsInitial, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, textCapitalize, textCenter, textColor, textCurrent, textEllipsis, textLeft, textLineThrough, textLowercase, textRight, textunderline, textUppercase, truncate, userSelectNone, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };

package/styles/typography.js

@@ -18,13 +18,13 @@ const fontWeightRegular = css`
 `;
 const fontWeightNormal = css`
     font-weight: normal;
-`; // follow rules line-height = fontsize + 4
+`;
 
+// follow rules line-height = fontsize + 4
 const getFontSize = size => css`
     font-size: ${parseToPixel(size)};
     line-height: ${parseToPixel(size + 4)};
 `;
-
 const title1 = css`
     ${fontNormal};
     ${fontWeightBold};
@@ -103,10 +103,10 @@ const helperText = css`
 `;
 export const typography = [[title1, ['title1', 't1']], [title2, ['title2', 't2']], [title3, ['title3', 't3']], [title4, ['title4', 't4']], [heading1, ['heading1', 'h1']], [heading2, ['heading2', 'h2']], [heading3, ['heading3', 'h3']], [heading4, ['heading4', 'h4']], [heading5, ['heading5', 'h5']], [heading6, ['heading6', 'h6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']]].reduce((obj, [value, keys]) => {
   for (const key of keys) {
-    obj = { ...obj,
+    obj = {
+      ...obj,
       [key]: value
     };
   }
-
   return obj;
 }, {});

package/styles/utils.js

@@ -1,32 +1,32 @@
 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 => {
   // example param cl: primary, info, system.rest, text.main, red, #333333,...
   return cl.split('.').reduce((p, c) => p && p[c] || null, colors) || cl;

package/theme/createBreakpoints.js

@@ -1,22 +1,22 @@
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
 export const breakpointKeys = ['xs', 'sm', 'md', 'lg', 'xl'];
-
 const sortBreakpointsValues = values => {
   const breakpointsAsArray = Object.keys(values).map(key => ({
     key,
     val: values[key]
-  })) || []; // Sort in ascending order
-
+  })) || [];
+  // Sort in ascending order
   breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
   return breakpointsAsArray.reduce((acc, obj) => {
-    return { ...acc,
+    return {
+      ...acc,
       [obj.key]: obj.val
     };
   }, {});
-}; // Keep in mind that @media is inclusive by the CSS specification.
-
+};
 
+// Keep in mind that @media is inclusive by the CSS specification.
 const createBreakpoints = breakpoints => {
   const {
     // The breakpoint **start** at this value.
@@ -31,53 +31,43 @@ const createBreakpoints = breakpoints => {
       lg: 1200,
       // large
       xl: 1536 // extra-large
-
     },
+
     unit = 'px',
     step = 5,
     ...other
   } = breakpoints;
   const sortedValues = sortBreakpointsValues(values);
   const keys = Object.keys(sortedValues);
-
   const up = (key, removeMedia = false) => {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `${removeMedia ? '' : '@media '}(min-width:${value}${unit})`;
   };
-
   const down = (key, removeMedia = false) => {
     const value = typeof values[key] === 'number' ? values[key] : key;
     return `${removeMedia ? '' : '@media '}(max-width:${value - step / 100}${unit})`;
   };
-
   const between = (start, end, removeMedia = false) => {
     const endIndex = keys.indexOf(end);
     return `${removeMedia ? '' : '@media '}(min-width:${typeof values[start] === 'number' ? values[start] : start}${unit}) and ` + `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex]] === 'number' ? values[keys[endIndex]] : end) - step / 100}${unit})`;
   };
-
   const only = (key, removeMedia = false) => {
     if (keys.indexOf(key) + 1 < keys.length) {
       return between(key, keys[keys.indexOf(key) + 1], removeMedia);
     }
-
     return up(key, removeMedia);
   };
-
   const not = (key, removeMedia = false) => {
     // handle first and last key separately, for better readability
     const keyIndex = keys.indexOf(key);
-
     if (keyIndex === 0) {
       return up(keys[1], removeMedia);
     }
-
     if (keyIndex === keys.length - 1) {
       return down(keys[keyIndex], removeMedia);
     }
-
     return between(key, keys[keys.indexOf(key) + 1]).replace('@media', removeMedia ? 'not all and' : '@media not all and');
   };
-
   return {
     keys,
     values: sortedValues,
@@ -90,5 +80,4 @@ const createBreakpoints = breakpoints => {
     ...other
   };
 };
-
 export default createBreakpoints;

package/theme/make-styles.js

@@ -5,17 +5,15 @@ import theme from "./settings";
 export const makeStylesCache = createCache({
   key: 'css'
 });
-
 const makeStyles = styles => {
   return (props = {}) => {
     const cache = makeStylesCache;
-
     if (typeof styles === 'function') {
       styles = styles(theme);
     }
-
     const result = Object.keys(styles).reduce((acc, key) => {
-      const _styles = { ...styles[key]
+      const _styles = {
+        ...styles[key]
       };
       Object.keys(_styles).forEach(item => {
         if (typeof _styles[item] === 'function') _styles[item] = _styles[item](props);
@@ -28,5 +26,4 @@ const makeStyles = styles => {
     return result;
   };
 };
-
 export default makeStyles;

package/theme/set-theme.js

@@ -1,9 +1,8 @@
 import Settings from "./settings";
-
 const saveNewTheme = (newTheme, ingredient) => {
   if (typeof newTheme === 'object' && typeof ingredient === 'object') {
-    const newThemeArr = Object.keys(newTheme); // const ingredientArr = Object.keys(ingredient);
-
+    const newThemeArr = Object.keys(newTheme);
+    // const ingredientArr = Object.keys(ingredient);
     newThemeArr.forEach(key => {
       if (newTheme[key] && ingredient[key]) {
         if (typeof newTheme[key] === 'object' && typeof ingredient[key] === 'object') {
@@ -17,19 +16,17 @@ const saveNewTheme = (newTheme, ingredient) => {
     });
   }
 };
-/**
- * set theme setting as global
- * @param {Object} theme
- */
-
 
+/**
+ * set theme setting as global
+ * @param {Object} theme
+ */
 export const setTheme = theme => {
   if (theme && typeof theme === 'object') {
     const themeKeys = Object.keys(theme);
     themeKeys.forEach(key => {
       const newTheme = theme[key];
       const ingredient = Settings[key];
-
       if (newTheme && ingredient) {
         saveNewTheme(newTheme, ingredient);
       }

package/theme/settings.js

@@ -1,15 +1,14 @@
-import * as colors from "../styles/colors";
-import { font } from "../styles/font";
 import { color } from "../styles/colors";
-import { getSpacing, zIndex, setZIndex } from "../styles/general";
+import { font } from "../styles/font";
+import { getSpacing, setZIndex, zIndex } from "../styles/general";
+import { typography as typographies } from "../styles/typography";
+import createBreakpoints from "./createBreakpoints";
 const {
   fontSize,
   fontFamily,
   fontFamilyBold,
   fontFamilyMedium
 } = font;
-import { typography as typographies } from "../styles/typography";
-import createBreakpoints from "./createBreakpoints";
 const settings = {
   border: {
     radius: '4px',
@@ -19,22 +18,18 @@ const settings = {
     large: '0 4px 4px 0 rgba(0, 0, 0, 0.25)',
     small: '0 2px 2px 0 rgba(0, 0, 0, 0.25)'
   },
-  colors: { ...color,
-    border: colors.dark6,
-    danger: colors.danger5,
-    default: colors.dark,
-    disabled: colors.dark4,
-    focus: colors.blue16,
-    hover: colors.blue13,
-    info: colors.info5,
-    input: colors.dark,
-    label: colors.dark8,
-    link: colors.info5,
-    placeholder: colors.dark6,
-    primary: colors.brand,
-    secondary: colors.dark6,
-    success: colors.success5,
-    warning: colors.warning5
+  colors: {
+    ...color,
+    disabled: color.system.disabled,
+    hover: color.fill.hover,
+    label: color.text.normal_label,
+    placeholder: color.text.sub,
+    primary: color.system.active,
+    secondary: color.system.rest,
+    success: color.semantic.success,
+    warning: color.semantic.warning,
+    danger: color.semantic.danger,
+    info: color.semantic.info
   },
   typography: {
     fontFamily,
@@ -66,9 +61,9 @@ const settings = {
       lg: 1200,
       // large
       xl: 1536 // extra-large
-
     }
   }),
+
   spacing: vl => getSpacing(vl),
   zIndex: vl => zIndex(vl),
   setZIndex: vl => setZIndex(vl)

package/theme/theme-provider.js

@@ -1,5 +1,4 @@
 /** @jsxRuntime classic */
-
 /** @jsx jsx */
 import { memo, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';