remove tinycolor. remove muithemeprovider

frontend/packages/app/src/App.tsx

@@ -12,15 +12,9 @@ import {
   Link as RouterLink,
 } from 'react-router-dom';
 import { BackstageTheme, withGlobalStyles, theme } from '@backstage/core';
-import { CssBaseline, MuiThemeProvider, makeStyles } from '@material-ui/core';
-import { ThemeProvider } from '@material-ui/styles';
-import { StylesProvider, createGenerateClassName } from '@material-ui/styles';
+import { CssBaseline, ThemeProvider, makeStyles } from '@material-ui/core';
 import HomePageTimer from './components/HomepageTimer';
 
-const generateClassName = createGenerateClassName({
-  productionPrefix: 'stajl',
-});
-
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'grid',
@@ -45,24 +39,20 @@ const useStyles = makeStyles(theme => ({
 const App: FC<{}> = () => {
   return (
     <CssBaseline>
-      <MuiThemeProvider theme={BackstageTheme}>
-        <StylesProvider generateClassName={generateClassName}>
-          <ThemeProvider theme={BackstageTheme}>
-            <AppContent>
-              <Router>
-                <Switch>
-                  <Route exact path="/">
-                    <Home />
-                  </Route>
-                  <Route path="/login">
-                    <Login />
-                  </Route>
-                </Switch>
-              </Router>
-            </AppContent>
-          </ThemeProvider>
-        </StylesProvider>
-      </MuiThemeProvider>
+      <ThemeProvider theme={BackstageTheme}>
+        <AppContent>
+          <Router>
+            <Switch>
+              <Route exact path="/">
+                <Home />
+              </Route>
+              <Route path="/login">
+                <Login />
+              </Route>
+            </Switch>
+          </Router>
+        </AppContent>
+      </ThemeProvider>
     </CssBaseline>
   );
 };

frontend/packages/core/package.json

@@ -15,7 +15,6 @@
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
     "react-helmet":"5.2.1",
-    "tinycolor2": "1.4.1",
     "react-addons-text-content": "0.0.4",
     "recompose": "0.30.0"
   },

frontend/packages/core/src/testUtils/index.js

@@ -14,10 +14,7 @@ import ErrorBoundary from '../layout/ErrorBoundary';
 export { default as Keyboard } from './Keyboard';
 export { default as mockBreakpoint } from './mockBreakpoint';
 
-export function wrapInTestApp(
-  Component,
-  initialRouterEntries,
-) {
+export function wrapInTestApp(Component, initialRouterEntries) {
   const Wrapper = Component instanceof Function ? Component : () => Component;
 
   return (
@@ -30,16 +27,10 @@ export function wrapInTestApp(
 }
 
 export function wrapInThemedTestApp(component, initialRouterEntries) {
-  const themed = (
-    <MuiThemeProvider theme={V1}>
-      <ThemeProvider theme={V1}>{component}</ThemeProvider>
-    </MuiThemeProvider>
-  );
+  const themed = <ThemeProvider theme={V1}>{component}</ThemeProvider>;
   return wrapInTestApp(themed, initialRouterEntries);
 }
 
 export const wrapInTheme = (component, theme = V1) => (
-  <MuiThemeProvider theme={theme}>
-    <ThemeProvider theme={theme}>{component}</ThemeProvider>
-  </MuiThemeProvider>
+  <ThemeProvider theme={theme}>{component}</ThemeProvider>
 );

frontend/packages/core/src/theme/BackstageTheme.js

@@ -1,14 +1,11 @@
 import { createMuiTheme, withStyles } from '@material-ui/core';
 import { darken, lighten } from '@material-ui/core/styles/colorManipulator';
 import { blue, yellow } from '@material-ui/core/colors';
-import tinycolor from 'tinycolor2';
 
 export const COLORS = {
   PAGE_BACKGROUND: '#F8F8F8',
   DEFAULT_PAGE_THEME_COLOR: '#7C3699',
-  DEFAULT_PAGE_THEME_LIGHT_COLOR: tinycolor('#7C3699')
-    .lighten(50)
-    .toString(),
+  DEFAULT_PAGE_THEME_LIGHT_COLOR: '#ECDBF2',
   ERROR_BACKGROUND_COLOR: '#FFEBEE',
   ERROR_TEXT_COLOR: '#CA001B',
   INFO_TEXT_COLOR: '#004e8a',