Update ToC highlighting styles to prevent UI shifts (#1372)

Co-authored-by: Chris Swithinbank <swithinbank@gmail.com>
withastro · Jan 18, 2024 · 773880d · 773880d
1 parent ce01a51
commit 773880d
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 6 deletions.
diff --git a/.changeset/young-roses-tickle.md b/.changeset/young-roses-tickle.md
@@ -0,0 +1,17 @@
+---
+'@astrojs/starlight': minor
+---
+
+Updates the table of contents highlighting styles to prevent UI shifts when scrolling through a page.
+
+If you want to preserve the previous, buggy styling, you can add the following custom CSS to your site:
+
+```css
+starlight-toc a[aria-current='true'],
+starlight-toc a[aria-current='true']:hover,
+starlight-toc a[aria-current='true']:focus {
+	font-weight: 600;
+	color: var(--sl-color-text-invert);
+	background-color: var(--sl-color-text-accent);
+}
+```
diff --git a/packages/starlight/components/TableOfContents/TableOfContentsList.astro b/packages/starlight/components/TableOfContents/TableOfContentsList.astro
@@ -38,12 +38,8 @@ const { toc, isMobile = false, depth = 0 } = Astro.props;
 		padding-inline: calc(1rem * var(--depth) + var(--pad-inline)) var(--pad-inline);
 		line-height: 1.25;
 	}
-	a[aria-current='true'],
-	a[aria-current='true']:hover,
-	a[aria-current='true']:focus {
-		font-weight: 600;
-		color: var(--sl-color-text-invert);
-		background-color: var(--sl-color-text-accent);
+	a[aria-current='true'] {
+		color: var(--sl-color-text-accent);
 	}
 	.isMobile a {
 		--pad-inline: 1rem;