docs: fix highlighting for lighter themes (#2061)

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

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}

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 */