refactor(core): refactor theme (#41)

Author: vault-developer

src/theme/theme.mui.ts

@@ -0,0 +1,50 @@
+import { SystemTokens } from './tokens.sys.ts';
+import { createTheme } from '@mui/material';
+
+export const getMuiTheme = (st: SystemTokens, mode: 'dark' | 'light') =>
+	createTheme({
+		palette: {
+			mode,
+			primary: {
+				main: st.colors.onContainer.contrast,
+			},
+		},
+		typography: {
+			fontSize: 12,
+		},
+		components: {
+			MuiMenu: {
+				styleOverrides: {
+					list: {
+						backgroundColor: st.colors.onContainer.dim,
+						transition: st.transitions.color,
+					},
+				},
+			},
+			MuiSelect: {
+				styleOverrides: {
+					root: {
+						'.MuiOutlinedInput-notchedOutline': {
+							borderColor: st.colors.border,
+						},
+						transition: st.transitions.color,
+					},
+				},
+			},
+			MuiButton: {
+				styleOverrides: {
+					root: {
+						transition: st.transitions.color,
+						color: st.colors.onContainer.dim,
+					},
+				},
+			},
+			MuiInputLabel: {
+				styleOverrides: {
+					root: {
+						color: st.colors.onContainer.contrast,
+					},
+				},
+			},
+		},
+	});

src/theme/theme.ts

@@ -1,67 +1,8 @@
 import { SystemTokens } from './tokens.sys.ts';
-import { createTheme } from '@mui/material';
 import { Theme } from '@emotion/react';
 import { referenceTokens as ref } from './tokens.ref.ts';
 import { getComponentsTokens } from './tokens.com.ts';
-
-export const getMuiTheme = (st: SystemTokens, mode: 'dark' | 'light') =>
-	createTheme({
-		palette: {
-			mode,
-			primary: {
-				main: st.colors.onContainer.contrast,
-			},
-		},
-		typography: {
-			fontSize: 12,
-		},
-		components: {
-			MuiTooltip: {
-				styleOverrides: {
-					tooltip: {
-						fontSize: '14',
-						color: st.colors.onContainer.contrast,
-						backgroundColor: st.colors.onContainer.dim,
-						transition: st.transitions.color,
-					},
-				},
-			},
-			MuiMenu: {
-				styleOverrides: {
-					list: {
-						backgroundColor: st.colors.onContainer.dim,
-						transition: st.transitions.color,
-					},
-				},
-			},
-			MuiSelect: {
-				styleOverrides: {
-					root: {
-						'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
-							borderColor: st.colors.onContainer.contrast,
-						},
-						transition: st.transitions.color,
-					},
-				},
-			},
-			MuiButton: {
-				styleOverrides: {
-					root: {
-						transition: st.transitions.color,
-					},
-				},
-			},
-			MuiInputLabel: {
-				styleOverrides: {
-					root: {
-						'&.Mui-focused': {
-							color: st.colors.onContainer.contrast,
-						},
-					},
-				},
-			},
-		},
-	});
+import { getMuiTheme } from './theme.mui.ts';
 
 export const getTheme = (sys: SystemTokens, mode: 'dark' | 'light'): Theme => {
 	return {