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/design-tokens/ResetStyles.tsx

@@ -16,6 +16,11 @@ const resetStyles = makeStyles(() => ({
     'html, body, #root': {
       height: '100%',
     },
+    ul: {
+      margin: 0,
+      padding: 0,
+      listStyle: 'none',
+    },
     '.container': {
       padding: 15,
       flex: 1,

src/design-tokens/ThemeProvider.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ThemeProvider as MuiThemeProvider } from '@material-ui/core/styles';
+import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming';
+
+import theme from './theme';
+
+const ThemeProvider: React.FC = ({ children }) => (
+  <EmotionThemeProvider theme={theme}>
+    <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
+  </EmotionThemeProvider>
+);
+
+export default ThemeProvider;

src/design-tokens/emotion.ts

@@ -0,0 +1,5 @@
+import styled, { CreateStyled } from '@emotion/styled';
+
+import { Theme } from './theme';
+
+export default styled as CreateStyled<Theme>;

src/design-tokens/theme.ts

@@ -0,0 +1,74 @@
+import createMuiTheme from '@material-ui/core/styles/createMuiTheme';
+
+// Main colors
+// -------------------------
+const colors = {
+  black: '#000',
+  white: '#fff',
+  red: '#d32f2f',
+  greySuperLight: '#f5f5f5',
+  greyLight: '#d3d3d3',
+  greyLight2: '#908ba1',
+  greyLight3: '#f3f4f240',
+  greyDark: '#a9a9a9',
+  greyDark2: '#586069',
+  greyChateau: '#95989a',
+  greyGainsboro: '#e3e3e3',
+  greyAthens: '#d3dddd',
+  eclipse: '#3c3c3c',
+  paleNavy: '#e4e8f1',
+  saltpan: '#f7f8f6',
+  snow: '#f9f9f9',
+  love: '#e25555',
+  nobel01: '#999999',
+  nobel02: '#9f9f9f',
+  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
+  secondary: '#20232a',
+};
+
+export type Colors = keyof typeof colors;
+
+export const theme = createMuiTheme({
+  typography: {
+    fontFamily: 'inherit',
+  },
+  palette: {
+    ...colors,
+    primary: { main: colors.primary },
+    secondary: { main: colors.secondary },
+    error: { main: colors.red },
+  },
+});
+
+export type Theme = typeof theme;
+
+declare module '@material-ui/core/styles/createPalette' {
+  interface CustomPalette {
+    black: string;
+    white: string;
+    red: string;
+    greySuperLight: string;
+    greyLight: string;
+    greyLight2: string;
+    greyLight3: string;
+    greyDark: string;
+    greyDark2: string;
+    greyChateau: string;
+    greyGainsboro: string;
+    greyAthens: string;
+    eclipse: string;
+    paleNavy: string;
+    saltpan: string;
+    snow: string;
+    love: string;
+    nobel01: string;
+    nobel02: string;
+  }
+
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface Palette extends CustomPalette {}
+  /* eslint-disable-next-line @typescript-eslint/no-empty-interface */
+  interface PaletteOptions extends Partial<CustomPalette> {}
+}
+
+export default { ...theme };