[website] Add disabled button styles to branding theme (#43577)

mui · Sep 3, 2024 · b965951 · b965951
1 parent 715942d
commit b965951
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 0 deletions.
diff --git a/docs/pages/experiments/website/branding-theme-test.tsx b/docs/pages/experiments/website/branding-theme-test.tsx
@@ -80,6 +80,32 @@ export default function BrandingThemeTest() {
               <GitHubIcon fontSize="small" />
             </IconButton>
           </Stack>
+          <Stack direction="row" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
+            <Button variant="contained" size="small" color="primary" disabled>
+              Contained primary
+            </Button>
+            <Button variant="contained" size="small" color="secondary" disabled>
+              Contained secondary
+            </Button>
+            <Button variant="outlined" size="small" color="primary" disabled>
+              Outlined primary
+            </Button>
+            <Button variant="outlined" size="small" color="secondary" disabled>
+              Outlined secondary
+            </Button>
+            <Button variant="text" size="small" disabled>
+              This button
+            </Button>
+            <IconButton color="primary">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton color="info">
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+            <IconButton>
+              <GitHubIcon fontSize="small" />
+            </IconButton>
+          </Stack>
           <Stack direction="column" spacing={2} useFlexGap sx={{ width: 'fit-content', mt: 8 }}>
             <Button variant="contained" size="large" color="primary">
               Large

diff --git a/packages/mui-docs/src/branding/brandingTheme.ts b/packages/mui-docs/src/branding/brandingTheme.ts
@@ -588,6 +588,9 @@ export function getThemedComponents(): ThemeOptions {
                   '&:active': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[800],
                   },
+                  '&.Mui-disabled': {
+                    color: theme.palette.grey[500],
+                  },
                 }),
               }),
             ...(ownerState.variant === 'outlined' &&
@@ -615,6 +618,11 @@ export function getThemedComponents(): ThemeOptions {
                   '&:active': {
                     backgroundColor: alpha(theme.palette.primary[900], 0.3),
                   },
+                  '&.Mui-disabled': {
+                    background: 'none',
+                    backgroundColor: alpha(theme.palette.primaryDark[700], 0.2),
+                    color: theme.palette.grey[500],
+                  },
                 }),
               }),
             ...(ownerState.variant === 'contained' &&
@@ -635,6 +643,18 @@ export function getThemedComponents(): ThemeOptions {
                   borderColor: (theme.vars || theme).palette.primary[600],
                   boxShadow: `${alpha(theme.palette.primary[900], 0.7)} 0 1px 0 1px inset`,
                 },
+                '&.Mui-disabled': {
+                  color: theme.palette.grey[700],
+                  textShadow: 'none',
+                  borderColor: theme.palette.grey[400],
+                },
+                ...theme.applyDarkStyles({
+                  '&.Mui-disabled': {
+                    color: theme.palette.grey[400],
+                    textShadow: 'none',
+                    borderColor: theme.palette.grey[800],
+                  },
+                }),
               }),
             ...(ownerState.variant === 'contained' &&
               ownerState.color === 'secondary' && {
@@ -654,6 +674,18 @@ export function getThemedComponents(): ThemeOptions {
                   borderColor: (theme.vars || theme).palette.primaryDark[600],
                   boxShadow: `${alpha(theme.palette.primaryDark[900], 0.7)} 0 1px 0 1px inset`,
                 },
+                '&.Mui-disabled': {
+                  color: theme.palette.grey[700],
+                  textShadow: 'none',
+                  borderColor: theme.palette.grey[400],
+                },
+                ...theme.applyDarkStyles({
+                  '&.Mui-disabled': {
+                    color: theme.palette.grey[400],
+                    textShadow: 'none',
+                    borderColor: theme.palette.grey[800],
+                  },
+                }),
               }),
             ...(ownerState.variant === 'text' &&
               ownerState.color === 'secondary' && {
@@ -671,6 +703,9 @@ export function getThemedComponents(): ThemeOptions {
                   '&:active': {
                     backgroundColor: (theme.vars || theme).palette.primaryDark[700],
                   },
+                  '&.Mui-disabled': {
+                    color: theme.palette.grey[500],
+                  },
                 }),
               }),
             ...(ownerState.variant === 'text' &&
@@ -690,6 +725,9 @@ export function getThemedComponents(): ThemeOptions {
                   '&:active': {
                     backgroundColor: alpha(theme.palette.primary[900], 0.1),
                   },
+                  '&.Mui-disabled': {
+                    color: theme.palette.grey[500],
+                  },
                 }),
               }),
           }),