[docs-infra][joy-ui] Polish the usage and CSS vars playgrounds

[danilo-leal]

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

This PR adds a general polish to the introduction component playground demo and the CSS vars playground found across the Joy UI documentation. Some additional stuff was also made in order to have everything standardized & consistent:

• Made their designs closer; given they have the same purpose, they should look similar.
• Fixed the layout shift of the CSS vars number inputs. The reset button showed up after typing, which resulted in the increase/decrease button being pushed to the side, which was a bit frustrating.
• Standardized their usage throughout docs + the "CSS variables playground" section title.

Examples:

• https://deploy-preview-38600--material-ui.netlify.app/joy-ui/react-input/#css-variables-playground
• https://deploy-preview-38600--material-ui.netlify.app/joy-ui/react-autocomplete/#css-variables-playground
• https://deploy-preview-38600--material-ui.netlify.app/joy-ui/react-chip/#css-variables-playground
• https://deploy-preview-38600--material-ui.netlify.app/joy-ui/react-card/#css-variables-playground

[mui-bot]

Netlify deploy preview

• docs/data/joy/components/autocomplete/autocomplete.md
• docs/data/joy/components/avatar/avatar.md
• docs/data/joy/components/breadcrumbs/breadcrumbs.md
• docs/data/joy/components/button/button.md
• docs/data/joy/components/card/card.md

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 4c2edf2

[zanivan]

Great improvement from the design POV! LGTM 🚀