[system] Enable configuring the sx prop in the theme

packages/mui-joy/src/Box/Box.test.js

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
-import { ThemeProvider } from '@mui/joy/styles';
+import { ThemeProvider, CssVarsProvider, extendTheme } from '@mui/joy/styles';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '@mui/joy/className';
 import Box from '@mui/joy/Box';
 
@@ -65,4 +65,189 @@ describe('Joy <Box />', () => {
       expect(container.firstChild).to.have.class('CompanyBox-root');
     });
   });
+
+  describe('sx', () => {
+    const theme = extendTheme({
+      colorSchemes: {
+        light: {
+          palette: {
+            primary: {
+              500: 'rgb(0, 0, 255)',
+            },
+          },
+        },
+      },
+      radius: {
+        md: '77px',
+      },
+      shadow: {
+        md: 'rgb(0, 0, 0) 0px 0px 10px 0px',
+      },
+    });
+
+    it('color', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ color: 'primary.500' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        color: 'rgb(0, 0, 255)',
+      });
+    });
+
+    it('bgcolor', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ bgcolor: 'primary.500' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        backgroundColor: 'rgb(0, 0, 255)',
+      });
+    });
+
+    it('backgroundColor', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ backgroundColor: 'primary.500' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        backgroundColor: 'rgb(0, 0, 255)',
+      });
+    });
+
+    it('borderRadius', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ borderRadius: 'md' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        borderTopLeftRadius: '77px',
+        borderTopRightRadius: '77px',
+        borderBottomLeftRadius: '77px',
+        borderBottomRightRadius: '77px',
+      });
+    });
+
+    it('boxShadow', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ boxShadow: 'md' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        boxShadow: 'rgb(0, 0, 0) 0px 0px 10px 0px',
+      });
+    });
+
+    it('fontSize', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ fontSize: 'md' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        fontSize: '16px',
+      });
+    });
+
+    it('fontWeight', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ fontWeight: 'md' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        fontWeight: '500',
+      });
+    });
+
+    it('letterSpacing', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ letterSpacing: 'md' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        letterSpacing: '1.328px',
+      });
+    });
+
+    it('lineHeight', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const { container } = render(
+        <CssVarsProvider theme={theme}>
+          <Box sx={{ lineHeight: 'md' }} />
+        </CssVarsProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        lineHeight: '24px',
+      });
+    });
+  });
 });

packages/mui-joy/src/Box/Box.tsx

@@ -4,13 +4,11 @@ import { OverridableComponent } from '@mui/types';
 import { unstable_ClassNameGenerator as ClassNameGenerator } from '../className';
 import { BoxTypeMap } from './BoxProps';
 import defaultTheme from '../styles/defaultTheme';
-import styleFunctionSx from '../styles/styleFunctionSx';
 
 const Box = createBox({
   defaultTheme,
   defaultClassName: 'JoyBox-root',
   generateClassName: ClassNameGenerator.generate,
-  styleFunctionSx,
 }) as OverridableComponent<BoxTypeMap>;
 
 Box.propTypes /* remove-proptypes */ = {

packages/mui-joy/src/styles/defaultTheme.test.js

@@ -29,6 +29,7 @@ describe('defaultTheme', () => {
         'vars',
         'cssVarPrefix',
         'getColorSchemeSelector',
+        'sxConfig',
       ]).to.includes(field);
     });
   });

packages/mui-joy/src/styles/extendTheme.test.js

@@ -23,6 +23,7 @@ describe('extendTheme', () => {
         'colorInversionConfig',
         'variants',
         'cssVarPrefix',
+        'sxConfig',
       ]).to.includes(field);
     });
   });

packages/mui-joy/src/styles/extendTheme.ts

@@ -7,6 +7,7 @@ import {
   unstable_createGetCssVar as systemCreateGetCssVar,
   colorChannel,
 } from '@mui/system';
+import defaultSxConfig from './sxConfig';
 import colors from '../colors';
 import { DefaultColorScheme, ExtendedColorScheme } from './types/colorScheme';
 import { ColorSystem, ColorPaletteProp, PaletteRange } from './types/colorSystem';
@@ -60,6 +61,7 @@ export interface CssVarsThemeOptions extends Partial2Level<ThemeScales> {
   spacing?: SpacingOptions;
   components?: Components<Theme>;
   colorSchemes?: Partial<Record<DefaultColorScheme | ExtendedColorScheme, ColorSystemOptions>>;
+  sxConfig?: object;
 }
 
 export const createGetCssVar = (cssVarPrefix = 'joy') =>
@@ -623,5 +625,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     attachColorChannels(colorSystem.palette);
   });
 
+  theme.sxConfig = {
+    ...defaultSxConfig,
+    ...themeOptions?.sxConfig,
+  };
+
   return theme;
 }

packages/mui-joy/src/styles/index.ts

@@ -1,5 +1,6 @@
 // reexports from system for module augmentation
 export type { BreakpointOverrides } from '@mui/system';
+export { experimental_sx } from '@mui/system';
 
 // Joy typings
 export type { ColorSchemeOverrides, SupportedColorScheme } from './types/colorScheme';
@@ -71,7 +72,6 @@ export { default as styled } from './styled';
 export { default as ThemeProvider } from './ThemeProvider';
 export * from './ThemeProvider';
 export { default as useThemeProps } from './useThemeProps';
-export { sx as experimental_sx } from './styleFunctionSx';
 export { ColorInversionProvider, useColorInversion } from './ColorInversion';
 export { default as extendTheme, createGetCssVar } from './extendTheme';
 export type { CssVarsThemeOptions } from './extendTheme';