From d9f54a8cab10e821c6ee5b11c66acc36ee05353a Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 4 Mar 2024 16:24:46 -0300
Subject: [PATCH] update the demos to use rem and hardcoded color values

---
 docs/data/system/getting-started/usage/Demo.js  | 11 +++++------
 docs/data/system/getting-started/usage/Demo.tsx | 11 +++++------
 docs/data/system/getting-started/usage/Why.js   | 10 ++++++----
 docs/data/system/getting-started/usage/Why.tsx  | 10 ++++++----
 4 files changed, 22 insertions(+), 20 deletions(-)

diff --git a/docs/data/system/getting-started/usage/Demo.js b/docs/data/system/getting-started/usage/Demo.js
index a566306cf4ea15..f07c23b3a7cc45 100644
--- a/docs/data/system/getting-started/usage/Demo.js
+++ b/docs/data/system/getting-started/usage/Demo.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { alpha } from '@mui/system';
 import Box from '@mui/system/Box';
 
 export default function Demo() {
@@ -37,12 +36,12 @@ export default function Demo() {
           gap: 0.5,
         }}
       >
-        <Box component="span" sx={{ fontSize: 14, color: 'text.secondary' }}>
+        <Box component="span" sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
           123 Main St, Phoenix AZ
         </Box>
         <Box
           component="span"
-          sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+          sx={{ color: 'primary.main', fontSize: '1.5rem', fontWeight: 'bold' }}
         >
           $280,000 — $310,000
         </Box>
@@ -50,14 +49,14 @@ export default function Demo() {
           sx={{
             py: 0.5,
             px: 1,
-            backgroundColor: (theme) => alpha(theme.palette.success.main, 0.1),
+            backgroundColor: 'rgba(46, 125, 50, 0.1)',
             borderRadius: 10,
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
             border: '1px solid',
-            borderColor: (theme) => alpha(theme.palette.success.main, 0.1),
-            fontSize: 11,
+            borderColor: 'rgba(46, 125, 50, 0.1)',
+            fontSize: '0.7rem',
             fontWeight: 'bold',
             letterSpacing: '.05rem',
             textTransform: 'uppercase',
diff --git a/docs/data/system/getting-started/usage/Demo.tsx b/docs/data/system/getting-started/usage/Demo.tsx
index a566306cf4ea15..f07c23b3a7cc45 100644
--- a/docs/data/system/getting-started/usage/Demo.tsx
+++ b/docs/data/system/getting-started/usage/Demo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { alpha } from '@mui/system';
 import Box from '@mui/system/Box';
 
 export default function Demo() {
@@ -37,12 +36,12 @@ export default function Demo() {
           gap: 0.5,
         }}
       >
-        <Box component="span" sx={{ fontSize: 14, color: 'text.secondary' }}>
+        <Box component="span" sx={{ fontSize: '0.875rem', color: 'text.secondary' }}>
           123 Main St, Phoenix AZ
         </Box>
         <Box
           component="span"
-          sx={{ color: 'primary.main', fontSize: 24, fontWeight: 'bold' }}
+          sx={{ color: 'primary.main', fontSize: '1.5rem', fontWeight: 'bold' }}
         >
           $280,000 — $310,000
         </Box>
@@ -50,14 +49,14 @@ export default function Demo() {
           sx={{
             py: 0.5,
             px: 1,
-            backgroundColor: (theme) => alpha(theme.palette.success.main, 0.1),
+            backgroundColor: 'rgba(46, 125, 50, 0.1)',
             borderRadius: 10,
             display: 'flex',
             alignItems: 'center',
             gap: 0.5,
             border: '1px solid',
-            borderColor: (theme) => alpha(theme.palette.success.main, 0.1),
-            fontSize: 11,
+            borderColor: 'rgba(46, 125, 50, 0.1)',
+            fontSize: '0.7rem',
             fontWeight: 'bold',
             letterSpacing: '.05rem',
             textTransform: 'uppercase',
diff --git a/docs/data/system/getting-started/usage/Why.js b/docs/data/system/getting-started/usage/Why.js
index bd0e9a31216690..dd6d81e8faa518 100644
--- a/docs/data/system/getting-started/usage/Why.js
+++ b/docs/data/system/getting-started/usage/Why.js
@@ -15,17 +15,19 @@ export default function Why() {
       }}
     >
       <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
-      <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
+      <Box
+        sx={{ color: 'text.primary', fontSize: '2.125rem', fontWeight: 'medium' }}
+      >
         98.3 K
       </Box>
       <Box
         component={TrendingUpIcon}
-        sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }}
+        sx={{ color: 'success.dark', fontSize: '1rem', verticalAlign: 'sub' }}
       />
       <Box
         sx={{
           display: 'inline',
-          fontSize: 14,
+          fontSize: '0.875rem',
           fontWeight: 'bold',
           color: 'success.dark',
           mx: 0.5,
@@ -33,7 +35,7 @@ export default function Why() {
       >
         18.7%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
+      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: '0.875rem' }}>
         vs. last week
       </Box>
     </Box>
diff --git a/docs/data/system/getting-started/usage/Why.tsx b/docs/data/system/getting-started/usage/Why.tsx
index bd0e9a31216690..dd6d81e8faa518 100644
--- a/docs/data/system/getting-started/usage/Why.tsx
+++ b/docs/data/system/getting-started/usage/Why.tsx
@@ -15,17 +15,19 @@ export default function Why() {
       }}
     >
       <Box sx={{ color: 'text.secondary' }}>Sessions</Box>
-      <Box sx={{ color: 'text.primary', fontSize: 34, fontWeight: 'medium' }}>
+      <Box
+        sx={{ color: 'text.primary', fontSize: '2.125rem', fontWeight: 'medium' }}
+      >
         98.3 K
       </Box>
       <Box
         component={TrendingUpIcon}
-        sx={{ color: 'success.dark', fontSize: 16, verticalAlign: 'sub' }}
+        sx={{ color: 'success.dark', fontSize: '1rem', verticalAlign: 'sub' }}
       />
       <Box
         sx={{
           display: 'inline',
-          fontSize: 14,
+          fontSize: '0.875rem',
           fontWeight: 'bold',
           color: 'success.dark',
           mx: 0.5,
@@ -33,7 +35,7 @@ export default function Why() {
       >
         18.7%
       </Box>
-      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: 14 }}>
+      <Box sx={{ color: 'text.secondary', display: 'inline', fontSize: '0.875rem' }}>
         vs. last week
       </Box>
     </Box>