@mui/material 6.0.0-dev.240424162023-9968b4889d → 6.0.0

package/styles/ThemeProvider.d.ts

@@ -1,17 +1,54 @@
+import * as React from 'react';
 import { DefaultTheme } from '@mui/system';
-
-export interface ThemeProviderProps<Theme = DefaultTheme> {
-  children?: React.ReactNode;
-  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+import { CssThemeVariables } from './createThemeNoVars';
+type ThemeProviderCssVariablesProps = CssThemeVariables extends {
+    enabled: true;
+} ? {
+    /**
+     * The node for attaching the `theme.colorSchemeSelector`.
+     * @default document
+     */
+    colorSchemeNode?: Element | null;
+    /**
+     * If `true`, the provider creates its own context and generate stylesheet as if it is a root `ThemeProvider`.
+     */
+    disableNestedContext?: boolean;
+    /**
+     * If `true`, the style sheet for CSS theme variables won't be generated.
+     *
+     * This is useful for controlling nested ThemeProvider behavior.
+     * @default false
+     */
+    disableStyleSheetGeneration?: boolean;
+} : {};
+export interface ThemeProviderProps<Theme = DefaultTheme> extends ThemeProviderCssVariablesProps {
+    children?: React.ReactNode;
+    theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+    /**
+     * The document used to perform `disableTransitionOnChange` feature
+     * @default document
+     */
+    documentNode?: Document | null;
+    /**
+     * The window that attaches the 'storage' event listener
+     * @default window
+     */
+    storageWindow?: Window | null;
+    /**
+     * localStorage key used to store application `mode`
+     * @default 'mui-mode'
+     */
+    modeStorageKey?: string;
+    /**
+     * localStorage key used to store `colorScheme`
+     * @default 'mui-color-scheme'
+     */
+    colorSchemeStorageKey?: string;
+    /**
+     * Disable CSS transitions when switching between modes or color schemes
+     * @default false
+     */
+    disableTransitionOnChange?: boolean;
 }
-
-/**
- * This component makes the `theme` available down the React tree.
- * It should preferably be used at **the root of your component tree**.
- * API:
- *
- * - [ThemeProvider API](https://mui.com/material-ui/customization/theming/#themeprovider)
- */
-export default function ThemeProvider<Theme = DefaultTheme>(
-  props: ThemeProviderProps<Theme>,
-): React.ReactElement<ThemeProviderProps<Theme>>;
+export default function ThemeProvider<Theme = DefaultTheme>({ theme, ...props }: ThemeProviderProps<Theme>): React.JSX.Element;
+export {};

package/styles/ThemeProvider.js

@@ -1,31 +1,29 @@
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["theme"];
 import * as React from 'react';
-import PropTypes from 'prop-types';
-import { ThemeProvider as SystemThemeProvider } from '@mui/system';
-import THEME_ID from './identifier';
+import ThemeProviderNoVars from "./ThemeProviderNoVars.js";
+import { CssVarsProvider } from "./ThemeProviderWithVars.js";
+import THEME_ID from "./identifier.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function ThemeProvider(_ref) {
-  let {
-      theme: themeInput
-    } = _ref,
-    props = _objectWithoutPropertiesLoose(_ref, _excluded);
-  const scopedTheme = themeInput[THEME_ID];
-  return /*#__PURE__*/_jsx(SystemThemeProvider, _extends({}, props, {
-    themeId: scopedTheme ? THEME_ID : undefined,
-    theme: scopedTheme || themeInput
-  }));
-}
-process.env.NODE_ENV !== "production" ? ThemeProvider.propTypes = {
-  /**
-   * Your component tree.
-   */
-  children: PropTypes.node,
-  /**
-   * A theme object. You can provide a function to extend the outer theme.
-   */
-  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
-} : void 0;
+export default function ThemeProvider({
+  theme,
+  ...props
+}) {
+  if (typeof theme === 'function') {
+    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
+      theme: theme,
+      ...props
+    });
+  }
+  const muiTheme = THEME_ID in theme ? theme[THEME_ID] : theme;
+  if (!('colorSchemes' in muiTheme)) {
+    return /*#__PURE__*/_jsx(ThemeProviderNoVars, {
+      theme: theme,
+      ...props
+    });
+  }
+  return /*#__PURE__*/_jsx(CssVarsProvider, {
+    theme: theme,
+    ...props
+  });
+}

