[website] Fine-tune branding buttons box shadows (#38731)

mui · Aug 31, 2023 · 0c2e09c · 0c2e09c
1 parent d6fc0fd
commit 0c2e09c
Showing 1 changed file with 40 additions and 22 deletions.
diff --git a/docs/src/modules/brandingTheme.ts b/docs/src/modules/brandingTheme.ts
@@ -478,18 +478,21 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.text.secondary,
                 backgroundColor: alpha(theme.palette.primaryDark[50], 0.3),
                 borderColor: (theme.vars || theme).palette.primaryDark[100],
-                boxShadow: `0px 2px 2px ${alpha(
-                  theme.palette.primaryDark[100],
-                  0.2,
-                )}, inset 0px 4px 4px ${alpha(theme.palette.primaryDark[100], 0.2)}`,
+                boxShadow: `0px 2px 1px ${alpha(
+                  theme.palette.grey[200],
+                  0.3,
+                )}, inset 0px 2px 3px ${alpha(theme.palette.primaryDark[100], 0.2)}`,
                 '&:hover': {
                   background: (theme.vars || theme).palette.primaryDark[50],
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primaryDark[100],
                   borderColor: (theme.vars || theme).palette.primaryDark[600],
                   backgroundColor: (theme.vars || theme).palette.primaryDark[700],
-                  boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
+                  boxShadow: `0px 2px 1px ${theme.palette.common.black}, inset 0px 2px 3px ${alpha(
+                    theme.palette.primaryDark[500],
+                    0.3,
+                  )}`,
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[600],
                   },
@@ -500,18 +503,18 @@ export function getThemedComponents(): ThemeOptions {
                 color: (theme.vars || theme).palette.primary[500],
                 backgroundColor: alpha(theme.palette.primary[50], 0.3),
                 borderColor: (theme.vars || theme).palette.primary[100],
-                boxShadow: `0px 2px 2px ${alpha(
+                boxShadow: `0px 1px 1px ${alpha(
                   theme.palette.primary[100],
-                  0.2,
-                )}, inset 0px 4px 4px ${alpha(theme.palette.primary[100], 0.1)}`,
+                  0.5,
+                )}, inset 0px 4px 2px ${alpha(theme.palette.primary[100], 0.1)}`,
                 '&:hover': {
                   background: (theme.vars || theme).palette.primary[50],
                   borderColor: (theme.vars || theme).palette.primary[300],
                 },
                 ...theme.applyDarkStyles({
                   color: (theme.vars || theme).palette.primary[200],
                   borderColor: (theme.vars || theme).palette.primary[900],
-                  backgroundColor: alpha(theme.palette.primary[900], 0.4),
+                  backgroundColor: alpha(theme.palette.primary[900], 0.2),
                   boxShadow: '0px 2px 2px #0B0D0E, inset 0px 4px 4px rgba(20, 25, 31, 0.3)',
                   '&:hover': {
                     backgroundColor: (theme.vars || theme).palette.primary[900],
@@ -529,21 +532,36 @@ export function getThemedComponents(): ThemeOptions {
             ...(ownerState.variant === 'contained' &&
               ownerState.color === 'primary' && {
                 color: '#FFF',
-                background: `linear-gradient(180deg, ${
-                  (theme.vars || theme).palette.primary[500]
-                } 0%, ${(theme.vars || theme).palette.primary[600]} 100%)`,
-                border: '1px solid',
-                borderColor: alpha(theme.palette.primary[400], 0.6),
-                boxShadow: `0px 2px 4px ${alpha(
-                  theme.palette.primary[700],
-                  0.2,
-                )}, inset 0px 2px 6px ${alpha(theme.palette.primary[100], 0.5)}`,
+                backgroundImage: `linear-gradient(180deg, ${alpha(
+                  theme.palette.primary[300],
+                  0.5,
+                )} 0%, ${alpha(theme.palette.primary[600], 0.5)} 100%)`,
+                boxShadow: `0px 1px 2px ${alpha(
+                  theme.palette.primary[900],
+                  0.1,
+                )}, inset 0px 0px 0px 1px ${
+                  theme.palette.primary[600]
+                }, inset 0px 0px 0px 2px rgba(255, 255, 255, 0.2), 0px 2px 1px ${alpha(
+                  theme.palette.primary[200],
+                  0.3,
+                )} `,
+                '&:hover': {
+                  backgroundColor: (theme.vars || theme).palette.primary[600],
+                },
                 textShadow: `0px 1px 1px ${alpha(theme.palette.grey[900], 0.3)}`,
                 ...theme.applyDarkStyles({
-                  boxShadow: `0px 2px 4px ${alpha(
-                    theme.palette.common.black,
-                    0.8,
-                  )}, inset 0px 4px 8px ${alpha(theme.palette.primary[200], 0.4)}`,
+                  backgroundImage: `linear-gradient(180deg, ${alpha(
+                    theme.palette.primary[400],
+                    0.2,
+                  )} 0%, ${alpha(theme.palette.primary[700], 0.8)} 100%)`,
+                  boxShadow: `0px 1px 2px ${alpha(
+                    theme.palette.primary[900],
+                    0.1,
+                  )}, inset 0px 0px 0px 1px ${
+                    theme.palette.primary[600]
+                  }, inset 0px 0px 0px 2px rgba(255, 255, 255, 0.1), 0px 2px 1px ${
+                    theme.palette.common.black
+                  } `,
                 }),
               }),
           }),