Use provided theme in overrides, update TS types (#3231)

GMOD · Sep 29, 2022 · 5ef8f93 · 5ef8f93
1 parent bb0b6e8
commit 5ef8f93
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 35 deletions.
diff --git a/packages/core/ui/theme.test.ts b/packages/core/ui/theme.test.ts
@@ -23,8 +23,8 @@ describe('theme utils', () => {
   it('allows overriding tertiary and quaternary colors', () => {
     const theme = createJBrowseTheme({
       palette: {
-        tertiary: { color: { 500: '#888' } },
-        quaternary: { color: { main: 'hsl(0,0,54)' } },
+        tertiary: { 500: '#888' },
+        quaternary: { main: 'hsl(0,0,54)' },
       },
     })
     // @ts-ignore

diff --git a/packages/core/ui/theme.ts b/packages/core/ui/theme.ts
@@ -1,5 +1,5 @@
 import { blue, green, red, amber } from '@mui/material/colors'
-import { createTheme } from '@mui/material/styles'
+import { createTheme, ThemeOptions } from '@mui/material/styles'
 import type { PaletteOptions } from '@mui/material/styles/createPalette'
 import deepmerge from 'deepmerge'
 
@@ -54,7 +54,7 @@ export function createJBrowseDefaultProps(/* palette: PaletteOptions = {} */) {
     components: {
       MuiButton: {
         defaultProps: {
-          size: 'small',
+          size: 'small' as const,
         },
       },
       MuiAccordion: {
@@ -65,44 +65,44 @@ export function createJBrowseDefaultProps(/* palette: PaletteOptions = {} */) {
       },
       MuiFilledInput: {
         defaultProps: {
-          margin: 'dense',
+          margin: 'dense' as const,
         },
       },
       MuiFormControl: {
         defaultProps: {
-          margin: 'dense',
-          size: 'small',
+          margin: 'dense' as const,
+          size: 'small' as const,
         },
       },
       MuiFormHelperText: {
         defaultProps: {
-          margin: 'dense',
+          margin: 'dense' as const,
         },
       },
 
       MuiIconButton: {
         defaultProps: {
-          size: 'small',
+          size: 'small' as const,
         },
       },
       MuiInputBase: {
         defaultProps: {
-          margin: 'dense',
+          margin: 'dense' as const,
         },
       },
       MuiAutocomplete: {
         defaultProps: {
-          size: 'small',
+          size: 'small' as const,
         },
       },
       MuiInputLabel: {
         defaultProps: {
-          margin: 'dense',
+          margin: 'dense' as const,
         },
       },
       MuiToolbar: {
         defaultProps: {
-          variant: 'dense',
+          variant: 'dense' as const,
         },
       },
       MuiListItem: {
@@ -112,17 +112,17 @@ export function createJBrowseDefaultProps(/* palette: PaletteOptions = {} */) {
       },
       MuiOutlinedInput: {
         defaultProps: {
-          margin: 'dense',
+          margin: 'dense' as const,
         },
       },
       MuiFab: {
         defaultProps: {
-          size: 'small',
+          size: 'small' as const,
         },
       },
       MuiTable: {
         defaultProps: {
-          size: 'small',
+          size: 'small' as const,
         },
       },
       MuiMenuList: {
@@ -138,8 +138,8 @@ export function createJBrowseDefaultProps(/* palette: PaletteOptions = {} */) {
 
       MuiTextField: {
         defaultProps: {
-          margin: 'dense',
-          variant: 'standard',
+          margin: 'dense' as const,
+          variant: 'standard' as const,
         },
       },
     },
@@ -193,24 +193,26 @@ export function createJBrowseDefaultOverrides(palette: PaletteOptions = {}) {
   }
 }
 
-export const jbrowseBaseTheme = {
-  palette: jbrowseDefaultPalette,
-  typography: { fontSize: 12 },
-  spacing: 4,
-  ...deepmerge(createJBrowseDefaultProps(), createJBrowseDefaultOverrides()),
+export function createJBrowseBaseTheme(palette?: PaletteOptions): ThemeOptions {
+  return {
+    palette: jbrowseDefaultPalette,
+    typography: { fontSize: 12 },
+    spacing: 4,
+    ...deepmerge(
+      createJBrowseDefaultProps(),
+      createJBrowseDefaultOverrides(palette),
+    ),
+  }
 }
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-export function createJBrowseTheme(theme?: any) {
+export function createJBrowseTheme(theme?: ThemeOptions) {
   if (theme?.palette?.tertiary) {
     theme = deepmerge(theme, {
       palette: {
         tertiary: refTheme.palette.augmentColor(
-          theme.palette.tertiary?.color
+          'color' in theme.palette.tertiary
             ? theme.palette.tertiary
-            : {
-                color: theme.palette.tertiary,
-              },
+            : { color: theme.palette.tertiary },
         ),
       },
     })
@@ -219,16 +221,15 @@ export function createJBrowseTheme(theme?: any) {
     theme = deepmerge(theme, {
       palette: {
         quaternary: refTheme.palette.augmentColor(
-          theme.palette.quaternary?.color
+          'color' in theme.palette.quaternary
             ? theme.palette.quaternary
-            : {
-                color: theme.palette.quaternary,
-              },
+            : { color: theme.palette.quaternary },
         ),
       },
     })
   }
 
-  // @ts-ignore
-  return createTheme(deepmerge(jbrowseBaseTheme, theme || {}))
+  return createTheme(
+    deepmerge(createJBrowseBaseTheme(theme?.palette), theme || {}),
+  )
 }