From 18048e8d2fb65e2971aa75f6a7dabf48bb952d1c Mon Sep 17 00:00:00 2001
From: cobyfrombrooklyn-bot <cobyfrombrooklyn@gmail.com>
Date: Tue, 24 Feb 2026 04:41:14 -0500
Subject: [PATCH] fix: use text.primary color for h1 headings in markdown
 blocks

H1 headings in markdown blocks incorrectly used colors.primary.main
for their text color, while H2 used colors.text.primary. This made H1
headers appear in the primary/accent color instead of the standard
text color, breaking visual consistency.

Changed h1 color from colors.primary.main to colors.text.primary to
match h2 and other heading levels.

Added test to verify both h1 and h2 use colors.text.primary.

Fixes #2767
---
 .../__tests__/styled.elements.test.tsx        | 43 +++++++++++++++++++
 src/components/Markdown/styled.elements.tsx   |  2 +-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Markdown/__tests__/styled.elements.test.tsx

diff --git a/src/components/Markdown/__tests__/styled.elements.test.tsx b/src/components/Markdown/__tests__/styled.elements.test.tsx
new file mode 100644
index 0000000000..4e9a85395e
--- /dev/null
+++ b/src/components/Markdown/__tests__/styled.elements.test.tsx
@@ -0,0 +1,43 @@
+import * as fs from 'fs';
+import * as path from 'path';
+import defaultTheme, { resolveTheme } from '../../../theme';
+
+describe('StyledMarkdownBlock heading colors', () => {
+  const theme = resolveTheme(defaultTheme);
+  const source = fs.readFileSync(path.resolve(__dirname, '../styled.elements.tsx'), 'utf-8');
+
+  it('h1 and h2 should both reference colors.text.primary', () => {
+    // Verify the theme has distinct values so the test is meaningful
+    expect(theme.colors.primary.main).toBe('#32329f');
+    expect(theme.colors.text.primary).toBe('#333333');
+
+    // Split the source to find the h1 and h2 style blocks
+    const lines = source.split('\n');
+    let inH1 = false;
+    let inH2 = false;
+    let h1Color = '';
+    let h2Color = '';
+
+    for (const line of lines) {
+      if (line.trim().startsWith('h1 {')) inH1 = true;
+      if (line.trim().startsWith('h2 {')) inH2 = true;
+
+      if (inH1 && line.includes('color:') && line.includes('colors.')) {
+        h1Color = line.trim();
+        inH1 = false;
+      }
+      if (inH2 && line.includes('color:') && line.includes('colors.')) {
+        h2Color = line.trim();
+        inH2 = false;
+      }
+    }
+
+    // Both should use text.primary
+    expect(h1Color).toContain('colors.text.primary');
+    expect(h2Color).toContain('colors.text.primary');
+
+    // Neither should use primary.main (the old incorrect value for h1)
+    expect(h1Color).not.toContain('colors.primary.main');
+    expect(h2Color).not.toContain('colors.primary.main');
+  });
+});
diff --git a/src/components/Markdown/styled.elements.tsx b/src/components/Markdown/styled.elements.tsx
index b04a026148..673766258d 100644
--- a/src/components/Markdown/styled.elements.tsx
+++ b/src/components/Markdown/styled.elements.tsx
@@ -56,7 +56,7 @@ export const StyledMarkdownBlock = styled(
 
   h1 {
     ${headerCommonMixin(1)};
-    color: ${props => props.theme.colors.primary.main};
+    color: ${props => props.theme.colors.text.primary};
     margin-top: 0;
   }