# All files / global-styles index.js

100% Statements 7/7
100% Branches 15/15
100% Functions 2/2
100% Lines 6/6

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

    58x
    8073x

    8067x
    8067x

    6x

    5123x

     import { themeGet } from '@styled-system/theme-get';
    import * as border from 'src/assets/json/border.json';
    import * as breakpoints from 'src/assets/json/breakpoints.json';
    import * as colors from 'src/assets/json/colors.json';
    import * as fontFamily from 'src/assets/json/fontFamily.json';
    import * as fontSize from 'src/assets/json/fontSize.json';
    import * as shadow from 'src/assets/json/shadow.json';
    import * as zIndex from 'src/assets/json/zIndex.json';
    import * as grid from 'src/assets/json/grid.json';
    import * as buttonVariant from 'src/assets/json/buttonVariant.json';

    export const getGlobalStyles = (overrides = {}) => {
      if (overrides instanceof Object && !Array.isArray(overrides)) {
        const {
          border: borderOverrides = {},
          breakpoints: breakpointOverrides = {},
          buttonVariant: buttonVariantOverrides = {},
          colors: colorsOverrides = {},
          fontFamily: fontFamilyOverrides = {},
          fontSize: fontSizeOverrides = {},
          shadow: shadowOverrides = {},
          zIndex: zIndexOverrides = {},
          grid: gridOverrides = {},
        } = overrides;
        return {
          border: { ...border, ...borderOverrides },
          breakpoints: { ...breakpoints, ...breakpointOverrides },
          buttonVariant: { ...buttonVariant, ...buttonVariantOverrides },
          colors: { ...colors, ...colorsOverrides },
          fontFamily: { ...fontFamily, ...fontFamilyOverrides },
          fontSize: { ...fontSize, ...fontSizeOverrides },
          grid: { ...grid, ...gridOverrides },
          shadow: { ...shadow, ...shadowOverrides },
          zIndex: { ...zIndex, ...zIndexOverrides },
        };
      }
      return getGlobalStyles();
    };

    /**
     * Takes in an object containing theme e.g. props.theme.
     * Returns a new global style object with properties of global styles merged and overridden with styles defined in the theme.
     * @param {Object} props The object containing the theme object.
     */
    export const getGlobalOverrides = (props = {}) => getGlobalStyles({
      border: themeGet('border', null)(props),
      colors: themeGet('colors', null)(props),
      fontFamily: themeGet('fonts', null)(props),
    });