[website] Improve the footer's chip contrast

[danilo-leal]

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

Aside from what the title says, I also added a new page under the Experiments directory that we can fill up more over time to visualize the brand-themed components. It'll likely be easier to maintain them and make changes without getting to pages where they're available. We should've done this a long time ago 😅

• https://deploy-preview-41209--material-ui.netlify.app/
• https://deploy-preview-41209--material-ui.netlify.app/experiments/website/branding-theme-test/

[mui-bot]

Netlify deploy preview

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

Bundle size report

No bundle size changes (Toolpad)
No bundle size changes

Generated by 🚫 dangerJS against 95692b0

[zanivan]

I also added a new page under the Experiments directory that we can fill up more over time to visualize the brand-themed components.

I wonder if we should come up with a storybook for the branding theme. This might also be useful as a learning resource for users, since it's one of the most common ways to document a DS. What do you think?

[zanivan]

I think the error and warning variants should also have a background. It'd help with the contrast.

[danilo-leal]

Potentially, yeah, a Storybook instance for the brand-themed components would certainly be interesting! I don't know whether we have that infrastructure at the moment, but I can look into it later. As for the error and warning chips, I didn't mess with them right because they're not used at the moment (though there are opportunities to make use of them where we're customing colors by hand instead of using the color prop). 🤙