@mui/material 5.8.3 → 5.8.6

package/styles/experimental_extendTheme.d.ts

@@ -1,12 +1,9 @@
 /* eslint-disable @typescript-eslint/naming-convention */
-import { ThemeOptions as SystemThemeOptions, Theme as SystemTheme } from '@mui/system';
 import { OverridableStringUnion } from '@mui/types';
-import { Mixins, MixinsOptions } from './createMixins';
+import { ThemeOptions, Theme } from './createTheme';
 import { Palette, PaletteOptions } from './createPalette';
-import { Typography, TypographyOptions } from './createTypography';
 import { Shadows } from './shadows';
-import { Transitions, TransitionsOptions } from './createTransitions';
-import { ZIndex, ZIndexOptions } from './zIndex';
+import { ZIndex } from './zIndex';
 import { Components } from './components';
 
 /**
@@ -35,8 +32,8 @@ export type ExtendedColorScheme = OverridableStringUnion<never, ColorSchemeOverr
 export type SupportedColorScheme = DefaultColorScheme | ExtendedColorScheme;
 
 export interface Opacity {
-  placeholder: number;
-  inputTouchBottomLine: number;
+  inputPlaceholder: number;
+  inputUnderline: number;
 }
 
 export type Overlays = [
@@ -67,45 +64,233 @@ export type Overlays = [
   string | undefined,
 ];
 
-export interface ThemeOptions extends Omit<SystemThemeOptions, 'zIndex'> {
-  mixins?: MixinsOptions;
-  components?: Components<BaseTheme>;
-  colorSchemes?: Record<
-    SupportedColorScheme,
-    {
-      palette?: PaletteOptions;
-      opacity?: Partial<Opacity>;
-      overlays?: Overlays;
-    }
-  >;
-  shadows?: Shadows;
-  transitions?: TransitionsOptions;
-  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
-  zIndex?: ZIndexOptions;
-  unstable_strictMode?: boolean;
+export interface PaletteCommonChannel {
+  background: string;
+  backgroundChannel: string;
+  onBackground: string;
+  onBackgroundChannel: string;
+}
+
+export interface PaletteColorChannel {
+  mainChannel: string;
+  lightChannel: string;
+  darkChannel: string;
+  contrastTextChannel: string;
+}
+
+export interface PaletteActionChannel {
+  activeChannel: string;
+  selectedChannel: string;
+}
+
+export interface PaletteTextChannel {
+  primaryChannel: string;
+  secondaryChannel: string;
+}
+
+export interface PaletteAlert {
+  errorColor: string;
+  infoColor: string;
+  successColor: string;
+  warningColor: string;
+  errorFilledBg: string;
+  infoFilledBg: string;
+  successFilledBg: string;
+  warningFilledBg: string;
+  errorFilledColor: string;
+  infoFilledColor: string;
+  successFilledColor: string;
+  warningFilledColor: string;
+  errorStandardBg: string;
+  infoStandardBg: string;
+  successStandardBg: string;
+  warningStandardBg: string;
+  errorIconColor: string;
+  infoIconColor: string;
+  successIconColor: string;
+  warningIconColor: string;
+}
+
+export interface PaletteAppBar {
+  defaultBg: string;
+  darkBg: string;
+  darkColor: string;
+}
+
+export interface PaletteAvatar {
+  defaultBg: string;
+}
+
+export interface PaletteChip {
+  defaultBorder: string;
+  defaultAvatarColor: string;
+  defaultIconColor: string;
+}
+
+export interface PaletteFilledInput {
+  bg: string;
+  hoverBg: string;
+  disabledBg: string;
+}
+
+export interface PaletteLinearProgress {
+  primaryBg: string;
+  secondaryBg: string;
+  errorBg: string;
+  infoBg: string;
+  successBg: string;
+  warningBg: string;
+}
+
+export interface PaletteSkeleton {
+  bg: string;
+}
+
+export interface PaletteSlider {
+  primaryTrack: string;
+  secondaryTrack: string;
+  errorTrack: string;
+  infoTrack: string;
+  successTrack: string;
+  warningTrack: string;
+}
+
+export interface PaletteSnackbarContent {
+  bg: string;
+}
+
+export interface PaletteSpeedDialAction {
+  fabHoverBg: string;
+}
+
+export interface PaletteStepConnector {
+  border: string;
+}
+
+export interface PaletteStepContent {
+  border: string;
+}
+
+export interface PaletteSwitch {
+  defaultColor: string;
+  defaultDisabledColor: string;
+  primaryDisabledColor: string;
+  secondaryDisabledColor: string;
+  errorDisabledColor: string;
+  infoDisabledColor: string;
+  successDisabledColor: string;
+  warningDisabledColor: string;
+}
+
+export interface PaletteTableCell {
+  border: string;
+}
+
+export interface PaletteTooltip {
+  bg: string;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystemOptions {
+  palette?: Omit<PaletteOptions, 'mode'> & {
+    common?: Partial<PaletteCommonChannel>;
+    primary?: Partial<PaletteColorChannel>;
+    secondary?: Partial<PaletteColorChannel>;
+    error?: Partial<PaletteColorChannel>;
+    info?: Partial<PaletteColorChannel>;
+    success?: Partial<PaletteColorChannel>;
+    text?: Partial<PaletteTextChannel>;
+    dividerChannel?: Partial<string>;
+    action?: Partial<PaletteActionChannel>;
+    Alert?: Partial<PaletteAlert>;
+    AppBar?: Partial<PaletteAppBar>;
+    Avatar?: Partial<PaletteAvatar>;
+    Chip?: Partial<PaletteChip>;
+    FilledInput?: Partial<PaletteFilledInput>;
+    LinearProgress?: Partial<PaletteLinearProgress>;
+    Skeleton?: Partial<PaletteSkeleton>;
+    Slider?: Partial<PaletteSlider>;
+    SnackbarContent?: Partial<PaletteSnackbarContent>;
+    SpeedDialAction?: Partial<PaletteSpeedDialAction>;
+    StepConnector?: Partial<PaletteStepConnector>;
+    StepContent?: Partial<PaletteStepContent>;
+    Switch?: Partial<PaletteSwitch>;
+    TableCell?: Partial<PaletteTableCell>;
+    Tooltip?: Partial<PaletteTooltip>;
+  };
+  opacity?: Partial<Opacity>;
+  overlays?: Overlays;
+}
+
+// The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts`
+export interface ColorSystem {
+  palette: Palette & {
+    colorScheme: SupportedColorScheme;
+    common: PaletteCommonChannel;
+    primary: PaletteColorChannel;
+    secondary: PaletteColorChannel;
+    error: PaletteColorChannel;
+    info: PaletteColorChannel;
+    success: PaletteColorChannel;
+    text: PaletteTextChannel;
+    dividerChannel: string;
+    action: PaletteActionChannel;
+    Alert: PaletteAlert;
+    AppBar: PaletteAppBar;
+    Avatar: PaletteAvatar;
+    Chip: PaletteChip;
+    FilledInput: PaletteFilledInput;
+    LinearProgress: PaletteLinearProgress;
+    Skeleton: PaletteSkeleton;
+    Slider: PaletteSlider;
+    SnackbarContent: PaletteSnackbarContent;
+    SpeedDialAction: PaletteSpeedDialAction;
+    StepConnector: PaletteStepConnector;
+    StepContent: PaletteStepContent;
+    Switch: PaletteSwitch;
+    TableCell: PaletteTableCell;
+    Tooltip: PaletteTooltip;
+  };
+  opacity: Opacity;
+  overlays: Overlays;
+}
+
+export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  components?: Components<Omit<CssVarsTheme, 'components'>>;
+  colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
 }
 
-interface BaseTheme extends SystemTheme {
-  mixins: Mixins;
-  palette: Palette;
+// should not include keys defined in `shouldSkipGeneratingVar` and have value typeof function
+interface ThemeVars {
+  palette: Omit<
+    ColorSystem['palette'],
+    | 'colorScheme'
+    | 'mode'
+    | 'contrastThreshold'
+    | 'tonalOffset'
+    | 'getContrastText'
+    | 'augmentColor'
+  >;
   opacity: Opacity;
   overlays: Overlays;
   shadows: Shadows;
-  transitions: Transitions;
-  typography: Typography;
   zIndex: ZIndex;
-  unstable_strictMode?: boolean;
-  colorSchemes: Record<string, { palette: Palette }>;
+  shape: Theme['shape'];
 }
 
-// shut off automatic exporting for the `BaseTheme` above
+// shut off automatic exporting for the `ThemeVars` above
 export {};
 
-/**
- * Our [TypeScript guide on theme customization](https://mui.com/material-ui/guides/typescript/#customization-of-theme) explains in detail how you would add custom properties.
- */
-export interface Theme extends BaseTheme {
-  components?: Components<BaseTheme>;
+export interface CssVarsTheme extends Omit<Theme, 'palette' | 'components'>, ColorSystem {
+  components?: Components<Omit<CssVarsTheme, 'components'>>;
+  colorSchemes: Record<SupportedColorScheme, ColorSystem>;
+  prefix: string;
+  vars: ThemeVars;
+  getCssVar: <CustomVar extends string = never>(
+    field: string | CustomVar,
+    ...vars: Array<string | CustomVar>
+  ) => string;
+  getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
 }
 
 /**
@@ -114,4 +299,7 @@ export interface Theme extends BaseTheme {
  * @param args Deep merge the arguments with the about to be returned theme.
  * @returns A complete, ready-to-use theme object.
  */
-export default function experimental_extendTheme(options?: ThemeOptions, ...args: object[]): Theme;
+export default function experimental_extendTheme(
+  options?: CssVarsThemeOptions,
+  ...args: object[]
+): CssVarsTheme;

package/styles/experimental_extendTheme.js

@@ -3,7 +3,7 @@ import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWith
 const _excluded = ["colorSchemes"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -14,6 +14,19 @@ const defaultDarkOverlays = [...Array(25)].map((_, index) => {
   const overlay = getOverlayAlpha(index);
   return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
 });
+
+function assignNode(obj, keys) {
+  keys.forEach(k => {
+    if (!obj[k]) {
+      obj[k] = {};
+    }
+  });
+}
+
+function setColor(obj, key, defaultValue) {
+  obj[key] = obj[key] || defaultValue;
+}
+
 export default function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
@@ -43,16 +56,20 @@ export default function extendTheme(options = {}, ...args) {
       light: _extends({}, colorSchemesInput.light, {
         palette: lightPalette,
         opacity: _extends({
-          placeholder: 0.42,
-          inputTouchBottomLine: 0.42
+          inputPlaceholder: 0.42,
+          inputUnderline: 0.42,
+          switchTrackDisabled: 0.12,
+          switchTrack: 0.38
         }, (_colorSchemesInput$li2 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li2.opacity),
         overlays: ((_colorSchemesInput$li3 = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li3.overlays) || []
       }),
       dark: _extends({}, colorSchemesInput.dark, {
         palette: darkPalette,
         opacity: _extends({
-          placeholder: 0.5,
-          inputTouchBottomLine: 0.7
+          inputPlaceholder: 0.5,
+          inputUnderline: 0.7,
+          switchTrackDisabled: 0.2,
+          switchTrack: 0.3
         }, (_colorSchemesInput$da2 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da2.opacity),
         overlays: ((_colorSchemesInput$da3 = colorSchemesInput.dark) == null ? void 0 : _colorSchemesInput$da3.overlays) || defaultDarkOverlays
       })
@@ -62,23 +79,138 @@ export default function extendTheme(options = {}, ...args) {
   Object.keys(theme.colorSchemes).forEach(key => {
     const palette = theme.colorSchemes[key].palette; // attach black & white channels to common node
 
-    if (key === 'dark') {
-      palette.common.background = palette.common.background || '#000';
-      palette.common.onBackground = palette.common.onBackground || '#fff';
+    if (key === 'light') {
+      setColor(palette.common, 'background', '#fff');
+      setColor(palette.common, 'onBackground', '#000');
+    } else {
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
+
+
+    assignNode(palette, ['Alert', 'AppBar', 'Avatar', 'Chip', 'FilledInput', 'LinearProgress', 'Skeleton', 'Slider', 'SnackbarContent', 'SpeedDialAction', 'StepConnector', 'StepContent', 'Switch', 'TableCell', 'Tooltip']);
+
+    if (key === 'light') {
+      setColor(palette.Alert, 'errorColor', darken(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', darken(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', darken(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', darken(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-main)');
+      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-main)');
+      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-main)');
+      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-main)');
+      setColor(palette.Alert, 'errorFilledColor', lightPalette.getContrastText(palette.error.main));
+      setColor(palette.Alert, 'infoFilledColor', lightPalette.getContrastText(palette.info.main));
+      setColor(palette.Alert, 'successFilledColor', lightPalette.getContrastText(palette.success.main));
+      setColor(palette.Alert, 'warningFilledColor', lightPalette.getContrastText(palette.warning.main));
+      setColor(palette.Alert, 'errorStandardBg', lighten(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', lighten(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', lighten(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', lighten(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-light)');
+      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-light)');
+      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-light)');
+      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-light)');
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-100)');
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-400)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-700)');
+      setColor(palette.FilledInput, 'bg', 'rgba(0, 0, 0, 0.06)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(0, 0, 0, 0.09)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(0, 0, 0, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', lighten(palette.primary.main, 0.62));
+      setColor(palette.LinearProgress, 'secondaryBg', lighten(palette.secondary.main, 0.62));
+      setColor(palette.LinearProgress, 'errorBg', lighten(palette.error.main, 0.62));
+      setColor(palette.LinearProgress, 'infoBg', lighten(palette.info.main, 0.62));
+      setColor(palette.LinearProgress, 'successBg', lighten(palette.success.main, 0.62));
+      setColor(palette.LinearProgress, 'warningBg', lighten(palette.warning.main, 0.62));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.11)');
+      setColor(palette.Slider, 'primaryTrack', lighten(palette.primary.main, 0.62));
+      setColor(palette.Slider, 'secondaryTrack', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Slider, 'errorTrack', lighten(palette.error.main, 0.62));
+      setColor(palette.Slider, 'infoTrack', lighten(palette.info.main, 0.62));
+      setColor(palette.Slider, 'successTrack', lighten(palette.success.main, 0.62));
+      setColor(palette.Slider, 'warningTrack', lighten(palette.warning.main, 0.62));
+      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.8));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-400)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-common-white)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-100)');
+      setColor(palette.Switch, 'primaryDisabledColor', lighten(palette.primary.main, 0.62));
+      setColor(palette.Switch, 'secondaryDisabledColor', lighten(palette.secondary.main, 0.62));
+      setColor(palette.Switch, 'errorDisabledColor', lighten(palette.error.main, 0.62));
+      setColor(palette.Switch, 'infoDisabledColor', lighten(palette.info.main, 0.62));
+      setColor(palette.Switch, 'successDisabledColor', lighten(palette.success.main, 0.62));
+      setColor(palette.Switch, 'warningDisabledColor', lighten(palette.warning.main, 0.62));
+      setColor(palette.TableCell, 'border', lighten(alpha(palette.divider, 1), 0.88));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     } else {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
+      setColor(palette.Alert, 'errorColor', lighten(palette.error.light, 0.6));
+      setColor(palette.Alert, 'infoColor', lighten(palette.info.light, 0.6));
+      setColor(palette.Alert, 'successColor', lighten(palette.success.light, 0.6));
+      setColor(palette.Alert, 'warningColor', lighten(palette.warning.light, 0.6));
+      setColor(palette.Alert, 'errorFilledBg', 'var(--mui-palette-error-dark)');
+      setColor(palette.Alert, 'infoFilledBg', 'var(--mui-palette-info-dark)');
+      setColor(palette.Alert, 'successFilledBg', 'var(--mui-palette-success-dark)');
+      setColor(palette.Alert, 'warningFilledBg', 'var(--mui-palette-warning-dark)');
+      setColor(palette.Alert, 'errorFilledColor', darkPalette.getContrastText(palette.error.dark));
+      setColor(palette.Alert, 'infoFilledColor', darkPalette.getContrastText(palette.info.dark));
+      setColor(palette.Alert, 'successFilledColor', darkPalette.getContrastText(palette.success.dark));
+      setColor(palette.Alert, 'warningFilledColor', darkPalette.getContrastText(palette.warning.dark));
+      setColor(palette.Alert, 'errorStandardBg', darken(palette.error.light, 0.9));
+      setColor(palette.Alert, 'infoStandardBg', darken(palette.info.light, 0.9));
+      setColor(palette.Alert, 'successStandardBg', darken(palette.success.light, 0.9));
+      setColor(palette.Alert, 'warningStandardBg', darken(palette.warning.light, 0.9));
+      setColor(palette.Alert, 'errorIconColor', 'var(--mui-palette-error-main)');
+      setColor(palette.Alert, 'infoIconColor', 'var(--mui-palette-info-main)');
+      setColor(palette.Alert, 'successIconColor', 'var(--mui-palette-success-main)');
+      setColor(palette.Alert, 'warningIconColor', 'var(--mui-palette-warning-main)');
+      setColor(palette.AppBar, 'defaultBg', 'var(--mui-palette-grey-900)');
+      setColor(palette.AppBar, 'darkBg', 'var(--mui-palette-background-paper)'); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', 'var(--mui-palette-text-primary)'); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', 'var(--mui-palette-grey-600)');
+      setColor(palette.Chip, 'defaultBorder', 'var(--mui-palette-grey-700)');
+      setColor(palette.Chip, 'defaultAvatarColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Chip, 'defaultIconColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.FilledInput, 'bg', 'rgba(255, 255, 255, 0.09)');
+      setColor(palette.FilledInput, 'hoverBg', 'rgba(255, 255, 255, 0.13)');
+      setColor(palette.FilledInput, 'disabledBg', 'rgba(255, 255, 255, 0.12)');
+      setColor(palette.LinearProgress, 'primaryBg', darken(palette.primary.main, 0.5));
+      setColor(palette.LinearProgress, 'secondaryBg', darken(palette.secondary.main, 0.5));
+      setColor(palette.LinearProgress, 'errorBg', darken(palette.error.main, 0.5));
+      setColor(palette.LinearProgress, 'infoBg', darken(palette.info.main, 0.5));
+      setColor(palette.LinearProgress, 'successBg', darken(palette.success.main, 0.5));
+      setColor(palette.LinearProgress, 'warningBg', darken(palette.warning.main, 0.5));
+      setColor(palette.Skeleton, 'bg', 'rgba(var(--mui-palette-text-primaryChannel) / 0.13)');
+      setColor(palette.Slider, 'primaryTrack', darken(palette.primary.main, 0.5));
+      setColor(palette.Slider, 'secondaryTrack', darken(palette.secondary.main, 0.5));
+      setColor(palette.Slider, 'errorTrack', darken(palette.error.main, 0.5));
+      setColor(palette.Slider, 'infoTrack', darken(palette.info.main, 0.5));
+      setColor(palette.Slider, 'successTrack', darken(palette.success.main, 0.5));
+      setColor(palette.Slider, 'warningTrack', darken(palette.warning.main, 0.5));
+      setColor(palette.SnackbarContent, 'bg', emphasize(palette.background.default, 0.98));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.StepContent, 'border', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'defaultColor', 'var(--mui-palette-grey-300)');
+      setColor(palette.Switch, 'defaultDisabledColor', 'var(--mui-palette-grey-600)');
+      setColor(palette.Switch, 'primaryDisabledColor', darken(palette.primary.main, 0.55));
+      setColor(palette.Switch, 'secondaryDisabledColor', darken(palette.secondary.main, 0.55));
+      setColor(palette.Switch, 'errorDisabledColor', darken(palette.error.main, 0.55));
+      setColor(palette.Switch, 'infoDisabledColor', darken(palette.info.main, 0.55));
+      setColor(palette.Switch, 'successDisabledColor', darken(palette.success.main, 0.55));
+      setColor(palette.Switch, 'warningDisabledColor', darken(palette.warning.main, 0.55));
+      setColor(palette.TableCell, 'border', darken(alpha(palette.divider, 1), 0.68));
+      setColor(palette.Tooltip, 'bg', alpha(palette.grey[700], 0.92));
     }
 
     palette.common.backgroundChannel = colorChannel(palette.common.background);
     palette.common.onBackgroundChannel = colorChannel(palette.common.onBackground);
