[docs] Create, revise, and expand System "Getting started" docs

CHANGELOG.md

@@ -6812,7 +6812,7 @@ A big thanks to the 34 contributors who made this release possible. Here are som
 
   While the source code is currently hosted in the [main repository](https://github.com/mui/material-ui), we might move it to the [x repository](https://github.com/mui/mui-x) in the future, depending on what is easier for the commercial date range picker. The date picker will stay open source no matter what.
 
-- 📚 Revamp the documentation for [the system](https://mui.com/system/basics/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page.
+- 📚 Revamp the documentation for [the system](https://mui.com/system/getting-started/overview/). The System contains CSS utilities. The documentation now promotes the use of the `sx` prop. It's ideal for adding one-off styles, e.g. padding, but when pushed to its limits, it can be used to implement quickly a complete page.
 - 👩‍🎨 Upgrade emotion to v11 (#23007) @mnajdova.
 - And many more 🐛 bug fixes and 📚 improvements.
 
@@ -7214,7 +7214,7 @@ Here are some highlights ✨:
   If you target IE11, you need to use the new bundle (`legacy`). We are treating IE11 as a second class-citizen, which is a continuation of the direction taken in #22873.
 
 - 🚀 Improve the internal benchmark suite (#22923, #23058) @mnajdova.
-  This was a prerequisite step to improve the [system](https://mui.com/system/basics/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4.
+  This was a prerequisite step to improve the [system](https://mui.com/system/getting-started/overview/). We needed to be able to measure performance. After #22945, we have measured that the `Box` component is x3 faster in v5-alpha compared to v4.
 - ✏️ A new blog post: [Q3 2020 Update](https://mui.com/blog/2020-q3-update/) (#23055) @oliviertassinari.
 - 🐙 Migrate more tests to react-testing-library @deiga, @Morteza-Jenabzadeh, @nicholas-l.
 - And many more 🐛 bug fixes and 📚 improvements.
@@ -7555,7 +7555,7 @@ Here are some highlights ✨:
 
   The new styling solution saves 2kB gzipped in the bundle compared to JSS, and about 14 kB gzipped if you were already using emotion or styled-components.
 
-  Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/basics/)).
+  Last but not least, the change allows us to take advantage dynamic style props. We will use them for dynamic color props, variant props, and new style props (an improved [system](https://mui.com/system/getting-started/overview/)).
 
   This change has been in our roadmap for more than a year.
   We announced it in the [v4 release blog post](https://mui.com/blog/material-ui-v4-is-out/) as a direction v5 would take.
@@ -8808,7 +8808,7 @@ A big thanks to the 33 contributors who made this release possible. Here are som
   />
   ```
 
-- [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/basics/) (#21413) @mnajdova.
+- [Typography] Replace the `srOnly` prop so as to not duplicate the capabilities of [System](https://mui.com/system/getting-started/overview/) (#21413) @mnajdova.
 
   ```diff
   -import Typography from '@material-ui/core/Typography';

README.md

@@ -13,7 +13,7 @@
 
 - [_MUI Base_](https://mui.com/base/getting-started/overview/) is our library of "unstyled" components and low-level hooks. With Base, you gain complete control over your app's CSS and accessibility features.
 
-- [_MUI System_](https://mui.com/system/basics/) is a collection of CSS utilities to help you rapidly lay out custom designs.
+- [_MUI System_](https://mui.com/system/getting-started/overview/) is a collection of CSS utilities to help you rapidly lay out custom designs.
 
 <div align="center">
 
@@ -180,7 +180,7 @@ Our documentation features [a collection of example projects using Material UI](
 - [Material UI](https://mui.com/material-ui/getting-started/overview/)
 - [Joy UI](https://mui.com/joy-ui/getting-started/overview/)
 - [MUI Base](https://mui.com/base/getting-started/overview/)
-- [MUI System](https://mui.com/system/basics/)
+- [MUI System](https://mui.com/system/getting-started/overview/)
 
 ## Premium themes
 

docs/data/joy/customization/approaches/approaches.md

@@ -11,7 +11,7 @@
 The `sx` prop provides a superset of CSS (contains all CSS properties/selectors, in addition to custom ones) that maps values directly from the theme, depending on the CSS property used.
 
 Every Joy UI component supports it and it's a tool that allows you to quickly customize components on the spot.
-Visit [the `sx` prop documentation](/system/the-sx-prop/) to learn more about it.
+Visit [the `sx` prop documentation](/system/getting-started/the-sx-prop/) to learn more about it.
 
 {{"demo": "SxProp.js" }}
 

docs/data/joy/getting-started/tutorial/tutorial.md

@@ -69,7 +69,7 @@ It's great for creating one-off customizations or rapidly experimenting with dif
 
 Don't worry if you're confused about the `sx` prop's syntax at this moment.
 You'll get the hang of it as you use it more.
-Check the [MUI System's documentation](/system/the-sx-prop/) to learn more about its foundation.
+Check the [MUI System's documentation](/system/getting-started/the-sx-prop/) to learn more about its foundation.
 
 ### 3. Using `Typography` to create a welcome text
 

docs/data/joy/guides/using-joy-ui-and-material-ui/using-joy-ui-and-material-ui.md

@@ -15,7 +15,7 @@ There are two main use cases for using them together:
 
 Additionally, keep these in mind when using them together:
 
-- Both of them use [MUI System](/system/basics/) as their syle engine, which uses React context for theming.
+- Both of them use [MUI System](/system/getting-started/overview/) as their syle engine, which uses React context for theming.
 - Joy UI requires wrapping your application with the `CssVarsProvider` component but you're able to import it from either @mui/joy or @mui/material.
 
 ## Case A: Joy UI in a Material UI project

docs/data/material/components/box/box.md

@@ -19,7 +19,7 @@ The Box component packages [all the style functions](/system/properties/) that a
 
 ## The `sx` prop
 
-All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop).
+All system properties are available via the [`sx` prop](/system/getting-started/the-sx-prop/).
 In addition, the `sx` prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it:
 
 {{"demo": "BoxSx.js", "defaultCodeOpen": true }}
@@ -38,7 +38,7 @@ For instance, you can change the margin this way.
 However, sometimes you have to target the underlying DOM element.
 As an example, you may want to change the border of the Button.
 The Button component defines its own styles. CSS inheritance doesn't help.
-To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a MUI component.
+To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component.
 
 ```diff
 -<Box sx={{ border: '1px dashed grey' }}>

docs/data/material/components/use-media-query/use-media-query.md

@@ -128,7 +128,7 @@ For instance, you could use:
 
 - [`<Box display>`](/system/display/#hiding-elements)
 - [`themes.breakpoints.up(x)`](/material-ui/customization/breakpoints/#css-media-queries)
-- or [`sx prop`](/system/basics/#heading-the-sx-prop)
+- or [`sx prop`](/system/getting-started/the-sx-prop/)
 
 If none of the above alternatives are an option, you can proceed reading this section of the documentation.
 

docs/data/material/customization/how-to-customize/how-to-customize.md

@@ -20,7 +20,7 @@ To change the styles of _one single instance_ of a component, you can use one of
 
 ### The `sx` prop
 
-The [`sx` prop](/system/basics/#the-sx-prop) is the best option for adding style overrides to a single instance of a component in most cases.
+The [`sx` prop](/system/getting-started/the-sx-prop/) is the best option for adding style overrides to a single instance of a component in most cases.
 It can be used with all Material UI components.
 
 {{"demo": "SxProp.js" }}

docs/data/material/customization/theme-components/GlobalThemeOverrideSx.js

@@ -12,7 +12,7 @@ const finalTheme = createTheme({
     MuiChip: {
       styleOverrides: {
         root: sx({
-          // https://mui.com/system/the-sx-prop/#spacing
+          // https://mui.com/system/getting-started/the-sx-prop/#spacing
           px: 1,
           py: 0.25,
           // https://mui.com/system/borders/#border-radius

docs/data/material/customization/theme-components/GlobalThemeOverrideSx.tsx

@@ -12,7 +12,7 @@ const finalTheme = createTheme({
     MuiChip: {
       styleOverrides: {
         root: sx({
-          // https://mui.com/system/the-sx-prop/#spacing
+          // https://mui.com/system/getting-started/the-sx-prop/#spacing
           px: 1,
           py: 0.25,
           // https://mui.com/system/borders/#border-radius

docs/data/material/customization/theme-components/theme-components.md

@@ -100,7 +100,7 @@ const finalTheme = createTheme({
 
 The `sx` prop acts as a shortcut for defining custom styles that access the theme object.
 This prop lets you write inline styles using a superset of CSS.
-Learn more about [the concept behind the `sx` prop](/system/the-sx-prop/) and [how `sx` differs from the `styled` utility](/system/styled/#difference-with-the-sx-prop).
+Learn more about [the concept behind the `sx` prop](/system/getting-started/the-sx-prop/) and [how `sx` differs from the `styled` utility](/system/styled/#difference-with-the-sx-prop).
 
 You can use the `sx` prop inside the `styleOverrides` key to modify styles within the theme using shorthand CSS notation.
 This is especially handy if you're already using the `sx` prop with your components, because you can use the same syntax in your theme and quickly transfer styles between the two.

docs/data/material/customization/theming/theming.md

@@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default
 
 ### Custom variables
 
-When using MUI's theme with [MUI System](/system/basics/) or [any other styling solution](/material-ui/guides/interoperability/#themeprovider), it can be convenient to add additional variables to the theme so you can use them everywhere.
+When using MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/interoperability/#themeprovider), it can be convenient to add additional variables to the theme so you can use them everywhere.
 For instance:
 
 ```jsx

docs/data/material/migration/migration-v4/migrating-from-jss.md

@@ -107,7 +107,7 @@ You should run this codemod on a small chunk of files and then check the changes
 #### Manual
 
 We recommend `sx` API over `styled` for creating responsive styles or overriding minor CSS.
-[Read more about `sx` here](/system/the-sx-prop/).
+[Read more about `sx` here](/system/getting-started/the-sx-prop/).
 
 ```diff
  import Chip from '@mui/material/Chip';

docs/data/material/migration/migration-v4/v5-component-changes.md

@@ -251,7 +251,7 @@ Use a string to provide an explicit px value.
 
 The Box system props have an optional alternative API in v5, using the `sx` prop.
 
-Check out the System docs to learn more about [the tradeoffs of this API](/system/basics/#api-tradeoff).
+Check out the System docs to learn more about [the tradeoffs of this API](/system/getting-started/overview/#api-tradeoff).
 
 ```jsx
 <Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
@@ -785,7 +785,7 @@ Use CSS `object-fit`. For IE11 support either use a polyfill such as
 
 ### Replace deprecated component
 
-This component is deprecated because its functionality can be created with the [`sx`](/system/basics/#the-sx-prop) prop or the [`useMediaQuery`](/material-ui/react-use-media-query/) hook.
+This component is deprecated because its functionality can be created with the [`sx`](/system/getting-started/the-sx-prop/) prop or the [`useMediaQuery`](/material-ui/react-use-media-query/) hook.
 
 :::warning
 This is handled in the [preset-safe codemod](#preset-safe) by applying fake `Hidden` component to prevent application crash, but further fixes are required.

docs/data/styles/advanced/advanced.md

@@ -4,7 +4,7 @@
 
 > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
-> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
+> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.
 

docs/data/styles/api/api.md

@@ -8,7 +8,7 @@ title: Styles API
 
 > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
-> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
+> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.
 

docs/data/styles/basics/basics.md

@@ -4,7 +4,7 @@
 
 > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
-> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
+> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.