fix inline code font size in headings (#48)

Author: rezrah

.changeset/khaki-mugs-cover.md

@@ -0,0 +1,6 @@
+---
+'@primer/doctocat-nextjs': patch
+---
+
+- Fix inline code font-size in markdown headings. Now inherits size used in the heading.
+- Increased spacing below React code blocks, which was previously too small.

packages/site/content/content-example/kitchen-sink.mdx

@@ -115,3 +115,7 @@ flowchart LR
   <Grid.Column span={2}></Grid.Column>
 </Grid>
 ```
+
+## Heading with `inline code`
+
+This heading has an inline code element in it. The code will be displayed at the same font size as the regular text.

packages/theme/components/layout/code-block/ReactCodeBlock.module.css

@@ -1,4 +1,5 @@
 .CodeBlock {
+  --spacing: var(--base-size-40);
   margin-block: var(--base-size-24);
   background-color: var(--brand-color-canvas-default);
   border: var(--brand-borderWidth-thin) solid var(--brand-color-border-default);

packages/theme/css/prose.module.css

@@ -211,6 +211,11 @@
   background-color: var(--base-color-scale-indigo-0);
 }
 
+/* Inline code inside headings should inherit font-size */
+.Prose :is(h1, h2, h3, h4, h5, h6):has(code) code:not(:global(.custom-component) code) {
+  font-size: inherit;
+}
+
 [data-color-mode='dark'] .Prose code:not(:global(.custom-component) code) {
   background-color: var(--base-color-scale-indigo-9);
 }