Skip to content

Commit c1e89d9

Browse files
zanivanzanivan
authored
[docs][material-ui] Fix template shadow tokens (#43514)
1 parent 49b9a75 commit c1e89d9

30 files changed

+2334
-2246
lines changed

‎docs/data/material/getting-started/templates/blog/TemplateFrame.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
2222
borderBottom: '1px solid',
2323
borderColor: theme.palette.divider,
2424
backgroundColor: theme.palette.background.paper,
25-
boxShadow: theme.shadows[1],
25+
boxShadow: 'none',
2626
backgroundImage: 'none',
2727
zIndex: theme.zIndex.drawer + 1,
2828
flex: '0 0 auto',

‎docs/data/material/getting-started/templates/blog/TemplateFrame.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ const StyledAppBar = styled(AppBar)(({ theme }) => ({
2626
borderBottom: '1px solid',
2727
borderColor: theme.palette.divider,
2828
backgroundColor: theme.palette.background.paper,
29-
boxShadow: theme.shadows[1],
29+
boxShadow: 'none',
3030
backgroundImage: 'none',
3131
zIndex: theme.zIndex.drawer + 1,
3232
flex: '0 0 auto',

‎docs/data/material/getting-started/templates/blog/theme/themePrimitives.js‎

Lines changed: 146 additions & 139 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import { createTheme, alpha } from '@mui/material/styles';
22

3-
const customTheme = createTheme();
3+
const defaultTheme = createTheme();
4+
5+
const customShadows = [...defaultTheme.shadows];
46

57
export const brand = {
68
50: 'hsl(210, 100%, 95%)',
@@ -67,143 +69,148 @@ export const red = {
6769
900: 'hsl(0, 93%, 6%)',
6870
};
6971

70-
export const getDesignTokens = (mode) => ({
71-
palette: {
72-
mode,
73-
primary: {
74-
light: brand[200],
75-
main: brand[400],
76-
dark: brand[700],
77-
contrastText: brand[50],
78-
...(mode === 'dark' && {
79-
contrastText: brand[50],
80-
light: brand[300],
72+
export const getDesignTokens = (mode) => {
73+
customShadows[1] =
74+
mode === 'dark'
75+
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
76+
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px';
77+
78+
return {
79+
palette: {
80+
mode,
81+
primary: {
82+
light: brand[200],
8183
main: brand[400],
8284
dark: brand[700],
83-
}),
84-
},
85-
info: {
86-
light: brand[100],
87-
main: brand[300],
88-
dark: brand[600],
89-
contrastText: gray[50],
90-
...(mode === 'dark' && {
91-
contrastText: brand[300],
92-
light: brand[500],
93-
main: brand[700],
94-
dark: brand[900],
95-
}),
96-
},
97-
warning: {
98-
light: orange[300],
99-
main: orange[400],
100-
dark: orange[800],
101-
...(mode === 'dark' && {
102-
light: orange[400],
103-
main: orange[500],
104-
dark: orange[700],
105-
}),
106-
},
107-
error: {
108-
light: red[300],
109-
main: red[400],
110-
dark: red[800],
111-
...(mode === 'dark' && {
112-
light: red[400],
113-
main: red[500],
114-
dark: red[700],
115-
}),
116-
},
117-
success: {
118-
light: green[300],
119-
main: green[400],
120-
dark: green[800],
121-
...(mode === 'dark' && {
122-
light: green[400],
123-
main: green[500],
124-
dark: green[700],
125-
}),
126-
},
127-
grey: {
128-
...gray,
129-
},
130-
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
131-
background: {
132-
default: 'hsl(0, 0%, 99%)',
133-
paper: 'hsl(220, 35%, 97%)',
134-
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
135-
},
136-
text: {
137-
primary: gray[800],
138-
secondary: gray[600],
139-
warning: orange[400],
140-
...(mode === 'dark' && { primary: 'hsl(0, 0%, 100%)', secondary: gray[400] }),
141-
},
142-
action: {
143-
hover: alpha(gray[200], 0.2),
144-
selected: `${alpha(gray[200], 0.3)}`,
145-
...(mode === 'dark' && {
146-
hover: alpha(gray[600], 0.2),
147-
selected: alpha(gray[600], 0.3),
148-
}),
149-
},
150-
},
151-
typography: {
152-
fontFamily: ['"Inter", "sans-serif"'].join(','),
153-
h1: {
154-
fontSize: customTheme.typography.pxToRem(48),
155-
fontWeight: 600,
156-
lineHeight: 1.2,
157-
letterSpacing: -0.5,
158-
},
159-
h2: {
160-
fontSize: customTheme.typography.pxToRem(36),
161-
fontWeight: 600,
162-
lineHeight: 1.2,
163-
},
164-
h3: {
165-
fontSize: customTheme.typography.pxToRem(30),
166-
lineHeight: 1.2,
167-
},
168-
h4: {
169-
fontSize: customTheme.typography.pxToRem(24),
170-
fontWeight: 600,
171-
lineHeight: 1.5,
172-
},
173-
h5: {
174-
fontSize: customTheme.typography.pxToRem(20),
175-
fontWeight: 600,
176-
},
177-
h6: {
178-
fontSize: customTheme.typography.pxToRem(18),
179-
fontWeight: 600,
180-
},
181-
subtitle1: {
182-
fontSize: customTheme.typography.pxToRem(18),
183-
},
184-
subtitle2: {
185-
fontSize: customTheme.typography.pxToRem(14),
186-
fontWeight: 500,
187-
},
188-
body1: {
189-
fontSize: customTheme.typography.pxToRem(14),
190-
},
191-
body2: {
192-
fontSize: customTheme.typography.pxToRem(14),
193-
fontWeight: 400,
194-
},
195-
caption: {
196-
fontSize: customTheme.typography.pxToRem(12),
197-
fontWeight: 400,
198-
},
199-
},
200-
shape: {
201-
borderRadius: 8,
202-
},
203-
shadows: [
204-
'none',
205-
...(mode === 'dark'
206-
? 'hsla(220, 30%, 5%, 0.7) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.8) 0px 8px 16px -5px'
207-
: 'hsla(220, 30%, 5%, 0.07) 0px 4px 16px 0px, hsla(220, 25%, 10%, 0.07) 0px 8px 16px -5px'),
208-
],
209-
});
85+
contrastText: brand[50],
86+
...(mode === 'dark' && {
87+
contrastText: brand[50],
88+
light: brand[300],
89+
main: brand[400],
90+
dark: brand[700],
91+
}),
92+
},
93+
info: {
94+
light: brand[100],
95+
main: brand[300],
96+
dark: brand[600],
97+
contrastText: gray[50],
98+
...(mode === 'dark' && {
99+
contrastText: brand[300],
100+
light: brand[500],
101+
main: brand[700],
102+
dark: brand[900],
103+
}),
104+
},
105+
warning: {
106+
light: orange[300],
107+
main: orange[400],
108+
dark: orange[800],
109+
...(mode === 'dark' && {
110+
light: orange[400],
111+
main: orange[500],
112+
dark: orange[700],
113+
}),
114+
},
115+
error: {
116+
light: red[300],
117+
main: red[400],
118+
dark: red[800],
119+
...(mode === 'dark' && {
120+
light: red[400],
121+
main: red[500],
122+
dark: red[700],
123+
}),
124+
},
125+
success: {
126+
light: green[300],
127+
main: green[400],
128+
dark: green[800],
129+
...(mode === 'dark' && {
130+
light: green[400],
131+
main: green[500],
132+
dark: green[700],
133+
}),
134+
},
135+
grey: {
136+
...gray,
137+
},
138+
divider: mode === 'dark' ? alpha(gray[700], 0.6) : alpha(gray[300], 0.4),
139+
background: {
140+
default: 'hsl(0, 0%, 99%)',
141+
paper: 'hsl(220, 35%, 97%)',
142+
...(mode === 'dark' && { default: gray[900], paper: 'hsl(220, 30%, 7%)' }),
143+
},
144+
text: {
145+
primary: gray[800],
146+
secondary: gray[600],
147+
warning: orange[400],
148+
...(mode === 'dark' && {
149+
primary: 'hsl(0, 0%, 100%)',
150+
secondary: gray[400],
151+
}),
152+
},
153+
action: {
154+
hover: alpha(gray[200], 0.2),
155+
selected: `${alpha(gray[200], 0.3)}`,
156+
...(mode === 'dark' && {
157+
hover: alpha(gray[600], 0.2),
158+
selected: alpha(gray[600], 0.3),
159+
}),
160+
},
161+
},
162+
typography: {
163+
fontFamily: ['"Inter", "sans-serif"'].join(','),
164+
h1: {
165+
fontSize: defaultTheme.typography.pxToRem(48),
166+
fontWeight: 600,
167+
lineHeight: 1.2,
168+
letterSpacing: -0.5,
169+
},
170+
h2: {
171+
fontSize: defaultTheme.typography.pxToRem(36),
172+
fontWeight: 600,
173+
lineHeight: 1.2,
174+
},
175+
h3: {
176+
fontSize: defaultTheme.typography.pxToRem(30),
177+
lineHeight: 1.2,
178+
},
179+
h4: {
180+
fontSize: defaultTheme.typography.pxToRem(24),
181+
fontWeight: 600,
182+
lineHeight: 1.5,
183+
},
184+
h5: {
185+
fontSize: defaultTheme.typography.pxToRem(20),
186+
fontWeight: 600,
187+
},
188+
h6: {
189+
fontSize: defaultTheme.typography.pxToRem(18),
190+
fontWeight: 600,
191+
},
192+
subtitle1: {
193+
fontSize: defaultTheme.typography.pxToRem(18),
194+
},
195+
subtitle2: {
196+
fontSize: defaultTheme.typography.pxToRem(14),
197+
fontWeight: 500,
198+
},
199+
body1: {
200+
fontSize: defaultTheme.typography.pxToRem(14),
201+
},
202+
body2: {
203+
fontSize: defaultTheme.typography.pxToRem(14),
204+
fontWeight: 400,
205+
},
206+
caption: {
207+
fontSize: defaultTheme.typography.pxToRem(12),
208+
fontWeight: 400,
209+
},
210+
},
211+
shape: {
212+
borderRadius: 8,
213+
},
214+
shadows: customShadows,
215+
};
216+
};

0 commit comments

Comments
 (0)