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

[docs] Remove custom primary & secondary color #26541

Merged
merged 5 commits into from
Jun 7, 2021
Merged

[docs] Remove custom primary & secondary color #26541

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
726b128
remove custom primary and secondary color in docs
siriwatknp Jun 1, 2021
42146d1
expose default light & dark theme to prevent hard coding
siriwatknp Jun 2, 2021
dce778e
get rid of background level
siriwatknp Jun 2, 2021
2a7f6c6
remove default theme export
siriwatknp Jun 2, 2021
533bdab
Merge branch 'next' into docs-default-theme
siriwatknp Jun 3, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 4 additions & 2 deletions docs/pages/_document.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
import * as React from 'react';
import { ServerStyleSheets } from '@material-ui/styles';
import { createTheme } from '@material-ui/core/styles';
import { ServerStyleSheet } from 'styled-components';
import createEmotionServer from '@emotion/server/create-instance';
import { CacheProvider } from '@emotion/react';
import Document, { Html, Head, Main, NextScript } from 'next/document';
import { LANGUAGES_SSR } from 'docs/src/modules/constants';
import { pathnameToLanguage } from 'docs/src/modules/utils/helpers';
import { themeColor } from 'docs/src/modules/components/ThemeContext';
import createCache from '@emotion/cache';

