feat: Added Theme and migrate to emotion@10.x 🚀 (#286)

* chore: updated emotion dependency

* feat: introduced theme

* refactor: updated emotion styles

* fix: fixed emotion error

* fix: fixed tests

* chore: add missing types

Co-Authored-By: Thomas Klein <tmkn@users.noreply.github.com>

src/components/Package/styles.ts

@@ -1,10 +1,9 @@
-import styled from 'react-emotion';
+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 colors from '../../utils/styles/colors';
 import { fontWeight } from '../../utils/styles/sizes';
 import { default as MuiIconButton } from '../../muiComponents/IconButton';
 import { default as Photo } from '../../muiComponents/Avatar';
@@ -12,147 +11,115 @@ import List from '../../muiComponents/List';
 import { default as Typography } from '../../muiComponents/Heading';
 import Grid from '../../muiComponents/Grid';
 import ListItemText from '../../muiComponents/ListItemText';
+import { Theme } from '../../design-tokens/theme';
 
-export const OverviewItem = styled('span')`
-  && {
-    display: flex;
-    align-items: center;
-    margin: 0 0 0 16px;
-    color: ${colors.greyLight2};
-    font-size: 12px;
-    @media (max-width: ${breakpoints.medium}px) {
-      &:nth-child(3) {
-        display: none;
-      }
-    }
-    @media (max-width: ${breakpoints.small}px) {
-      &:nth-child(4) {
-        display: none;
-      }
-    }
-  }
-`;
-
-export const Icon = styled(Ico)({
-  '&&': {
-    margin: '2px 10px 0 0',
-    fill: colors.greyLight2,
+export const OverviewItem = styled('span')<{ theme?: Theme }>(props => ({
+  display: 'flex',
+  alignItems: 'center',
+  margin: '0 0 0 16px',
+  color: props.theme && props.theme.palette.greyLight2,
+  fontSize: 12,
+  [`@media (max-width: ${breakpoints.medium}px)`]: {
+    ':nth-of-type(3)': {
+      display: 'none',
+    },
   },
-});
-
-export const Published = styled('span')({
-  '&&': {
-    color: colors.greyLight2,
-    margin: '0 5px 0 0',
+  [`@media (max-width: ${breakpoints.small}px)`]: {
+    ':nth-of-type(4)': {
+      display: 'none',
+    },
   },
-});
+}));
 
-export const Text = styled(Label)({
-  '&&': {
-    fontSize: '12px',
-    fontWeight: fontWeight.semiBold,
-    color: colors.greyLight2,
-  },
-});
+export const Icon = styled(Ico)<{ theme?: Theme }>(props => ({
+  margin: '2px 10px 0 0',
+  fill: props.theme && props.theme.palette.greyLight2,
+}));
+
+export const Published = styled('span')<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.greyLight2,
+  margin: '0 5px 0 0',
+}));
+
+export const Text = styled(Label)<{ theme?: Theme }>(props => ({
+  fontSize: '12px',
+  fontWeight: fontWeight.semiBold,
+  color: props.theme && props.theme.palette.greyLight2,
+}));
 
 export const Details = styled('span')({
-  '&&': {
-    marginLeft: '5px',
-    lineHeight: 1.5,
-    display: 'flex',
-    flexDirection: 'column',
-  },
+  marginLeft: '5px',
+  lineHeight: 1.5,
+  display: 'flex',
+  flexDirection: 'column',
 });
 
 export const Author = styled('div')({
-  '&&': {
-    display: 'flex',
-    alignItems: 'center',
-  },
+  display: 'flex',
+  alignItems: 'center',
 });
 
 export const Avatar = styled(Photo)({
-  '&&': {
-    width: '20px',
-    height: '20px',
-  },
+  width: '20px',
+  height: '20px',
 });
 
 export const WrapperLink = styled(Link)({
-  '&&': {
-    textDecoration: 'none',
-  },
+  textDecoration: 'none',
 });
 
-export const PackageTitle = styled('span')`
-  && {
-    font-weight: 600;
-    font-size: 20px;
-    display: block;
-    margin-bottom: 12px;
-    color: ${colors.eclipse};
-    cursor: pointer;
-
-    &:hover {
-      color: ${colors.black};
-    }
-
-    @media (max-width: ${breakpoints.small}px) {
-      font-size: 14px;
-      margin-bottom: 8px;
-    }
-  }
-`;
+export const PackageTitle = styled('span')<{ theme?: Theme }>(props => ({
+  fontWeight: 600,
+  fontSize: 20,
+  display: 'block',
+  marginBottom: 12,
+  color: props.theme && props.theme.palette.eclipse,
+  cursor: 'pointer',
+  ':hover': {
+    color: props.theme && props.theme.palette.black,
+  },
+  [`@media (max-width: ${breakpoints.small}px)`]: {
+    fontSize: 14,
+    marginBottom: 8,
+  },
+}));
 
 export const GridRightAligned = styled(Grid)({
-  '&&': {
-    textAlign: 'right',
-  },
+  textAlign: 'right',
 });
 
-export const PackageList = styled(List)({
-  '&&': {
-    padding: '12px 0 12px 0',
-
-    '&:hover': {
-      backgroundColor: colors.greyLight3,
-    },
-
-    '> :last-child': {
-      paddingTop: 0,
-    },
+export const PackageList = styled(List)<{ theme?: Theme }>(props => ({
+  padding: '12px 0 12px 0',
+  ':hover': {
+    backgroundColor: props.theme && props.theme.palette.greyLight3,
   },
-});
+  '> :last-child': {
+    paddingTop: 0,
+  },
+}));
 
 export const IconButton = styled(MuiIconButton)({
-  '&&': {
-    padding: '6px',
-
-    svg: {
-      fontSize: '16px',
-    },
+  padding: 6,
+  svg: {
+    fontSize: 16,
   },
 });
 
-export const TagContainer = styled('span')`
-  && {
-    margin-top: 8px;
-    margin-bottom: 12px;
-    display: block;
-    @media (max-width: ${breakpoints.medium}px) {
-      display: none;
-    }
-  }
-`;
+export const TagContainer = styled('span')({
+  marginTop: 8,
+  marginBottom: 12,
+  display: 'block',
+  [`@media (max-width: ${breakpoints.medium}px)`]: {
+    display: 'none',
+  },
+});
 
 export const PackageListItemText = styled(ListItemText)({
-  '&&': {
-    paddingRight: 0,
-  },
-});
-
-export const Description = styled(Typography)({
-  color: colors.greyDark2,
-  fontSize: '14px',
   paddingRight: 0,
 });
+
+export const Description = styled(Typography)<{ theme?: Theme }>(props => ({
+  color: props.theme && props.theme.palette.greyDark2,
+  fontSize: '14px',
+  paddingRight: 0,
+}));