From 9369e146a0166f9efdbf86470aca728737bbc179 Mon Sep 17 00:00:00 2001
From: zanivan <victorzanivan@gmail.com>
Date: Mon, 18 Sep 2023 10:48:48 -0400
Subject: [PATCH] Tweak button design

---
 .../components/button/UnstyledButtonCustom.js |  3 +-
 .../button/UnstyledButtonCustom.tsx           |  3 +-
 .../UnstyledButtonIntroduction/css/index.js   | 15 ++++++-
 .../UnstyledButtonIntroduction/css/index.tsx  | 15 ++++++-
 .../system/index.js                           | 28 ++++++------
 .../system/index.tsx                          | 28 ++++++------
 .../button/UnstyledButtonsDisabledFocus.js    | 39 +++++++++++------
 .../button/UnstyledButtonsDisabledFocus.tsx   | 39 +++++++++++------
 .../UnstyledButtonsDisabledFocusCustom.js     | 41 +++++++++++-------
 .../UnstyledButtonsDisabledFocusCustom.tsx    | 41 +++++++++++-------
 .../UnstyledButtonsSimple/system/index.js     | 43 ++++++++++++-------
 .../UnstyledButtonsSimple/system/index.tsx    | 43 ++++++++++++-------
 .../components/button/UnstyledButtonsSpan.js  | 39 +++++++++++------
 .../components/button/UnstyledButtonsSpan.tsx | 39 +++++++++++------
 .../UnstyledButtonsSpan/system/index.js       | 39 +++++++++++------
 .../UnstyledButtonsSpan/system/index.tsx      | 39 +++++++++++------
 .../components/button/UnstyledLinkButton.js   | 35 +++++++++------
 .../components/button/UnstyledLinkButton.tsx  | 35 +++++++++------
 docs/data/base/components/button/UseButton.js | 40 +++++++++++------
 .../data/base/components/button/UseButton.tsx | 40 +++++++++++------
 20 files changed, 412 insertions(+), 232 deletions(-)

diff --git a/docs/data/base/components/button/UnstyledButtonCustom.js b/docs/data/base/components/button/UnstyledButtonCustom.js
index 4f4e2399fafeaf..e2334234b25558 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonCustom.js
@@ -35,7 +35,8 @@ const blue = {
   200: '#99CCF3',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
   800: '#004C99',
   900: '#003A75',
 };
