[system] Move stylesheet generator to extendTheme

apps/pigment-css-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-css-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({

docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.js

@@ -35,7 +35,7 @@ const darkColorScheme = {
 };
 
 function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
-  const { vars: themeVars, generateCssVars } = prepareCssVars(
+  const { vars: themeVars, ...params } = prepareCssVars(
     {
       colorSchemes: {
         light: lightColorScheme,
@@ -54,11 +54,11 @@ function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
     // ... any other objects independent of color-scheme,
     // like fontSizes, spacing etc
     vars: themeVars,
-    generateCssVars,
     palette: {
       ...lightColorScheme.palette,
       colorScheme: 'light',
     },
+    ...params,
   };
 
   return theme;

docs/data/system/experimental-api/css-theme-variables/CreateCssVarsProvider.tsx

@@ -13,9 +13,7 @@ type Theme = {
   palette: {
     colorScheme: 'light' | 'dark';
   } & (typeof lightColorScheme)['palette'];
-  vars: ReturnType<typeof prepareCssVars>['vars'];
-  generateCssVars: ReturnType<typeof prepareCssVars>['generateCssVars'];
-};
+} & ReturnType<typeof prepareCssVars>;
 
 const lightColorScheme = {
   palette: {
@@ -47,7 +45,7 @@ const darkColorScheme = {
 };
 
 function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
-  const { vars: themeVars, generateCssVars } = prepareCssVars(
+  const { vars: themeVars, ...params } = prepareCssVars(
     {
       colorSchemes: {
         light: lightColorScheme,
@@ -66,11 +64,11 @@ function extendTheme({ cssVarPrefix = 'system-demo' } = {}) {
     // ... any other objects independent of color-scheme,
     // like fontSizes, spacing etc
     vars: themeVars,
-    generateCssVars,
     palette: {
       ...lightColorScheme.palette,
       colorScheme: 'light',
     },
+    ...params,
   };
 
   return theme;

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',
@@ -17,6 +20,7 @@ describe('defaultTheme', () => {
         'palette',
         'shadowRing',
         'shadowChannel',
+        'shadowOpacity',
         'getCssVar',
         'spacing',
         'radius',
@@ -30,7 +34,8 @@ describe('defaultTheme', () => {
         'unstable_sxConfig',
         'unstable_sx',
         'shouldSkipGeneratingVar',
-        'generateCssVars',
+        'generateStyleSheets',
+        'generateThemeVars',
         'applyStyles',
       ]).to.includes(field);
     });

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

@@ -8,9 +8,12 @@ describe('extendTheme', () => {
     const result = extendTheme();
     Object.keys(result).forEach((field) => {
       expect([
+        'attribute',
         'breakpoints',
+        'colorSchemeSelector',
         'components',
         'colorSchemes',
+        'defaultColorScheme',
         'focus',
         'fontSize',
         'fontFamily',
@@ -20,6 +23,9 @@ describe('extendTheme', () => {
         'spacing',
         'radius',
         'shadow',
+        'shadowRing',
+        'shadowChannel',
+        'shadowOpacity',
         'zIndex',
         'typography',
         'variants',
@@ -30,7 +36,8 @@ describe('extendTheme', () => {
         '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);
@@ -523,6 +544,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
 
   const theme = {
     colorSchemes,
+    defaultColorScheme: 'light',
     ...mergedScales,
     breakpoints: createBreakpoints(breakpoints ?? {}),
     components: deepmerge(
@@ -565,7 +587,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     cssVarPrefix,
     getCssVar,
     spacing: createSpacing(spacing),
-  } as unknown as Theme; // Need type casting due to module augmentation inside the repo
+  } as unknown as Theme & { attribute: string; colorSchemeSelector: string }; // Need type casting due to module augmentation inside the repo
 
   /**
    Color channels generation
@@ -610,15 +632,29 @@ 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 { vars, generateThemeVars, generateStyleSheets } = prepareCssVars<Theme, ThemeVars>(
     // @ts-ignore property truDark is missing from colorSchemes
     { colorSchemes, ...mergedScales },
     parserConfig,
   );
-  theme.vars = themeVars;
-  theme.generateCssVars = generateCssVars;
+  theme.attribute = 'data-joy-color-scheme';
+  theme.colorSchemeSelector = ':root';
+  theme.vars = vars;
+  theme.generateThemeVars = generateThemeVars;
+  theme.generateStyleSheets = generateStyleSheets;
   theme.unstable_sxConfig = {
     ...defaultSxConfig,
     ...themeOptions?.unstable_sxConfig,
@@ -630,9 +666,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     });
   };
   theme.getColorSchemeSelector = (colorScheme: SupportedColorScheme) =>
-    colorScheme === 'light'
-      ? '&'
-      : `&[data-joy-color-scheme="${colorScheme}"], [data-joy-color-scheme="${colorScheme}"] &`;
+    `[${theme.attribute}="${colorScheme}"] &`;
 
   const createVariantInput = { getCssVar, palette: theme.colorSchemes.light.palette };
   theme.variants = deepmerge(
@@ -657,6 +691,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme {
     variantsInput,
   );
 
+  Object.entries(theme.colorSchemes[theme.defaultColorScheme]).forEach(([key, value]) => {
+    // @ts-ignore
+    theme[key] = value;
+  });
   theme.palette = {
     ...theme.colorSchemes.light.palette,
     colorScheme: 'light',

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

@@ -97,6 +97,7 @@ export type ThemeCssVar = OverridableStringUnion<NormalizeVars<ThemeVars>, Theme
 
 export interface Theme extends ThemeScales, RuntimeColorSystem {
   colorSchemes: Record<DefaultColorScheme | ExtendedColorScheme, ColorSystem>;
+  defaultColorScheme: DefaultColorScheme | ExtendedColorScheme;
   focus: Focus;
   typography: TypographySystem;
   variants: Variants;
@@ -106,10 +107,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>;