Merge branch 'master' into pull-request-43377

docs/data/material/design-resources/material-ui-for-figma/material-ui-for-figma.md

@@ -100,3 +100,14 @@ If you need to replace a single component that's been updated, there are a coupl
 ## Feedback and bug reports
 
 If you've got any feedback, we'd love to [hear from you](https://github.com/mui/mui-design-kits/discussions/84).
+
+## Integrations
+
+### Quest
+
+[Quest](https://www.quest.ai/) provides a native integration with this design kit.
+
+When you design your components with the kit, you can use [Quest plugin](https://www.figma.com/community/plugin/862039267149408972/figma-to-react-from-quest) to convert your Figma designs into Material UI code.
+The code generated should be clean and production-ready.
+
+Visit the [Quest documentation](https://docs.quest.ai/quest-docs) for more details.

docs/src/modules/components/AppLayoutDocs.js

@@ -167,9 +167,9 @@ export default function AppLayoutDocs(props) {
             <AppLayoutDocsFooter tableOfContents={toc} location={location} />
           </StyledAppContainer>
           {disableToc ? null : <AppTableOfContents toc={toc} />}
+          <BackToTop />
         </Main>
       </AdManager>
-      <BackToTop />
     </Layout>
   );
 }

packages/mui-material/src/styles/createTheme.test.js

@@ -503,6 +503,12 @@ describe('createTheme', () => {
     });
   });
 
+  it('should return the styles directly when using applyStyles if the selector is `&`', function test() {
+    const theme = createTheme({ cssVariables: true, palette: { mode: 'dark' } });
+
+    expect(theme.applyStyles('dark', { color: 'red' })).to.deep.equal({ color: 'red' });
+  });
+
   it('Throw an informative error when the key `vars` is passed as part of `options` passed', () => {
     try {
       createTheme({

packages/mui-system/src/createTheme/applyStyles.test.ts

@@ -69,4 +69,16 @@ describe('applyStyles', () => {
     const styles = { background: '#e5e5e5' };
     expect(applyStyles.call(theme, 'dark', styles)).to.deep.equal({});
   });
+
+  it('should return the styles directly if selector is &', () => {
+    const theme = {
+      vars: {},
+      colorSchemes: { light: true },
+      getColorSchemeSelector: () => {
+        return '&';
+      },
+    };
+    const styles = { background: '#e5e5e5' };
+    expect(applyStyles.call(theme, 'light', styles)).to.deep.equal(styles);
+  });
 });

packages/mui-system/src/createTheme/applyStyles.ts

@@ -76,6 +76,9 @@ export default function applyStyles<K extends string>(key: K, styles: CSSObject)
     }
     // If CssVarsProvider is used as a provider, returns '*:where({selector}) &'
     let selector = theme.getColorSchemeSelector(key);
+    if (selector === '&') {
+      return styles;
+    }
     if (selector.includes('data-') || selector.includes('.')) {
       // '*' is required as a workaround for Emotion issue (https://github.com/emotion-js/emotion/issues/2836)
       selector = `*:where(${selector.replace(/\s*&$/, '')}) &`;