@mui/system 7.0.0-beta.2 → 7.0.0-beta.4

package/modern/cssVars/createCssVarsProvider.js

@@ -50,12 +50,14 @@ export default function createCssVarsProvider(options) {
       modeStorageKey = defaultModeStorageKey,
       colorSchemeStorageKey = defaultColorSchemeStorageKey,
       disableTransitionOnChange = designSystemTransitionOnChange,
+      storageManager,
       storageWindow = typeof window === 'undefined' ? undefined : window,
       documentNode = typeof document === 'undefined' ? undefined : document,
       colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement,
       disableNestedContext = false,
       disableStyleSheetGeneration = false,
       defaultMode: initialMode = 'system',
+      forceThemeRerender = false,
       noSsr
     } = props;
     const hasMounted = React.useRef(false);
@@ -97,6 +99,7 @@ export default function createCssVarsProvider(options) {
       modeStorageKey,
       colorSchemeStorageKey,
       defaultMode,
+      storageManager,
       storageWindow,
       noSsr
     });
@@ -106,10 +109,15 @@ export default function createCssVarsProvider(options) {
       mode = ctx.mode;
       colorScheme = ctx.colorScheme;
     }
+    if (process.env.NODE_ENV !== 'production') {
+      if (forceThemeRerender && !restThemeProp.vars) {
+        console.warn(['MUI: The `forceThemeRerender` prop should only be used with CSS theme variables.', 'Note that it will slow down the app when changing between modes, so only do this when you cannot find a better solution.'].join('\n'));
+      }
+    }
+    const calculatedColorScheme = forceThemeRerender && restThemeProp.vars ?
+    // `colorScheme` is undefined on the server and hydration phase
+    colorScheme || restThemeProp.defaultColorScheme : restThemeProp.defaultColorScheme;
     const memoTheme = React.useMemo(() => {
-      // `colorScheme` is undefined on the server and hydration phase
-      const calculatedColorScheme = colorScheme || restThemeProp.defaultColorScheme;
-
       // 2. get the `vars` object that refers to the CSS custom properties
       const themeVars = restThemeProp.generateThemeVars?.() || restThemeProp.vars;
 
@@ -144,7 +152,7 @@ export default function createCssVarsProvider(options) {
         }
       }
       return resolveTheme ? resolveTheme(theme) : theme;
-    }, [restThemeProp, colorScheme, components, colorSchemes, cssVarPrefix]);
+    }, [restThemeProp, calculatedColorScheme, components, colorSchemes, cssVarPrefix]);
 
     // 5. Declaring effects
     // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet.
@@ -282,6 +290,10 @@ export default function createCssVarsProvider(options) {
      * The document to attach the attribute to.
      */
     documentNode: PropTypes.any,
+    /**
+     * If `true`, theme values are recalculated when the mode changes.
+     */
+    forceThemeRerender: PropTypes.bool,
     /**
      * The key in the local storage used to store current color scheme.
      */
@@ -291,6 +303,11 @@ export default function createCssVarsProvider(options) {
      * You should use this option in conjuction with `InitColorSchemeScript` component.
      */
     noSsr: PropTypes.bool,
+    /**
+     * The storage manager to be used for storing the mode and color scheme
+     * @default using `window.localStorage`
+     */
+    storageManager: PropTypes.func,
     /**
      * The window that attaches the 'storage' event listener.
      * @default window

package/modern/cssVars/index.d.ts

@@ -4,4 +4,5 @@ export { default as prepareCssVars } from "./prepareCssVars.js";
 export { default as prepareTypographyVars } from "./prepareTypographyVars.js";
 export type { ExtractTypographyTokens } from "./prepareTypographyVars.js";
 export { default as createCssVarsTheme } from "./createCssVarsTheme.js";
-export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
+export { createGetColorSchemeSelector } from "./getColorSchemeSelector.js";
+export type { StorageManager } from "./localStorageManager.js";

package/modern/cssVars/localStorageManager.d.ts

@@ -0,0 +1,34 @@
+export interface StorageManager {
+  (options: {
+    key: string;
+    storageWindow?: Window | null;
+  }): {
+    /**
+     * Function to get the value from the storage
+     * @param defaultValue The default value to be returned if the key is not found
+     * @returns The value from the storage or the default value
+     */
+    get(defaultValue: any): any;
+    /**
+     * Function to set the value in the storage
+     * @param value The value to be set
+     * @returns void
+     */
+    set(value: any): void;
+    /**
+     * Function to subscribe to the value of the specified key triggered by external events
+     * @param handler The function to be called when the value changes
+     * @returns A function to unsubscribe the handler
+     * @example
+     * React.useEffect(() => {
+     *  const unsubscribe = storageManager.subscribe((value) => {
+     *    console.log(value);
+     *  });
+     *  return unsubscribe;
+     * }, []);
+     */
+    subscribe(handler: (value: any) => void): () => void;
+  };
+}
+declare const localStorageManager: StorageManager;
+export default localStorageManager;

