From 88bd0607eaa0b0b54ba38bc035caf14e5f4c51aa Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 13:32:19 +0700 Subject: [PATCH 01/32] add resolved mode and add comments --- .../src/cssVars/createCssVarsProvider.js | 84 +++++++++++-------- 1 file changed, 50 insertions(+), 34 deletions(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index b3e2c847215eb2..26334631318806 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -21,7 +21,7 @@ export default function createCssVarsProvider(options) { attribute: defaultAttribute = DEFAULT_ATTRIBUTE, modeStorageKey: defaultModeStorageKey = DEFAULT_MODE_STORAGE_KEY, colorSchemeStorageKey: defaultColorSchemeStorageKey = DEFAULT_COLOR_SCHEME_STORAGE_KEY, - defaultMode: desisgnSystemMode = 'light', + defaultMode: designSystemMode = 'light', defaultColorScheme: designSystemColorScheme, disableTransitionOnChange: designSystemTransitionOnChange = false, enableColorScheme: designSystemEnableColorScheme = true, @@ -57,7 +57,7 @@ export default function createCssVarsProvider(options) { modeStorageKey = defaultModeStorageKey, colorSchemeStorageKey = defaultColorSchemeStorageKey, attribute = defaultAttribute, - defaultMode = desisgnSystemMode, + defaultMode = designSystemMode, defaultColorScheme = designSystemColorScheme, disableTransitionOnChange = designSystemTransitionOnChange, enableColorScheme = designSystemEnableColorScheme, @@ -75,6 +75,17 @@ export default function createCssVarsProvider(options) { typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light; const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; + const resolvedDefaultColorScheme = (() => { + if (typeof defaultColorScheme === 'string') { + return defaultColorScheme; + } + if (defaultMode === 'dark') { + return defaultColorScheme.dark; + } + return defaultColorScheme.light; + })(); + + // 1. Get the data about the `mode`, `colorScheme`, and setter functions. const { mode, setMode, @@ -92,29 +103,38 @@ export default function createCssVarsProvider(options) { defaultMode, storageWindow, }); - const resolvedColorScheme = (() => { + + const calculatedMode = (() => { + if (!mode) { + // This scope occurs on the server + if (defaultMode === 'system') { + return designSystemMode; + } + return defaultMode; + } + return mode; + })(); + const calculatedColorScheme = (() => { if (!colorScheme) { // This scope occurs on the server - if (defaultMode === 'dark') { + if (calculatedMode === 'dark') { return defaultDarkColorScheme; } - // use light color scheme, if default mode is 'light' | 'auto' + // use light color scheme, if default mode is 'light' | 'system' return defaultLightColorScheme; } return colorScheme; })(); - let theme = restThemeProp; + // 2. Create CSS variables and store them in objects (to be generated in stylesheets in the final step) const { css: rootCss, vars: rootVars, parsedTheme, - } = cssVarsParser(theme, { - prefix: cssVarPrefix, - shouldSkipGeneratingVar, - }); + } = cssVarsParser(restThemeProp, { prefix: cssVarPrefix, shouldSkipGeneratingVar }); - theme = { + // 3. Start composing the theme object + let theme = { ...parsedTheme, components, colorSchemes, @@ -123,9 +143,11 @@ export default function createCssVarsProvider(options) { getColorSchemeSelector: (targetColorScheme) => `[${attribute}="${targetColorScheme}"] &`, }; + // 4. Create color CSS variables and store them in objects (to be generated in stylesheets in the final step) + // The default color scheme stylesheet is constructed to have the least CSS specificity. + // The other color schemes uses selector, default as data attribute, to increase the CSS specificity so that they can override the default color scheme stylesheet. const defaultColorSchemeStyleSheet = {}; const otherColorSchemesStyleSheet = {}; - Object.entries(colorSchemes).forEach(([key, scheme]) => { const { css, @@ -136,26 +158,10 @@ export default function createCssVarsProvider(options) { shouldSkipGeneratingVar, }); theme.vars = deepmerge(theme.vars, vars); - if (key === resolvedColorScheme) { - theme = { - ...theme, - ...parsedScheme, - }; - if (theme.palette) { - // assign runtime mode & colorScheme - theme.palette.mode = mode; - theme.palette.colorScheme = resolvedColorScheme; - } + if (key === calculatedColorScheme) { + // 4.1 Merge the selected color scheme to the theme + theme = { ...theme, ...parsedScheme }; } - const resolvedDefaultColorScheme = (() => { - if (typeof defaultColorScheme === 'string') { - return defaultColorScheme; - } - if (defaultMode === 'dark') { - return defaultColorScheme.dark; - } - return defaultColorScheme.light; - })(); if (key === resolvedDefaultColorScheme) { if (excludeVariablesFromRoot) { const excludedVariables = {}; @@ -173,6 +179,8 @@ export default function createCssVarsProvider(options) { } }); + // 5. Declaring effects + // 5.1 Updates the selector value to use the current color scheme which tells CSS to use the proper stylesheet. React.useEffect(() => { if (colorScheme && colorSchemeNode) { // attaches attribute to because the css variables are attached to :root (html) @@ -180,12 +188,13 @@ export default function createCssVarsProvider(options) { } }, [colorScheme, attribute, colorSchemeNode]); + // 5.2 CSS color-scheme for telling the browser to render built-in elements according to its value: `light` or `dark` + // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme useEnhancedEffect(() => { if (!mode || !enableColorScheme || !colorSchemeNode) { return undefined; } const priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); - // `color-scheme` tells browser to render built-in elements according to its value: `light` or `dark` if (mode === 'system') { colorSchemeNode.style.setProperty('color-scheme', systemMode); } else { @@ -197,10 +206,11 @@ export default function createCssVarsProvider(options) { }; }, [mode, systemMode, enableColorScheme, colorSchemeNode]); + // 5.3 Remove the CSS transition when color scheme changes to create instant experience. + // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313 React.useEffect(() => { let timer; if (disableTransitionOnChange && hasMounted.current && documentNode) { - // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313 const css = documentNode.createElement('style'); css.appendChild(documentNode.createTextNode(DISABLE_CSS_TRANSITION)); documentNode.head.appendChild(css); @@ -216,13 +226,19 @@ export default function createCssVarsProvider(options) { clearTimeout(timer); }; }, [colorScheme, disableTransitionOnChange, documentNode]); - React.useEffect(() => { hasMounted.current = true; return () => { hasMounted.current = false; }; }, []); + // ---------------------------------------------------------------------- + + // 6. Assign `mode` and `colorScheme` + if (theme.palette) { + theme.palette.mode = calculatedMode; // existing Material UI property + theme.palette.colorScheme = calculatedColorScheme; // new property + } return ( Date: Thu, 6 Oct 2022 14:58:41 +0700 Subject: [PATCH 02/32] remove unnecessary enableColorScheme --- .../mui-system/src/cssVars/getInitColorSchemeScript.tsx | 9 --------- 1 file changed, 9 deletions(-) diff --git a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx index 8c4ac844b456c4..ee5c582bf1082d 100644 --- a/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx +++ b/packages/mui-system/src/cssVars/getInitColorSchemeScript.tsx @@ -5,11 +5,6 @@ export const DEFAULT_COLOR_SCHEME_STORAGE_KEY = 'color-scheme'; export const DEFAULT_ATTRIBUTE = 'data-color-scheme'; export interface GetInitColorSchemeScriptOptions { - /** - * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI - * @default true - */ - enableColorScheme?: boolean; /** * The mode to be used for the first visit * @default 'light' @@ -49,7 +44,6 @@ export interface GetInitColorSchemeScriptOptions { export default function getInitColorSchemeScript(options?: GetInitColorSchemeScriptOptions) { const { - enableColorScheme = true, defaultMode = 'light', defaultLightColorScheme = 'light', defaultDarkColorScheme = 'dark', @@ -86,9 +80,6 @@ export default function getInitColorSchemeScript(options?: GetInitColorSchemeScr if (colorScheme) { ${colorSchemeNode}.setAttribute('${attribute}', colorScheme); } - if (${enableColorScheme} && !!cssColorScheme) { - ${colorSchemeNode}.style.setProperty('color-scheme', cssColorScheme); - } } catch (e) {} })();`, }} /> From 1964a6b0b9f32340c78bef4a80a27fcd137199b2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 15:45:05 +0700 Subject: [PATCH 03/32] use palette.mode as color-scheme --- .../src/cssVars/createCssVarsProvider.js | 43 ++++++------------- 1 file changed, 14 insertions(+), 29 deletions(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 26334631318806..516039a444ae04 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -1,7 +1,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import MuiError from '@mui/utils/macros/MuiError.macro'; -import { deepmerge, unstable_useEnhancedEffect as useEnhancedEffect } from '@mui/utils'; +import { deepmerge } from '@mui/utils'; import { GlobalStyles } from '@mui/styled-engine'; import cssVarsParser from './cssVarsParser'; import ThemeProvider from '../ThemeProvider'; @@ -161,6 +161,7 @@ export default function createCssVarsProvider(options) { if (key === calculatedColorScheme) { // 4.1 Merge the selected color scheme to the theme theme = { ...theme, ...parsedScheme }; + theme.palette.colorScheme = key; } if (key === resolvedDefaultColorScheme) { if (excludeVariablesFromRoot) { @@ -171,11 +172,19 @@ export default function createCssVarsProvider(options) { }); defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables; } - defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css; + defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = { + // 4.2 the CSS color-scheme is attached using the `mode` defined in the palette, if enabled. + ...(enableColorScheme && { colorScheme: scheme.palette.mode }), + ...css, + }; } else { otherColorSchemesStyleSheet[ `${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]` - ] = css; + ] = { + // 4.2 same as other color schemes. + ...(enableColorScheme && { colorScheme: scheme.palette.mode }), + ...css, + }; } }); @@ -188,25 +197,7 @@ export default function createCssVarsProvider(options) { } }, [colorScheme, attribute, colorSchemeNode]); - // 5.2 CSS color-scheme for telling the browser to render built-in elements according to its value: `light` or `dark` - // Ref: https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme - useEnhancedEffect(() => { - if (!mode || !enableColorScheme || !colorSchemeNode) { - return undefined; - } - const priorColorScheme = colorSchemeNode.style.getPropertyValue('color-scheme'); - if (mode === 'system') { - colorSchemeNode.style.setProperty('color-scheme', systemMode); - } else { - colorSchemeNode.style.setProperty('color-scheme', mode); - } - - return () => { - colorSchemeNode.style.setProperty('color-scheme', priorColorScheme); - }; - }, [mode, systemMode, enableColorScheme, colorSchemeNode]); - - // 5.3 Remove the CSS transition when color scheme changes to create instant experience. + // 5.2 Remove the CSS transition when color scheme changes to create instant experience. // credit: https://github.com/pacocoursey/next-themes/blob/b5c2bad50de2d61ad7b52a9c5cdc801a78507d7a/index.tsx#L313 React.useEffect(() => { let timer; @@ -232,18 +223,12 @@ export default function createCssVarsProvider(options) { hasMounted.current = false; }; }, []); - // ---------------------------------------------------------------------- - - // 6. Assign `mode` and `colorScheme` - if (theme.palette) { - theme.palette.mode = calculatedMode; // existing Material UI property - theme.palette.colorScheme = calculatedColorScheme; // new property - } return ( Date: Thu, 6 Oct 2022 15:45:15 +0700 Subject: [PATCH 04/32] add mode to palette in joy --- packages/mui-joy/src/styles/CssVarsProvider.tsx | 1 + packages/mui-joy/src/styles/extendTheme.ts | 2 ++ packages/mui-joy/src/styles/types/colorSystem.ts | 1 + packages/mui-joy/src/styles/types/theme.ts | 6 ++++-- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 55c61211c4e093..2afe0aeaba3d42 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -4,6 +4,7 @@ import type { DefaultColorScheme, ExtendedColorScheme } from './types'; const shouldSkipGeneratingVar = (keys: string[]) => !!keys[0].match(/(typography|variants|breakpoints)/) || + (keys[0] === 'palette' && !!keys[1]?.match(/(mode)/)) || (keys[0] === 'focus' && keys[1] !== 'thickness'); const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider< diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 2bc8df32d808a4..b5b5ced1642219 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -142,6 +142,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { const lightColorSystem = { palette: { + mode: 'light', primary: { ...colors.blue, ...createLightModeVariantVariables('primary'), @@ -242,6 +243,7 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { shadowChannel: '187 187 187', }; const darkColorSystem = { + mode: 'dark', palette: { primary: { ...colors.blue, diff --git a/packages/mui-joy/src/styles/types/colorSystem.ts b/packages/mui-joy/src/styles/types/colorSystem.ts index cb31adff718f05..3614b41f336417 100644 --- a/packages/mui-joy/src/styles/types/colorSystem.ts +++ b/packages/mui-joy/src/styles/types/colorSystem.ts @@ -135,6 +135,7 @@ export interface PaletteSuccess extends PaletteRange {} export interface PaletteWarning extends PaletteRange {} export interface Palette { + mode: 'light' | 'dark'; primary: PalettePrimary; neutral: PaletteNeutral; danger: PaletteDanger; diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index f278f59b7d7ae0..72847868e87b67 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -43,7 +43,6 @@ type NormalizeVars = ConcatDeep>; export interface RuntimeColorSystem extends Omit { palette: ColorSystem['palette'] & { - mode: 'light' | 'dark'; colorScheme: DefaultColorScheme | ExtendedColorScheme; }; } @@ -59,7 +58,10 @@ export interface ThemeScales { letterSpacing: LetterSpacing; } -export interface ThemeVars extends ThemeScales, ColorSystem {} +interface ColorSystemVars extends Omit { + palette: Omit; +} +export interface ThemeVars extends ThemeScales, ColorSystemVars {} export interface ThemeCssVarOverrides {} From d971b0bf37624fb7f71aea89f798bd1361795417 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 15:49:26 +0700 Subject: [PATCH 05/32] remove enableColorScheme test (moved to regression) --- .../src/cssVars/createCssVarsProvider.js | 8 +- .../src/cssVars/createCssVarsProvider.test.js | 109 ------------------ 2 files changed, 5 insertions(+), 112 deletions(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 516039a444ae04..73a2b8fcf2f034 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -161,7 +161,9 @@ export default function createCssVarsProvider(options) { if (key === calculatedColorScheme) { // 4.1 Merge the selected color scheme to the theme theme = { ...theme, ...parsedScheme }; - theme.palette.colorScheme = key; + if (theme.palette) { + theme.palette.colorScheme = key; + } } if (key === resolvedDefaultColorScheme) { if (excludeVariablesFromRoot) { @@ -174,7 +176,7 @@ export default function createCssVarsProvider(options) { } defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = { // 4.2 the CSS color-scheme is attached using the `mode` defined in the palette, if enabled. - ...(enableColorScheme && { colorScheme: scheme.palette.mode }), + ...(enableColorScheme && { colorScheme: scheme.palette?.mode }), ...css, }; } else { @@ -182,7 +184,7 @@ export default function createCssVarsProvider(options) { `${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]` ] = { // 4.2 same as other color schemes. - ...(enableColorScheme && { colorScheme: scheme.palette.mode }), + ...(enableColorScheme && { colorScheme: scheme.palette?.mode }), ...css, }; } diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js index 8002df94e874fe..5ff48e456d8c25 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.test.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.test.js @@ -15,7 +15,6 @@ describe('createCssVarsProvider', () => { addListener: () => {}, removeListener: () => {}, }); - let shouldSupportColorScheme; beforeEach(() => { originalMatchmedia = window.matchMedia; @@ -34,11 +33,6 @@ describe('createCssVarsProvider', () => { // clear the localstorage storage = {}; window.matchMedia = createMatchMedia(false); - - // Currently supported Firefox does not support `color-scheme`. - // Instead of skipping relevant tests entirely we assert that they work differently in Firefox. - // This ensures that we're automatically notified once we remove older Firefox versions from the support matrix. - shouldSupportColorScheme = !/Firefox/.test(navigator.userAgent); }); afterEach(() => { window.matchMedia = originalMatchmedia; @@ -249,109 +243,6 @@ describe('createCssVarsProvider', () => { expect(screen.getByText('var(--palette-grey)')).not.to.equal(null); }); - describe('[option]: `enableColorScheme`', () => { - it('set `color-scheme` property on with correct mode, given `enableColorScheme` is true and `mode` is `light` or `dark`', () => { - const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ - theme: { - colorSchemes: { light: {}, dark: {} }, - }, - defaultColorScheme: 'light', - enableColorScheme: true, - }); - const Consumer = () => { - const { setMode } = useColorScheme(); - return ; - }; - render( - - - , - ); - expect(document.documentElement).toHaveComputedStyle({ - colorScheme: shouldSupportColorScheme ? 'light' : '', - }); - - fireEvent.click(screen.getByRole('button', { name: 'change to dark' })); - - expect(document.documentElement).toHaveComputedStyle({ - colorScheme: shouldSupportColorScheme ? 'dark' : '', - }); - }); - - it('set `color-scheme` property on with correct mode, given `enableColorScheme` is true and mode is `system`', () => { - window.matchMedia = createMatchMedia(true); // system matches 'prefers-color-scheme: dark' - - const { CssVarsProvider, useColorScheme } = createCssVarsProvider({ - theme: { - colorSchemes: { light: {}, dark: {} }, - }, - defaultColorScheme: 'light', - enableColorScheme: true, - }); - const Consumer = () => { - const { setMode } = useColorScheme(); - return ; - }; - render( - - - , - ); - expect(document.documentElement).toHaveComputedStyle({ - colorScheme: shouldSupportColorScheme ? 'light' : '', - }); - - fireEvent.click(screen.getByRole('button', { name: 'change to system' })); - - expect(document.documentElement).toHaveComputedStyle({ - colorScheme: shouldSupportColorScheme ? 'dark' : '', - }); - }); - - it('does not set `color-scheme` property on with correct mode, given`enableColorScheme` is false', () => { - const currentColorScheme = window - .getComputedStyle(document.documentElement) - .getPropertyValue('color-scheme'); - const { CssVarsProvider } = createCssVarsProvider({ - theme: { - colorSchemes: { light: {}, dark: {} }, - }, - defaultColorScheme: 'light', - enableColorScheme: false, - }); - const Consumer = () =>
; - - render( - - - , - ); - expect(document.documentElement).toHaveComputedStyle({ - colorScheme: shouldSupportColorScheme ? currentColorScheme : '', - }); - }); - - it('cleans up `color-scheme` property on , given`enableColorScheme` is true', () => { - const previousColorScheme = window - .getComputedStyle(document.documentElement) - .getPropertyValue('color-scheme'); - const { CssVarsProvider } = createCssVarsProvider({ - theme: { - colorSchemes: { light: {}, dark: {} }, - }, - defaultColorScheme: 'light', - enableColorScheme: true, - }); - const { unmount } = render(); - - unmount(); - - expect(document.documentElement).toHaveComputedStyle({ - colorScheme: previousColorScheme, - }); - }); - }); - describe('[option]: `disableTransitionOnChange`', () => { clock.withFakeTimers(); it('disable all css transitions when switching bewteen modes, given `disableTransitionOnChange` is true', () => { From 119858c8c19d44a961493100a753a926fb86ffcc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 16:00:23 +0700 Subject: [PATCH 06/32] fix joy dark mode --- packages/mui-joy/src/styles/CssVarsProvider.tsx | 2 +- packages/mui-joy/src/styles/extendTheme.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/styles/CssVarsProvider.tsx b/packages/mui-joy/src/styles/CssVarsProvider.tsx index 2afe0aeaba3d42..b86b5859a77721 100644 --- a/packages/mui-joy/src/styles/CssVarsProvider.tsx +++ b/packages/mui-joy/src/styles/CssVarsProvider.tsx @@ -4,7 +4,7 @@ import type { DefaultColorScheme, ExtendedColorScheme } from './types'; const shouldSkipGeneratingVar = (keys: string[]) => !!keys[0].match(/(typography|variants|breakpoints)/) || - (keys[0] === 'palette' && !!keys[1]?.match(/(mode)/)) || + (keys[0] === 'palette' && !!keys[1]?.match(/^(mode)$/)) || (keys[0] === 'focus' && keys[1] !== 'thickness'); const { CssVarsProvider, useColorScheme, getInitColorSchemeScript } = createCssVarsProvider< diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index b5b5ced1642219..afd06089b45c5b 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -243,8 +243,8 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { shadowChannel: '187 187 187', }; const darkColorSystem = { - mode: 'dark', palette: { + mode: 'dark', primary: { ...colors.blue, ...createDarkModeVariantVariables('primary'), From c1ae81a83f2a2857e9407f1eba7aa0f848dc815f Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 16:04:26 +0700 Subject: [PATCH 07/32] remove omit --- packages/mui-material/src/styles/experimental_extendTheme.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/styles/experimental_extendTheme.d.ts b/packages/mui-material/src/styles/experimental_extendTheme.d.ts index 5ae0ea1cda08e7..fb2ceb05203afc 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.d.ts +++ b/packages/mui-material/src/styles/experimental_extendTheme.d.ts @@ -193,7 +193,7 @@ export interface PaletteTooltip { // The Palette should be sync with `../themeCssVarsAugmentation/index.d.ts` export interface ColorSystemOptions { - palette?: Omit & { + palette?: PaletteOptions & { common?: Partial; primary?: Partial; secondary?: Partial; From fd3268c0c6d11ac5eae25f2c21ef0a1b6a0e38eb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 16:11:00 +0700 Subject: [PATCH 08/32] add initial setup from design system --- .../mui-system/src/cssVars/createCssVarsProvider.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index 73a2b8fcf2f034..a720dc1a03b50d 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -307,12 +307,23 @@ export default function createCssVarsProvider(options) { theme: PropTypes.object, }; + const defaultLightColorScheme = + typeof designSystemColorScheme === 'string' + ? designSystemColorScheme + : designSystemColorScheme.light; + const defaultDarkColorScheme = + typeof designSystemColorScheme === 'string' + ? designSystemColorScheme + : designSystemColorScheme.dark; + const getInitColorSchemeScript = (params) => systemGetInitColorSchemeScript({ attribute: defaultAttribute, colorSchemeStorageKey: defaultColorSchemeStorageKey, + defaultMode: designSystemMode, + defaultLightColorScheme, + defaultDarkColorScheme, modeStorageKey: defaultModeStorageKey, - enableColorScheme: designSystemEnableColorScheme, ...params, }); From 317b9154cb132751128e827174eb33e9fef3ba89 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 16:14:13 +0700 Subject: [PATCH 09/32] revert to make code review easier --- .../src/cssVars/createCssVarsProvider.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index a720dc1a03b50d..c862e375e64861 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -75,15 +75,6 @@ export default function createCssVarsProvider(options) { typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.light; const defaultDarkColorScheme = typeof defaultColorScheme === 'string' ? defaultColorScheme : defaultColorScheme.dark; - const resolvedDefaultColorScheme = (() => { - if (typeof defaultColorScheme === 'string') { - return defaultColorScheme; - } - if (defaultMode === 'dark') { - return defaultColorScheme.dark; - } - return defaultColorScheme.light; - })(); // 1. Get the data about the `mode`, `colorScheme`, and setter functions. const { @@ -165,6 +156,15 @@ export default function createCssVarsProvider(options) { theme.palette.colorScheme = key; } } + const resolvedDefaultColorScheme = (() => { + if (typeof defaultColorScheme === 'string') { + return defaultColorScheme; + } + if (defaultMode === 'dark') { + return defaultColorScheme.dark; + } + return defaultColorScheme.light; + })(); if (key === resolvedDefaultColorScheme) { if (excludeVariablesFromRoot) { const excludedVariables = {}; From 51fa80e6e15cbb41881d225ec344de9492f15f1a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 23:21:03 +0700 Subject: [PATCH 10/32] move enable color scheme to CssBaseline --- .../src/CssBaseline/CssBaseline.js | 35 +++++++++++++------ .../src/cssVars/createCssVarsProvider.d.ts | 5 --- .../src/cssVars/createCssVarsProvider.js | 18 ++-------- 3 files changed, 27 insertions(+), 31 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 2b32bd57898e17..5798069cbf7187 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -3,16 +3,31 @@ import PropTypes from 'prop-types'; import useThemeProps from '../styles/useThemeProps'; import GlobalStyles from '../GlobalStyles'; -export const html = (theme, enableColorScheme) => ({ - WebkitFontSmoothing: 'antialiased', // Antialiasing. - MozOsxFontSmoothing: 'grayscale', // Antialiasing. - // Change from `box-sizing: content-box` so that `width` - // is not affected by `padding` or `border`. - boxSizing: 'border-box', - // Fix font resize problem in iOS - WebkitTextSizeAdjust: '100%', - ...(enableColorScheme && { colorScheme: theme.palette.mode }), -}); +export const html = (theme, enableColorScheme) => { + const styleSheets = {}; + if (enableColorScheme) { + if (theme.vars) { + // The CssBaseline is wrapped inside a CssVarsProvider + Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { + styleSheets[theme.getColorSchemeSelector(key)] = { + colorScheme: scheme.palette?.mode, + }; + }); + } else { + styleSheets.colorScheme = theme.palette.mode; + } + } + return { + WebkitFontSmoothing: 'antialiased', + MozOsxFontSmoothing: 'grayscale', + // Change from `box-sizing: content-box` so that `width` + // is not affected by `padding` or `border`. + boxSizing: 'border-box', + // Fix font resize problem in iOS + WebkitTextSizeAdjust: '100%', + ...styleSheets, + }; +}; export const body = (theme) => ({ color: (theme.vars || theme).palette.text.primary, diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts index 75b04405daf9fa..808657beebdda9 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.d.ts @@ -39,11 +39,6 @@ export interface CssVarsProviderConfig { * @default false */ disableTransitionOnChange?: boolean; - /** - * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI - * @default true - */ - enableColorScheme?: boolean; /** * A function to determine if the key, value should be attached as CSS Variable * `keys` is an array that represents the object path keys. diff --git a/packages/mui-system/src/cssVars/createCssVarsProvider.js b/packages/mui-system/src/cssVars/createCssVarsProvider.js index c862e375e64861..a867989af5e2e7 100644 --- a/packages/mui-system/src/cssVars/createCssVarsProvider.js +++ b/packages/mui-system/src/cssVars/createCssVarsProvider.js @@ -24,7 +24,6 @@ export default function createCssVarsProvider(options) { defaultMode: designSystemMode = 'light', defaultColorScheme: designSystemColorScheme, disableTransitionOnChange: designSystemTransitionOnChange = false, - enableColorScheme: designSystemEnableColorScheme = true, shouldSkipGeneratingVar: designSystemShouldSkipGeneratingVar, resolveTheme, excludeVariablesFromRoot, @@ -60,7 +59,6 @@ export default function createCssVarsProvider(options) { defaultMode = designSystemMode, defaultColorScheme = designSystemColorScheme, disableTransitionOnChange = designSystemTransitionOnChange, - enableColorScheme = designSystemEnableColorScheme, storageWindow = typeof window === 'undefined' ? undefined : window, documentNode = typeof document === 'undefined' ? undefined : document, colorSchemeNode = typeof document === 'undefined' ? undefined : document.documentElement, @@ -174,19 +172,11 @@ export default function createCssVarsProvider(options) { }); defaultColorSchemeStyleSheet[`[${attribute}="${key}"]`] = excludedVariables; } - defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = { - // 4.2 the CSS color-scheme is attached using the `mode` defined in the palette, if enabled. - ...(enableColorScheme && { colorScheme: scheme.palette?.mode }), - ...css, - }; + defaultColorSchemeStyleSheet[`${colorSchemeSelector}, [${attribute}="${key}"]`] = css; } else { otherColorSchemesStyleSheet[ `${colorSchemeSelector === ':root' ? '' : colorSchemeSelector}[${attribute}="${key}"]` - ] = { - // 4.2 same as other color schemes. - ...(enableColorScheme && { colorScheme: scheme.palette?.mode }), - ...css, - }; + ] = css; } }); @@ -284,10 +274,6 @@ export default function createCssVarsProvider(options) { * The document to attach the attribute to */ documentNode: PropTypes.any, - /** - * Indicate to the browser which color scheme is used (light or dark) for rendering built-in UI - */ - enableColorScheme: PropTypes.bool, /** * The key in the local storage used to store current color scheme. */ From a79c794e174ec2c07e4abb81a16d4a101ebc5c06 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 6 Oct 2022 23:41:00 +0700 Subject: [PATCH 11/32] Add CssBaseline to Joy --- .../mui-joy/src/CssBaseline/CssBaseline.tsx | 88 +++++++++++++++++++ .../src/CssBaseline/CssBaselineProps.ts | 13 +++ packages/mui-joy/src/CssBaseline/index.ts | 2 + packages/mui-joy/src/index.ts | 4 + 4 files changed, 107 insertions(+) create mode 100644 packages/mui-joy/src/CssBaseline/CssBaseline.tsx create mode 100644 packages/mui-joy/src/CssBaseline/CssBaselineProps.ts create mode 100644 packages/mui-joy/src/CssBaseline/index.ts diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx new file mode 100644 index 00000000000000..e658c5c24825d4 --- /dev/null +++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx @@ -0,0 +1,88 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { GlobalStyles } from '@mui/system'; +import { Theme, DefaultColorScheme, ColorSystem } from '../styles/types'; +import { CssBaselineProps } from './CssBaselineProps'; + +/** + * Kickstart an elegant, consistent, and simple baseline to build upon. + */ +function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) { + return ( + + { + const styleSheets: Record = {}; + if (enableColorScheme) { + if (theme.vars) { + // The CssBaseline is wrapped inside a CssVarsProvider + ( + Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]> + ).forEach(([key, scheme]) => { + styleSheets[theme.getColorSchemeSelector(key)] = { + colorScheme: scheme.palette?.mode, + }; + }); + } else { + styleSheets.colorScheme = theme.palette.mode; + } + } + return { + html: { + WebkitFontSmoothing: 'antialiased', + MozOsxFontSmoothing: 'grayscale', + // Change from `box-sizing: content-box` so that `width` + // is not affected by `padding` or `border`. + boxSizing: 'border-box', + // Fix font resize problem in iOS + WebkitTextSizeAdjust: '100%', + ...styleSheets, + }, + '*, *::before, *::after': { + boxSizing: 'inherit', + }, + 'strong, b': { + fontWeight: theme.vars.fontWeight.lg, + }, + body: { + margin: 0, // Remove the margin in all browsers. + color: theme.vars.palette.text.primary, + ...(theme.typography.body1 as any), + backgroundColor: theme.vars.palette.background.body, + '@media print': { + // Save printer ink. + backgroundColor: theme.vars.palette.common.white, + }, + // Add support for document.body.requestFullScreen(). + // Other elements, if background transparent, are not supported. + '&::backdrop': { + backgroundColor: theme.vars.palette.background.tooltip, + }, + }, + }; + }} + /> + {children} + + ); +} + +CssBaseline.propTypes /* remove-proptypes */ = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit the d.ts file and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * You can wrap a node. + */ + children: PropTypes.node, + /** + * Enable `color-scheme` CSS property to use `theme.palette.mode`. + * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + * For browser support, check out https://caniuse.com/?search=color-scheme + * @default false + */ + enableColorScheme: PropTypes.bool, +}; + +export default CssBaseline; diff --git a/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts b/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts new file mode 100644 index 00000000000000..bbd4bf498ab3ff --- /dev/null +++ b/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts @@ -0,0 +1,13 @@ +export interface CssBaselineProps { + /** + * You can wrap a node. + */ + children?: React.ReactNode; + /** + * Enable `color-scheme` CSS property to use `theme.palette.mode`. + * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + * For browser support, check out https://caniuse.com/?search=color-scheme + * @default false + */ + enableColorScheme?: boolean; +} diff --git a/packages/mui-joy/src/CssBaseline/index.ts b/packages/mui-joy/src/CssBaseline/index.ts new file mode 100644 index 00000000000000..179c14be74d7e1 --- /dev/null +++ b/packages/mui-joy/src/CssBaseline/index.ts @@ -0,0 +1,2 @@ +export { default } from './CssBaseline'; +export * from './CssBaselineProps'; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 92ed116c82b2b0..97b091cb6dffef 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -52,6 +52,10 @@ export * from './ChipDelete'; export { default as Container } from './Container'; export * from './Container'; +export { default as CssBaseline } from './CssBaseline'; +// eslint-disable-next-line import/export +export * from './CssBaseline'; + export { default as Divider } from './Divider'; export * from './Divider'; From b5da1b6e6f5637dfdab6711b8aafcb0c8b0050f6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 00:08:00 +0700 Subject: [PATCH 12/32] run proptypes --- packages/mui-joy/src/CssBaseline/CssBaseline.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx index e658c5c24825d4..a1f194d223615b 100644 --- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx +++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx @@ -70,7 +70,7 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) CssBaseline.propTypes /* remove-proptypes */ = { // ----------------------------- Warning -------------------------------- // | These PropTypes are generated from the TypeScript type definitions | - // | To update them edit the d.ts file and run "yarn proptypes" | + // | To update them edit TypeScript types and run "yarn proptypes" | // ---------------------------------------------------------------------- /** * You can wrap a node. @@ -83,6 +83,6 @@ CssBaseline.propTypes /* remove-proptypes */ = { * @default false */ enableColorScheme: PropTypes.bool, -}; +} as any; export default CssBaseline; From 88b48f7f2b308dae1c3d225ac45dd618cd35996a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 00:08:44 +0700 Subject: [PATCH 13/32] fix lint --- packages/mui-joy/src/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 97b091cb6dffef..8bb1c9f2551099 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -53,7 +53,6 @@ export { default as Container } from './Container'; export * from './Container'; export { default as CssBaseline } from './CssBaseline'; -// eslint-disable-next-line import/export export * from './CssBaseline'; export { default as Divider } from './Divider'; From 23c27eedc3b4bc6f23fcb691314d6fb622831d7e Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 10:55:22 +0700 Subject: [PATCH 14/32] fix backdrop color --- packages/mui-joy/src/CssBaseline/CssBaseline.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx index a1f194d223615b..f6fabf9158fa1b 100644 --- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx +++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx @@ -56,7 +56,7 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) // Add support for document.body.requestFullScreen(). // Other elements, if background transparent, are not supported. '&::backdrop': { - backgroundColor: theme.vars.palette.background.tooltip, + backgroundColor: theme.vars.palette.background.backdrop, }, }, }; From bea2b1176dc8dd3730773c55bdd37b1e02c6a21a Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 11:16:01 +0700 Subject: [PATCH 15/32] fix Joy color scheme styles --- .../mui-joy/src/CssBaseline/CssBaseline.tsx | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx index f6fabf9158fa1b..dd72c6d359a829 100644 --- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx +++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx @@ -12,20 +12,16 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) { - const styleSheets: Record = {}; + const colorSchemeStyles: Record = {}; if (enableColorScheme) { - if (theme.vars) { - // The CssBaseline is wrapped inside a CssVarsProvider - ( - Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]> - ).forEach(([key, scheme]) => { - styleSheets[theme.getColorSchemeSelector(key)] = { - colorScheme: scheme.palette?.mode, - }; - }); - } else { - styleSheets.colorScheme = theme.palette.mode; - } + // The CssBaseline is wrapped inside a CssVarsProvider + ( + Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]> + ).forEach(([key, scheme]) => { + colorSchemeStyles[theme.getColorSchemeSelector(key)] = { + colorScheme: scheme.palette?.mode, + }; + }); } return { html: { @@ -36,7 +32,6 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) boxSizing: 'border-box', // Fix font resize problem in iOS WebkitTextSizeAdjust: '100%', - ...styleSheets, }, '*, *::before, *::after': { boxSizing: 'inherit', @@ -59,6 +54,7 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) backgroundColor: theme.vars.palette.background.backdrop, }, }, + ...colorSchemeStyles, }; }} /> From 784a5f61687c4961691cee571d0aea59255450cb Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 11:16:08 +0700 Subject: [PATCH 16/32] add visual regression --- .../fixtures/CssBaseline/JoyCssBaseline.js | 25 +++++++++++++++++++ .../CssBaseline/MaterialCssBaseline.js | 25 +++++++++++++++++++ 2 files changed, 50 insertions(+) create mode 100644 test/regressions/fixtures/CssBaseline/JoyCssBaseline.js create mode 100644 test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js diff --git a/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js b/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js new file mode 100644 index 00000000000000..170083b73f82f1 --- /dev/null +++ b/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { CssVarsProvider } from '@mui/joy/styles'; +import Box from '@mui/joy/Box'; +import CssBaseline from '@mui/joy/CssBaseline'; + +export default function JoyCssBaseline() { + return ( + + + + + {/* The the color-scheme of the scrollbar */} + + + + {/* The the color-scheme of the scrollbar */} + + + + + ); +} diff --git a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js new file mode 100644 index 00000000000000..8f55e462a2f9f7 --- /dev/null +++ b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js @@ -0,0 +1,25 @@ +import * as React from 'react'; +import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'; +import Box from '@mui/material/Box'; +import CssBaseline from '@mui/material/CssBaseline'; + +export default function JoyCssBaseline() { + return ( + + + + + {/* The the color-scheme of the scrollbar */} + + + + {/* The the color-scheme of the scrollbar */} + + + + + ); +} From 4ae0ff088e899098e7fc37a753e0f896ebc65c2b Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 00:00:38 +0700 Subject: [PATCH 17/32] fix color scheme styles generation --- .../src/CssBaseline/CssBaseline.js | 76 +++++++++---------- 1 file changed, 35 insertions(+), 41 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 5798069cbf7187..e4a2ef9326d303 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -3,45 +3,17 @@ import PropTypes from 'prop-types'; import useThemeProps from '../styles/useThemeProps'; import GlobalStyles from '../GlobalStyles'; -export const html = (theme, enableColorScheme) => { - const styleSheets = {}; - if (enableColorScheme) { - if (theme.vars) { - // The CssBaseline is wrapped inside a CssVarsProvider - Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { - styleSheets[theme.getColorSchemeSelector(key)] = { - colorScheme: scheme.palette?.mode, - }; - }); - } else { - styleSheets.colorScheme = theme.palette.mode; - } - } - return { - WebkitFontSmoothing: 'antialiased', - MozOsxFontSmoothing: 'grayscale', - // Change from `box-sizing: content-box` so that `width` - // is not affected by `padding` or `border`. - boxSizing: 'border-box', - // Fix font resize problem in iOS - WebkitTextSizeAdjust: '100%', - ...styleSheets, - }; -}; - -export const body = (theme) => ({ - color: (theme.vars || theme).palette.text.primary, - ...theme.typography.body1, - backgroundColor: (theme.vars || theme).palette.background.default, - '@media print': { - // Save printer ink. - backgroundColor: (theme.vars || theme).palette.common.white, - }, -}); - export const styles = (theme, enableColorScheme = false) => { - let defaultStyles = { - html: html(theme, enableColorScheme), + const defaultStyles = { + html: { + WebkitFontSmoothing: 'antialiased', + MozOsxFontSmoothing: 'grayscale', + // Change from `box-sizing: content-box` so that `width` + // is not affected by `padding` or `border`. + boxSizing: 'border-box', + // Fix font resize problem in iOS + WebkitTextSizeAdjust: '100%', + }, '*, *::before, *::after': { boxSizing: 'inherit', }, @@ -50,7 +22,13 @@ export const styles = (theme, enableColorScheme = false) => { }, body: { margin: 0, // Remove the margin in all browsers. - ...body(theme), + color: (theme.vars || theme).palette.text.primary, + ...theme.typography.body1, + backgroundColor: (theme.vars || theme).palette.background.default, + '@media print': { + // Save printer ink. + backgroundColor: (theme.vars || theme).palette.common.white, + }, // Add support for document.body.requestFullScreen(). // Other elements, if background transparent, are not supported. '&::backdrop': { @@ -59,12 +37,28 @@ export const styles = (theme, enableColorScheme = false) => { }, }; + const colorSchemeStyles = {}; + if (enableColorScheme) { + if (theme.vars) { + // The CssBaseline is wrapped inside a CssVarsProvider + Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { + colorSchemeStyles[theme.getColorSchemeSelector(key).replace(' &', '')] = { + colorScheme: scheme.palette?.mode, + }; + }); + } else { + colorSchemeStyles.html = { + colorScheme: theme.palette.mode, + }; + } + } + const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides; if (themeOverrides) { - defaultStyles = [defaultStyles, themeOverrides]; + return [defaultStyles, colorSchemeStyles, themeOverrides]; } - return defaultStyles; + return [defaultStyles, colorSchemeStyles]; }; /** From d7456f977c72a94b1c2b4e2f3057224f7d06f0c4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 11:43:24 +0700 Subject: [PATCH 18/32] fix implementation --- packages/mui-material/src/CssBaseline/CssBaseline.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index e4a2ef9326d303..5334596bfa7335 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -4,7 +4,7 @@ import useThemeProps from '../styles/useThemeProps'; import GlobalStyles from '../GlobalStyles'; export const styles = (theme, enableColorScheme = false) => { - const defaultStyles = { + let defaultStyles = { html: { WebkitFontSmoothing: 'antialiased', MozOsxFontSmoothing: 'grayscale', @@ -47,18 +47,18 @@ export const styles = (theme, enableColorScheme = false) => { }; }); } else { - colorSchemeStyles.html = { - colorScheme: theme.palette.mode, - }; + defaultStyles.html.colorScheme = theme.palette.mode; } } + defaultStyles = { ...defaultStyles, ...colorSchemeStyles }; + const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides; if (themeOverrides) { - return [defaultStyles, colorSchemeStyles, themeOverrides]; + defaultStyles = [defaultStyles, themeOverrides]; } - return [defaultStyles, colorSchemeStyles]; + return defaultStyles; }; /** From 4187694c4c3158408d2747214f1c04c12ffb8dac Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 12:27:35 +0700 Subject: [PATCH 19/32] apply logic to ScopedCssBaseline --- .../mui-joy/src/CssBaseline/CssBaseline.tsx | 2 +- .../src/CssBaseline/CssBaseline.js | 70 ++++++++++--------- .../ScopedCssBaseline/ScopedCssBaseline.js | 3 +- 3 files changed, 41 insertions(+), 34 deletions(-) diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx index dd72c6d359a829..6d496a1e18bea4 100644 --- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx +++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx @@ -18,7 +18,7 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) ( Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]> ).forEach(([key, scheme]) => { - colorSchemeStyles[theme.getColorSchemeSelector(key)] = { + colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = { colorScheme: scheme.palette?.mode, }; }); diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 5334596bfa7335..d7a6a442362013 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -3,17 +3,44 @@ import PropTypes from 'prop-types'; import useThemeProps from '../styles/useThemeProps'; import GlobalStyles from '../GlobalStyles'; +export const colorScheme = (theme, enableColorScheme) => { + if (!enableColorScheme) { + return {}; + } + const colorSchemeStyles = {}; + Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { + colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = { + colorScheme: scheme.palette?.mode, + }; + }); + return colorSchemeStyles; +}; + +export const html = (theme, enableColorScheme) => ({ + WebkitFontSmoothing: 'antialiased', // Antialiasing. + MozOsxFontSmoothing: 'grayscale', // Antialiasing. + // Change from `box-sizing: content-box` so that `width` + // is not affected by `padding` or `border`. + boxSizing: 'border-box', + // Fix font resize problem in iOS + WebkitTextSizeAdjust: '100%', + // When used under CssVarsProvider, colorScheme should not be applied dynamically because it will generate the stylesheet twice for server-rendered applications. + ...(enableColorScheme && !theme.vars && { colorScheme: theme.palette.mode }), +}); + +export const body = (theme) => ({ + color: (theme.vars || theme).palette.text.primary, + ...theme.typography.body1, + backgroundColor: (theme.vars || theme).palette.background.default, + '@media print': { + // Save printer ink. + backgroundColor: (theme.vars || theme).palette.common.white, + }, +}); + export const styles = (theme, enableColorScheme = false) => { let defaultStyles = { - html: { - WebkitFontSmoothing: 'antialiased', - MozOsxFontSmoothing: 'grayscale', - // Change from `box-sizing: content-box` so that `width` - // is not affected by `padding` or `border`. - boxSizing: 'border-box', - // Fix font resize problem in iOS - WebkitTextSizeAdjust: '100%', - }, + html: html(theme, enableColorScheme), '*, *::before, *::after': { boxSizing: 'inherit', }, @@ -22,37 +49,16 @@ export const styles = (theme, enableColorScheme = false) => { }, body: { margin: 0, // Remove the margin in all browsers. - color: (theme.vars || theme).palette.text.primary, - ...theme.typography.body1, - backgroundColor: (theme.vars || theme).palette.background.default, - '@media print': { - // Save printer ink. - backgroundColor: (theme.vars || theme).palette.common.white, - }, + ...body(theme), // Add support for document.body.requestFullScreen(). // Other elements, if background transparent, are not supported. '&::backdrop': { backgroundColor: (theme.vars || theme).palette.background.default, }, }, + ...colorScheme(theme, enableColorScheme), }; - const colorSchemeStyles = {}; - if (enableColorScheme) { - if (theme.vars) { - // The CssBaseline is wrapped inside a CssVarsProvider - Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { - colorSchemeStyles[theme.getColorSchemeSelector(key).replace(' &', '')] = { - colorScheme: scheme.palette?.mode, - }; - }); - } else { - defaultStyles.html.colorScheme = theme.palette.mode; - } - } - - defaultStyles = { ...defaultStyles, ...colorSchemeStyles }; - const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides; if (themeOverrides) { defaultStyles = [defaultStyles, themeOverrides]; diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js index 6ae0f1783954ab..b62c3ab24f8ce1 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import useThemeProps from '../styles/useThemeProps'; import styled from '../styles/styled'; -import { html, body } from '../CssBaseline/CssBaseline'; +import { html, body, colorScheme } from '../CssBaseline/CssBaseline'; import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses'; const useUtilityClasses = (ownerState) => { @@ -31,6 +31,7 @@ const ScopedCssBaselineRoot = styled('div', { '& strong, & b': { fontWeight: theme.typography.fontWeightBold, }, + ...colorScheme(theme, ownerState.enableColorScheme), }; }); From fb0a14b755fef1aa5cee9ef0009e893819965974 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 12:30:01 +0700 Subject: [PATCH 20/32] update regression --- .../fixtures/CssBaseline/JoyCssBaseline.js | 4 ++-- .../fixtures/CssBaseline/MaterialCssBaseline.js | 15 ++++++++++++--- 2 files changed, 14 insertions(+), 5 deletions(-) diff --git a/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js b/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js index 170083b73f82f1..d9821c7efb3b73 100644 --- a/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js +++ b/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js @@ -9,14 +9,14 @@ export default function JoyCssBaseline() { - {/* The the color-scheme of the scrollbar */} + {/* The scrollbar should be light */} - {/* The the color-scheme of the scrollbar */} + {/* The scrollbar should be dark */} diff --git a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js index 8f55e462a2f9f7..fbf8af34e56e2d 100644 --- a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js +++ b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'; import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; +import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; export default function JoyCssBaseline() { return ( @@ -9,16 +10,24 @@ export default function JoyCssBaseline() { - {/* The the color-scheme of the scrollbar */} + {/* The scrollbar should be light */} - {/* The the color-scheme of the scrollbar */} + {/* The scrollbar should be dark */} + + {/* The scrollbar should be dark */} + + ); From 65eaac9b10aadbec055872adcca5279484927eff Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 12:50:19 +0700 Subject: [PATCH 21/32] fix mui CssBaseline --- packages/mui-material/src/CssBaseline/CssBaseline.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index d7a6a442362013..6dc83702e65314 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -4,7 +4,7 @@ import useThemeProps from '../styles/useThemeProps'; import GlobalStyles from '../GlobalStyles'; export const colorScheme = (theme, enableColorScheme) => { - if (!enableColorScheme) { + if (!enableColorScheme || !theme.colorSchemes) { return {}; } const colorSchemeStyles = {}; From 3c61b0b423eebad8e45bd4189c920f7b01001df4 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Fri, 7 Oct 2022 14:00:34 +0700 Subject: [PATCH 22/32] fix logic and regression --- .../src/CssBaseline/CssBaseline.js | 23 ++++------- .../ScopedCssBaseline/ScopedCssBaseline.js | 12 +++++- .../CssBaseline/MaterialCssBaseline.js | 9 ---- .../CssBaseline/MaterialScopedCssBaseline.js | 41 +++++++++++++++++++ 4 files changed, 60 insertions(+), 25 deletions(-) create mode 100644 test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js diff --git a/packages/mui-material/src/CssBaseline/CssBaseline.js b/packages/mui-material/src/CssBaseline/CssBaseline.js index 6dc83702e65314..c2a55eb7ebbebe 100644 --- a/packages/mui-material/src/CssBaseline/CssBaseline.js +++ b/packages/mui-material/src/CssBaseline/CssBaseline.js @@ -3,19 +3,6 @@ import PropTypes from 'prop-types'; import useThemeProps from '../styles/useThemeProps'; import GlobalStyles from '../GlobalStyles'; -export const colorScheme = (theme, enableColorScheme) => { - if (!enableColorScheme || !theme.colorSchemes) { - return {}; - } - const colorSchemeStyles = {}; - Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { - colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = { - colorScheme: scheme.palette?.mode, - }; - }); - return colorSchemeStyles; -}; - export const html = (theme, enableColorScheme) => ({ WebkitFontSmoothing: 'antialiased', // Antialiasing. MozOsxFontSmoothing: 'grayscale', // Antialiasing. @@ -39,6 +26,14 @@ export const body = (theme) => ({ }); export const styles = (theme, enableColorScheme = false) => { + const colorSchemeStyles = {}; + if (enableColorScheme && theme.colorSchemes) { + Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { + colorSchemeStyles[theme.getColorSchemeSelector(key).replace(/\s*&/, '')] = { + colorScheme: scheme.palette?.mode, + }; + }); + } let defaultStyles = { html: html(theme, enableColorScheme), '*, *::before, *::after': { @@ -56,7 +51,7 @@ export const styles = (theme, enableColorScheme = false) => { backgroundColor: (theme.vars || theme).palette.background.default, }, }, - ...colorScheme(theme, enableColorScheme), + ...colorSchemeStyles, }; const themeOverrides = theme.components?.MuiCssBaseline?.styleOverrides; diff --git a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js index b62c3ab24f8ce1..f74c229df06bf9 100644 --- a/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js +++ b/packages/mui-material/src/ScopedCssBaseline/ScopedCssBaseline.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/base'; import useThemeProps from '../styles/useThemeProps'; import styled from '../styles/styled'; -import { html, body, colorScheme } from '../CssBaseline/CssBaseline'; +import { html, body } from '../CssBaseline/CssBaseline'; import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses'; const useUtilityClasses = (ownerState) => { @@ -22,6 +22,14 @@ const ScopedCssBaselineRoot = styled('div', { slot: 'Root', overridesResolver: (props, styles) => styles.root, })(({ theme, ownerState }) => { + const colorSchemeStyles = {}; + if (ownerState.enableColorScheme && theme.colorSchemes) { + Object.entries(theme.colorSchemes).forEach(([key, scheme]) => { + colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = { + colorScheme: scheme.palette?.mode, + }; + }); + } return { ...html(theme, ownerState.enableColorScheme), ...body(theme), @@ -31,7 +39,7 @@ const ScopedCssBaselineRoot = styled('div', { '& strong, & b': { fontWeight: theme.typography.fontWeightBold, }, - ...colorScheme(theme, ownerState.enableColorScheme), + ...colorSchemeStyles, }; }); diff --git a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js index fbf8af34e56e2d..c620ff65581a63 100644 --- a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js +++ b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js @@ -2,7 +2,6 @@ import * as React from 'react'; import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/styles'; import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; -import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; export default function JoyCssBaseline() { return ( @@ -20,14 +19,6 @@ export default function JoyCssBaseline() { {/* The scrollbar should be dark */} - - {/* The scrollbar should be dark */} - - ); diff --git a/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js new file mode 100644 index 00000000000000..055c33f96465a9 --- /dev/null +++ b/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js @@ -0,0 +1,41 @@ +import * as React from 'react'; +import { + Experimental_CssVarsProvider as CssVarsProvider, + experimental_extendTheme as extendTheme, + createTheme, +} from '@mui/material/styles'; +import { cyan } from '@mui/material/colors'; +import Box from '@mui/material/Box'; +import ScopedCssBaseline from '@mui/material/ScopedCssBaseline'; + +const ocean = createTheme({ + palette: { + mode: 'dark', + background: { + paper: cyan[200], + }, + }, +}); + +const theme = extendTheme({ + colorSchemes: { + ocean: { + palette: ocean.palette, + }, + }, +}); + +export default function JoyCssBaseline() { + return ( + + + {/* The scrollbar should be dark */} + + + + ); +} From 269d6474a2105b65b70b0bb47042fd79badc0caa Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Oct 2022 22:43:33 +0700 Subject: [PATCH 23/32] fix naming --- test/regressions/fixtures/CssBaseline/JoyCssBaseline.js | 2 +- test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js | 2 +- .../fixtures/CssBaseline/MaterialScopedCssBaseline.js | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js b/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js index d9821c7efb3b73..3c02b8620e2680 100644 --- a/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js +++ b/test/regressions/fixtures/CssBaseline/JoyCssBaseline.js @@ -6,7 +6,7 @@ import CssBaseline from '@mui/joy/CssBaseline'; export default function JoyCssBaseline() { return ( - + {/* The scrollbar should be light */} diff --git a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js index c620ff65581a63..56e5b874851d5c 100644 --- a/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js +++ b/test/regressions/fixtures/CssBaseline/MaterialCssBaseline.js @@ -3,7 +3,7 @@ import { Experimental_CssVarsProvider as CssVarsProvider } from '@mui/material/s import Box from '@mui/material/Box'; import CssBaseline from '@mui/material/CssBaseline'; -export default function JoyCssBaseline() { +export default function MaterialCssBaseline() { return ( diff --git a/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js b/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js index 055c33f96465a9..00aed3b0ec229d 100644 --- a/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js +++ b/test/regressions/fixtures/CssBaseline/MaterialScopedCssBaseline.js @@ -25,7 +25,7 @@ const theme = extendTheme({ }, }); -export default function JoyCssBaseline() { +export default function MaterialScopedCssBaseline() { return ( Date: Sun, 9 Oct 2022 22:45:01 +0700 Subject: [PATCH 24/32] flip the flag to disableColorScheme --- packages/mui-joy/src/CssBaseline/CssBaseline.tsx | 11 ++++++----- packages/mui-joy/src/CssBaseline/CssBaselineProps.ts | 5 +++-- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx index 6d496a1e18bea4..164e15cff7b3fe 100644 --- a/packages/mui-joy/src/CssBaseline/CssBaseline.tsx +++ b/packages/mui-joy/src/CssBaseline/CssBaseline.tsx @@ -7,13 +7,13 @@ import { CssBaselineProps } from './CssBaselineProps'; /** * Kickstart an elegant, consistent, and simple baseline to build upon. */ -function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) { +function CssBaseline({ children, disableColorScheme = false }: CssBaselineProps) { return ( { const colorSchemeStyles: Record = {}; - if (enableColorScheme) { + if (!disableColorScheme) { // The CssBaseline is wrapped inside a CssVarsProvider ( Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]> @@ -37,7 +37,7 @@ function CssBaseline({ children, enableColorScheme = false }: CssBaselineProps) boxSizing: 'inherit', }, 'strong, b': { - fontWeight: theme.vars.fontWeight.lg, + fontWeight: 'bold', }, body: { margin: 0, // Remove the margin in all browsers. @@ -73,12 +73,13 @@ CssBaseline.propTypes /* remove-proptypes */ = { */ children: PropTypes.node, /** - * Enable `color-scheme` CSS property to use `theme.palette.mode`. + * Disable `color-scheme` CSS property. + * * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme * For browser support, check out https://caniuse.com/?search=color-scheme * @default false */ - enableColorScheme: PropTypes.bool, + disableColorScheme: PropTypes.bool, } as any; export default CssBaseline; diff --git a/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts b/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts index bbd4bf498ab3ff..3cf05cdd2a0c4a 100644 --- a/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts +++ b/packages/mui-joy/src/CssBaseline/CssBaselineProps.ts @@ -4,10 +4,11 @@ export interface CssBaselineProps { */ children?: React.ReactNode; /** - * Enable `color-scheme` CSS property to use `theme.palette.mode`. + * Disable `color-scheme` CSS property. + * * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme * For browser support, check out https://caniuse.com/?search=color-scheme * @default false */ - enableColorScheme?: boolean; + disableColorScheme?: boolean; } From 49a4707f8658226fd8f5550c23665aec7f25b965 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Oct 2022 23:15:38 +0700 Subject: [PATCH 25/32] Add ScopedCssBaseline to Joy --- .../ScopedCssBaseline/ScopedCssBaseline.tsx | 127 ++++++++++++++++++ .../ScopedCssBaselineProps.ts | 33 +++++ .../mui-joy/src/ScopedCssBaseline/index.ts | 3 + .../scopedCssBaselineClasses.ts | 16 +++ packages/mui-joy/src/index.ts | 3 + packages/mui-joy/src/styles/components.d.ts | 9 ++ .../mui-joy/src/styles/extendTheme.spec.ts | 14 ++ 7 files changed, 205 insertions(+) create mode 100644 packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx create mode 100644 packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts create mode 100644 packages/mui-joy/src/ScopedCssBaseline/index.ts create mode 100644 packages/mui-joy/src/ScopedCssBaseline/scopedCssBaselineClasses.ts diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx new file mode 100644 index 00000000000000..1e34d346bab334 --- /dev/null +++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx @@ -0,0 +1,127 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { OverridableComponent } from '@mui/types'; +import { unstable_composeClasses as composeClasses } from '@mui/base'; +import useThemeProps from '../styles/useThemeProps'; +import styled from '../styles/styled'; +import { DefaultColorScheme, ColorSystem } from '../styles/types'; +import { + ScopedCssBaselineTypeMap, + ScopedCssBaselineOwnerState, + ScopedCssBaselineProps, +} from './ScopedCssBaselineProps'; +import { getScopedCssBaselineUtilityClass } from './scopedCssBaselineClasses'; + +const useUtilityClasses = () => { + const slots = { + root: ['root'], + }; + + return composeClasses(slots, getScopedCssBaselineUtilityClass, {}); +}; + +const ScopedCssBaselineRoot = styled('div', { + name: 'JoyScopedCssBaseline', + slot: 'Root', + overridesResolver: (props, styles) => styles.root, +})<{ ownerState: ScopedCssBaselineOwnerState }>(({ theme, ownerState }) => { + const colorSchemeStyles: Record = {}; + if (!ownerState.disableColorScheme && theme.colorSchemes) { + (Object.entries(theme.colorSchemes) as Array<[DefaultColorScheme, ColorSystem]>).forEach( + ([key, scheme]) => { + colorSchemeStyles[`&${theme.getColorSchemeSelector(key).replace(/\s*&/, '')}`] = { + colorScheme: scheme.palette?.mode, + }; + }, + ); + } + return { + WebkitFontSmoothing: 'antialiased', + MozOsxFontSmoothing: 'grayscale', + // Change from `box-sizing: content-box` so that `width` + // is not affected by `padding` or `border`. + boxSizing: 'border-box', + // Fix font resize problem in iOS + WebkitTextSizeAdjust: '100%', + color: theme.vars.palette.text.primary, + ...(theme.typography.body1 as any), + backgroundColor: theme.vars.palette.background.body, + '@media print': { + // Save printer ink. + backgroundColor: theme.vars.palette.common.white, + }, + '& *, & *::before, & *::after': { + boxSizing: 'inherit', + }, + '& strong, & b': { + fontWeight: 'bold', + }, + ...colorSchemeStyles, + }; +}); + +const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, ref) { + const props = useThemeProps({ + props: inProps, + name: 'MuiScopedCssBaseline', + }); + + const { className, component = 'div', disableColorScheme = false, ...other } = props; + + const ownerState = { + ...props, + component, + disableColorScheme, + }; + + const classes = useUtilityClasses(); + + return ( + + ); +}) as OverridableComponent; + +ScopedCssBaseline.propTypes /* remove-proptypes */ = { + // ----------------------------- Warning -------------------------------- + // | These PropTypes are generated from the TypeScript type definitions | + // | To update them edit TypeScript types and run "yarn proptypes" | + // ---------------------------------------------------------------------- + /** + * You can wrap a node. + */ + children: PropTypes.node, + /** + * @ignore + */ + className: PropTypes.string, + /** + * The component used for the root node. + * Either a string to use a HTML element or a component. + */ + component: PropTypes.elementType, + /** + * Disable `color-scheme` CSS property. + * + * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + * For browser support, check out https://caniuse.com/?search=color-scheme + * @default false + */ + disableColorScheme: PropTypes.bool, + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx: PropTypes.oneOfType([ + PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), + PropTypes.func, + PropTypes.object, + ]), +} as any; + +export default ScopedCssBaseline; diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts new file mode 100644 index 00000000000000..653f7f0007ea2e --- /dev/null +++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaselineProps.ts @@ -0,0 +1,33 @@ +import { OverrideProps } from '@mui/types'; +import { SxProps } from '../styles/types'; + +export type ScopedCssBaselineSlot = 'root'; + +export interface ScopedCssBaselineTypeMap

{ + props: P & { + /** + * You can wrap a node. + */ + children?: React.ReactNode; + /** + * Disable `color-scheme` CSS property. + * + * For more details, check out https://developer.mozilla.org/en-US/docs/Web/CSS/color-scheme + * For browser support, check out https://caniuse.com/?search=color-scheme + * @default false + */ + disableColorScheme?: boolean; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; + }; + defaultComponent: D; +} + +export type ScopedCssBaselineProps< + D extends React.ElementType = ScopedCssBaselineTypeMap['defaultComponent'], + P = { component?: React.ElementType }, +> = OverrideProps, D>; + +export interface ScopedCssBaselineOwnerState extends ScopedCssBaselineProps {} diff --git a/packages/mui-joy/src/ScopedCssBaseline/index.ts b/packages/mui-joy/src/ScopedCssBaseline/index.ts new file mode 100644 index 00000000000000..932d9e670454a8 --- /dev/null +++ b/packages/mui-joy/src/ScopedCssBaseline/index.ts @@ -0,0 +1,3 @@ +export { default } from './ScopedCssBaseline'; +export * from './ScopedCssBaselineProps'; +export { default as scopedCssBaselineClasses } from './scopedCssBaselineClasses'; diff --git a/packages/mui-joy/src/ScopedCssBaseline/scopedCssBaselineClasses.ts b/packages/mui-joy/src/ScopedCssBaseline/scopedCssBaselineClasses.ts new file mode 100644 index 00000000000000..aff1b911f67bb9 --- /dev/null +++ b/packages/mui-joy/src/ScopedCssBaseline/scopedCssBaselineClasses.ts @@ -0,0 +1,16 @@ +import { generateUtilityClass, generateUtilityClasses } from '../className'; + +export interface ScopedCssBaselineClasses { + /** Styles applied to the root element. */ + root: string; +} + +export type ScopedCssBaselineClassKey = keyof ScopedCssBaselineClasses; + +export function getScopedCssBaselineUtilityClass(slot: string): string { + return generateUtilityClass('JoyScopedCssBaseline', slot); +} + +const scopedCssBaselineClasses = generateUtilityClasses('JoyScopedCssBaseline', ['root']); + +export default scopedCssBaselineClasses; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 8bb1c9f2551099..4bc4d85db5a94c 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -55,6 +55,9 @@ export * from './Container'; export { default as CssBaseline } from './CssBaseline'; export * from './CssBaseline'; +export { default as ScopedCssBaseline } from './ScopedCssBaseline'; +export * from './ScopedCssBaseline'; + export { default as Divider } from './Divider'; export * from './Divider'; diff --git a/packages/mui-joy/src/styles/components.d.ts b/packages/mui-joy/src/styles/components.d.ts index 5baebedd8c0476..2af2a749419865 100644 --- a/packages/mui-joy/src/styles/components.d.ts +++ b/packages/mui-joy/src/styles/components.d.ts @@ -45,6 +45,11 @@ import { CircularProgressSlot, } from '../CircularProgress/CircularProgressProps'; import { ContainerProps, ContainerSlot } from '../Container/ContainerProps'; +import { + ScopedCssBaselineProps, + ScopedCssBaselineOwnerState, + ScopedCssBaselineSlot, +} from '../ScopedCssBaseline/ScopedCssBaselineProps'; import { DividerProps, DividerOwnerState, DividerSlot } from '../Divider/DividerProps'; import { FormControlProps, @@ -219,6 +224,10 @@ export interface Components { defaultProps?: Partial; styleOverrides?: OverridesStyleRules; }; + JoyScopedCssBaseline?: { + defaultProps?: Partial; + styleOverrides?: OverridesStyleRules; + }; JoyDivider?: { defaultProps?: Partial; styleOverrides?: OverridesStyleRules; diff --git a/packages/mui-joy/src/styles/extendTheme.spec.ts b/packages/mui-joy/src/styles/extendTheme.spec.ts index a7af37166e146d..0871826b7a4f54 100644 --- a/packages/mui-joy/src/styles/extendTheme.spec.ts +++ b/packages/mui-joy/src/styles/extendTheme.spec.ts @@ -14,6 +14,7 @@ import { ChipOwnerState } from '@mui/joy/Chip'; import { ChipDeleteOwnerState } from '@mui/joy/ChipDelete'; import { CircularProgressOwnerState } from '@mui/joy/CircularProgress'; import { ContainerProps } from '@mui/joy/Container'; +import { ScopedCssBaselineOwnerState } from '@mui/joy/ScopedCssBaseline'; import { DividerOwnerState } from '@mui/joy/Divider'; import { FormControlOwnerState } from '@mui/joy/FormControl'; import { FormHelperTextOwnerState } from '@mui/joy/FormHelperText'; @@ -353,6 +354,19 @@ extendTheme({ }, }, }, + JoyScopedCssBaseline: { + defaultProps: { + disableColorScheme: true, + }, + styleOverrides: { + root: ({ ownerState }) => { + expectType, typeof ownerState>( + ownerState, + ); + return {}; + }, + }, + }, JoyDivider: { defaultProps: { orientation: 'vertical', From c1822b3920d9199b87ef50a09fc0f75ffc53e502 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Oct 2022 23:19:50 +0700 Subject: [PATCH 26/32] Add JoyScopedBaseline regression --- .../CssBaseline/JoyScopedCssBaseline.js | 32 +++++++++++++++++++ 1 file changed, 32 insertions(+) create mode 100644 test/regressions/fixtures/CssBaseline/JoyScopedCssBaseline.js diff --git a/test/regressions/fixtures/CssBaseline/JoyScopedCssBaseline.js b/test/regressions/fixtures/CssBaseline/JoyScopedCssBaseline.js new file mode 100644 index 00000000000000..60ee6cc8a6f255 --- /dev/null +++ b/test/regressions/fixtures/CssBaseline/JoyScopedCssBaseline.js @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { CssVarsProvider, extendTheme } from '@mui/joy/styles'; +import colors from '@mui/joy/colors'; +import Box from '@mui/joy/Box'; +import ScopedCssBaseline from '@mui/joy/ScopedCssBaseline'; + +const theme = extendTheme({ + colorSchemes: { + forest: { + palette: { + mode: 'dark', + background: { + body: colors.green[200], + }, + }, + }, + }, +}); + +export default function JoyScopedCssBaseline() { + return ( + + + {/* The scrollbar should be dark */} + + + + ); +} From 5bc8db9382b007279a9b9f5e804b14d60bfa49e6 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Oct 2022 23:30:41 +0700 Subject: [PATCH 27/32] add unit tests --- .../ScopedCssBaseline.test.tsx | 19 +++++++++++++++++++ .../ScopedCssBaseline/ScopedCssBaseline.tsx | 2 +- packages/mui-joy/src/styles/defaultTheme.ts | 2 ++ 3 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx new file mode 100644 index 00000000000000..8d59eddf157a65 --- /dev/null +++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx @@ -0,0 +1,19 @@ +import * as React from 'react'; +import { createRenderer, describeConformance } from 'test/utils'; +import { ThemeProvider } from '@mui/joy/styles'; +import ScopedCssBaseline, { scopedCssBaselineClasses as classes } from '@mui/joy/ScopedCssBaseline'; + +describe('', () => { + const { render } = createRenderer(); + + describeConformance(, () => ({ + classes, + inheritComponent: 'div', + render, + ThemeProvider, + muiName: 'JoyScopedCssBaseline', + refInstanceof: window.HTMLDivElement, + testComponentPropWith: 'span', + skip: ['classesRoot', 'componentsProp'], + })); +}); diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx index 1e34d346bab334..e1b1b8d6978a04 100644 --- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx +++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.tsx @@ -64,7 +64,7 @@ const ScopedCssBaselineRoot = styled('div', { const ScopedCssBaseline = React.forwardRef(function ScopedCssBaseline(inProps, ref) { const props = useThemeProps({ props: inProps, - name: 'MuiScopedCssBaseline', + name: 'JoyScopedCssBaseline', }); const { className, component = 'div', disableColorScheme = false, ...other } = props; diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index 79b8c71965ddcc..c19d2bba82f7d1 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -7,6 +7,7 @@ export const getThemeWithVars = ( themeInput?: Omit & ColorSystemOptions, ) => { const { + cssVarPrefix, colorSchemes, focus, fontFamily, @@ -59,6 +60,7 @@ export const getThemeWithVars = ( shadow, palette, }, + getColorSchemeSelector: () => '&', } as unknown as Theme; }; From 44ac5cb327d36276690b66f5514586a517eed3e2 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Sun, 9 Oct 2022 23:57:04 +0700 Subject: [PATCH 28/32] export GlobalStyles --- packages/mui-joy/src/GlobalStyles/index.ts | 1 + packages/mui-joy/src/index.ts | 2 ++ 2 files changed, 3 insertions(+) create mode 100644 packages/mui-joy/src/GlobalStyles/index.ts diff --git a/packages/mui-joy/src/GlobalStyles/index.ts b/packages/mui-joy/src/GlobalStyles/index.ts new file mode 100644 index 00000000000000..63d5f8f365ad1a --- /dev/null +++ b/packages/mui-joy/src/GlobalStyles/index.ts @@ -0,0 +1 @@ +export { GlobalStyles as default } from '@mui/system'; diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 4bc4d85db5a94c..70c4d2017b0d73 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -1,6 +1,8 @@ export { default as colors } from './colors'; export * from './styles'; +export { default as GlobalStyles } from './GlobalStyles'; + export { default as AspectRatio } from './AspectRatio'; export * from './AspectRatio'; From 89681bcf3ea033a003208bc27a2a07148b00cafc Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 10 Oct 2022 00:13:47 +0700 Subject: [PATCH 29/32] add CssBaseline doc --- .../components/css-baseline/css-baseline.md | 168 ++++++++++++++++++ docs/data/joy/pages.ts | 5 + docs/pages/joy-ui/react-css-baseline.js | 7 + 3 files changed, 180 insertions(+) create mode 100644 docs/data/joy/components/css-baseline/css-baseline.md create mode 100644 docs/pages/joy-ui/react-css-baseline.js diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md new file mode 100644 index 00000000000000..5f4f01b12aff1b --- /dev/null +++ b/docs/data/joy/components/css-baseline/css-baseline.md @@ -0,0 +1,168 @@ +--- +product: joy-ui +githubLabel: 'component: CssBaseline' +--- + +# CSS Baseline + +

Joy UI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.

+ +{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} + +## Global reset + +You might be familiar with [normalize.css](https://github.com/necolas/normalize.css), a collection of HTML element and attribute style-normalizations. + +```jsx +import * as React from 'react'; +import { CssVarsProvider } from '@mui/joy/styles'; +import CssBaseline from '@mui/joy/CssBaseline'; + +export default function MyApp() { + return ( + + {/* must be used under CssVarsProvider */} + + + {/* The rest of your application */} + + ); +} +``` + +## Scoping on children + +However, you might be progressively migrating a website to MUI, using a global reset might not be an option. +It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component. + +```jsx +import * as React from 'react'; +import { CssVarsProvider } from '@mui/joy/styles'; +import ScopedCssBaseline from '@mui/joy/ScopedCssBaseline'; +import MyApp from './MyApp'; + +export default function MyApp() { + const [root, setRoot] = React.useState(null); + return ( + {/* target the node to ScopedCssBaseline's div */} + + {/* must be used under CssVarsProvider */} + setRoot(element)}> + {/* The rest of your application */} + + + + ); +} +``` + +⚠️ Make sure you import `ScopedCssBaseline` first to avoid box-sizing conflicts as in the above example. + +## Approach + +### Page + +The `` and `` elements are updated to provide better page-wide defaults. More specifically: + +- The margin in all browsers is removed. +- The default Material Design background color is applied. + It's using `theme.palette.background.body` for standard devices and a white background for print devices. +- The CSS [`color-scheme`](https://web.dev/color-scheme/) is applied by default. You can disable it by setting `disableColorScheme` to true on the `CssBaseline` or `ScopedCssBaseline`. + +### Layout + +- `box-sizing` is set globally on the `` element to `border-box`. + Every element—including `*::before` and `*::after` are declared to inherit this property, + which ensures that the declared width of the element is never exceeded due to padding or border. + +### Color scheme + +The CSS [`color-scheme`](https://web.dev/color-scheme/) is applied by default to render proper built-in components on the web. You can disable it by setting `disableColorScheme` to true on the `CssBaseline` or `ScopedCssBaseline`. + +```jsx + + + + +// or + + + {/* The rest of your application */} + + +``` + +### Typography + +- No base font-size is declared on the ``, but 16px is assumed (the browser default). + You can learn more about the implications of changing the `` default font size in [the theme documentation](/material-ui/customization/typography/#html-font-size) page. +- Set the `theme.typography.body1` style on the `` element. +- Set the font-weight to `bold` for the `` and `` elements. +- Custom font-smoothing is enabled for better display of the default font. + +## Customization + +### CssBaseline + +To custom the styles produced by the `CssBaseline` component, append the `GlobalStyles` next to it: + +```js +import { CssVarsProvider } from '@mui/joy/styles'; +import CssBaseline from '@mui/joy/CssBaseline'; +import GlobalStyles from '@mui/joy/GlobalStyles'; + +function App() { + return ( + + {/* CssBaseline must come first */} + + + ); +} +``` + +### ScopedCssBaseline + +You can customize it using the [themed components](https://mui.com/joy-ui/customization/themed-components/) approach. The component identifier is `JoyScopedCssBaseline` which contains only the `root` slot. + +```js +import { CssVarsProvider, extendTheme } from '@mui/joy/styles'; +import ScopedCssBaseline from '@mui/joy/ScopedCssBaseline'; +import MyApp from './MyApp'; + +const theme = extendTheme({ + components: { + JoyScopedCssBaseline: { + styleOverrides: { + root: ({ theme }) => ({ + // ...CSS object styles + }) + } + } + } +}) + +export default function MyApp() { + const [root, setRoot] = React.useState(null); + return ( + {/* target the node to ScopedCssBaseline's div */} + + {/* must be used under CssVarsProvider */} + setRoot(element)}> + {/* The rest of your application */} + + + + ); +} +``` diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index ef52043712e5d2..f1d2a67bf36d0a 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -76,6 +76,11 @@ const pages = [ { pathname: '/joy-ui/react-tabs' }, ], }, + { + pathname: '/joy-ui/components/utils', + subheader: 'utils', + children: [{ pathname: '/joy-ui/react-css-baseline' }], + }, ], }, { diff --git a/docs/pages/joy-ui/react-css-baseline.js b/docs/pages/joy-ui/react-css-baseline.js new file mode 100644 index 00000000000000..f96abbeef5e398 --- /dev/null +++ b/docs/pages/joy-ui/react-css-baseline.js @@ -0,0 +1,7 @@ +import * as React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import * as pageProps from 'docs/data/joy/components/css-baseline/css-baseline.md?@mui/markdown'; + +export default function Page() { + return ; +} From 8fa3c77aa8f630fd266015cec97837f4136108ac Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 10 Oct 2022 10:23:59 +0700 Subject: [PATCH 30/32] fix tests --- .../mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx | 1 + packages/mui-joy/src/styles/defaultTheme.test.js | 1 + 2 files changed, 2 insertions(+) diff --git a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx index 8d59eddf157a65..d31ca376a8086a 100644 --- a/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx +++ b/packages/mui-joy/src/ScopedCssBaseline/ScopedCssBaseline.test.tsx @@ -14,6 +14,7 @@ describe('', () => { muiName: 'JoyScopedCssBaseline', refInstanceof: window.HTMLDivElement, testComponentPropWith: 'span', + testVariantProps: { disableColorScheme: true }, skip: ['classesRoot', 'componentsProp'], })); }); diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index 8b322ccc577d99..cbc5e23cdd2fc9 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -26,6 +26,7 @@ describe('extendTheme', () => { 'variants', 'vars', 'cssVarPrefix', + 'getColorSchemeSelector', ]).to.includes(field); }); }); From f4a7d86c2cd0009591b797c2d049e8a80d3b4910 Mon Sep 17 00:00:00 2001 From: Siriwat K Date: Mon, 10 Oct 2022 12:26:10 +0700 Subject: [PATCH 31/32] Update packages/mui-joy/src/styles/defaultTheme.ts Signed-off-by: Siriwat K --- packages/mui-joy/src/styles/defaultTheme.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/mui-joy/src/styles/defaultTheme.ts b/packages/mui-joy/src/styles/defaultTheme.ts index c19d2bba82f7d1..a1ac1faca92723 100644 --- a/packages/mui-joy/src/styles/defaultTheme.ts +++ b/packages/mui-joy/src/styles/defaultTheme.ts @@ -7,7 +7,6 @@ export const getThemeWithVars = ( themeInput?: Omit & ColorSystemOptions, ) => { const { - cssVarPrefix, colorSchemes, focus, fontFamily, From de1ab16a0ae1bdb10a8b713cd53e766e176a8de1 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Mon, 10 Oct 2022 17:12:35 +0700 Subject: [PATCH 32/32] content fix --- docs/data/joy/components/css-baseline/css-baseline.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md index 5f4f01b12aff1b..21832fa444dfa6 100644 --- a/docs/data/joy/components/css-baseline/css-baseline.md +++ b/docs/data/joy/components/css-baseline/css-baseline.md @@ -72,8 +72,7 @@ The `` and `` elements are updated to provide better page-wide defau ### Layout - `box-sizing` is set globally on the `` element to `border-box`. - Every element—including `*::before` and `*::after` are declared to inherit this property, - which ensures that the declared width of the element is never exceeded due to padding or border. + Every element—including `*::before` and `*::after` are declared to inherit this property, which ensures that the declared width of the element is never exceeded due to padding or border. ### Color scheme