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                      59x 21664x                     21658x 21658x                       6x               14220x          
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),
});