[material-ui][docs] Standardize all references to Material Design 3 (…

…M3) (#40903)

docs/data/joy/customization/theme-typography/theme-typography.md

@@ -163,7 +163,7 @@ Feel free to [submit a PR](https://github.com/mui/material-ui/compare) to add yo
 
 <iframe src="https://codesandbox.io/embed/joy-ui-material-3-typography-system-lx044f?module=%2Fdemo.tsx&fontsize=14&hidenavigation=1&theme=dark&view=preview"
      style="width:100%; height:500px; border:0; border-radius: 12px; overflow:hidden;"
-     title="Joy UI - Joy UI - Material 3 Typography System"
+     title="Joy UI - Joy UI - M3 Typography System"
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
    ></iframe>

docs/data/material/components/badges/badges.md

@@ -74,15 +74,15 @@ You should provide a full description, for instance, with `aria-label`:
 
 ## Experimental APIs
 
-### Material 3 Badge
+### Material Design 3
 
 The default Material UI Badge component follows the Material Design 2 specs.
-To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import Badge from '@mui/material-next/Badge';
 ```
 
 {{"demo": "BadgeMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).

docs/data/material/components/button-group/button-group.md

@@ -56,15 +56,15 @@ You can use the [`<LoadingButton />`](/material-ui/react-button/#loading-button)
 
 {{"demo": "LoadingButtonGroup.js"}}
 
-### Material 3 version
+### Material Design 3
 
-The default Material UI ButtonGroup component follows the Material Design 2 specs.
-To get the [Material 3](https://m3.material.io/) version, use the new experimental `@mui/material-next` package.
+The default Material UI Button Group component follows the Material Design 2 specs.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import ButtonGroup from '@mui/material-next/ButtonGroup';
 ```
 
 {{"demo": "ButtonGroupMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-For more instructions on how to use it, visit the [detailed guide](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).

docs/data/material/components/buttons/buttons.md

@@ -199,15 +199,15 @@ To prevent this, ensure that the contents of the Loading Button are nested insid
 
 :::
 
-### Material 3 Button
+### Material Design 3
 
 The default Material UI Button component follows the Material Design 2 specs.
-To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import Button from '@mui/material-next/Button';
 ```
 
 {{"demo": "ButtonMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).

docs/data/material/components/chips/ChipMaterialYouPlayground.js

@@ -45,12 +45,12 @@ export default function ChipMaterialYouPlayground() {
           <Chip
             {...props}
             label="Clickable chip"
-            onClick={() => alert('Clicked Material 3 Chip')}
+            onClick={() => alert('Clicked M3 Chip')}
           />
           <Chip
             {...props}
             label="Deletable chip"
-            onDelete={() => alert('Deleted Material 3 Chip')}
+            onDelete={() => alert('Deleted M3 Chip')}
           />
         </Box>
       )}

docs/data/material/components/chips/chips.md

@@ -99,18 +99,18 @@ gain depth while clicked or touched.
 
 ## Experimental API
 
-### Material 3 Chip
+### Material Design 3
 
 The default Material UI Chip component follows the Material Design 2 specs.
-To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import Chip from '@mui/material-next/Chip';
 ```
 
 {{"demo": "ChipMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).
 
 ## Accessibility
 

docs/data/material/components/dividers/dividers.md

@@ -93,15 +93,15 @@ The Divider component is composed of a root `<hr>`.
 
 ## Experimental APIs
 
-### Material 3 Divider
+### Material Design 3
 
 The default Material UI Divider component follows the Material Design 2 specs.
-To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import Divider from '@mui/material-next/Divider';
 ```
 
 {{"demo": "DividerMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).

docs/data/material/components/progress/progress.md

@@ -153,10 +153,10 @@ You can solve the latter with:
 
 ## Experimental APIs
 
-### Material 3 Progress
+### Material Design 3
 
 The default Material UI Progress components follow the Material Design 2 specs.
-To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import CircularProgress from '@mui/material-next/CircularProgress';
@@ -165,4 +165,4 @@ import LinearProgress from '@mui/material-next/LinearProgress';
 
 {{"demo": "ProgressMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).

docs/data/material/components/slider/slider.md

@@ -168,15 +168,15 @@ You can solve the issue with:
 
 ## Experimental APIs
 
-### Material 3 Slider
+### Material Design 3
 
 The default Material UI Slider component follows the Material Design 2 specs.
-To use the [Material 3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
+To use the [M3](https://m3.material.io/) version, install the experimental `@mui/material-next` package.
 
 ```js
 import Slider from '@mui/material-next/Slider';
 ```
 
 {{"demo": "SliderMaterialYouPlayground.js", "hideToolbar": true, "bg": "playground"}}
 
-To learn more about Material UI's MD3 implementation, visit the [Material 3 Components documentation](/material-ui/guides/material-3-components/).
+To learn more about Material UI's M3 implementation, visit the [M3 Components documentation](/material-ui/guides/material-3-components/).

docs/data/material/guides/material-3-components/material-3-components.md

@@ -1,27 +1,27 @@
-# Material 3 Components
+# Material Design 3 Components
 
-<p class="description">Try out Material UI's implementation of MD3 and learn how to contribute to the project.</p>
+<p class="description">Try out Material UI's implementation of M3 and learn how to contribute to the project.</p>
 
-## Material 3
+## Material UI and M3
 
-Material 3 (MD3), also referred to as [Material You](https://m3.material.io), is the latest version of Google's design system.
-The primary Material UI package (`@mui/material`) currently implements Material 2.
-MD3 implementation is a work in progress, targeted for completion in late 2024.
-You can try out Material UI's MD3 components as they're developed using the `@mui/material-next` package.
+Material Design 3 (M3), also referred to as [Material You](https://m3.material.io), is the latest version of Google's design system.
+The primary Material UI package (`@mui/material`) currently implements Material Design 2.
+M3 implementation is a work in progress, targeted for completion in late 2024.
+You can try out Material UI's M3 components as they're developed using the `@mui/material-next` package.
 
 :::warning
-The Material 3 components are currently in alpha and subject to change.
+The M3 components are currently in alpha and subject to change.
 :::
 
 ## Supported components
 
-Visit the [All Components page](/material-ui/all-components/) to see which components support MD3—look for the green MD3 indicator.
-All components that have MD3 versions have a corresponding playground on their page.
-For example, here's the [MD3 Button playground](/material-ui/react-button/#material-3-button).
+Visit the [All Components page](/material-ui/all-components/) to see which components support M3—look for the green M3 indicator.
+All components that have M3 versions have a corresponding playground on their page.
+For example, here's the [M3 Button playground](/material-ui/react-button/#material-design-3).
 
-## Getting started with MD3 components
+## Getting started with M3 components
 
-The MD3 components are included in the `@mui/material-next` package.
+The M3 components are included in the `@mui/material-next` package.
 The following guide explains how to get started using them.
 
 ### Installation
@@ -109,7 +109,7 @@ After [installation](/material-ui/guides/material-3-components/#installation), y
 {{"demo": "MD3ButtonUsage.js"}}
 
 :::warning
-If your application uses the `ThemeProvider` from `@mui/material`, you must include `CssVarsProvider` from `@mui/material-next` in the tree above the MD3 components.
+If your application uses the `ThemeProvider` from `@mui/material`, you must include `CssVarsProvider` from `@mui/material-next` in the tree above the M3 components.
 The following example shows how to do this.
 :::
 
@@ -118,16 +118,16 @@ The following example shows how to do this.
 ### Theming
 
 Use the `extendTheme` function to modify the default theme.
-The theme structure follows [MD3 specifications](https://m3.material.io/styles/color/system/overview).
+The theme structure follows [M3 specifications](https://m3.material.io/styles/color/system/overview).
 For example, if you wanted to modify the primary color, you would provide the [color tones](https://m3.material.io/styles/color/system/how-the-system-works#e1e92a3b-8702-46b6-8132-58321aa600bd) via `ref.palette.primary`:
 
 {{"demo": "MD3Theming.js"}}
 
 :::success
-You can use Material Design's [Figma MD3 Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) plugin to generate palette tones.
+You can use Material Design's [Figma Material Theme Builder](https://www.figma.com/community/plugin/1034969338659738588/material-theme-builder) plugin to generate palette tones.
 :::
 
 ## Stable release
 
-The stable release of the MD3 components is tentatively targeted for Q4 2024 in Material UI v7.
-To follow the progress or contribute to the project, check out [the Material 3 GitHub issue](https://github.com/mui/material-ui/issues/29345).
+The stable release of the M3 components is tentatively targeted for Q4 2024 in Material UI v7.
+To follow the progress or contribute to the project, check out [the M3 GitHub issue](https://github.com/mui/material-ui/issues/29345).

docs/data/material/pages.ts

@@ -197,7 +197,7 @@ const pages: MuiPage[] = [
     children: [
       {
         pathname: '/material-ui/guides/material-3-components',
-        title: 'Material 3 components',
+        title: 'Material Design 3 components',
         newFeature: true,
       },
       { pathname: '/material-ui/guides/minimizing-bundle-size' },

docs/pages/blog/2023-material-ui-v6-and-beyond.md

@@ -35,13 +35,13 @@ As a taste of the performance upgrade, here are some early Lighthouse metrics wi
 
 ### Material UI v7
 
-Material UI v7 is where you can expect to see native support for [Material 3](https://m3.material.io/), Google's latest Material Design update, as well as many other design improvements across the component suite.
+Material UI v7 is where you can expect to see native support for [Material Design 3](https://m3.material.io/), Google's latest Material Design update, as well as many other design improvements across the component suite.
 It's tentatively planned for Q4 of 2024.
 
 <img alt="Side-to-side comparison of a Card component using Material Design 2 and 3, respectively." src="/static/blog/2023-material-ui-v6-and-beyond/m2-m3.jpg" width="1200" height="600" loading="lazy" />
 
 The development for this version is already in progress, though!
-See which components already support the Material 3 specs, through the experimental `@mui/material-next` package, by visiting the newly released [All Components page](/material-ui/all-components/).
+See which components already support the M3 specs, through the experimental `@mui/material-next` package, by visiting the newly released [All Components page](/material-ui/all-components/).
 
 ```diff
 -import Button from '@mui/material/Button';

docs/pages/blog/mui-product-comparison.md

@@ -49,7 +49,7 @@ Get started in the [Material UI docs](/material-ui/getting-started/).
 
 #### Key features
 
-- **Material Design:** Your app will look and feel excellent by default, thanks to our meticulous implementation of Material Design (currently MD2; Material You is on the way).
+- **Material Design:** Your app will look and feel excellent by default, thanks to our meticulous implementation of Material Design (currently M2; M3 is on the way).
 - **Comprehensiveness:** With over 50 foundational components and counting, you've got everything you need to ship new features fast.
 - **Maturity:** Material UI's age and maturity rival that of React itself, with its origins spanning all the way back to 2014.
 - **Community:** Over 2,500 open-source contributors have made this library what it is today.

docs/pages/experiments/md3/buttons.tsx

@@ -199,7 +199,7 @@ function DemoComponents() {
   );
 }
 
-// custom MD3 theme
+// custom M3 theme
 const cssVarsTheme = extendTheme({
   ref: {
     palette: customPalette,

docs/src/components/productMaterial/MaterialEnd.tsx

@@ -68,10 +68,11 @@ export default function MaterialEnd() {
               <GlowingIconContainer icon={<StyleRoundedIcon color="primary" />} />
               <div>
                 <Typography color="text.primary" fontWeight="semiBold" gutterBottom>
-                  Does it support Material 3?
+                  Does it support Material Design 3?
                 </Typography>
                 <Typography>
-                  The adoption of Material 3 is tentatively planned for Material UI v6. See the{' '}
+                  The adoption of Material Design 3 is tentatively planned for Material UI v7. See
+                  the{' '}
                   <Link href="https://mui.com/versions/#release-schedule">
                     the release schedule
                   </Link>{' '}

docs/translations/translations.json

@@ -445,7 +445,7 @@
     "/material-ui/customization/z-index": "z-index",
     "/material-ui/customization/transitions": "Transitions",
     "/material-ui/guides": "How-to guides",
-    "/material-ui/guides/material-3-components": "Material 3 components",
+    "/material-ui/guides/material-3-components": "Material Design 3 components",
     "/material-ui/guides/minimizing-bundle-size": "Minimizing bundle size",
     "/material-ui/guides/server-rendering": "Server rendering",
     "/material-ui/guides/responsive-ui": "Responsive UI",

packages/mui-material-next/CONTRIBUTING.md

@@ -1,6 +1,6 @@
 # Contributing
 
-The Material 3 components are targeted for v7, so they will be developed on the `material-next` package.
+The Material Design 3 components are targeted for v7, so they will be developed on the `material-next` package.
 
 The progress for each component will be tracked in a separate GitHub issue. If you wish to contribute to the migration go to a component's linked issue to see what tasks are missing (see progress tracker [here](https://github.com/mui/material-ui/issues/29345)).
 
@@ -18,7 +18,7 @@ If the issue doesn't exist, create it, name it `[<ComponentName>][material-next]
 4. Drop support for `ThemeProvider` in favor of `CssVarsProvider`. In practice, this means:
    - Consuming tokens from `theme.vars` instead of `theme`
    - In tests, using `CssVarsProvider` and `extendTheme` (both imported from `@mui/material-next/styles`) instead of `ThemeProvider` and `createTheme`, as well as providing the same `CssVarsProvier` and `extendTheme` to `describeConformance`'s `ThemeProvider` and `createTheme` options.
-5. Implement Material 3 design specs. Add missing tokens if necessary. Use [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) as a reference for token values
+5. Implement M3 design specs. Add missing tokens if necessary. Use [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) as a reference for token values
 6. Add component playground to the docs, take the [Slider playground](https://mui.com/material-ui/react-slider/#material-3-slider) as an example
 7. Refactor styles to use component CSS Variables, following [material-web tokens](https://github.com/material-components/material-web/tree/main/tokens) and Joy UI's equivalent component (if it exists) as guides.
 
@@ -27,7 +27,7 @@ If the issue doesn't exist, create it, name it `[<ComponentName>][material-next]
 - Except for the first step, there's no particular order to follow, but the proposed order has provided the best experience so far
 - For every step, checking the components that are already in `material-next` will be really helpful
 - Try to avoid breaking changes, keeping the component's API the same:
-  - An exception to this is to use Material 3 nomenclature and naming conventions, even if it would be a breaking change.
+  - An exception to this is to use M3 nomenclature and naming conventions, even if it would be a breaking change.
   - If breaking changes are inevitable, then document them right away in `/packages/mui-material-next/migration.md` and add the `breaking change` label to your PR.
 - Divide the work in whatever way makes more sense. One PR for a few steps or one PR for each step, however keep in mind that smaller pull requests will be reviewed and merged faster
 - Let everyone know what you're working on so we can keep the work coordinated and avoid overlap

packages/mui-material-next/README.md

@@ -1,18 +1,10 @@
 # @mui/material-next
 
-[Material 3](https://m3.material.io/) components built using [@mui/base](https://mui.com/base-ui/getting-started/overview/).
+[Material Design 3](https://m3.material.io/) components built using [`@mui/base`](https://mui.com/base-ui/getting-started/overview/) with TypeScript.
 
-This package is a nursery for components that will ultimately replace the @mui/material ones.
+This package is a nursery for components that will ultimately replace those found in `@mui/material`.
 
-## Material UI v6 changes
-
-Material UI v6's notable changes compared to v5 are:
-
-- Built using [@mui/base](https://mui.com/base-ui/getting-started/overview/)
-- Built with TypeScript.
-- Implement [Material 3](https://m3.material.io/) (Material Design 3).
-
-For migration steps when upgrading from v5, follow the [migration guide](/packages/mui-material-next/migration.md).
+Follow the [migration guide](/packages/mui-material-next/migration.md) to migrate from `@mui/material` to `@mui/material-next`.
 
 ## Contributing