package/modern/cssVars/localStorageManager.js

@@ -0,0 +1,51 @@
+function noop() {}
+const localStorageManager = ({
+  key,
+  storageWindow
+}) => {
+  if (!storageWindow && typeof window !== 'undefined') {
+    storageWindow = window;
+  }
+  return {
+    get(defaultValue) {
+      if (typeof window === 'undefined') {
+        return undefined;
+      }
+      if (!storageWindow) {
+        return defaultValue;
+      }
+      let value;
+      try {
+        value = storageWindow.localStorage.getItem(key);
+      } catch {
+        // Unsupported
+      }
+      return value || defaultValue;
+    },
+    set: value => {
+      if (storageWindow) {
+        try {
+          storageWindow.localStorage.setItem(key, value);
+        } catch {
+          // Unsupported
+        }
+      }
+    },
+    subscribe: handler => {
+      if (!storageWindow) {
+        return noop;
+      }
+      const listener = event => {
+        const value = event.newValue;
+        if (event.key === key) {
+          handler(value);
+        }
+      };
+      storageWindow.addEventListener('storage', listener);
+      return () => {
+        storageWindow.removeEventListener('storage', listener);
+      };
+    }
+  };
+};
+export default localStorageManager;

package/modern/cssVars/useCurrentColorScheme.d.ts

