From 35565c0b140f59ff0f7547a6460d55078d0b16c3 Mon Sep 17 00:00:00 2001
From: Samuel Williams <samuel.williams@shopify.com>
Date: Sun, 16 Aug 2026 12:42:52 +1200
Subject: [PATCH] Improve highlighted code link styling

---
 themes/base/syntax.css | 11 +++++++++++
 themes/theming.md      | 11 +++++++++++
 2 files changed, 22 insertions(+)

diff --git a/themes/base/syntax.css b/themes/base/syntax.css
index 3f9a93c..87431ca 100644
--- a/themes/base/syntax.css
+++ b/themes/base/syntax.css
@@ -3,6 +3,7 @@
 	--syntax-base-hue: 270;
 	--syntax-base-saturation: 60%;
 	--syntax-base-lightness: 50%;
+	--syntax-link-hover-brightness: 1.25;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -29,6 +30,16 @@ code.syntax {
 	tab-size: 2;
 }
 
+code.syntax a {
+	color: inherit;
+	text-decoration: none;
+}
+
+code.syntax a:hover,
+code.syntax a:focus-visible {
+	filter: brightness(var(--syntax-link-hover-brightness));
+}
+
 :host([wrap]) code.syntax .indent {
 	flex-grow: 0;
 	flex-shrink: 0;
diff --git a/themes/theming.md b/themes/theming.md
index c90d623..169f508 100644
--- a/themes/theming.md
+++ b/themes/theming.md
@@ -123,6 +123,17 @@ Override dark mode values for specific themes:
 }
 ```
 
+### Link Interaction
+
+Links preserve the surrounding syntax colors and become brighter when hovered
+or focused. You can adjust the brightness multiplier from the host page:
+
+```css
+syntax-code {
+	--syntax-link-hover-brightness: 1.4;
+}
+```
+
 ## Token Types
 
 All token types automatically get colors derived from the base. You can override individual ones if needed: