remove styled components global styles

src/App.tsx

@@ -1,24 +1,12 @@
-import { createGlobalStyle } from 'styled-components';
 import { ThemeProvider } from '@mui/material';
 import { LifeTrinket } from './Components/LifeTrinket';
 import { theme } from './Data/theme';
 import { GlobalSettingsProvider } from './Providers/GlobalSettingsProvider';
 import { PlayersProvider } from './Providers/PlayersProvider';
 
-const GlobalStyles = createGlobalStyle`
-  html,
-  body {
-    background-color: ${theme.palette.background.default};
-  }
-  #root {
-    touch-action: manipulation;
-  }
-`;
-
 const App = () => {
   return (
     <ThemeProvider theme={theme}>
-      <GlobalStyles />
       <PlayersProvider>
         <GlobalSettingsProvider>
           <LifeTrinket />

src/Data/theme.ts

@@ -1,34 +1,27 @@
 import { createTheme } from '@mui/material';
+import resolveConfig from 'tailwindcss/resolveConfig';
+import tailwindConfig from '../../tailwind.config';
+
+const fullConfig = resolveConfig(tailwindConfig);
+
+const { primary, secondary, background, text, action, common } =
+  fullConfig.theme.colors;
 
 export const theme = createTheme({
   palette: {
-    primary: {
-      main: '#7F9172',
-    },
-    secondary: {
-      main: '#5E714C',
-    },
-    background: {
-      default: '#495E35',
-    },
-    text: {
-      primary: '#F5F5F5',
-      secondary: '#b3b39b',
-    },
-    action: {
-      disabled: '#5E714C',
-    },
-    common: {
-      white: '#F9FFE3',
-      black: '#000000',
-    },
+    primary,
+    secondary,
+    background,
+    text,
+    action,
+    common,
   },
   components: {
     MuiFormLabel: {
       styleOverrides: {
         root: {
           fontSize: '1rem',
-          color: '#F5F5F5',
+          color: text.primary,
         },
       },
     },
@@ -36,12 +29,12 @@ export const theme = createTheme({
       styleOverrides: {
         markLabel: {
           fontSize: '1rem',
-          color: '#F5F5F5',
+          color: text.primary,
         },
         valueLabel: {
           display: 'none',
-          color: '#F5F5F5',
-          background: '#5E714C',
+          color: text.primary,
+          background: secondary.main,
         },
         track: {
           height: '0.7rem',
@@ -77,7 +70,7 @@ export const theme = createTheme({
       styleOverrides: {
         paper: {
           top: '1rem',
-          background: '#495E35',
+          background: background.default,
           height: 'auto',
           borderRadius: '8px',
         },
@@ -86,7 +79,7 @@ export const theme = createTheme({
     MuiBackdrop: {
       styleOverrides: {
         root: {
-          backgroundColor: 'rgba(0, 0, 0, 0.3)',
+          backgroundColor: background.backdrop,
         },
       },
     },
@@ -100,7 +93,7 @@ export const theme = createTheme({
     MuiSwitch: {
       styleOverrides: {
         colorPrimary: {
-          color: '#5E714C',
+          color: action.disabled,
         },
       },
     },

src/index.css

@@ -2,7 +2,9 @@
 @tailwind components;
 @tailwind utilities;
 
+html,
 body {
+  background-color: theme('colors.background.default');
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
@@ -10,6 +12,9 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+#root {
+  touch-action: manipulation;
+}
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',

tailwind.config.ts

@@ -1,4 +1,5 @@
 import tailwindcssGridAreas from '@savvywombat/tailwindcss-grid-areas';
+import type { Config } from 'tailwindcss';
 
 /** @type {import('tailwindcss').Config} */
 export default {
@@ -36,12 +37,29 @@ export default {
         ],
       },
       colors: {
+        primary: {
+          main: '#7F9172',
+        },
+        secondary: {
+          main: '#5E714C',
+        },
+        background: {
+          default: '#495E35',
+          backdrop: '#000000',
+        },
         text: {
           primary: '#F5F5F5',
           secondary: '#b3b39b',
         },
+        action: {
+          disabled: '#5E714C',
+        },
+        common: {
+          white: '#F9FFE3',
+          black: '#000000',
+        },
       },
     },
   },
   plugins: [tailwindcssGridAreas],
-};
+} satisfies Config;