[zero] Export extendTheme for creating a zero-runtime theme

[siriwatknp]

Changes

• theme is now optional for using zero-runtime
• developers can provide a plain theme or using the extendTheme util to generate CSS variables/dark mode support
• add documentation

What's next

To keep this PR small, I decided to do these in the next PR:

• update the demo app
• set zero-runtime version

---

• I have followed (at least) the PR section of the contributing guide.

[mui-bot]

Netlify deploy preview

https://deploy-preview-40897--material-ui.netlify.app/

@material-ui/core: parsed: +0.15% , gzip: +0.16%
@material-ui/system: parsed: +1.09% , gzip: +0.97%
@mui/material-next: parsed: +0.25% , gzip: +0.25%
@mui/joy: parsed: +0.17% , gzip: +0.19%

Bundle size report

Details of bundle changes (Toolpad)
Details of bundle changes

Generated by 🚫 dangerJS against cdfc7a0

[siriwatknp]

Moved to theme in next.config.js

[cherniavskii]

Great job!
I appreciate the clarity of the readme!

[cherniavskii]

If I understand correctly, extendTheme is optional.
When should it be used? What are the benefits compared to the plain theme?

[siriwatknp]

Thanks for the questions.

extendTheme is optional (I will mention it in the doc)

You would use it if you want zero-runtime to generate CSS variables from the theme.

[cherniavskii]

You would use it if you want zero-runtime to generate CSS variables from the theme.

Is there some added value for the user in doing so?

[brijeshb42]

It allows you to support multiple colorSchemes/themes and access css variables as JS object in your runtime code, ie, you could also do this in your code -

import theme from '@mui/zero-runtime/theme';

function Component() {
  return <div style={{[theme.vars.palette.primary.main]: 'red'}} />
}

which would output

<div style="--mui-palette-primary-main: red"></div>

[brijeshb42]

Looks good

[siriwatknp]

@samuelsycamore @danilo-leal I'd love to hear feedbacks on the docs from both of you.

FYI, I'd like to keep this PR simple so added only the basic things for the docs to get started. We could add more docs, like advanced usage, tutorial, technical explanation in a separate PR.

suggestion applied.