@mui/system 5.2.0 → 5.2.4

package/cssVars/cssVarsParser.d.ts

@@ -1,68 +1,68 @@
-declare type NestedRecord<V = any> = {
-    [k: string | number]: NestedRecord<V> | V;
-};
-/**
- * This function create an object from keys, value and then assign to target
- *
- * @param {Object} obj : the target object to be assigned
- * @param {string[]} keys
- * @param {string | number} value
- *
- * @example
- * const source = {}
- * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
- *
- * @example
- * const source = { palette: { primary: 'var(--palette-primary)' } }
- * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
- * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
- */
-export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
-/**
- *
- * @param {Object} obj : source object
- * @param {Function} callback : a function that will be called when
- *                   - the deepest key in source object is reached
- *                   - the value of the deepest key is NOT `undefined` | `null`
- *
- * @example
- * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
- * // ['palette', 'primary', 'main'] '#000000'
- */
-export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void) => void;
-/**
- * a function that parse theme and return { css, vars }
- *
- * @param {Object} theme
- * @param {{
- *  prefix?: string,
- *  basePrefix?: string,
- *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
- * }} options.
- *  `basePrefix`: defined by design system.
- *  `prefix`: defined by application
- *
- *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
- *
- * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
- *
- * @example
- * const { css, vars } = parser({
- *   fontSize: 12,
- *   lineHeight: 1.2,
- *   palette: { primary: { 500: '#000000' } }
- * })
- *
- * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
- * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
- */
-export default function cssVarsParser(theme: Record<string, any>, options?: {
-    prefix?: string;
-    basePrefix?: string;
-    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
-}): {
-    css: NestedRecord<string>;
-    vars: NestedRecord<string>;
-};
-export {};
+declare type NestedRecord<V = any> = {
+    [k: string | number]: NestedRecord<V> | V;
+};
+/**
+ * This function create an object from keys, value and then assign to target
+ *
+ * @param {Object} obj : the target object to be assigned
+ * @param {string[]} keys
+ * @param {string | number} value
+ *
+ * @example
+ * const source = {}
+ * assignNestedKeys(source, ['palette', 'primary'], 'var(--palette-primary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)' } }
+ *
+ * @example
+ * const source = { palette: { primary: 'var(--palette-primary)' } }
+ * assignNestedKeys(source, ['palette', 'secondary'], 'var(--palette-secondary)')
+ * console.log(source) // { palette: { primary: 'var(--palette-primary)', secondary: 'var(--palette-secondary)' } }
+ */
+export declare const assignNestedKeys: <Object_1 = NestedRecord<any>, Value = any>(obj: Object_1, keys: Array<string>, value: Value) => void;
+/**
+ *
+ * @param {Object} obj : source object
+ * @param {Function} callback : a function that will be called when
+ *                   - the deepest key in source object is reached
+ *                   - the value of the deepest key is NOT `undefined` | `null`
+ *
+ * @example
+ * walkObjectDeep({ palette: { primary: { main: '#000000' } } }, console.log)
+ * // ['palette', 'primary', 'main'] '#000000'
+ */
+export declare const walkObjectDeep: <Value, T = Record<string, any>>(obj: T, callback: (keys: Array<string>, value: Value, scope: Record<string, string | number>) => void, shouldSkipPaths?: ((keys: Array<string>) => boolean) | undefined) => void;
+/**
+ * a function that parse theme and return { css, vars }
+ *
+ * @param {Object} theme
+ * @param {{
+ *  prefix?: string,
+ *  basePrefix?: string,
+ *  shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean
+ * }} options.
+ *  `basePrefix`: defined by design system.
+ *  `prefix`: defined by application
+ *
+ *   This function also mutate the string value of theme input by replacing `basePrefix` (if existed) with `prefix`
+ *
+ * @returns {{ css: Object, vars: Object }} `css` is the stylesheet, `vars` is an object to get css variable (same structure as theme)
+ *
+ * @example
+ * const { css, vars } = parser({
+ *   fontSize: 12,
+ *   lineHeight: 1.2,
+ *   palette: { primary: { 500: '#000000' } }
+ * })
+ *
+ * console.log(css) // { '--fontSize': '12px', '--lineHeight': 1.2, '--palette-primary-500': '#000000' }
+ * console.log(vars) // { fontSize: '--fontSize', lineHeight: '--lineHeight', palette: { primary: { 500: 'var(--palette-primary-500)' } } }
+ */
+export default function cssVarsParser(theme: Record<string, any>, options?: {
+    prefix?: string;
+    basePrefix?: string;
+    shouldSkipGeneratingVar?: (objectPathKeys: Array<string>, value: string | number) => boolean;
+}): {
+    css: NestedRecord<string>;
+    vars: NestedRecord<string>;
+};
+export {};

