From a85665d2773a508883245d1655dcc381b6723f7b Mon Sep 17 00:00:00 2001
From: Aditya Reddy <82123567+adityareddy-dev@users.noreply.github.com>
Date: Thu, 5 Nov 2026 02:26:49 -0600
Subject: [PATCH 1/3] react: use link colors for inline type annotations

Signed-off-by: Aditya Reddy <82123567+adityareddy-dev@users.noreply.github.com>
---
 .changeset/blue-type-links.md        |  5 ++++
 e2e/type-links.spec.js               | 38 ++++++++++++++++++++++++++++
 packages/react/src/html/ui/index.css |  7 +++--
 3 files changed, 48 insertions(+), 2 deletions(-)
 create mode 100644 .changeset/blue-type-links.md
 create mode 100644 e2e/type-links.spec.js

diff --git a/.changeset/blue-type-links.md b/.changeset/blue-type-links.md
new file mode 100644
index 000000000..73cc2153d
--- /dev/null
+++ b/.changeset/blue-type-links.md
@@ -0,0 +1,5 @@
+---
+'@doc-kit/generator-react': patch
+---
+
+Use a consistent link color for inline type annotations in light and dark themes.
diff --git a/e2e/type-links.spec.js b/e2e/type-links.spec.js
new file mode 100644
index 000000000..034bb1934
--- /dev/null
+++ b/e2e/type-links.spec.js
@@ -0,0 +1,38 @@
+import { expect, test } from '@playwright/test';
+
+for (const theme of ['light', 'dark']) {
+  test(`type links use the same color in the ${theme} theme`, async ({
+    page,
+  }) => {
+    await page.addInitScript(
+      theme => localStorage.setItem('theme', theme),
+      theme
+    );
+    await page.goto('/assert.html');
+
+    const colors = [];
+
+    for (const name of ['WeakSet', 'Promise']) {
+      const link = page
+        .locator('code.type .type-link')
+        .filter({
+          hasText: new RegExp(`^${name}$`),
+        })
+        .first();
+
+      await expect(link).toBeVisible();
+
+      const color = await link.evaluate(
+        element => getComputedStyle(element).color
+      );
+
+      for (const span of await link.locator('span').all()) {
+        await expect(span).toHaveCSS('color', color);
+      }
+
+      colors.push(color);
+    }
+
+    expect(colors[0]).toBe(colors[1]);
+  });
+}
diff --git a/packages/react/src/html/ui/index.css b/packages/react/src/html/ui/index.css
index 2aa7e056a..e7fe7e473 100644
--- a/packages/react/src/html/ui/index.css
+++ b/packages/react/src/html/ui/index.css
@@ -196,10 +196,13 @@ main {
     border-radius: calc(var(--spacing, 0.25rem) * 1);
 
     .type-link {
-      /* Links keep their token color; underline marks the affordance */
-      color: inherit;
       text-decoration: underline dotted;
 
+      span {
+        /* Linked types use the link color in both themes. */
+        color: inherit !important;
+      }
+
       &:hover {
         text-decoration: underline;
       }

From 7a89f28690444a4a7ff9bc7babd1f0a4d5c93ac2 Mon Sep 17 00:00:00 2001
From: adityareddy-dev <82123567+adityareddy-dev@users.noreply.github.com>
Date: Thu, 5 Nov 2026 11:55:19 -0600
Subject: [PATCH 2/3] react: explain inline type color override

Signed-off-by: Aditya Reddy <82123567+adityareddy-dev@users.noreply.github.com>
---
 packages/react/src/html/ui/index.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/html/ui/index.css b/packages/react/src/html/ui/index.css
index e7fe7e473..43b663e4c 100644
--- a/packages/react/src/html/ui/index.css
+++ b/packages/react/src/html/ui/index.css
@@ -199,7 +199,7 @@ main {
       text-decoration: underline dotted;
 
       span {
-        /* Linked types use the link color in both themes. */
+        /* Override Shiki's inline light color and rehype-shiki's !important dark color. */
         color: inherit !important;
       }
 

From 4cf00b82f37ff723eb0c09cfdf2db1a2b67d1ecc Mon Sep 17 00:00:00 2001
From: adityareddy-dev <82123567+adityareddy-dev@users.noreply.github.com>
Date: Thu, 5 Nov 2026 13:55:18 -0600
Subject: [PATCH 3/3] react: remove type link CSS e2e test

Signed-off-by: Aditya Reddy <82123567+adityareddy-dev@users.noreply.github.com>
---
 e2e/type-links.spec.js | 38 --------------------------------------
 1 file changed, 38 deletions(-)
 delete mode 100644 e2e/type-links.spec.js

diff --git a/e2e/type-links.spec.js b/e2e/type-links.spec.js
deleted file mode 100644
index 034bb1934..000000000
--- a/e2e/type-links.spec.js
+++ /dev/null
@@ -1,38 +0,0 @@
-import { expect, test } from '@playwright/test';
-
-for (const theme of ['light', 'dark']) {
-  test(`type links use the same color in the ${theme} theme`, async ({
-    page,
-  }) => {
-    await page.addInitScript(
-      theme => localStorage.setItem('theme', theme),
-      theme
-    );
-    await page.goto('/assert.html');
-
-    const colors = [];
-
-    for (const name of ['WeakSet', 'Promise']) {
-      const link = page
-        .locator('code.type .type-link')
-        .filter({
-          hasText: new RegExp(`^${name}$`),
-        })
-        .first();
-
-      await expect(link).toBeVisible();
-
-      const color = await link.evaluate(
-        element => getComputedStyle(element).color
-      );
-
-      for (const span of await link.locator('span').all()) {
-        await expect(span).toHaveCSS('color', color);
-      }
-
-      colors.push(color);
-    }
-
-    expect(colors[0]).toBe(colors[1]);
-  });
-}