[docs] Base components demos design polish (mui#30149)

Co-authored-by: siriwatknp <[email protected]>
andriy-shymkiv · Dec 20, 2021 · 2d469f4 · 2d469f4
1 parent a770a90
commit 2d469f4
Show file tree

Hide file tree

Showing 23 changed files with 835 additions and 224 deletions.
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -14,5 +14,7 @@ module.exports = {
     'declaration-colon-newline-after': null,
     'value-keyword-case': null,
     'value-list-comma-newline-after': null, // not compatible with prettier
+    'function-parentheses-newline-inside': null, // not compatible with prettier
+    'string-no-newline': null, // not compatible with prettier
   },
 };
diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSimple.js b/docs/src/pages/components/buttons/UnstyledButtonsSimple.js
@@ -3,25 +3,30 @@ import Stack from '@mui/material/Stack';
 import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 
+const blue = {
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+};
+
 const CustomButtonRoot = styled('button')`
-  background-color: #007fff;
-  padding: 15px 20px;
-  border-radius: 10px;
-  color: #fff;
-  font-weight: 600;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  transition: all 200ms ease;
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: bold;
+  font-size: 0.875rem;
+  background-color: ${blue[500]};
+  padding: 12px 24px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
   border: none;
 
   &:hover {
-    background-color: #0059b2;
+    background-color: ${blue[600]};
   }
 
   &.${buttonUnstyledClasses.active} {
-    background-color: #004386;
+    background-color: ${blue[700]};
   }
 
   &.${buttonUnstyledClasses.focusVisible} {
@@ -32,7 +37,6 @@ const CustomButtonRoot = styled('button')`
   &.${buttonUnstyledClasses.disabled} {
     opacity: 0.5;
     cursor: not-allowed;
-    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
   }
 `;
 

diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx b/docs/src/pages/components/buttons/UnstyledButtonsSimple.tsx
@@ -6,25 +6,30 @@ import ButtonUnstyled, {
 } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 
+const blue = {
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+};
+
 const CustomButtonRoot = styled('button')`
