# All files / utils/styledHelpers core.js

100% Statements 42/42
96.15% Branches 25/26
100% Functions 10/10
100% Lines 37/37

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100

    56x
    514x
    514x

    514x

    56x
    2187x
    2187x
    2187x
    7x

    2180x

    2187x

    56x
    1879x
    1879x
    1879x
    563x

    1879x

    1879x

    56x
    1884x
    1884x
    1884x
    1765x
    1765x

    1884x

    1884x

    1879x
    1622x
    1879x
    1879x
    1879x

    56x
    1636x
    1x

    1635x
    7x

    1628x

     import {
      borderRadius,
      color,
      fontFamily,
      fontSize,
      letterSpacing,
      lineHeight,
      textAlign,
    } from 'styled-system';
    import { getGlobalOverrides } from 'src/global-styles';
    import { defaultStylesBase } from './cssDefaults';
    import {
      resolveColor,
      resolveFontFamily,
      scaleFont,
      scaleFactor, resolveBorderRadius,
    } from './utils';

    export const borderRadiusCore = props => {
      const nextGlobalOverrides = getGlobalOverrides(props);
      const nextProps = {
        ...props,
        borderRadius: resolveBorderRadius(props, nextGlobalOverrides),
      };
      return borderRadius(nextProps);
    };

    export const colorCore = props => {
      let nextProps = null;
      const nextGlobalOverrides = getGlobalOverrides(props);
      if (props.variant) {
        nextProps = {
          ...props,
          backgroundColor: resolveColor(props.bg, nextGlobalOverrides, null),
          bg: resolveColor(props.bg, nextGlobalOverrides, null),
          color: resolveColor(props.color, nextGlobalOverrides, null),
        };
      } else {
        nextProps = {
          ...props,
          backgroundColor: resolveColor(props.bg, nextGlobalOverrides, defaultStylesBase.bg),
          bg: resolveColor(props.bg, nextGlobalOverrides, defaultStylesBase.bg),
          color: resolveColor(props.color, nextGlobalOverrides),
        };
      }
      return color(nextProps);
    };

    export const fontSizeCore = props => {
      let value = props.fontSize || defaultStylesBase.fontSize;
      const scaleValue = scaleFactor(props);
      if (scaleValue) {
        value = scaleValue ? scaleFont(value, scaleValue, 1, 'rem') : value;
      }
      const nextProps = {
        ...props,
        fontSize: value,
      };
      return fontSize(nextProps);
    };

    export const fontFamilyCore = props => {
      const defaultValue = resolveFontFamily(defaultStylesBase.fontFamily);
      let value = defaultValue;
      if (props && props.fontFamily) {
        const nextGlobalOverrides = getGlobalOverrides(props);
        value = resolveFontFamily(props.fontFamily, nextGlobalOverrides, defaultValue);
      }
      const nextProps = {
        ...props,
        fontFamily: value,
      };
      return fontFamily(nextProps);
    };

    export const letterSpacingCore = props => letterSpacing({ ...props, letterSpacing: props.kerning || defaultStylesBase.kerning });
    export const lineHeightCore = props => lineHeight({ ...props, lineHeight: props.lineHeight || defaultStylesBase.lineHeight });
    export const fontStyleCore = props => `${props.italic ? 'font-style: italic;' : ''}`;
    export const textAlignCore = props => textAlign({ ...props, textAlign: props.textAlign || defaultStylesBase.textAlign });
    export const textDecorationCore = props => `text-decoration: ${props.textDecoration || defaultStylesBase.textDecoration};`;

    export const ellipsisCore = props => {
      if (props.ellipsis > 1) {
        return {
          display: '-webkit-box',
          overflow: 'hidden',
          WebkitBoxOrient: 'vertical',
          WebkitLineClamp: props.ellipsis,
        };
      }
      if (props.ellipsis) {
        return {
          overflow: 'hidden',
          textOverflow: 'ellipsis',
          whiteSpace: 'nowrap',
        };
      }
      return {};
    };