All files / src/utils theme.ts

97.3% Statements 72/74
90.41% Branches 66/73
100% Functions 18/18
100% Lines 72/72

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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170              51114x 51114x   51114x 51114x   51114x 51114x 51114x   51114x 226x   50888x         533x 533x 533x         3x 3x 3x         1239x 1239x 1239x         2321x 2321x 2321x         2116x 2116x 2116x         10110x 10110x 10110x         16327x 12307x 12307x 12307x 12307x   726x 726x 726x   12307x 12307x 12307x 12307x         349x 349x 349x 240x           109x 94x 94x 15x 3x 3x 12x 1x 1x 11x 1x 1x     109x 109x 109x   109x             109x 109x 3x   109x 1x   109x 1x     109x 10x 1x                           9x                         99x                    
import { theme as _theme } from 'styled-tools';
import _get from 'lodash/get';
import { ThemeConfig } from '../types';
import { css } from '../styled';
import { isFunction } from './isFunction';
 
export function theme(themeKey: string, path?: string, defaultValue?: any) {
  return (props: { theme?: ThemeConfig; variant?: string }) => {
    const { variant } = props;
 
    const selector = `${themeKey}${path ? `.${path}` : ''}`;
    const variantSelector = `${themeKey}.variants.${variant}.${path}`;
 
    const defaultTheme = _get(props, `overrides.${selector}`) || _get(props, `theme.${selector}`);
    const variantTheme = _get(props, `overrides.${variantSelector}`) || _get(props, `theme.${variantSelector}`);
    const theme = variantTheme || defaultTheme || defaultValue;
 
    if (isFunction(theme)) {
      return theme(props);
    }
    return theme;
  };
}
 
export function altitude(selector?: string, defaultValue?: any) {
  return (props: { altitude?: string; theme?: ThemeConfig }) => {
    const altitude = theme('altitudes', selector || props.altitude, defaultValue)(props);
    return altitude;
  };
}
 
export function border(selector?: string, defaultValue?: any) {
  return (props: { border?: string; theme?: ThemeConfig }) => {
    const border = theme('borders', selector || props.border, defaultValue)(props);
    return border;
  };
}
 
export function borderRadius(selector?: string, defaultValue?: any) {
  return (props: { borderRadius?: string; theme?: ThemeConfig }) => {
    const borderRadius = theme('borderRadii', selector || props.borderRadius, defaultValue)(props);
    return borderRadius;
  };
}
 
export function fontSize(selector?: string, defaultValue?: any) {
  return (props: { fontSize?: string; theme?: ThemeConfig }) => {
    const color = theme('fontSizes', selector || props.fontSize, defaultValue)(props);
    return color;
  };
}
 
export function fontWeight(selector?: string, defaultValue?: any) {
  return (props: { fontWeight?: string; theme?: ThemeConfig }) => {
    const color = theme('fontWeights', selector || props.fontWeight, defaultValue)(props);
    return color;
  };
}
 
export function palette(selector?: string, defaultValue?: any) {
  return (props: { palette?: string; theme?: ThemeConfig }) => {
    const color = theme('palette', selector || props.palette, defaultValue)(props);
    return color;
  };
}
 
export function space(_scalar: number | string | void, _scaleType: 'minor' | 'major' = 'minor') {
  return (props: { theme?: ThemeConfig }) => {
    let scalar = _scalar;
    let scaleType = _scaleType;
    Iif (!scalar) return 0;
    if (typeof scalar === 'string' && (scalar.includes('minor') || scalar.includes('major'))) {
      // @ts-ignore
      [scaleType, scalar] = scalar.split('-');
      scalar = parseFloat(scalar);
      Iif (isNaN(scalar)) return 0;
    }
    const unitSize: number = _get(props, `theme.layout.${scaleType}Unit`);
    const fontSize: number = _get(props, 'theme.global.fontSize');
    const value = (scalar as number) * (unitSize / fontSize);
    return value;
  };
}
 
export function breakpoint(breakpoint: string, cssStyle, config?: { show?: boolean; else? }) {
  const { else: elseStyle = '', show = false } = config || {};
  return props => {
    if (!breakpoint)
      return css`
        ${elseStyle};
      `;
 
    let key: string | undefined;
    let elseKey: string | undefined;
    if (!show && breakpoint.includes('max')) {
      key = 'max-width';
      elseKey = 'min-width';
    } else if (!show && breakpoint.includes('min')) {
      key = 'min-width';
      elseKey = 'max-width';
    } else if (show && breakpoint.includes('max')) {
      key = 'min-width';
      elseKey = 'max-width';
    } else if (show && breakpoint.includes('min')) {
      key = 'max-width';
      elseKey = 'min-width';
    }
 
    let strippedBreakpoint = breakpoint;
    strippedBreakpoint = strippedBreakpoint.replace('max-', '');
    strippedBreakpoint = strippedBreakpoint.replace('min-', '');
 
    const minBreakpointValues: { [key: string]: number } = {
      mobile: 0,
      tablet: _get(props, 'theme.breakpoints.mobile'),
      desktop: _get(props, 'theme.breakpoints.tablet'),
      widescreen: _get(props, 'theme.breakpoints.desktop'),
      fullHD: _get(props, 'theme.breakpoints.widescreen')
    };
    let breakpointValue = _get(props, `theme.breakpoints.${strippedBreakpoint}`);
    if (!show && breakpoint.includes('min')) {
      breakpointValue = minBreakpointValues[strippedBreakpoint] + 1;
    }
    if (show && breakpoint.includes('min')) {
      breakpointValue = minBreakpointValues[strippedBreakpoint];
    }
    if (show && breakpoint.includes('max')) {
      breakpointValue = breakpointValue + 1;
    }
 
    if (!breakpoint.includes('min-') && !breakpoint.includes('max-')) {
      if (show) {
        return css`
          @media screen and (max-width: ${minBreakpointValues[breakpoint]}px) {
            ${cssStyle};
          }
          @media screen and (min-width: ${breakpointValue + 1}px) {
            ${cssStyle};
          }
 
          @media screen and (min-width: ${minBreakpointValues[breakpoint] +
              1}px) and (max-width: ${breakpointValue}px) {
            ${elseStyle};
          }
        `;
      }
      return css`
        @media screen and (min-width: ${minBreakpointValues[breakpoint] + 1}px) and (max-width: ${breakpointValue}px) {
          ${cssStyle};
        }
 
        @media screen and (max-width: ${minBreakpointValues[breakpoint]}px) {
          ${elseStyle};
        }
        @media screen and (min-width: ${breakpointValue + 1}px) {
          ${elseStyle};
        }
      `;
    }
    return css`
      @media screen and (${key}: ${breakpointValue}px) {
        ${cssStyle};
      }
      @media screen and (${elseKey}: ${breakpointValue}px) {
        ${elseStyle};
      }
    `;
  };
}