From b7ab6e3dff5da82e0f04905fb6c841e84786a4df Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 10 May 2023 04:38:04 -0300
Subject: [PATCH] [docs] Stray design tweaks to Base UI demos (#37003)

---
 .../badge/UnstyledBadgeIntroduction.js        | 27 ++++----
 .../badge/UnstyledBadgeIntroduction.tsx       | 27 ++++----
 .../input/UnstyledInputIntroduction.js        |  5 +-
 .../input/UnstyledInputIntroduction.tsx       |  5 +-
 docs/data/base/components/menu/MenuSimple.js  |  4 +-
 docs/data/base/components/menu/MenuSimple.tsx |  4 +-
 .../menu/UnstyledMenuIntroduction.js          |  5 +-
 .../menu/UnstyledMenuIntroduction.tsx         |  5 +-
 docs/data/base/components/menu/UseMenu.js     |  6 +-
 docs/data/base/components/menu/UseMenu.tsx    |  6 +-
 .../base/components/menu/WrappedMenuItems.js  |  4 +-
 .../base/components/menu/WrappedMenuItems.tsx |  4 +-
 .../base/components/modal/KeepMountedModal.js | 54 +++++++++++++--
 .../components/modal/KeepMountedModal.tsx     | 54 +++++++++++++--
 .../modal/KeepMountedModal.tsx.preview        |  4 +-
 .../base/components/modal/ModalUnstyled.js    | 54 +++++++++++++--
 .../base/components/modal/ModalUnstyled.tsx   | 54 +++++++++++++--
 .../modal/ModalUnstyled.tsx.preview           |  4 +-
 .../data/base/components/modal/NestedModal.js | 52 ++++++++++++++-
 .../base/components/modal/NestedModal.tsx     | 52 ++++++++++++++-
 .../components/modal/NestedModal.tsx.preview  |  2 +-
 .../data/base/components/modal/ServerModal.js |  9 ++-
 .../base/components/modal/ServerModal.tsx     | 11 ++--
 .../data/base/components/modal/SpringModal.js | 53 +++++++++++++--
 .../base/components/modal/SpringModal.tsx     | 53 +++++++++++++--
 .../base/components/modal/TransitionsModal.js | 53 +++++++++++++--
 .../components/modal/TransitionsModal.tsx     | 53 +++++++++++++--
 .../base/components/popper/PlacementPopper.js | 20 +++---
 .../components/popper/PlacementPopper.tsx     | 20 +++---
 .../select/UnstyledSelectIntroduction.tsx     |  1 +
 .../base/components/slider/DiscreteSlider.js  | 23 ++++---
 .../base/components/slider/DiscreteSlider.tsx | 23 ++++---
 .../components/slider/DiscreteSliderMarks.js  | 19 +++---
 .../components/slider/DiscreteSliderMarks.tsx | 19 +++---
 .../components/slider/DiscreteSliderValues.js | 18 ++---
 .../slider/DiscreteSliderValues.tsx           | 18 ++---
 .../components/slider/LabeledValuesSlider.js  |  8 ++-
 .../components/slider/LabeledValuesSlider.tsx |  8 ++-
 .../base/components/slider/RangeSlider.js     |  5 +-
 .../base/components/slider/RangeSlider.tsx    |  5 +-
 .../base/components/slider/UnstyledSlider.js  |  2 +-
 .../base/components/slider/UnstyledSlider.tsx |  2 +-
 .../snackbar/TransitionComponentSnackbar.js   | 66 ++++++++++++++-----
 .../snackbar/TransitionComponentSnackbar.tsx  | 66 ++++++++++++++-----
 .../components/snackbar/UnstyledSnackbar.js   | 58 ++++++++++++----
 .../components/snackbar/UnstyledSnackbar.tsx  | 58 ++++++++++++----
 .../snackbar/UnstyledSnackbar.tsx.preview     |  4 +-
 .../base/components/snackbar/UseSnackbar.js   | 62 +++++++++++++----
 .../base/components/snackbar/UseSnackbar.tsx  | 62 +++++++++++++----
 .../snackbar/UseSnackbar.tsx.preview          |  6 +-
 .../table-pagination/TableUnstyled.js         | 19 ++++--
 .../table-pagination/TableUnstyled.tsx        | 19 ++++--
 .../UnstyledPaginationIntroduction.js         |  8 +--
 .../UnstyledPaginationIntroduction.tsx        |  8 +--
 .../textarea-autosize/EmptyTextarea.js        | 59 +++++++++++++++--
 .../textarea-autosize/EmptyTextarea.tsx       | 59 +++++++++++++++--
 .../EmptyTextarea.tsx.preview                 |  6 +-
 .../textarea-autosize/MaxHeightTextarea.js    | 60 +++++++++++++++--
 .../textarea-autosize/MaxHeightTextarea.tsx   | 60 +++++++++++++++--
 .../MaxHeightTextarea.tsx.preview             |  5 +-
 .../textarea-autosize/MinHeightTextarea.js    | 58 +++++++++++++++-
 .../textarea-autosize/MinHeightTextarea.tsx   | 58 +++++++++++++++-
 .../MinHeightTextarea.tsx.preview             |  3 +-
 .../UnstyledTextareaIntroduction.js           | 61 +++++++++++++++++
 .../textarea-autosize/textarea-autosize.md    |  2 +
 65 files changed, 1389 insertions(+), 333 deletions(-)
 create mode 100644 docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.js

diff --git a/docs/data/base/components/badge/UnstyledBadgeIntroduction.js b/docs/data/base/components/badge/UnstyledBadgeIntroduction.js
index b05ce3e7c2b501..d1f80b91912b8a 100644
--- 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
index b05ce3e7c2b501..d1f80b91912b8a 100644
--- 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
index a4ac1068eb6c67..f62a2430e0bcbf 100644
--- 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,7 +44,7 @@ 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]};
@@ -51,7 +52,7 @@ const StyledInputElement = styled('input')(
 
   &: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
index 5faf387f0a3d09..4234539274b263 100644
--- 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,7 +47,7 @@ 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]};
@@ -54,7 +55,7 @@ const StyledInputElement = styled('input')(
 
   &: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
index 8c83c65db3df1a..5e1134ab7d77c2 100644
--- 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
index 46f80e96f3fd78..fb82e7004c5028 100644
--- 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
index 3810ac2ba22444..fd579c8ec9ff7b 100644
--- 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
index f5f713c39e2d51..634b507f677db4 100644
--- 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
index ec615b0687a59f..eb8e9457ef3ddd 100644
--- 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
index b42425fa864d37..1826af1023be04 100644
--- 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
index 9e4c596a097b32..20919f55f30a1e 100644
--- 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
index 2d62efd1277292..bcf0912588369f 100644
--- 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]};
diff --git a/docs/data/base/components/modal/KeepMountedModal.js b/docs/data/base/components/modal/KeepMountedModal.js
index 28309d88238ff0..a666a4d5abfd72 100644
--- a/docs/data/base/components/modal/KeepMountedModal.js
+++ b/docs/data/base/components/modal/KeepMountedModal.js
@@ -11,9 +11,9 @@ export default function KeepMountedModal() {
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
+      <TriggerButton type="button" onClick={handleOpen}>
         Open modal
-      </button>
+      </TriggerButton>
       <StyledModal
         aria-labelledby="keep-mounted-modal-title"
         aria-describedby="keep-mounted-modal-description"
@@ -47,6 +47,25 @@ Backdrop.propTypes = {
   open: PropTypes.bool,
 };
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)(`
   position: fixed;
   z-index: 1300;
@@ -75,7 +94,34 @@ const StyledBackdrop = styled(Backdrop)`
 
 const style = (theme) => ({
   width: 400,
-  bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx b/docs/data/base/components/modal/KeepMountedModal.tsx
index c204474ec0960d..52690a41f5a900 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx
@@ -10,9 +10,9 @@ export default function KeepMountedModal() {
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
+      <TriggerButton type="button" onClick={handleOpen}>
         Open modal
-      </button>
+      </TriggerButton>
       <StyledModal
         aria-labelledby="keep-mounted-modal-title"
         aria-describedby="keep-mounted-modal-description"
@@ -44,6 +44,25 @@ const Backdrop = React.forwardRef<
   );
 });
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)(`
   position: fixed;
   z-index: 1300;
@@ -72,7 +91,34 @@ const StyledBackdrop = styled(Backdrop)`
 
 const style = (theme: Theme) => ({
   width: 400,
-  bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/KeepMountedModal.tsx.preview b/docs/data/base/components/modal/KeepMountedModal.tsx.preview
index 1d66c2dacb96c7..96011eba390240 100644
--- a/docs/data/base/components/modal/KeepMountedModal.tsx.preview
+++ b/docs/data/base/components/modal/KeepMountedModal.tsx.preview
@@ -1,6 +1,6 @@
-<button type="button" onClick={handleOpen}>
+<TriggerButton type="button" onClick={handleOpen}>
   Open modal
-</button>
+</TriggerButton>
 <StyledModal
   aria-labelledby="keep-mounted-modal-title"
   aria-describedby="keep-mounted-modal-description"
diff --git a/docs/data/base/components/modal/ModalUnstyled.js b/docs/data/base/components/modal/ModalUnstyled.js
index 8a2fe7a7152b89..5046986ed459d8 100644
--- a/docs/data/base/components/modal/ModalUnstyled.js
+++ b/docs/data/base/components/modal/ModalUnstyled.js
@@ -11,9 +11,9 @@ export default function ModalDemo() {
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
+      <TriggerButton type="button" onClick={handleOpen}>
         Open modal
-      </button>
+      </TriggerButton>
       <StyledModal
         aria-labelledby="unstyled-modal-title"
         aria-describedby="unstyled-modal-description"
@@ -46,6 +46,25 @@ Backdrop.propTypes = {
   open: PropTypes.bool,
 };
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
@@ -71,7 +90,34 @@ const StyledBackdrop = styled(Backdrop)`
 
 const style = (theme) => ({
   width: 400,
-  bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx b/docs/data/base/components/modal/ModalUnstyled.tsx
index f8a300d5e67e22..36fe3a56ffd5fe 100644
--- a/docs/data/base/components/modal/ModalUnstyled.tsx
+++ b/docs/data/base/components/modal/ModalUnstyled.tsx
@@ -10,9 +10,9 @@ export default function ModalDemo() {
 
   return (
     <div>
-      <button type="button" onClick={handleOpen}>
+      <TriggerButton type="button" onClick={handleOpen}>
         Open modal
-      </button>
+      </TriggerButton>
       <StyledModal
         aria-labelledby="unstyled-modal-title"
         aria-describedby="unstyled-modal-description"
@@ -43,6 +43,25 @@ const Backdrop = React.forwardRef<
   );
 });
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
@@ -68,7 +87,34 @@ const StyledBackdrop = styled(Backdrop)`
 
 const style = (theme: Theme) => ({
   width: 400,
-  bgcolor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/ModalUnstyled.tsx.preview b/docs/data/base/components/modal/ModalUnstyled.tsx.preview
index f5ecca3a8b1a3d..af9a3e6c5b55b9 100644
--- a/docs/data/base/components/modal/ModalUnstyled.tsx.preview
+++ b/docs/data/base/components/modal/ModalUnstyled.tsx.preview
@@ -1,6 +1,6 @@
-<button type="button" onClick={handleOpen}>
+<TriggerButton type="button" onClick={handleOpen}>
   Open modal
-</button>
+</TriggerButton>
 <StyledModal
   aria-labelledby="unstyled-modal-title"
   aria-describedby="unstyled-modal-description"
diff --git a/docs/data/base/components/modal/NestedModal.js b/docs/data/base/components/modal/NestedModal.js
index a28d2cf6b5b1f5..d657b62b6e1d8e 100644
--- a/docs/data/base/components/modal/NestedModal.js
+++ b/docs/data/base/components/modal/NestedModal.js
@@ -16,7 +16,7 @@ export default function NestedModal() {
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
       <Modal
         open={open}
         onClose={handleClose}
@@ -83,6 +83,25 @@ Backdrop.propTypes = {
   open: PropTypes.bool,
 };
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
@@ -112,7 +131,34 @@ const style = (theme) => ({
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/NestedModal.tsx b/docs/data/base/components/modal/NestedModal.tsx
index f67511ad3b9260..eb97f181069a31 100644
--- a/docs/data/base/components/modal/NestedModal.tsx
+++ b/docs/data/base/components/modal/NestedModal.tsx
@@ -15,7 +15,7 @@ export default function NestedModal() {
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
       <Modal
         open={open}
         onClose={handleClose}
@@ -80,6 +80,25 @@ const Backdrop = React.forwardRef<
   );
 });
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
@@ -109,7 +128,34 @@ const style = (theme: Theme) => ({
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/NestedModal.tsx.preview b/docs/data/base/components/modal/NestedModal.tsx.preview
index 6e3e8cf5c40251..9fb0eea2c45780 100644
--- a/docs/data/base/components/modal/NestedModal.tsx.preview
+++ b/docs/data/base/components/modal/NestedModal.tsx.preview
@@ -1,4 +1,4 @@
-<Button onClick={handleOpen}>Open modal</Button>
+<TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
 <Modal
   open={open}
   onClose={handleClose}
diff --git a/docs/data/base/components/modal/ServerModal.js b/docs/data/base/components/modal/ServerModal.js
index cc91a633ed6fca..315f2ba37ad266 100644
--- a/docs/data/base/components/modal/ServerModal.js
+++ b/docs/data/base/components/modal/ServerModal.js
@@ -52,11 +52,14 @@ const StyledModal = styled(Modal)`
   justify-content: center;
   padding: 8px;
   background: inherit;
+  font-family: IBM Plex Sans, sans-serif;
 `;
 
-const style = {
+const style = (theme) => ({
   position: 'relative',
   width: 400,
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
-};
+  backgroundColor: theme.palette.mode === 'dark' ? '#132F4C' : 'white',
+  boxShadow: `0px 2px 8px ${theme.palette.mode === 'dark' ? '#000' : '#BCBCBC'}`,
+});
diff --git a/docs/data/base/components/modal/ServerModal.tsx b/docs/data/base/components/modal/ServerModal.tsx
index eb44f6532e512f..0d734ec01faffc 100644
--- a/docs/data/base/components/modal/ServerModal.tsx
+++ b/docs/data/base/components/modal/ServerModal.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import Modal from '@mui/base/Modal';
-import { Box, styled } from '@mui/system';
+import { Box, styled, Theme } from '@mui/system';
 
 export default function ServerModal() {
   const rootRef = React.useRef<HTMLDivElement>(null);
@@ -52,11 +52,14 @@ const StyledModal = styled(Modal)`
   justify-content: center;
   padding: 8px;
   background: inherit;
+  font-family: IBM Plex Sans, sans-serif;
 `;
 
-const style = {
+const style = (theme: Theme) => ({
   position: 'relative',
   width: 400,
-  border: '2px solid currentColor',
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
-};
+  backgroundColor: theme.palette.mode === 'dark' ? '#132F4C' : 'white',
+  boxShadow: `0px 2px 8px ${theme.palette.mode === 'dark' ? '#000' : '#BCBCBC'}`,
+});
diff --git a/docs/data/base/components/modal/SpringModal.js b/docs/data/base/components/modal/SpringModal.js
index 4e52ad5efa4356..5050b05740882c 100644
--- a/docs/data/base/components/modal/SpringModal.js
+++ b/docs/data/base/components/modal/SpringModal.js
@@ -12,7 +12,7 @@ export default function SpringModal() {
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
       <StyledModal
         aria-labelledby="spring-modal-title"
         aria-describedby="spring-modal-description"
@@ -97,14 +97,59 @@ Fade.propTypes = {
   onExited: PropTypes.func,
 };
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const style = (theme) => ({
   position: 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
-  boxShadow: 24,
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: 16,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/SpringModal.tsx b/docs/data/base/components/modal/SpringModal.tsx
index 044d8a738436a4..7f993cf6799120 100644
--- a/docs/data/base/components/modal/SpringModal.tsx
+++ b/docs/data/base/components/modal/SpringModal.tsx
@@ -11,7 +11,7 @@ export default function SpringModal() {
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
       <StyledModal
         aria-labelledby="spring-modal-title"
         aria-describedby="spring-modal-description"
@@ -96,14 +96,59 @@ const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, re
   );
 });
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const style = (theme: Theme) => ({
   position: 'absolute' as 'absolute',
   top: '50%',
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
-  boxShadow: 24,
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: 16,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/TransitionsModal.js b/docs/data/base/components/modal/TransitionsModal.js
index c84e8c7a1b707c..c228744a46ac07 100644
--- a/docs/data/base/components/modal/TransitionsModal.js
+++ b/docs/data/base/components/modal/TransitionsModal.js
@@ -12,7 +12,7 @@ export default function TransitionsModal() {
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
       <StyledModal
         aria-labelledby="transition-modal-title"
         aria-describedby="transition-modal-description"
@@ -47,6 +47,25 @@ Backdrop.propTypes = {
   open: PropTypes.bool,
 };
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
@@ -76,8 +95,34 @@ const style = (theme) => ({
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
-  boxShadow: 24,
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/modal/TransitionsModal.tsx b/docs/data/base/components/modal/TransitionsModal.tsx
index d26e022304c068..c9d6b0e21eb54c 100644
--- a/docs/data/base/components/modal/TransitionsModal.tsx
+++ b/docs/data/base/components/modal/TransitionsModal.tsx
@@ -11,7 +11,7 @@ export default function TransitionsModal() {
 
   return (
     <div>
-      <Button onClick={handleOpen}>Open modal</Button>
+      <TriggerButton onClick={handleOpen}>Open modal</TriggerButton>
       <StyledModal
         aria-labelledby="transition-modal-title"
         aria-describedby="transition-modal-description"
@@ -44,6 +44,25 @@ const Backdrop = React.forwardRef<HTMLDivElement, { open?: boolean }>(
   },
 );
 
+const blue = {
+  200: '#99CCF3',
+  400: '#3399FF',
+  500: '#007FFF',
+};
+
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const StyledModal = styled(Modal)`
   position: fixed;
   z-index: 1300;
@@ -73,8 +92,34 @@ const style = (theme: Theme) => ({
   left: '50%',
   transform: 'translate(-50%, -50%)',
   width: 400,
-  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
-  border: '2px solid currentColor',
-  boxShadow: 24,
+  borderRadius: '12px',
   padding: '16px 32px 24px 32px',
+  backgroundColor: theme.palette.mode === 'dark' ? '#0A1929' : 'white',
+  boxShadow: `0px 2px 24px ${theme.palette.mode === 'dark' ? '#000' : '#383838'}`,
 });
+
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
diff --git a/docs/data/base/components/popper/PlacementPopper.js b/docs/data/base/components/popper/PlacementPopper.js
index c776a9fb3cc66d..81f1e296e763f8 100644
--- a/docs/data/base/components/popper/PlacementPopper.js
+++ b/docs/data/base/components/popper/PlacementPopper.js
@@ -30,8 +30,8 @@ function PlacementForm({ setPlacement }) {
   return (
     <div
       style={{
-        backgroundColor: 'rgba(0,0,0,0.04)',
-        borderRadius: '4px',
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        borderRadius: '8px',
         padding: '0.5rem',
       }}
     >
@@ -106,17 +106,18 @@ export default function PlacementPopper() {
   return (
     <div style={{ width: '100%' }}>
       <PlacementForm setPlacement={setPlacement} />
-      <div style={{ padding: '3rem', textAlign: 'center' }}>
+      <div style={{ padding: '4rem 0', textAlign: 'center' }}>
         <span
           ref={(elm) => setAnchorEl(elm)}
           aria-describedby="placement-popper"
           style={{
             display: 'inline-block',
-            backgroundColor: 'rgba(0,0,0,0.12)',
-            padding: '1.5rem',
+            backgroundColor: 'rgba(0,0,0,0.05)',
+            padding: '0.5rem 1rem',
+            borderRadius: '0.5rem',
           }}
         >
-          ANCHOR
+          Anchor
         </span>
         <Popper
           id="placement-popper"
@@ -126,9 +127,12 @@ export default function PlacementPopper() {
         >
           <div
             style={{
-              padding: '0.25rem',
+              padding: '0.5rem 1rem',
               border: '1px solid',
-              boxShadow: '0 2px 8px 0 rgba(0,0,0,0.2)',
+              borderColor: 'rgba(0,0,0,0.2)',
+              margin: '0.5rem',
+              borderRadius: '0.5rem',
+              boxShadow: '0 2px 8px 0 rgba(0,0,0,0.1)',
             }}
           >
             The content of the Popper.
diff --git a/docs/data/base/components/popper/PlacementPopper.tsx b/docs/data/base/components/popper/PlacementPopper.tsx
index b273e5674275fb..4d60ef1bf13549 100644
--- a/docs/data/base/components/popper/PlacementPopper.tsx
+++ b/docs/data/base/components/popper/PlacementPopper.tsx
@@ -25,8 +25,8 @@ function PlacementForm({
   return (
     <div
       style={{
-        backgroundColor: 'rgba(0,0,0,0.04)',
-        borderRadius: '4px',
+        backgroundColor: 'rgba(0,0,0,0.05)',
+        borderRadius: '8px',
         padding: '0.5rem',
       }}
     >
@@ -98,17 +98,18 @@ export default function PlacementPopper() {
   return (
     <div style={{ width: '100%' }}>
       <PlacementForm setPlacement={setPlacement} />
-      <div style={{ padding: '3rem', textAlign: 'center' }}>
+      <div style={{ padding: '4rem 0', textAlign: 'center' }}>
         <span
           ref={(elm) => setAnchorEl(elm)}
           aria-describedby="placement-popper"
           style={{
             display: 'inline-block',
-            backgroundColor: 'rgba(0,0,0,0.12)',
-            padding: '1.5rem',
+            backgroundColor: 'rgba(0,0,0,0.05)',
+            padding: '0.5rem 1rem',
+            borderRadius: '0.5rem',
           }}
         >
-          ANCHOR
+          Anchor
         </span>
         <Popper
           id="placement-popper"
@@ -118,9 +119,12 @@ export default function PlacementPopper() {
         >
           <div
             style={{
-              padding: '0.25rem',
+              padding: '0.5rem 1rem',
               border: '1px solid',
-              boxShadow: '0 2px 8px 0 rgba(0,0,0,0.2)',
+              borderColor: 'rgba(0,0,0,0.2)',
+              margin: '0.5rem',
+              borderRadius: '0.5rem',
+              boxShadow: '0 2px 8px 0 rgba(0,0,0,0.1)',
             }}
           >
             The content of the Popper.
diff --git a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
index cc1ad86ea481d6..c63cc8266546a8 100644
--- a/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
+++ b/docs/data/base/components/select/UnstyledSelectIntroduction.tsx
@@ -86,6 +86,7 @@ const StyledButton = styled(Button, { shouldForwardProp: () => true })(
   border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   position: relative;
+  box-shadow: 0px 2px 24px ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
 
   transition-property: all;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
diff --git a/docs/data/base/components/slider/DiscreteSlider.js b/docs/data/base/components/slider/DiscreteSlider.js
index eeb6682d996ed2..89aed4959ce022 100644
--- a/docs/data/base/components/slider/DiscreteSlider.js
+++ b/docs/data/base/components/slider/DiscreteSlider.js
@@ -57,7 +57,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -84,8 +84,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
 
   & .${sliderClasses.track} {
@@ -128,24 +127,24 @@ const StyledSlider = styled(Slider)(
 
   & .${sliderClasses.mark} {
     position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: currentColor;
-    top: 50%;
-    opacity: 0.7;
+    width: 8px;
+    height: 8px;
+    border-radius: 99%;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    top: 43%;
     transform: translateX(-50%);
   }
 
   & .${sliderClasses.markActive} {
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   }
 
   & .valueLabel {
     font-family: IBM Plex Sans;
-    font-size: 14px;
+    font-weight: 600;
+    font-size: 12px;
     position: relative;
-    top: -1em;
+    top: -1.5em;
     text-align: center;
     align-self: center;
   }
diff --git a/docs/data/base/components/slider/DiscreteSlider.tsx b/docs/data/base/components/slider/DiscreteSlider.tsx
index a87ecad83cdcbb..bf6d7c24b397a1 100644
--- a/docs/data/base/components/slider/DiscreteSlider.tsx
+++ b/docs/data/base/components/slider/DiscreteSlider.tsx
@@ -56,7 +56,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -83,8 +83,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
 
   & .${sliderClasses.track} {
@@ -127,24 +126,24 @@ const StyledSlider = styled(Slider)(
 
   & .${sliderClasses.mark} {
     position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: currentColor;
-    top: 50%;
-    opacity: 0.7;
+    width: 8px;
+    height: 8px;
+    border-radius: 99%;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    top: 43%;
     transform: translateX(-50%);
   }
 
   & .${sliderClasses.markActive} {
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   }
 
   & .valueLabel {
     font-family: IBM Plex Sans;
-    font-size: 14px;
+    font-weight: 600;
+    font-size: 12px;
     position: relative;
-    top: -1em;
+    top: -1.5em;
     text-align: center;
     align-self: center;
   }
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.js b/docs/data/base/components/slider/DiscreteSliderMarks.js
index f6269edc1f29b6..d7831fdbe73910 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.js
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.js
@@ -63,7 +63,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -90,8 +90,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
 
   & .${sliderClasses.track} {
@@ -132,21 +131,21 @@ const StyledSlider = styled(Slider)(
 
   & .${sliderClasses.mark} {
     position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: currentColor;
-    top: 50%;
-    opacity: 0.7;
+    width: 8px;
+    height: 8px;
+    border-radius: 99%;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    top: 43%;
     transform: translateX(-50%);
   }
 
   & .${sliderClasses.markActive} {
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   }
 
   & .${sliderClasses.markLabel} {
     font-family: IBM Plex Sans;
+    font-weight: 600;
     font-size: 12px;
     position: absolute;
     top: 20px;
diff --git a/docs/data/base/components/slider/DiscreteSliderMarks.tsx b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
index 9894b01c8a6b5e..b4b2f0badcb6b7 100644
--- a/docs/data/base/components/slider/DiscreteSliderMarks.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderMarks.tsx
@@ -63,7 +63,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -90,8 +90,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
 
   & .${sliderClasses.track} {
@@ -132,21 +131,21 @@ const StyledSlider = styled(Slider)(
 
   & .${sliderClasses.mark} {
     position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: currentColor;
-    top: 50%;
-    opacity: 0.7;
+    width: 8px;
+    height: 8px;
+    border-radius: 99%;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    top: 43%;
     transform: translateX(-50%);
   }
 
   & .${sliderClasses.markActive} {
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   }
 
   & .${sliderClasses.markLabel} {
     font-family: IBM Plex Sans;
+    font-weight: 600;
     font-size: 12px;
     position: absolute;
     top: 20px;
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.js b/docs/data/base/components/slider/DiscreteSliderValues.js
index 6a50b81e293358..0ba4a68a5a07bd 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.js
+++ b/docs/data/base/components/slider/DiscreteSliderValues.js
@@ -64,7 +64,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -113,7 +113,7 @@ const StyledSlider = styled(Slider)(
     border-radius: 50%;
     outline: 0;
     border: 3px solid currentColor;
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
 
     :hover,
     &.${sliderClasses.focusVisible} {
@@ -133,21 +133,21 @@ const StyledSlider = styled(Slider)(
 
   & .${sliderClasses.mark} {
     position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: currentColor;
-    top: 50%;
-    opacity: 0.7;
+    width: 8px;
+    height: 8px;
+    border-radius: 99%;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    top: 43%;
     transform: translateX(-50%);
   }
 
   & .${sliderClasses.markActive} {
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   }
 
   & .${sliderClasses.markLabel} {
     font-family: IBM Plex Sans;
+    font-weight: 600;
     font-size: 12px;
     position: absolute;
     top: 20px;
diff --git a/docs/data/base/components/slider/DiscreteSliderValues.tsx b/docs/data/base/components/slider/DiscreteSliderValues.tsx
index ce42cce62df3b6..a002e026da337b 100644
--- a/docs/data/base/components/slider/DiscreteSliderValues.tsx
+++ b/docs/data/base/components/slider/DiscreteSliderValues.tsx
@@ -64,7 +64,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -113,7 +113,7 @@ const StyledSlider = styled(Slider)(
     border-radius: 50%;
     outline: 0;
     border: 3px solid currentColor;
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
 
     :hover,
     &.${sliderClasses.focusVisible} {
@@ -133,21 +133,21 @@ const StyledSlider = styled(Slider)(
 
   & .${sliderClasses.mark} {
     position: absolute;
-    width: 4px;
-    height: 4px;
-    border-radius: 2px;
-    background-color: currentColor;
-    top: 50%;
-    opacity: 0.7;
+    width: 8px;
+    height: 8px;
+    border-radius: 99%;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
+    top: 43%;
     transform: translateX(-50%);
   }
 
   & .${sliderClasses.markActive} {
-    background-color: #fff;
+    background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   }
 
   & .${sliderClasses.markLabel} {
     font-family: IBM Plex Sans;
+    font-weight: 600;
     font-size: 12px;
     position: absolute;
     top: 20px;
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.js b/docs/data/base/components/slider/LabeledValuesSlider.js
index af7613c47e6851..b8a956200044fe 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.js
+++ b/docs/data/base/components/slider/LabeledValuesSlider.js
@@ -48,7 +48,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -72,8 +72,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
   & .${sliderClasses.track} {
     display: block;
@@ -101,6 +100,9 @@ const StyledSlider = styled(Slider)(
       )};
     }
     & .label {
+        font-family: IBM Plex Sans;
+        font-weight: 600;
+        font-size: 14px;
         background: unset;
         background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
         width: 32px;
diff --git a/docs/data/base/components/slider/LabeledValuesSlider.tsx b/docs/data/base/components/slider/LabeledValuesSlider.tsx
index b86cc2e2769b45..042993242de0b2 100644
--- a/docs/data/base/components/slider/LabeledValuesSlider.tsx
+++ b/docs/data/base/components/slider/LabeledValuesSlider.tsx
@@ -47,7 +47,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -71,8 +71,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
   & .${sliderClasses.track} {
     display: block;
@@ -100,6 +99,9 @@ const StyledSlider = styled(Slider)(
       )};
     }
     & .label {
+        font-family: IBM Plex Sans;
+        font-weight: 600;
+        font-size: 14px;
         background: unset;
         background-color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
         width: 32px;
diff --git a/docs/data/base/components/slider/RangeSlider.js b/docs/data/base/components/slider/RangeSlider.js
index 9210500dd2910f..e6e88e1505e526 100644
--- a/docs/data/base/components/slider/RangeSlider.js
+++ b/docs/data/base/components/slider/RangeSlider.js
@@ -61,7 +61,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -88,8 +88,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
 
   & .${sliderClasses.track} {
diff --git a/docs/data/base/components/slider/RangeSlider.tsx b/docs/data/base/components/slider/RangeSlider.tsx
index d93d67ca7f3b76..293e6bca3b5c3a 100644
--- a/docs/data/base/components/slider/RangeSlider.tsx
+++ b/docs/data/base/components/slider/RangeSlider.tsx
@@ -61,7 +61,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
@@ -88,8 +88,7 @@ const StyledSlider = styled(Slider)(
     width: 100%;
     height: 4px;
     border-radius: 2px;
-    background-color: currentColor;
-    opacity: 0.4;
+    background-color: ${theme.palette.mode === 'light' ? blue[200] : blue[900]};
   }
 
   & .${sliderClasses.track} {
diff --git a/docs/data/base/components/slider/UnstyledSlider.js b/docs/data/base/components/slider/UnstyledSlider.js
index 55b5eea3ed73c7..215236f098aaff 100644
--- a/docs/data/base/components/slider/UnstyledSlider.js
+++ b/docs/data/base/components/slider/UnstyledSlider.js
@@ -36,7 +36,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
diff --git a/docs/data/base/components/slider/UnstyledSlider.tsx b/docs/data/base/components/slider/UnstyledSlider.tsx
index 55b5eea3ed73c7..215236f098aaff 100644
--- a/docs/data/base/components/slider/UnstyledSlider.tsx
+++ b/docs/data/base/components/slider/UnstyledSlider.tsx
@@ -36,7 +36,7 @@ const grey = {
 
 const StyledSlider = styled(Slider)(
   ({ theme }) => `
-  color: ${theme.palette.mode === 'light' ? blue[500] : blue[300]};
+  color: ${theme.palette.mode === 'light' ? blue[500] : blue[400]};
   height: 6px;
   width: 100%;
   padding: 16px 0;
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
index b9b207cbc92904..865b5bdadcd227 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.js
@@ -32,9 +32,9 @@ export default function TransitionComponentSnackbar() {
 
   return (
     <React.Fragment>
-      <button type="button" onClick={handleClick}>
+      <TriggerButton type="button" onClick={handleClick}>
         Open snackbar
-      </button>
+      </TriggerButton>
       <StyledSnackbar
         autoHideDuration={5000}
         open={open}
@@ -81,18 +81,50 @@ export default function TransitionComponentSnackbar() {
   );
 }
 
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const blue = {
-  50: '#F0F7FF',
-  100: '#DAECFF',
+  200: '#99CCF3',
   400: '#3399FF',
-  600: '#0072E5',
-  900: '#003A75',
+  500: '#007FFF',
 };
 
-const grey = {
-  200: '#E0E3E7',
-  800: '#2D3843',
-};
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
 
 const StyledSnackbar = styled(Snackbar)`
   position: fixed;
@@ -108,16 +140,16 @@ const SnackbarContent = styled('div')(
   ({ theme }) => `
   display: flex;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
   border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
     theme.palette.mode === 'dark'
-      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
-      : `0 5px 13px -3px ${grey[200]}`
+      ? `0 2px 8px rgba(0,0,0,0.5)`
+      : `0 2px 8px ${grey[200]}`
   };
-  padding: 0.875rem;
-  color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+  padding: 0.75rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 500;
   text-align: start;
@@ -136,7 +168,7 @@ const SnackbarContent = styled('div')(
   & .snackbar-description {
     line-height: 1.5rem;
     font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? blue[100] : grey[800]};
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
   }
 
   & .snackbar-close-icon {
diff --git a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
index cfe9c78fa9c741..3267943337c1fe 100644
--- a/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
+++ b/docs/data/base/components/snackbar/TransitionComponentSnackbar.tsx
@@ -33,9 +33,9 @@ export default function TransitionComponentSnackbar() {
 
   return (
     <React.Fragment>
-      <button type="button" onClick={handleClick}>
+      <TriggerButton type="button" onClick={handleClick}>
         Open snackbar
-      </button>
+      </TriggerButton>
       <StyledSnackbar
         autoHideDuration={5000}
         open={open}
@@ -82,18 +82,50 @@ export default function TransitionComponentSnackbar() {
   );
 }
 
+const grey = {
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
+};
+
 const blue = {
-  50: '#F0F7FF',
-  100: '#DAECFF',
+  200: '#99CCF3',
   400: '#3399FF',
-  600: '#0072E5',
-  900: '#003A75',
+  500: '#007FFF',
 };
 
-const grey = {
-  200: '#E0E3E7',
-  800: '#2D3843',
-};
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
 
 const StyledSnackbar = styled(Snackbar)`
   position: fixed;
@@ -109,16 +141,16 @@ const SnackbarContent = styled('div')(
   ({ theme }) => `
   display: flex;
   overflow: hidden;
-  background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+  background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
   border-radius: 8px;
-  border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
   box-shadow: ${
     theme.palette.mode === 'dark'
-      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
-      : `0 5px 13px -3px ${grey[200]}`
+      ? `0 2px 8px rgba(0,0,0,0.5)`
+      : `0 2px 8px ${grey[200]}`
   };
-  padding: 0.875rem;
-  color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+  padding: 0.75rem;
+  color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
   font-family: IBM Plex Sans, sans-serif;
   font-weight: 500;
   text-align: start;
@@ -137,7 +169,7 @@ const SnackbarContent = styled('div')(
   & .snackbar-description {
     line-height: 1.5rem;
     font-weight: 400;
-    color: ${theme.palette.mode === 'dark' ? blue[100] : grey[800]};
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
   }
 
   & .snackbar-close-icon {
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.js b/docs/data/base/components/snackbar/UnstyledSnackbar.js
index 4b112813214ab6..1858614fc1c3f6 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.js
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.js
@@ -19,9 +19,9 @@ export default function UnstyledSnackbar() {
 
   return (
     <React.Fragment>
-      <button type="button" onClick={handleClick}>
+      <TriggerButton type="button" onClick={handleClick}>
         Open snackbar
-      </button>
+      </TriggerButton>
       <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
         Hello World
       </StyledSnackbar>
@@ -30,14 +30,22 @@ export default function UnstyledSnackbar() {
 }
 
 const blue = {
-  50: '#F0F7FF',
+  200: '#99CCF3',
   400: '#3399FF',
-  600: '#0072E5',
-  900: '#003A75',
+  500: '#007FFF',
 };
 
 const grey = {
-  200: '#E0E3E7',
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 const snackbarInRight = keyframes`
@@ -50,6 +58,32 @@ const snackbarInRight = keyframes`
   }
 `;
 
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
+
 const StyledSnackbar = styled(Snackbar)(
   ({ theme }) => css`
     position: fixed;
@@ -61,17 +95,17 @@ const StyledSnackbar = styled(Snackbar)(
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
     border-radius: 8px;
-    border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
-      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
-      : `0 5px 13px -3px ${grey[200]}`};
+      ? `0 2px 8px rgba(0,0,0,0.5)`
+      : `0 2px 8px ${grey[200]}`};
     padding: 0.75rem;
-    color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
-    animation: ${snackbarInRight} 500ms;
+    animation: ${snackbarInRight} 200ms;
     transition: transform 0.2s ease-out;
   `,
 );
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
index 586d12aca1e10d..c52a3257926baa 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx
@@ -20,9 +20,9 @@ export default function UnstyledSnackbar() {
 
   return (
     <React.Fragment>
-      <button type="button" onClick={handleClick}>
+      <TriggerButton type="button" onClick={handleClick}>
         Open snackbar
-      </button>
+      </TriggerButton>
       <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
         Hello World
       </StyledSnackbar>
@@ -31,14 +31,22 @@ export default function UnstyledSnackbar() {
 }
 
 const blue = {
-  50: '#F0F7FF',
+  200: '#99CCF3',
   400: '#3399FF',
-  600: '#0072E5',
-  900: '#003A75',
+  500: '#007FFF',
 };
 
 const grey = {
-  200: '#E0E3E7',
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 const snackbarInRight = keyframes`
@@ -51,6 +59,32 @@ const snackbarInRight = keyframes`
   }
 `;
 
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
+
 const StyledSnackbar = styled(Snackbar)(
   ({ theme }) => css`
     position: fixed;
@@ -62,17 +96,17 @@ const StyledSnackbar = styled(Snackbar)(
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
     border-radius: 8px;
-    border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
-      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
-      : `0 5px 13px -3px ${grey[200]}`};
+      ? `0 2px 8px rgba(0,0,0,0.5)`
+      : `0 2px 8px ${grey[200]}`};
     padding: 0.75rem;
-    color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
-    animation: ${snackbarInRight} 500ms;
+    animation: ${snackbarInRight} 200ms;
     transition: transform 0.2s ease-out;
   `,
 );
diff --git a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx.preview b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx.preview
index eed6c6ff410eb2..c4ed10fb83fcfb 100644
--- a/docs/data/base/components/snackbar/UnstyledSnackbar.tsx.preview
+++ b/docs/data/base/components/snackbar/UnstyledSnackbar.tsx.preview
@@ -1,7 +1,7 @@
 <React.Fragment>
-  <button type="button" onClick={handleClick}>
+  <TriggerButton type="button" onClick={handleClick}>
     Open snackbar
-  </button>
+  </TriggerButton>
   <StyledSnackbar open={open} autoHideDuration={5000} onClose={handleClose}>
     Hello World
   </StyledSnackbar>
diff --git a/docs/data/base/components/snackbar/UseSnackbar.js b/docs/data/base/components/snackbar/UseSnackbar.js
index be4e29e88cee7e..49cca9e35012c1 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.js
+++ b/docs/data/base/components/snackbar/UseSnackbar.js
@@ -22,9 +22,9 @@ export default function UseSnackbar() {
 
   return (
     <React.Fragment>
-      <button type="button" onClick={handleOpen}>
-        Open Snackbar
-      </button>
+      <TriggerButton type="button" onClick={handleOpen}>
+        Open snackbar
+      </TriggerButton>
       {open ? (
         <ClickAwayListener onClickAway={onClickAway}>
           <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
@@ -35,14 +35,22 @@ export default function UseSnackbar() {
 }
 
 const blue = {
-  50: '#F0F7FF',
+  200: '#99CCF3',
   400: '#3399FF',
-  600: '#0072E5',
-  900: '#003A75',
+  500: '#007FFF',
 };
 
 const grey = {
-  200: '#E0E3E7',
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 const snackbarInRight = keyframes`
@@ -55,28 +63,54 @@ const snackbarInRight = keyframes`
   }
 `;
 
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
+
 const CustomSnackbar = styled('div')(
   ({ theme }) => css`
     position: fixed;
     z-index: 5500;
     display: flex;
     right: 16px;
-    top: 16px;
+    bottom: 16px;
     left: auto;
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
     border-radius: 8px;
-    border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
-      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
-      : `0 5px 13px -3px ${grey[200]}`};
+      ? `0 2px 8px rgba(0,0,0,0.5)`
+      : `0 2px 8px ${grey[200]}`};
     padding: 0.75rem;
-    color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
-    animation: ${snackbarInRight} 500ms;
+    animation: ${snackbarInRight} 200ms;
     transition: transform 0.2s ease-out;
   `,
 );
diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx b/docs/data/base/components/snackbar/UseSnackbar.tsx
index be4e29e88cee7e..49cca9e35012c1 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.tsx
+++ b/docs/data/base/components/snackbar/UseSnackbar.tsx
@@ -22,9 +22,9 @@ export default function UseSnackbar() {
 
   return (
     <React.Fragment>
-      <button type="button" onClick={handleOpen}>
-        Open Snackbar
-      </button>
+      <TriggerButton type="button" onClick={handleOpen}>
+        Open snackbar
+      </TriggerButton>
       {open ? (
         <ClickAwayListener onClickAway={onClickAway}>
           <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
@@ -35,14 +35,22 @@ export default function UseSnackbar() {
 }
 
 const blue = {
-  50: '#F0F7FF',
+  200: '#99CCF3',
   400: '#3399FF',
-  600: '#0072E5',
-  900: '#003A75',
+  500: '#007FFF',
 };
 
 const grey = {
-  200: '#E0E3E7',
+  50: '#f6f8fa',
+  100: '#eaeef2',
+  200: '#d0d7de',
+  300: '#afb8c1',
+  400: '#8c959f',
+  500: '#6e7781',
+  600: '#57606a',
+  700: '#424a53',
+  800: '#32383f',
+  900: '#24292f',
 };
 
 const snackbarInRight = keyframes`
@@ -55,28 +63,54 @@ const snackbarInRight = keyframes`
   }
 `;
 
+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: 6px 12px;
+  line-height: 1.5;
+  background: transparent;
+  border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
+  color: ${theme.palette.mode === 'dark' ? grey[100] : grey[900]};
+
+  &:hover {
+    background: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+    border-color: ${theme.palette.mode === 'dark' ? grey[600] : grey[300]};
+  }
+
+  &:focus-visible {
+    border-color: ${blue[400]};
+    outline: 3px solid ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+  }
+  `,
+);
+
 const CustomSnackbar = styled('div')(
   ({ theme }) => css`
     position: fixed;
     z-index: 5500;
     display: flex;
     right: 16px;
-    top: 16px;
+    bottom: 16px;
     left: auto;
     justify-content: start;
     max-width: 560px;
     min-width: 300px;
-    background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[50]};
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
     border-radius: 8px;
-    border: 1px solid ${theme.palette.mode === 'dark' ? blue[600] : blue[400]};
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[700] : grey[200]};
     box-shadow: ${theme.palette.mode === 'dark'
-      ? `0 5px 13px -3px rgba(0,0,0,0.4)`
-      : `0 5px 13px -3px ${grey[200]}`};
+      ? `0 2px 8px rgba(0,0,0,0.5)`
+      : `0 2px 8px ${grey[200]}`};
     padding: 0.75rem;
-    color: ${theme.palette.mode === 'dark' ? '#fff' : blue[900]};
+    color: ${theme.palette.mode === 'dark' ? grey[50] : grey[900]};
     font-family: IBM Plex Sans, sans-serif;
     font-weight: 600;
-    animation: ${snackbarInRight} 500ms;
+    animation: ${snackbarInRight} 200ms;
     transition: transform 0.2s ease-out;
   `,
 );
diff --git a/docs/data/base/components/snackbar/UseSnackbar.tsx.preview b/docs/data/base/components/snackbar/UseSnackbar.tsx.preview
index 51f73579c11833..4dcc6aa4c7da78 100644
--- a/docs/data/base/components/snackbar/UseSnackbar.tsx.preview
+++ b/docs/data/base/components/snackbar/UseSnackbar.tsx.preview
@@ -1,7 +1,7 @@
 <React.Fragment>
-  <button type="button" onClick={handleOpen}>
-    Open Snackbar
-  </button>
+  <TriggerButton type="button" onClick={handleOpen}>
+    Open snackbar
+  </TriggerButton>
   {open ? (
     <ClickAwayListener onClickAway={onClickAway}>
       <CustomSnackbar {...getRootProps()}>Hello World</CustomSnackbar>
diff --git a/docs/data/base/components/table-pagination/TableUnstyled.js b/docs/data/base/components/table-pagination/TableUnstyled.js
index 843e4e3da56097..a77c1c6da08f42 100644
--- a/docs/data/base/components/table-pagination/TableUnstyled.js
+++ b/docs/data/base/components/table-pagination/TableUnstyled.js
@@ -100,24 +100,33 @@ const rows = [
   createData('Oreo', 437, 18.0),
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
-const Root = styled('div')`
+const grey = {
+  200: '#d0d7de',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const Root = styled('div')(
+  ({ theme }) => `
   table {
-    font-family: arial, sans-serif;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
     border-collapse: collapse;
     width: 100%;
   }
 
   td,
   th {
-    border: 1px solid #ddd;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     text-align: left;
     padding: 8px;
   }
 
   th {
-    background-color: #ddd;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   }
-`;
+  `,
+);
 
 const CustomTablePagination = styled(TablePagination)`
   & .${classes.toolbar} {
diff --git a/docs/data/base/components/table-pagination/TableUnstyled.tsx b/docs/data/base/components/table-pagination/TableUnstyled.tsx
index 65ba7f71044c0f..4bf1bcb26cf7e5 100644
--- a/docs/data/base/components/table-pagination/TableUnstyled.tsx
+++ b/docs/data/base/components/table-pagination/TableUnstyled.tsx
@@ -104,24 +104,33 @@ const rows = [
   createData('Oreo', 437, 18.0),
 ].sort((a, b) => (a.calories < b.calories ? -1 : 1));
 
-const Root = styled('div')`
+const grey = {
+  200: '#d0d7de',
+  800: '#32383f',
+  900: '#24292f',
+};
+
+const Root = styled('div')(
+  ({ theme }) => `
   table {
-    font-family: arial, sans-serif;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
     border-collapse: collapse;
     width: 100%;
   }
 
   td,
   th {
-    border: 1px solid #ddd;
+    border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     text-align: left;
     padding: 8px;
   }
 
   th {
-    background-color: #ddd;
+    background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
   }
-`;
+  `,
+);
 
 const CustomTablePagination = styled(TablePagination)`
   & .${classes.toolbar} {
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.js b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.js
index 136b303e9990bd..3d7b32fd0c12f5 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.js
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.js
@@ -92,7 +92,7 @@ const Root = styled('div')(
     font-size: 0.875rem;
     width: 100%;
     background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    box-shadow: 0px 4px 30px ${
+    box-shadow: 0px 2px 16px ${
       theme.palette.mode === 'dark' ? grey[900] : grey[200]
     };
     border-radius: 12px;
@@ -136,7 +136,7 @@ const CustomTablePagination = styled(TablePagination)(
   }
 
   & .${classes.select}{
-    padding: 2px;
+    padding: 2px 6px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-radius: 50px;
     background-color: transparent;
@@ -169,12 +169,12 @@ const CustomTablePagination = styled(TablePagination)(
   & .${classes.actions} > button {
     margin: 0 8px;
     border: transparent;
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: transparent;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
 
     &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     }
 
     &:focus {
diff --git a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.tsx b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.tsx
index 0e07b85fe8e884..3c2dd5369acc2f 100644
--- a/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.tsx
+++ b/docs/data/base/components/table-pagination/UnstyledPaginationIntroduction.tsx
@@ -97,7 +97,7 @@ const Root = styled('div')(
     font-size: 0.875rem;
     width: 100%;
     background-color: ${theme.palette.mode === 'dark' ? grey[900] : '#fff'};
-    box-shadow: 0px 4px 30px ${
+    box-shadow: 0px 2px 16px ${
       theme.palette.mode === 'dark' ? grey[900] : grey[200]
     };
     border-radius: 12px;
@@ -141,7 +141,7 @@ const CustomTablePagination = styled(TablePagination)(
   }
 
   & .${classes.select}{
-    padding: 2px;
+    padding: 2px 6px;
     border: 1px solid ${theme.palette.mode === 'dark' ? grey[800] : grey[200]};
     border-radius: 50px;
     background-color: transparent;
@@ -174,12 +174,12 @@ const CustomTablePagination = styled(TablePagination)(
   & .${classes.actions} > button {
     margin: 0 8px;
     border: transparent;
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: transparent;
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
 
     &:hover {
-      background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[50]};
+      background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     }
 
     &:focus {
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.js b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
index 948cbfd37d76dc..73467de1f2f5e6 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.js
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.js
@@ -1,12 +1,59 @@
 import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
 
 export default function EmptyTextarea() {
-  return (
-    <TextareaAutosize
-      aria-label="empty textarea"
-      placeholder="Empty"
-      style={{ width: 200 }}
-    />
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px;
+    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 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
   );
+
+  return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
 }
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
index 948cbfd37d76dc..73467de1f2f5e6 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx
@@ -1,12 +1,59 @@
 import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
 
 export default function EmptyTextarea() {
-  return (
-    <TextareaAutosize
-      aria-label="empty textarea"
-      placeholder="Empty"
-      style={{ width: 200 }}
-    />
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px;
+    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 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
   );
+
+  return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
 }
diff --git a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview
index ddba1a325d06a7..eda12bcc18a053 100644
--- a/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/EmptyTextarea.tsx.preview
@@ -1,5 +1 @@
-<TextareaAutosize
-  aria-label="empty textarea"
-  placeholder="Empty"
-  style={{ width: 200 }}
-/>
\ No newline at end of file
+<StyledTextarea aria-label="empty textarea" placeholder="Empty" />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
index 224da39a8915bf..17cd9c61aa2a75 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.js
@@ -1,15 +1,67 @@
 import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    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 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
 
-export default function MaxHeightTextarea() {
   return (
-    <TextareaAutosize
+    <StyledTextarea
       maxRows={4}
       aria-label="maximum height"
       placeholder="Maximum 4 rows"
       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua."
-      style={{ width: 200 }}
+        ut labore et dolore magna aliqua."
     />
   );
 }
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
index 224da39a8915bf..17cd9c61aa2a75 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx
@@ -1,15 +1,67 @@
 import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    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 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
 
-export default function MaxHeightTextarea() {
   return (
-    <TextareaAutosize
+    <StyledTextarea
       maxRows={4}
       aria-label="maximum height"
       placeholder="Maximum 4 rows"
       defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-          ut labore et dolore magna aliqua."
-      style={{ width: 200 }}
+        ut labore et dolore magna aliqua."
     />
   );
 }
diff --git a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview
index 4d769cae273a54..4cde97a0835d5f 100644
--- a/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/MaxHeightTextarea.tsx.preview
@@ -1,8 +1,7 @@
-<TextareaAutosize
+<StyledTextarea
   maxRows={4}
   aria-label="maximum height"
   placeholder="Maximum 4 rows"
   defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
-      ut labore et dolore magna aliqua."
-  style={{ width: 200 }}
+    ut labore et dolore magna aliqua."
 />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
index 0f98e5a209b525..111539a8c65da4 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.js
@@ -1,13 +1,65 @@
 import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    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 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
 
-export default function MinHeightTextarea() {
   return (
-    <TextareaAutosize
+    <StyledTextarea
       aria-label="minimum height"
       minRows={3}
       placeholder="Minimum 3 rows"
-      style={{ width: 200 }}
     />
   );
 }
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
index 0f98e5a209b525..111539a8c65da4 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx
@@ -1,13 +1,65 @@
 import * as React from 'react';
 import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    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 2px 2px ${theme.palette.mode === 'dark' ? grey[900] : grey[50]};
+  
+    &:hover {
+      border-color: ${blue[400]};
+    }
+  
+    &:focus {
+      border-color: ${blue[400]};
+      box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
 
-export default function MinHeightTextarea() {
   return (
-    <TextareaAutosize
+    <StyledTextarea
       aria-label="minimum height"
       minRows={3}
       placeholder="Minimum 3 rows"
-      style={{ width: 200 }}
     />
   );
 }
diff --git a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview
index f56b4f1227ce73..54d6244d737de8 100644
--- a/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview
+++ b/docs/data/base/components/textarea-autosize/MinHeightTextarea.tsx.preview
@@ -1,6 +1,5 @@
-<TextareaAutosize
+<StyledTextarea
   aria-label="minimum height"
   minRows={3}
   placeholder="Minimum 3 rows"
-  style={{ width: 200 }}
 />
\ No newline at end of file
diff --git a/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.js b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.js
new file mode 100644
index 00000000000000..eae800098f462a
--- /dev/null
+++ b/docs/data/base/components/textarea-autosize/UnstyledTextareaIntroduction.js
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import TextareaAutosize from '@mui/base/TextareaAutosize';
+import { styled } from '@mui/system';
+
+export default function EmptyTextarea() {
+  const blue = {
+    100: '#DAECFF',
+    200: '#b6daff',
+    400: '#3399FF',
+    500: '#007FFF',
+    600: '#0072E5',
+    900: '#003A75',
+  };
+
+  const grey = {
+    50: '#f6f8fa',
+    100: '#eaeef2',
+    200: '#d0d7de',
+    300: '#afb8c1',
+    400: '#8c959f',
+    500: '#6e7781',
+    600: '#57606a',
+    700: '#424a53',
+    800: '#32383f',
+    900: '#24292f',
+  };
+
+  const StyledTextarea = styled(TextareaAutosize)(
+    ({ theme }) => `
+    width: 320px;
+    font-family: IBM Plex Sans, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 400;
+    line-height: 1.5;
+    padding: 12px;
+    border-radius: 12px 12px 0 12px;
+    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 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[600] : blue[200]};
+    }
+  
+    // firefox
+    &:focus-visible {
+      outline: 0;
+    }
+  `,
+  );
+
+  return <StyledTextarea aria-label="empty textarea" placeholder="Empty" />;
+}
diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md
index 9742b222cde48f..d9672050f105cc 100644
--- a/docs/data/base/components/textarea-autosize/textarea-autosize.md
+++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md
@@ -19,6 +19,8 @@ Textarea Autosize is a utility component that replaces the native `<textarea>` H
 
 The height of the Textarea Autosize component automatically adjusts as a response to keyboard inputs and window resizing events.
 
+{{"demo": "UnstyledTextareaIntroduction.js", "defaultCodeOpen": false, "bg": "gradient"}}
+
 ## Component
 
 ### Usage