[docs] Stray design tweaks to Base UI demos (mui#37003)

binh1298 · May 17, 2023 · b7ab6e3 · b7ab6e3
1 parent 4afb0ea
commit b7ab6e3
Show file tree

Hide file tree

Showing 65 changed files with 1,389 additions and 333 deletions.
diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction.js
@@ -2,6 +2,17 @@ import * as React from 'react';
 import { styled, Box } from '@mui/system';
 import Badge, { badgeClasses } from '@mui/base/Badge';
 
+const blue = {
+  100: '#DAECFF',
+  500: '#007FFF',
+  900: '#003A75',
+};
+
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
 function BadgeContent() {
   return (
     <Box
@@ -11,7 +22,7 @@ function BadgeContent() {
         height: 40,
         borderRadius: '12px',
         background: (theme) =>
-          theme.palette.mode === 'dark' ? grey[400] : grey[300],
+          theme.palette.mode === 'dark' ? grey[700] : grey[200],
         display: 'inline-block',
         verticalAlign: 'middle',
       }}
@@ -27,16 +38,6 @@ export default function UnstyledBadgeIntroduction() {
   );
 }
 
-const blue = {
-  500: '#007FFF',
-};
-
-const grey = {
-  300: '#afb8c1',
-  400: '#bdbdbd',
-  900: '#24292f',
-};
-
 const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
@@ -66,8 +67,8 @@ const StyledBadge = styled(Badge)(
     text-align: center;
     border-radius: 12px;
     background: ${blue[500]};
-    box-shadow: 0px 4px 16px ${
-      theme.palette.mode === 'dark' ? grey[900] : grey[300]
+    box-shadow: 0px 2px 24px ${
+      theme.palette.mode === 'dark' ? blue[900] : blue[100]
     };
     transform: translate(50%, -50%);
     transform-origin: 100% 0;

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx b/docs/data/base/components/badge/UnstyledBadgeIntroduction.tsx
@@ -2,6 +2,17 @@ import * as React from 'react';
 import { styled, Box } from '@mui/system';
 import Badge, { badgeClasses } from '@mui/base/Badge';
 
+const blue = {
+  100: '#DAECFF',
+  500: '#007FFF',
+  900: '#003A75',
+};
+
+const grey = {
+  200: '#d0d7de',
+  700: '#424a53',
+};
+
 function BadgeContent() {
   return (
     <Box
@@ -11,7 +22,7 @@ function BadgeContent() {
         height: 40,
         borderRadius: '12px',
         background: (theme) =>
-          theme.palette.mode === 'dark' ? grey[400] : grey[300],
+          theme.palette.mode === 'dark' ? grey[700] : grey[200],
         display: 'inline-block',
         verticalAlign: 'middle',
       }}
@@ -27,16 +38,6 @@ export default function UnstyledBadgeIntroduction() {
   );
 }
 
-const blue = {
-  500: '#007FFF',
-};
-
-const grey = {
-  300: '#afb8c1',
-  400: '#bdbdbd',
-  900: '#24292f',
-};
-
 const StyledBadge = styled(Badge)(
   ({ theme }) => `
   box-sizing: border-box;
@@ -66,8 +67,8 @@ const StyledBadge = styled(Badge)(
     text-align: center;
     border-radius: 12px;
     background: ${blue[500]};
-    box-shadow: 0px 4px 16px ${
-      theme.palette.mode === 'dark' ? grey[900] : grey[300]
+    box-shadow: 0px 2px 24px ${
+      theme.palette.mode === 'dark' ? blue[900] : blue[100]
     };
     transform: translate(50%, -50%);
     transform-origin: 100% 0;

diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.js b/docs/data/base/components/input/UnstyledInputIntroduction.js
@@ -16,6 +16,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  900: '#003A75',
 };
 
 const grey = {
@@ -43,15 +44,15 @@ const StyledInputElement = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
 
   &:hover {
     border-color: ${blue[400]};
   }
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   // firefox

diff --git a/docs/data/base/components/input/UnstyledInputIntroduction.tsx b/docs/data/base/components/input/UnstyledInputIntroduction.tsx
@@ -19,6 +19,7 @@ const blue = {
   400: '#3399FF',
   500: '#007FFF',
   600: '#0072E5',
+  900: '#003A75',
 };
 
 const grey = {
@@ -46,15 +47,15 @@ const StyledInputElement = styled('input')(
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
 
   &:hover {
     border-color: ${blue[400]};
   }
 
   &:focus {
     border-color: ${blue[400]};
-    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[600] : blue[200]};
   }
 
   // firefox

diff --git a/docs/data/base/components/menu/MenuSimple.js b/docs/data/base/components/menu/MenuSimple.js
@@ -133,7 +133,7 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 16px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   `,
 );
 
@@ -173,7 +173,7 @@ const TriggerButton = styled(Button)(
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 8px 14px;
   line-height: 1.5;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};

diff --git a/docs/data/base/components/menu/MenuSimple.tsx b/docs/data/base/components/menu/MenuSimple.tsx
@@ -134,7 +134,7 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 16px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   `,
 );
 
@@ -174,7 +174,7 @@ const TriggerButton = styled(Button)(
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 8px 14px;
   line-height: 1.5;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};

diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.js b/docs/data/base/components/menu/UnstyledMenuIntroduction.js
@@ -69,7 +69,7 @@ export default function UnstyledMenuIntroduction() {
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
       >
-        My account
+        Open my account
       </TriggerButton>
       <Menu
         actions={menuActions}
@@ -168,10 +168,11 @@ const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
+  font-weight: 600;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 8px 14px;
   line-height: 1.5;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};

diff --git a/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx b/docs/data/base/components/menu/UnstyledMenuIntroduction.tsx
@@ -70,7 +70,7 @@ export default function UnstyledMenuIntroduction() {
         aria-expanded={isOpen || undefined}
         aria-haspopup="menu"
       >
-        My account
+        Open my account
       </TriggerButton>
       <Menu
         actions={menuActions}
@@ -169,10 +169,11 @@ const TriggerButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
   font-size: 0.875rem;
+  font-weight: 600;
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 8px 14px;
   line-height: 1.5;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};

diff --git a/docs/data/base/components/menu/UseMenu.js b/docs/data/base/components/menu/UseMenu.js
@@ -162,17 +162,19 @@ const styles = `
     margin: 10px 0;
     min-width: 200px;
     background: #fff;
-    border: 1px solid ${grey[300]};
+    border: 1px solid ${grey[200]};
     border-radius: 0.75em;
     color: ${grey[900]};
     overflow: auto;
     outline: 0px;
+    box-shadow: 0px 2px 16px ${grey[200]};
   }
 
   .mode-dark .menu-root {
     background: ${grey[900]};
     border-color: ${grey[700]};
     color: ${grey[300]};
+    box-shadow: 0px 2px 16px ${grey[900]};
   }
 
   .menu-item {
@@ -222,7 +224,7 @@ const styles = `
     box-sizing: border-box;
     min-height: calc(1.5em + 22px);
     border-radius: 12px;
-    padding: 12px 16px;
+    padding: 8px 14px;
     line-height: 1.5;
     background: #fff;
     border: 1px solid ${grey[200]};

diff --git a/docs/data/base/components/menu/UseMenu.tsx b/docs/data/base/components/menu/UseMenu.tsx
@@ -160,17 +160,19 @@ const styles = `
     margin: 10px 0;
     min-width: 200px;
     background: #fff;
-    border: 1px solid ${grey[300]};
+    border: 1px solid ${grey[200]};
     border-radius: 0.75em;
     color: ${grey[900]};
     overflow: auto;
     outline: 0px;
+    box-shadow: 0px 2px 16px ${grey[200]};
   }
 
   .mode-dark .menu-root {
     background: ${grey[900]};
     border-color: ${grey[700]};
     color: ${grey[300]};
+    box-shadow: 0px 2px 16px ${grey[900]};
   }
 
   .menu-item {
@@ -220,7 +222,7 @@ const styles = `
     box-sizing: border-box;
     min-height: calc(1.5em + 22px);
     border-radius: 12px;
-    padding: 12px 16px;
+    padding: 8px 14px;
     line-height: 1.5;
     background: #fff;
     border: 1px solid ${grey[200]};

diff --git a/docs/data/base/components/menu/WrappedMenuItems.js b/docs/data/base/components/menu/WrappedMenuItems.js
@@ -166,7 +166,7 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 16px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   `,
 );
 
@@ -206,7 +206,7 @@ const TriggerButton = styled(Button)(
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 8px 14px;
   line-height: 1.5;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};

diff --git a/docs/data/base/components/menu/WrappedMenuItems.tsx b/docs/data/base/components/menu/WrappedMenuItems.tsx
@@ -161,7 +161,7 @@ const StyledListbox = styled('ul')(
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
+  box-shadow: 0px 2px 16px ${theme.palette.mode === 'dark' ? grey[900] : grey[200]};
   `,
 );
 
@@ -201,7 +201,7 @@ const TriggerButton = styled(Button)(
   box-sizing: border-box;
   min-height: calc(1.5em + 22px);
   border-radius: 12px;
-  padding: 12px 16px;
+  padding: 8px 14px;
   line-height: 1.5;
   background: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};