package/styles/ThemeProviderNoVars.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import { DefaultTheme } from '@mui/system';
+export interface ThemeProviderNoVarsProps<Theme = DefaultTheme> {
+    children?: React.ReactNode;
+    theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+export default function ThemeProviderNoVars<Theme = DefaultTheme>({ theme: themeInput, ...props }: ThemeProviderNoVarsProps<Theme>): React.ReactElement<ThemeProviderNoVarsProps<Theme>>;

package/styles/ThemeProviderNoVars.js

@@ -0,0 +1,17 @@
+'use client';
+
+import * as React from 'react';
+import { ThemeProvider as SystemThemeProvider } from '@mui/system';
+import THEME_ID from "./identifier.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export default function ThemeProviderNoVars({
+  theme: themeInput,
+  ...props
+}) {
+  const scopedTheme = THEME_ID in themeInput ? themeInput[THEME_ID] : undefined;
+  return /*#__PURE__*/_jsx(SystemThemeProvider, {
+    ...props,
+    themeId: scopedTheme ? THEME_ID : undefined,
+    theme: scopedTheme || themeInput
+  });
+}

package/styles/ThemeProviderWithVars.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { SupportedColorScheme } from './createThemeWithVars';
+declare const useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, deprecatedGetInitColorSchemeScript: typeof import("@mui/system/InitColorSchemeScript").default;
+declare function Experimental_CssVarsProvider(props: any): React.JSX.Element;
+declare const getInitColorSchemeScript: typeof deprecatedGetInitColorSchemeScript;
+/**
+ * TODO: remove this export in v7
+ * @deprecated
+ * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
+ *
+ * You should use `ThemeProvider` and `createTheme` instead:
+ *
+ * ```diff
+ * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
+ * + import { ThemeProvider, createTheme } from '@mui/material/styles';
+ *
+ * - const theme = extendTheme();
+ * + const theme = createTheme({
+ * +   cssVariables: true,
+ * +   colorSchemes: { light: true, dark: true },
+ * + });
+ *
+ * - <CssVarsProvider theme={theme}>
+ * + <ThemeProvider theme={theme}>
+ * ```
+ *
+ * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
+ */
+export declare const CssVarsProvider: (props: React.PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVariables?: false;
+        cssVarPrefix?: string;
+        colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+        colorSchemeSelector?: "media" | "class" | "data" | string;
+    } | {
+        $$material: {
+            cssVariables?: false;
+            cssVarPrefix?: string;
+            colorSchemes: Partial<Record<SupportedColorScheme, any>>;
+            colorSchemeSelector?: "media" | "class" | "data" | string;
+        };
+    } | undefined;
+    documentNode?: Document | null;
+    colorSchemeNode?: Element | null;
+    storageWindow?: Window | null;
+    disableNestedContext?: boolean;
+    disableStyleSheetGeneration?: boolean;
+}>) => React.ReactElement<any>;
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/ThemeProviderWithVars.js

