Re-export mui theme type def to capture the theme type before augmentation

Author: garronej

src/lib/tools/@mui/material/styles/CssVarsProvider.d.ts

@@ -0,0 +1,14 @@
+/// <reference types="react" />
+import { SupportedColorScheme } from './experimental_extendTheme';
+declare const shouldSkipGeneratingVar: (keys: string[]) => boolean;
+declare const CssVarsProvider: (props: import("react").PropsWithChildren<Partial<import("@mui/system").CssVarsProviderConfig<SupportedColorScheme>> & {
+    theme?: {
+        cssVarPrefix?: string | undefined;
+        colorSchemes: Record<SupportedColorScheme, Record<string, any>>;
+    } | undefined;
+    documentNode?: Document | null | undefined;
+    colorSchemeNode?: Document | HTMLElement | null | undefined;
+    colorSchemeSelector?: string | undefined;
+    storageWindow?: Window | null | undefined;
+}>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>, useColorScheme: () => import("@mui/system").ColorSchemeContextValue<SupportedColorScheme>, getInitColorSchemeScript: typeof import("@mui/system").getInitColorSchemeScript;
+export { useColorScheme, getInitColorSchemeScript, shouldSkipGeneratingVar, CssVarsProvider as Experimental_CssVarsProvider, };

src/lib/tools/@mui/material/styles/CssVarsProvider.js

@@ -0,0 +1,52 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useColorScheme = exports.shouldSkipGeneratingVar = exports.getInitColorSchemeScript = exports.Experimental_CssVarsProvider = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _system = require("@mui/system");
+
+var _experimental_extendTheme = _interopRequireDefault(require("./experimental_extendTheme"));
+
+var _createTypography = _interopRequireDefault(require("./createTypography"));
+
+var _excludeVariablesFromRoot = _interopRequireDefault(require("./excludeVariablesFromRoot"));
+
+const shouldSkipGeneratingVar = keys => {
+  var _keys$;
+
+  return !!keys[0].match(/(typography|mixins|breakpoints|direction|transitions)/) || keys[0] === 'palette' && !!((_keys$ = keys[1]) != null && _keys$.match(/(mode|contrastThreshold|tonalOffset)/));
+};
+
+exports.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
+const defaultTheme = (0, _experimental_extendTheme.default)();
+const {
+  CssVarsProvider,
+  useColorScheme,
+  getInitColorSchemeScript
+} = (0, _system.unstable_createCssVarsProvider)({
+  theme: defaultTheme,
+  attribute: 'data-mui-color-scheme',
+  modeStorageKey: 'mui-mode',
+  colorSchemeStorageKey: 'mui-color-scheme',
+  defaultColorScheme: {
+    light: 'light',
+    dark: 'dark'
+  },
+  resolveTheme: theme => {
+    const newTheme = (0, _extends2.default)({}, theme, {
+      typography: (0, _createTypography.default)(theme.palette, theme.typography)
+    });
+    return newTheme;
+  },
+  shouldSkipGeneratingVar,
+  excludeVariablesFromRoot: _excludeVariablesFromRoot.default
+});
+exports.getInitColorSchemeScript = getInitColorSchemeScript;
+exports.useColorScheme = useColorScheme;
+exports.Experimental_CssVarsProvider = CssVarsProvider;

src/lib/tools/@mui/material/styles/ThemeProvider.d.ts

@@ -0,0 +1,17 @@
+import { DefaultTheme } from '@mui/system';
+
+export interface ThemeProviderProps<Theme = DefaultTheme> {
+  children?: React.ReactNode;
+  theme: Partial<Theme> | ((outerTheme: Theme) => Theme);
+}
+
+/**
+ * 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<T = DefaultTheme>(
+  props: ThemeProviderProps<T>,
+): React.ReactElement<ThemeProviderProps<T>>;

src/lib/tools/@mui/material/styles/ThemeProvider.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function () {
+    return _system.ThemeProvider;
+  }
+});
+
+var _system = require("@mui/system");

src/lib/tools/@mui/material/styles/adaptV4Theme.d.ts

@@ -0,0 +1,38 @@
+import { BreakpointsOptions, ShapeOptions, SpacingOptions } from '@mui/system';
+import { MixinsOptions } from './createMixins';
+import { Palette, PaletteOptions } from './createPalette';
+import { TypographyOptions } from './createTypography';
+import { Shadows } from './shadows';
+import { TransitionsOptions } from './createTransitions';
+import { ZIndexOptions } from './zIndex';
+import { ComponentsOverrides } from './overrides';
+import { ComponentsVariants } from './variants';
+import { ComponentsProps } from './props';
+import { Theme } from './createTheme';
+
+export type Direction = 'ltr' | 'rtl';
+
+export interface DeprecatedThemeOptions {
+  shape?: ShapeOptions;
+  breakpoints?: BreakpointsOptions;
+  direction?: Direction;
+  mixins?: MixinsOptions;
+  overrides?: ComponentsOverrides;
+  palette?: PaletteOptions;
+  props?: ComponentsProps;
+  shadows?: Shadows;
+  spacing?: SpacingOptions;
+  transitions?: TransitionsOptions;
+  typography?: TypographyOptions | ((palette: Palette) => TypographyOptions);
+  variants?: ComponentsVariants;
+  zIndex?: ZIndexOptions;
+  unstable_strictMode?: boolean;
+}
+
+/**
+ * Generate a theme base on the V4 theme options received.
+ * @deprecated Follow the upgrade guide on https://mui.com/r/migration-v4#theme
+ * @param options Takes an incomplete theme object and adds the missing parts.
+ * @returns A complete, ready-to-use theme object.
+ */
+export default function adaptV4Theme(options?: DeprecatedThemeOptions): Theme;

src/lib/tools/@mui/material/styles/adaptV4Theme.js

@@ -0,0 +1,91 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = adaptV4Theme;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+
+var _system = require("@mui/system");
+
+const _excluded = ["defaultProps", "mixins", "overrides", "palette", "props", "styleOverrides"],
+      _excluded2 = ["type", "mode"];
+
+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 = (0, _objectWithoutPropertiesLoose2.default)(inputTheme, _excluded);
+  const theme = (0, _extends2.default)({}, other, {
+    components: {}
+  }); // default props
+
+  Object.keys(defaultProps).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.defaultProps = defaultProps[component];
+    theme.components[component] = componentValue;
+  });
+  Object.keys(props).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.defaultProps = props[component];
+    theme.components[component] = componentValue;
+  }); // CSS overrides
+
+  Object.keys(styleOverrides).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.styleOverrides = styleOverrides[component];
+    theme.components[component] = componentValue;
+  });
+  Object.keys(overrides).forEach(component => {
+    const componentValue = theme.components[component] || {};
+    componentValue.styleOverrides = overrides[component];
+    theme.components[component] = componentValue;
+  }); // theme.spacing
+
+  theme.spacing = (0, _system.createSpacing)(inputTheme.spacing); // theme.mixins.gutters
+
+  const breakpoints = (0, _system.createBreakpoints)(inputTheme.breakpoints || {});
+  const spacing = theme.spacing;
+  theme.mixins = (0, _extends2.default)({
+    gutters: (styles = {}) => {
+      return (0, _extends2.default)({
+        paddingLeft: spacing(2),
+        paddingRight: spacing(2)
+      }, styles, {
+        [breakpoints.up('sm')]: (0, _extends2.default)({
+          paddingLeft: spacing(3),
+          paddingRight: spacing(3)
+        }, styles[breakpoints.up('sm')])
+      });
+    }
+  }, mixins);
+  const {
+    type: typeInput,
+    mode: modeInput
+  } = palette,
+        paletteRest = (0, _objectWithoutPropertiesLoose2.default)(palette, _excluded2);
+  const finalMode = modeInput || typeInput || 'light';
+  theme.palette = (0, _extends2.default)({
+    // 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);
+  return theme;
+}