const getCache = () => {
Expand All @@ -16,6 +16,8 @@ const getCache = () => {
return cache;
};

const defaultTheme = createTheme();

// You can find a benchmark of the available CSS minifiers under
// https://github.com/GoalSmashers/css-minification-benchmark
// We have found that clean-css is faster than cssnano but the output is larger.
Expand Down Expand Up @@ -51,7 +53,7 @@ export default class MyDocument extends Document {
*/}
<link rel="manifest" href="/static/manifest.json" />
{/* PWA primary color */}
<meta name="theme-color" content={themeColor} />
<meta name="theme-color" content={defaultTheme.palette.primary.main} />
<link rel="shortcut icon" href="/static/favicon.ico" />
{/* iOS Icon */}
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/180x180.png" />
Expand Down
3 changes: 1 addition & 2 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,6 @@ const styles = (theme) => ({
},
root: {
display: 'flex',
backgroundColor: theme.palette.background.level1,
},
grow: {
flex: '1 1 auto',
Expand Down Expand Up @@ -114,7 +113,7 @@ const styles = (theme) => ({
},
appBar: {
color: theme.palette.mode === 'light' ? null : '#fff',
backgroundColor: theme.palette.mode === 'light' ? null : theme.palette.background.level2,
backgroundColor: theme.palette.mode === 'light' ? null : '#212121',
transition: theme.transitions.create('width'),
},
language: {
Expand Down
5 changes: 4 additions & 1 deletion docs/src/modules/components/AppNavDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,7 +56,7 @@ PersistScroll.propTypes = {
const styles = (theme) => ({
paper: {
width: 240,
backgroundColor: theme.palette.background.level1,
boxShadow: 'none',
},
title: {
color: theme.palette.text.secondary,
Expand Down Expand Up @@ -212,6 +212,9 @@ function AppNavDrawer(props) {
paper: classes.paper,
}}
variant="permanent"
PaperProps={{
elevation: 2,
}}
sx={{ display: { xs: 'none', lg: 'block' } }}
open
>
Expand Down
3 changes: 1 addition & 2 deletions docs/src/modules/components/AppSettingsDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,9 @@ import { useTranslate } from 'docs/src/modules/utils/i18n';
import { useChangeTheme } from 'docs/src/modules/components/ThemeContext';
import { getCookie } from 'docs/src/modules/utils/helpers';

const styles = (theme) => ({
const styles = () => ({
paper: {
width: 352,
backgroundColor: theme.palette.background.level1,
},
heading: {
margin: '16px 0 8px',
Expand Down
3 changes: 2 additions & 1 deletion docs/src/modules/components/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ const useStyles = makeStyles(
/* Isolate the demo with an outline. */
demoBgOutlined: {
padding: theme.spacing(3),
backgroundColor: theme.palette.background.paper,
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

make the demo looks the same as codesandbox when apply darkmode

image

Copy link
Member

@oliviertassinari oliviertassinari Jun 1, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 for the direction taken by the outcome. It seems better to render the demos under theme.palette.background.default.

However, why use the paper design token? Why not apply the same background color to the whole page?

Copy link
Member Author

@siriwatknp siriwatknp Jun 2, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image

Here, if the whole page has the same background, everything blend together and hard to focus. On the other hand, if the demo is the darkest it catches the eye instantly. Also the contrast of demo and bg help separate between each demo.

Copy link
Member

@oliviertassinari oliviertassinari Jun 3, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Interesting. I would add that there are different demos variant. We have:

I almost feel like "bg": true should be the current "bg": "outlined" and "bg": "outlined" should have the bgcolor of "bg": "inline". Not sure, I'm not in my comfort zone with design 😁

border: `1px solid ${alpha(theme.palette.action.active, 0.12)}`,
borderLeftWidth: 0,
borderRightWidth: 0,
Expand All @@ -117,7 +118,7 @@ const useStyles = makeStyles(
/* Prepare the background to display an inner elevation. */
demoBgTrue: {
padding: theme.spacing(3),
backgroundColor: theme.palette.background.level2,
backgroundColor: theme.palette.mode === 'dark' ? '#333' : theme.palette.grey[100],
},
/* Make no difference between the demo and the markdown. */
demoBgInline: {
Expand Down
18 changes: 3 additions & 15 deletions docs/src/modules/components/ThemeContext.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,9 @@ import {
ThemeProvider as MuiThemeProvider,
createTheme as createLegacyModeTheme,
unstable_createMuiStrictModeTheme as createStrictModeTheme,
darken,
} from '@material-ui/core/styles';
import useMediaQuery from '@material-ui/core/useMediaQuery';
import { enUS, zhCN, faIR, ruRU, ptBR, esES, frFR, deDE, jaJP } from '@material-ui/core/locale';
import { blue, pink } from '@material-ui/core/colors';
import darkScrollbar from '@material-ui/core/darkScrollbar';
import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/core/utils';
import { getCookie } from 'docs/src/modules/utils/helpers';
Expand All @@ -27,8 +25,6 @@ const languageMap = {
ja: jaJP,
};

export const themeColor = blue[700];

const themeInitialOptions = {
dense: false,
direction: 'ltr',
Expand Down Expand Up @@ -210,12 +206,6 @@ export function ThemeProvider(props) {
color: paletteMode === 'light' ? '#000' : '#fff',
},
palette: {
primary: {
main: paletteMode === 'light' ? blue[700] : blue[200],
},
secondary: {
main: paletteMode === 'light' ? darken(pink.A400, 0.1) : pink[200],
},
mode: paletteMode,
...paletteColors,
},
Expand All @@ -234,11 +224,9 @@ export function ThemeProvider(props) {
languageMap[userLanguage],
);

nextTheme.palette.background.level2 =
paletteMode === 'light' ? nextTheme.palette.grey[100] : '#333';

nextTheme.palette.background.level1 =
paletteMode === 'light' ? '#fff' : nextTheme.palette.grey[900];
if (paletteMode === 'dark') {
nextTheme.palette.background.default = '#222';
}

return nextTheme;
}, [dense, direction, paletteColors, paletteMode, spacing, userLanguage]);
Expand Down
122 changes: 66 additions & 56 deletions docs/src/pages/landing/Steps.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Container from '@material-ui/core/Container';
import Grid from '@material-ui/core/Grid';
import Button from '@material-ui/core/Button';
import Divider from '@material-ui/core/Divider';
import Paper from '@material-ui/core/Paper';
import { FileDownload as FileDownloadIcon } from '@material-ui/docs';
import BuildIcon from '@material-ui/icons/Build';
import HighlightedCode from 'docs/src/modules/components/HighlightedCode';
Expand All @@ -21,11 +22,12 @@ const useStyles = makeStyles(
},
},
step: {
border: `12px solid ${theme.palette.background.level1}`,
border: `12px solid ${theme.palette.background.default}`,
boxShadow: 'none',
height: '100%',
borderRightWidth: 0,
borderLeftWidth: 0,
padding: theme.spacing(2),
backgroundColor: theme.palette.background.level2,
[theme.breakpoints.up('md')]: {
padding: theme.spacing(3),
},
Expand Down Expand Up @@ -72,68 +74,76 @@ function HomeSteps() {
return (
<Container disableGutters className={classes.root}>
<Grid container>
<Grid item xs={12} md={6} className={clsx(classes.step, classes.leftStep)}>
<div className={classes.stepTitle}>
<FileDownloadIcon className={classes.stepIcon} />
<Typography variant="h6" component="h2">
{t('installation')}
</Typography>
</div>
<div className={classes.stepBody}>
<Typography variant="subtitle1" component="div" gutterBottom>
{t('installDescr')}
</Typography>
<HighlightedCode
code="$ npm install @material-ui/core@next @emotion/react @emotion/styled"
language="sh"
/>
<Link
variant="subtitle1"
color="inherit"
href="https://github.com/mui-org/material-ui/tree/next/examples/cdn"
gutterBottom
<Grid item xs={12} md={6}>
<Paper elevation={12} className={clsx(classes.step, classes.leftStep)}>
<div className={classes.stepTitle}>
<FileDownloadIcon className={classes.stepIcon} />
<Typography variant="h6" component="h2">
{t('installation')}
</Typography>
</div>
<div className={classes.stepBody}>
<Typography variant="subtitle1" component="div" gutterBottom>
{t('installDescr')}
</Typography>
<HighlightedCode
code="$ npm install @material-ui/core@next @emotion/react @emotion/styled"
language="sh"
/>
<Link
variant="subtitle1"
color="inherit"
href="https://github.com/mui-org/material-ui/tree/next/examples/cdn"
gutterBottom
>
{t('cdn')}
</Link>
<Typography variant="subtitle1" component="div" gutterBottom>
{t('loadFont')}
</Typography>
<HighlightedCode
code={`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />`}
language="html"
/>
</div>
<Divider className={classes.divider} />
<Button
component={Link}
noLinkStyle
href="/getting-started/installation"
>
{t('cdn')}
</Link>
<Typography variant="subtitle1" component="div" gutterBottom>
{t('loadFont')}
</Typography>
<HighlightedCode
code={`<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap" />`}
language="html"
/>
</div>
<Divider className={classes.divider} />
<Button component={Link} noLinkStyle href="/getting-started/installation">
{t('installButton')}
</Button>
{t('installButton')}
</Button>
</Paper>
</Grid>
<Grid item xs={12} md={6} className={clsx(classes.step, classes.rightStep)}>
<div className={classes.stepTitle}>
<BuildIcon className={classes.stepIcon} />
<Typography variant="h6" component="h2">
{t('usage')}
</Typography>
</div>
<div className={classes.stepBody}>
<Typography variant="subtitle1" component="div" gutterBottom>
{t('usageDescr')}
</Typography>
<HighlightedCode
code={`
<Grid item xs={12} md={6}>
<Paper elevation={12} className={clsx(classes.step, classes.rightStep)}>
<div className={classes.stepTitle}>
<BuildIcon className={classes.stepIcon} />
<Typography variant="h6" component="h2">
{t('usage')}
</Typography>
</div>
<div className={classes.stepBody}>
<Typography variant="subtitle1" component="div" gutterBottom>
{t('usageDescr')}
</Typography>
<HighlightedCode
code={`
import * as React from 'react';
import { Button } from '@material-ui/core';

function App() {
return <Button>Hello World</Button>;
}`}
language="jsx"
/>
</div>
<Divider className={classes.divider} />
<Button component={Link} noLinkStyle href="/getting-started/usage">
{t('usageButton')}
</Button>
language="jsx"
/>
</div>
<Divider className={classes.divider} />
<Button component={Link} noLinkStyle href="/getting-started/usage">
{t('usageButton')}
</Button>
</Paper>
</Grid>
</Grid>
</Container>
Expand Down