Refactor: move styles utils to theme (#363)

src/App/App.tsx

@@ -11,20 +11,20 @@ import Footer from '../components/Footer';
 import Box from '../muiComponents/Box';
 import Loading from '../components/Loading';
 import StyleBaseline from '../design-tokens/StyleBaseline';
-import { breakpoints } from '../utils/styles/media';
+import { Theme } from '../design-tokens/theme';
 
 import AppContextProvider from './AppContextProvider';
 import AppRoute, { history } from './AppRoute';
 
-const StyledBoxContent = styled(Box)({
+const StyledBoxContent = styled(Box)<{ theme?: Theme }>(({ theme }) => ({
   padding: 15,
-  [`@media screen and (min-width: ${breakpoints.container}px)`]: {
+  [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
-    maxWidth: breakpoints.container,
+    maxWidth: theme && theme.breakPoints.container,
     width: '100%',
     marginLeft: 'auto',
     marginRight: 'auto',
   },
-});
+}));
 
 /* eslint-disable react/jsx-no-bind */
 /* eslint-disable react-hooks/exhaustive-deps */

src/components/Author/styles.ts

@@ -1,14 +1,14 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
 import ListItemText from '../../muiComponents/ListItemText';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const AuthorListItem = styled(ListItem)({
   padding: 0,

src/components/AutoComplete/AutoComplete.tsx

@@ -4,13 +4,13 @@ import Autosuggest, { SuggestionSelectedEventData, InputProps, ChangeEvent } fro
 import match from 'autosuggest-highlight/match';
 import parse from 'autosuggest-highlight/parse';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import MenuItem from '../../muiComponents/MenuItem';
+import { Theme } from '../../design-tokens/theme';
 
 import { Wrapper, InputField, SuggestionContainer } from './styles';
 
-const StyledAnchor = styled('a')<{ fw: number }>(props => ({
+const StyledAnchor = styled('a')<{ highlight: boolean; theme?: Theme }>(props => ({
-  fontWeight: props.fw,
+  fontWeight: props.theme && props.highlight ? props.theme.fontWeight.semiBold : props.theme.fontWeight.light,
 }));
 
 const StyledMenuItem = styled(MenuItem)({
@@ -64,9 +64,8 @@ const renderSuggestion = (suggestion, { query, isHighlighted }): JSX.Element =>
     <StyledMenuItem component="div" selected={isHighlighted}>
       <div>
         {parts.map((part, index) => {
-          const fw = part.highlight ? fontWeight.semiBold : fontWeight.light;
           return (
-            <StyledAnchor fw={fw} key={String(index)}>
+            <StyledAnchor highlight={part.highlight} key={String(index)}>
               {part.text}
             </StyledAnchor>
           );

src/components/Dependencies/styles.ts

@@ -1,18 +1,18 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import Card from '../../muiComponents/Card';
 import Chip from '../../muiComponents/Chip';
+import { Theme } from '../../design-tokens/theme';
 
 export const CardWrap = styled(Card)({
   margin: '0 0 16px',
 });
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const Tags = styled('div')({
   display: 'flex',

src/components/Developers/styles.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import { Theme } from '../../design-tokens/theme';
@@ -20,11 +19,11 @@ export const Content = styled('div')({
   },
 });
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   marginBottom: '10px',
   textTransform: 'capitalize',
-});
+}));
 
 export const Fab = styled(FloatingActionButton)<{ theme?: Theme }>(props => ({
   backgroundColor: props.theme && props.theme.palette.primary.main,

src/components/Dist/styles.ts

@@ -1,16 +1,15 @@
 import styled from '@emotion/styled';
 
-import { Theme } from '../../design-tokens/theme';
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
 import FloatingActionButton from '../../muiComponents/FloatingActionButton';
 import Chip from '../../muiComponents/Chip';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const DistListItem = styled(ListItem)({
   paddingLeft: 0,

src/components/Engines/styles.ts

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import ListItem from '../../muiComponents/ListItem';
 import Text from '../../muiComponents/Text';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 export const EngineListItem = styled(ListItem)({
   paddingLeft: 0,

src/components/Footer/styles.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import { breakpoints } from '../../utils/styles/media';
 import Icon from '../Icon/Icon';
 import { Theme } from '../../design-tokens/theme';
 
@@ -12,29 +11,29 @@ export const Wrapper = styled('div')<{ theme?: Theme }>(props => ({
   padding: '20px',
 }));
 
-export const Inner = styled('div')({
+export const Inner = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'flex-end',
   width: '100%',
-  [`@media (min-width: ${breakpoints.medium}px)`]: {
+  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
     minWidth: 400,
     maxWidth: 800,
     margin: 'auto',
     justifyContent: 'space-between',
   },
-  [`@media (min-width: ${breakpoints.large}px)`]: {
+  [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: {
     maxWidth: 1240,
   },
-});
+}));
 
-export const Left = styled('div')({
+export const Left = styled('div')<{ theme?: Theme }>(({ theme }) => ({
   alignItems: 'center',
   display: 'none',
-  [`@media (min-width: ${breakpoints.medium}px)`]: {
+  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: {
     display: 'flex',
   },
-});
+}));
 
 export const Right = styled(Left)({
   display: 'flex',

src/components/Header/styles.ts

@@ -2,7 +2,6 @@ import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 
 import { Theme } from '../../design-tokens/theme';
-import { breakpoints } from '../../utils/styles/media';
 import IconButton from '../../muiComponents/IconButton';
 import AppBar from '../../muiComponents/AppBar';
 import Toolbar from '../../muiComponents/Toolbar';
@@ -54,12 +53,12 @@ export const SearchWrapper = styled('div')({
   width: '100%',
 });
 
-export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
+export const NavBar = styled(AppBar)<{ theme?: Theme }>(({ theme }) => ({
-  backgroundColor: props.theme && props.theme.palette.primary.main,
+  backgroundColor: theme && theme.palette.primary.main,
   minHeight: 60,
   display: 'flex',
   justifyContent: 'center',
-  [`@media (min-width: ${breakpoints.medium}px)`]: css`
+  [`@media (min-width: ${theme && theme.breakPoints.medium}px)`]: css`
     ${SearchWrapper} {
       display: flex;
     }
@@ -70,12 +69,12 @@ export const NavBar = styled(AppBar)<{ theme?: Theme }>(props => ({
       display: none;
     }
   `,
-  [`@media (min-width: ${breakpoints.large}px)`]: css`
+  [`@media (min-width: ${theme && theme.breakPoints.large}px)`]: css`
     ${InnerNavBar} {
       padding: 0 20px;
     }
   `,
-  [`@media (min-width: ${breakpoints.xlarge}px)`]: css`
+  [`@media (min-width: ${theme && theme.breakPoints.xlarge}px)`]: css`
     ${InnerNavBar} {
       max-width: 1240px;
       width: 100%;

src/components/Install/Install.tsx

@@ -2,16 +2,16 @@ import React, { useContext } from 'react';
 import styled from '@emotion/styled';
 
 import { DetailContext } from '../../pages/Version';
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import List from '../../muiComponents/List';
+import { Theme } from '../../design-tokens/theme';
 
 import InstallListItem, { DependencyManager } from './InstallListItem';
 
-const StyledText = styled(Text)({
+const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 const Install: React.FC = () => {
   const detailContext = useContext(DetailContext);

src/components/Label/Label.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
+import { Theme } from '../../design-tokens/theme';
 
 interface Props {
   text: string;
@@ -14,8 +14,8 @@ interface WrapperProps {
   weight: string;
 }
 
-const Wrapper = styled('div')<WrapperProps>(props => ({
+const Wrapper = styled('div')<WrapperProps & { theme?: Theme }>(props => ({
-  fontWeight: fontWeight[props.weight],
+  fontWeight: props.theme && props.theme.fontWeight[props.weight],
   textTransform: props.capitalize ? 'capitalize' : 'none',
 }));
 

src/components/NotFound/NotFound.tsx

@@ -5,7 +5,6 @@ import { useHistory } from 'react-router-dom';
 import Box from '../../muiComponents/Box';
 import Button from '../../muiComponents/Button';
 import Heading from '../../muiComponents/Heading';
-import { spacings } from '../../utils/styles/spacings';
 import { Theme } from '../../design-tokens/theme';
 
 import PackageImg from './img/package.svg';
@@ -21,7 +20,7 @@ const EmptyPackage = styled('img')({
 
 const StyledHeading = styled(Heading)<{ theme?: Theme }>(props => ({
   color: props.theme && props.theme.palette.primary.main,
-  marginBottom: spacings.sm,
+  marginBottom: 16,
 }));
 
 const NotFound: React.FC = () => {

src/components/Package/styles.ts

@@ -1,10 +1,8 @@
 import styled from '@emotion/styled';
 import { Link } from 'react-router-dom';
 
-import { breakpoints } from '../../utils/styles/media';
 import Ico from '../Icon';
 import Label from '../Label';
-import { fontWeight } from '../../utils/styles/sizes';
 import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
 import List from '../../muiComponents/List';
@@ -13,18 +11,18 @@ import Grid from '../../muiComponents/Grid';
 import ListItemText from '../../muiComponents/ListItemText';
 import { Theme } from '../../design-tokens/theme';
 
-export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({
+export const OverviewItem = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   margin: '0 0 0 16px',
-  color: props.theme && props.theme.palette.greyLight2,
+  color: theme && theme.palette.greyLight2,
   fontSize: 12,
-  [`@media (max-width: ${breakpoints.medium}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
     ':nth-of-type(3)': {
       display: 'none',
     },
   },
-  [`@media (max-width: ${breakpoints.small}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     ':nth-of-type(4)': {
       display: 'none',
     },
@@ -43,7 +41,7 @@ export const Published = styled('span')<{ theme?: Theme }>(props => ({
 
 export const Text = styled(Label)<{ theme?: Theme }>(props => ({
   fontSize: '12px',
-  fontWeight: fontWeight.semiBold,
+  fontWeight: props.theme && props.theme.fontWeight.semiBold,
   color: props.theme && props.theme.palette.greyLight2,
 }));
 
@@ -68,17 +66,17 @@ export const WrapperLink = styled(Link)({
   textDecoration: 'none',
 });
 
-export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({
+export const PackageTitle = styled('span')<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: 600,
+  fontWeight: theme && theme.fontWeight.bold,
   fontSize: 20,
   display: 'block',
   marginBottom: 12,
-  color: props.theme && props.theme.palette.eclipse,
+  color: theme && theme.palette.eclipse,
   cursor: 'pointer',
   ':hover': {
-    color: props.theme && props.theme.palette.black,
+    color: theme && theme.palette.black,
   },
-  [`@media (max-width: ${breakpoints.small}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.small}px)`]: {
     fontSize: 14,
     marginBottom: 8,
   },
@@ -105,14 +103,14 @@ export const IconButton = styled(MuiIconButton)({
   },
 });
 
-export const TagContainer = styled('span')({
+export const TagContainer = styled('span')<{ theme?: Theme }>(({ theme }) => ({
   marginTop: 8,
   marginBottom: 12,
   display: 'block',
-  [`@media (max-width: ${breakpoints.medium}px)`]: {
+  [`@media (max-width: ${theme && theme.breakPoints.medium}px)`]: {
     display: 'none',
   },
-});
+}));
 
 export const PackageListItemText = styled(ListItemText)({
   paddingRight: 0,

src/components/PackageList/PackageList.tsx

@@ -1,4 +1,5 @@
 import React, { Fragment, ReactNode } from 'react';
+import styled from '@emotion/styled';
 
 import Package from '../Package';
 import Help from '../Help';
@@ -6,7 +7,10 @@ import { formatLicense } from '../../utils/package';
 import { PackageInterface } from '../Package/Package';
 import Divider from '../../muiComponents/Divider';
 
-import * as classes from './styles';
+const PkgContainer = styled('div')({
+  margin: 0,
+  padding: 0,
+});
 
 interface Props {
   packages: PackageInterface[];
@@ -32,7 +36,7 @@ export const PackageList: React.FC<Props> = ({ packages }) => {
 
   return (
     <div className={'package-list-items'}>
-      <div className={classes.pkgContainer}>{hasPackages() ? renderPackages() : <Help />}</div>
+      <PkgContainer>{hasPackages() ? renderPackages() : <Help />}</PkgContainer>
     </div>
   );
 };

src/components/PackageList/styles.ts

@@ -1,18 +0,0 @@
-import { css } from 'emotion';
-
-import { fontWeight, fontSize } from '../../utils/styles/sizes';
-
-export const listTitle = css({
-  fontWeight: fontWeight.regular,
-  fontSize: fontSize.xl,
-  margin: `0 0 10px 0`,
-});
-
-export const pkgContainer = css`
-  margin: 0;
-  padding: 0;
-
-  & .listTitle {
-    ${listTitle}
-  }
-`;

src/components/RegistryInfoDialog/styles.ts

@@ -1,6 +1,5 @@
 import styled from '@emotion/styled';
 
-import { fontSize } from '../../utils/styles/sizes';
 import DialogTitle from '../../muiComponents/DialogTitle';
 import DialogContent from '../../muiComponents/DialogContent';
 import { Theme } from '../../design-tokens/theme';
@@ -8,7 +7,7 @@ import { Theme } from '../../design-tokens/theme';
 export const Title = styled(DialogTitle)<{ theme?: Theme }>(props => ({
   backgroundColor: props.theme && props.theme.palette.primary.main,
   color: props.theme && props.theme.palette.white,
-  fontSize: fontSize.lg,
+  fontSize: props.theme && props.theme.fontSize.lg,
 }));
 
 export const Content = styled(DialogContent)({

src/components/Repository/Repository.tsx

@@ -10,14 +10,13 @@ import CopyToClipBoard from '../CopyToClipBoard';
 import List from '../../muiComponents/List';
 import { DetailContext } from '../../pages/Version';
 import { Theme } from '../../design-tokens/theme';
-import { fontWeight } from '../../utils/styles/sizes';
 
 import git from './img/git.png';
 
-const StyledText = styled(Text)({
+const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
   textTransform: 'capitalize',
-});
+}));
 
 const GithubLink = styled('a')<{ theme?: Theme }>(props => ({
   color: props.theme && props.theme.palette.primary.main,

src/components/UpLinks/styles.ts

@@ -2,11 +2,11 @@ import styled from '@emotion/styled';
 
 import Text from '../../muiComponents/Text';
 import { default as MuiListItemText } from '../../muiComponents/ListItemText';
-import { fontWeight } from '../../utils/styles/sizes';
+import { Theme } from '../../design-tokens/theme';
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
-});
+}));
 
 export const Spacer = styled('div')({
   flex: '1 1 auto',

src/components/Versions/styles.ts

@@ -1,13 +1,13 @@
 import styled from '@emotion/styled';
 
-import { fontWeight } from '../../utils/styles/sizes';
 import Text from '../../muiComponents/Text';
 import { default as MuiListItemText } from '../../muiComponents/ListItemText';
+import { Theme } from '../../design-tokens/theme';
 import Link from '../Link';
 
-export const StyledText = styled(Text)({
+export const StyledText = styled(Text)<{ theme?: Theme }>(props => ({
-  fontWeight: fontWeight.bold,
+  fontWeight: props.theme && props.theme.fontWeight.bold,
-});
+}));
 
 export const Spacer = styled('div')({
   flex: '1 1 auto',

src/design-tokens/ResetStyles.tsx

@@ -1,17 +1,16 @@
 import { makeStyles } from '@material-ui/styles';
 import React from 'react';
 
-import { fontWeight } from '../utils/styles/sizes';
+import { Theme } from './theme';
-import { breakpoints } from '../utils/styles/media';
 
-const resetStyles = makeStyles(() => ({
+const resetStyles = makeStyles(({ theme }: { theme?: Theme }) => ({
   '@global': {
     // eslint-disable-next-line max-len
     'html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video': {
       fontFamily: '"Roboto", Helvetica Neue, Arial, sans-serif',
     },
     strong: {
-      fontWeight: fontWeight.semiBold,
+      fontWeight: theme && theme.fontWeight.semiBold,
     },
     'html, body, #root': {
       height: '100%',
@@ -25,8 +24,8 @@ const resetStyles = makeStyles(() => ({
       padding: 15,
       flex: 1,
 
-      [`@media screen and (min-width: ${breakpoints.container}px)`]: {
+      [`@media screen and (min-width: ${theme && theme.breakPoints.container}px)`]: {
-        maxWidth: breakpoints.container,
+        maxWidth: theme && theme.breakPoints.container,
         width: '100%',
         marginLeft: 'auto',
         marginRight: 'auto',

src/design-tokens/theme.ts

@@ -28,6 +28,44 @@ const colors = {
 
 export type Colors = keyof typeof colors;
 
+const fontSize = {
+  xxl: 26,
+  xl: 24,
+  lg: 21,
+  md: 18,
+  default: 16,
+  sm: 14,
+};
+
+export type FontSize = keyof typeof fontSize;
+
+const fontWeight = {
+  light: 300,
+  regular: 400,
+  semiBold: 500,
+  bold: 700,
+};
+
+export type FontWeight = keyof typeof fontWeight;
+
+export const breakPoints = {
+  small: 576,
+  medium: 768,
+  large: 1024,
+  container: 1240,
+  xlarge: 1275,
+};
+
+export type BreakPoints = typeof breakPoints;
+
+const customizedTheme = {
+  fontSize,
+  fontWeight,
+  breakPoints,
+};
+
+type CustomizedTheme = typeof customizedTheme;
+
 export const theme = createMuiTheme({
   typography: {
     fontFamily: 'inherit',
@@ -38,10 +76,18 @@ export const theme = createMuiTheme({
     secondary: { main: colors.secondary },
     error: { main: colors.red },
   },
+  ...customizedTheme,
 });
 
 export type Theme = typeof theme;
 
+declare module '@material-ui/core/styles/createMuiTheme' {
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Theme extends CustomizedTheme {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface ThemeOptions extends CustomizedTheme {}
+}
+
 declare module '@material-ui/core/styles/createPalette' {
   interface CustomPalette {
     black: string;

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',
-};