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/utils/styles/colors.ts

@@ -1,37 +0,0 @@
-// Verdaccio
-// -------------------------
-
-// Main colors
-// -------------------------
-const colors = {
-  black: '#000',
-  white: '#fff',
-  red: '#d32f2f',
-  grey: '#808080',
-  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',
-
-  // Main colors
-  // -------------------------
-
-  primary: window.VERDACCIO_PRIMARY_COLOR || '#4b5e40',
-  secondary: '#20232a',
-};
-
-export default colors;

src/utils/test-enzyme.ts

@@ -0,0 +1,19 @@
+import { mount, shallow } from 'enzyme';
+
+import ThemeProvider from '../design-tokens/ThemeProvider';
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+
+const shallowWithTheme = (element: React.ReactElement<any>, ...props): any =>
+  shallow(element, {
+    wrappingComponent: ThemeProvider,
+    ...props,
+  });
+
+const mountWithTheme = (element: React.ReactElement<any>, ...props): any =>
+  mount(element, {
+    wrappingComponent: ThemeProvider,
+    ...props,
+  });
+
+export { mountWithTheme as mount, shallowWithTheme as shallow };

src/utils/test-react-testing-library.tsx

@@ -0,0 +1,12 @@
+import { render } from '@testing-library/react';
+import React from 'react';
+
+import ThemeProvider from '../design-tokens/ThemeProvider';
+
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+const customRender = (node: React.ReactElement<any>, ...options: Array<any>) => {
+  return render(<ThemeProvider>{node}</ThemeProvider>, ...options);
+};
+
+export * from '@testing-library/react';
+export { customRender as render };