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), }} > - + `, 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. 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/packages/mui-joy/src/styles/extendTheme.ts b/packages/mui-joy/src/styles/extendTheme.ts index a04427a97ac188..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: themeProp.vars.palette[ownerState.color].plainColor, + color: `rgba(${themeProp.vars.palette[ownerState.color]?.mainChannel} / 1)`, }), ...(ownerState.color === 'context' && { - color: theme.variants.plain?.context?.color, + color: themeProp.vars.palette.text.secondary, }), ...(instanceFontSize && instanceFontSize !== 'inherit' && { diff --git a/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js b/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js new file mode 100644 index 00000000000000..7b9bc5669328c3 --- /dev/null +++ b/test/regressions/fixtures/AspectRatioJoy/AspectRatioRadius.js @@ -0,0 +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 ( + + + + + + ); +}