[system] Move stylesheet generator to extendTheme

apps/pigment-next-app/next.config.js

@@ -81,32 +81,20 @@ const theme = extendTheme({
       },
     },
   },
+  getSelector: function getSelector(colorScheme, css) {
+    if (colorScheme && colorScheme === 'dark') {
+      return {
+        '@media (prefers-color-scheme: dark)': {
+          ':root': css,
+        },
+      };
+    }
+    return ':root';
+  },
 });
-
-// TODO: Fix this from the Material UI side in a separate PR
-theme.palette = theme.colorSchemes.light.palette;
 theme.getColorSchemeSelector = (colorScheme) => {
   return `@media (prefers-color-scheme: ${colorScheme})`;
 };
-const { css: rootCss } = theme.generateCssVars();
-const { css: lightCss } = theme.generateCssVars('light');
-const { css: darkCss } = theme.generateCssVars('dark');
-theme.generateCssVars = (colorScheme) => {
-  if (colorScheme === 'dark') {
-    return {
-      css: darkCss,
-      selector: {
-        '@media (prefers-color-scheme: dark)': {
-          ':root': darkCss,
-        },
-      },
-    };
-  }
-  if (colorScheme === 'light') {
-    return { css: lightCss, selector: ':root' };
-  }
-  return { css: rootCss, selector: ':root' };
-};
 
 /**
  * @type {PigmentOptions}

apps/pigment-vite-app/vite.config.ts

@@ -4,31 +4,20 @@ import Pages from 'vite-plugin-pages';
 import { pigment } from '@pigment-css/vite-plugin';
 import { experimental_extendTheme as extendTheme } from '@mui/material/styles';
 
-const theme = extendTheme();
-
-// TODO: Fix this from the Material UI side in a separate PR
-theme.palette = theme.colorSchemes.light.palette;
-theme.getColorSchemeSelector = (colorScheme) => {
-  return `@media (prefers-color-scheme: ${colorScheme})`;
-};
-const { css: rootCss } = theme.generateCssVars();
-const { css: lightCss } = theme.generateCssVars('light');
-const { css: darkCss } = theme.generateCssVars('dark');
-theme.generateCssVars = (colorScheme) => {
-  if (colorScheme === 'dark') {
-    return {
-      css: darkCss,
-      selector: {
+const theme = extendTheme({
+  getSelector: function getSelector(colorScheme, css) {
+    if (colorScheme && colorScheme === 'dark') {
+      return {
         '@media (prefers-color-scheme: dark)': {
-          ':root': darkCss,
+          ':root': css,
         },
-      },
-    };
-  }
-  if (colorScheme === 'light') {
-    return { css: lightCss, selector: ':root' };
-  }
-  return { css: rootCss, selector: ':root' };
+      };
+    }
+    return ':root';
+  },
+});
+theme.getColorSchemeSelector = (colorScheme) => {
+  return `@media (prefers-color-scheme: ${colorScheme})`;
 };
 
 export default defineConfig({

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

@@ -5,6 +5,9 @@ describe('defaultTheme', () => {
   it('the output contains required fields', () => {
     Object.keys(defaultTheme).forEach((field) => {
       expect([
+        'attribute',
+        'colorSchemeSelector',
+        'defaultColorScheme',
         'breakpoints',
         'components',
         'colorSchemes',
@@ -30,7 +33,8 @@ describe('defaultTheme', () => {
         'unstable_sxConfig',
         'unstable_sx',
         'shouldSkipGeneratingVar',
-        'generateCssVars',
+        'generateStyleSheets',
+        'generateThemeVars',
         'applyStyles',
       ]).to.includes(field);
     });

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

@@ -81,6 +81,26 @@ export interface CssVarsThemeOptions extends Partial2Level<ThemeScalesOptions> {
    *        value = 'var(--test)'
    */
   shouldSkipGeneratingVar?: (keys: string[], value: string | number) => boolean;
+  /**
+   * If provided, it will be used to create a selector for the color scheme.
+   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   *
+   * The callback receives the colorScheme with the possible values of:
+   * - undefined: the selector for tokens that are not color scheme dependent
+   * - string: the selector for the color scheme
+   *
+   * @example
+   * // class selector
+   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   *
+   * @example
+   * // data-* attribute selector
+   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   */
+  getSelector?: (
+    colorScheme: SupportedColorScheme | undefined,
+    css: Record<string, any>,
+  ) => string | Record<string, any>;
 }
 
 export const createGetCssVar = (cssVarPrefix = 'joy') =>
@@ -94,6 +114,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     components: componentsInput,
     variants: variantsInput,
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    getSelector,
     ...scalesInput
   } = themeOptions || {};
   const getCssVar = createGetCssVar(cssVarPrefix);
