general design tweaks

mui · Feb 2, 2024 · 0de3a88 · 0de3a88
1 parent 5e222b5
commit 0de3a88
Show file tree

Hide file tree

Showing 4 changed files with 51 additions and 68 deletions.
diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js
@@ -337,9 +337,12 @@ const DemoRootJoy = joyStyled('div', {
 const DemoCodeViewer = styled(HighlightedCode)(() => ({
   '& pre': {
     margin: 0,
+    marginTop: -1,
     maxHeight: 'min(68vh, 1000px)',
     maxWidth: 'initial',
     borderRadius: 0,
+    borderBottomLeftRadius: 12,
+    borderBottomRightRadius: 12,
   },
 }));
 
@@ -359,7 +362,7 @@ const InitialFocus = styled(IconButton)(({ theme }) => ({
 
 const selectionOverride = (theme) => ({
   '&.base--selected': {
-    color: '#FFF',
+    color: (theme.vars || theme).palette.primary[500],
     '&::after': {
       content: "''",
       position: 'absolute',
@@ -369,6 +372,9 @@ const selectionOverride = (theme) => ({
       width: '100%',
       bgcolor: (theme.vars || theme).palette.primary.light,
     },
+    ...theme.applyDarkStyles({
+      color: (theme.vars || theme).palette.primary[200],
+    }),
   },
 });
 

diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import SimpleCodeEditor from 'react-simple-code-editor';
 import Box from '@mui/material/Box';
 import { NoSsr } from '@mui/base/NoSsr';
-import { styled, useTheme } from '@mui/material/styles';
+import { styled, useTheme, alpha } from '@mui/material/styles';
 import prism from '@mui/markdown/prism';
 import MarkdownElement from 'docs/src/modules/components/MarkdownElement';
 import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton';
@@ -20,10 +20,10 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       border: `1px solid ${(theme.vars || theme).palette.divider}`,
       colorScheme: 'dark',
       '&:hover': {
-        boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primary.light}`,
+        boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.5)}`,
       },
       '&:focus-within': {
-        boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primary.main}`,
+        boxShadow: `0 0 0 3px ${alpha(theme.palette.primary[500], 0.8)}`,
       },
       [theme.breakpoints.up('sm')]: {
         borderRadius: '0 0 12px 12px',
@@ -36,17 +36,6 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => [
       maxHeight: 'initial',
     },
   },
-  theme.applyDarkStyles({
-    '& .scrollContainer': {
-      borderColor: (theme.vars || theme).palette.divider,
-      '&:hover': {
-        boxShadow: `0 0 0 3px ${(theme.vars || theme).palette.primaryDark[300]}`,
-      },
-      '&:focus-within': {
-        boxShadow: `0 0 0 2px ${(theme.vars || theme).palette.primaryDark[400]}`,
-      },
-    },
-  }),
 ]) as any;
 
 const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({

diff --git a/docs/src/modules/components/HighlightedCodeWithTabs.tsx b/docs/src/modules/components/HighlightedCodeWithTabs.tsx
@@ -7,22 +7,22 @@ import { Tab } from '@mui/base/Tab';
 import HighlightedCode from './HighlightedCode';
 
 export const StyledTabList = styled(TabsList)(({ theme }) => ({
-  padding: 6,
+  padding: theme.spacing(1),
   display: 'flex',
-  border: '1px solid',
-  borderColor: (theme.vars || theme).palette.primaryDark[700],
-  backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-  // borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-  // borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+  gap: theme.spacing(0.5),
+  borderLeft: '1px solid',
+  borderRight: '1px solid',
+  borderColor: (theme.vars || theme).palette.divider,
+  backgroundColor: alpha(theme.palette.grey[50], 0.2),
   ...theme.applyDarkStyles({
-    backgroundColor: alpha(theme.palette.primaryDark[800], 0.5),
+    backgroundColor: alpha(theme.palette.primaryDark[800], 0.2),
   }),
 }));
 
 export const StyledTabPanel = styled(TabPanel)<{ ownerState: { mounted: boolean } }>(
-  ({ ownerState }) => ({
+  ({ theme, ownerState }) => ({
+    marginTop: -1,
     '& pre': {
-      marginTop: -1,
       borderTopLeftRadius: 0,
       borderTopRightRadius: 0,
       '& code': {
@@ -32,54 +32,43 @@ export const StyledTabPanel = styled(TabPanel)<{ ownerState: { mounted: boolean
   }),
 );
 
-export const StyledTab = styled(Tab)<{ ownerState: { mounted: boolean } }>(
-  ({ theme, ownerState }) =>
-    theme.unstable_sx({
-      p: 0.8,
-      border: 'none',
-      bgcolor: 'transparent',
-      color: (theme.vars || theme).palette.grey[500],
-      fontSize: theme.typography.pxToRem(12),
-      fontWeight: theme.typography.fontWeightSemiBold,
-      fontFamily: theme.typography.fontFamilyCode,
-      outline: 'none',
-      minWidth: 52,
-      cursor: 'pointer',
-      borderRadius: '8px',
-      position: 'relative',
-      '&:not(:first-of-type)': {
-        marginLeft: 0.5,
-      },
-      ...(ownerState.mounted && {
-        '&.Mui-selected': {
-          color: '#FFF',
-          '&::after': {
-            content: "''",
-            position: 'absolute',
-            left: 0,
-            bottom: '-6px',
-            height: 2,
-            width: '100%',
-            bgcolor: (theme.vars || theme).palette.primary.light,
-          },
-        },
-      }),
-      '&:hover': {
-        backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
-      },
-      '&:focus-visible': {
-        outline: '2px solid',
-        outlineOffset: '-2px',
-        outlineColor: (theme.vars || theme).palette.primary.light,
-      },
-    }),
-);
+export const StyledTab = styled(Tab)(({ theme }) => ({
+  padding: '6px',
+  border: 'none',
+  background: 'transparent',
+  fontSize: theme.typography.pxToRem(13),
+  fontWeight: theme.typography.fontWeightSemiBold,
+  fontFamily: theme.typography.fontFamily,
+  color: (theme.vars || theme).palette.text.tertiary,
+  letterSpacing: '0.2px',
+  outline: 'none',
+  minWidth: 52,
+  borderRadius: '8px',
+  position: 'relative',
+  transition: 'background, color, 100ms ease',
+  '&:hover': {
+    backgroundColor: alpha(theme.palette.grey[100], 0.5),
+    color: (theme.vars || theme).palette.text.secondary,
+  },
+  '&:focus-visible': {
+    outline: '2px solid',
+    outlineOffset: '-2px',
+    outlineColor: (theme.vars || theme).palette.primary.light,
+  },
+  ...theme.applyDarkStyles({
+    '&:hover': {
+      backgroundColor: alpha(theme.palette.primaryDark[700], 0.6),
+      color: (theme.vars || theme).palette.grey[400],
+    },
+  }),
+}));
 
 type TabsConfig = {
   code: string | ((tab: string) => string);
   language: string;
   tab: string;
 };
+
 export default function HighlightedCodeWithTabs({
   tabs,
   storageKey,

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -26,8 +26,7 @@ const Root = styled('div')(
       borderRadius: `var(--muidocs-shape-borderRadius, ${
         theme.shape?.borderRadius ?? lightTheme.shape.borderRadius
       }px)`,
-      border: '1px solid',
-      borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`,
+      border: `1px solid ${(theme.vars || theme).palette.divider}`,
       overflow: 'auto',
       WebkitOverflowScrolling: 'touch',
       fontSize: lightTheme.typography.pxToRem(13),