Refactor: move styles utils to theme (#363)

src/utils/styles/media.ts

@@ -1,38 +0,0 @@
-import { css, Interpolation } from 'emotion';
-
-export const breakpoints = {
-  small: 576,
-  medium: 768,
-  large: 1024,
-  container: 1240,
-  xlarge: 1275,
-};
-
-type Breakpoints = typeof breakpoints;
-type Sizes = keyof Breakpoints;
-
-type MediaQuery<T> = {
-  [P in keyof T]: (args: Interpolation, key?: P) => string;
-};
-
-function constructMQ(breakpoint: Sizes, args: Interpolation): string {
-  const label = breakpoints[breakpoint];
-  const prefix = typeof label === 'string' ? '' : 'min-width:';
-  const suffix = typeof label === 'string' ? '' : 'px';
-
-  return css`
-    @media (${prefix + breakpoints[breakpoint] + suffix}) {
-      ${args};
-    }
-  `;
-}
-
-const mq: MediaQuery<Breakpoints> = {
-  small: (args, b = 'small') => constructMQ(b, args),
-  large: (args, b = 'large') => constructMQ(b, args),
-  container: (args, b = 'container') => constructMQ(b, args),
-  medium: (args, b = 'medium') => constructMQ(b, args),
-  xlarge: (args, b = 'xlarge') => constructMQ(b, args),
-};
-
-export default mq;

src/utils/styles/mixings.ts

@@ -1,40 +0,0 @@
-/**
- * CSS to represent truncated text with an ellipsis.
- */
-export function ellipsis(width: string | number): {} {
-  return {
-    display: 'inline-block',
-    maxWidth: width,
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    whiteSpace: 'nowrap',
-    wordWrap: 'normal',
-  };
-}
-
-/**
- * Shorthand that accepts up to four values, including null to skip a value, and maps them to their respective directions.
- */
-interface SpacingShortHand<type> {
-  top?: type;
-  right?: type;
-  bottom?: type;
-  left?: type;
-}
-
-const positionMap = ['Top', 'Right', 'Bottom', 'Left'];
-
-export function spacing(property: 'padding' | 'margin', ...values: SpacingShortHand<number | string>[]): {} {
-  const [firstValue = 0, secondValue = 0, thirdValue = 0, fourthValue = 0] = values;
-  const valuesWithDefaults = [firstValue, secondValue, thirdValue, fourthValue];
-  let styles = {};
-  for (let i = 0; i < valuesWithDefaults.length; i += 1) {
-    if (valuesWithDefaults[i] || valuesWithDefaults[i] === 0) {
-      styles = {
-        ...styles,
-        [`${property}${positionMap[i]}`]: valuesWithDefaults[i],
-      };
-    }
-  }
-  return styles;
-}

src/utils/styles/sizes.ts

@@ -1,22 +0,0 @@
-export const fontSize = {
-  xxl: '26px',
-  xl: '24px',
-  lg: '21px',
-  md: '18px',
-  base: '16px',
-  sm: '14px',
-};
-
-export const lineHeight = {
-  xl: '30px',
-  sm: '18px',
-  xs: '2',
-  xxs: '1.5',
-};
-
-export const fontWeight = {
-  light: 300,
-  regular: 400,
-  semiBold: 500,
-  bold: 700,
-};

src/utils/styles/spacings.ts

@@ -1,7 +0,0 @@
-// Spacings
-// -------------------------
-
-export const spacings = {
-  lg: '30px',
-  sm: '16px',
-};