@@ -1,3 +1,4 @@
+import type { StorageManager } from "./localStorageManager.js";
 export type Mode = 'light' | 'dark' | 'system';
 export type SystemMode = Exclude<Mode, 'system'>;
 export interface State<SupportedColorScheme extends string> {
@@ -48,6 +49,7 @@ interface UseCurrentColoSchemeOptions<SupportedColorScheme extends string> {
   modeStorageKey?: string;
   colorSchemeStorageKey?: string;
   storageWindow?: Window | null;
+  storageManager?: StorageManager | null;
   noSsr?: boolean;
 }
 export default function useCurrentColorScheme<SupportedColorScheme extends string>(options: UseCurrentColoSchemeOptions<SupportedColorScheme>): Result<SupportedColorScheme>;

package/modern/cssVars/useCurrentColorScheme.js

@@ -2,6 +2,8 @@
 
 import * as React from 'react';
 import { DEFAULT_MODE_STORAGE_KEY, DEFAULT_COLOR_SCHEME_STORAGE_KEY } from "../InitColorSchemeScript/InitColorSchemeScript.js";
+import localStorageManager from "./localStorageManager.js";
+function noop() {}
 export function getSystemMode(mode) {
   if (typeof window !== 'undefined' && typeof window.matchMedia === 'function' && mode === 'system') {
     const mql = window.matchMedia('(prefers-color-scheme: dark)');
@@ -32,22 +34,6 @@ export function getColorScheme(state) {
     return undefined;
   });
 }
-function initializeValue(key, defaultValue) {
-  if (typeof window === 'undefined') {
-    return undefined;
-  }
-  let value;
-  try {
-    value = localStorage.getItem(key) || undefined;
-    if (!value) {
-      // the first time that user enters the site.
-      localStorage.setItem(key, defaultValue);
-    }
-  } catch {
-    // Unsupported
-  }
-  return value || defaultValue;
-}
 export default function useCurrentColorScheme(options) {
   const {
     defaultMode = 'light',
@@ -57,14 +43,27 @@ export default function useCurrentColorScheme(options) {
     modeStorageKey = DEFAULT_MODE_STORAGE_KEY,
     colorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY,
     storageWindow = typeof window === 'undefined' ? undefined : window,
+    storageManager = localStorageManager,
     noSsr = false
   } = options;
   const joinedColorSchemes = supportedColorSchemes.join(',');
   const isMultiSchemes = supportedColorSchemes.length > 1;
+  const modeStorage = React.useMemo(() => storageManager?.({
+    key: modeStorageKey,
+    storageWindow
+  }), [storageManager, modeStorageKey, storageWindow]);
+  const lightStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-light`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
+  const darkStorage = React.useMemo(() => storageManager?.({
+    key: `${colorSchemeStorageKey}-dark`,
+    storageWindow
+  }), [storageManager, colorSchemeStorageKey, storageWindow]);
   const [state, setState] = React.useState(() => {
-    const initialMode = initializeValue(modeStorageKey, defaultMode);
-    const lightColorScheme = initializeValue(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
-    const darkColorScheme = initializeValue(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
+    const initialMode = modeStorage?.get(defaultMode) || defaultMode;
+    const lightColorScheme = lightStorage?.get(defaultLightColorScheme) || defaultLightColorScheme;
+    const darkColorScheme = darkStorage?.get(defaultDarkColorScheme) || defaultDarkColorScheme;
     return {
       mode: initialMode,
       systemMode: getSystemMode(initialMode),
@@ -84,27 +83,19 @@ export default function useCurrentColorScheme(options) {
         return currentState;
       }
       const newMode = mode ?? defaultMode;
-      try {
-        localStorage.setItem(modeStorageKey, newMode);
-      } catch {
-        // Unsupported
-      }
+      modeStorage?.set(newMode);
       return {
         ...currentState,
         mode: newMode,
         systemMode: getSystemMode(newMode)
       };
     });
-  }, [modeStorageKey, defaultMode]);
+  }, [modeStorage, defaultMode]);
   const setColorScheme = React.useCallback(value => {
     if (!value) {
       setState(currentState => {
-        try {
-          localStorage.setItem(`${colorSchemeStorageKey}-light`, defaultLightColorScheme);
-          localStorage.setItem(`${colorSchemeStorageKey}-dark`, defaultDarkColorScheme);
-        } catch {
-          // Unsupported
-        }
+        lightStorage?.set(defaultLightColorScheme);
+        darkStorage?.set(defaultDarkColorScheme);
         return {
           ...currentState,
           lightColorScheme: defaultLightColorScheme,
@@ -120,15 +111,12 @@ export default function useCurrentColorScheme(options) {
             ...currentState
           };
           processState(currentState, mode => {
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-${mode}`, value);
-            } catch {
-              // Unsupported
-            }
             if (mode === 'light') {
+              lightStorage?.set(value);
               newState.lightColorScheme = value;
             }
             if (mode === 'dark') {
+              darkStorage?.set(value);
               newState.darkColorScheme = value;
             }
           });
@@ -147,11 +135,7 @@ export default function useCurrentColorScheme(options) {
             console.error(`\`${newLightColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
           } else {
             newState.lightColorScheme = newLightColorScheme;
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-light`, newLightColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
+            lightStorage?.set(newLightColorScheme);
           }
         }
         if (newDarkColorScheme) {
@@ -159,17 +143,13 @@ export default function useCurrentColorScheme(options) {
             console.error(`\`${newDarkColorScheme}\` does not exist in \`theme.colorSchemes\`.`);
           } else {
             newState.darkColorScheme = newDarkColorScheme;
-            try {
-              localStorage.setItem(`${colorSchemeStorageKey}-dark`, newDarkColorScheme);
-            } catch (error) {
-              // Unsupported
-            }
+            darkStorage?.set(newDarkColorScheme);
           }
         }
         return newState;
       });
     }