@@ -522,7 +543,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     : defaultScales;
 
   const theme = {
+    attribute: 'data-joy-color-scheme',
+    colorSchemeSelector: ':root',
     colorSchemes,
+    defaultColorScheme: 'light',
     ...mergedScales,
     breakpoints: createBreakpoints(breakpoints ?? {}),
     components: deepmerge(
@@ -610,15 +634,30 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
   const parserConfig = {
     prefix: cssVarPrefix,
     shouldSkipGeneratingVar,
+    getSelector:
+      getSelector ||
+      ((colorScheme) => {
+        if (theme.defaultColorScheme === colorScheme) {
+          return `${theme.colorSchemeSelector}, [${theme.attribute}="${colorScheme}"]`;
+        }
+        if (colorScheme) {
+          return `[${theme.attribute}="${colorScheme}"]`;
+        }
+        return theme.colorSchemeSelector;
+      }),
   };
 
-  const { vars: themeVars, generateCssVars } = prepareCssVars<Theme, ThemeVars>(
+  const { varsWithDefaults, generateThemeVars, generateStyleSheets } = prepareCssVars<
+    Theme,
+    ThemeVars
+  >(
     // @ts-ignore property truDark is missing from colorSchemes
     { colorSchemes, ...mergedScales },
     parserConfig,
   );
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+  theme.vars = varsWithDefaults;
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
   theme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...themeOptions?.unstable_sxConfig,
@@ -630,9 +669,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     });
   };
   theme.getColorSchemeSelector = (colorScheme: SupportedColorScheme) =>
-    colorScheme === 'light'
-      ? '&'
-      : `&[data-joy-color-scheme="${colorScheme}"], [data-joy-color-scheme="${colorScheme}"] &`;
+    `*:where([${theme.attribute}="${colorScheme}"]) &`;
 
   const createVariantInput = { getCssVar, palette: theme.colorSchemes.light.palette };
   theme.variants = deepmerge(

packages/mui-joy/src/styles/types/theme.ts

@@ -96,7 +96,10 @@ export type TextColor =
 export type ThemeCssVar = OverridableStringUnion<NormalizeVars<ThemeVars>, ThemeCssVarOverrides>;
 
 export interface Theme extends ThemeScales, RuntimeColorSystem {
+  attribute: string;
+  colorSchemeSelector: string;
   colorSchemes: Record<DefaultColorScheme | ExtendedColorScheme, ColorSystem>;
+  defaultColorScheme: DefaultColorScheme | ExtendedColorScheme;
   focus: Focus;
   typography: TypographySystem;
   variants: Variants;
@@ -106,10 +109,8 @@ export interface Theme extends ThemeScales, RuntimeColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: DefaultColorScheme | ExtendedColorScheme) => string;
-  generateCssVars: (colorScheme?: DefaultColorScheme | ExtendedColorScheme) => {
-    css: Record<string, string | number>;
-    vars: ThemeVars;
-  };
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Record<string, any>[];
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.

packages/mui-material-next/src/styles/CssVarsProvider.tsx

@@ -12,7 +12,6 @@ import {
   THEME_ID,
   SupportedColorScheme,
   private_createTypography as createTypography,
-  private_excludeVariablesFromRoot as excludeVariablesFromRoot,
 } from '@mui/material/styles';
 import { Theme } from './Theme.types';
 import defaultTheme from './defaultTheme';
@@ -41,7 +40,6 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
     };
     return newTheme;
   },
-  excludeVariablesFromRoot,
 });
 
 export { useColorScheme, getInitColorSchemeScript, CssVarsProvider };

packages/mui-material-next/src/styles/Theme.types.ts

@@ -293,10 +293,6 @@ export interface Theme extends Omit<MD2Theme, 'vars'> {
       shape: MD3Shape;
     };
   };
-  generateCssVars: (colorScheme?: SupportedColorScheme) => {
-    css: Record<string, string | number>;
-    vars: Theme['vars'];
-  };
 }
 
 export type SxProps = SystemSxProps<Theme>;

packages/mui-material-next/src/styles/extendTheme.ts