-    palette.dividerChannel = colorChannel(palette.divider); // special token for Tooltip
-    // TODO: consider adding `main`, and `light` to palette.grey to make it consistent.
-
-    if (!palette.grey.dark) {
-      palette.grey.dark = palette.grey[700];
-    }
-
+    palette.dividerChannel = colorChannel(palette.divider);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -105,12 +237,16 @@ export default function extendTheme(options = {}, ...args) {
 
       if (colors.secondary) {
         palette[color].secondaryChannel = colorChannel(colors.secondary);
-      } // Action colors: action.activeChannel
+      } // Action colors: action.active, action.selected
 
 
       if (colors.active) {
         palette[color].activeChannel = colorChannel(colors.active);
       }
+
+      if (colors.selected) {
+        palette[color].selectedChannel = colorChannel(colors.selected);
+      }
     });
   });
   theme = args.reduce((acc, argument) => deepmerge(acc, argument), theme);

package/styles/index.d.ts

@@ -94,4 +94,27 @@ export { default as withTheme } from './withTheme';
 export * from './CssVarsProvider';
 
 export { default as experimental_extendTheme } from './experimental_extendTheme';
-export * from './experimental_extendTheme';
+export type {
+  ColorSchemeOverrides,
+  SupportedColorScheme,
+  Opacity,
+  Overlays,
+  PaletteActionChannel,
+  PaletteAppBar,
+  PaletteAvatar,
+  PaletteChip,
+  PaletteColorChannel,
+  PaletteCommonChannel,
+  PaletteFilledInput,
+  PaletteLinearProgress,
+  PaletteSlider,
+  PaletteSnackbarContent,
+  PaletteStepConnector,
+  PaletteStepContent,
+  PaletteSwitch,
+  PaletteTableCell,
+  PaletteTextChannel,
+  PaletteTooltip,
+  CssVarsThemeOptions,
+  CssVarsTheme,
+} from './experimental_extendTheme';

