add color, text, and spacing adjustments throughout

danilo-leal · Mar 18, 2024 · fa4139e · fa4139e
1 parent c25a407
commit fa4139e
Show file tree

Hide file tree

Showing 16 changed files with 53 additions and 64 deletions.
diff --git a/docs/src/components/about/Team.tsx b/docs/src/components/about/Team.tsx
@@ -123,7 +123,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
                 borderRadius: 40,
                 border: '2px solid',
                 borderColor: 'primary.50',
-                boxShadow: '0px 2px 8px rgba(0, 0, 0, 0.15)',
+                boxShadow: '0px 2px 6px rgba(0, 0, 0, 0.1)',
                 transform: 'translateX(50%)',
                 overflow: 'hidden',
                 ...theme.applyDarkStyles({
@@ -185,7 +185,7 @@ function Person(props: Profile & { sx?: PaperProps['sx'] }) {
       </Typography>
       {props.about && <Divider sx={{ my: 1.5 }} />}
       {props.about && (
-        <Typography variant="body2" color="grey.600">
+        <Typography variant="body2" color="text.tertiary">
           {props.about}
         </Typography>
       )}

diff --git a/docs/src/components/pricing/LicensingModelSwitch.tsx b/docs/src/components/pricing/LicensingModelSwitch.tsx
@@ -17,7 +17,8 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   borderColor: (theme.vars || theme).palette.grey[100],
   backgroundColor: (theme.vars || theme).palette.grey[50],
   '&:has(.Mui-focusVisible)': {
-    outline: `2px solid ${(theme.vars || theme).palette.primary.main}`,
+    outline: `3px solid ${alpha(theme.palette.primary[500], 0.5)}`,
+    outlineOffset: '2px',
   },
   '& .MuiTabs-scroller, & .MuiTab-root': {
     // Override inline-style to see the box-shadow
@@ -32,14 +33,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
     fontWeight: theme.typography.fontWeightSemiBold,
     minWidth: 0,
     minHeight: 0,
-    color: (theme.vars || theme).palette.grey[600],
+    color: (theme.vars || theme).palette.text.tertiary,
     borderRadius: 20,
     zIndex: 2,
     '&:hover': {
-      color: (theme.vars || theme).palette.grey[800],
+      color: (theme.vars || theme).palette.text.primary,
     },
     '&.Mui-selected': {
-      color: (theme.vars || theme).palette.primary[500],
+      color: (theme.vars || theme).palette.primary[600],
       fontWeight: theme.typography.fontWeightSemiBold,
     },
     '&.Mui-focusVisible': {
@@ -58,19 +59,14 @@ const StyledTabs = styled(Tabs)(({ theme }) => ({
   ...theme.applyDarkStyles({
     borderColor: (theme.vars || theme).palette.primaryDark[700],
     backgroundColor: (theme.vars || theme).palette.primaryDark[900],
-    color: (theme.vars || theme).palette.grey[400],
     '& .MuiTabs-indicator': {
       height: '100%',
       borderRadius: 20,
       backgroundColor: alpha(theme.palette.primaryDark[600], 0.5),
-      borderColor: (theme.vars || theme).palette.primaryDark[500],
+      borderColor: (theme.vars || theme).palette.primaryDark[600],
       boxShadow: `0px 1px 4px ${(theme.vars || theme).palette.common.black}`,
     },
     '& .MuiTab-root': {
-      color: (theme.vars || theme).palette.grey[400],
-      '&:hover': {
-        color: (theme.vars || theme).palette.grey[300],
-      },
       '&.Mui-selected': {
         color: (theme.vars || theme).palette.primary[200],
       },

diff --git a/docs/src/components/pricing/PricingTable.tsx b/docs/src/components/pricing/PricingTable.tsx
@@ -1338,8 +1338,8 @@ export default function PricingTable({
           sx={[
             (theme) => ({
               px: 1,
-              py: 1.5,
               justifyContent: 'flex-start',
+              fontSize: '0.875rem',
               fontWeight: 'medium',
               borderRadius: '0px',
               position: 'absolute',
@@ -1489,8 +1489,8 @@ export default function PricingTable({
           sx={[
             (theme) => ({
               px: 1,
-              py: 1.5,
               justifyContent: 'flex-start',
+              fontSize: '0.875rem',
               fontWeight: 'medium',
               borderRadius: '0px',
               position: 'absolute',

diff --git a/docs/src/components/productX/XHero.tsx b/docs/src/components/productX/XHero.tsx
@@ -141,7 +141,7 @@ export default function XHero() {
               ...theme.applyDarkStyles({
                 borderColor: 'primaryDark.700',
                 backgroundColor: 'primaryDark.900',
-                boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
               }),
             })}
           >
@@ -281,7 +281,7 @@ export default function XHero() {
                 ...theme.applyDarkStyles({
                   borderColor: 'primaryDark.700',
                   backgroundColor: 'primaryDark.900',
-                  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                  boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
                 }),
               })}
             >
@@ -338,7 +338,7 @@ export default function XHero() {
                 (theme) =>
                   theme.applyDarkStyles({
                     borderColor: 'primaryDark.700',
-                    boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                    boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
                     backgroundColor: 'primaryDark.900',
                     '& .MuiDateRangePickerDay-day.Mui-selected': {
                       color: '#FFF',

diff --git a/docs/src/components/showcase/FolderTable.tsx b/docs/src/components/showcase/FolderTable.tsx
@@ -91,6 +91,7 @@ export default function BasicTable() {
       sx={[
         {
           maxWidth: 260,
+          borderColor: 'grey.200',
           boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           [`& .${tableCellClasses.root}`]: {
             borderColor: 'grey.200',
@@ -103,7 +104,7 @@ export default function BasicTable() {
           theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
             borderColor: 'primaryDark.700',
-            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+            boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
             [`& .${tableCellClasses.root}`]: {
               borderColor: 'primaryDark.700',
             },

diff --git a/docs/src/components/showcase/NotificationCard.tsx b/docs/src/components/showcase/NotificationCard.tsx
@@ -17,11 +17,12 @@ export default function NotificationCard() {
           p: 2,
           gap: 2,
           maxWidth: 283,
+          borderColor: 'grey.200',
           boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
             borderColor: 'primaryDark.700',
-            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+            boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
           }),
         })}
       >

diff --git a/docs/src/components/showcase/PlayerCard.tsx b/docs/src/components/showcase/PlayerCard.tsx
@@ -28,7 +28,7 @@ export default function PlayerCard({ disableTheming }: { disableTheming?: boolea
             alignItems: 'center',
             gap: 2,
             ...(!disableTheming && {
-              borderColor: 'divider',
+              borderColor: 'grey.200',
               boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
               [`& .${iconButtonClasses.root}`]: {
                 border: '1px solid',
@@ -52,7 +52,7 @@ export default function PlayerCard({ disableTheming }: { disableTheming?: boolea
             ((theme) =>
               theme.applyDarkStyles({
                 bgcolor: 'primaryDark.900',
-                boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
                 [`& .${iconButtonClasses.root}`]: {
                   bgcolor: 'primary.900',
                   color: 'primary.200',

diff --git a/docs/src/components/showcase/RealEstateCard.tsx b/docs/src/components/showcase/RealEstateCard.tsx
@@ -21,7 +21,7 @@ export default function RealEstateCard({ sx, ...props }: CardProps) {
           boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
-            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+            boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
           }),
         }),
         ...(Array.isArray(sx) ? sx : [sx]),

diff --git a/docs/src/components/showcase/TaskCard.tsx b/docs/src/components/showcase/TaskCard.tsx
@@ -20,10 +20,9 @@ export default function TaskCard() {
           display: 'flex',
           flexDirection: 'column',
           p: 3,
-          background: `linear-gradient(to right bottom, ${
-            (theme.vars || theme).palette.primary[500]
-          }, ${(theme.vars || theme).palette.primary[600]} 120%)`,
-          boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
+          background:
+            'linear-gradient(180deg, var(--muidocs-palette-primary-600) 0%, var(--muidocs-palette-primary-700) 100%)',
+          boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.04)',
         })}
       >
         <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.8 }}>

diff --git a/docs/src/components/showcase/ThemeAccordion.tsx b/docs/src/components/showcase/ThemeAccordion.tsx
@@ -24,6 +24,7 @@ export default function ThemeAccordion() {
           {
             [`& .${accordionClasses.root}`]: {
               bgcolor: '#fff',
+              borderColor: 'grey.200',
               boxShadow: (theme) => `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
 
               [`&.${accordionClasses.expanded}`]: {
@@ -59,7 +60,7 @@ export default function ThemeAccordion() {
               [`& .${accordionClasses.root}`]: {
                 bgcolor: 'primaryDark.900',
                 borderColor: 'primaryDark.700',
-                boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
               },
               [`& .${accordionSummaryClasses.root}`]: {
                 [`& .${accordionSummaryClasses.content}`]: {

diff --git a/docs/src/components/showcase/ThemeDatePicker.tsx b/docs/src/components/showcase/ThemeDatePicker.tsx
@@ -95,7 +95,7 @@ export default function ThemeDatePicker() {
                 '& > div': {
                   borderColor: 'primaryDark.700',
                   bgcolor: 'primaryDark.900',
-                  boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+                  boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
                 },
                 [`& .${iconButtonClasses.root}`]: {
                   color: 'primary.300',

diff --git a/docs/src/components/showcase/ThemeSlider.tsx b/docs/src/components/showcase/ThemeSlider.tsx
@@ -25,7 +25,7 @@ export default function ThemeSlider() {
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
             borderColor: 'primaryDark.700',
-            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+            boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
           }),
         })}
       >
@@ -36,7 +36,6 @@ export default function ThemeSlider() {
           valueLabelFormat={valuetext}
           valueLabelDisplay="on"
           marks={[
-            { value: 0, label: '0ºC' },
             { value: 10 },
             { value: 20, label: '20ºC' },
             { value: 30 },
@@ -46,17 +45,15 @@ export default function ThemeSlider() {
             { value: 70 },
             { value: 80, label: '80ºC' },
             { value: 90 },
-            { value: 100, label: '100ºC' },
           ]}
           sx={[
             {
-              display: 'inline-block',
-              width: '100%',
-              color: 'primary.500',
+              display: 'inline-flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              color: 'primary.main',
               height: 6,
-              margin: 0,
-              pt: 2,
-              pb: 2,
+              m: 0,
               [`& .${sliderClasses.rail}`]: {
                 opacity: 1,
                 bgcolor: 'grey.200',
@@ -65,24 +62,26 @@ export default function ThemeSlider() {
                 border: 'none',
               },
               [`& .${sliderClasses.mark}`]: {
-                color: 'transparent',
+                color: 'text.tertiary',
               },
               [`& .${sliderClasses.markLabel}`]: {
-                color: 'grey.900',
+                color: 'text.secondary',
                 fontSize: '0.75rem',
-                fontWeight: 600,
+                fontWeight: 'semiBold',
               },
               [`& .${sliderClasses.thumb}`]: {
-                width: 12,
-                height: 12,
+                mx: -1,
+                width: 16,
+                height: 16,
                 '&::before': {
                   boxShadow: 'none',
                 },
               },
               [`& .${sliderClasses.valueLabel}`]: {
                 backgroundColor: 'transparent',
                 color: 'primary.600',
-                fontWeight: 700,
+                fontSize: '0.75rem',
+                fontWeight: 'bold',
                 padding: 0,
                 [`& .${sliderClasses.valueLabelOpen}`]: {
                   transform: 'none',
@@ -92,15 +91,11 @@ export default function ThemeSlider() {
             },
             (theme) =>
               theme.applyDarkStyles({
-                color: 'primary.400',
                 [`& .${sliderClasses.rail}`]: {
                   bgcolor: 'primaryDark.600',
                 },
-                [`& .${sliderClasses.markLabel}`]: {
-                  color: 'grey.600',
-                },
                 [`& .${sliderClasses.valueLabel}`]: {
-                  color: 'primary.200',
+                  color: 'primary.300',
                 },
               }),
           ]}

diff --git a/docs/src/components/showcase/ThemeTabs.tsx b/docs/src/components/showcase/ThemeTabs.tsx
@@ -19,10 +19,10 @@ export default function ThemeTabs() {
         variant="fullWidth"
         sx={[
           {
-            background:
-              'linear-gradient(180deg, var(--muidocs-palette-primary-500) 0%, var(--muidocs-palette-primary-600) 100%)',
             borderRadius: 1,
-            boxShadow: '0px 20px 25px rgba(0, 0, 0, 0.1), 0px 10px 10px rgba(0, 0, 0, 0.04)',
+            background:
+              'linear-gradient(180deg, var(--muidocs-palette-primary-600) 0%, var(--muidocs-palette-primary-700) 100%)',
+            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.1), 0px 2px 4px rgba(0, 0, 0, 0.04)',
             [`& .${tabsClasses.indicator}`]: {
               backgroundColor: 'transparent',
               '&::before': {
@@ -47,12 +47,6 @@ export default function ThemeTabs() {
               },
             },
           },
-          (theme) =>
-            theme.applyDarkStyles({
-              [`& .${tabClasses.root}`]: {
-                color: 'primary.200',
-              },
-            }),
         ]}
       >
         <Tab label="Material UI" />

diff --git a/docs/src/components/showcase/ThemeTimeline.tsx b/docs/src/components/showcase/ThemeTimeline.tsx
@@ -21,11 +21,12 @@ export default function BasicTimeline() {
           pb: 1,
           display: 'flex',
           alignItems: 'flex-start',
+          borderColor: 'grey.200',
           boxShadow: `0px 4px 8px ${alpha(theme.palette.grey[200], 0.6)}`,
           ...theme.applyDarkStyles({
             bgcolor: 'primaryDark.900',
             borderColor: 'primaryDark.700',
-            boxShadow: '0px 4px 8px rgba(0, 0, 0, 0.4)',
+            boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.2)',
           }),
         })}
       >
@@ -42,9 +43,12 @@ export default function BasicTimeline() {
             borderRadius: 0.3,
             bgcolor: 'primary.50',
             color: 'primary.600',
+            border: '1px solid',
+            borderColor: 'primary.100',
             ...theme.applyDarkStyles({
               bgcolor: 'primary.900',
               color: 'primary.50',
+              borderColor: 'primary.800',
             }),
           })}
         >

diff --git a/docs/src/components/showcase/ThemeToggleButton.tsx b/docs/src/components/showcase/ThemeToggleButton.tsx
@@ -20,8 +20,8 @@ export default function ThemeToggleButton() {
             bgcolor: '#fff',
             '& .MuiToggleButton-root': {
               textTransform: 'none',
-              fontWeight: 600,
-              color: 'grey.700',
+              fontWeight: 'medium',
+              color: 'text.secondary',
               '&.Mui-selected': {
                 color: 'primary.700',
                 bgcolor: 'primary.50',
@@ -32,7 +32,6 @@ export default function ThemeToggleButton() {
             theme.applyDarkStyles({
               bgcolor: 'primaryDark.900',
               '& .MuiToggleButton-root': {
-                color: 'grey.400',
                 '&.Mui-selected': {
                   color: 'primary.100',
                   bgcolor: 'primary.900',

diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -1178,8 +1178,8 @@ export function getThemedComponents(): ThemeOptions {
           root: ({ theme, ownerState }) => [
             {
               textTransform: 'none',
-              fontWeight: 500,
-              color: theme.palette.grey[700],
+              fontWeight: 'medium',
+              color: theme.palette.text.secondary,
               borderColor: theme.palette.grey[200],
               ...(ownerState.size === 'small' && {
                 padding: '0.375rem 0.75rem',
@@ -1194,7 +1194,6 @@ export function getThemedComponents(): ThemeOptions {
               },
             } as const,
             theme.applyDarkStyles({
-              color: theme.palette.grey[300],
               borderColor: theme.palette.primaryDark[700],
               '&:hover': {
                 backgroundColor: alpha(theme.palette.primaryDark[600], 0.2),