[docs-infra] Extend Code Highlighting Syntax

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContent.tsx

@@ -7,7 +7,7 @@ import { useCode } from '@mui/internal-docs-infra/useCode';
 
 import styles from './CodeContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../../../docs-infra/components/code-highlighter/demos/syntax.css';
 
 export function CodeContent(props: ContentProps<{}>) {
   const code = useCode(props, { preClassName: styles.codeBlock });

docs/app/bench/docs-infra/components/code-highlighter/demos/CodeContentLoading.tsx

@@ -4,7 +4,7 @@ import * as React from 'react';
 import type { ContentLoadingProps } from '@mui/internal-docs-infra/CodeHighlighter/types';
 import styles from './CodeContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../../../docs-infra/components/code-highlighter/demos/syntax.css';
 
 export function CodeContentLoading(props: ContentLoadingProps<{}>) {
   return (

docs/app/docs-infra/components/code-controller-context/demos/code-editor/CodeEditorContent.tsx

@@ -7,7 +7,7 @@ import { useCode } from '@mui/internal-docs-infra/useCode';
 import { LabeledSwitch } from '@/components/LabeledSwitch';
 import styles from './CodeEditorContent.module.css';
 
-import '@wooorm/starry-night/style/light'; // load the light theme for syntax highlighting
+import '../../../code-highlighter/demos/syntax.css';
 
 export function CodeEditorContent(props: ContentProps<object>) {
   const preRef = React.useRef<HTMLPreElement | null>(null);

docs/app/docs-infra/components/code-controller-context/demos/demo-live/DemoLiveContent.tsx

@@ -9,7 +9,7 @@ import { Tabs } from '@/components/Tabs';
 import { Select } from '@/components/Select';
 import styles from './DemoLiveContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../code-highlighter/demos/syntax.css';
 
 const variantNames: Record<string, string | undefined> = {
   CssModules: 'CSS Modules',

docs/app/docs-infra/components/code-controller-context/demos/multi-file/MultiFileContent.tsx

@@ -7,7 +7,7 @@ import { useCode } from '@mui/internal-docs-infra/useCode';
 import { Tabs } from '@/components/Tabs';
 import styles from '../code-editor/CodeEditorContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../code-highlighter/demos/syntax.css';
 
 export function MultiFileContent(props: ContentProps<object>) {
   const preRef = React.useRef<HTMLPreElement | null>(null);

docs/app/docs-infra/components/code-highlighter/demos/CodeContent.tsx

@@ -9,7 +9,7 @@ import { CopyButton } from '@/components/CopyButton';
 import { Select } from '@/components/Select';
 import styles from './CodeContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import './syntax.css';
 
 const variantNames: Record<string, string | undefined> = {
   CssModules: 'CSS Modules',

docs/app/docs-infra/components/code-highlighter/demos/DemoContent.tsx

@@ -9,7 +9,7 @@ import { CopyButton } from '@/components/CopyButton';
 import { Select } from '@/components/Select';
 import styles from './DemoContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import './syntax.css';
 
 const variantNames: Record<string, string | undefined> = {
   CssModules: 'CSS Modules',

docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-files/DemoContentLoading.tsx

@@ -6,7 +6,7 @@ import { Tabs } from '@/components/Tabs';
 import styles from '../DemoContent.module.css';
 import loadingStyles from './DemoContentLoading.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../syntax.css';
 
 export function DemoContentLoading(props: ContentLoadingProps<object>) {
   const tabs = React.useMemo(

docs/app/docs-infra/components/code-highlighter/demos/demo-fallback-all-variants/DemoContentLoading.tsx

@@ -7,7 +7,7 @@ import { Select } from '@/components/Select';
 import styles from '../DemoContent.module.css';
 import loadingStyles from './DemoContentLoading.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../syntax.css';
 
 const variantNames: Record<string, string | undefined> = {
   CssModules: 'CSS Modules',

docs/app/docs-infra/components/code-highlighter/demos/demo-fallback/DemoContentLoading.tsx

@@ -5,7 +5,7 @@ import type { ContentLoadingProps } from '@mui/internal-docs-infra/CodeHighlight
 import { Tabs } from '@/components/Tabs';
 import styles from '../DemoContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../syntax.css';
 
 export function DemoContentLoading(props: ContentLoadingProps<object>) {
   const tabs = React.useMemo(

docs/app/docs-infra/components/code-highlighter/demos/syntax.css

@@ -0,0 +1,78 @@
+@import '@wooorm/starry-night/style/light' layer(starry-night);
+
+:root {
+  --color-docs-infra-syntax-number: #0550ae;
+  --color-docs-infra-syntax-boolean: #0550ae;
+  --color-docs-infra-syntax-nullish: #59636e;
+  --color-docs-infra-syntax-attr-key: #0550ae;
+  --color-docs-infra-syntax-attr-value: #0a3069;
+  --color-docs-infra-syntax-attr-equals: #24292f;
+  --color-docs-infra-syntax-data-attr: #0550ae;
+  --color-docs-infra-syntax-css-property: #0550ae;
+  --color-docs-infra-syntax-css-value: #0550ae;
+  --color-docs-infra-syntax-this: #cf222e;
+  --color-docs-infra-syntax-builtin-type: #0550ae;
+  --color-docs-infra-syntax-jsx: #116329;
+  --color-docs-infra-syntax-html-tag: #0550ae;
+  --color-docs-infra-syntax-jsx-tag: #116329;
+}
+
+.di-num {
+  color: var(--color-docs-infra-syntax-number);
+}
+
+.di-bool {
+  color: var(--color-docs-infra-syntax-boolean);
+}
+
+.di-n {
+  color: var(--color-docs-infra-syntax-nullish);
+}
+
+.di-ak {
+  color: var(--color-docs-infra-syntax-attr-key);
+}
+
+.di-av {
+  color: var(--color-docs-infra-syntax-attr-value);
+}
+
+.di-ae {
+  color: var(--color-docs-infra-syntax-attr-equals);
+}
+
+.di-da {
+  color: var(--color-docs-infra-syntax-data-attr);
+}
+
+.di-cp {
+  color: var(--color-docs-infra-syntax-css-property);
+}
+
+.di-cv {
+  color: var(--color-docs-infra-syntax-css-value);
+}
+
+.di-this {
+  color: var(--color-docs-infra-syntax-this);
+}
+
+.di-bt {
+  color: var(--color-docs-infra-syntax-builtin-type);
+}
+
+.di-jsx {
+  color: var(--color-docs-infra-syntax-jsx);
+}
+
+.di-ht {
+  color: var(--color-docs-infra-syntax-html-tag);
+}
+
+.di-jt {
+  color: var(--color-docs-infra-syntax-jsx-tag);
+}
+
+code[data-inline] .pl-smi {
+  color: inherit;
+}

docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/CollapsibleContent.tsx

@@ -5,7 +5,7 @@ import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/type
 import { useCode } from '@mui/internal-docs-infra/useCode';
 import styles from './CollapsibleContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../components/code-highlighter/demos/syntax.css';
 
 export function CollapsibleContent(props: ContentProps<object>) {
   const code = useCode(props, { preClassName: styles.codeBlock });

docs/app/docs-infra/pipeline/enhance-code-emphasis/demos/IndentContent.tsx

@@ -5,7 +5,7 @@ import type { ContentProps } from '@mui/internal-docs-infra/CodeHighlighter/type
 import { useCode } from '@mui/internal-docs-infra/useCode';
 import styles from './IndentContent.module.css';
 
-import '@wooorm/starry-night/style/light';
+import '../../../components/code-highlighter/demos/syntax.css';
 
 export function IndentContent(props: ContentProps<object>) {
   const code = useCode(props, { preClassName: styles.codeBlock });