@@ -0,0 +1,89 @@
+'use client';
+
+import * as React from 'react';
+import styleFunctionSx from '@mui/system/styleFunctionSx';
+import { unstable_createCssVarsProvider as createCssVarsProvider } from '@mui/system';
+import createTheme from "./createTheme.js";
+import createTypography from "./createTypography.js";
+import THEME_ID from "./identifier.js";
+import { defaultConfig } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const {
+  CssVarsProvider: InternalCssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript: deprecatedGetInitColorSchemeScript
+} = createCssVarsProvider({
+  themeId: THEME_ID,
+  // @ts-ignore ignore module augmentation tests
+  theme: () => createTheme({
+    cssVariables: true
+  }),
+  colorSchemeStorageKey: defaultConfig.colorSchemeStorageKey,
+  modeStorageKey: defaultConfig.modeStorageKey,
+  defaultColorScheme: {
+    light: defaultConfig.defaultLightColorScheme,
+    dark: defaultConfig.defaultDarkColorScheme
+  },
+  resolveTheme: theme => {
+    const newTheme = {
+      ...theme,
+      typography: createTypography(theme.palette, theme.typography)
+    };
+    newTheme.unstable_sx = function sx(props) {
+      return styleFunctionSx({
+        sx: props,
+        theme: this
+      });
+    };
+    return newTheme;
+  }
+});
+let warnedOnce = false;
+
+// TODO: remove in v7
+// eslint-disable-next-line @typescript-eslint/naming-convention
+function Experimental_CssVarsProvider(props) {
+  if (!warnedOnce) {
+    console.warn(['MUI: The Experimental_CssVarsProvider component has been ported into ThemeProvider.', '', "You should use `import { ThemeProvider } from '@mui/material/styles'` instead.", 'For more details, check out https://mui.com/material-ui/customization/css-theme-variables/usage/'].join('\n'));
+    warnedOnce = true;
+  }
+  return /*#__PURE__*/_jsx(InternalCssVarsProvider, {
+    ...props
+  });
+}
+let warnedInitScriptOnce = false;
+
+// TODO: remove in v7
+const getInitColorSchemeScript = params => {
+  if (!warnedInitScriptOnce) {
+    console.warn(['MUI: The getInitColorSchemeScript function has been deprecated.', '', "You should use `import InitColorSchemeScript from '@mui/material/InitColorSchemeScript'`", 'and replace the function call with `<InitColorSchemeScript />` instead.'].join('\n'));
+    warnedInitScriptOnce = true;
+  }
+  return deprecatedGetInitColorSchemeScript(params);
+};
+
+/**
+ * TODO: remove this export in v7
+ * @deprecated
+ * The `CssVarsProvider` component has been deprecated and ported into `ThemeProvider`.
+ *
+ * You should use `ThemeProvider` and `createTheme` instead:
+ *
+ * ```diff
+ * - import { CssVarsProvider, extendTheme } from '@mui/material/styles';
+ * + import { ThemeProvider, createTheme } from '@mui/material/styles';
+ *
+ * - const theme = extendTheme();
+ * + const theme = createTheme({
+ * +   cssVariables: true,
+ * +   colorSchemes: { light: true, dark: true },
+ * + });
+ *
+ * - <CssVarsProvider theme={theme}>
+ * + <ThemeProvider theme={theme}>
+ * ```
+ *
+ * To see the full documentation, check out https://mui.com/material-ui/customization/css-theme-variables/usage/.
+ */
+export const CssVarsProvider = InternalCssVarsProvider;
+export { useColorScheme, getInitColorSchemeScript, Experimental_CssVarsProvider };

package/styles/adaptV4Theme.js

