[system] getColorSchemeSelector() move away from data-color-scheme "attribute value" selector

[oliviertassinari]

Steps to reproduce

See https://youtu.be/nWcexTnvIKI?si=akGrAE59cm7py1Sl&t=1223

for why this might not be great:

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

Lines 632 to 635 in 94fcd3a

	theme.getColorSchemeSelector = (colorScheme: SupportedColorScheme) =>
	colorScheme === 'light'
	? '&'
	: `&[data-joy-color-scheme="${colorScheme}"], [data-joy-color-scheme="${colorScheme}"] &`;

Current behavior

Selector use data attribute value

Expected behavior

Selector use data attribute or class name

Context

For comparison:

• Tailwind CSS uses class names
• This is OK: https://twitter.com/devongovett/status/1700170512163598741

Your environment

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: data-color-scheme

Search keywords:

Search keywords:

[siriwatknp]

Noted. Will do some benchmark between [data-color-scheme="dark"] and [data-color-scheme-dark]

[oliviertassinari]

I would recommend watching the whole video. There are interesting parts:

• It varies from browser to browser
• It varies as the browser implements new optimization over time
• How to measure it: https://www.notion.so/mui-org/Benchmark-performance-of-Pigment-CSS-vs-others-ac092794aa4c415da379f6338223d3eb?pvs=4#31390d4479714eba9cb27e47c866fb50

[oliviertassinari]

I'm transferring this to Pigment CSS repository. While there is still discussion about either MUI System and Pigment CSS should be the same thing, or separate (in which case define if it's in Material UI or in Pigment CSS product), for dark mode there isn't much we can do, Pigment CSS needs to be aware.

[siriwatknp]

I'm transferring this to Pigment CSS repository. While there is still discussion about either MUI System and Pigment CSS should be the same thing, or separate (in which case define if it's in Material UI or in Pigment CSS product), for dark mode there isn't much we can do, Pigment CSS needs to be aware.

I'm transferring back to the core repo because it's MUI System related and it will be closed by #42839

[oliviertassinari]

I'm transferring back to the core repo because it's MUI System related

@siriwatknp Ok, maybe this API is indeed too opinionated for Pigment CSS. MUI System, or whoever we end up calling it, would be its sweet spot.

What I want us to moved toward is for it to definitely not be exported from @mui/material, the more steps we make toward making that package only host CSS, the better:

-import { CssVarsProvider, extendTheme } from '@mui/material/styles'; 
+import { CssVarsProvider, extendTheme } from '@mui/system/CssVarsProvider';
+import { mdTheme } from '@mui/material/mdTheme';

 const theme = extendTheme({
+  ...mdTheme,
   colorSchemes: { dark: true },
 });

 function App() {
   return <CssVarsProvider theme={theme}>{/* ...you app */}</CssVarsProvider>;
 } 

Material UI v6 could have been this opportunity, but we can make it v7, another small iteration change.