[TypeScript] Add CSS vars type augmentation for Material UI

[siriwatknp]

Note: documentation will be done separately.

Usage

Theme CSS variable is a new feature for Material UI. Apart from using the new provider (CssVarsProvider), developers have to import the type augmentation to extend the theme types to contain extra tokens and utils.

// this approach is similar to theme augmentation in the lab
import type {} from '@mui/material/themeCssVarsAugmentation';

After importing, the theme types in styled, sx, and useTheme are extended. See Demo

This works with the project that has custom module augmentation as well.

How it works?

The new types lives in the new extendTheme file which combine the existing Palette with new tokens. The new types used in extendTheme and CssVarsProvider has no impact to the existing theme.

To include new tokens to the existing theme, we export module augmentation file that internally augment the theme with new types.

This mean if developers does not import the augmentation, they can use extendTheme with CssVarsProvider (the implementation would work, they can see theme.vars in console.log) but they won't see theme.vars as types.

---

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

[mui-bot]

Details of bundle changes

Generated by 🚫 dangerJS against 66258e4

[mnajdova]

We need tests for the module augmentation. In addition to this, would be great to add some guide on how this should be used. We could have one initial setup, just import the module augmentation, and one more advanced, for example how can I add palette tokens for other components.

[mnajdova]

I am a bit confused, how those the types work here?

[siriwatknp]

It tests that you can access theme.vars in styled. It would throw an error if it does not work. I will add a comment on this.

[siriwatknp]

Done.

[mnajdova]

I am a bit confused. In order for this to work developers need to import

import type {} from '@mui/material/themeCssVarsAugmentation';

How does it work here without importing it. This was my initial question.

[siriwatknp]

Got it. The module augmentation is a part of the repo so that's why it is included without the import. I can add it to make it explicit.

[mnajdova]

Okay, let's do it :)

[siriwatknp]

In addition to this, would be great to add some guide on how this should be used. We could have one initial setup, just import the module augmentation, and one more advanced, for example how can I add palette tokens for other components.

At first, I thought that I will update the docs in a separate PR but seems like it is better to do it here.

[siriwatknp]

We need tests for the module augmentation

Added.

[mnajdova]

I am a bit confused. In order for this to work developers need to import

import type {} from '@mui/material/themeCssVarsAugmentation';

How does it work here without importing it. This was my initial question.

[mnajdova]

Looks good 👍