diff --git a/docs/package.json b/docs/package.json index 5e58e4d8957..065ccecc191 100644 --- a/docs/package.json +++ b/docs/package.json @@ -20,7 +20,7 @@ "@base-ui/utils": "workspace:*", "@mdx-js/loader": "^3.1.1", "@mdx-js/react": "^3.1.1", - "@mui/internal-docs-infra": "0.8.1-canary.0", + "@mui/internal-docs-infra": "0.9.1-canary.0", "@next/mdx": "^16.1.6", "@react-spring/web": "^10.0.3", "@stefanprobst/rehype-extract-toc": "^3.0.0", diff --git a/docs/src/css/syntax.css b/docs/src/css/syntax.css index c1139861545..79458c5ff38 100644 --- a/docs/src/css/syntax.css +++ b/docs/src/css/syntax.css @@ -40,14 +40,20 @@ --color-prettylights-syntax-meta-diff-range: var(--color-violet); /* Docs-infra extensions for concepts not in prettylights */ + --color-docs-infra-syntax-number: var(--color-blue); + --color-docs-infra-syntax-boolean: var(--color-blue); --color-docs-infra-syntax-nullish: var(--color-gray-500); - --color-docs-infra-syntax-other: var(--color-foreground); - --color-docs-infra-syntax-bracket-tag: var(--color-gray); - --color-docs-infra-syntax-bracket-curly: var(--color-gray); - --color-docs-infra-syntax-bracket-round: var(--color-gray); - --color-docs-infra-syntax-bracket-square: var(--color-gray); - --color-docs-infra-syntax-bracket-angle: var(--color-gray); - --color-docs-infra-syntax-bracket-quote: var(--color-gray); + --color-docs-infra-syntax-attr-key: var(--color-violet); + --color-docs-infra-syntax-attr-value: var(--color-navy); + --color-docs-infra-syntax-attr-equals: var(--color-red); + --color-docs-infra-syntax-data-attr: var(--color-blue); + --color-docs-infra-syntax-css-property: var(--color-foreground); + --color-docs-infra-syntax-css-value: var(--color-blue); + --color-docs-infra-syntax-this: var(--color-red); + --color-docs-infra-syntax-builtin-type: var(--color-blue); + --color-docs-infra-syntax-jsx: var(--color-blue); + --color-docs-infra-syntax-html-tag: var(--color-green); + --color-docs-infra-syntax-jsx-tag: var(--color-blue); } } @@ -174,79 +180,61 @@ /* Docs-infra extensions (.di-* classes) */ - /* Nullish values (null, undefined) */ - .di-n { - color: var(--color-docs-infra-syntax-nullish); + .di-num { + color: var(--color-docs-infra-syntax-number); } - /* Default text color */ - .di-d { - color: var(--color-foreground); - } - - /* Parameter highlighting */ - .di-p { - color: var(--color-prettylights-syntax-storage-modifier-import); + .di-bool { + color: var(--color-docs-infra-syntax-boolean); } - /* Misc/other markup styling */ - .di-o { - color: var(--color-docs-infra-syntax-other); + /* Nullish values (null, undefined) */ + .di-n { + color: var(--color-docs-infra-syntax-nullish); } - /* Bracket types */ - .di-bt { - color: var(--color-docs-infra-syntax-bracket-tag); + .di-ak { + color: var(--color-docs-infra-syntax-attr-key); } - .di-bc { - color: var(--color-docs-infra-syntax-bracket-curly); + .di-av { + color: var(--color-docs-infra-syntax-attr-value); } - .di-br { - color: var(--color-docs-infra-syntax-bracket-round); + .di-ae { + color: var(--color-docs-infra-syntax-attr-equals); } - .di-bs { - color: var(--color-docs-infra-syntax-bracket-square); + .di-da { + color: var(--color-docs-infra-syntax-data-attr); } - .di-ba { - color: var(--color-docs-infra-syntax-bracket-angle); + .di-cp { + color: var(--color-docs-infra-syntax-css-property); } - .di-bq { - color: var(--color-docs-infra-syntax-bracket-quote); + .di-cv { + color: var(--color-docs-infra-syntax-css-value); } - /* Diff additions */ - .di-ins { - color: var(--color-prettylights-syntax-markup-inserted-text); - background-color: var(--color-prettylights-syntax-markup-inserted-bg); + .di-this { + color: var(--color-docs-infra-syntax-this); } - /* Diff deletions */ - .di-del { - color: var(--color-prettylights-syntax-markup-deleted-text); - background-color: var(--color-prettylights-syntax-markup-deleted-bg); + .di-bt { + color: var(--color-docs-infra-syntax-builtin-type); } - /* Diff changes */ - .di-chg { - color: var(--color-prettylights-syntax-markup-changed-text); - background-color: var(--color-prettylights-syntax-markup-changed-bg); + .di-jsx { + color: var(--color-docs-infra-syntax-jsx); } - /* Diff ignored/untracked */ - .di-ign { - color: var(--color-prettylights-syntax-markup-ignored-text); - background-color: var(--color-prettylights-syntax-markup-ignored-bg); + .di-ht { + color: var(--color-docs-infra-syntax-html-tag); } - /* Diff range indicator */ - .di-rng { - font-weight: bold; - color: var(--color-prettylights-syntax-meta-diff-range); + .di-jt { + color: var(--color-docs-infra-syntax-jsx-tag); } /* Special handling for CSS language */ @@ -254,15 +242,8 @@ --color-prettylights-syntax-variable: var(--color-navy); } - /* Target CSS property names in CSS code blocks - Property names are .pl-c1 elements that are followed by a text node containing ':' - This distinguishes them from function names like 'var' which are followed by '(' */ - .language-css .line > .pl-c1:first-of-type { - color: var(--color-foreground); - } - /* Inline code and highlighted characters - collapse most colors to blue */ - .MdCode:not(pre .MdCode) { + .MdCode[data-inline] { --color-prettylights-syntax-comment: var(--color-blue); --color-prettylights-syntax-constant: var(--color-blue); --color-prettylights-syntax-entity: var(--color-blue); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ef05c4be225..59852e93550 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -156,8 +156,8 @@ importers: specifier: ^3.1.1 version: 3.1.1(@types/react@19.2.14)(react@19.2.4) '@mui/internal-docs-infra': - specifier: 0.8.1-canary.0 - version: 0.8.1-canary.0(@types/react@19.2.14)(next@16.1.7(@babel/core@7.29.0)(@playwright/test@1.59.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@6.0.2) + specifier: 0.9.1-canary.0 + version: 0.9.1-canary.0(@types/react@19.2.14)(next@16.1.7(@babel/core@7.29.0)(@playwright/test@1.59.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@6.0.2) '@next/mdx': specifier: ^16.1.6 version: 16.2.2(@mdx-js/loader@3.1.1(webpack@5.105.4(esbuild@0.27.7)))(@mdx-js/react@3.1.1(@types/react@19.2.14)(react@19.2.4)) @@ -2248,8 +2248,8 @@ packages: typescript: optional: true - '@mui/internal-docs-infra@0.8.1-canary.0': - resolution: {integrity: sha512-1wfHJNcEYRW7CkwnCkgqgZnkp/Myrypp1D9E5z3E8SABZDKxOW+KCPSUpprqb3wcUdxvjzrMFy0WCF8mFXk/og==} + '@mui/internal-docs-infra@0.9.1-canary.0': + resolution: {integrity: sha512-eKjc0Qbu8/+cxTrMhOLknh1PG9+BPqbAd/yIkDZ/U3eHT/3vZ2sZ2RqY2I07UFX/6AL9yyQubtDxk2aVDBpKkg==} engines: {node: '>=22.18.0'} hasBin: true peerDependencies: @@ -11439,7 +11439,7 @@ snapshots: - supports-color - vitest - '@mui/internal-docs-infra@0.8.1-canary.0(@types/react@19.2.14)(next@16.1.7(@babel/core@7.29.0)(@playwright/test@1.59.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@6.0.2)': + '@mui/internal-docs-infra@0.9.1-canary.0(@types/react@19.2.14)(next@16.1.7(@babel/core@7.29.0)(@playwright/test@1.59.1)(babel-plugin-react-compiler@1.0.0)(react-dom@19.2.4(react@19.2.4))(react@19.2.4))(prettier@3.8.1)(react@19.2.4)(typescript@6.0.2)': dependencies: '@babel/runtime': 7.29.2 '@babel/standalone': 7.29.2