Custom ThemeProvider and Theme

[TrevorRice]

Hi all!

I'm curious if there is a preferred or recommended approach for a component library or design system to expose its own wrappers around Theme UI's ThemeProvider and Theme type?

For example, suppose I want to enforce a specific colors structure:

interface Colors {
  primary: string;
  neutral: string;
  success: string;
  ...
}

interface MyDesignSystemTheme {
  ...
  colors: Colors;
  ...
}

If MyDesignSystemThemeProvider accepts a theme of type MyDesignSystemTheme:

interface MyDesignSystemThemeProviderProps {
  children?: ReactNode;
  theme: MyDesignSystemTheme;
}

export const MyDesignSystemThemeProvider = (props: MyDesignSystemThemeProviderProps) => {
  return <ThemeProvider theme={props.theme}>{props.children}</ThemeProvider>;
};

You'll receive the following TypeScript error:

Type 'MyDesignSystemTheme' is not assignable to type 'Theme | ((outerTheme: Theme) => Theme)'.
  Type 'MyDesignSystemTheme' is not assignable to type 'Theme'.
    Types of property 'colors' are incompatible.
      Type 'Colors' is not assignable to type 'ColorModesScale'.
        Type 'Colors' is not assignable to type 'ColorMode'.
          Index signature for type 'string' is missing in type 'Colors'.ts(2322)
index.d.ts(63, 5): The expected type comes from property 'theme' which is declared here on type '

This can be seen in this CodeSandbox example.

How would I be able to provide my own provider and theme interface that enforces a certain structure but doesn't result in a type mismatch when passing that theme to Theme UI's ThemeProvider?

[hasparus]

Index signature for type 'string' is missing in type 'Colors'.ts(2322)

You can solve this by changing Colors to a type from interface.

TS Playground

[TrevorRice]

Thanks for the reply, @hasparus!

That does avoid the TS error when passing the theme to the ThemeProvider; however, you'd still run into issues when using functional values, for instance. This can be seen in an updated CodeSandbox example where theme is unaware of the custom MyTheme type and that colors and neutral should never be undefined (which is understandable — its inherent type is Theme UI's Theme).

'theme.colors' is possibly 'undefined'.

I guess my question is a bit more general — is there a recommended way to wrap Theme UI's Theme interface to enforce a certain structure? As described above, I'd like for colors (and other properties) to be required and have a specific shape while still reaping the TS/autocomplete benefits when using sx, for instance. Is that feasible?

[hasparus]

This should bring you half way: https://theme-ui.com/guides/typescript#exact-theme-type

But there's currently no supported API to fully override Theme UI types.
You should be able to provide your own type for sx prop if you reexport Theme UI's automatic JSX runtime with your own types. That's a bit of work though.