fix: adapt button colors when contained+inherit

[jesrodri]

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

co-authored: @EduardoSCosta

This PR resolve #29749

[mui-bot]

Netlify deploy preview

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

@material-ui/core: parsed: +0.08% , gzip: +0.05%

Bundle size report

Details of bundle changes

Generated by :no_entry_sign: dangerJS against 5abef5af3e2261f85cf64a93111c24ae5db4c610

[jesrodri]

@danilo-leal @mnajdova could you guys take a look at this please?

[siriwatknp]

I will take a look at this tomorrow! thanks for the fix.

[mnajdova]

Thanks for looking into this. I would probably make the background a bit lighter in light mode. Also, could you please add a regression test for this? Using the codsandbox linked in the issue can be a great start: https://codesandbox.io/s/togglecolormode-material-demo-forked-1j544?file=/demo.js You can add the fixture here: https://github.com/mui/material-ui/tree/master/test/regressions/fixtures/Button

[mnajdova]

Looks like these changes affect both light and dark modes, should this be improved in v6? @mnajdova

Good point, maybe we should focus on changing only dark mode in this PR.

[feliperli]

Hey @siriwatknp @mnajdova @danilo-leal , I'm Jessica's friend and will be dealing with this PR for now on :) I've added the regression test based on MultilineButton and the demo you guys pointed above, hope I get it right. I've also changed the dark mode color to darker and the light mode to lighter

Mention me for futher feedback :) Thanks!