From 920ad86d551fd23cbb3f280d66c3071951a96baf Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 18 Sep 2023 21:12:24 -0300
Subject: [PATCH 1/8] improve the default theme viewer design

---
 .../default-theme-viewer.md                   | 10 ++-
 .../default-theme/DefaultTheme.js             | 68 ++++++++++++-------
 .../default-theme/default-theme.md            | 16 ++---
 .../customization/default-theme-viewer.js     |  2 +-
 .../customization/default-theme.js            |  2 +-
 docs/src/modules/components/ThemeViewer.tsx   | 17 ++++-
 6 files changed, 70 insertions(+), 45 deletions(-)

diff --git a/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md
index 73e3bff69c90d8..a40bf74898eae8 100644
--- a/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md
+++ b/docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md
@@ -1,15 +1,13 @@
 # Default theme viewer
 
-<p class="description">Here's what the theme object looks like with the default values.</p>
+<p class="description">Check out how the theme object looks like with the default values.</p>
 
 :::warning
 This is a work in progress. We're still iterating on Joy UI's default theme.
 :::
 
-## Explore
-
-Explore the default theme:
+:::info
+To create your own theme, start by customizing the [theme colors](/joy-ui/customization/theme-colors/).
+:::
 
 {{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
-
-To create your own theme, starts with customizing the [theme colors](/joy-ui/customization/theme-colors/).
diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js
index 65896c27791d1c..07c05354bbe514 100644
--- a/docs/data/material/customization/default-theme/DefaultTheme.js
+++ b/docs/data/material/customization/default-theme/DefaultTheme.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
+import Divider from '@mui/material/Divider';
 import { createTheme } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -58,31 +59,48 @@ function DefaultTheme() {
 
   return (
     <Box sx={{ width: '100%' }}>
-      <FormControlLabel
-        sx={{ pb: 1 }}
-        control={
-          <Switch
-            checked={checked}
-            onChange={(event) => {
-              setChecked(event.target.checked);
-              setExpandPaths(event.target.checked ? allNodeIds : []);
-            }}
-          />
-        }
-        label={t('expandAll')}
-      />
-      <FormControlLabel
-        sx={{ pb: 1 }}
-        control={
-          <Switch
-            checked={darkTheme}
-            onChange={(event) => {
-              setDarkTheme(event.target.checked);
-            }}
-          />
-        }
-        label={t('useDarkTheme')}
-      />
+      <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+        <FormControlLabel
+          label={t('expandAll')}
+          sx={{
+            m: 0,
+            flexDirection: 'row-reverse',
+            gap: 1,
+            fontFamily: 'IBM Plex Sans',
+            color: 'text.secondary',
+          }}
+          control={
+            <Switch
+              size="small"
+              checked={checked}
+              onChange={(event) => {
+                setChecked(event.target.checked);
+                setExpandPaths(event.target.checked ? allNodeIds : []);
+              }}
+            />
+          }
+        />
+        <Divider orientation="vertical" flexItem />
+        <FormControlLabel
+          label={t('useDarkTheme')}
+          sx={{
+            m: 0,
+            flexDirection: 'row-reverse',
+            gap: 1,
+            fontFamily: 'IBM Plex Sans',
+            color: 'text.secondary',
+          }}
+          control={
+            <Switch
+              size="small"
+              checked={darkTheme}
+              onChange={(event) => {
+                setDarkTheme(event.target.checked);
+              }}
+            />
+          }
+        />
+      </Box>
       <ThemeViewer data={data} expandPaths={expandPaths} />
     </Box>
   );
diff --git a/docs/data/material/customization/default-theme/default-theme.md b/docs/data/material/customization/default-theme/default-theme.md
index 9cd0a0072de126..2af560cc3f6c07 100644
--- a/docs/data/material/customization/default-theme/default-theme.md
+++ b/docs/data/material/customization/default-theme/default-theme.md
@@ -1,12 +1,9 @@
 # Default theme viewer
 
-<p class="description">Here's what the theme object looks like with the default values.</p>
+<p class="description">Check out how the theme object looks like with the default values.</p>
 
-## Explore
-
-Explore the default theme object:
-
-{{"demo": "DefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
+If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.js`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.js),
+and the related imports which `createTheme` uses.
 
 :::success
 You can play with the documentation theme object in your browser console,
@@ -14,10 +11,9 @@ as the `theme` variable is exposed on all the documentation pages.
 :::
 
 :::warning
-Please note that **the documentation site is using a custom theme**.
+Please note that **the documentation site is using a custom theme** (MUI's branding).
 :::
 
-<!-- #default-branch-switch -->
+<hr/>
 
-If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createTheme.js`](https://github.com/mui/material-ui/blob/-/packages/mui-material/src/styles/createTheme.js),
-and the related imports which `createTheme` uses.
+{{"demo": "DefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
diff --git a/docs/pages/joy-ui/customization/default-theme-viewer.js b/docs/pages/joy-ui/customization/default-theme-viewer.js
index f9d7d1f31db2ec..363dcad36672f4 100644
--- a/docs/pages/joy-ui/customization/default-theme-viewer.js
+++ b/docs/pages/joy-ui/customization/default-theme-viewer.js
@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} disableToc />;
 }
diff --git a/docs/pages/material-ui/customization/default-theme.js b/docs/pages/material-ui/customization/default-theme.js
index 12eb3b936ed344..de6a628f17fe7c 100644
--- a/docs/pages/material-ui/customization/default-theme.js
+++ b/docs/pages/material-ui/customization/default-theme.js
@@ -3,5 +3,5 @@ import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 import * as pageProps from 'docs/data/material/customization/default-theme/default-theme.md?@mui/markdown';
 
 export default function Page() {
-  return <MarkdownDocs {...pageProps} />;
+  return <MarkdownDocs {...pageProps} disableToc />;
 }
diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 02fcc9884c994b..406692083e34cf 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -103,8 +103,14 @@ const TreeItem = styled(MuiTreeItem)({
     outline: `2px dashed ${lighten('#333', 0.3)}`,
   },
   [`& .${treeItemClasses.content}`]: {
+    padding: 4,
+    borderRadius: 4,
     '&:hover': {
-      backgroundColor: lighten('#333', 0.08),
+      backgroundColor: '#101418',
+    },
+    [`& .${treeItemClasses.label}`]: {
+      fontFamily: 'Menlo',
+      fontSize: '0.825rem',
     },
   },
 });
@@ -189,13 +195,20 @@ export default function ThemeViewer({
 
   return (
     <TreeView
-      sx={{ bgcolor: '#333', color: '#fff', borderRadius: 1, p: 1 }}
       key={key}
       defaultCollapseIcon={<ExpandIcon />}
       defaultEndIcon={<div style={{ width: 24 }} />}
       defaultExpanded={defaultExpanded}
       defaultExpandIcon={<CollapseIcon />}
       {...other}
+      sx={{
+        color: '#FFF',
+        p: 1.5,
+        bgcolor: '#0F1924', // one-off code container color
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: '#1F262E', // primaryDark[700]
+      }}
     >
       {Object.keys(data).map((objectKey) => {
         return (

From 3c184c2410a7911b9ebcee60d89e09fa2e0bf7c2 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 18 Sep 2023 21:51:56 -0300
Subject: [PATCH 2/8] consistent border radius

---
 docs/src/modules/components/ThemeViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 406692083e34cf..ad29779bd4b794 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -104,7 +104,7 @@ const TreeItem = styled(MuiTreeItem)({
   },
   [`& .${treeItemClasses.content}`]: {
     padding: 4,
-    borderRadius: 4,
+    borderRadius: '12px',
     '&:hover': {
       backgroundColor: '#101418',
     },

From d73a82296abb33fd40e496478d2afe59ea7ce12f Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 18 Sep 2023 21:55:11 -0300
Subject: [PATCH 3/8] small details

---
 docs/src/modules/components/ThemeViewer.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index ad29779bd4b794..98b8148099ec2d 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -106,7 +106,7 @@ const TreeItem = styled(MuiTreeItem)({
     padding: 4,
     borderRadius: '12px',
     '&:hover': {
-      backgroundColor: '#101418',
+      backgroundColor: '#101418', // primaryDark[900]
     },
     [`& .${treeItemClasses.label}`]: {
       fontFamily: 'Menlo',
@@ -205,7 +205,7 @@ export default function ThemeViewer({
         color: '#FFF',
         p: 1.5,
         bgcolor: '#0F1924', // one-off code container color
-        borderRadius: 2,
+        borderRadius: 4,
         border: '1px solid',
         borderColor: '#1F262E', // primaryDark[700]
       }}

From 8ed06d5faf28873f93da68059283b53e250eabd6 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 19 Sep 2023 09:29:17 -0300
Subject: [PATCH 4/8] typography and color polish

---
 .../material/customization/default-theme/DefaultTheme.js    | 6 ++++--
 docs/src/modules/components/ThemeViewer.tsx                 | 6 +++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js
index 07c05354bbe514..ab2fab48686766 100644
--- a/docs/data/material/customization/default-theme/DefaultTheme.js
+++ b/docs/data/material/customization/default-theme/DefaultTheme.js
@@ -66,8 +66,10 @@ function DefaultTheme() {
             m: 0,
             flexDirection: 'row-reverse',
             gap: 1,
-            fontFamily: 'IBM Plex Sans',
-            color: 'text.secondary',
+            '&.MuiFormControlLabel-root': {
+              fontFamily: 'IBM Plex Sans',
+              color: 'text.secondary',
+            },
           }}
           control={
             <Switch
diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 98b8148099ec2d..177812d837230e 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -99,14 +99,14 @@ function ObjectEntryLabel(props: { objectKey: string; objectValue: any }) {
 
 const TreeItem = styled(MuiTreeItem)({
   [`&:focus > .${treeItemClasses.content}`]: {
-    backgroundColor: lighten('#333', 0.08),
-    outline: `2px dashed ${lighten('#333', 0.3)}`,
+    backgroundColor: lighten('#003A75', 0.05), // primary[900]
+    outline: `2px dashed ${lighten('#003A75', 0.3)}`, // primary[900]
   },
   [`& .${treeItemClasses.content}`]: {
     padding: 4,
     borderRadius: '12px',
     '&:hover': {
-      backgroundColor: '#101418', // primaryDark[900]
+      backgroundColor: lighten('#101418', 0.1), // primaryDark[900]
     },
     [`& .${treeItemClasses.label}`]: {
       fontFamily: 'Menlo',

From 0f4d3bd9fbf3e1de4975db8d77dd20e604b85330 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 19 Sep 2023 18:13:56 -0300
Subject: [PATCH 5/8] correct border radius

---
 docs/src/modules/components/ThemeViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 177812d837230e..b5e7163fb10e1c 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -205,7 +205,7 @@ export default function ThemeViewer({
         color: '#FFF',
         p: 1.5,
         bgcolor: '#0F1924', // one-off code container color
-        borderRadius: 4,
+        borderRadius: 3,
         border: '1px solid',
         borderColor: '#1F262E', // primaryDark[700]
       }}

From 8bfeb2973762cdd2e8593f9c5c906738809d13e3 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 20 Sep 2023 22:53:40 -0300
Subject: [PATCH 6/8] using actual tokens from the branding theme

---
 docs/src/modules/components/ThemeViewer.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index b5e7163fb10e1c..464df575420b51 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -7,6 +7,7 @@ import CollapseIcon from '@mui/icons-material/ChevronRight';
 import { TreeView } from '@mui/x-tree-view/TreeView';
 import { TreeItem as MuiTreeItem, treeItemClasses } from '@mui/x-tree-view/TreeItem';
 import { lighten } from '@mui/material/styles';
+import { blue, blueDark } from 'docs/src/modules/brandingTheme';
 
 function getType(value: any) {
   if (Array.isArray(value)) {
@@ -99,14 +100,14 @@ function ObjectEntryLabel(props: { objectKey: string; objectValue: any }) {
 
 const TreeItem = styled(MuiTreeItem)({
   [`&:focus > .${treeItemClasses.content}`]: {
-    backgroundColor: lighten('#003A75', 0.05), // primary[900]
-    outline: `2px dashed ${lighten('#003A75', 0.3)}`, // primary[900]
+    backgroundColor: lighten(blue[900], 0.05),
+    outline: `2px dashed ${lighten(blue[900], 0.3)}`,
   },
   [`& .${treeItemClasses.content}`]: {
     padding: 4,
     borderRadius: '12px',
     '&:hover': {
-      backgroundColor: lighten('#101418', 0.1), // primaryDark[900]
+      backgroundColor: lighten(blueDark[900], 0.1),
     },
     [`& .${treeItemClasses.label}`]: {
       fontFamily: 'Menlo',
@@ -207,7 +208,7 @@ export default function ThemeViewer({
         bgcolor: '#0F1924', // one-off code container color
         borderRadius: 3,
         border: '1px solid',
-        borderColor: '#1F262E', // primaryDark[700]
+        borderColor: blueDark[700],
       }}
     >
       {Object.keys(data).map((objectKey) => {

From 75a8129e7c2d164ec7d6e735b3af12eb58a9403e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 20 Sep 2023 23:03:24 -0300
Subject: [PATCH 7/8] add Consolas as a font family

---
 docs/src/modules/components/ThemeViewer.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/src/modules/components/ThemeViewer.tsx b/docs/src/modules/components/ThemeViewer.tsx
index 464df575420b51..0c7bcd9b035a3a 100644
--- a/docs/src/modules/components/ThemeViewer.tsx
+++ b/docs/src/modules/components/ThemeViewer.tsx
@@ -110,7 +110,7 @@ const TreeItem = styled(MuiTreeItem)({
       backgroundColor: lighten(blueDark[900], 0.1),
     },
     [`& .${treeItemClasses.label}`]: {
-      fontFamily: 'Menlo',
+      fontFamily: 'Menlo, Consolas',
       fontSize: '0.825rem',
     },
   },

From b8ce8806ef53b8993f339f0f0ab79445d11b75a7 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Fri, 22 Sep 2023 07:57:00 -0300
Subject: [PATCH 8/8] customize the Switch and fix label font family

---
 .../default-theme/DefaultTheme.js             | 70 +++++++++++++++++--
 1 file changed, 64 insertions(+), 6 deletions(-)

diff --git a/docs/data/material/customization/default-theme/DefaultTheme.js b/docs/data/material/customization/default-theme/DefaultTheme.js
index ab2fab48686766..86df7d9295d62b 100644
--- a/docs/data/material/customization/default-theme/DefaultTheme.js
+++ b/docs/data/material/customization/default-theme/DefaultTheme.js
@@ -1,13 +1,69 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import Divider from '@mui/material/Divider';
-import { createTheme } from '@mui/material/styles';
+import { createTheme, styled } from '@mui/material/styles';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import ThemeViewer, {
   useNodeIdsLazy,
 } from 'docs/src/modules/components/ThemeViewer';
+import { blue, grey } from 'docs/src/modules/brandingTheme';
+
+const StyledSwitch = styled(Switch)(({ theme }) => [
+  {
+    display: 'flex',
+    padding: 0,
+    width: 32,
+    height: 20,
+    borderRadius: 99,
+    '&:active': {
+      '& .MuiSwitch-thumb': {
+        width: 16,
+      },
+      '& .MuiSwitch-switchBase.Mui-checked': {
+        transform: 'translateX(9px)',
+      },
+    },
+    '& .MuiSwitch-switchBase': {
+      padding: 2,
+      '&.Mui-checked': {
+        transform: 'translateX(12px)',
+        color: '#FFF',
+        '& + .MuiSwitch-track': {
+          opacity: 1,
+          backgroundColor: blue[500],
+        },
+      },
+    },
+    '& .MuiSwitch-thumb': {
+      width: 16,
+      height: 16,
+      borderRadius: 99,
+      transition: theme.transitions.create(['width'], {
+        duration: 200,
+      }),
+    },
+    '& .MuiSwitch-track': {
+      borderRadius: 16 / 2,
+      opacity: 1,
+      backgroundColor: grey[400],
+      boxSizing: 'border-box',
+    },
+    [`:where(${theme.vars ? '[data-mui-color-scheme="dark"]' : '.mode-dark'}) &`]: {
+      '& .MuiSwitch-switchBase': {
+        '&.Mui-checked': {
+          '& + .MuiSwitch-track': {
+            backgroundColor: blue[500],
+          },
+        },
+      },
+      '& .MuiSwitch-track': {
+        backgroundColor: grey[700],
+      },
+    },
+  },
+]);
 
 function DefaultTheme() {
   const [checked, setChecked] = React.useState(false);
@@ -66,13 +122,13 @@ function DefaultTheme() {
             m: 0,
             flexDirection: 'row-reverse',
             gap: 1,
-            '&.MuiFormControlLabel-root': {
+            '& .MuiFormControlLabel-label': {
               fontFamily: 'IBM Plex Sans',
               color: 'text.secondary',
             },
           }}
           control={
-            <Switch
+            <StyledSwitch
               size="small"
               checked={checked}
               onChange={(event) => {
@@ -89,11 +145,13 @@ function DefaultTheme() {
             m: 0,
             flexDirection: 'row-reverse',
             gap: 1,
-            fontFamily: 'IBM Plex Sans',
-            color: 'text.secondary',
+            '& .MuiFormControlLabel-label': {
+              fontFamily: 'IBM Plex Sans',
+              color: 'text.secondary',
+            },
           }}
           control={
-            <Switch
+            <StyledSwitch
               size="small"
               checked={darkTheme}
               onChange={(event) => {