From cd7c7b364a103c20e54da9b703308ef4bfbea3d3 Mon Sep 17 00:00:00 2001 From: Daniel Borstelmann Date: Thu, 4 Feb 2021 21:42:33 -0700 Subject: [PATCH 1/3] Make dark mode scrollbar overrides an optional function rather than required --- .../components/css-baseline/css-baseline.md | 18 +++++++++- packages/material-ui-system/src/index.d.ts | 2 ++ packages/material-ui-system/src/index.js | 1 + packages/material-ui-system/src/scrollbar.js | 35 +++++++++++++++++++ .../src/CssBaseline/CssBaseline.js | 33 ----------------- 5 files changed, 55 insertions(+), 34 deletions(-) create mode 100644 packages/material-ui-system/src/scrollbar.js diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md index 75112cdddeb72a..94a3ee20eff7f1 100644 --- a/docs/src/pages/components/css-baseline/css-baseline.md +++ b/docs/src/pages/components/css-baseline/css-baseline.md @@ -67,7 +67,23 @@ The `` and `` elements are updated to provide better page-wide defau ### Scrollbars -In dark mode, the colors of the scrollbars are customized to provide a better contrast. +The colors of the scrollbars can be customized to provide a better contrast. Add this code to your theme (for dark mode). + +```jsx +import { darkScrollbar } from '@material-ui/system'; + +... + +createMuiTheme({ + components: { + MuiCssBaseline: { + styleOverrides: { + body: theme.palette.mode === 'dark' ? darkScrollbar() : {}, + }, + }, + }, +}) +``` ### Typography diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index de58dccb55a28f..6fadf49306987c 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -329,3 +329,5 @@ export { extendSxProp as unstable_extendSxProp, } from './styleFunctionSx'; export * from './styleFunctionSx'; + +export function darkScrollbar(): object; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 759fa555705bd6..1c8a3439fd002d 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -25,3 +25,4 @@ export { extendSxProp as unstable_extendSxProp, } from './styleFunctionSx'; export { default as unstable_getThemeValue } from './getThemeValue'; +export { default as darkScrollbar } from './scrollbar'; diff --git a/packages/material-ui-system/src/scrollbar.js b/packages/material-ui-system/src/scrollbar.js new file mode 100644 index 00000000000000..e3c96b7cf851db --- /dev/null +++ b/packages/material-ui-system/src/scrollbar.js @@ -0,0 +1,35 @@ +// track, thumb and active are derieved from macOS 10.15.7 +const scrollBar = { + track: '#2b2b2b', + thumb: '#6b6b6b', + active: '#959595', +}; + +function darkScrollbar() { + return { + scrollbarColor: `${scrollBar.thumb} ${scrollBar.track}`, + '&::-webkit-scrollbar, & *::-webkit-scrollbar': { + backgroundColor: scrollBar.track, + }, + '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': { + borderRadius: 8, + backgroundColor: scrollBar.thumb, + minHeight: 24, + border: `3px solid ${scrollBar.track}`, + }, + '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': { + backgroundColor: scrollBar.active, + }, + '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': { + backgroundColor: scrollBar.active, + }, + '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': { + backgroundColor: scrollBar.active, + }, + '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': { + backgroundColor: scrollBar.track, + }, + }; +} + +export default darkScrollbar; diff --git a/packages/material-ui/src/CssBaseline/CssBaseline.js b/packages/material-ui/src/CssBaseline/CssBaseline.js index 897a14b44b5122..4b5c9c8980b8e4 100644 --- a/packages/material-ui/src/CssBaseline/CssBaseline.js +++ b/packages/material-ui/src/CssBaseline/CssBaseline.js @@ -14,13 +14,6 @@ export const html = { WebkitTextSizeAdjust: '100%', }; -// track, thumb and active are derieved from macOS 10.15.7 -const scrollBar = { - track: '#2b2b2b', - thumb: '#6b6b6b', - active: '#959595', -}; - export const body = (theme) => ({ color: theme.palette.text.primary, ...theme.typography.body1, @@ -29,32 +22,6 @@ export const body = (theme) => ({ // Save printer ink. backgroundColor: theme.palette.common.white, }, - ...(theme.palette.mode === 'dark' - ? { - scrollbarColor: `${scrollBar.thumb} ${scrollBar.track}`, - '&::-webkit-scrollbar, & *::-webkit-scrollbar': { - backgroundColor: scrollBar.track, - }, - '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': { - borderRadius: 8, - backgroundColor: scrollBar.thumb, - minHeight: 24, - border: `3px solid ${scrollBar.track}`, - }, - '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': { - backgroundColor: scrollBar.active, - }, - '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': { - backgroundColor: scrollBar.active, - }, - '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': { - backgroundColor: scrollBar.active, - }, - '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': { - backgroundColor: scrollBar.track, - }, - } - : {}), }); export const styles = (theme) => { From 58dffa6772a7865b974a18685e7f2abb7cfcbafa Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 7 Feb 2021 23:39:34 +0100 Subject: [PATCH 2/3] polish --- docs/src/modules/components/ThemeContext.js | 10 ++++++++++ .../components/css-baseline/css-baseline.md | 15 +++++++------- packages/material-ui-system/src/index.d.ts | 2 -- packages/material-ui-system/src/index.js | 1 - .../src/darkScrollbar/index.ts} | 20 +++++++++---------- packages/material-ui/src/index.d.ts | 3 +++ packages/material-ui/src/index.js | 3 +++ 7 files changed, 33 insertions(+), 21 deletions(-) rename packages/{material-ui-system/src/scrollbar.js => material-ui/src/darkScrollbar/index.ts} (62%) diff --git a/docs/src/modules/components/ThemeContext.js b/docs/src/modules/components/ThemeContext.js index 30ea794f1f0149..0a736235a888ec 100644 --- a/docs/src/modules/components/ThemeContext.js +++ b/docs/src/modules/components/ThemeContext.js @@ -9,6 +9,7 @@ import { 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'; import useLazyCSS from 'docs/src/modules/utils/useLazyCSS'; @@ -224,6 +225,15 @@ export function ThemeProvider(props) { spacing, }, dense ? highDensity : null, + { + components: { + MuiCssBaseline: { + styleOverrides: { + body: paletteMode === 'dark' ? darkScrollbar() : null, + }, + }, + }, + }, languageMap[userLanguage], ); diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md index 94a3ee20eff7f1..601d44b2539e87 100644 --- a/docs/src/pages/components/css-baseline/css-baseline.md +++ b/docs/src/pages/components/css-baseline/css-baseline.md @@ -67,24 +67,25 @@ The `` and `` elements are updated to provide better page-wide defau ### Scrollbars -The colors of the scrollbars can be customized to provide a better contrast. Add this code to your theme (for dark mode). +The colors of the scrollbars can be customized to improve the contrast (especially on Windows). Add this code to your theme (for dark mode). ```jsx -import { darkScrollbar } from '@material-ui/system'; +import darkScrollbar from '@material-ui/core/darkScrollbar'; -... - -createMuiTheme({ +const theme = createMuiTheme({ components: { MuiCssBaseline: { styleOverrides: { - body: theme.palette.mode === 'dark' ? darkScrollbar() : {}, + body: theme.palette.mode === 'dark' ? darkScrollbar() : null, }, }, }, -}) +}); ``` +The documentation website you are on uses `darkScrollbar` when the dark mode is enabled. +However, be aware that using this help (and customizing `-webkit-scrollbar`) forces macOS to always show the scrollbar. + ### Typography - No base font-size is declared on the ``, but 16px is assumed (the browser default). diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 6fadf49306987c..de58dccb55a28f 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -329,5 +329,3 @@ export { extendSxProp as unstable_extendSxProp, } from './styleFunctionSx'; export * from './styleFunctionSx'; - -export function darkScrollbar(): object; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 1c8a3439fd002d..759fa555705bd6 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -25,4 +25,3 @@ export { extendSxProp as unstable_extendSxProp, } from './styleFunctionSx'; export { default as unstable_getThemeValue } from './getThemeValue'; -export { default as darkScrollbar } from './scrollbar'; diff --git a/packages/material-ui-system/src/scrollbar.js b/packages/material-ui/src/darkScrollbar/index.ts similarity index 62% rename from packages/material-ui-system/src/scrollbar.js rename to packages/material-ui/src/darkScrollbar/index.ts index e3c96b7cf851db..af4a3ccc903cc0 100644 --- a/packages/material-ui-system/src/scrollbar.js +++ b/packages/material-ui/src/darkScrollbar/index.ts @@ -5,31 +5,29 @@ const scrollBar = { active: '#959595', }; -function darkScrollbar() { +export default function darkScrollbar(options = scrollBar) { return { - scrollbarColor: `${scrollBar.thumb} ${scrollBar.track}`, + scrollbarColor: `${options.thumb} ${options.track}`, '&::-webkit-scrollbar, & *::-webkit-scrollbar': { - backgroundColor: scrollBar.track, + backgroundColor: options.track, }, '&::-webkit-scrollbar-thumb, & *::-webkit-scrollbar-thumb': { borderRadius: 8, - backgroundColor: scrollBar.thumb, + backgroundColor: options.thumb, minHeight: 24, - border: `3px solid ${scrollBar.track}`, + border: `3px solid ${options.track}`, }, '&::-webkit-scrollbar-thumb:focus, & *::-webkit-scrollbar-thumb:focus': { - backgroundColor: scrollBar.active, + backgroundColor: options.active, }, '&::-webkit-scrollbar-thumb:active, & *::-webkit-scrollbar-thumb:active': { - backgroundColor: scrollBar.active, + backgroundColor: options.active, }, '&::-webkit-scrollbar-thumb:hover, & *::-webkit-scrollbar-thumb:hover': { - backgroundColor: scrollBar.active, + backgroundColor: options.active, }, '&::-webkit-scrollbar-corner, & *::-webkit-scrollbar-corner': { - backgroundColor: scrollBar.track, + backgroundColor: options.track, }, }; } - -export default darkScrollbar; diff --git a/packages/material-ui/src/index.d.ts b/packages/material-ui/src/index.d.ts index 3f3f0ad5e85c56..ddda43eabe80c3 100644 --- a/packages/material-ui/src/index.d.ts +++ b/packages/material-ui/src/index.d.ts @@ -176,6 +176,9 @@ export * from './Container'; export { default as CssBaseline } from './CssBaseline'; export * from './CssBaseline'; +export { default as darkScrollbar } from './darkScrollbar'; +export * from './darkScrollbar'; + export { default as Dialog } from './Dialog'; export * from './Dialog'; diff --git a/packages/material-ui/src/index.js b/packages/material-ui/src/index.js index 48b2ef52e6befc..814ccd13c4a397 100644 --- a/packages/material-ui/src/index.js +++ b/packages/material-ui/src/index.js @@ -104,6 +104,9 @@ export * from './Container'; export { default as CssBaseline } from './CssBaseline'; export * from './CssBaseline'; +export { default as darkScrollbar } from './darkScrollbar'; +export * from './darkScrollbar'; + export { default as Dialog } from './Dialog'; export * from './Dialog'; From b3312be6c261d0e8b1d937462a22cb54d82d9c67 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 8 Feb 2021 00:55:49 +0100 Subject: [PATCH 3/3] Matt's review Co-authored-by: Matt --- docs/src/pages/components/css-baseline/css-baseline.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/components/css-baseline/css-baseline.md b/docs/src/pages/components/css-baseline/css-baseline.md index 601d44b2539e87..ee195dbd4f0f2b 100644 --- a/docs/src/pages/components/css-baseline/css-baseline.md +++ b/docs/src/pages/components/css-baseline/css-baseline.md @@ -83,8 +83,8 @@ const theme = createMuiTheme({ }); ``` -The documentation website you are on uses `darkScrollbar` when the dark mode is enabled. -However, be aware that using this help (and customizing `-webkit-scrollbar`) forces macOS to always show the scrollbar. +This website uses `darkScrollbar` when dark mode is enabled. +Be aware, however, that using this utility (and customizing `-webkit-scrollbar`) forces MacOS to always show the scrollbar. ### Typography