alert tweaks and other fixes

docs/src/modules/components/ApiPage/list/ExpendableApiItem.tsx

@@ -98,7 +98,7 @@ const Root = styled('div')<{ ownerState: { type?: DescriptionType } }>(
       fontWeight: theme.typography.fontWeightMedium,
       border: '1px solid',
       borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`,
-      borderRadius: 8,
+      borderRadius: 12,
       backgroundColor: `var(--muidocs-palette-warning-50, ${lightTheme.palette.warning[50]})`,
       color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`,
       marginBottom: 16,

docs/src/modules/components/ApiPage/list/PropertiesList.tsx

@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { styled } from '@mui/material/styles';
 import Alert from '@mui/material/Alert';
+import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
 import { useTranslate } from 'docs/src/modules/utils/i18n';
 import {
   brandingDarkTheme as darkTheme,
@@ -157,18 +158,12 @@ export default function PropertiesList(props: PropertiesListProps) {
             {requiresRef && (
               <Alert
                 severity="warning"
-                sx={{ mb: 1, py: 0 }}
-                iconMapping={{
-                  warning: (
-                    <svg
-                      width="14"
-                      height="12"
-                      viewBox="0 0 14 12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path d="M1.98012 11.9997H12.0201C13.0468 11.9997 13.6868 10.8864 13.1735 9.99971L8.15345 1.32638C7.64012 0.43971 6.36012 0.43971 5.84679 1.32638L0.826788 9.99971C0.313455 10.8864 0.953455 11.9997 1.98012 11.9997ZM7.00012 7.33304C6.63345 7.33304 6.33345 7.03304 6.33345 6.66638V5.33304C6.33345 4.96638 6.63345 4.66638 7.00012 4.66638C7.36679 4.66638 7.66679 4.96638 7.66679 5.33304V6.66638C7.66679 7.03304 7.36679 7.33304 7.00012 7.33304ZM7.66679 9.99971H6.33345V8.66638H7.66679V9.99971Z" />
-                    </svg>
-                  ),
+                icon={<WarningRoundedIcon fontSize="small" />}
+                sx={{
+                  '& .MuiAlert-icon': {
+                    height: 'fit-content',
+                    py: '8px',
+                  },
                 }}
               >
                 <span
@@ -190,20 +185,14 @@ export default function PropertiesList(props: PropertiesListProps) {
             ))}
             {isDeprecated && (
               <Alert
-                severity="warning"
-                sx={{ mb: 1, py: 0 }}
                 className="MuiApi-collapsible"
-                iconMapping={{
-                  warning: (
-                    <svg
-                      width="14"
-                      height="12"
-                      viewBox="0 0 14 12"
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <path d="M1.98012 11.9997H12.0201C13.0468 11.9997 13.6868 10.8864 13.1735 9.99971L8.15345 1.32638C7.64012 0.43971 6.36012 0.43971 5.84679 1.32638L0.826788 9.99971C0.313455 10.8864 0.953455 11.9997 1.98012 11.9997ZM7.00012 7.33304C6.63345 7.33304 6.33345 7.03304 6.33345 6.66638V5.33304C6.33345 4.96638 6.63345 4.66638 7.00012 4.66638C7.36679 4.66638 7.66679 4.96638 7.66679 5.33304V6.66638C7.66679 7.03304 7.36679 7.33304 7.00012 7.33304ZM7.66679 9.99971H6.33345V8.66638H7.66679V9.99971Z" />
-                    </svg>
-                  ),
+                severity="warning"
+                icon={<WarningRoundedIcon fontSize="small" />}
+                sx={{
+                  '& .MuiAlert-icon': {
+                    height: 'fit-content',
+                    py: '8px',
+                  },
                 }}
               >
                 {t('api-docs.deprecated')}

docs/src/modules/components/ApiPage/list/SlotsList.tsx

@@ -13,12 +13,12 @@ import ExpendableApiItem, {
 const StyledApiItem = styled(ExpendableApiItem)(
   ({ theme }) => ({
     '.slot-classname, .slot-default-element': {
+      marginBottom: 8,
       '& .prop-list-title': {
         ...theme.typography.body2,
         fontWeight: theme.typography.fontWeightSemiBold,
         color: theme.palette.text.primary,
       },
-      marginBottom: 8,
     },
     '& .default-slot-value': {
       ...theme.typography.caption,

docs/src/modules/components/ApiPage/table/CSSTable.tsx

@@ -22,10 +22,10 @@ const StyledTable = styled('table')(
       },
     },
     '& .MuiApi-table-rule-name': {
-      fontWeight: theme.typography.fontWeightSemiBold,
       fontFamily: theme.typography.fontFamilyCode,
+      fontWeight: theme.typography.fontWeightSemiBold,
       fontSize: theme.typography.pxToRem(13),
-      color: `var(--muidocs-palette-primary-700, ${lightTheme.palette.primary[700]})`,
+      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
     },
     '& .MuiApi-table-className': {
       padding: '0 4px',

docs/src/modules/components/ApiPage/table/PropertiesTable.tsx

@@ -36,7 +36,7 @@ const StyledTable = styled('table')(
       fontFamily: theme.typography.fontFamilyCode,
       fontWeight: theme.typography.fontWeightSemiBold,
       fontSize: theme.typography.pxToRem(13),
-      color: `var(--muidocs-palette-primary-700, ${lightTheme.palette.primary[700]})`,
+      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
     },
     '& .MuiApi-table-item-type': {
       padding: '0 4px',

docs/src/modules/components/ApiPage/table/SlotsTable.tsx

@@ -25,7 +25,7 @@ const StyledTable = styled('table')(
       fontFamily: theme.typography.fontFamilyCode,
       fontWeight: theme.typography.fontWeightSemiBold,
       fontSize: theme.typography.pxToRem(13),
-      color: `var(--muidocs-palette-primary-700, ${lightTheme.palette.primary[700]})`,
+      color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`,
     },
     '& .class-name': {
       padding: '0 4px',