@@ -1,24 +1,21 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
-  _excluded2 = ["type", "mode"];
 import { createBreakpoints, createSpacing } from '@mui/system';
 export default function adaptV4Theme(inputTheme) {
   if (process.env.NODE_ENV !== 'production') {
     console.warn(['MUI: adaptV4Theme() is deprecated.', 'Follow the upgrade guide on https://mui.com/r/migration-v4#theme.'].join('\n'));
   }
   const {
-      defaultProps = {},
-      mixins = {},
-      overrides = {},
-      palette = {},
-      props = {},
-      styleOverrides = {}
-    } = inputTheme,
-    other = _objectWithoutPropertiesLoose(inputTheme, _excluded);
-  const theme = _extends({}, other, {
+    defaultProps = {},
+    mixins = {},
+    overrides = {},
+    palette = {},
+    props = {},
+    styleOverrides = {},
+    ...other
+  } = inputTheme;
+  const theme = {
+    ...other,
     components: {}
-  });
+  };
 
   // default props
   Object.keys(defaultProps).forEach(component => {
@@ -50,32 +47,35 @@ export default function adaptV4Theme(inputTheme) {
   // theme.mixins.gutters
   const breakpoints = createBreakpoints(inputTheme.breakpoints || {});
   const spacing = theme.spacing;
-  theme.mixins = _extends({
+  theme.mixins = {
     gutters: (styles = {}) => {
-      return _extends({
+      return {
         paddingLeft: spacing(2),
-        paddingRight: spacing(2)
-      }, styles, {
-        [breakpoints.up('sm')]: _extends({
+        paddingRight: spacing(2),
+        ...styles,
+        [breakpoints.up('sm')]: {
           paddingLeft: spacing(3),
-          paddingRight: spacing(3)
-        }, styles[breakpoints.up('sm')])
-      });
-    }
-  }, mixins);
+          paddingRight: spacing(3),
+          ...styles[breakpoints.up('sm')]
+        }
+      };
+    },
+    ...mixins
+  };
   const {
-      type: typeInput,
-      mode: modeInput
-    } = palette,
-    paletteRest = _objectWithoutPropertiesLoose(palette, _excluded2);
+    type: typeInput,
+    mode: modeInput,
+    ...paletteRest
+  } = palette;
   const finalMode = modeInput || typeInput || 'light';
-  theme.palette = _extends({
+  theme.palette = {
     // theme.palette.text.hint
     text: {
       hint: finalMode === 'dark' ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.38)'
     },
     mode: finalMode,
-    type: finalMode
-  }, paletteRest);
+    type: finalMode,
+    ...paletteRest
+  };
   return theme;
 }

package/styles/createColorScheme.d.ts

@@ -0,0 +1,9 @@
+import type { ColorSystemOptions } from './createThemeWithVars';
+export declare function getOpacity(mode: 'light' | 'dark'): {
+    inputPlaceholder: number;
+    inputUnderline: number;
+    switchTrackDisabled: number;
+    switchTrack: number;
+};
+export declare function getOverlays(mode: 'light' | 'dark'): (string | undefined)[];
+export default function createColorScheme(options: ColorSystemOptions): ColorSystemOptions;

package/styles/createColorScheme.js

@@ -0,0 +1,41 @@
+import createPalette from "./createPalette.js";
+import getOverlayAlpha from "./getOverlayAlpha.js";
+const defaultDarkOverlays = [...Array(25)].map((_, index) => {
+  if (index === 0) {
+    return undefined;
+  }
+  const overlay = getOverlayAlpha(index);
+  return `linear-gradient(rgba(255 255 255 / ${overlay}), rgba(255 255 255 / ${overlay}))`;
+});
+export function getOpacity(mode) {
+  return {
+    inputPlaceholder: mode === 'dark' ? 0.5 : 0.42,
+    inputUnderline: mode === 'dark' ? 0.7 : 0.42,
+    switchTrackDisabled: mode === 'dark' ? 0.2 : 0.12,
+    switchTrack: mode === 'dark' ? 0.3 : 0.38
+  };
+}
+export function getOverlays(mode) {
+  return mode === 'dark' ? defaultDarkOverlays : [];
+}
+export default function createColorScheme(options) {
+  const {
+    palette: paletteInput = {
+      mode: 'light'
+    },
+    // need to cast to avoid module augmentation test
+    opacity,
+    overlays,
+    ...rest
+  } = options;
+  const palette = createPalette(paletteInput);
+  return {
+    palette,
+    opacity: {
+      ...getOpacity(palette.mode),
+      ...opacity
+    },
+    overlays: overlays || getOverlays(palette.mode),
+    ...rest
+  };
+}

