mui · siriwatknp · Dec 22, 2022 · Dec 21, 2022 · Dec 21, 2022 · Dec 21, 2022
diff --git 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),
           }}
         >
-          <AspectRatio
-            ratio="1"
-            sx={{ minWidth: 60, borderRadius: 'sm', overflow: 'auto' }}
-          >
+          <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
               src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}

diff --git a/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx b/docs/data/joy/components/aspect-ratio/CarouselRatio.tsx
@@ -48,10 +48,7 @@ export default function CarouselRatio() {
             '--Card-padding': (theme) => theme.spacing(2),
           }}
         >
-          <AspectRatio
-            ratio="1"
-            sx={{ minWidth: 60, borderRadius: 'sm', overflow: 'auto' }}
-          >
+          <AspectRatio ratio="1" sx={{ minWidth: 60 }}>
             <img
               src={`${item.src}?h=120&fit=crop&auto=format`}
               srcSet={`${item.src}?h=120&fit=crop&auto=format&dpr=2 2x`}

diff --git 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 `<html>`, but 16px is assumed (the browser default).
   You can learn more about the implications of changing the `<html>` default font size in [the theme documentation](/material-ui/customization/typography/#html-font-size) page.
-- Set the `theme.typography.body1` style on the `<body>` element.
+- Set the default `Typography`'s level (`body1`) style on the `<body>` element. The style comes from `theme.typography.{default typography level prop}`.
 - Set the font-weight to `bold` for the `<b>` and `<strong>` 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
@@ -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
@@ -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
@@ -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 (
+    <CssVarsProvider>
+      <Box sx={{ p: 2, bgcolor: 'red' }}>
+        <AspectRatio sx={{ borderRadius: 'xl', minWidth: 200 }} />
+      </Box>
+    </CssVarsProvider>
+  );
+}