package/cssVars/cssVarsParser.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -9,8 +7,6 @@ exports.assignNestedKeys = void 0;
 exports.default = cssVarsParser;
 exports.walkObjectDeep = void 0;
 
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -59,14 +55,16 @@ const assignNestedKeys = (obj, keys, value) => {
 
 exports.assignNestedKeys = assignNestedKeys;
 
-const walkObjectDeep = (obj, callback) => {
+const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -80,7 +78,7 @@ exports.walkObjectDeep = walkObjectDeep;
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
     }
 
@@ -118,9 +116,6 @@ const getCssValue = (keys, value) => {
 
 
 function cssVarsParser(theme, options) {
-  const clonedTheme = (0, _extends2.default)({}, theme);
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -128,13 +123,18 @@ function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -148,7 +148,8 @@ function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/cssVars/getInitColorSchemeScript.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
-export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
-export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
-export default function getInitColorSchemeScript(options?: {
-    enableSystem?: boolean;
-    defaultLightColorScheme?: string;
-    defaultDarkColorScheme?: string;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-    attribute?: string;
-}): JSX.Element;
+/// <reference types="react" />
+export declare const DEFAULT_MODE_STORAGE_KEY = "mui-mode";
+export declare const DEFAULT_COLOR_SCHEME_STORAGE_KEY = "mui-color-scheme";
+export declare const DEFAULT_ATTRIBUTE = "data-mui-color-scheme";
+export default function getInitColorSchemeScript(options?: {
+    enableSystem?: boolean;
+    defaultLightColorScheme?: string;
+    defaultDarkColorScheme?: string;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+    attribute?: string;
+}): JSX.Element;

package/cssVars/getInitColorSchemeScript.js

@@ -52,7 +52,7 @@ function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/cssVars/index.d.ts

@@ -1,2 +1,2 @@
-export { default } from './createCssVarsProvider';
-export type { BuildCssVarsTheme } from './createCssVarsProvider';
+export { default } from './createCssVarsProvider';
+export type { BuildCssVarsTheme } from './createCssVarsProvider';

package/cssVars/useCurrentColorScheme.d.ts

@@ -1,50 +1,50 @@
-export declare type Mode = 'light' | 'dark' | 'system';
-export declare type SystemMode = Exclude<Mode, 'system'>;
-export interface State<SupportedColorScheme extends string> {
-    /**
-     * User selected mode.
-     * Note: on the server, mode is always undefined
-     */
-    mode: Mode | undefined;
-    /**
-     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
-     */
-    systemMode: SystemMode | undefined;
-    /**
-     * The color scheme for the light mode.
-     */
-    lightColorScheme: SupportedColorScheme;
-    /**
-     * The color scheme for the dark mode.
-     */
-    darkColorScheme: SupportedColorScheme;
-}
-export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
-    /**
-     * The current application color scheme. It is always `undefined` on the server.
-     */
-    colorScheme: SupportedColorScheme | undefined;
-    /**
-     * `mode` is saved to internal state and localStorage
-     * If `mode` is null, it will be reset to the defaultMode
-     */
-    setMode: (mode: Mode | null) => void;
-    /**
-     * `colorScheme` is saved to internal state and localStorage
-     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
-     */
-    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
-        light: SupportedColorScheme | null;
-        dark: SupportedColorScheme | null;
-    }> | null) => void;
-};
-export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
-export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
-export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
-    defaultLightColorScheme: SupportedColorScheme;
-    defaultDarkColorScheme: SupportedColorScheme;
-    supportedColorSchemes: Array<SupportedColorScheme>;
-    defaultMode?: Mode;
-    modeStorageKey?: string;
-    colorSchemeStorageKey?: string;
-}): Result<SupportedColorScheme>;
+export declare type Mode = 'light' | 'dark' | 'system';
+export declare type SystemMode = Exclude<Mode, 'system'>;
+export interface State<SupportedColorScheme extends string> {
+    /**
+     * User selected mode.
+     * Note: on the server, mode is always undefined
+     */
+    mode: Mode | undefined;
+    /**
+     * Only valid if `mode: 'system'`, either 'light' | 'dark'.
+     */
+    systemMode: SystemMode | undefined;
+    /**
+     * The color scheme for the light mode.
+     */
+    lightColorScheme: SupportedColorScheme;
+    /**
+     * The color scheme for the dark mode.
+     */
+    darkColorScheme: SupportedColorScheme;
+}
+export declare type Result<SupportedColorScheme extends string> = State<SupportedColorScheme> & {
+    /**
+     * The current application color scheme. It is always `undefined` on the server.
+     */
+    colorScheme: SupportedColorScheme | undefined;
+    /**
+     * `mode` is saved to internal state and localStorage
+     * If `mode` is null, it will be reset to the defaultMode
+     */
+    setMode: (mode: Mode | null) => void;
+    /**
+     * `colorScheme` is saved to internal state and localStorage
+     * If `colorScheme` is null, it will be reset to the defaultColorScheme (light | dark)
+     */
+    setColorScheme: (colorScheme: SupportedColorScheme | Partial<{
+        light: SupportedColorScheme | null;
+        dark: SupportedColorScheme | null;
+    }> | null) => void;
+};
+export declare function getSystemMode(mode: undefined | string): SystemMode | undefined;
+export declare function getColorScheme<SupportedColorScheme extends string>(state: State<SupportedColorScheme>): SupportedColorScheme | undefined;
+export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: {
+    defaultLightColorScheme: SupportedColorScheme;
+    defaultDarkColorScheme: SupportedColorScheme;
+    supportedColorSchemes: Array<SupportedColorScheme>;
+    defaultMode?: Mode;
+    modeStorageKey?: string;
+    colorSchemeStorageKey?: string;
+}): Result<SupportedColorScheme>;

