diff --git a/src/theme/theme.mui.ts b/src/theme/theme.mui.ts new file mode 100644 index 0000000..27a6463 --- /dev/null +++ b/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, + }, + }, + }, + }, + }); diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 74f0035..64fa778 100644 --- a/src/theme/theme.ts +++ b/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 {