@mui/material 5.8.4 → 5.8.7

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,248 @@ 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;
+  color: 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;
+}
+
+export interface CssVarsPalette {
+  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;
+}
+
+export interface ColorSystem {
+  palette: Palette & CssVarsPalette;
+  opacity: Opacity;
+  overlays: Overlays;
 }
 
-interface BaseTheme extends SystemTheme {
-  mixins: Mixins;
-  palette: Palette;
+export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'components'> {
+  /**
+   * Prefix of the generated CSS variables
+   * @default 'mui'
+   */
+  cssVarPrefix?: string;
+  /**
+   * Theme components
+   */
+  components?: Components<Omit<Theme, 'components' | 'palette'> & CssVarsTheme>;
+  /**
+   * Color schemes configuration
+   */
+  colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+}
+
+// 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.
+ * Theme properties generated by extendTheme and CssVarsProvider
  */
-export interface Theme extends BaseTheme {
-  components?: Components<BaseTheme>;
+export interface CssVarsTheme extends ColorSystem {
+  colorSchemes: Record<SupportedColorScheme, ColorSystem>;
+  cssVarPrefix: string;
+  vars: ThemeVars;
+  getCssVar: <CustomVar extends string = never>(
+    field: string | CustomVar,
+    ...vars: Array<string | CustomVar>
+  ) => string;
+  getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
 }
 
 /**
@@ -114,4 +314,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[]
+): Omit<Theme, 'palette'> & CssVarsTheme;

package/styles/experimental_extendTheme.js

@@ -1,9 +1,9 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["colorSchemes"],
+const _excluded = ["colorSchemes", "cssVarPrefix"],
       _excluded2 = ["palette"];
 import { deepmerge } from '@mui/utils';
-import { colorChannel } from '@mui/system';
+import { colorChannel, alpha, darken, lighten, emphasize, unstable_createGetCssVar as systemCreateGetCssVar } from '@mui/system';
 import createThemeWithoutVars from './createTheme';
 import { getOverlayAlpha } from '../Paper/Paper';
 const defaultDarkOverlays = [...Array(25)].map((_, index) => {
@@ -14,14 +14,31 @@ 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 const createGetCssVar = (cssVarPrefix = 'mui') => systemCreateGetCssVar(cssVarPrefix);
 export default function extendTheme(options = {}, ...args) {
   var _colorSchemesInput$li, _colorSchemesInput$da, _colorSchemesInput$li2, _colorSchemesInput$li3, _colorSchemesInput$da2, _colorSchemesInput$da3;
 
   const {
-    colorSchemes: colorSchemesInput = {}
+    colorSchemes: colorSchemesInput = {},
+    cssVarPrefix = 'mui'
   } = options,
         input = _objectWithoutPropertiesLoose(options, _excluded);
 
+  const getCssVar = createGetCssVar(cssVarPrefix);
+
   const _createThemeWithoutVa = createThemeWithoutVars(_extends({}, input, colorSchemesInput.light && {
     palette: (_colorSchemesInput$li = colorSchemesInput.light) == null ? void 0 : _colorSchemesInput$li.palette
   })),
@@ -39,20 +56,26 @@ export default function extendTheme(options = {}, ...args) {
   });
 
   let theme = _extends({}, muiTheme, {
+    cssVarPrefix,
+    getCssVar,
     colorSchemes: _extends({}, colorSchemesInput, {
       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 +85,142 @@ 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 {
-      palette.common.background = palette.common.background || '#fff';
-      palette.common.onBackground = palette.common.onBackground || '#000';
-    }
+      setColor(palette.common, 'background', '#000');
+      setColor(palette.common, 'onBackground', '#fff');
+    } // assign component variables
 
-    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];
+    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', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('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', getCssVar('palette-error-light'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-light'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-light'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-light'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-100'));
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-400'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('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(${getCssVar('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));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.8);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', lightPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-400'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-common-white'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('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 {
+      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', getCssVar('palette-error-dark'));
+      setColor(palette.Alert, 'infoFilledBg', getCssVar('palette-info-dark'));
+      setColor(palette.Alert, 'successFilledBg', getCssVar('palette-success-dark'));
+      setColor(palette.Alert, 'warningFilledBg', getCssVar('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', getCssVar('palette-error-main'));
+      setColor(palette.Alert, 'infoIconColor', getCssVar('palette-info-main'));
+      setColor(palette.Alert, 'successIconColor', getCssVar('palette-success-main'));
+      setColor(palette.Alert, 'warningIconColor', getCssVar('palette-warning-main'));
+      setColor(palette.AppBar, 'defaultBg', getCssVar('palette-grey-900'));
+      setColor(palette.AppBar, 'darkBg', getCssVar('palette-background-paper')); // specific for dark mode
+
+      setColor(palette.AppBar, 'darkColor', getCssVar('palette-text-primary')); // specific for dark mode
+
+      setColor(palette.Avatar, 'defaultBg', getCssVar('palette-grey-600'));
+      setColor(palette.Chip, 'defaultBorder', getCssVar('palette-grey-700'));
+      setColor(palette.Chip, 'defaultAvatarColor', getCssVar('palette-grey-300'));
+      setColor(palette.Chip, 'defaultIconColor', getCssVar('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(${getCssVar('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));
+      const snackbarContentBackground = emphasize(palette.background.default, 0.98);
+      setColor(palette.SnackbarContent, 'bg', snackbarContentBackground);
+      setColor(palette.SnackbarContent, 'color', darkPalette.getContrastText(snackbarContentBackground));
+      setColor(palette.SpeedDialAction, 'fabHoverBg', emphasize(palette.background.paper, 0.15));
+      setColor(palette.StepConnector, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.StepContent, 'border', getCssVar('palette-grey-600'));
+      setColor(palette.Switch, 'defaultColor', getCssVar('palette-grey-300'));
+      setColor(palette.Switch, 'defaultDisabledColor', getCssVar('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);
     Object.keys(palette).forEach(color => {
       const colors = palette[color]; // Color palettes: primary, secondary, error, info, success, and warning
 
@@ -105,12 +247,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,30 @@
+import type {
+  CssVarsTheme,
+  CssVarsPalette,
+  PaletteCommonChannel,
+  PaletteColorChannel,
+  PaletteTextChannel,
+  PaletteActionChannel,
+} 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<CssVarsTheme, 'palette'> {}
+
+  // The extended Palette should be in sync with `extendTheme`
+  interface Palette extends CssVarsPalette {}
+}
+
+declare module '@mui/material/styles/createPalette' {
+  interface CommonColors extends PaletteCommonChannel {}
+
+  interface PaletteColor extends PaletteColorChannel {}
+
+  interface TypeText extends PaletteTextChannel {}
+
+  interface TypeAction extends PaletteActionChannel {}
+}

package/transitions/index.d.ts

@@ -1 +1 @@
-export * from './transition';
+export * from './transition';

package/transitions/transition.d.ts

@@ -1,13 +1,13 @@
-import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
-import * as React from 'react';
-export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
-export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
-export interface EasingProps {
-    easing: string | {
-        enter?: string;
-        exit?: string;
-    };
-}
-export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
-export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
-}
+import { TransitionProps as _TransitionProps, TransitionActions } from 'react-transition-group/Transition';
+import * as React from 'react';
+export declare type TransitionHandlerKeys = 'onEnter' | 'onEntering' | 'onEntered' | 'onExit' | 'onExiting' | 'onExited';
+export declare type TransitionHandlerProps = Pick<_TransitionProps, TransitionHandlerKeys>;
+export interface EasingProps {
+    easing: string | {
+        enter?: string;
+        exit?: string;
+    };
+}
+export declare type TransitionKeys = 'in' | 'mountOnEnter' | 'unmountOnExit' | 'timeout' | 'easing' | 'addEndListener' | TransitionHandlerKeys;
+export interface TransitionProps extends TransitionActions, Partial<Pick<_TransitionProps & EasingProps, TransitionKeys>>, React.HTMLAttributes<HTMLElement> {
+}