[website] Migrate blog pages to use CSS theme variables #34976

siriwatknp · 2022-11-01T08:05:36Z

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/

…ite/blog-css-vars

mui-bot · 2022-11-01T08:08:16Z

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

No bundle size changes

Generated by 🚫 dangerJS against cc8821b

…ite/blog-css-vars

siriwatknp · 2022-11-02T06:35:00Z

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

Before:

After:

Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>

oliviertassinari · 2022-11-07T01:06:14Z

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 · 2022-11-07T02:01:55Z

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.

…ite/blog-css-vars

…l-ui into website/blog-css-vars

…ite/blog-css-vars

oliviertassinari · 2022-11-12T16:39:40Z

docs/src/modules/components/MarkdownElement.js

-      textDecoration: 'none',
+const Root = styled('div')(
+  ({ theme }) => ({
+    ...lightTheme.typography.body1,


Would this be better?

Suggested change

...lightTheme.typography.body1,

...theme.typography.body1,

oliviertassinari · 2022-11-12T16:41:09Z

docs/src/modules/components/MarkdownElement.js

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


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)`,

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,

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

oliviertassinari · 2022-11-12T17:18:58Z

docs/src/modules/components/MarkdownElement.js

+    ...lightTheme.typography.body1,
+    color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,
+    '& strong': {
+      color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`,


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 · 2022-11-14T07:32:15Z

@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 · 2022-11-14T23:03:12Z

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?

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.
Move the ThemeProvider from _app.js to the Next.js pages. For example, this would allow using the playground with the default theme behavior.
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.
Before migrating any of the pages to CSS variables, add the CSS providers to all the pages.
Do the migration, dogfooding the DX of the same API as we recommend it for the community: theme.vars.

oliviertassinari · 2022-11-16T22:56:02Z

@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/

siriwatknp added 4 commits November 1, 2022 14:40

temporary

7f66137

Merge branch 'master' of https://github.com/mui/material-ui into webs…

07e0501

…ite/blog-css-vars

update MarkdownElement

4ece75c

update blog page

35b8ce3

siriwatknp added website Pages that are not documentation-related, marketing-focused. enhancement This is not a bug, nor a new feature labels Nov 1, 2022

siriwatknp mentioned this pull request Nov 1, 2022

Migrate all website pages to use CSS theme variables #34880

Closed

10 tasks

siriwatknp marked this pull request as draft November 1, 2022 13:13

siriwatknp added 3 commits November 2, 2022 09:57

Merge branch 'master' of https://github.com/mui/material-ui into webs…

43ecfe3

…ite/blog-css-vars

Move to CSS variables

c986606

use theme spacing and radius

a35e6bd

siriwatknp marked this pull request as ready for review November 2, 2022 05:54

siriwatknp requested a review from oliviertassinari November 2, 2022 06:35

github-actions bot added the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 2, 2022

Merge branch 'master' into website/blog-css-vars

55f504a

Signed-off-by: Siriwat K <siriwatkunaporn@gmail.com>

github-actions bot added PR: out-of-date The pull request has merge conflicts and can't be merged and removed PR: out-of-date The pull request has merge conflicts and can't be merged labels Nov 3, 2022

siriwatknp added 2 commits November 8, 2022 11:21

Merge branch 'master' of https://github.com/mui/material-ui into webs…

5ee8da5

…ite/blog-css-vars

Merge branch 'website/blog-css-vars' of github.com:siriwatknp/materia…

bdbfb64

…l-ui into website/blog-css-vars

github-actions bot removed the PR: out-of-date The pull request has merge conflicts and can't be merged label Nov 8, 2022

siriwatknp added 2 commits November 8, 2022 11:38

fix changes from master

bd0feea

Merge branch 'master' of https://github.com/mui/material-ui into webs…

01a5592

…ite/blog-css-vars

oliviertassinari removed their request for review November 11, 2022 00:40

oliviertassinari added blog and removed enhancement This is not a bug, nor a new feature labels Nov 11, 2022

use the same letter spacing

cc8821b

siriwatknp merged commit 7a7430d into mui:master Nov 11, 2022

siriwatknp mentioned this pull request Nov 11, 2022

[docs] Fix MarkdownElement regression from adding CSS variables #35096

Merged

1 task

oliviertassinari reviewed Nov 12, 2022

View reviewed changes

siriwatknp mentioned this pull request Nov 17, 2022

[docs] Hotfix missing styles in dark mode #35179

Merged

1 task

cherniavskii mentioned this pull request Nov 17, 2022

[core] Upgrade monorepo mui/mui-x#6905

Merged

daniel-rabe pushed a commit to daniel-rabe/material-ui that referenced this pull request Nov 29, 2022

[website] Migrate blog pages to use CSS theme variables (mui#34976)

2a81181

feliperli pushed a commit to jesrodri/material-ui that referenced this pull request Dec 6, 2022

[website] Migrate blog pages to use CSS theme variables (mui#34976)

42dd7aa

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[website] Migrate blog pages to use CSS theme variables #34976

[website] Migrate blog pages to use CSS theme variables #34976

siriwatknp commented Nov 1, 2022 •

edited by oliviertassinari

Loading

mui-bot commented Nov 1, 2022 •

edited

Loading

siriwatknp commented Nov 2, 2022 •

edited

Loading

oliviertassinari commented Nov 7, 2022 •

edited

Loading

siriwatknp commented Nov 7, 2022

oliviertassinari Nov 12, 2022

oliviertassinari Nov 12, 2022

oliviertassinari Nov 12, 2022

oliviertassinari Nov 12, 2022

oliviertassinari Nov 12, 2022 •

edited

Loading

siriwatknp commented Nov 14, 2022

oliviertassinari commented Nov 14, 2022 •

edited

Loading

oliviertassinari commented Nov 16, 2022 •

edited

Loading

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

[website] Migrate blog pages to use CSS theme variables #34976

[website] Migrate blog pages to use CSS theme variables #34976

Conversation

siriwatknp commented Nov 1, 2022 • edited by oliviertassinari Loading

How to check?

Changes

mui-bot commented Nov 1, 2022 • edited Loading

siriwatknp commented Nov 2, 2022 • edited Loading

oliviertassinari commented Nov 7, 2022 • edited Loading

siriwatknp commented Nov 7, 2022

oliviertassinari Nov 12, 2022

Choose a reason for hiding this comment

oliviertassinari Nov 12, 2022

Choose a reason for hiding this comment

oliviertassinari Nov 12, 2022

Choose a reason for hiding this comment

oliviertassinari Nov 12, 2022

Choose a reason for hiding this comment

oliviertassinari Nov 12, 2022 • edited Loading

Choose a reason for hiding this comment

siriwatknp commented Nov 14, 2022

oliviertassinari commented Nov 14, 2022 • edited Loading

oliviertassinari commented Nov 16, 2022 • edited Loading

siriwatknp commented Nov 1, 2022 •

edited by oliviertassinari

Loading

mui-bot commented Nov 1, 2022 •

edited

Loading

siriwatknp commented Nov 2, 2022 •

edited

Loading

oliviertassinari commented Nov 7, 2022 •

edited

Loading

oliviertassinari Nov 12, 2022 •

edited

Loading

oliviertassinari commented Nov 14, 2022 •

edited

Loading

oliviertassinari commented Nov 16, 2022 •

edited

Loading