@mui/docs 9.0.0-alpha.2 → 9.0.0-alpha.3

package/branding/BrandingCssVarsProvider.js

@@ -0,0 +1,170 @@
+var _NextNProgressBar, _CssBaseline, _SkipLink, _MarkdownLinks;
+import * as React from 'react';
+import { useRouter } from 'next/router';
+import deepmerge from '@mui/utils/deepmerge';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/material/utils';
+import { colorChannel, getContrastRatio, lighten, darken } from '@mui/system/colorManipulator';
+import CssBaseline from '@mui/material/CssBaseline';
+import { getCookie, pathnameToLanguage } from "../helpers/helpers.js";
+import { NextNProgressBar } from "../NextNProgressBar/index.js";
+import { getDesignTokens, getThemedComponents } from "./brandingTheme.js";
+import { SkipLink, MarkdownLinks } from "../Link/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const {
+  palette: lightPalette,
+  typography,
+  ...designTokens
+} = getDesignTokens('light');
+const {
+  palette: darkPalette
+} = getDesignTokens('dark');
+const themeOptions = {
+  colorSchemes: {
+    light: {
+      palette: lightPalette
+    },
+    dark: {
+      palette: darkPalette
+    }
+  },
+  ...designTokens,
+  typography: deepmerge(typography, {
+    h1: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-common-white)'
+      }
+    },
+    h2: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-grey-100)'
+      }
+    },
+    h5: {
+      ':where([data-mui-color-scheme="dark"]) &': {
+        color: 'var(--muidocs-palette-primary-300)'
+      }
+    }
+  }),
+  ...getThemedComponents()
+};
+export function setDocsColors(primary, secondary) {
+  function injectPalette(prefix, palette, color, el) {
+    // simplified logic of `createPalette` to avoid `useTheme`.
+    const light = lighten(color, 0.2);
+    const dark = darken(color, 0.3);
+    const contrastText = getContrastRatio(color, '#fff') >= 3 ? '#fff' : 'rgba(0, 0, 0, 0.87)';
+    const elStyle = el.style;
+    elStyle.setProperty(`--${prefix}-palette-${palette}-main`, color);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-mainChannel`, colorChannel(color));
+    elStyle.setProperty(`--${prefix}-palette-${palette}-light`, light);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-lightChannel`, colorChannel(light));
+    elStyle.setProperty(`--${prefix}-palette-${palette}-dark`, dark);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-darkChannel`, colorChannel(dark));
+    elStyle.setProperty(`--${prefix}-palette-${palette}-contrastText`, contrastText);
+    elStyle.setProperty(`--${prefix}-palette-${palette}-contrastTextChannel`, colorChannel(contrastText));
+  }
+  if (typeof document !== 'undefined') {
+    const htmlEl = document.documentElement;
+    injectPalette('muidocs', 'primary', primary.main, htmlEl);
+    injectPalette('muidocs', 'secondary', secondary.main, htmlEl);
+    ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].forEach(key => {
+      htmlEl.style.setProperty(`--muidocs-palette-primary-${key}`, primary[key]);
+      htmlEl.style.setProperty(`--muidocs-palette-secondary-${key}`, secondary[key]);
+    });
+    injectPalette('mui', 'primary', primary.main, htmlEl);
+    injectPalette('mui', 'secondary', secondary.main, htmlEl);
+  }
+}
+export function resetDocsColor() {
+  if (typeof document !== 'undefined') {
+    const htmlElStyle = document.documentElement.style;
+    htmlElStyle.removeProperty('--muidocs-palette-primary-main');
+    htmlElStyle.removeProperty('--muidocs-palette-secondary-main');
+    htmlElStyle.removeProperty('--mui-palette-primary-main');
+    htmlElStyle.removeProperty('--mui-palette-secondary-main');
+    ['50', '100', '200', '300', '400', '500', '600', '700', '800', '900'].forEach(key => {
+      htmlElStyle.removeProperty(`--muidocs-palette-primary-${key}`);
+      htmlElStyle.removeProperty(`--muidocs-palette-secondary-${key}`);
+    });
+  }
+}
+export function setDocsSpacing(value) {
+  if (typeof document !== 'undefined') {
+    const htmlElStyle = document.documentElement.style;
+    htmlElStyle.setProperty('--muidocs-spacing', `${value}px`);
+    htmlElStyle.setProperty('--mui-spacing', `${value}px`);
+  }
+}
+export function resetDocsSpacing() {
+  if (typeof document !== 'undefined') {
+    const htmlElStyle = document.documentElement.style;
+    htmlElStyle.removeProperty('--muidocs-spacing');
+    htmlElStyle.removeProperty('--mui-spacing');
+  }
+}
+const themeCache = new Map();
+function getTheme(direction) {
+  let cachedTheme = themeCache.get(direction);
+  if (!cachedTheme) {
+    cachedTheme = createTheme({
+      cssVariables: {
+        cssVarPrefix: 'muidocs',
+        colorSchemeSelector: 'data-mui-color-scheme'
+      },
+      direction,
+      ...themeOptions
+    });
+    themeCache.set(direction, cachedTheme);
+  }
+  return cachedTheme;
+}
+export function BrandingCssThemeProvider({
+  children,
+  direction = 'ltr',
+  forceThemeRerender = false
+}) {
+  const theme = React.useMemo(() => getTheme(direction), [direction]);
+  return /*#__PURE__*/_jsx(ThemeProvider, {
+    theme: theme,
+    disableTransitionOnChange: true
+    // TODO: remove `forceThemeRerender` once custom theme on some demos rely on CSS variables instead of `theme.palette.mode`
+    ,
+    forceThemeRerender: forceThemeRerender,
+    children: children
+  });
+}
+export function BrandingCssVarsProvider(props) {
+  const {
+    direction = 'ltr',
+    children
+  } = props;
+  const {
+    asPath
+  } = useRouter();
+  const {
+    canonicalAs
+  } = pathnameToLanguage(asPath);
+  useEnhancedEffect(() => {
+    const nextPaletteColors = JSON.parse(getCookie('paletteColors') || 'null');
+    if (nextPaletteColors) {
+      setDocsColors(nextPaletteColors.primary, nextPaletteColors.secondary);
+    }
+  }, []);
+  useEnhancedEffect(() => {
+    // This is required to ensure that the layer order is declared first in the head
+    // because when the direction is RTL on the client, emotion reinserts the RTL styles back to the top of the insertion point.
+    if (direction === 'rtl') {
+      const head = document.querySelector('head');
+      if (head) {
+        const style = document.createElement('style');
+        style.textContent = '@layer theme, docsearch, mui, mui.global, mui.default, mui.theme, mui.custom, mui.sx, utilities;';
+        head.prepend(style);
+      }
+    }
+  }, [direction]);
+  return /*#__PURE__*/_jsxs(BrandingCssThemeProvider, {
+    forceThemeRerender: canonicalAs.startsWith('/x/') || canonicalAs.startsWith('/toolpad/'),
+    children: [_NextNProgressBar || (_NextNProgressBar = /*#__PURE__*/_jsx(NextNProgressBar, {})), _CssBaseline || (_CssBaseline = /*#__PURE__*/_jsx(CssBaseline, {})), _SkipLink || (_SkipLink = /*#__PURE__*/_jsx(SkipLink, {})), _MarkdownLinks || (_MarkdownLinks = /*#__PURE__*/_jsx(MarkdownLinks, {})), children]
+  });
+}

package/branding/BrandingProvider.js

@@ -1,23 +1,16 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.BrandingProvider = BrandingProvider;
-var React = _interopRequireWildcard(require("react"));
-var _styles = require("@mui/material/styles");
-var _brandingTheme = require("./brandingTheme");
-var _jsxRuntime = require("react/jsx-runtime");
-function BrandingProvider(props) {
+import * as React from 'react';
+import { ThemeProvider, useTheme } from '@mui/material/styles';
+import { brandingDarkTheme, brandingLightTheme } from "./brandingTheme.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function BrandingProvider(props) {
   const {
     children,
     mode: modeProp
   } = props;
-  const upperTheme = (0, _styles.useTheme)();
+  const upperTheme = useTheme();
   const mode = modeProp || upperTheme.palette.mode;
-  const theme = mode === 'dark' ? _brandingTheme.brandingDarkTheme : _brandingTheme.brandingLightTheme;
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.ThemeProvider, {
+  const theme = mode === 'dark' ? brandingDarkTheme : brandingLightTheme;
+  return /*#__PURE__*/_jsx(ThemeProvider, {
     theme: modeProp ? () => theme : theme,
     children: children
   });