[Paper] Add support for CSS variables

[diggis00]

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

One of #32049

Preview: https://deploy-preview-32570--material-ui.netlify.app/experiments/material-ui/paper/

cc: @mui/contributors

[mui-bot]

Details of bundle changes

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

Generated by 🚫 dangerJS against fd9ad11

[siriwatknp]

We have to do something with this, otherwise, it does not work with SSR. Will propose something soon.

[mnajdova]

I knew that this will come back and hit us when we introduced it :)

[siriwatknp]

@diggis00 @mnajdova Please review the commit 5edd194

What I did is add a new node called overlays (as an array of 24 length same as shadows, but the value can be string | undefined which is more flexible in case developers does not need that many overlays)

• NOT a breaking change
• The overlays are added to experimental_extendTheme (we can consider adding it to createTheme as well)
• ✅ Works for SSR (try the preview and toggle dark mode, the className does not change)
• In light mode, the overlays are empty so the backgroundImage fallback to the initial (handled by CSS)
• Configurable

  extendTheme({
    colorSchemes: {
      dark: {
        overlays: [
          'none',
          'linear-gradient(rgba(255 255 255 / 0.1), rgba(255 255 255 / 0.1))',
          ...
        ]
      }
    }
  })

[mnajdova]

Nice! Great job both @diggis00 and @siriwatknp :)