[infra] Automatically get info for CSS variables (#874)

docs/data/api/dialog-popup.json

@@ -11,6 +11,12 @@
   "imports": [
     "import { Dialog } from '@base-ui-components/react/dialog';\nconst DialogPopup = Dialog.Popup;"
   ],
+  "cssVariables": {
+    "--nested-dialogs": {
+      "description": "Indicates how many dialogs are nested within.",
+      "type": "number"
+    }
+  },
   "classes": [],
   "spread": true,
   "themeDefaultProps": true,

docs/data/translations/api-docs/dialog-popup/dialog-popup.json

@@ -16,5 +16,8 @@
     },
     "render": { "description": "A function to customize rendering of the component." }
   },
-  "classDescriptions": {}
+  "classDescriptions": {},
+  "cssVariablesDescriptions": {
+    "--nested-dialogs": "Indicates how many dialogs are nested within."
+  }
 }

docs/reference/generated/dialog-popup.json

@@ -51,8 +51,8 @@
   },
   "cssVariables": {
     "--nested-dialogs": {
-      "type": "number",
-      "description": "Indicates how many dialogs are nested within."
+      "description": "Indicates how many dialogs are nested within.",
+      "type": "number"
     }
   }
 }

docs/reference/overrides/dialog-popup.json

@@ -20,11 +20,5 @@
       "type": "number",
       "description": "Indicates how many dialogs are nested within."
     }
-  },
-  "cssVariables": {
-    "--nested-dialogs": {
-      "type": "number",
-      "description": "Indicates how many dialogs are nested within."
-    }
   }
 }

package.json

@@ -78,7 +78,7 @@
     "@mui/internal-markdown": "^1.0.20",
     "@mui/internal-scripts": "^1.0.27",
     "@mui/internal-test-utils": "https://pkg.csb.dev/mui/material-ui/commit/92c23999/@mui/internal-test-utils",
-    "@mui/monorepo": "github:mui/material-ui#v6.1.7",
+    "@mui/monorepo": "github:mui/material-ui#v6.1.10",
     "@next/eslint-plugin-next": "^14.2.18",
     "@octokit/rest": "^20.1.1",
     "@playwright/test": "1.49.0",

packages/react/src/dialog/popup/DialogPopup.tsx

@@ -12,6 +12,7 @@ import { type CustomStyleHookMapping } from '../../utils/getStyleHookProps';
 import { popupOpenStateMapping as baseMapping } from '../../utils/popupOpenStateMapping';
 import { useForkRef } from '../../utils/useForkRef';
 import { InteractionType } from '../../utils/useEnhancedClickHandler';
+import { DialogPopupCssVars } from './DialogPopupCssVars';
 
 const customStyleHookMapping: CustomStyleHookMapping<DialogPopup.State> = {
   ...baseMapping,
@@ -103,7 +104,7 @@ const DialogPopup = React.forwardRef(function DialogPopup(
     propGetter: getRootProps,
     extraProps: {
       ...other,
-      style: { ...other.style, '--nested-dialogs': nestedOpenDialogCount },
+      style: { ...other.style, [DialogPopupCssVars.nestedDialogs]: nestedOpenDialogCount },
     },
     customStyleHookMapping,
   });

packages/react/src/dialog/popup/DialogPopupCssVars.ts

@@ -0,0 +1,7 @@
+export enum DialogPopupCssVars {
+  /**
+   * Indicates how many dialogs are nested within.
+   * @type {number}
+   */
+  nestedDialogs = '--nested-dialogs',
+}

scripts/buildApiDocs/buildReference.ts

@@ -82,7 +82,10 @@ export async function buildReference() {
     }
 
     const attributes = componentOverrides?.attributes;
-    const cssVariables = componentOverrides?.cssVariables;
+    const cssVariables =
+      !!componentData?.cssVariables || componentOverrides?.cssVariables
+        ? { ...componentData?.cssVariables, ...componentOverrides?.cssVariables }
+        : undefined;
 
     const json: ComponentDef = {
       name: componentData.name,

scripts/buildApiDocs/index.ts

@@ -1,6 +1,6 @@
 import yargs, { ArgumentsCamelCase } from 'yargs';
 import { buildApi } from '@mui-internal/api-docs-builder';
-import { buildReference } from 'buildReference';
+import { buildReference } from './buildReference';
 import { projectSettings, newProjectSettings } from './config/projectSettings';
 
 type CommandOptions = { grep?: string };