[docs-infra] Update installation commands to use the new tabs code co…

…mponent (#37927)

docs/data/base/getting-started/quickstart/quickstart.md

@@ -10,24 +10,22 @@ If you're using Next.js 13.4 or later, check out the [Next.js App Router guide](
 
 `@mui/base` is completely standalone – run one of the following commands to add Base UI to your React project:
 
-### With npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @mui/base
 ```
 
-### With yarn
-
-```bash
+```bash yarn
 yarn add @mui/base
 ```
 
-### With pnpm
-
-```bash
-pnpm add @mui/base
+```bash pnpm
+pnpm install @mui/base
 ```
 
+</codeblock>
+
 ### Peer dependencies
 
 <!-- #react-peer-version -->

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

@@ -4,18 +4,17 @@
 
 Run one of the following commands to add Joy UI to your project:
 
-## npm
-
-```bash
+<codeblock storageKey="package-manager">
+```bash npm
 npm install @mui/joy @emotion/react @emotion/styled
 ```
 
-## yarn
-
-```bash
+```bash yarn
 yarn add @mui/joy @emotion/react @emotion/styled
 ```
 
+</codeblock>
+
 ## Peer dependencies
 
 <!-- #react-peer-version -->
@@ -35,18 +34,18 @@ Joy UI is designed to use the [Public Sans](https://fonts.google.com/specimen/Pu
 font by default.
 You may add it to your project with npm or yarn via [Fontsource](https://fontsource.org/), or with the Google Fonts CDN.
 
-### npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @fontsource/public-sans
 ```
 
-### yarn
-
-```bash
+```bash yarn
 yarn add @fontsource/public-sans
 ```
 
+</codeblock>
+
 Then you can import it in your entry point like this:
 
 ```tsx

docs/data/material/components/about-the-lab/about-the-lab.md

@@ -17,18 +17,20 @@ For a component to be ready to move to the core, the following criteria are cons
 
 ## Installation
 
-To install and save in your `package.json` dependencies, run the command below using **npm**:
+To install and save in your `package.json` dependencies, run one of the following commands:
 
-```bash
+<codeblock storageKey="package-manager">
+
+```bash npm
 npm install @mui/lab @mui/material
 ```
 
-Or **yarn**:
-
-```bash
+```bash yarn
 yarn add @mui/lab @mui/material
 ```
 
+</codeblock>
+
 Note that the lab has a peer dependency on the Material UI components.
 
 ## TypeScript

docs/data/material/components/material-icons/material-icons.md

@@ -16,12 +16,20 @@ githubLabel: 'package: icons'
 [@mui/icons-material](https://www.npmjs.com/package/@mui/icons-material)
 includes the 2,100+ official [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) converted to [`SvgIcon`](/material-ui/api/svg-icon/) components.
 It depends on `@mui/material`, which requires Emotion packages.
-Use the following command to install it:
+Use one of the following commands to install it:
 
-```bash
+<codeblock storageKey="package-manager">
+
+```bash npm
 npm install @mui/icons-material @mui/material @emotion/styled @emotion/react
 ```
 
+```bash yarn
+yarn add @mui/icons-material @mui/material @emotion/styled @emotion/react
+```
+
+</codeblock>
+
 See the [Installation](/material-ui/getting-started/installation/) page for additional docs about how to make sure everything is set up correctly.
 
 <hr/>

docs/data/material/getting-started/installation/installation.md

@@ -14,35 +14,35 @@ If you're using Next.js 13.4 or later, check out the [Next.js App Router guide](
 
 Run one of the following commands to add Material UI to your project:
 
-### npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @mui/material @emotion/react @emotion/styled
 ```
 
-### yarn
-
-```bash
+```bash yarn
 yarn add @mui/material @emotion/react @emotion/styled
 ```
 
+</codeblock>
+
 ## With styled-components
 
 Material UI uses [Emotion](https://emotion.sh/) as its default styling engine.
 If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands:
 
-### npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @mui/material @mui/styled-engine-sc styled-components
 ```
 
-### yarn
-
-```bash
+```bash yarn
 yarn add @mui/material @mui/styled-engine-sc styled-components
 ```
 
+</codeblock>
+
 :::warning
 Visit the [Styled engine guide](/material-ui/guides/styled-engine/) for more information about how to configure styled-components.
 :::
@@ -66,17 +66,7 @@ Material UI is designed to use the [Roboto](https://fonts.google.com/specimen/Ro
 font by default.
 You may add it to your project with npm or yarn via [Fontsource](https://fontsource.org/), or with the Google Fonts CDN.
 
-### npm
-
-```bash
-npm install @fontsource/roboto
-```
-
-### yarn
-
-```bash
-yarn add @fontsource/roboto
-```
+{{"component": "modules/components/HighlightedCodeWithTabs", "tabs": [{"tab":"npm", "code":"npm install @fontsource/roboto", "language": "bash"}, {"tab":"yarn", "code": "yarn add @fontsource/roboto"}]}}
 
 Then you can import it in your entry point like this:
 
@@ -107,18 +97,18 @@ To install the Roboto font in your project using the Google Web Fonts CDN, add t
 To use the [font Icon component](/material-ui/icons/#icon-font-icons) or the prebuilt SVG Material Icons (such as those found in the [icon demos](/material-ui/icons/)), you must first install the [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) font.
 You can do so with npm or yarn, or with the Google Web Fonts CDN.
 
-### npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @mui/icons-material
 ```
 
-### yarn
-
-```bash
+```bash yarn
 yarn add @mui/icons-material
 ```
 
+</codeblock>
+
 ### Google Web Fonts
 
 To install the Material Icons font in your project using the Google Web Fonts CDN, add the following code snippet inside your project's `<head />` tag:

docs/data/system/getting-started/installation/installation.md

@@ -6,35 +6,35 @@
 
 Run one of the following commands to add MUI System to your project:
 
-### npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @mui/system @emotion/react @emotion/styled
 ```
 
-### yarn
-
-```bash
+```bash yarn
 yarn add @mui/system @emotion/react @emotion/styled
 ```
 
+</codeblock>
+
 ## With styled-components
 
 MUI System uses [Emotion](https://emotion.sh/) as its default styling engine.
 If you want to use [styled-components](https://styled-components.com/) instead, run one of the following commands:
 
-### npm
+<codeblock storageKey="package-manager">
 
-```bash
+```bash npm
 npm install @mui/system @mui/styled-engine-sc styled-components
 ```
 
-### yarn
-
-```bash
+```bash yarn
 yarn add @mui/system @mui/styled-engine-sc styled-components
 ```
 
+</codeblock>
+
 :::warning
 Visit the [Styled engine guide](/material-ui/guides/styled-engine/) for more information about how to configure styled-components.
 :::

docs/src/modules/components/ExampleCollection.js

@@ -96,13 +96,13 @@ export default function ExampleCollection() {
                 backgroundImage: 'none',
                 borderRadius: 1,
                 border: '1px solid',
-                borderColor: 'grey.200',
+                borderColor: 'divider',
                 boxShadow: 'none',
               },
               (theme) =>
                 theme.applyDarkStyles({
                   bgcolor: 'transparent',
-                  borderColor: 'primaryDark.700',
+                  borderColor: 'divider',
                 }),
             ]}
           >

docs/src/modules/components/HighlightedCodeWithTabs.tsx

@@ -1,25 +1,27 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
-import { styled } from '@mui/material/styles';
+import { styled, alpha } from '@mui/material/styles';
 import Tabs, { TabsOwnProps } from '@mui/base/Tabs';
 import TabsList from '@mui/base/TabsList';
 import TabPanel from '@mui/base/TabPanel';
 import Tab from '@mui/base/Tab';
 import HighlightedCode from './HighlightedCode';
 
 const StyledTabList = styled(TabsList)(({ theme }) => ({
+  padding: 6,
   display: 'flex',
-  backgroundColor: (theme.vars || theme).palette.primaryDark[600],
+  border: '1px solid',
+  borderColor: (theme.vars || theme).palette.primaryDark[700],
+  backgroundColor: (theme.vars || theme).palette.primaryDark[900],
   borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
   borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
   ...theme.applyDarkStyles({
-    backgroundColor: (theme.vars || theme).palette.primaryDark[700],
+    backgroundColor: alpha(theme.palette.primaryDark[800], 0.5),
   }),
 }));
 
 const StyledTabPanel = styled(TabPanel)<{ ownerState: { mounted: boolean } }>(({ ownerState }) => ({
   '& pre': {
-    marginTop: 0,
+    marginTop: -1,
     borderTopLeftRadius: 0,
     borderTopRightRadius: 0,
     '& code': {
@@ -30,41 +32,42 @@ const StyledTabPanel = styled(TabPanel)<{ ownerState: { mounted: boolean } }>(({
 
 const StyledTab = styled(Tab)<{ ownerState: { mounted: boolean } }>(({ theme, ownerState }) =>
   theme.unstable_sx({
-    py: 1.5,
-    px: 2,
+    p: 0.8,
     border: 'none',
-    borderBottom: '2px solid transparent',
-    bgcolor: 'primaryDark.800',
-    color: 'rgba(255 255 255 / 0.6)',
-    fontSize: '0.75rem',
-    fontWeight: 'semiBold',
+    bgcolor: 'transparent',
+    color: (theme.vars || theme).palette.grey[600],
+    fontSize: theme.typography.pxToRem(12),
+    fontWeight: theme.typography.fontWeightSemiBold,
     fontFamily: theme.typography.fontFamilyCode,
     outline: 'none',
-    minWidth: 80,
+    minWidth: 52,
     cursor: 'pointer',
-    '&:first-child /* emotion-disable-server-rendering-unsafe-selector-warning-please-do-not-use-this-the-warning-exists-for-a-reason */':
-      {
-        borderTopLeftRadius: (theme.vars || theme).shape.borderRadius,
-      },
+    borderRadius: '8px',
+    position: 'relative',
     '&:not(:first-child)': {
-      marginLeft: '1px',
-    },
-    '&:last-child': {
-      borderTopRightRadius: (theme.vars || theme).shape.borderRadius,
+      marginLeft: 0.5,
     },
     ...(ownerState.mounted && {
       '&.Mui-selected': {
-        color: '#fff',
-        borderColor: (theme.vars || theme).palette.primary.light,
+        color: '#FFF',
+        '&:after': {
+          content: "''",
+          position: 'absolute',
+          left: 0,
+          bottom: '-6px',
+          height: 2,
+          width: '100%',
+          bgcolor: (theme.vars || theme).palette.primary.light,
+        },
       },
     }),
     '&:hover': {
-      backgroundColor: 'rgba(255 255 255 / 0.08)',
+      backgroundColor: alpha(theme.palette.primaryDark[500], 0.5),
     },
     '&:focus-visible': {
       outline: '2px solid',
       outlineOffset: '-2px',
-      outlineColor: (theme.vars || theme).palette.primary.main,
+      outlineColor: (theme.vars || theme).palette.primary.light,
     },
   }),
 );
@@ -123,7 +126,6 @@ export default function HighlightedCodeWithTabs({
             {tab}
           </StyledTab>
         ))}
-        <Box sx={{ ml: 'auto' }} />
       </StyledTabList>
       {tabs.map(({ tab, language, code }) => (
         <StyledTabPanel ownerState={ownerState} key={tab} value={tab}>