[docs] Add customization demos

[siriwatknp]

Summary
Add Theming section to these pages. (to be used in rebranding).

• Cards

• Table

• DatePicker

• Slider

• Chip

• Tabs

• Timeline

• ToggleButton

• Add themed components for rebranding. for demos, will find a conclusion about where to show.

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

[mui-pr-bot]

No bundle size changes (experimental)

Generated by 🚫 dangerJS against 7a3ec82

[michaldudak]

🚀 Looks great! I love the subtle gradient on the card!

[mnajdova]

Looks great, some ideas for improvements:

When I hover on the icon for opening the years, the hover ring is cut:

Is there enough contrast here, my eyes have a bit hard time reading it (same for the Card)

They look great! I am excited :D

[oliviertassinari]

1. We are asking for PlusJakartaSans, but we don't load it.
2. What's the long term plan around this theming section? It's it only here temporarily before moving it to the marking pages? Is the plan to add a section for theming like we have one for customization on all the pages?

[siriwatknp]

• We are asking for PlusJakartaSans, but we don't load it.

will remove it in this PR, and add it in rebranding.

[siriwatknp]

What's the long term plan around this theming section?

I think it is nice to have a theming section in a component page apart from customization with sx or styled to give a glimpse of how theming works and then lead to full theming documentation. We can also measure in analytics in the future whether the assumption is correct or not.

[oliviertassinari]

Shouldn't the section be right after ## Customized sliders?

Also, if we move with ## Theming for the other pages, I would propose we simplify the customization header (## Customized sliders in this page) to ## Customization on all the pages.

[siriwatknp]

Sounds good.

[siriwatknp]

@oliviertassinari is it better if we use the word "styling" rather than "customization"? I feel "customization" is broader than just css. @danilo-leal any thought?

[oliviertassinari]

We could consider too:

## Customization

### Styling

### Theming

but maybe it's too deep and a flatten structure would help.

[siriwatknp]

Yeah, I prefer flatten structure.

## Styling

## Theming

I think I will keep Customization and ask the team about changing to Styling so the change does not overload in this PR. @oliviertassinari should I merge the PR?

[oliviertassinari]

Sounds good. Do you want Danilo to have a look at the new demos?

[danilo-leal]

I don't think that Theming should live in isolation from Customization. I believe they are about the same thing. You're customizing the components by applying a given theme in them. But, although this discussion is very important, I don't feel like this is the PR/place to discuss it already.

[siriwatknp]

@danilo-leal then I will remove them from the theming section and merge until we have a conclusion.

[danilo-leal]

This looks very good! I've made just small tweaks to them, especially regarding the cards in dark mode and the tabs contrast. You can check on the Figma file for quick scanning.