update the demos to use rem and hardcoded color values

mui · Mar 4, 2024 · d9f54a8 · d9f54a8
1 parent ef646ea
commit d9f54a8
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git 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,27 +36,27 @@ 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>
         <Box
           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
@@ -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,27 +36,27 @@ 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>
         <Box
           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
@@ -15,25 +15,27 @@ 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,
         }}
       >
         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
@@ -15,25 +15,27 @@ 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,
         }}
       >
         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>