[docs] Add Joy default theme viewer

docs/data/joy/customization/approaches/approaches.md

@@ -25,7 +25,7 @@ Here are some examples that reproduce popular designs (only the light mode, thou
 
 ### Customizing theme tokens
 
-Theme tokens refer to both [_low-level_ and _global variant_ design tokens](/joy-ui/customization/theme-tokens/).
+Theme tokens refer to both _low-level_ and _global variant_ design tokens.
 
 For example, instead of assigning the same hex code every time you want to change a given component's background color, you assign a theme token instead.
 If, at any point, you want to change that, you'd change in one place only, ensuring you consistency across all the components that use that theme token.

docs/data/joy/customization/default-theme-viewer/JoyDefaultTheme.js

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { extendTheme } from '@mui/joy/styles';
+import Box from '@mui/joy/Box';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import ThemeViewer, {
+  useNodeIdsLazy,
+} from 'docs/src/modules/components/ThemeViewer';
+
+const defaultTheme = extendTheme();
+
+export default function JoyDefaultTheme() {
+  const [expandPaths, setExpandPaths] = React.useState(null);
+
+  React.useEffect(() => {
+    let expandPath;
+    decodeURI(document.location.search.slice(1))
+      .split('&')
+      .forEach((param) => {
+        const [name, value] = param.split('=');
+        if (name === 'expand-path') {
+          expandPath = value;
+        }
+      });
+
+    if (!expandPath) {
+      return;
+    }
+
+    setExpandPaths(
+      expandPath
+        .replace('$.', '')
+        .split('.')
+        .reduce((acc, path) => {
+          const last = acc.length > 0 ? `${acc[acc.length - 1]}.` : '';
+          acc.push(last + path);
+          return acc;
+        }, []),
+    );
+  }, []);
+
+  const data = defaultTheme;
+  const allNodeIds = useNodeIdsLazy(data);
+  React.useDebugValue(allNodeIds);
+
+  return (
+    <Box sx={{ width: '100%' }}>
+      <ThemeProvider theme={() => createTheme()}>
+        <ThemeViewer data={data} expandPaths={expandPaths} />
+      </ThemeProvider>
+    </Box>
+  );
+}

docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md

@@ -0,0 +1,15 @@
+# Default theme viewer
+
+<p class="description">Here's what 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:
+
+{{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
+
+To create your own theme, starts with customizing the [theme colors](/joy-ui/customization/theme-colors/).