From 7e741854cf16cc68bc9a41a3c0470eb33c052534 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 09:26:06 +0700 Subject: [PATCH 1/6] fix aspect ratio radius --- packages/mui-joy/src/AspectRatio/AspectRatio.tsx | 3 ++- .../fixtures/AspectRatioJoy/AspectRatioRadius.js | 11 +++++++++++ 2 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js diff --git a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx index edaf4b39f82787..3173f05f4e7300 100644 --- a/packages/mui-joy/src/AspectRatio/AspectRatio.tsx +++ b/packages/mui-joy/src/AspectRatio/AspectRatio.tsx @@ -41,6 +41,7 @@ const AspectRatioRoot = styled('div', { maxHeight || '9999px' })` : `calc(100% / (${ownerState.ratio}))`, + borderRadius: 'var(--AspectRatio-radius)', flexDirection: 'column', margin: 'var(--AspectRatio-margin)', }; @@ -54,7 +55,7 @@ const AspectRatioContent = styled('div', { { flex: 1, position: 'relative', - borderRadius: 'var(--AspectRatio-radius)', + borderRadius: 'inherit', height: 0, paddingBottom: 'var(--AspectRatio-paddingBottom)', overflow: 'hidden', diff --git a/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js b/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js new file mode 100644 index 00000000000000..1b589335ed08da --- /dev/null +++ b/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import { CssVarsProvider } from '@mui/joy/styles'; +import AspectRatio from '@mui/joy/AspectRatio'; + +export default function VariantColorJoy() { + return ( + + + + ); +} From 5511b05c6289a5b16640f058c0a4a3140d89b62c Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 09:39:22 +0700 Subject: [PATCH 2/6] update icon theme color --- packages/mui-joy/src/styles/extendTheme.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index a04427a97ac188..7a3d704c177679 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -552,10 +552,10 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { ownerState.color !== 'inherit' && ownerState.color !== 'context' && themeProp.vars.palette[ownerState.color!] && { - color: themeProp.vars.palette[ownerState.color].plainColor, + color: `rgba(${theme.vars.palette[ownerState.color]?.mainChannel} / 1)`, }), ...(ownerState.color === 'context' && { - color: theme.variants.plain?.context?.color, + color: theme.vars.palette.text.secondary, }), ...(instanceFontSize && instanceFontSize !== 'inherit' && { From eeeea3f73b9f300cf89af79961511cb52805d521 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Wed, 21 Dec 2022 09:56:59 +0700 Subject: [PATCH 3/6] update CssBaseline doc --- docs/data/joy/components/css-baseline/css-baseline.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md index 21832fa444dfa6..17dc20beae9dfe 100644 --- a/docs/data/joy/components/css-baseline/css-baseline.md +++ b/docs/data/joy/components/css-baseline/css-baseline.md @@ -95,7 +95,7 @@ The CSS [`color-scheme`](https://web.dev/color-scheme/) is applied by default to - 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 default `Typography`'s level (`body1`) style on the `` element. The style comes from `theme.typography.{default typography level prop}`. - Set the font-weight to `bold` for the `` and `` elements. - Custom font-smoothing is enabled for better display of the default font. From 842fec69409db13100dfc12d1dddb5f528b4d2ba Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Dec 2022 10:17:12 +0700 Subject: [PATCH 4/6] fix themeProp --- packages/mui-joy/src/styles/extendTheme.ts | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index 7a3d704c177679..a5eb94c9971cee 100644 --- a/packages/mui-joy/src/styles/extendTheme.ts +++ b/packages/mui-joy/src/styles/extendTheme.ts @@ -546,16 +546,18 @@ export default function extendTheme(themeOptions?: CssVarsThemeOptions): Theme { margin: 'var(--Icon-margin)', ...(ownerState.fontSize && ownerState.fontSize !== 'inherit' && { - fontSize: `var(--Icon-fontSize, ${themeProp.fontSize[ownerState.fontSize]})`, + fontSize: `var(--Icon-fontSize, ${ + themeProp.vars.fontSize[ownerState.fontSize] + })`, }), ...(ownerState.color && ownerState.color !== 'inherit' && ownerState.color !== 'context' && themeProp.vars.palette[ownerState.color!] && { - color: `rgba(${theme.vars.palette[ownerState.color]?.mainChannel} / 1)`, + color: `rgba(${themeProp.vars.palette[ownerState.color]?.mainChannel} / 1)`, }), ...(ownerState.color === 'context' && { - color: theme.vars.palette.text.secondary, + color: themeProp.vars.palette.text.secondary, }), ...(instanceFontSize && instanceFontSize !== 'inherit' && { From 8d92ae8d20ffb2836045e0af80988aa0d7f104b0 Mon Sep 17 00:00:00 2001 From: siriwatknp Date: Thu, 22 Dec 2022 11:21:57 +0700 Subject: [PATCH 5/6] update demo --- docs/data/joy/components/aspect-ratio/CarouselRatio.js | 5 +---- docs/data/joy/components/aspect-ratio/CarouselRatio.tsx | 5 +---- 2 files changed, 2 insertions(+), 8 deletions(-) diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.js b/docs/data/joy/components/aspect-ratio/CarouselRatio.js index efd08aff3c1d71..7f20d59d6eae4b 100644 --- a/docs/data/joy/components/aspect-ratio/CarouselRatio.js +++ b/docs/data/joy/components/aspect-ratio/CarouselRatio.js @@ -48,10 +48,7 @@ export default function CarouselRatio() { '--Card-padding': (theme) => theme.spacing(2), }} > - + theme.spacing(2), }} > - + Date: Thu, 22 Dec 2022 11:22:53 +0700 Subject: [PATCH 6/6] update regression --- .../regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js b/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js index 1b589335ed08da..7b9bc5669328c3 100644 --- a/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js +++ b/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js @@ -1,11 +1,14 @@ import * as React from 'react'; import { CssVarsProvider } from '@mui/joy/styles'; import AspectRatio from '@mui/joy/AspectRatio'; +import Box from '@mui/joy/Box'; export default function VariantColorJoy() { return ( - + + + ); }