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

[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 1 commit
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
4 changes: 2 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 { indigo } from '@material-ui/core/colors';
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 Down Expand Up @@ -51,7 +51,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={indigo[500]} />
<link rel="shortcut icon" href="/static/favicon.ico" />
{/* iOS Icon */}
<link rel="apple-touch-icon" sizes="180x180" href="/static/icons/180x180.png" />
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,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 : theme.palette.background.level1,
transition: theme.transitions.create('width'),
},
language: {
Expand Down
1 change: 1 addition & 0 deletions 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 Down
10 changes: 0 additions & 10 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 Down