-  }, [joinedColorSchemes, colorSchemeStorageKey, defaultLightColorScheme, defaultDarkColorScheme]);
+  }, [joinedColorSchemes, lightStorage, darkStorage, defaultLightColorScheme, defaultDarkColorScheme]);
   const handleMediaQuery = React.useCallback(event => {
     if (state.mode === 'system') {
       setState(currentState => {
@@ -209,34 +189,34 @@ export default function useCurrentColorScheme(options) {
 
   // Handle when localStorage has changed
   React.useEffect(() => {
-    if (storageWindow && isMultiSchemes) {
-      const handleStorage = event => {
-        const value = event.newValue;
-        if (typeof event.key === 'string' && event.key.startsWith(colorSchemeStorageKey) && (!value || joinedColorSchemes.match(value))) {
-          // If the key is deleted, value will be null then reset color scheme to the default one.
-          if (event.key.endsWith('light')) {
-            setColorScheme({
-              light: value
-            });
-          }
-          if (event.key.endsWith('dark')) {
-            setColorScheme({
-              dark: value
-            });
-          }
-        }
-        if (event.key === modeStorageKey && (!value || ['light', 'dark', 'system'].includes(value))) {
+    if (isMultiSchemes) {
+      const unsubscribeMode = modeStorage?.subscribe(value => {
+        if (!value || ['light', 'dark', 'system'].includes(value)) {
           setMode(value || defaultMode);
         }
-      };
-      // For syncing color-scheme changes between iframes
-      storageWindow.addEventListener('storage', handleStorage);
+      }) || noop;
+      const unsubscribeLight = lightStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            light: value
+          });
+        }
+      }) || noop;
+      const unsubscribeDark = darkStorage?.subscribe(value => {
+        if (!value || joinedColorSchemes.match(value)) {
+          setColorScheme({
+            dark: value
+          });
+        }
+      }) || noop;
       return () => {
-        storageWindow.removeEventListener('storage', handleStorage);
+        unsubscribeMode();
+        unsubscribeLight();
+        unsubscribeDark();
       };
     }
     return undefined;
-  }, [setColorScheme, setMode, modeStorageKey, colorSchemeStorageKey, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes]);
+  }, [setColorScheme, setMode, joinedColorSchemes, defaultMode, storageWindow, isMultiSchemes, modeStorage, lightStorage, darkStorage]);
   return {
     ...state,
     mode: isClient ? state.mode : undefined,

package/modern/display/display.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, display } from "../Box/index.js";
-export type DisplayProps = PropsFor<typeof display>;
+export type DisplayProps = PropsFor<typeof display>;
+export default display;

package/modern/flexbox/flexbox.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, flexbox } from "../Box/index.js";
-export type FlexboxProps = PropsFor<typeof flexbox>;
+export type FlexboxProps = PropsFor<typeof flexbox>;
+export default flexbox;

package/modern/index.d.ts

