diginet-core-ui 1.4.39 → 1.4.40

package/src/styles/general.js

@@ -0,0 +1,824 @@
+import { css } from '@emotion/core';
+import { animations } from './animations';
+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',
+];
+
+/**
+ * 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)}
+ */
+
+export const getSpacing = (vl = 1) => {
+    if (typeof vl === 'number') return Number(vl) * rootSpacing;
+    else if (Array.isArray(vl)) {
+        if (vl.length > 4) vl.length = 4;
+        return vl.flatMap(i => (isNaN(i) ? i : i * rootSpacing + 'px')).join(' ');
+    } else return vl;
+};
+
+/**
+ * replace rootZIndex
+ * @param number
+ */
+export const setZIndex = number => {
+    number = Number(number || 0);
+    if (!isNaN(number)) rootZIndex = number;
+};
+
+// Common CSS
+const animation = ({ keyframes = animations.fadeIn, duration = '0.5s', timingFunction = 'ease' }) => css`
+    animation: ${keyframes} ${duration} ${timingFunction};
+`;
+
+const aspectSquare = css`
+    aspect-ratio: 1 / 1;
+`;
+
+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 ${getColor(colorVl || 'system/on-standard')};
+`;
+
+const borderBottom = (withVl, colorVl) => css`
+    border-bottom: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/on-standard')};
+`;
+
+const borderBottomColor = cl => css`
+    border-bottom-color: ${getColor(cl)};
+`;
+
+const borderColor = cl => css`
+    border-color: ${getColor(cl)};
+`;
+
+const borderDashed = css`
+    border-style: dashed;
+`;
+const borderNone = css`
+    border: none;
+`;
+
+const borderRadius = vl => css`
+    border-radius: ${parseCSSValue(vl)};
+`;
+
+const borderRadius100 = css`
+    border-radius: 100%;
+`;
+
+const borderRadius4px = css`
+    border-radius: 4px;
+`;
+
+const borderRadius50 = css`
+    border-radius: 50%;
+`;
+
+const borderRight = (withVl, colorVl) => css`
+    border-right: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/on-standard')};
+`;
+
+const borderTop = (withVl, colorVl) => css`
+    border-top: ${parseToPixel(withVl)} solid ${getColor(colorVl || 'system/on-standard')};
+`;
+
+const borderTopColor = cl => css`
+    border-top-color: ${getColor(cl)};
+`;
+
+const bottom = vl => css`
+    bottom: ${parseCSSValue(vl)};
+`;
+
+const boxBorder = css`
+    box-sizing: border-box;
+`;
+
+const boxContent = css`
+    box-sizing: content-box;
+`;
+
+const breakAll = css`
+    word-break: break-all;
+`;
+
+const breakWord = css`
+    word-break: break-word;
+`;
+
+const cursorDefault = css`
+    cursor: default;
+`;
+
+const cursorInherit = css`
+    cursor: inherit;
+`;
+
+const cursorInitial = css`
+    cursor: initial;
+`;
+
+const cursorMove = css`
+    cursor: move;
+`;
+
+const cursorNoDrop = css`
+    cursor: no-drop !important;
+`;
+
+const cursorNotAllowed = css`
+    cursor: not-allowed;
+`;
+
+const cursorText = css`
+    cursor: text;
+`;
+
+const cursorPointer = css`
+    cursor: pointer;
+`;
+
+const displayBlock = css`
+    display: block;
+`;
+
+const displayInlineBlock = css`
+    display: inline-block;
+`;
+
+const displayInlineFlex = css`
+    display: inline-flex;
+`;
+
+const displayFlex = css`
+    display: flex;
+`;
+
+const displayNone = css`
+    display: none;
+`;
+
+const fill = cl => css`
+    fill: ${getColor(cl)};
+`;
+
+const flexCol = css`
+    display: flex;
+    flex-direction: column;
+`;
+
+const flexColReverse = css`
+    display: flex;
+    flex-direction: column-reverse;
+`;
+
+const flexNowrap = css`
+    flex-wrap: nowrap;
+`;
+
+const flexRow = css`
+    display: flex;
+    flex-direction: row;
+`;
+
+const flexRowReverse = css`
+    flex-direction: row-reverse;
+`;
+
+const flexShrink = css`
+    flex-shrink: 1;
+`;
+
+const flexShrink0 = css`
+    flex-shrink: 0;
+`;
+
+const flexWrap = css`
+    flex-wrap: wrap;
+`;
+
+const flexWrapReverse = css`
+    flex-wrap: wrap-reverse;
+`;
+
+const floatLeft = css`
+    float: left;
+`;
+
+const floatNone = css`
+    float: none;
+`;
+
+const floatRight = css`
+    float: right;
+`;
+
+// deprecated
+const gap = vl => css`
+    gap: ${getSpacing(vl)};
+`;
+
+// deprecated
+const gapX = vl => css`
+    column-gap: ${getSpacing(vl)};
+`;
+
+// deprecated
+const gapY = vl => css`
+    column-gap: ${getSpacing(vl)};
+`;
+
+const inset = vl => css`
+    ${insetX(vl)};
+    ${insetY(vl)};
+`;
+
+const insetX = vl => css`
+    right: ${parseCSSValue(vl)};
+    left: ${parseCSSValue(vl)};
+`;
+
+const insetY = vl => css`
+    top: ${parseCSSValue(vl)};
+    bottom: ${parseCSSValue(vl)};
+`;
+
+const invisible = css`
+    visibility: hidden;
+`;
+
+const italic = css`
+    font-style: italic;
+`;
+
+const itemsCenter = css`
+    align-items: center;
+`;
+
+const itemsEnd = css`
+    align-items: flex-end;
+`;
+
+const itemsStart = css`
+    align-items: flex-start;
+`;
+
+const justifyAround = css`
+    justify-content: space-around;
+`;
+
+const justifyBetween = css`
+    justify-content: space-between;
+`;
+
+const justifyCenter = css`
+    justify-content: center;
+`;
+
+const justifyEnd = css`
+    justify-content: flex-end;
+`;
+
+const justifyEvenly = css`
+    justify-content: space-evenly;
+`;
+
+const justifyStart = css`
+    justify-content: flex-start;
+`;
+
+const left = vl => css`
+    left: ${parseCSSValue(vl)};
+`;
+
+const listNone = css`
+    list-style-type: none;
+`;
+
+// deprecated
+const mg = vl => css`
+    margin: ${getSpacing(vl)};
+`;
+
+// deprecated
+const mgb = vl => css`
+    margin-bottom: ${getSpacing(vl)};
+`;
+
+// deprecated
+const mgl = vl => css`
+    margin-left: ${getSpacing(vl)};
+`;
+
+// deprecated
+const mgr = vl => css`
+    margin-right: ${getSpacing(vl)};
+`;
+
+// deprecated
+const mgt = vl => css`
+    margin-top: ${getSpacing(vl)};
+`;
+
+// deprecated
+const mgx = vl => css`
+    margin-left: ${getSpacing(vl)};
+    margin-right: ${getSpacing(vl)};
+`;
+
+// deprecated
+const mgy = vl => css`
+    margin-top: ${getSpacing(vl)};
+    margin-bottom: ${getSpacing(vl)};
+`;
+
+const noBorder = css`
+    border: none !important;
+`;
+
+const noBoxShadow = css`
+    box-shadow: none !important;
+`;
+
+const noMargin = css`
+    margin: 0 !important;
+`;
+
+const noPadding = css`
+    padding: 0 !important;
+`;
+
+const objectContain = css`
+    object-fit: contain;
+`;
+
+const objectCover = css`
+    object-fit: cover;
+`;
+
+const objectFill = css`
+    object-fit: fill;
+`;
+
+const objectFit = vl => css`
+    object-fit: ${vl};
+`;
+
+const objectNone = css`
+    object-fit: none;
+`;
+
+const order = vl => css`
+    order: ${vl};
+`;
+
+const outlineNone = css`
+    outline: none;
+`;
+
+const overflowAuto = css`
+    overflow: auto;
+`;
+
+const overflowHidden = css`
+    overflow: hidden;
+`;
+
+const overflowXHidden = css`
+    overflow-x: hidden;
+`;
+
+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)};
+`;
+
+// deprecated
+const pd = vl => css`
+    padding: ${getSpacing(vl)};
+`;
+
+// deprecated
+const pdb = vl => css`
+    padding-bottom: ${getSpacing(vl)};
+`;
+
+// deprecated
+const pdl = vl => css`
+    padding-left: ${getSpacing(vl)};
+`;
+
+// deprecated
+const pdr = vl => css`
+    padding-right: ${getSpacing(vl)};
+`;
+
+// deprecated
+const pdt = vl => css`
+    padding-top: ${getSpacing(vl)};
+`;
+
+// deprecated
+const pdx = vl => css`
+    padding-left: ${getSpacing(vl)};
+    padding-right: ${getSpacing(vl)};
+`;
+
+// deprecated
+const pdy = vl => css`
+    padding-top: ${getSpacing(vl)};
+    padding-bottom: ${getSpacing(vl)};
+`;
+
+const pointerEventsAuto = css`
+    pointer-events: auto;
+`;
+
+const pointerEventsInherit = css`
+    pointer-events: inherit;
+`;
+
+const pointerEventsInitial = css`
+    pointer-events: initial;
+`;
+
+const pointerEventsNone = css`
+    pointer-events: none;
+`;
+
+const positionAbsolute = css`
+    position: absolute;
+`;
+
+const positionFixed = css`
+    position: fixed;
+`;
+
+const positionRelative = css`
+    position: relative;
+`;
+
+const positionSticky = css`
+    position: sticky;
+`;
+
+const right = vl => css`
+    right: ${parseCSSValue(vl)};
+`;
+
+const scale = vl => css`
+    transform: scale(${vl});
+`;
+
+const scaleX = vl => css`
+    transform: scaleX(${vl});
+`;
+
+const scaleY = vl => css`
+    transform: scaleY(${vl});
+`;
+
+const selfCenter = css`
+    align-self: center;
+`;
+
+const selfEnd = css`
+    align-self: flex-end;
+`;
+
+const selfStart = css`
+    align-self: flex-start;
+`;
+
+const shadowLarge = css`
+    box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+`;
+
+const shadowNone = css`
+    box-shadow: none;
+`;
+
+const shadowSmall = css`
+    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.25);
+`;
+
+const textCapitalize = css`
+    text-transform: capitalize;
+`;
+
+const textCenter = css`
+    text-align: center;
+`;
+
+const textColor = cl => css`
+    color: ${getColor(cl)};
+`;
+
+const textCurrent = css`
+    color: currentColor;
+`;
+
+const textEllipsis = css`
+    text-overflow: ellipsis;
+`;
+
+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 textSentence = css`
+    & {
+        text-transform: lowercase;
+    }
+    &:first-letter {
+        text-transform: uppercase;
+    }
+`;
+
+const textUnderline = css`
+    text-decoration: underline;
+`;
+
+const textUppercase = css`
+    text-transform: uppercase;
+`;
+
+const top = vl => css`
+    top: ${parseCSSValue(vl)};
+`;
+
+const truncate = css`
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+
+const userSelectNone = css`
+    user-select: none;
+`;
+
+const visible = css`
+    visibility: visible;
+`;
+
+const whiteSpaceBreakSpaces = css`
+    white-space: break-spaces;
+`;
+
+const whiteSpaceNoWrap = css`
+    white-space: nowrap;
+`;
+
+const whiteSpacePreWrap = css`
+    white-space: pre-wrap;
+`;
+
+const z = vl => css`
+    z-index: ${zIndex(vl)};
+`;
+
+export {
+    animation,
+    aspectSquare,
+    bgColor,
+    bgCurrent,
+    bgTransparent,
+    border,
+    borderBottom,
+    borderBottomColor,
+    borderColor,
+    borderDashed,
+    borderNone,
+    borderRadius,
+    borderRadius100,
+    borderRadius4px,
+    borderRadius50,
+    borderRight,
+    borderTop,
+    borderTopColor,
+    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, // deprecated
+    gapX, // deprecated
+    gapY, // deprecated
+    inset,
+    insetX,
+    insetY,
+    invisible,
+    italic,
+    itemsCenter,
+    itemsEnd,
+    itemsStart,
+    justifyAround,
+    justifyBetween,
+    justifyCenter,
+    justifyEnd,
+    justifyEvenly,
+    justifyStart,
+    left,
+    listNone,
+    mg, // deprecated
+    mgb, // deprecated
+    mgl, // deprecated
+    mgr, // deprecated
+    mgt, // deprecated
+    mgx, // deprecated
+    mgy, // deprecated
+    noBorder,
+    noBoxShadow,
+    noMargin,
+    noPadding,
+    objectContain,
+    objectCover,
+    objectFill,
+    objectFit,
+    objectNone,
+    order,
+    outlineNone,
+    overflowAuto,
+    overflowHidden,
+    overflowXHidden,
+    parseHeight,
+    parseMaxHeight,
+    parseMaxWidth,
+    parseMaxWidthHeight,
+    parseMinHeight,
+    parseMinWidth,
+    parseMinWidthHeight,
+    parseWidth,
+    parseWidthHeight,
+    pd, // deprecated
+    pdb, // deprecated
+    pdl, // deprecated
+    pdr, // deprecated
+    pdt, // deprecated
+    pdx, // deprecated
+    pdy, // deprecated
+    pointerEventsAuto,
+    pointerEventsInherit,
+    pointerEventsInitial,
+    pointerEventsNone,
+    positionAbsolute,
+    positionFixed,
+    positionRelative,
+    positionSticky,
+    right,
+    scale,
+    scaleX,
+    scaleY,
+    selfCenter,
+    selfEnd,
+    selfStart,
+    shadowLarge,
+    shadowNone,
+    shadowSmall,
+    textCapitalize,
+    textCenter,
+    textColor,
+    textCurrent,
+    textEllipsis,
+    textLeft,
+    textLineThrough,
+    textLowercase,
+    textRight,
+    textSentence,
+    textUnderline,
+    textUppercase,
+    top,
+    truncate,
+    userSelectNone,
+    visible,
+    whiteSpaceBreakSpaces,
+    whiteSpaceNoWrap,
+    whiteSpacePreWrap,
+    z,
+};