package/styles/createGetSelector.d.ts

@@ -1,10 +1,21 @@
 declare const _default: <T extends {
-    attribute: string;
-    colorSchemeSelector: string;
-    colorSchemes?: Record<string, any> | undefined;
-    defaultColorScheme?: string | undefined;
-    cssVarPrefix?: string | undefined;
-}>(theme: T) => (colorScheme: keyof T['colorSchemes'] | undefined, css: Record<string, any>) => string | {
+    colorSchemeSelector?: "media" | "class" | "data" | string;
+    colorSchemes?: Record<string, any>;
+    defaultColorScheme?: string;
+    cssVarPrefix?: string;
+}>(theme: T) => (colorScheme: keyof T["colorSchemes"] | undefined, css: Record<string, any>) => string | {
+    ':root': Record<string, any>;
+    "@media (prefers-color-scheme: dark)": {
+        ':root': Record<string, any>;
+    };
+} | {
     [x: string]: Record<string, any>;
+    ':root'?: undefined;
+    "@media (prefers-color-scheme: dark)"?: undefined;
+} | {
+    ':root': {
+        [x: string]: any;
+    };
+    "@media (prefers-color-scheme: dark)"?: undefined;
 };
 export default _default;

package/styles/createGetSelector.js

@@ -1,5 +1,17 @@
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
+import excludeVariablesFromRoot from "./excludeVariablesFromRoot.js";
 export default (theme => (colorScheme, css) => {
+  const selector = theme.colorSchemeSelector;
+  let rule = selector;
+  if (selector === 'class') {
+    rule = '.%s';
+  }
+  if (selector === 'data') {
+    rule = '[data-%s]';
+  }
+  if (selector?.startsWith('data-') && !selector.includes('%s')) {
+    // 'data-mui-color-scheme' -> '[data-mui-color-scheme="%s"]'
+    rule = `[${selector}="%s"]`;
+  }
   if (theme.defaultColorScheme === colorScheme) {
     if (colorScheme === 'dark') {
       const excludedVariables = {};
@@ -7,15 +19,41 @@ export default (theme => (colorScheme, css) => {
         excludedVariables[cssVar] = css[cssVar];
         delete css[cssVar];
       });
+      if (rule === 'media') {
+        return {
+          ':root': css,
+          [`@media (prefers-color-scheme: dark)`]: {
+            ':root': excludedVariables
+          }
+        };
+      }
+      if (rule) {
+        return {
+          [rule.replace('%s', colorScheme)]: excludedVariables,
+          [`:root, ${rule.replace('%s', colorScheme)}`]: css
+        };
+      }
       return {
-        [`[${theme.attribute}="${String(colorScheme)}"]`]: excludedVariables,
-        [theme.colorSchemeSelector]: css
+        ':root': {
+          ...css,
+          ...excludedVariables
+        }
       };
     }
-    return `${theme.colorSchemeSelector}, [${theme.attribute}="${String(colorScheme)}"]`;
-  }
-  if (colorScheme) {
-    return `[${theme.attribute}="${String(colorScheme)}"]`;
+    if (rule && rule !== 'media') {
+      return `:root, ${rule.replace('%s', String(colorScheme))}`;
+    }
+  } else if (colorScheme) {
+    if (rule === 'media') {
+      return {
+        [`@media (prefers-color-scheme: ${String(colorScheme)})`]: {
+          ':root': css
+        }
+      };
+    }
+    if (rule) {
+      return rule.replace('%s', String(colorScheme));
+    }
   }
-  return theme.colorSchemeSelector;
+  return ':root';
 });

package/styles/createMixins.js