package/themeCssVarsAugmentation/index.d.ts

@@ -0,0 +1,61 @@
+import type {
+  CssVarsTheme,
+  ColorSystem,
+  PaletteCommonChannel,
+  PaletteColorChannel,
+  PaletteTextChannel,
+  PaletteActionChannel,
+  PaletteAppBar,
+  PaletteAvatar,
+  PaletteChip,
+  PaletteFilledInput,
+  PaletteLinearProgress,
+  PaletteSlider,
+  PaletteSnackbarContent,
+  PaletteStepConnector,
+  PaletteStepContent,
+  PaletteSwitch,
+  PaletteTableCell,
+  PaletteTooltip,
+} from '../styles/experimental_extendTheme';
+
+/**
+ * Enhance the theme types to include new properties from the CssVarsProvider.
+ * The theme is typed with CSS variables in `styled`, `sx`, `useTheme`, etc.
+ */
+declare module '@mui/material/styles' {
+  // The palette must be extended in each node.
+  interface Theme extends Omit<ColorSystem, 'palette'> {
+    prefix: string;
+    vars: CssVarsTheme['vars'];
+    getCssVar: CssVarsTheme['getCssVar'];
+    getColorSchemeSelector: CssVarsTheme['getColorSchemeSelector'];
+  }
+
+  // The extended Palette should be in sync with `extendTheme`
+  interface Palette {
+    dividerChannel: string;
+    AppBar: PaletteAppBar;
+    Avatar: PaletteAvatar;
+    Chip: PaletteChip;
+    FilledInput: PaletteFilledInput;
+    LinearProgress: PaletteLinearProgress;
+    Slider: PaletteSlider;
+    SnackbarContent: PaletteSnackbarContent;
+    StepConnector: PaletteStepConnector;
+    StepContent: PaletteStepContent;
+    Switch: PaletteSwitch;
+    TableCell: PaletteTableCell;
+    Tooltip: PaletteTooltip;
+  }
+}
+
+declare module '@mui/material/styles/createPalette' {
+  interface CommonColors extends PaletteCommonChannel {}
+
+  interface PaletteColor extends PaletteColorChannel {}
+
+  interface TypeText extends PaletteTextChannel {}
+
+  interface TypeAction extends PaletteActionChannel {}
+}