Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[website] Miscellaneous improvements to the marketing pages #33897

Merged
merged 5 commits into from Aug 15, 2022
Merged

[website] Miscellaneous improvements to the marketing pages #33897

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8a38312
style fixes to the demos on the home page
danilo-leal Aug 12, 2022
d2b08e5
swap for gradient background
danilo-leal Aug 12, 2022
a9c56e9
update a few texts colors
danilo-leal Aug 12, 2022
18483d2
more color fixes
danilo-leal Aug 12, 2022
1a5ddac
Merge branch 'master' of https://github.com/mui/material-ui into misc…
danilo-leal Aug 12, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/src/components/action/Highlighter.tsx
View file
Open in desktop
Expand Up @@ -45,15 +45,15 @@ export default function Highlighter({
border: '1px solid transparent',
transitionProperty: 'all',
transitionDuration: '150ms',
color: (theme) => (theme.palette.mode === 'dark' ? 'grey.600' : 'grey.500'),
color: (theme) => (theme.palette.mode === 'dark' ? 'primary.800' : 'primary.300'),
...((!disableBorder || selected) && {
borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.500' : 'grey.200'),
}),
...(selected && {
bgcolor: (theme) =>
theme.palette.mode === 'dark' ? 'primaryDark.700' : lightSelectedBg[selectedBg],
borderColor: (theme) => (theme.palette.mode === 'dark' ? 'primaryDark.300' : 'grey.200'),
color: (theme) => (theme.palette.mode === 'dark' ? 'primary.400' : 'primary.500'),
color: (theme) => (theme.palette.mode === 'dark' ? 'primary.300' : 'primary.500'),
}),
...(!selected && {
'&:hover, &:focus': {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/home/DiamondSponsors.tsx
View file
Open in desktop
Expand Up @@ -51,7 +51,7 @@ export default function DiamondSponsors() {
sx={{
color: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.primary[400]
? theme.palette.primary[300]
: theme.palette.primary[500],
}}
>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/home/GoldSponsors.tsx
View file
Open in desktop
Expand Up @@ -85,7 +85,7 @@ export default function GoldSponsors() {
sx={{
color: (theme) =>
theme.palette.mode === 'dark'
? theme.palette.warning[500]
? theme.palette.warning[300]
: theme.palette.warning[700],
}}
>
Expand Down
40 changes: 15 additions & 25 deletions docs/src/components/home/MaterialDesignComponents.tsx
View file
Open in desktop
Expand Up @@ -40,7 +40,9 @@ import Link from 'docs/src/modules/components/Link';
const Grid = styled('div')(({ theme }) => ({
borderRadius: theme.shape.borderRadius,
backgroundColor:
theme.palette.mode === 'dark' ? theme.palette.background.paper : theme.palette.grey[50],
theme.palette.mode === 'dark'
? theme.palette.background.paper
: alpha(theme.palette.grey[50], 0.4),
display: 'grid',
gridTemplateColumns: '1fr',
gridAutoRows: 240,
Expand All @@ -57,10 +59,10 @@ const Grid = styled('div')(({ theme }) => ({
padding: theme.spacing(2),
alignSelf: 'stretch',
border: '1px solid',
borderColor: theme.palette.divider,
'&:last-of-type': {
backgroundColor: theme.palette.background.default,
},
borderColor:
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[600], 0.3)
: theme.palette.grey[200],
[theme.breakpoints.only('xs')]: {
'&:first-of-type': {
borderTopLeftRadius: theme.shape.borderRadius,
Expand All @@ -69,7 +71,6 @@ const Grid = styled('div')(({ theme }) => ({
'&:last-of-type': {
borderBottomLeftRadius: theme.shape.borderRadius,
borderBottomRightRadius: theme.shape.borderRadius,
borderStyle: 'dashed',
},
'&:not(:first-of-type)': {
marginTop: -1,
Expand Down Expand Up @@ -175,7 +176,7 @@ function Demo({
})}
</ThemeProvider>
</Box>
<Typography fontWeight="bold" variant="body2">
<Typography fontWeight="semiBold" variant="body2">
{name}
</Typography>
</Box>
Expand Down Expand Up @@ -266,22 +267,6 @@ export function buildTheme(theme: Theme): ThemeOptions {
? theme.palette.primaryDark[400]
: theme.palette.primaryDark[600],
},
text: {
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[50]
: theme.palette.primaryDark[700],
},
outlined: {
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[300]
: theme.palette.primaryDark[600],
color:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[50]
: theme.palette.primaryDark[700],
},
iconSizeSmall: {
'& > *:nth-of-type(1)': {
fontSize: '0.875rem',
Expand Down Expand Up @@ -334,8 +319,8 @@ export function buildTheme(theme: Theme): ThemeOptions {
: alpha(theme.palette.primaryDark[50], 0.5),
borderColor:
theme.palette.mode === 'dark'
? theme.palette.primaryDark[200]
: theme.palette.primaryDark[600],
? theme.palette.primaryDark[500]
: theme.palette.primaryDark[300],
'& .MuiAlert-icon': {
color:
theme.palette.mode === 'dark'
Expand All @@ -356,6 +341,11 @@ export function buildTheme(theme: Theme): ThemeOptions {
theme.palette.mode === 'dark'
? theme.palette.primaryDark[50]
: theme.palette.primaryDark[700],
border: '1px solid',
borderColor:
theme.palette.mode === 'dark'
? alpha(theme.palette.primaryDark[500], 0.5)
: theme.palette.primaryDark[100],
'& .MuiAlert-icon': {
color:
theme.palette.mode === 'dark'
Expand Down
8 changes: 7 additions & 1 deletion docs/src/components/home/Testimonials.tsx
View file
Open in desktop
Expand Up @@ -18,7 +18,13 @@ const Testimonials = () => {
});
return (
<ThemeProvider theme={brandingDarkTheme}>
<Box ref={ref} sx={{ bgcolor: 'primaryDark.700' }}>
<Box
ref={ref}
sx={{
background: (theme) =>
`linear-gradient(85deg, ${theme.palette.primaryDark[700]} 0%, ${theme.palette.primaryDark[600]} 100%)`,
}}
>
<Container sx={{ py: { xs: 4, md: 8 } }}>
<Grid container spacing={3} alignItems="center">
<Grid item xs={12} md={6} sx={{ zIndex: 1, minHeight: { xs: 400, sm: 307, lg: 355 } }}>
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/typography/GradientText.tsx
View file
Open in desktop
Expand Up @@ -5,7 +5,7 @@ const GradientText = styled('span')<{
}>(({ theme, color = 'primary' }) => ({
background:
theme.palette.mode === 'dark'
? theme.palette.primary.main
? theme.palette.primary[300]
: `linear-gradient(to right, ${theme.palette[color].main}, ${theme.palette[color][700]})`,
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent',
Expand Down
2 changes: 1 addition & 1 deletion docs/src/components/typography/SectionHeadline.tsx
View file
Open in desktop
Expand Up @@ -13,7 +13,7 @@ export default function SectionHeadline({
}) {
const globalTheme = useTheme();
const mode = globalTheme.palette.mode;
const overlineColor = mode === 'dark' ? 'primary.400' : 'primary.600';
const overlineColor = mode === 'dark' ? 'primary.300' : 'primary.600';
const titleColor = mode === 'dark' ? 'grey.100' : 'primaryDark.900';
const descriptionColor = mode === 'dark' ? 'grey.500' : 'grey.800';
return (
Expand Down