From 412effb5a63c6026ea4faa0d09bcbd4a3c9fad4d Mon Sep 17 00:00:00 2001
From: Dhruv Bhanushali <dhruv_b@live.com>
Date: Mon, 13 Jan 2025 15:38:12 +0530
Subject: [PATCH] Use semantic color name instead of absolute color name
 (#2792)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
---
 .changeset/grumpy-terms-accept.md                    | 5 +++++
 packages/starlight/components/TwoColumnContent.astro | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/grumpy-terms-accept.md

diff --git a/.changeset/grumpy-terms-accept.md b/.changeset/grumpy-terms-accept.md
new file mode 100644
index 00000000000..42900dcbd4a
--- /dev/null
+++ b/.changeset/grumpy-terms-accept.md
@@ -0,0 +1,5 @@
+---
+"@astrojs/starlight": patch
+---
+
+Uses semantic `var(--sl-color-hairline)` for the page sidebar border instead of `var(--sl-color-gray-6)`. This is visually the same as previously but makes it easier to override the hairline color consistently across a site.
diff --git a/packages/starlight/components/TwoColumnContent.astro b/packages/starlight/components/TwoColumnContent.astro
index 91b8e0a4bae..af2c9cecfcb 100644
--- a/packages/starlight/components/TwoColumnContent.astro
+++ b/packages/starlight/components/TwoColumnContent.astro
@@ -32,7 +32,7 @@ import type { Props } from '../props';
 		.right-sidebar {
 			position: fixed;
 			top: 0;
-			border-inline-start: 1px solid var(--sl-color-gray-6);
+			border-inline-start: 1px solid var(--sl-color-hairline);
 			padding-top: var(--sl-nav-height);
 			width: 100%;
 			height: 100vh;