[Joy] Uplift introduction demos & make consistent with Base

[danilo-leal]

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

As this is still in draft, here are a couple of stray thoughts that have come up so far:

• Any Joy-related demos are using Joy's palette. Do we want to continue doing that for the demo container? I'm sensing that for the sake of consistency, we should probably just leave the components using Joy's theme and the whole documentation using the branding theme (if we don't end up changing the docs styling depending on the product you're currently visualizing). cc @siriwatknp for early opinions!
  • The way I'm doing the declarations for light and dark mode is still using ternaries, which isn't something we're recommending doing on Joy. However, I don't want to add any styles that are for the documentation in the actual theme. Don't know how to do it differently at this moment.
• There might be a more interesting way to format the component demo / code snippet / playground block. Might experiment with that a bit more.
• Getting a bit confused as to why the hiddenToolbar variant adds a few padding tops here and there (they've been removed so far, for Joy's demos).

[mui-bot]

	Messages
:book:	Netlify deploy preview: https://deploy-preview-34316--material-ui.netlify.app/

No bundle size changes

Generated by :no_entry_sign: dangerJS against 338078fe21c55a0eee5c857a64e4a1e2165c9f4f

[siriwatknp]

🤩

[siriwatknp]

@danilo-leal To make Joy demo's background the same as other products, let's use the branding colors directly. It looks something like this:

diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
index 95e9d8e180..7c03d5f4aa 100644
--- a/docs/src/modules/components/Demo.js
+++ b/docs/src/modules/components/Demo.js
@@ -13,6 +13,7 @@ import { useCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { CODE_VARIANTS } from 'docs/src/modules/constants';
 import { useUserLanguage, useTranslate } from 'docs/src/modules/utils/i18n';
 import BrandingProvider from 'docs/src/BrandingProvider';
+import { blue, blueDark } from 'docs/src/modules/brandingTheme';
 
 const DemoToolbar = React.lazy(() => import('./DemoToolbar'));
 // Sync with styles from DemoToolbar
@@ -220,28 +221,23 @@ const DemoRootJoy = joyStyled('div', {
   ...(bg === 'gradient' && {
     padding: theme.spacing(0),
     overflow: 'auto',
-    backgroundColor:
-      theme.palette.mode === 'dark'
-        ? theme.vars.palette.primary[900]
-        : alpha(theme.palette.primary[50], 0.5),
+    backgroundColor: theme.palette.mode === 'dark' ? blueDark[800] : alpha(blue[50], 0.5),
     border: `1px solid ${
-      theme.palette.mode === 'dark'
-        ? theme.vars.palette.primary[800]
-        : theme.vars.palette.primary[100]
+      theme.palette.mode === 'dark' ? alpha(blueDark[500], 0.7) : alpha(blue[100], 0.5)
     }`,
     backgroundImage:
       theme.palette.mode === 'dark'
-        ? `radial-gradient(at 35% 50%, ${theme.vars.palette.primary[800]} 0px, transparent 50%),
-          radial-gradient(at 80% 0%, ${theme.vars.palette.primary[700]} 0px, transparent 50%),
-          radial-gradient(at 0% 95%, ${theme.vars.palette.primary[700]} 0px, transparent 50%),
-          radial-gradient(at 0% 20%, ${theme.vars.palette.primary[800]} 0px, transparent 35%),
-          radial-gradient(at 93% 85%, ${theme.vars.palette.primary[800]} 0px, transparent 50%), 
+        ? `radial-gradient(at 35% 50%, ${blue[800]} 0px, transparent 50%),
+          radial-gradient(at 80% 0%, ${blue[700]} 0px, transparent 50%),
+          radial-gradient(at 0% 95%, ${blue[700]} 0px, transparent 50%),
+          radial-gradient(at 0% 20%, ${blue[800]} 0px, transparent 35%),
+          radial-gradient(at 93% 85%, ${blue[800]} 0px, transparent 50%), 
           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%23096BDE' fill-opacity='0.15'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`
-        : `radial-gradient(at 35% 50%, ${theme.vars.palette.primary[100]} 0px, transparent 50%),
+        : `radial-gradient(at 35% 50%, ${blue[100]} 0px, transparent 50%),
           radial-gradient(at 80% 0%, #FFFFFF 0px, transparent 20%),
-          radial-gradient(at 0% 95%, ${theme.vars.palette.primary[100]}, transparent 40%),
-          radial-gradient(at 0% 20%, ${theme.vars.palette.primary[50]} 0px, transparent 50%), 
-          radial-gradient(at 93% 85%, ${theme.vars.palette.primary[100]} 0px, transparent 50%), 
+          radial-gradient(at 0% 95%, ${blue[100]}, transparent 40%),
+          radial-gradient(at 0% 20%, ${blue[50]} 0px, transparent 50%), 
+          radial-gradient(at 93% 85%, ${blue[100]} 0px, transparent 50%), 
           url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%233990FF' fill-opacity='0.13'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");`,
   }),
   ...(hiddenToolbar && {