diginet-core-ui 1.4.39 → 1.4.40

package/styles/typography.js

@@ -1,156 +0,0 @@
-import { css } from '@emotion/core';
-import { font } from "./font";
-import { parseToPixel } from "./utils";
-export const {
-  fontFamily,
-  fontSize,
-  fontFamilySecurity
-} = font; //export to use general
-
-const fontNormal = css`
-    font-style: normal;
-    font-family: ${fontFamily};
-`;
-const fontWeightBold = css`
-    font-weight: 700;
-`;
-const fontWeightMedium = css`
-    font-weight: 500;
-`;
-const fontWeightRegular = css`
-    font-weight: 400;
-`;
-const fontWeightNormal = css`
-    font-weight: normal;
-`;
-const fontSecurity = css`
-    font-family: ${fontFamilySecurity};
-`;
-
-// Rule: line-height = font-size + 4
-const getFontSize = size => css`
-    font-size: ${parseToPixel(size)};
-    line-height: ${parseToPixel(size + 4)};
-`;
-
-// Exception to the rule: Title1 and Body6 do not follow the rule
-const getFontSizeException = size => css`
-    font-size: ${parseToPixel(size)};
-    line-height: ${parseToPixel(size + 8)};
-    letter-spacing: 0.005em; // 50% on Figma (0.01em is 1%)
-`;
-const title1 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSizeException(parseInt(fontSize) + 12)}; //28
-`;
-const title2 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 10)}; //26
-`;
-const title3 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 8)}; //24
-`;
-const title4 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 6)}; //22
-`;
-const heading1 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 4)}; //20
-`;
-const heading2 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) + 2)}; //18
-`;
-const heading3 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize))}; //16
-`;
-const heading4 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) - 2)}; //14
-`;
-const heading5 = css`
-    ${fontNormal};
-    ${fontWeightBold};
-    ${getFontSize(parseInt(fontSize) - 4)}; //12
-`;
-const heading6 = css`
-    ${fontNormal};
-    ${fontWeightMedium};
-    ${getFontSize(parseInt(fontSize) - 4)}; //12
-`;
-const body1 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) + 12)}; //28
-`;
-const body2 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) + 10)}; //26
-`;
-const body3 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) + 8)}; //24
-`;
-const body4 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) + 6)}; //22
-`;
-const body5 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) + 4)}; //20
-`;
-const body6 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSizeException(parseInt(fontSize) + 2)}; //18
-`;
-const paragraph1 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize))}; //16
-`;
-const paragraph2 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) - 2)}; //14
-`;
-const paragraph3 = css`
-    ${fontNormal};
-    ${fontWeightRegular};
-    ${getFontSize(parseInt(fontSize) - 4)}; //12
-`;
-const uppercase = css`
-    text-transform: uppercase;
-`;
-const label = css`
-    font-size: ${parseInt(fontSize) - 4}px; //12
-    ${fontWeightBold}
-`;
-const helperText = css`
-    font-size: ${parseInt(fontSize) - 4}px; //12
-    ${fontWeightNormal}
-`;
-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']], [body1, ['body1', 'b1']], [body2, ['body2', 'b2']], [body3, ['body3', 'b3']], [body4, ['body4', 'b4']], [body5, ['body5', 'b5']], [body6, ['body6', 'b6']], [paragraph1, ['paragraph1', 'p1']], [paragraph2, ['paragraph2', 'p2']], [paragraph3, ['paragraph3', 'p3']], [uppercase, ['uppercase']], [label, ['label']], [helperText, ['helperText']], [fontSecurity, ['security']]].reduce((obj, [value, keys]) => {
-  for (const key of keys) {
-    obj = {
-      ...obj,
-      [key]: value
-    };
-  }
-  return obj;
-}, {});

package/styles/utils.js

@@ -1,35 +0,0 @@
-import { color as oldColors } from "./colors";
-
-/**
- * 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}
- */
-export const parseToPixel = vl => {
-  if (!vl) return '1px';
-  return typeof vl === 'string' ? vl : `${vl}px`;
-};
-
-/**
- * Get color from CORE colors
- *
- * @param {string} color
- * @param {object} allColors
- * @returns {string}
- */
-export const getColor = (color, allColors = oldColors) => {
-  if (typeof color !== 'string') return;
-  // example param cl: primary, info, system.rest, text.main, red, #333333,...
-  return color.split(/[./]/).reduce((p, c) => p && p[c] || null, allColors) || color;
-};

