Define custom properties with a theme

[adamstarlight]

Hello. What is the best practice for defining custom properties, to access them in JSS? Let's say I want to define the following constants associated with a theme:

• headerHeight
• sidebarWidthMax
• sidebarWidthMin

To me it seem logical to have a place in a theme where I can declare my custom stuff. I don't want to create a second React context, or make them completely static. I can make a small type wrapper which allows typesafe manipulations with custom theme properties, but their values are lost after mergeTheme function is called. It looks like this:

export type DashboardTheme = MantineTheme & {
  header: {
    height: number
  }
  sidebar: {
    widthMax: number
    widthMin: number
  }
}

export const _theme: DashboardTheme = {
  ...DEFAULT_THEME,
  header: {
    height: 60
  },
  sidebar: {
    widthMax: 300,
    widthMin: 60
  }
}

export interface ThemeProviderProps {
  theme: Partial<DashboardTheme>
  children: ReactElement | ReactElement[]
}

export const ThemeProvider = ({ theme, children }: ThemeProviderProps) => (
  <MantineProvider theme={theme as MantineTheme}>{children}</MantineProvider>
)

export const useTheme = () => useMantineTheme() as DashboardTheme

There is not way for me to create a custom MantineProvider since no other inner details are exposed... which could have solved my issue. I don't see any way to achieve what I need :(
We need to change header height depending on theme selected due to accessibility reasons (basically another theme for people with vision problems), and right after that use that value to calculate an offset of some other panels.
What would be your recommended solution?

[rtivital]

Hi @adamstarlight, we currently do not support this feature, but we've already developed it, and it will be available in next minor release (3.2) which will be out soon (I would bet for next Wednesday). You can find an upcoming API for this here – https://github.com/mantinedev/mantine/blob/next-minor/docs/src/docs/changelog/3-2-0.mdx#custom-properties-on-theme

P.S. Mantine does not use JSS anymore, we've migrated to emotion

[adamstarlight]

Nice update! Thanks for great work)