package/esm/createTheme/createBreakpoints.js

@@ -51,6 +51,21 @@ export default function createBreakpoints(breakpoints) {
     return up(key);
   }
 
+  function not(key) {
+    // handle first and last key separately, for better readability
+    const keyIndex = keys.indexOf(key);
+
+    if (keyIndex === 0) {
+      return up(keys[1]);
+    }
+
+    if (keyIndex === keys.length - 1) {
+      return down(keys[keyIndex]);
+    }
+
+    return between(key, keys[keys.indexOf(key) + 1]).replace('@media', '@media not all and');
+  }
+
   return _extends({
     keys,
     values,
@@ -58,6 +73,7 @@ export default function createBreakpoints(breakpoints) {
     down,
     between,
     only,
+    not,
     unit
   }, other);
 }

package/esm/cssVars/createCssVarsProvider.js

@@ -2,25 +2,35 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
 import { formatMuiErrorMessage as _formatMuiErrorMessage } from "@mui/utils";
 const _excluded = ["colorSchemes"],
-      _excluded2 = ["colorSchemes"];
+      _excluded2 = ["colorSchemes"],
+      _excluded3 = ["components"];
 import * as React from 'react';
 import PropTypes from 'prop-types';
 import { GlobalStyles } from '@mui/styled-engine';
 import { deepmerge } from '@mui/utils';
