[TypeScript] Add CSS vars type augmentation for Material UI

packages/mui-material/src/FilledInput/FilledInput.js

@@ -98,7 +98,7 @@ const FilledInputRoot = styled(InputBaseRoot, {
       '&:before': {
         borderBottom: `1px solid ${
           theme.vars
-            ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`
+            ? `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`
             : bottomLineColor
         }`,
         left: 0,

packages/mui-material/src/Input/Input.js

@@ -45,7 +45,7 @@ const InputRoot = styled(InputBaseRoot, {
   const light = theme.palette.mode === 'light';
   let bottomLineColor = light ? 'rgba(0, 0, 0, 0.42)' : 'rgba(255, 255, 255, 0.7)';
   if (theme.vars) {
-    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputTouchBottomLine})`;
+    bottomLineColor = `rgba(${theme.vars.palette.common.onBackgroundChannel} / ${theme.vars.opacity.inputUnderline})`;
   }
   return {
     position: 'relative',

packages/mui-material/src/styles/CssVarsProvider.spec.tsx

@@ -0,0 +1,65 @@
+import * as React from 'react';
+import {
+  experimental_extendTheme as extendTheme,
+  Experimental_CssVarsProvider as CssVarsProvider,
+  styled,
+  useTheme,
+  Overlays,
+} from '@mui/material/styles';
+
+const customTheme = extendTheme({
+  colorSchemes: {
+    light: {
+      opacity: {
+        inputPlaceholder: 0.1,
+        inputUnderline: 0.1,
+      },
+      overlays: Array(25).fill('') as Overlays,
+      palette: {
+        AppBar: {
+          darkBg: '',
+          darkColor: '',
+          defaultBg: '',
+        },
+        // @ts-expect-error
+        mode: '',
+      },
+    },
+    dark: {
+      opacity: {},
+      palette: {},
+    },
+  },
+  components: {
+    MuiButton: {
+      styleOverrides: {
+        root: ({ theme }) => ({
+          color: theme.vars.palette.primary.main,
+        }),
+      },
+    },
+  },
+});
+
+const TestStyled = styled('div')(({ theme }) => ({
+  color: theme.vars.palette.primary.main,
+  [theme.getColorSchemeSelector('dark')]: {
+    color: theme.vars.palette.common.onBackground,
+  },
+}));
+
+const TestUseTheme = () => {
+  const theme = useTheme();
+  return <div style={{ background: theme.vars.palette.common.background }}>test</div>;
+};
+
+<CssVarsProvider theme={customTheme}>
+  <TestStyled
+    sx={(theme) => ({
+      [theme.getColorSchemeSelector('dark')]: {
+        border: '1px solid',
+        borderColor: theme.vars.palette.divider,
+      },
+    })}
+  />
+</CssVarsProvider>;

packages/mui-material/src/styles/CssVarsProvider.test.js

@@ -200,7 +200,7 @@ describe('[Material UI] CssVarsProvider', () => {
       expect(screen.getByTestId('opacity').textContent).to.equal(
         JSON.stringify({
           inputPlaceholder: 'var(--mui-opacity-inputPlaceholder)',
-          inputTouchBottomLine: 'var(--mui-opacity-inputTouchBottomLine)',
+          inputUnderline: 'var(--mui-opacity-inputUnderline)',
           switchTrackDisabled: 'var(--mui-opacity-switchTrackDisabled)',
           switchTrack: 'var(--mui-opacity-switchTrack)',
         }),

packages/mui-material/src/styles/CssVarsProvider.js → packages/mui-material/src/styles/CssVarsProvider.tsx

@@ -1,6 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
 import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
-import experimental_extendTheme from './experimental_extendTheme';
+import experimental_extendTheme, {
+  SupportedColorScheme,
+  CssVarsTheme,
+} from './experimental_extendTheme';
 import createTypography from './createTypography';
 
 const defaultTheme = experimental_extendTheme();
@@ -9,7 +12,7 @@ const {
   CssVarsProvider: Experimental_CssVarsProvider,
   useColorScheme,
   getInitColorSchemeScript,
-} = createCssVarsProvider({
+} = createCssVarsProvider<SupportedColorScheme, CssVarsTheme>({
   theme: defaultTheme,
   attribute: 'data-mui-color-scheme',
   modeStorageKey: 'mui-mode',
@@ -28,7 +31,8 @@ const {
     return newTheme;
   },
   shouldSkipGeneratingVar: (keys) =>
-    !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/),
+    !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) ||
+    (keys[0] === 'palette' && !!keys[1]?.match(/(mode|contrastThreshold|tonalOffset)/)),
 });
 
 export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

packages/mui-material/src/styles/createPalette.d.ts

@@ -105,95 +105,6 @@ export interface Channels {
   contrastTextChannel: string;
 }
 
-export interface PaletteWithChannels {
-  common: CommonColors & {
-    background: string;
-    onBackground: string;
-    backgroundChannel: string;
-    onBackgroundChannel: string;
-  };
-  mode: PaletteMode;
-  contrastThreshold: number;
-  tonalOffset: PaletteTonalOffset;
-  primary: PaletteColor & Channels;
-  secondary: PaletteColor & Channels;
-  error: PaletteColor & Channels;
-  warning: PaletteColor & Channels;
-  info: PaletteColor & Channels;
-  success: PaletteColor & Channels;
-  grey: Color & { darkChannel: string };
-  text: TypeText & { primaryChannel: string; secondaryChannel: string };
-  divider: TypeDivider;
-  dividerChannel: TypeDivider;
-  action: TypeAction & { activeChannel: string; selectedChannel: string };
-  background: TypeBackground;
-  getContrastText: (background: string) => string;
-  augmentColor: (options: PaletteAugmentColorOptions) => PaletteColor;
-  // component tokens
-  AppBar: {
-    defaultBg: string;
-    darkBg: string;
-    darkColor: string;
-  };
-  Avatar: {
-    defaultBg: string;
-  };
-  Chip: {
-    defaultBorder: string;
-    defaultAvatarColor: string;
-    defaultIconColor: string;
-  };
-  FilledInput: {
-    bg: string;
-    hoverBg: string;
-    disabledBg: string;
-  };
-  LinearProgress: {
-    primaryBg: string;
-    secondaryBg: string;
-    errorBg: string;
-    infoBg: string;
-    successBg: string;
-    warningBg: string;
-  };
-  Slider: {
-    primaryTrack: string;
-    secondaryTrack: string;
-    errorTrack: string;
-    infoTrack: string;
-    successTrack: string;
-    warningTrack: string;
-  };
-  SnackbarContent: {
-    bg: string;
-  };
-  SpeedDialAction: {
-    fabHoverBg: string;
-  };
-  StepConnector: {
-    border: string;
-  };
-  StepContent: {
-    border: string;
-  };
-  Switch: {
-    defaultColor: string;
-    defaultDisabledColor: string;
-    primaryDisabledColor: string;
-    secondaryDisabledColor: string;
-    errorDisabledColor: string;
-    infoDisabledColor: string;
-    successDisabledColor: string;
-    warningDisabledColor: string;
-  };
-  TableCell: {
-    border: string;
-  };
-  Tooltip: {
-    bg: string;
-  };
-}
-
 export type PartialTypeObject = { [P in keyof TypeObject]?: Partial<TypeObject[P]> };
 
 export interface PaletteOptions {

packages/mui-material/src/styles/createPalette.spec.ts

@@ -17,5 +17,5 @@ import { createTheme, Theme } from '@mui/material/styles';
 }
 
 {
-  const themeCommons: Theme['palette']['common'] = common;
+  const themeCommons: Pick<Theme['palette']['common'], 'black' | 'white'> = common;
 }