[POC] Material UI CSS variables typing

[siriwatknp]

Demo: https://codesandbox.io/s/create-react-app-with-typescript-forked-1vjqxn?file=/src/App.tsx

Target experience

extendTheme

This is the new API for creating a theme for CssVarsProvider. The theme options type is extended from the existing Theme types so it should work with the existing projects that have custom module augmentation.

const theme = extendTheme({
  colorSchemes: {
    light: {
      palette: { // extended from `ThemeOptions['palette]` types
        common: {
          // also typed-safe for new tokens
          background: '...',
          onBackground: '...',
        }
      }
    }
  },
  components: {
    MuiButton: {
      styleOverrides: {
        root: ({ theme }) => ({
          // typed-safe
          color: theme.vars.palette.primary.main,
        })
      }
    }
  }
})

<CssVarsProvider theme={theme}>

See the demo above.

Existing Theme types

The CSS variables support is considered a new feature that developers can opt-in. The types augmentation should be minimal. It should work with existing APIs, eg. styled, sx, useTheme.

With this goal, we can use the same approach to the lab by exporting themeCssVarsAugmentation.d.ts from Material UI package.

All they need to do is:

// usually in the main App.ts
import type {} from '@mui/material/themeCssVarsAugmentation';

<Box sx={theme => ({
  // typed-safe
  color: theme.vars.palette.primary.main,
})>

It will extend the theme type that used in styled, sx, useTheme to have theme.vars and the new tokens.

See the demo above.

Existing createTheme

The options type remains the same because this API is not intended to be used with CSS variables.

This is nice because the CSS variables types related won't be included if developers want to use <ThemeProvider theme={createTheme()}>.

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Details of bundle changes

@material-ui/core: parsed: +1.65% , gzip: +0.95%
@material-ui/lab: parsed: +0.35% , gzip: +0.16%

Generated by 🚫 dangerJS against b7d393b

[siriwatknp]

Closed in favor of #33211