From b8992fa64ecb55511f8b043d0f411712d190a331 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Fri, 22 Dec 2023 14:43:41 +0100 Subject: [PATCH 01/10] wip --- packages/mui-material/src/Avatar/Avatar.js | 47 +++++++++++++--------- 1 file changed, 29 insertions(+), 18 deletions(-) diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js index e20b5afcce024b..2e516e85b96678 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.js @@ -32,7 +32,7 @@ const AvatarRoot = styled('div', { ownerState.colorDefault && styles.colorDefault, ]; }, -})(({ theme, ownerState }) => ({ +})(({ theme }) => ({ position: 'relative', display: 'flex', alignItems: 'center', @@ -46,23 +46,34 @@ const AvatarRoot = styled('div', { borderRadius: '50%', overflow: 'hidden', userSelect: 'none', - ...(ownerState.variant === 'rounded' && { - borderRadius: (theme.vars || theme).shape.borderRadius, - }), - ...(ownerState.variant === 'square' && { - borderRadius: 0, - }), - ...(ownerState.colorDefault && { - color: (theme.vars || theme).palette.background.default, - ...(theme.vars - ? { - backgroundColor: theme.vars.palette.Avatar.defaultBg, - } - : { - backgroundColor: - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], - }), - }), + variants: [ + { + props: { variant: 'rounded' }, + style: { + borderRadius: (theme.vars || theme).shape.borderRadius, + } + }, + { + props: { variant: 'square' }, + style: { + borderRadius: 0, + } + }, + { + props: { colorDefault: true }, + style: { + color: (theme.vars || theme).palette.background.default, + ...(theme.vars + ? { + backgroundColor: theme.vars.palette.Avatar.defaultBg, + } + : { + backgroundColor: + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], + }), + } + } + ], })); const AvatarImg = styled('img', { From ce38384911515d489f56f062c9cc9d5385240f2b Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 26 Dec 2023 12:33:20 +0100 Subject: [PATCH 02/10] prettier --- packages/mui-material/src/Avatar/Avatar.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js index 2e516e85b96678..177323de347b3e 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.js @@ -51,13 +51,13 @@ const AvatarRoot = styled('div', { props: { variant: 'rounded' }, style: { borderRadius: (theme.vars || theme).shape.borderRadius, - } + }, }, { props: { variant: 'square' }, style: { borderRadius: 0, - } + }, }, { props: { colorDefault: true }, @@ -71,8 +71,8 @@ const AvatarRoot = styled('div', { backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], }), - } - } + }, + }, ], })); From fc09edee691a31f8fb90e3aba3363323fb07ec4c Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 9 Jan 2024 12:38:21 +0100 Subject: [PATCH 03/10] Add zero-runtime example --- .../src/app/avatar/page.tsx | 13 + .../src/components/Avatar/Avatar.js | 271 ++++++++++++++++++ 2 files changed, 284 insertions(+) create mode 100644 apps/zero-runtime-next-app/src/app/avatar/page.tsx create mode 100644 apps/zero-runtime-next-app/src/components/Avatar/Avatar.js diff --git a/apps/zero-runtime-next-app/src/app/avatar/page.tsx b/apps/zero-runtime-next-app/src/app/avatar/page.tsx new file mode 100644 index 00000000000000..38ef2f54a2e651 --- /dev/null +++ b/apps/zero-runtime-next-app/src/app/avatar/page.tsx @@ -0,0 +1,13 @@ +import * as React from 'react'; +import Avatar from '@/components/Avatar/Avatar'; +import Stack from '@mui/material/Stack'; + +export default function Avatars() { + return ( + + + + + + ); +} diff --git a/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js b/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js new file mode 100644 index 00000000000000..d221b871dc0972 --- /dev/null +++ b/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js @@ -0,0 +1,271 @@ +'use client'; +import * as React from 'react'; +import PropTypes from 'prop-types'; +import clsx from 'clsx'; +import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; +import { styled } from '@mui/zero-runtime'; +import { useThemeProps } from '@mui/material/styles'; +import Person from '@mui/material/internal/svg-icons/Person'; +import { getAvatarUtilityClass } from '@mui/material/Avatar'; + +const useUtilityClasses = (ownerState) => { + const { classes, variant, colorDefault } = ownerState; + + const slots = { + root: ['root', variant, colorDefault && 'colorDefault'], + img: ['img'], + fallback: ['fallback'], + }; + + return composeClasses(slots, getAvatarUtilityClass, classes); +}; + +const AvatarRoot = styled('div', { + name: 'MuiAvatar', + slot: 'Root', + overridesResolver: (props, styles) => { + const { ownerState } = props; + + return [ + styles.root, + styles[ownerState.variant], + ownerState.colorDefault && styles.colorDefault, + ]; + }, +})(({ theme }) => ({ + position: 'relative', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + flexShrink: 0, + width: 40, + height: 40, + fontFamily: theme.typography.fontFamily, + fontSize: theme.typography.pxToRem(20), + lineHeight: 1, + borderRadius: '50%', + overflow: 'hidden', + userSelect: 'none', + variants: [ + { + props: { variant: 'rounded' }, + style: { + borderRadius: (theme.vars || theme).shape.borderRadius, + }, + }, + { + props: { variant: 'square' }, + style: { + borderRadius: 0, + }, + }, + { + props: { colorDefault: true }, + style: { + color: (theme.vars || theme).palette.background.default, + ...(theme.vars + ? { + backgroundColor: theme.vars.palette.Avatar.defaultBg, + } + : { + backgroundColor: + theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], + }), + }, + }, + ], +})); + +const AvatarImg = styled('img', { + name: 'MuiAvatar', + slot: 'Img', + overridesResolver: (props, styles) => styles.img, +})({ + width: '100%', + height: '100%', + textAlign: 'center', + // Handle non-square image. The property isn't supported by IE11. + objectFit: 'cover', + // Hide alt text. + color: 'transparent', + // Hide the image broken icon, only works on Chrome. + textIndent: 10000, +}); + +const AvatarFallback = styled(Person, { + name: 'MuiAvatar', + slot: 'Fallback', + overridesResolver: (props, styles) => styles.fallback, +})({ + width: '75%', + height: '75%', +}); + +function useLoaded({ crossOrigin, referrerPolicy, src, srcSet }) { + const [loaded, setLoaded] = React.useState(false); + + React.useEffect(() => { + if (!src && !srcSet) { + return undefined; + } + + setLoaded(false); + + let active = true; + const image = new Image(); + image.onload = () => { + if (!active) { + return; + } + setLoaded('loaded'); + }; + image.onerror = () => { + if (!active) { + return; + } + setLoaded('error'); + }; + image.crossOrigin = crossOrigin; + image.referrerPolicy = referrerPolicy; + image.src = src; + if (srcSet) { + image.srcset = srcSet; + } + + return () => { + active = false; + }; + }, [crossOrigin, referrerPolicy, src, srcSet]); + + return loaded; +} + +const Avatar = React.forwardRef(function Avatar(inProps, ref) { + const props = useThemeProps({ props: inProps, name: 'MuiAvatar' }); + const { + alt, + children: childrenProp, + className, + component = 'div', + imgProps, + sizes, + src, + srcSet, + variant = 'circular', + ...other + } = props; + + let children = null; + + // Use a hook instead of onError on the img element to support server-side rendering. + const loaded = useLoaded({ ...imgProps, src, srcSet }); + const hasImg = src || srcSet; + const hasImgNotFailing = hasImg && loaded !== 'error'; + + const ownerState = { + ...props, + colorDefault: !hasImgNotFailing, + component, + variant, + }; + + const classes = useUtilityClasses(ownerState); + + if (hasImgNotFailing) { + children = ( + + ); + } else if (childrenProp != null) { + children = childrenProp; + } else if (hasImg && alt) { + children = alt[0]; + } else { + children = ; + } + + return ( + + {children} + + ); +}); + +Avatar.propTypes /* remove-proptypes */ = { + // ┌────────────────────────────── Warning ──────────────────────────────┐ + // │ These PropTypes are generated from the TypeScript type definitions. │ + // │ To update them, edit the d.ts file and run `pnpm proptypes`. │ + // └─────────────────────────────────────────────────────────────────────┘ + /** + * Used in combination with `src` or `srcSet` to + * provide an alt attribute for the rendered `img` element. + */ + alt: PropTypes.string, + /** + * Used to render icon or text elements inside the Avatar if `src` is not set. + * This can be an element, or just a string. + */ + children: PropTypes.node, + /** + * Override or extend the styles applied to the component. + */ + classes: PropTypes.object, + /** + * @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, + /** + * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attributes) applied to the `img` element if the component is used to display an image. + * It can be used to listen for the loading error event. + */ + imgProps: PropTypes.object, + /** + * The `sizes` attribute for the `img` element. + */ + sizes: PropTypes.string, + /** + * The `src` attribute for the `img` element. + */ + src: PropTypes.string, + /** + * The `srcSet` attribute for the `img` element. + * Use this attribute for responsive image display. + */ + srcSet: PropTypes.string, + /** + * 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, + ]), + /** + * The shape of the avatar. + * @default 'circular' + */ + variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([ + PropTypes.oneOf(['circular', 'rounded', 'square']), + PropTypes.string, + ]), +}; + +export default Avatar; From 9acc01802740f4a12c9d5256777341f85d732df1 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 9 Jan 2024 12:39:58 +0100 Subject: [PATCH 04/10] remove background from pages other than home --- apps/zero-runtime-next-app/src/app/layout.tsx | 7 +------ apps/zero-runtime-next-app/src/app/page.tsx | 2 ++ 2 files changed, 3 insertions(+), 6 deletions(-) diff --git a/apps/zero-runtime-next-app/src/app/layout.tsx b/apps/zero-runtime-next-app/src/app/layout.tsx index bb634f29fa01e5..386d6dccbc2cb9 100644 --- a/apps/zero-runtime-next-app/src/app/layout.tsx +++ b/apps/zero-runtime-next-app/src/app/layout.tsx @@ -16,15 +16,10 @@ const Html = styled.html({ color: 'red', }); -const Body = styled.body({ - color: 'rgb(var(--foreground-rgb))', - background: `linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))`, -}); - export default function RootLayout({ children }: { children: React.ReactNode }) { return ( - {children} + {children} ); } diff --git a/apps/zero-runtime-next-app/src/app/page.tsx b/apps/zero-runtime-next-app/src/app/page.tsx index 59edcbe6c33e14..bba7f57f7f6074 100644 --- a/apps/zero-runtime-next-app/src/app/page.tsx +++ b/apps/zero-runtime-next-app/src/app/page.tsx @@ -3,6 +3,8 @@ import { styled } from '@mui/zero-runtime'; import styles from './page.module.css'; const Main = styled.main({ + color: 'rgb(var(--foreground-rgb))', + background: `linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb))`, display: 'flex', flexDirection: 'column', justifyContent: 'space-between', From 2e590379207ffcbd94bd4a8fa72ce445693a2b76 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 16 Jan 2024 12:19:38 +0100 Subject: [PATCH 05/10] applyDarkStyles proposal --- .../src/components/Avatar/Avatar.js | 5 +- .../mui-joy/src/styles/extendTheme.test.js | 1 + packages/mui-joy/src/styles/extendTheme.ts | 18 ++++++ packages/mui-joy/src/styles/types/theme.ts | 1 + .../mui-material/src/styles/createTheme.d.ts | 1 + .../mui-material/src/styles/createTheme.js | 15 +++++ .../src/styles/createTheme.test.js | 48 ++++++++++++++- .../styles/experimental_extendTheme.test.js | 58 +++++++++++++++++++ 8 files changed, 144 insertions(+), 3 deletions(-) diff --git a/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js b/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js index d221b871dc0972..c5fa7151c6323f 100644 --- a/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js +++ b/apps/zero-runtime-next-app/src/components/Avatar/Avatar.js @@ -5,6 +5,7 @@ import clsx from 'clsx'; import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses'; import { styled } from '@mui/zero-runtime'; import { useThemeProps } from '@mui/material/styles'; +/* eslint-disable-next-line no-restricted-imports */ import Person from '@mui/material/internal/svg-icons/Person'; import { getAvatarUtilityClass } from '@mui/material/Avatar'; @@ -68,8 +69,8 @@ const AvatarRoot = styled('div', { backgroundColor: theme.vars.palette.Avatar.defaultBg, } : { - backgroundColor: - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], + backgroundColor: theme.palette.grey[400], + ...theme.applyDarkStyles({ backgroundColor: theme.palette.grey[600] }), }), }, }, diff --git a/packages/mui-joy/src/styles/extendTheme.test.js b/packages/mui-joy/src/styles/extendTheme.test.js index 7568b02be2dbcf..8e1dd13a4cdf05 100644 --- a/packages/mui-joy/src/styles/extendTheme.test.js +++ b/packages/mui-joy/src/styles/extendTheme.test.js @@ -31,6 +31,7 @@ describe('extendTheme', () => { 'unstable_sx', 'shouldSkipGeneratingVar', 'generateCssVars', + 'applyDarkStyles', ]).to.includes(field); }); }); diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 6a4a97ccb7e46e..4c0692664567cd 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -9,6 +9,7 @@ import { unstable_createGetCssVar as systemCreateGetCssVar, unstable_styleFunctionSx as styleFunctionSx, SxConfig, + CSSObject, } from '@mui/system'; import defaultSxConfig from './sxConfig'; import colors from '../colors'; @@ -564,6 +565,23 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { cssVarPrefix, getCssVar, spacing: createSpacing(spacing), + applyDarkStyles(css: CSSObject) { + if ((this as Theme).vars) { + // If CssVarsProvider is used as a provider, + // returns ':where([data-mui-color-scheme="light|dark"]) &' + const selector = (this as Theme) + .getColorSchemeSelector('dark') + .replace(/(\[[^\]]+\])/, ':where($1)'); + return { + [selector]: css, + }; + } + if ((this as Theme).palette.mode === 'dark') { + return css; + } + + return {}; + }, } as unknown as Theme; // Need type casting due to module augmentation inside the repo /** diff --git a/packages/mui-joy/src/styles/types/theme.ts b/packages/mui-joy/src/styles/types/theme.ts index c380d259ebcc12..68fdd0c39e7f24 100644 --- a/packages/mui-joy/src/styles/types/theme.ts +++ b/packages/mui-joy/src/styles/types/theme.ts @@ -118,6 +118,7 @@ export interface Theme extends ThemeScales, RuntimeColorSystem { shouldSkipGeneratingVar: (keys: string[], value: string | number) => boolean; unstable_sxConfig: SxConfig; unstable_sx: (props: SxProps) => CSSObject; + applyDarkStyles: (css: CSSObject) => CSSObject; } export type SxProps = SystemSxProps; diff --git a/packages/mui-material/src/styles/createTheme.d.ts b/packages/mui-material/src/styles/createTheme.d.ts index ef8cb895b1fb14..922db0c76cf64b 100644 --- a/packages/mui-material/src/styles/createTheme.d.ts +++ b/packages/mui-material/src/styles/createTheme.d.ts @@ -45,6 +45,7 @@ export interface Theme extends BaseTheme { components?: Components; unstable_sx: (props: SxProps) => CSSObject; unstable_sxConfig: SxConfig; + applyDarkStyles: (css: CSSObject) => CSSObject; } /** diff --git a/packages/mui-material/src/styles/createTheme.js b/packages/mui-material/src/styles/createTheme.js index 39cba1f2731a1f..dc30e2cee9bf97 100644 --- a/packages/mui-material/src/styles/createTheme.js +++ b/packages/mui-material/src/styles/createTheme.js @@ -43,6 +43,21 @@ function createTheme(options = {}, ...args) { typography: createTypography(palette, typographyInput), transitions: createTransitions(transitionsInput), zIndex: { ...zIndex }, + applyDarkStyles(css) { + if (this.vars) { + // If CssVarsProvider is used as a provider, + // returns ':where([data-mui-color-scheme="light|dark"]) &' + const selector = this.getColorSchemeSelector('dark').replace(/(\[[^\]]+\])/, ':where($1)'); + return { + [selector]: css, + }; + } + if (this.palette.mode === 'dark') { + return css; + } + + return {}; + }, }); muiTheme = deepmerge(muiTheme, other); diff --git a/packages/mui-material/src/styles/createTheme.test.js b/packages/mui-material/src/styles/createTheme.test.js index d9737b9a3c52e1..953c0f70a02725 100644 --- a/packages/mui-material/src/styles/createTheme.test.js +++ b/packages/mui-material/src/styles/createTheme.test.js @@ -3,7 +3,7 @@ import { expect } from 'chai'; import { createRenderer } from '@mui-internal/test-utils'; import Button from '@mui/material/Button'; import Box from '@mui/material/Box'; -import { ThemeProvider, createTheme } from '@mui/material/styles'; +import { ThemeProvider, createTheme, styled } from '@mui/material/styles'; import { deepOrange, green } from '@mui/material/colors'; describe('createTheme', () => { @@ -251,6 +251,52 @@ describe('createTheme', () => { }); }); + it('should apply dark styles when using applyDarkStyles if mode="dark"', function test() { + const darkTheme = createTheme({ + palette: { + mode: 'dark', + }, + }); + + const Test = styled('div')(({ theme }) => ({ + backgroundColor: 'rgb(255, 255, 255)', + ...theme.applyDarkStyles({ + backgroundColor: 'rgb(0, 0, 0)', + }), + })); + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(0, 0, 0)', + }); + }); + + it('should apply dark styles when using applyDarkStyles if mode="light"', function test() { + const lightTheme = createTheme(); + + const Test = styled('div')(({ theme }) => ({ + backgroundColor: 'rgb(255, 255, 255)', + ...theme.applyDarkStyles({ + backgroundColor: 'rgb(0, 0, 0)', + }), + })); + + const { container } = render( + + + , + ); + + expect(container.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(255, 255, 255)', + }); + }); + it('Throw an informative error when the key `vars` is passed as part of `options` passed', () => { try { createTheme({ diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 04b73a0f7eebd0..9171a0ea93654a 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -5,6 +5,7 @@ import Button from '@mui/material/Button'; import { Experimental_CssVarsProvider as CssVarsProvider, experimental_extendTheme as extendTheme, + styled, } from '@mui/material/styles'; import { deepOrange, green } from '@mui/material/colors'; @@ -503,4 +504,61 @@ describe('experimental_extendTheme', () => { expect(theme[key]).to.deep.equal(theme.vars[key]); }); }); + + it('should apply dark styles when using applyDarkStyles if mode="dark"', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + const theme = extendTheme(); + + const Test = styled('div')(({ theme }) => { + return { + backgroundColor: 'rgb(255, 255, 255)', + ...theme.applyDarkStyles({ + backgroundColor: 'rgba(0, 0, 0, 0)', + }), + }; + }); + + const { container } = render( + +
+ +
+
, + ); + + expect(container.firstChild.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgba(0, 0, 0, 0)', + }); + }); + + it('should not apply dark styles when using applyDarkStyles if mode="light"', function test() { + if (/jsdom/.test(window.navigator.userAgent)) { + this.skip(); + } + + const theme = extendTheme(); + + const Test = styled('div')(({ theme }) => { + return { + backgroundColor: 'rgb(255, 255, 255)', + ...theme.applyDarkStyles({ + backgroundColor: 'rgba(0, 0, 0, 0)', + }), + }; + }); + + const { container } = render( + +
+ +
+
, + ); + + expect(container.firstChild.firstChild).toHaveComputedStyle({ + backgroundColor: 'rgb(255, 255, 255)', + }); + }); }); From 9953676d6a907548d009668367be1e16d87a7f33 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 16 Jan 2024 13:10:54 +0100 Subject: [PATCH 06/10] fix tests --- .../mui-joy/src/styles/defaultTheme.test.js | 1 + .../styles/experimental_extendTheme.test.js | 59 ++++--------------- 2 files changed, 14 insertions(+), 46 deletions(-) diff --git a/packages/mui-joy/src/styles/defaultTheme.test.js b/packages/mui-joy/src/styles/defaultTheme.test.js index 154e11cbd2707a..9caf86ae5ed530 100644 --- a/packages/mui-joy/src/styles/defaultTheme.test.js +++ b/packages/mui-joy/src/styles/defaultTheme.test.js @@ -31,6 +31,7 @@ describe('defaultTheme', () => { 'unstable_sx', 'shouldSkipGeneratingVar', 'generateCssVars', + 'applyDarkStyles', ]).to.includes(field); }); }); diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index 9171a0ea93654a..a4a535e47c6743 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -505,60 +505,27 @@ describe('experimental_extendTheme', () => { }); }); - it('should apply dark styles when using applyDarkStyles if mode="dark"', function test() { - if (/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } + it('should use the right selector with applyDarkStyles', function test() { const theme = extendTheme(); - - const Test = styled('div')(({ theme }) => { - return { - backgroundColor: 'rgb(255, 255, 255)', - ...theme.applyDarkStyles({ - backgroundColor: 'rgba(0, 0, 0, 0)', - }), - }; - }); - - const { container } = render( - -
- -
-
, - ); - - expect(container.firstChild.firstChild).toHaveComputedStyle({ - backgroundColor: 'rgba(0, 0, 0, 0)', - }); - }); - - it('should not apply dark styles when using applyDarkStyles if mode="light"', function test() { - if (/jsdom/.test(window.navigator.userAgent)) { - this.skip(); - } - - const theme = extendTheme(); - + const attribute = 'data-custom-color-scheme'; + let darkStyles = {}; const Test = styled('div')(({ theme }) => { - return { - backgroundColor: 'rgb(255, 255, 255)', - ...theme.applyDarkStyles({ - backgroundColor: 'rgba(0, 0, 0, 0)', - }), - }; + darkStyles = theme.applyDarkStyles({ + backgroundColor: 'rgba(0, 0, 0, 0)', + }); + return null; }); const { container } = render( - -
- -
+ + , ); - expect(container.firstChild.firstChild).toHaveComputedStyle({ - backgroundColor: 'rgb(255, 255, 255)', + expect(darkStyles).to.deep.equal({ + [`:where([${attribute}="dark"]) &`]: { + backgroundColor: 'rgba(0, 0, 0, 0)', + }, }); }); }); From aa728133806279392605920e76f2afac07cc7ec2 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 16 Jan 2024 13:11:54 +0100 Subject: [PATCH 07/10] remove applyDarkMode from next.config.js --- apps/zero-runtime-next-app/next.config.js | 6 ------ 1 file changed, 6 deletions(-) diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js index e22437e5b24ac8..7180b62159e246 100644 --- a/apps/zero-runtime-next-app/next.config.js +++ b/apps/zero-runtime-next-app/next.config.js @@ -5,12 +5,6 @@ const { experimental_extendTheme: extendTheme } = require('@mui/material/styles' const theme = extendTheme(); -theme.applyDarkStyles = function applyDarkStyles(obj) { - return { - ':where([data-mui-color-scheme="dark"]) &': obj, - }; -}; - /** * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig */ From 2458ed33c2ec06823d3ce8df46ba77bc9f288ee7 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 16 Jan 2024 13:28:03 +0100 Subject: [PATCH 08/10] fixes --- apps/zero-runtime-next-app/src/app/avatar/page.tsx | 3 +-- packages/mui-material-next/src/Switch/Switch.types.ts | 4 ++-- packages/mui-material/src/Avatar/Avatar.js | 4 ++-- .../src/styles/experimental_extendTheme.test.js | 6 +++--- 4 files changed, 8 insertions(+), 9 deletions(-) diff --git a/apps/zero-runtime-next-app/src/app/avatar/page.tsx b/apps/zero-runtime-next-app/src/app/avatar/page.tsx index 38ef2f54a2e651..d4f79567a58504 100644 --- a/apps/zero-runtime-next-app/src/app/avatar/page.tsx +++ b/apps/zero-runtime-next-app/src/app/avatar/page.tsx @@ -1,6 +1,5 @@ -import * as React from 'react'; -import Avatar from '@/components/Avatar/Avatar'; import Stack from '@mui/material/Stack'; +import Avatar from '@/components/Avatar/Avatar'; export default function Avatars() { return ( diff --git a/packages/mui-material-next/src/Switch/Switch.types.ts b/packages/mui-material-next/src/Switch/Switch.types.ts index 2d5a89dd053cc2..0790f57d75197f 100644 --- a/packages/mui-material-next/src/Switch/Switch.types.ts +++ b/packages/mui-material-next/src/Switch/Switch.types.ts @@ -1,7 +1,7 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types'; -import { Theme } from '@mui/material/styles'; +import { Theme } from '../styles'; // eslint-disable-next-line no-restricted-imports import { InternalStandardProps as StandardProps } from '@mui/material'; import type { SwitchBaseProps } from '@mui/material/internal/SwitchBase'; @@ -12,7 +12,7 @@ export interface SwitchPropsSizeOverrides {} export interface SwitchPropsColorOverrides {} export interface SwitchOwnProps - extends StandardProps { + extends StandardProps { /** * The icon to display when the component is checked. */ diff --git a/packages/mui-material/src/Avatar/Avatar.js b/packages/mui-material/src/Avatar/Avatar.js index 659e5e2c29cc32..e1635672b37cb7 100644 --- a/packages/mui-material/src/Avatar/Avatar.js +++ b/packages/mui-material/src/Avatar/Avatar.js @@ -68,8 +68,8 @@ const AvatarRoot = styled('div', { backgroundColor: theme.vars.palette.Avatar.defaultBg, } : { - backgroundColor: - theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[600], + backgroundColor: theme.palette.grey[400], + ...theme.applyDarkStyles({ backgroundColor: theme.palette.grey[600] }), }), }, }, diff --git a/packages/mui-material/src/styles/experimental_extendTheme.test.js b/packages/mui-material/src/styles/experimental_extendTheme.test.js index a4a535e47c6743..a0642c14681398 100644 --- a/packages/mui-material/src/styles/experimental_extendTheme.test.js +++ b/packages/mui-material/src/styles/experimental_extendTheme.test.js @@ -506,7 +506,7 @@ describe('experimental_extendTheme', () => { }); it('should use the right selector with applyDarkStyles', function test() { - const theme = extendTheme(); + const defaultTheme = extendTheme(); const attribute = 'data-custom-color-scheme'; let darkStyles = {}; const Test = styled('div')(({ theme }) => { @@ -516,8 +516,8 @@ describe('experimental_extendTheme', () => { return null; }); - const { container } = render( - + render( + , ); From cda5ce408d830e70b687a350090ac5dd65cbcba9 Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 16 Jan 2024 15:57:57 +0100 Subject: [PATCH 09/10] Trigger CI From 906693dae6c3d463ee363b8090759eba40fe5efe Mon Sep 17 00:00:00 2001 From: mnajdova Date: Tue, 16 Jan 2024 16:13:43 +0100 Subject: [PATCH 10/10] lint issue --- packages/mui-material-next/src/Switch/Switch.types.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/mui-material-next/src/Switch/Switch.types.ts b/packages/mui-material-next/src/Switch/Switch.types.ts index 0790f57d75197f..4eff5796daf7c3 100644 --- a/packages/mui-material-next/src/Switch/Switch.types.ts +++ b/packages/mui-material-next/src/Switch/Switch.types.ts @@ -1,10 +1,10 @@ import * as React from 'react'; import { SxProps } from '@mui/system'; import { OverridableStringUnion, OverrideProps, PartiallyRequired } from '@mui/types'; -import { Theme } from '../styles'; // eslint-disable-next-line no-restricted-imports import { InternalStandardProps as StandardProps } from '@mui/material'; import type { SwitchBaseProps } from '@mui/material/internal/SwitchBase'; +import { Theme } from '../styles'; import { SwitchClasses } from './switchClasses'; export interface SwitchPropsSizeOverrides {}