diginet-core-ui 1.3.87 → 1.3.88

package/styles/general.js

@@ -4,22 +4,21 @@ 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) => {
@@ -28,35 +27,39 @@ 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%;
 `;
@@ -156,26 +159,36 @@ 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;
+`;
 const itemsCenter = css`
     align-items: center;
 `;
@@ -203,29 +216,37 @@ 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;
 `;
@@ -250,9 +271,11 @@ const objectFill = css`
 const objectNone = css`
     object-fit: none;
 `;
+
 const order = vl => css`
     order: ${vl};
 `;
+
 const outlineNone = css`
     outline: none;
 `;
@@ -262,62 +285,85 @@ 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;
 `;
+const pointerEventsInherit = css`
+    pointer-events: inherit;
+`;
+const pointerEventsInitial = css`
+    pointer-events: initial;
+`;
 const pointerEventsNone = css`
     pointer-events: none;
 `;
@@ -348,6 +394,11 @@ const textCapitalize = css`
 const textCenter = css`
     text-align: center;
 `;
+
+const textColor = cl => css`
+    color: ${getColor(cl)};
+`;
+
 const textCurrent = css`
     color: currentColor;
 `;
@@ -357,9 +408,18 @@ const textEllipsis = css`
 const textLeft = css`
     text-align: left;
 `;
+const textLineThrough = css`
+    text-decoration: line-through;
+`;
+const textLowercase = css`
+    text-transform: lowercase;
+`;
 const textRight = css`
     text-align: right;
 `;
+const textunderline = css`
+    text-decoration: underline;
+`;
 const textUppercase = css`
     text-transform: uppercase;
 `;
@@ -372,7 +432,7 @@ const userSelectNone = css`
     user-select: none;
 `;
 const whiteSpaceBreakSpaces = css`
-    white-space: break-space;
+    white-space: break-spaces;
 `;
 const whiteSpaceNoWrap = css`
     white-space: nowrap;
@@ -380,7 +440,9 @@ 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, 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, pointerEventsNone, positionAbsolute, positionFixed, positionRelative, positionSticky, selfCenter, selfEnd, selfStart, textCapitalize, textCenter, textCurrent, textEllipsis, textLeft, textRight, textUppercase, truncate, userSelectNone, whiteSpaceBreakSpaces, whiteSpaceNoWrap, whiteSpacePreWrap, z };
+
+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,33 @@
 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 => {
-  return colors[cl] || 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,43 +31,53 @@ 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,
@@ -80,4 +90,5 @@ const createBreakpoints = breakpoints => {
     ...other
   };
 };
+
 export default createBreakpoints;

package/theme/make-styles.js

@@ -5,15 +5,17 @@ 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);
@@ -26,4 +28,5 @@ const makeStyles = styles => {
     return result;
   };
 };
+
 export default makeStyles;

package/theme/set-theme.js

@@ -1,8 +1,9 @@
 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') {
@@ -16,17 +17,19 @@ 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

@@ -19,8 +19,7 @@ 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,
+  colors: { ...color,
     border: colors.dark6,
     danger: colors.danger5,
     default: colors.dark,
@@ -67,9 +66,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,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { memo, useEffect } from 'react';
 import { jsx, css } from '@emotion/core';