-  background-color: #007fff;
-  padding: 15px 20px;
-  border-radius: 10px;
-  color: #fff;
-  font-weight: 600;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  transition: all 200ms ease;
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: bold;
+  font-size: 0.875rem;
+  background-color: ${blue[500]};
+  padding: 12px 24px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
   border: none;
 
   &:hover {
-    background-color: #0059b2;
+    background-color: ${blue[600]};
   }
 
   &.${buttonUnstyledClasses.active} {
-    background-color: #004386;
+    background-color: ${blue[700]};
   }
 
   &.${buttonUnstyledClasses.focusVisible} {
@@ -35,7 +40,6 @@ const CustomButtonRoot = styled('button')`
   &.${buttonUnstyledClasses.disabled} {
     opacity: 0.5;
     cursor: not-allowed;
-    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
   }
 `;
 

diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSpan.js b/docs/src/pages/components/buttons/UnstyledButtonsSpan.js
@@ -3,25 +3,30 @@ import Stack from '@mui/material/Stack';
 import ButtonUnstyled, { buttonUnstyledClasses } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 
+const blue = {
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+};
+
 const CustomButtonRoot = styled('span')`
-  background-color: #007fff;
-  padding: 15px 20px;
-  border-radius: 10px;
-  color: #fff;
-  font-weight: 600;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  transition: all 200ms ease;
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: bold;
+  font-size: 0.875rem;
+  background-color: ${blue[500]};
+  padding: 12px 24px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
   border: none;
 
   &:hover {
-    background-color: #0059b2;
+    background-color: ${blue[600]};
   }
 
   &.${buttonUnstyledClasses.active} {
-    background-color: #004386;
+    background-color: ${blue[700]};
   }
 
   &.${buttonUnstyledClasses.focusVisible} {
@@ -32,7 +37,6 @@ const CustomButtonRoot = styled('span')`
   &.${buttonUnstyledClasses.disabled} {
     opacity: 0.5;
     cursor: not-allowed;
-    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
   }
 `;
 

diff --git a/docs/src/pages/components/buttons/UnstyledButtonsSpan.tsx b/docs/src/pages/components/buttons/UnstyledButtonsSpan.tsx
@@ -6,25 +6,30 @@ import ButtonUnstyled, {
 } from '@mui/base/ButtonUnstyled';
 import { styled } from '@mui/system';
 
+const blue = {
+  500: '#007FFF',
+  600: '#0072E5',
+  700: '#0059B2',
+};
+
 const CustomButtonRoot = styled('span')`
-  background-color: #007fff;
-  padding: 15px 20px;
-  border-radius: 10px;
-  color: #fff;
-  font-weight: 600;
-  font-family: Helvetica, Arial, sans-serif;
-  font-size: 14px;
-  transition: all 200ms ease;
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: bold;
+  font-size: 0.875rem;
+  background-color: ${blue[500]};
+  padding: 12px 24px;
+  border-radius: 8px;
+  color: white;
+  transition: all 150ms ease;
   cursor: pointer;
-  box-shadow: 0 4px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 0 rgba(0, 127, 255, 0);
   border: none;
 
   &:hover {
-    background-color: #0059b2;
+    background-color: ${blue[600]};
   }
 
   &.${buttonUnstyledClasses.active} {
-    background-color: #004386;
+    background-color: ${blue[700]};
   }
 
   &.${buttonUnstyledClasses.focusVisible} {
@@ -35,7 +40,6 @@ const CustomButtonRoot = styled('span')`
   &.${buttonUnstyledClasses.disabled} {
     opacity: 0.5;
     cursor: not-allowed;
-    box-shadow: 0 0 0 0 rgba(0, 127, 255, 0);
   }
 `;
 

diff --git a/docs/src/pages/components/switches/UnstyledSwitches.js b/docs/src/pages/components/switches/UnstyledSwitches.js
@@ -2,11 +2,20 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import SwitchUnstyled, { switchUnstyledClasses } from '@mui/base/SwitchUnstyled';
 
+const blue = {
+  500: '#007FFF',
+};
+
+const grey = {
+  400: '#BFC7CF',
+  500: '#AAB4BE',
+};
+
 const Root = styled('span')`
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 32px;
+  width: 40px;
   height: 20px;
   margin: 10px;
   cursor: pointer;
@@ -17,7 +26,7 @@ const Root = styled('span')`
   }
 
   & .${switchUnstyledClasses.track} {
-    background: #b3c3d3;
+    background: ${grey[400]};
     border-radius: 10px;
     display: block;
     height: 100%;
@@ -38,19 +47,19 @@ const Root = styled('span')`
   }
 
   &.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb} {
-    background-color: rgba(255, 255, 255, 1);
+    background-color: ${grey[500]};
     box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
   }
 
   &.${switchUnstyledClasses.checked} {
     .${switchUnstyledClasses.thumb} {
-      left: 14px;
+      left: 22px;
       top: 3px;
       background-color: #fff;
     }
 
     .${switchUnstyledClasses.track} {
-      background: #007fff;
+      background: ${blue[500]};
     }
   }
 

diff --git a/docs/src/pages/components/switches/UnstyledSwitches.tsx b/docs/src/pages/components/switches/UnstyledSwitches.tsx
@@ -2,11 +2,20 @@ import * as React from 'react';
 import { styled } from '@mui/system';
 import SwitchUnstyled, { switchUnstyledClasses } from '@mui/base/SwitchUnstyled';
 
+const blue = {
+  500: '#007FFF',
+};
+
+const grey = {
+  400: '#BFC7CF',
+  500: '#AAB4BE',
+};
+
 const Root = styled('span')`
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 32px;
+  width: 40px;
   height: 20px;
   margin: 10px;
   cursor: pointer;
@@ -17,7 +26,7 @@ const Root = styled('span')`
   }
 
   & .${switchUnstyledClasses.track} {
-    background: #b3c3d3;
+    background: ${grey[400]};
     border-radius: 10px;
     display: block;
     height: 100%;
@@ -38,19 +47,19 @@ const Root = styled('span')`
   }
 
   &.${switchUnstyledClasses.focusVisible} .${switchUnstyledClasses.thumb} {
-    background-color: rgba(255, 255, 255, 1);
+    background-color: ${grey[500]};
     box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
   }
 
   &.${switchUnstyledClasses.checked} {
     .${switchUnstyledClasses.thumb} {
-      left: 14px;
+      left: 22px;
       top: 3px;
       background-color: #fff;
     }
 
     .${switchUnstyledClasses.track} {
-      background: #007fff;
+      background: ${blue[500]};
     }
   }
 

diff --git a/docs/src/pages/components/switches/UseSwitchesBasic.js b/docs/src/pages/components/switches/UseSwitchesBasic.js
@@ -3,15 +3,24 @@ import clsx from 'clsx';
 import { styled } from '@mui/system';
 import { useSwitch } from '@mui/base/SwitchUnstyled';
 
+const blue = {
+  500: '#007FFF',
+};
+
+const grey = {
+  400: '#BFC7CF',
+  500: '#AAB4BE',
+};
+
 const BasicSwitchRoot = styled('span')`
   font-size: 0;
   position: relative;
   display: inline-block;
-  width: 32px;
+  width: 40px;
   height: 20px;
-  background: #b3c3d3;
-  border-radius: 10px;
   margin: 10px;
+  background: ${grey[400]};
+  border-radius: 10px;
   cursor: pointer;
 
   &.Switch-disabled {
@@ -20,7 +29,7 @@ const BasicSwitchRoot = styled('span')`
   }
 
   &.Switch-checked {
-    background: #007fff;
+    background: ${blue[500]};
   }
 `;
 
@@ -48,12 +57,12 @@ const BasicSwitchThumb = styled('span')`
   transition: all 200ms ease;
 
   &.Switch-focusVisible {
-    background-color: rgba(255, 255, 255, 1);
+    background-color: ${grey[500]};
     box-shadow: 0 0 1px 8px rgba(0, 0, 0, 0.25);
   }
 
   &.Switch-checked {
-    left: 14px;
+    left: 22px;
     top: 3px;
     background-color: #fff;
   }