[website] Migrate Pricing page to use CSS theme variables

[trizotti]

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

One of the tasks from #34880

[mui-bot]

	Messages
📖	Netlify deploy preview: https://deploy-preview-34917--material-ui.netlify.app/

No bundle size changes

Generated by 🚫 dangerJS against 577470a

[oliviertassinari]

Nice, this solves this bug:

https://deploy-preview-33545--material-ui.netlify.app/pricing/ (bug introduced in #33545)

@siriwatknp I think that it could be valuable to have the e2e tests that we run on the docs to take screenshots and push them to Argos CI. We have increasingly more room for visual regressions beyond the demos.

One way to pull it off, we could build the docs in CircleCI, and run the e2e tests on CircleCI rather than on Netlify to take the screenshots, and have a later stage that pushes to Argos CI.

[siriwatknp]

@siriwatknp I think that it could be valuable to have the e2e tests that we run on the docs to take screenshots and push them to Argos CI. We have increasingly more room for visual regressions beyond the demos.

One way to pull it off, we could build the docs in CircleCI, and run the e2e tests on CircleCI rather than on Netlify to take the screenshots, and have a later stage that pushes to Argos CI.

Added to the docs infra idea. I think the other way of doing the visual regression is to extract our docs into smaller pieces and run the visual regression, e.g. having docs component in the storybook using chromatic to run the visual regression so that the CIs does not slow down the core products.

[oliviertassinari]

@siriwatknp Thanks, maybe a GitHub issue would be enough in our case. I'm not sure when Notion or GitHub is best. In any case, it's borderline between website and docs-infra

is to extract our docs into smaller pieces and run the visual regression

It's doable with the existing infrastructure but, I would imagine that it's:

1. more incremental work. We would have to handpick which components to test when we could take a fullpage screenshot
2. less reliable. In our case, the issue was from globals side effects of CSS/React context inheritance. We could have more trust in an e2e screenshot.