improve the default theme viewer design

danilo-leal · Sep 19, 2023 · 920ad86 · 920ad86
1 parent 1ad6d26
commit 920ad86
Show file tree

Hide file tree

Showing 6 changed files with 70 additions and 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
@@ -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
@@ -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
@@ -1,23 +1,19 @@
 # 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,
 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
@@ -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
@@ -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
@@ -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 (