package/theme/createBreakpoints.js

@@ -1,82 +0,0 @@
-// 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
-  breakpointsAsArray.sort((breakpoint1, breakpoint2) => breakpoint1.val - breakpoint2.val);
-  return breakpointsAsArray.reduce((acc, obj) => {
-    return {
-      ...acc,
-      [obj.key]: obj.val
-    };
-  }, {});
-};
-
-// Keep in mind that @media is inclusive by the CSS specification.
-const createBreakpoints = breakpoints => {
-  const {
-    // The breakpoint **start** at this value.
-    // For instance with the first breakpoint xs: [xs, sm).
-    values = {
-      xs: 0,
-      // extra-small
-      sm: 600,
-      // small
-      md: 900,
-      // medium
-      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,
-    up,
-    down,
-    between,
-    only,
-    not,
-    unit,
-    ...other
-  };
-};
-export default createBreakpoints;

package/theme/createSpacing.js

@@ -1,10 +0,0 @@
-const createSpacing = (spacingInput = 4) => {
-  const spacing = (vl = 1) => {
-    if (typeof vl === 'number') return Number(vl) * spacingInput;else if (Array.isArray(vl)) {
-      if (vl.length > 4) vl.length = 4;
-      return vl.flatMap(i => isNaN(i) ? i : i * spacingInput + 'px').join(' ');
-    } else return vl;
-  };
-  return spacing;
-};
-export default createSpacing;

package/theme/createTheme.js

@@ -1,26 +0,0 @@
-import deepmerge from "../utils/object/deepmerge";
-import createBreakpoints from "./createBreakpoints";
-import createSpacing from "./createSpacing";
-import createZIndex from "./createZIndex";
-const createTheme = (options = {}, ...args) => {
-  const {
-    breakpoints: breakpointsInput = {},
-    spacing: spacingInput,
-    zIndex: zIndexInput,
-    ...other
-  } = options;
-  const breakpoints = createBreakpoints(breakpointsInput);
-  const spacing = createSpacing(spacingInput);
-  const zIndex = createZIndex(zIndexInput);
-  let theme = deepmerge({
-    breakpoints,
-    colors: {},
-    components: {},
-    mode: 'light',
-    spacing,
-    zIndex
-  }, other);
-  theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);
-  return theme;
-};
-export default createTheme;

package/theme/createZIndex.js

@@ -1,9 +0,0 @@
-const createZIndex = (zIndexRootInput = 1500) => {
-  const zIndex = number => {
-    number = Number(number || 0);
-    if (isNaN(number)) return zIndexRootInput;
-    return zIndexRootInput + number;
-  };
-  return zIndex;
-};
-export default createZIndex;

package/theme/index.js

@@ -1,14 +0,0 @@
-export { default as ThemeProvider } from "./theme-provider";
-export { useColor, useTypography } from "./settings";
-export { default as makeStyles } from "./make-styles";
-export { default as useClasses } from "./use-classes";
-import { useTheme } from "./settings";
-import { useTheme as useThemeCORE, withTheme } from '@emotion/react';
-const useThemesCore = () => {
-  try {
-    return Object.keys(useThemeCORE()).length ? useThemeCORE() : useTheme();
-  } catch (e) {
-    return useTheme();
-  }
-};
-export { useThemesCore as useTheme, withTheme };

package/theme/make-styles.js

@@ -1,30 +0,0 @@
-import createCache from '@emotion/cache';
-import { insertStyles } from '@emotion/utils';
-import { serializeStyles } from '@emotion/serialize';
-import { useTheme } from "./index";
-export const makeStylesCache = createCache({
-  key: 'css'
-});
-const makeStyles = styles => {
-  const theme = useTheme();
-  return (props = {}) => {
-    const cache = makeStylesCache;
-    if (typeof styles === 'function') {
-      styles = styles(theme);
-    }
-    const result = Object.keys(styles).reduce((acc, key) => {
-      const _styles = {
-        ...styles[key]
-      };
-      Object.keys(_styles).forEach(item => {
-        if (typeof _styles[item] === 'function') _styles[item] = _styles[item](props);
-      });
-      const serialized = serializeStyles([_styles], cache.registered, props);
-      insertStyles(cache, serialized, false);
-      acc[key] = `DGN-UI-makeStyles-${key} ${cache.key || 'css'}-${serialized.name}`;
-      return acc;
-    }, {});
-    return result;
-  };
-};
-export default makeStyles;