[docs] Branding theme should match Material design theme

Current Behavior 😯

The docs currently have two different theme interfaces:

1. Material design
2. the docs theme (https://github.com/mui-org/material-ui/blob/f5e1da0f3e4c72b7e80aa84d41ab035d84500177/docs/src/modules/brandingTheme.ts)

The problem is that docs components assume the branding theme while they can be used inside the Material design context (e.g. https://github.com/mui-org/material-ui/blob/0979e6a54ba47c278d1f535953c0520a86349811/docs/src/modules/components/DemoSandboxed.js#L121-L128) leading to https://github.com/mui-org/material-ui/issues/28102 or https://github.com/mui-org/material-ui/issues/28105

I've experimented with two different approaches:

1. Fallback to Material design (https://github.com/mui-org/material-ui/pull/28109)
2. Lint against importing docs components and ensure components are only used within a new branding theme (stopped midway since it's a lot of work)

Both of these approaches require a considerable amount of maintenance. It seems to me that the easiest approach is to match interfaces so that we can safely move forward.

What I noticed is that the extended palette isn't even used directly in some places. Even though we have 6-10 different warning colors we still sometimes apply an alpha filter (e.g. https://github.com/mui-org/material-ui/blob/0a7298cd865d772f32ec20c9fae7ce5ab7e80553/docs/src/components/home/AdvancedShowcase.tsx#L97-L97). So it seems like the palette isn't even that useful.

/cc @siriwatknp @danilo-leal

Start by comparing docs/src/modules/brandingTheme.ts with the Material design theme, then inspect docs/src/modules/components/DemoSandboxed.js and docs/src/components/home/AdvancedShowcase.tsx for the differing interfaces. The work is complete when docs components can be used safely in the Material design context without separate theme fallbacks or usage restrictions.