+import createSpacing from '../createTheme/createSpacing';
+import createBreakpoints from '../createTheme/createBreakpoints';
 import cssVarsParser from './cssVarsParser';
 import ThemeProvider from '../ThemeProvider';
 import getInitColorSchemeScript, { DEFAULT_ATTRIBUTE, DEFAULT_MODE_STORAGE_KEY } from './getInitColorSchemeScript';
 import useCurrentColorScheme from './useCurrentColorScheme';
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
+export const DISABLE_CSS_TRANSITION = '*{-webkit-transition:none!important;-moz-transition:none!important;-o-transition:none!important;-ms-transition:none!important;transition:none!important}';
 export default function createCssVarsProvider(options) {
+  var _baseTheme$breakpoint;
+
   const {
     theme: baseTheme = {},
     defaultMode: desisgnSystemMode = 'light',
     defaultColorScheme: designSystemColorScheme,
+    disableTransitionOnChange = false,
+    enableColorScheme = true,
     prefix: designSystemPrefix = '',
     shouldSkipGeneratingVar
   } = options;
+  const systemSpacing = createSpacing(baseTheme.spacing);
+  const systemBreakpoints = createBreakpoints((_baseTheme$breakpoint = baseTheme.breakpoints) != null ? _baseTheme$breakpoint : {});
 
   if (!baseTheme.colorSchemes || typeof designSystemColorScheme === 'string' && !baseTheme.colorSchemes[designSystemColorScheme] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.light] || typeof designSystemColorScheme === 'object' && !baseTheme.colorSchemes[designSystemColorScheme == null ? void 0 : designSystemColorScheme.dark]) {
     console.error(`MUI: \`${designSystemColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
@@ -47,17 +57,28 @@ export default function createCssVarsProvider(options) {
     defaultMode = desisgnSystemMode,
     defaultColorScheme = designSystemColorScheme
   }) {
+    // make sure that baseTheme is always independent of each <CssVarsProvider /> call.
+    // JSON.parse(JSON.stringify(...)) is okay to be used as long as the baseTheme is a plain object.
+    const clonedBaseTheme = React.useMemo(() => JSON.parse(JSON.stringify(baseTheme)), []);
+
     const {
       colorSchemes: baseColorSchemes = {}
-    } = baseTheme,
-          restBaseTheme = _objectWithoutPropertiesLoose(baseTheme, _excluded);
+    } = clonedBaseTheme,
+          restBaseTheme = _objectWithoutPropertiesLoose(clonedBaseTheme, _excluded);
 
     const {
       colorSchemes: colorSchemesProp = {}
     } = themeProp,
           restThemeProp = _objectWithoutPropertiesLoose(themeProp, _excluded2);
 
-    let mergedTheme = deepmerge(restBaseTheme, restThemeProp);
+    const hasMounted = React.useRef(false); // eslint-disable-next-line prefer-const
+
+    let _deepmerge = deepmerge(restBaseTheme, restThemeProp),
+        {
+      components = {}
+    } = _deepmerge,
+        mergedTheme = _objectWithoutPropertiesLoose(_deepmerge, _excluded3);
+
     const colorSchemes = deepmerge(baseColorSchemes, colorSchemesProp);
     const allColorSchemes = Object.keys(colorSchemes);
     const defaultLightColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light;
@@ -65,6 +86,7 @@ export default function createCssVarsProvider(options) {
     const {
       mode,
       setMode,
+      systemMode,
       lightColorScheme,
       darkColorScheme,
       colorScheme,
@@ -100,8 +122,11 @@ export default function createCssVarsProvider(options) {
       shouldSkipGeneratingVar
     });
     mergedTheme = _extends({}, mergedTheme, colorSchemes[resolvedColorScheme], {
+      components,
       colorSchemes,
-      vars: rootVars
+      vars: rootVars,
+      spacing: themeProp.spacing ? createSpacing(themeProp.spacing) : systemSpacing,
+      breakpoints: themeProp.breakpoints ? createBreakpoints(themeProp.breakpoints) : systemBreakpoints
     });
     const styleSheet = {};
     Object.entries(colorSchemes).forEach(([key, scheme]) => {
@@ -135,9 +160,53 @@ export default function createCssVarsProvider(options) {
     });
     React.useEffect(() => {
       if (colorScheme) {
-        document.body.setAttribute(attribute, colorScheme);
+        // attaches attribute to <html> because the css variables are attached to :root (html)
+        document.documentElement.setAttribute(attribute, colorScheme);
       }
     }, [colorScheme, attribute]);
+    React.useEffect(() => {
+      if (!mode || !enableColorScheme) {
+        return undefined;
+      }
+
+      const priorColorScheme = document.documentElement.style.getPropertyValue('color-scheme'); // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark`
+
+      if (mode === 'system') {
+        document.documentElement.style.setProperty('color-scheme', systemMode);
+      } else {
+        document.documentElement.style.setProperty('color-scheme', mode);
+      }
+
+      return () => {
+        document.documentElement.style.setProperty('color-scheme', priorColorScheme);
+      };
+    }, [mode, systemMode]);
+    React.useEffect(() => {
+      let timer;
+
+      if (disableTransitionOnChange && hasMounted.current) {
+        // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313
+        const css = document.createElement('style');
+        css.appendChild(document.createTextNode(DISABLE_CSS_TRANSITION));
+        document.head.appendChild(css); // Force browser repaint
+
+        (() => window.getComputedStyle(document.body))();
+
+        timer = setTimeout(() => {
+          document.head.removeChild(css);
+        }, 1);
+      }
+
+      return () => {
+        clearTimeout(timer);
+      };
+    }, [colorScheme]);
+    React.useEffect(() => {
+      hasMounted.current = true;
+      return () => {
+        hasMounted.current = false;
+      };
+    }, []);
     return /*#__PURE__*/_jsxs(ColorSchemeContext.Provider, {
       value: {
         mode,
@@ -168,7 +237,7 @@ export default function createCssVarsProvider(options) {
     attribute: PropTypes.string,
 
     /**
-     * Your component tree.
+     * The component tree.
      */
     children: PropTypes.node,
 
@@ -188,7 +257,7 @@ export default function createCssVarsProvider(options) {
     modeStorageKey: PropTypes.string,
 
     /**
-     * css variable prefix
+     * CSS variable prefix.
      */
     prefix: PropTypes.string,
 

package/esm/cssVars/cssVarsParser.js

@@ -1,5 +1,3 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-
 /**
  * This function create an object from keys, value and then assign to target
  *
@@ -45,14 +43,16 @@ export const assignNestedKeys = (obj, keys, value) => {
  * // ['palette', 'primary', 'main'] '#000000'
  */
 
-export const walkObjectDeep = (obj, callback) => {
+export const walkObjectDeep = (obj, callback, shouldSkipPaths) => {
   function recurse(object, parentKeys = []) {
     Object.entries(object).forEach(([key, value]) => {
-      if (value !== undefined && value !== null) {
-        if (typeof value === 'object' && Object.keys(value).length > 0) {
-          recurse(value, [...parentKeys, key]);
-        } else {
-          callback([...parentKeys, key], value, object);
+      if (!shouldSkipPaths || shouldSkipPaths && !shouldSkipPaths([...parentKeys, key])) {
+        if (value !== undefined && value !== null) {
+          if (typeof value === 'object' && Object.keys(value).length > 0) {
+            recurse(value, [...parentKeys, key]);
+          } else {
+            callback([...parentKeys, key], value, object);
+          }
         }
       }
     });
@@ -64,7 +64,7 @@ export const walkObjectDeep = (obj, callback) => {
 const getCssValue = (keys, value) => {
   if (typeof value === 'number') {
     if (['lineHeight', 'fontWeight', 'opacity', 'zIndex'].some(prop => keys.includes(prop))) {
-      // css property that are unitless
+      // CSS property that are unitless
       return value;
     }
 
@@ -102,10 +102,6 @@ const getCssValue = (keys, value) => {
 
 
 export default function cssVarsParser(theme, options) {
-  const clonedTheme = _extends({}, theme);
-
-  delete clonedTheme.vars; // remove 'vars' from the structure
-
   const {
     prefix,
     basePrefix = '',
@@ -113,13 +109,18 @@ export default function cssVarsParser(theme, options) {
   } = options || {};
   const css = {};
   const vars = {};
-  walkObjectDeep(clonedTheme, (keys, val, scope) => {
+  walkObjectDeep(theme, (keys, val, scope) => {
     if (typeof val === 'string' || typeof val === 'number') {
       let value = val;
 
       if (typeof value === 'string' && value.startsWith('var')) {
         // replace the value of the `scope` object with the prefix or remove basePrefix from the value
-        value = prefix ? value.replace(basePrefix, prefix) : value.replace(`${basePrefix}-`, ''); // scope is the deepest object in the tree, keys is the theme path keys
+        if (!basePrefix && prefix) {
+          value = value.replace(/var\(--/g, `var(--${prefix}-`);
+        } else {
+          value = prefix ? value.replace(new RegExp(basePrefix, 'g'), prefix) : value.replace(new RegExp(`${basePrefix}-`, 'g'), '');
+        } // scope is the deepest object in the tree, keys is the theme path keys
+
 
         scope[keys.slice(-1)[0]] = value;
       }
@@ -133,7 +134,8 @@ export default function cssVarsParser(theme, options) {
         assignNestedKeys(vars, keys, `var(${cssVar})`);
       }
     }
-  });
+  }, keys => keys[0] === 'vars' // skip 'vars/*' paths
+  );
   return {
     css,
     vars

package/esm/cssVars/getInitColorSchemeScript.js

@@ -34,7 +34,7 @@ export default function getInitColorSchemeScript(options) {
           colorScheme = localStorage.getItem('${colorSchemeStorageKey}-dark') || '${defaultDarkColorScheme}';
         }
         if (colorScheme) {
-          document.body.setAttribute('${attribute}', colorScheme);
+          document.documentElement.setAttribute('${attribute}', colorScheme);
         }
       } catch (e) {} })();`
     }

package/esm/index.js

@@ -22,6 +22,7 @@ export { default as style, getPath } from './style';
 export { default as typography } from './typography';
 export * from './typography';
 export { default as unstable_styleFunctionSx, extendSxProp as unstable_extendSxProp } from './styleFunctionSx';
+export { default as experimental_sx } from './sx';
 export { default as unstable_getThemeValue } from './getThemeValue';
 export { default as Box } from './Box';
 export { default as createBox } from './createBox';

package/esm/sx/index.js

@@ -0,0 +1 @@
+export { default } from './sx';