[docs-infra] Fix Emphasized Code Loading State

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.9.1-canary.0",
+    "@mui/internal-docs-infra": "0.10.1-canary.1",
     "@next/mdx": "^16.1.6",
     "@react-spring/web": "^10.0.3",
     "@stefanprobst/rehype-extract-toc": "^3.0.0",

docs/src/css/index.css

@@ -202,6 +202,7 @@
     --color-selection: oklch(80% 28% 264deg / 50%);
     --color-line-highlight: oklch(80% 28% 264deg / 20%);
     --color-line-highlight-strong: oklch(80% 28% 264deg / 35%);
+    --color-line-highlight-strong-mark: oklch(80% 28% 264deg / 50%);
 
     /* Syntax highlighting */
     --color-gray: var(--color-gray-600);
@@ -317,6 +318,7 @@
       --color-selection: oklch(50% 50% 264deg / 40%);
       --color-line-highlight: oklch(50% 50% 264deg / 20%);
       --color-line-highlight-strong: oklch(50% 50% 264deg / 35%);
+      --color-line-highlight-strong-mark: oklch(50% 50% 264deg / 50%);
 
       /* Syntax highlighting */
       --color-gray: var(--color-gray-600);
@@ -394,6 +396,7 @@
     --color-highlight: initial;
     --color-line-highlight: initial;
     --color-line-highlight-strong: initial;
+    --color-line-highlight-strong-mark: initial;
 
     --color-gray: initial;
     --color-navy: initial;

docs/src/css/syntax.css

@@ -254,28 +254,39 @@
     --color-docs-infra-syntax-nullish: var(--color-blue);
   }
 
+  /* Frame highlighting */
+  pre .frame[data-frame-type='highlighted'],
+  pre .frame[data-frame-type='highlighted-unfocused'] {
+    background-color: var(--color-line-highlight);
+  }
+
   /* Line highlighting */
-  pre [data-hl] {
+  pre .line[data-hl] {
     background-color: var(--color-line-highlight);
   }
 
-  pre [data-hl='strong'] {
+  pre .line[data-hl='strong'] {
     background-color: var(--color-line-highlight-strong);
   }
 
-  /* Word highlighting */
-  pre [data-hl]:not(.line) {
+  /* Mark (text) highlighting */
+  pre mark {
     display: inline-flex;
+    background-color: var(--color-line-highlight);
+    color: var(--color-blue);
   }
 
-  /* Make highlighted words blue */
-  pre [data-hl]:not(.line),
-  pre [data-hl]:not(.line) > * {
+  pre mark > * {
     color: var(--color-blue);
   }
 
   /* Stronger emphasis for highlighted words inside already highlighted lines */
-  pre .line[data-hl] [data-hl]:not(.line) {
+  pre mark[data-hl] {
     background-color: var(--color-line-highlight-strong);
   }
+
+  /* Inside a strong highlighted line, mark steps up further */
+  pre mark[data-hl='strong'] {
+    background-color: var(--color-line-highlight-strong-mark);
+  }
 }