Improve code block and inline code default font stack (#308)

5 files changed, 18 insertions, 4 deletions

diff --git a/.changeset/itchy-pugs-live.md b/.changeset/itchy-pugs-live.md
new file mode 100644
index 00000000..d529e6b2
--- /dev/null
+++ b/.changeset/itchy-pugs-live.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Fix use of default monospace font stack
diff --git a/docs/src/components/file-tree.astro b/docs/src/components/file-tree.astro
index 2092b281..b2158bdd 100644
--- a/docs/src/components/file-tree.astro
+++ b/docs/src/components/file-tree.astro
@@ -29,7 +29,7 @@ const processedContent = await fileTreeProcessor.process({
     padding: 1rem;
     background-color: var(--sl-color-gray-6);
     font-size: var(--sl-text-xs);
-    font-family: var(--__sb-font-mono);
+    font-family: var(--__sl-font-mono);
     overflow-x: auto;
   }
 
diff --git a/packages/starlight/components/MarkdownContent.astro b/packages/starlight/components/MarkdownContent.astro
index 0d7f4a77..af98fde1 100644
--- a/packages/starlight/components/MarkdownContent.astro
+++ b/packages/starlight/components/MarkdownContent.astro
@@ -77,6 +77,10 @@
     background-color: var(--sl-color-bg-inline-code);
     margin-block: -0.125rem;
     padding: 0.125rem 0.375rem;
+    font-size: var(--sl-text-code-sm);
+  }
+  .content :global(:is(h1, h2, h3, h4, h5, h6) code) {
+    font-size: inherit;
   }
 
   .content :global(pre) {
@@ -87,6 +91,7 @@
 
   .content :global(pre code) {
     all: unset;
+    font-family: var(--__sl-font-mono);
   }
 
   .content :global(blockquote) {
diff --git a/packages/starlight/style/props.css b/packages/starlight/style/props.css
index 2f162503..8788587e 100644
--- a/packages/starlight/style/props.css
+++ b/packages/starlight/style/props.css
@@ -89,8 +89,8 @@
     'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
   --sl-font-system-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
     'Liberation Mono', 'Courier New', monospace;
-  --__sb-font: var(--sl-font, ''), var(--sl-font-system);
-  --__sb-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono);
+  --__sl-font: var(--sl-font, ''), var(--sl-font-system);
+  --__sl-font-mono: var(--sl-font-mono, ''), var(--sl-font-system-mono);
 
   /** Key layout values */
   --sl-nav-height: 3.5rem;
diff --git a/packages/starlight/style/reset.css b/packages/starlight/style/reset.css
index 5ccb4d2e..1b30d9ea 100644
--- a/packages/starlight/style/reset.css
+++ b/packages/starlight/style/reset.css
@@ -18,7 +18,7 @@ html[data-theme='light'] {
 }
 
 body {
-  font-family: var(--__sb-font);
+  font-family: var(--__sl-font);
   line-height: var(--sl-line-height);
   -webkit-font-smoothing: antialiased;
   color: var(--sl-color-text);
@@ -41,3 +41,7 @@ h5,
 h6 {
   overflow-wrap: break-word;
 }
+
+code {
+  font-family: var(--__sl-font-mono);
+}