From f752c96dafa4fce2f48d5c0b1f512567d0c6bda8 Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sat, 23 Nov 2024 16:23:14 -0800
Subject: [PATCH] docs: fix highlighting for lighter themes (#2061)

---
 docs/src/components/ComponentApi.svelte      |  6 +++---
 docs/src/components/PreviewTypeScript.svelte |  7 ++++++-
 docs/src/global.css                          | 11 +++++++++++
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/docs/src/components/ComponentApi.svelte b/docs/src/components/ComponentApi.svelte
index 835d857677..20d85c4fad 100644
--- a/docs/src/components/ComponentApi.svelte
+++ b/docs/src/components/ComponentApi.svelte
@@ -31,8 +31,6 @@
       .default;
   });
 
-  $: console.log(AsyncPreviewTypeScript);
-
   const mdn_api = "https://developer.mozilla.org/en-US/docs/Web/API/";
   const typeMap = {
     string: "string",
@@ -314,7 +312,9 @@
   }}
 >
   {#if full_code_prop}
-    Default value for <strong>{full_code_prop}</strong>.
+    <div style="margin-bottom: var(--cds-spacing-04);">
+      Default value for <strong>{full_code_prop}</strong>.
+    </div>
   {/if}
   {#if full_code}
     <svelte:component
diff --git a/docs/src/components/PreviewTypeScript.svelte b/docs/src/components/PreviewTypeScript.svelte
index c85929fe92..bd71a5cb64 100644
--- a/docs/src/components/PreviewTypeScript.svelte
+++ b/docs/src/components/PreviewTypeScript.svelte
@@ -39,7 +39,12 @@
 {/if}
 
 {#if type === "inline"}
-  <CodeSnippet type="inline" code={formattedCode} {copy}>
+  <CodeSnippet
+    type="inline"
+    class="code-override-inline"
+    code={formattedCode}
+    {copy}
+  >
     {@html highlightedCode}
   </CodeSnippet>
 {/if}
diff --git a/docs/src/global.css b/docs/src/global.css
index b46622d50a..889d622966 100644
--- a/docs/src/global.css
+++ b/docs/src/global.css
@@ -45,6 +45,17 @@ html[theme="g90"] .code-override {
   color: #6ea6ff;
 }
 
+/* Override syntax highlighting for light theme inline code .*/
+[theme="white"] .code-override-inline .token,
+[theme="g10"] .code-override-inline .token {
+  color: var(--cds-text-01, #161616);
+}
+
+/** Gray 80 is the "lighted" dark theme. Ensure the background is dark. */
+[theme="g80"] .code-override-inline {
+  background-color: #262626;
+}
+
 .token.builtin,
 .token.attr-name {
   color: #3ddbd9; /* teal 30 */