[docs][base-ui] Add tokens to plain CSS theme stylesheet

[zanivan]

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

Part of: #40108

This PR is to add the theme tokens to the stylesheet and tweak the component's styling accordingly.

Preview: https://deploy-preview-40113--material-ui.netlify.app/experiments/base/components-gallery/

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 8bf8505

[mnajdova]

Do we plan to add these configs to the settings panel long term?

[zanivan]

Do we plan to add these configs to the settings panel long term?

I think we could aim to adding some settings, like border-radius, a toggle for flat/elevated (where we remove box-shadows from buttons and inputs), and typography (I'm still figuring out the best way to add this to the stylesheet)

[zanivan]

Just adding @mui/design on the loop! I'd love to hear your thoughts about the components' visual 😄

👉 https://deploy-preview-40113--material-ui.netlify.app/experiments/base/components-gallery/

[siriwatknp]

👍 added a few suggestions, the rest looks good.

[siriwatknp]

👍

[mnajdova]

The customization popup, is broken, the color switcher does not work anymore. I haven't look further, but wanted to raise that up. I can check it tomorrow if you need help Victor

[zanivan]

The customization popup, is broken, the color switcher does not work anymore. I haven't look further, but wanted to raise that up. I can check it tomorrow if you need help Victor

Hey @mnajdova actually it's pretty broken everywhere 😅 —don't worry, though, it looks like this because @danilo-leal is adding some tweaks to the tokens, and I reckon he's still doing it haha. Anyway, I really appreciate the help, but I think after his tweaks we can merge this and work towards the next step: defining how we'll make it available for users.

[DiegoAndai]

The Select component has to be updated because of #39675, as right now, it doesn't have a visual indication for keyboard navigation. We need to add a visible border with :focus-visible.

[danilo-leal]

Merging this one as I feel like it's in great shape! If we spot more improvement opportunities, we can always open iterative follow-up PRs 😬 In fact, an obvious one would be adding a dark mode toggle, but, as this might be available within the documentation, I'm assuming the toggle will be there. Anyhow, great work, y'all!