@@ -1,6 +1,5 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
 export default function createMixins(breakpoints, mixins) {
-  return _extends({
+  return {
     toolbar: {
       minHeight: 56,
       [breakpoints.up('xs')]: {
@@ -11,6 +10,7 @@ export default function createMixins(breakpoints, mixins) {
       [breakpoints.up('sm')]: {
         minHeight: 64
       }
-    }
-  }, mixins);
+    },
+    ...mixins
+  };
 }

package/styles/createMuiStrictModeTheme.js

@@ -1,5 +1,5 @@
 import deepmerge from '@mui/utils/deepmerge';
-import createTheme from './createTheme';
+import createTheme from "./createTheme.js";
 export default function createMuiStrictModeTheme(options, ...args) {
   return createTheme(deepmerge({
     unstable_strictMode: true

package/styles/createPalette.d.ts

@@ -1,4 +1,20 @@
-import { Color, PaletteMode } from '..';
+export type PaletteMode = 'light' | 'dark';
+export interface Color {
+  50: string;
+  100: string;
+  200: string;
+  300: string;
+  400: string;
+  500: string;
+  600: string;
+  700: string;
+  800: string;
+  900: string;
+  A100: string;
+  A200: string;
+  A400: string;
+  A700: string;
+}
 
 export {};
 // use standalone interface over typeof colors/commons

package/styles/createPalette.js

@@ -1,17 +1,14 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import _formatMuiErrorMessage from "@mui/utils/formatMuiErrorMessage";
-const _excluded = ["mode", "contrastThreshold", "tonalOffset"];
 import deepmerge from '@mui/utils/deepmerge';
 import { darken, getContrastRatio, lighten } from '@mui/system/colorManipulator';
-import common from '../colors/common';
-import grey from '../colors/grey';
-import purple from '../colors/purple';
-import red from '../colors/red';
-import orange from '../colors/orange';
-import blue from '../colors/blue';
-import lightBlue from '../colors/lightBlue';
-import green from '../colors/green';
+import common from "../colors/common.js";
+import grey from "../colors/grey.js";
+import purple from "../colors/purple.js";
+import red from "../colors/red.js";
+import orange from "../colors/orange.js";
+import blue from "../colors/blue.js";
+import lightBlue from "../colors/lightBlue.js";
+import green from "../colors/green.js";
 export const light = {
   // The colors used to style the text.
   text: {
@@ -176,11 +173,11 @@ function getDefaultWarning(mode = 'light') {
 }
 export default function createPalette(palette) {
   const {
-      mode = 'light',
-      contrastThreshold = 3,
-      tonalOffset = 0.2
-    } = palette,
-    other = _objectWithoutPropertiesLoose(palette, _excluded);
+    mode = 'light',
+    contrastThreshold = 3,
+    tonalOffset = 0.2,
+    ...other
+  } = palette;
   const primary = palette.primary || getDefaultPrimary(mode);
   const secondary = palette.secondary || getDefaultSecondary(mode);
   const error = palette.error || getDefaultError(mode);
@@ -208,7 +205,9 @@ export default function createPalette(palette) {
     lightShade = 300,
     darkShade = 700
   }) => {
-    color = _extends({}, color);
+    color = {
+      ...color
+    };
     if (!color.main && color[mainShade]) {
       color.main = color[mainShade];
     }
@@ -248,9 +247,11 @@ const theme2 = createTheme({ palette: {
       console.error(`MUI: The palette mode \`${mode}\` is not supported.`);
     }
   }
-  const paletteOutput = deepmerge(_extends({
+  const paletteOutput = deepmerge({
     // A collection of common colors.
-    common: _extends({}, common),
+    common: {
+      ...common
+    },
     // prevent mutable object.
     // The palette mode, can be light or dark.
     mode,
@@ -299,7 +300,9 @@ const theme2 = createTheme({ palette: {
     // Used by the functions below to shift a color's luminance by approximately
     // two indexes within its tonal palette.
     // E.g., shift from Red 500 to Red 300 or Red 700.
-    tonalOffset
-  }, modes[mode]), other);
+    tonalOffset,
+    // The light and dark mode object.
+    ...modes[mode]
+  }, other);
   return paletteOutput;
 }