[website] Migrate blog pages to use CSS theme variables

[siriwatknp]

part of #34880

How to check?

✅ In development, the page does not throw class names mismatch between server and client.

Changes

• use applyDarkStyles in the blog page
• For reusable components like MarkdownElement that is used in the docs, refactor the styles to use CSS variables with fallbacks to the branding light & dark theme.

---

Before: https://master--material-ui.netlify.app/blog/date-pickers-stable-v5/
After: https://deploy-preview-34976--material-ui.netlify.app/blog/date-pickers-stable-v5/

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34976--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against cc8821b

[siriwatknp]

@oliviertassinari The code font changes because of #34954, Are you sure about this?

Before:

After:

[oliviertassinari]

Are you sure about this?

@siriwatknp I didn't intend this change. I have created #35027 to improve the situation. Visual regression tests could have helped avoid this regression.

[siriwatknp]

Are you sure about this?

@siriwatknp I didn't intend this change, visual regression tests could have helped spot this. I have created #35027 to improve the situation.

Got it, then this PR should help spot the change in the visual regression.

[oliviertassinari]

Would this be better?

Suggested change

	...lightTheme.typography.body1,
	...theme.typography.body1,

[oliviertassinari]

Why would theme.shape be undefined a valid case? Should we have expected?

Suggested change

	borderRadius: `var(--muidocs-shape-borderRadius, ${
	theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
	}px)`,
	borderRadius: `var(--muidocs-shape-borderRadius, ${theme.shape.borderRadius}px)`,

[oliviertassinari]

But this seems to hide something else. Should we have expected?

Suggested change

	borderRadius: `var(--muidocs-shape-borderRadius, ${
	theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
	}px)`,
	borderRadius: theme.vars.shape.borderRadius,

[oliviertassinari]

It feels like this component's parent infrastructure wasn't ready to allow MarkdownElement.js to be migrated to CSS vars.

[oliviertassinari]

Would this be better?

Suggested change

	color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
	color: `var(--muidocs-palette-text-primary, ${theme.colorScheme.light.palette.text.primary})`,

the coupling with the imports of lightTheme and darkTheme seems unhealthy for design consistency because the Material UI components don't use these values.

[siriwatknp]

@oliviertassinari My intention is to move MarkdownElement out of the theme context so that the component can render anywhere.

I think the docs component should not be altered by the theme context. It is very hard to reason and we have seen a lot of crashes based on the theme context.

This also allows the component to be rendered on the pages that haven't migrated to CSS variables.

[oliviertassinari]

so that the component can render anywhere.

@siriwatknp The end goal sounds great.

I'm not sure about the implementation. Would this be simpler/work?

1. Update all the codebase so that Material UI's brandingTheme is always present and unaltered when a docs-infra component is used, e.g. MarkdownElement.
2. Move the ThemeProvider from _app.js to the Next.js pages. For example, this would allow using the playground with the default theme behavior.
3. Move the CssVarsProvider from MarkdownDocs.js to the DemoSandbox.js file. This would remove the need to use all the "Wrapper" components in Joy UI. We would make 1. simpler to execute as the emotion theme context stacking would be a lot flatter in Joy UI pages.
4. Before migrating any of the pages to CSS variables, add the CSS providers to all the pages.
5. Do the migration, dogfooding the DX of the same API as we recommend it for the community: theme.vars.

[oliviertassinari]

@siriwatknp I have found a regression from this PR (looking a bit at https://mui-org.slack.com/archives/C042VP80PT5/p1667372692296329):

The commit on master just before this PR: https://636d3dbaea7a9900083c33e1--material-ui.netlify.app/material-ui/api/alert/

This PR: https://deploy-preview-34976--material-ui.netlify.app/material-ui/api/alert/