[material-ui][docs] Refine the free templates page

Summary

After wrapping up the first round of design refresh that this https://github.com/mui/material-ui/issues/37555 issue is going for, we'll do a global revision so that every template feels like part of a single app. So, this issue gathers small adjustment opportunities that have surfaced through working on all templates so far.

Tasks

• 1. Remove links and interdependencies on different templates https://github.com/mui/material-ui/pull/41941
• 2. Also make the thumbnails follow the docs appearance mode, like those in the Joy UI page https://github.com/mui/material-ui/pull/41947
• 3. Turn heavy customized components into a styled component. https://github.com/mui/material-ui/pull/41845
• 4. Ensure accessible labels for the inputs https://github.com/mui/material-ui/pull/41696
• 5. Standardize the focus style across all interactive elements https://github.com/mui/material-ui/pull/41696
• 6. Review and refine the colors and tokens of the custom theme https://github.com/mui/material-ui/pull/41696
• 7. Turn the logos into SVG https://github.com/mui/material-ui/pull/41696
• 8. Make the templates respect the user's system appearance mode (light or dark) by default https://github.com/mui/material-ui/pull/43220
• 9. Persist the light/dark mode between loads https://github.com/mui/material-ui/pull/43220
• 10. Add a theme selector on the Templates page, so visitors can pick how to see the live preview. https://github.com/mui/material-ui/pull/43396
  For example https://ui.shadcn.com/blocks
  
• 11. Group templates with custom themes and the ones without one yet https://github.com/mui/material-ui/pull/43220
• 12. Rename the “landing page” template given it looks more like a home page https://github.com/mui/material-ui/pull/43131
• 13. Refine paper component and its usage (remove background-image and use background-color) https://github.com/mui/material-ui/pull/43220
• 14. Allow to click on the image to open it. Uploading Screen Recording 2024-06-10 at 18.14.18.mov… https://github.com/mui/material-ui/pull/43131

https://github.com/mui/material-ui/assets/3165635/31b0d917-535d-49fc-aea1-1ece6331fcc8

• 15. Have all the custom theme demos share the exact same theme JavaScript structure https://github.com/mui/material-ui/pull/43220
• Fix #42610
• 22. Fix the theme toggle that overlaps the content on the page, e.g. https://deploy-preview-42605--material-ui.netlify.app/material-ui/getting-started/templates/sign-in/.
• 17. Have a CRUD dashboard with a side navigation: https://deploy-preview-42001--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/ feels much more useful to @oliviertassinari than https://deploy-preview-42101--material-ui.netlify.app/material-ui/getting-started/templates/dashboard/. I think we should still have it as the first one. See the Google Analytics events, and then swap the order/retire it once it gets dethroned 🥇 by another one in use metrics.

More generally, @oliviertassinari thinks that having this type of layout https://blocks.tremor.so/templates would be amazing, I would want to use this 👌✨:

• 18. Run https://pagespeed.web.dev/ on all the templates. Make sure there are no true positive warnings are reported.
• 19. Run w3c validator with all the templates, have no true positive warnings https://validator.w3.org/nu/?doc=https%3A%2F%2Fdeploy-preview-41845--material-ui.netlify.app%2Fmaterial-ui%2Fgetting-started%2Ftemplates%2Fsign-in%2F reported.
• 16. Merge all the sources of the templates into a single file. Make it much easier to copy and paste into your project (might demand a bit more research but likely to be much better)
• 20. Have https://chromewebstore.google.com/detail/lhdoppojpmngadmnindnejefpokejbdd report no errors
• 21. Have no console warning or errors

• 23. Support export to StackBlitz/CodeSandbox like https://mui.com/joy-ui/getting-started/templates/ do

More context on why it could be valuable: https://github.com/mui/material-ui/issues/14604. It becomes something they can then just click on export, and have it working as a starting point.

But to look at the GA event first on Joy UI to see the use. It's only a guess, maybe nobody uses it.

• 24. Add tokens for the 25 shadow levels so it won't spread strings into arrays, and result in many 1-character strings in the target array (reported on #43369, decision made on https://github.com/mui/material-ui/pull/43369#issuecomment-2315613131)

• 25. Refactor the theme to use the new colorSchemes API (based on https://github.com/mui/material-ui/issues/41469#issuecomment-2318989742)

• 26. Share the TemplateFrame files through all templates

• Fix #42609

Search keywords

template

Start at the Material UI Templates page and review the remaining unchecked tasks, especially the PageSpeed and W3C validator checks. Run those checks across the templates, then verify that the requested warnings, errors, export behavior, theme API work, and shared TemplateFrame structure are addressed.