@@ -13,6 +13,7 @@ import {
 import {
   createTheme as createThemeWithoutVars,
   getOverlayAlpha,
+  private_excludeVariablesFromRoot as excludeVariablesFromRoot,
   SupportedColorScheme,
   ColorSystem as MD2ColorSystem,
   Overlays,
@@ -58,6 +59,7 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
     colorSchemes: colorSchemesInput = {},
     cssVarPrefix = 'md',
     shouldSkipGeneratingVar = defaultShouldSkipGeneratingVar,
+    getSelector,
     ...input
   } = options;
   const getCssVar = createGetCssVar(cssVarPrefix);
@@ -140,7 +142,14 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
   const { color: darkSysColor, elevation: darkSysElevation } = darkSys;
   const { palette: darkRefPalette } = darkRef;
 
-  let theme: Theme = {
+  let theme: Theme & {
+    defaultColorScheme: string;
+    attribute: string;
+    colorSchemeSelector: string;
+  } = {
+    attribute: 'data-mui-color-scheme',
+    colorSchemeSelector: ':root',
+    defaultColorScheme: 'light',
     ...muiTheme,
     cssVarPrefix,
     getCssVar,
@@ -451,14 +460,39 @@ export default function extendTheme(options: CssVarsThemeOptions = {}, ...args:
   const parserConfig = {
     prefix: cssVarPrefix,
     shouldSkipGeneratingVar,
+    getSelector:
+      getSelector ||
+      ((colorScheme, css) => {
+        if (theme.defaultColorScheme === colorScheme) {
+          if (colorScheme === 'dark') {
+            const excludedVariables: typeof css = {};
+            excludeVariablesFromRoot(cssVarPrefix).forEach((cssVar) => {
+              excludedVariables[cssVar] = css[cssVar];
+              delete css[cssVar];
+            });
+            return {
+              [`[${theme.attribute}="${colorScheme}"]`]: excludedVariables,
+              [theme.colorSchemeSelector]: css,
+            };
+          }
+          return `${theme.colorSchemeSelector}, [${theme.attribute}="${colorScheme}"]`;
+        }
+        if (colorScheme) {
+          return `[${theme.attribute}="${colorScheme}"]`;
+        }
+        return theme.colorSchemeSelector;
+      }),
   };
 
-  const { vars: themeVars, generateCssVars } = prepareCssVars<Theme, Theme['vars']>(
-    theme,
-    parserConfig,
-  );
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+  const { varsWithDefaults, generateThemeVars, generateStyleSheets } = prepareCssVars<
+    Theme,
+    Theme['vars']
+  >(theme, parserConfig);
+  theme.vars = varsWithDefaults;
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
+  theme.getColorSchemeSelector = (colorScheme) =>
+    `*:where([${theme.attribute}="${colorScheme}"]) &`;
   theme.shouldSkipGeneratingVar = shouldSkipGeneratingVar;
 
   theme.unstable_sxConfig = {

packages/mui-material/src/styles/CssVarsProvider.tsx

@@ -10,7 +10,6 @@ import experimental_extendTheme, {
   CssVarsTheme,
 } from './experimental_extendTheme';
 import createTypography from './createTypography';
-import excludeVariablesFromRoot from './excludeVariablesFromRoot';
 import THEME_ID from './identifier';
 
 const defaultTheme = experimental_extendTheme();
@@ -43,7 +42,6 @@ const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssV
 
     return newTheme;
   },
-  excludeVariablesFromRoot,
 });
 
 export {

packages/mui-material/src/styles/experimental_extendTheme.d.ts

@@ -288,6 +288,26 @@ export interface CssVarsThemeOptions extends Omit<ThemeOptions, 'palette' | 'com
    * Color schemes configuration
    */
   colorSchemes?: Partial<Record<SupportedColorScheme, ColorSystemOptions>>;
+  /**
+   * If provided, it will be used to create a selector for the color scheme.
+   * This is useful if you want to use class or data-* attributes to apply the color scheme.
+   *
+   * The callback receives the colorScheme with the possible values of:
+   * - undefined: the selector for tokens that are not color scheme dependent
+   * - string: the selector for the color scheme
+   *
+   * @example
+   * // class selector
+   * (colorScheme) => colorScheme !== 'light' ? `.theme-${colorScheme}` : ":root"
+   *
+   * @example
+   * // data-* attribute selector
+   * (colorScheme) => colorScheme !== 'light' ? `[data-theme="${colorScheme}"`] : ":root"
+   */
+  getSelector?: (
+    colorScheme: SupportedColorScheme | undefined,
+    css: Record<string, any>,
+  ) => string | Record<string, any>;
   /**
    * A function to determine if the key, value should be attached as CSS Variable
    * `keys` is an array that represents the object path keys.
@@ -408,10 +428,8 @@ export interface CssVarsTheme extends ColorSystem {
   vars: ThemeVars;
   getCssVar: (field: ThemeCssVar, ...vars: ThemeCssVar[]) => string;
   getColorSchemeSelector: (colorScheme: SupportedColorScheme) => string;
-  generateCssVars: (colorScheme?: SupportedColorScheme) => {
-    css: Record<string, string | number>;
-    vars: ThemeVars;
-  };
+  generateThemeVars: () => ThemeVars;
+  generateStyleSheets: () => Array<Record<string, any>>;
 
   // Default theme tokens
   spacing: Theme['spacing'];
@@ -445,4 +463,4 @@ export interface CssVarsTheme extends ColorSystem {
 export default function experimental_extendTheme(
   options?: CssVarsThemeOptions,
   ...args: object[]
-): Omit<Theme, 'palette' | 'applyStyles'> & CssVarsTheme;
+): Omit<Theme, 'applyStyles'> & CssVarsTheme;