@@ -27,6 +27,7 @@ export { css, keyframes, StyledEngineProvider, Interpolation, CSSInterpolation,
 export { default as GlobalStyles } from "./GlobalStyles/index.js";
 export type { GlobalStylesProps } from "./GlobalStyles/index.js";
 export * from "./style/index.js";
+export { default as style } from "./style/index.js";
 export * from "./spacing/index.js";
 export { default as unstable_styleFunctionSx, unstable_createStyleFunctionSx, extendSxProp as unstable_extendSxProp, unstable_defaultSxConfig } from "./styleFunctionSx/index.js";
 export * from "./styleFunctionSx/index.js";

package/modern/index.js

@@ -1,5 +1,5 @@
 /**
- * @mui/system v7.0.0-beta.2
+ * @mui/system v7.0.0-beta.4
  *
  * @license MIT
  * This source code is licensed under the MIT license found in the

package/modern/palette/palette.d.ts

@@ -1,4 +1,5 @@
 import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
+export type PaletteProps = PropsFor<typeof palette>;
+export default palette;

package/modern/positions/positions.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, positions } from "../Box/index.js";
-export type PositionsProps = PropsFor<typeof positions>;
+export type PositionsProps = PropsFor<typeof positions>;
+export default positions;

package/modern/shadows/shadows.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, shadows } from "../Box/index.js";
-export type ShadowsProps = PropsFor<typeof shadows>;
+export type ShadowsProps = PropsFor<typeof shadows>;
+export default shadows;

package/modern/sizing/sizing.d.ts

@@ -8,4 +8,5 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
+export type SizingProps = PropsFor<typeof sizing>;
+export default sizing;

package/modern/spacing/spacing.d.ts

@@ -15,4 +15,5 @@ export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx'
 export type MarginProps = PropsFor<typeof margin>;
 export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
 export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
-export type PaddingProps = PropsFor<typeof padding>;
+export type PaddingProps = PropsFor<typeof padding>;
+export default spacing;

package/modern/spacing/spacing.js

@@ -55,6 +55,12 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
         }
       }
       if (typeof themeSpacing === 'string') {
+        if (themeSpacing.startsWith('var(') && val === 0) {
+          return 0;
+        }
+        if (themeSpacing.startsWith('var(') && val === 1) {
+          return themeSpacing;
+        }
         return `calc(${val} * ${themeSpacing})`;
       }
       return themeSpacing * val;
@@ -80,6 +86,9 @@ export function createUnaryUnit(theme, themeKey, defaultValue, propName) {
       if (typeof transformed === 'number') {
         return -transformed;
       }
+      if (typeof transformed === 'string' && transformed.startsWith('var(')) {
+        return `calc(-1 * ${transformed})`;
+      }
       return `-${transformed}`;
     };
   }

package/modern/style/style.d.ts

@@ -10,10 +10,10 @@ export interface StyleOptions<PropKey> {
   themeKey?: string;
   transform?: TransformFunction;
 }
-export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
+export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme;
 }> & {
   filterProps: string[];
-};
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+};

package/modern/typography/typography.d.ts

@@ -8,4 +8,5 @@ export const letterSpacing: SimpleStyleFunction<'letterSpacing'>;
 export const lineHeight: SimpleStyleFunction<'lineHeight'>;
 export const textAlign: SimpleStyleFunction<'textAlign'>;
 export const textTransform: SimpleStyleFunction<'textTransform'>;
-export type TypographyProps = PropsFor<typeof typography>;
+export type TypographyProps = PropsFor<typeof typography>;
+export default typography;

package/modern/version/index.js

@@ -1,6 +1,6 @@
-export const version = "7.0.0-beta.2";
+export const version = "7.0.0-beta.4";
 export const major = Number("7");
 export const minor = Number("0");
 export const patch = Number("0");
-export const prerelease = "beta.2";
+export const prerelease = "beta.4";
 export default version;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mui/system",
-  "version": "7.0.0-beta.2",
+  "version": "7.0.0-beta.4",
   "private": false,
   "author": "MUI Team",
   "description": "MUI System is a set of CSS utilities to help you build custom designs more efficiently. It makes it possible to rapidly lay out custom designs.",
@@ -30,10 +30,10 @@
     "clsx": "^2.1.1",
     "csstype": "^3.1.3",
     "prop-types": "^15.8.1",
-    "@mui/types": "^7.2.22",
-    "@mui/styled-engine": "7.0.0-beta.1",
-    "@mui/private-theming": "7.0.0-beta.2",
-    "@mui/utils": "7.0.0-beta.2"
+    "@mui/private-theming": "7.0.0-beta.4",
+    "@mui/types": "^7.3.0",
+    "@mui/styled-engine": "7.0.0-beta.4",
+    "@mui/utils": "7.0.0-beta.4"
   },
   "peerDependencies": {
     "@emotion/react": "^11.5.0",

package/palette/palette.d.ts

@@ -1,4 +1,5 @@
 import { PropsFor, SimpleStyleFunction, palette } from "../Box/index.js";
 export const color: SimpleStyleFunction<'color'>;
 export const bgcolor: SimpleStyleFunction<'bgcolor'>;
-export type PaletteProps = PropsFor<typeof palette>;
+export type PaletteProps = PropsFor<typeof palette>;
+export default palette;

package/positions/positions.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, positions } from "../Box/index.js";
-export type PositionsProps = PropsFor<typeof positions>;
+export type PositionsProps = PropsFor<typeof positions>;
+export default positions;

package/shadows/shadows.d.ts

@@ -1,2 +1,3 @@
 import { PropsFor, shadows } from "../Box/index.js";
-export type ShadowsProps = PropsFor<typeof shadows>;
+export type ShadowsProps = PropsFor<typeof shadows>;
+export default shadows;

package/sizing/sizing.d.ts

@@ -8,4 +8,5 @@ export const minHeight: SimpleStyleFunction<'minHeight'>;
 export const sizeWidth: SimpleStyleFunction<'sizeWidth'>;
 export const sizeHeight: SimpleStyleFunction<'sizeHeight'>;
 export const boxSizing: SimpleStyleFunction<'boxSizing'>;
-export type SizingProps = PropsFor<typeof sizing>;
+export type SizingProps = PropsFor<typeof sizing>;
+export default sizing;

package/spacing/spacing.d.ts

@@ -15,4 +15,5 @@ export const margin: SimpleStyleFunction<'m' | 'mt' | 'mr' | 'mb' | 'ml' | 'mx'
 export type MarginProps = PropsFor<typeof margin>;
 export const padding: SimpleStyleFunction<'p' | 'pt' | 'pr' | 'pb' | 'pl' | 'px' | 'py' | 'padding' | 'paddingTop' | 'paddingRight' | 'paddingBottom' | 'paddingLeft' | 'paddingX' | 'paddingY' | 'paddingInline' | 'paddingInlineStart' | 'paddingInlineEnd' | 'paddingBlock' | 'paddingBlockStart' | 'paddingBlockEnd'>;
 export function getValue(transformer: (prop: SpacingValueType) => SpacingValueType, propValue: SpacingValueType): SpacingValueType;
-export type PaddingProps = PropsFor<typeof padding>;
+export type PaddingProps = PropsFor<typeof padding>;
+export default spacing;

package/spacing/spacing.js

@@ -70,6 +70,12 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
         }
       }
       if (typeof themeSpacing === 'string') {
+        if (themeSpacing.startsWith('var(') && val === 0) {
+          return 0;
+        }
+        if (themeSpacing.startsWith('var(') && val === 1) {
+          return themeSpacing;
+        }
         return `calc(${val} * ${themeSpacing})`;
       }
       return themeSpacing * val;
@@ -95,6 +101,9 @@ function createUnaryUnit(theme, themeKey, defaultValue, propName) {
       if (typeof transformed === 'number') {
         return -transformed;
       }
+      if (typeof transformed === 'string' && transformed.startsWith('var(')) {
+        return `calc(-1 * ${transformed})`;
+      }
       return `-${transformed}`;
     };
   }

package/style/style.d.ts

@@ -10,10 +10,10 @@ export interface StyleOptions<PropKey> {
   themeKey?: string;
   transform?: TransformFunction;
 }
-export function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
+export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
+export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+export default function style<PropKey extends string, Theme extends object>(options: StyleOptions<PropKey>): StyleFunction<{ [K in PropKey]?: unknown } & {
   theme?: Theme;
 }> & {
   filterProps: string[];
-};
-export function getPath<T>(obj: T, path: string | undefined, checkVars?: boolean): null | unknown;
-export function getStyleValue(themeMapping: object | ((arg: any) => any), transform: TransformFunction | null, propValueFinal: unknown, userValue?: unknown): any;
+};