diff --git a/docs/data/base/components/button/UnstyledButtonCustom.tsx b/docs/data/base/components/button/UnstyledButtonCustom.tsx
index 72413739662779..5ad13212ff8c7c 100644
--- a/docs/data/base/components/button/UnstyledButtonCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonCustom.tsx
@@ -36,7 +36,8 @@ const blue = {
   200: '#99CCF3',
   400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
+  600: '#0072E6',
+  700: '#0059B3',
   800: '#004C99',
   900: '#003A75',
 };
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
index 3dae77721c653b..426fa8f0ad2944 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button, buttonClasses } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
@@ -29,7 +30,15 @@ const cyan = {
   900: '#022127',
 };
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
     <style>{`
   .CustomButton {
@@ -42,7 +51,11 @@ function Styles() {
     border-radius: 8px;
     color: white;
     cursor: pointer;
-    border: none;
+    border: 1px solid ${cyan[600]};
+    box-shadow: 0px 2px 6px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.2)'
+    }, inset 0px 1px 1px ${cyan[400]}, inset 0px -1px 1px ${cyan[700]} ;
+  
   }
   .CustomButton:hover {
     background-color: ${cyan[600]};
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
index 3dae77721c653b..426fa8f0ad2944 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/css/index.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { Button, buttonClasses } from '@mui/base/Button';
+import { useTheme } from '@mui/system';
 import Stack from '@mui/material/Stack';
 
 export default function UnstyledButtonsIntroduction() {
@@ -29,7 +30,15 @@ const cyan = {
   900: '#022127',
 };
 
+function useIsDarkMode() {
+  const theme = useTheme();
+  return theme.palette.mode === 'dark';
+}
+
 function Styles() {
+  // Replace this with your app logic for determining dark mode
+  const isDarkMode = useIsDarkMode();
+
   return (
     <style>{`
   .CustomButton {
@@ -42,7 +51,11 @@ function Styles() {
     border-radius: 8px;
     color: white;
     cursor: pointer;
-    border: none;
+    border: 1px solid ${cyan[600]};
+    box-shadow: 0px 2px 6px ${
+      isDarkMode ? 'rgba(0, 0, 0, 0.5)' : 'rgba(0, 0, 0, 0.2)'
+    }, inset 0px 1px 1px ${cyan[400]}, inset 0px -1px 1px ${cyan[700]} ;
+  
   }
   .CustomButton:hover {
     background-color: ${cyan[600]};
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
index 49175792bc2e54..be4ffcda8f9ca1 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.js
@@ -13,15 +13,10 @@ export default function UnstyledButtonsIntroduction() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-};
-
-const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
 const CustomButton = styled(Button)(
@@ -30,21 +25,24 @@ const CustomButton = styled(Button)(
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
@@ -53,8 +51,12 @@ const CustomButton = styled(Button)(
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
index 49175792bc2e54..be4ffcda8f9ca1 100644
--- a/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonIntroduction/system/index.tsx
@@ -13,15 +13,10 @@ export default function UnstyledButtonsIntroduction() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-};
-
-const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
 const CustomButton = styled(Button)(
@@ -30,21 +25,24 @@ const CustomButton = styled(Button)(
   font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
@@ -53,8 +51,12 @@ const CustomButton = styled(Button)(
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
index 81c3db1e383492..ab56f5a717ef8a 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.js
@@ -15,39 +15,50 @@ export default function UnstyledButtonsDisabledFocus() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
index 81c3db1e383492..ab56f5a717ef8a 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocus.tsx
@@ -15,39 +15,50 @@ export default function UnstyledButtonsDisabledFocus() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
index 29eb4906c0d8a1..e2adfbb4c0d50a 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.js
@@ -17,39 +17,50 @@ export default function UnstyledButtonsDisabledFocusCustom() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
-  &:hover:not(.${buttonClasses.disabled}) {
-    background-color: ${blue[600]};
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
index d1e1b7eff13a85..02a137eee0ee47 100644
--- a/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsDisabledFocusCustom.tsx
@@ -18,39 +18,50 @@ export default function UnstyledButtonsDisabledFocusCustom() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
-  &:hover:not(.${buttonClasses.disabled}) {
-    background-color: ${blue[600]};
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-` as PolymorphicComponent<ButtonTypeMap>;
+`,
+) as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
index 69d470d99c3198..56490b140db66a 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.js
@@ -13,39 +13,50 @@ export default function UnstyledButtonsSimple() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
-  &:hover:not(:disabled) {
-    background-color: ${blue[600]};
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
-  &:active:not(:disabled) {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
index 69d470d99c3198..56490b140db66a 100644
--- a/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSimple/system/index.tsx
@@ -13,39 +13,50 @@ export default function UnstyledButtonsSimple() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
-  &:hover:not(:disabled) {
-    background-color: ${blue[600]};
+  &:hover {
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
-  &:active:not(:disabled) {
+  &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.js b/docs/data/base/components/button/UnstyledButtonsSpan.js
index 45dd963617f567..b7e1a168e03e57 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.js
@@ -15,39 +15,50 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+  `,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan.tsx b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
index 28456f29f69b20..4994cbad9f6b61 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan.tsx
@@ -16,39 +16,50 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-` as PolymorphicComponent<ButtonTypeMap>;
+  `,
+) as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
index 45dd963617f567..801ab1d7383ed7 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.js
@@ -15,39 +15,50 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
index 28456f29f69b20..8e1b9a059340f0 100644
--- a/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
+++ b/docs/data/base/components/button/UnstyledButtonsSpan/system/index.tsx
@@ -16,39 +16,50 @@ export default function UnstyledButtonsSpan() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButton = styled(Button)`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButton = styled(Button)(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.${buttonClasses.disabled} {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-` as PolymorphicComponent<ButtonTypeMap>;
+`,
+) as PolymorphicComponent<ButtonTypeMap>;
diff --git a/docs/data/base/components/button/UnstyledLinkButton.js b/docs/data/base/components/button/UnstyledLinkButton.js
index aef8f238b46b07..52d8489e9ac46c 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.js
+++ b/docs/data/base/components/button/UnstyledLinkButton.js
@@ -16,43 +16,50 @@ export default function UnstyledLinkButton() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-};
-
-const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
 const CustomButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-weight: bold;
+  font-weight: 600;
   font-size: 0.875rem;
-  background-color: ${blue[500]};
+  line-height: 1.5;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
-  line-height: 1.5;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
     box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
+
+  &.${buttonClasses.disabled} {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
   `,
 );
diff --git a/docs/data/base/components/button/UnstyledLinkButton.tsx b/docs/data/base/components/button/UnstyledLinkButton.tsx
index aef8f238b46b07..52d8489e9ac46c 100644
--- a/docs/data/base/components/button/UnstyledLinkButton.tsx
+++ b/docs/data/base/components/button/UnstyledLinkButton.tsx
@@ -16,43 +16,50 @@ export default function UnstyledLinkButton() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
-};
-
-const grey = {
-  100: '#eaeef2',
-  300: '#afb8c1',
-  900: '#24292f',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
 const CustomButton = styled(Button)(
   ({ theme }) => `
   font-family: IBM Plex Sans, sans-serif;
-  font-weight: bold;
+  font-weight: 600;
   font-size: 0.875rem;
-  background-color: ${blue[500]};
+  line-height: 1.5;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
   border-radius: 8px;
-  line-height: 1.5;
   color: white;
   transition: all 150ms ease;
   cursor: pointer;
-  border: none;
-  box-shadow: 0px 4px 30px ${theme.palette.mode === 'dark' ? grey[900] : grey[100]};
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.${buttonClasses.active} {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.${buttonClasses.focusVisible} {
     box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
+
+  &.${buttonClasses.disabled} {
+    opacity: 0.4;
+    cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
+  }
   `,
 );
diff --git a/docs/data/base/components/button/UseButton.js b/docs/data/base/components/button/UseButton.js
index 86fa65d66bcef7..a89b72d48c01d5 100644
--- a/docs/data/base/components/button/UseButton.js
+++ b/docs/data/base/components/button/UseButton.js
@@ -45,39 +45,51 @@ export default function UseButton() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButtonRoot = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButtonRoot = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
+
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.focusVisible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.disabled {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);
diff --git a/docs/data/base/components/button/UseButton.tsx b/docs/data/base/components/button/UseButton.tsx
index 5a5186b11fdb42..3a8281e9cfaffc 100644
--- a/docs/data/base/components/button/UseButton.tsx
+++ b/docs/data/base/components/button/UseButton.tsx
@@ -38,39 +38,51 @@ export default function UseButton() {
 }
 
 const blue = {
+  400: '#3399FF',
   500: '#007FFF',
-  600: '#0072E5',
-  700: '#0059B2',
+  600: '#0072E6',
+  700: '#0059B3',
 };
 
-const CustomButtonRoot = styled('button')`
-  font-family: 'IBM Plex Sans', sans-serif;
+const CustomButtonRoot = styled('button')(
+  ({ theme }) => `
+  font-family: IBM Plex Sans, sans-serif;
+  font-weight: 600;
   font-size: 0.875rem;
   line-height: 1.5;
-  background-color: ${blue[500]};
-  color: white;
-  border-radius: 8px;
-  font-weight: 600;
+  background-color: ${theme.palette.mode === 'dark' ? blue[600] : blue[500]};
   padding: 8px 16px;
-  cursor: pointer;
+  border-radius: 8px;
+  color: white;
   transition: all 150ms ease;
-  border: none;
+  cursor: pointer;
+  border: 1px solid ${blue[600]};
+  box-shadow: 0px 4px 8px ${
+    theme.palette.mode === 'dark' ? 'rgba(0, 0, 0, 0.35)' : 'rgba(0, 0, 0, 0.15)'
+  }, inset 0px 2px 1px ${blue[400]}, inset 0px -2px 1px ${blue[700]} ;
+
 
   &:hover {
-    background-color: ${blue[600]};
+    background-color: ${theme.palette.mode === 'dark' ? blue[500] : blue[600]};
   }
 
   &.active {
     background-color: ${blue[700]};
+    box-shadow: none;
   }
 
   &.focusVisible {
-    box-shadow: 0 4px 20px 0 rgb(61 71 82 / 0.1), 0 0 0 5px rgb(0 127 255 / 0.5);
+    box-shadow: 0 3px 20px 0 rgba(61, 71, 82, 0.1), 0 0 0 5px rgba(0, 127, 255, 0.5);
     outline: none;
   }
 
   &.disabled {
-    opacity: 0.5;
+    opacity: 0.4;
     cursor: not-allowed;
+    box-shadow: none;
+    &:hover {
+      background-color: ${blue[500]};
+    }
   }
-`;
+`,
+);