@astrojs/starlight 0.33.1 → 0.34.0

package/components/MobileMenuToggle.astro

@@ -51,53 +51,57 @@ import Icon from '../user-components/Icon.astro';
 </script>
 
 <style>
-	button {
-		position: fixed;
-		top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
-		inset-inline-end: var(--sl-nav-pad-x);
-		z-index: var(--sl-z-index-navbar);
-		border: 0;
-		border-radius: 50%;
-		width: var(--sl-menu-button-size);
-		height: var(--sl-menu-button-size);
-		padding: 0.5rem;
-		background-color: var(--sl-color-white);
-		color: var(--sl-color-black);
-		box-shadow: var(--sl-shadow-md);
-		cursor: pointer;
-	}
+	@layer starlight.core {
+		button {
+			position: fixed;
+			top: calc((var(--sl-nav-height) - var(--sl-menu-button-size)) / 2);
+			inset-inline-end: var(--sl-nav-pad-x);
+			z-index: var(--sl-z-index-navbar);
+			border: 0;
+			border-radius: 50%;
+			width: var(--sl-menu-button-size);
+			height: var(--sl-menu-button-size);
+			padding: 0.5rem;
+			background-color: var(--sl-color-white);
+			color: var(--sl-color-black);
+			box-shadow: var(--sl-shadow-md);
+			cursor: pointer;
+		}
 
-	[aria-expanded='true'] button {
-		background-color: var(--sl-color-gray-2);
-		box-shadow: none;
-	}
+		[aria-expanded='true'] button {
+			background-color: var(--sl-color-gray-2);
+			box-shadow: none;
+		}
 
-	[aria-expanded='true'] button .open-menu {
-		display: none;
-	}
+		[aria-expanded='true'] button .open-menu {
+			display: none;
+		}
 
-	:not([aria-expanded='true']) button .close-menu {
-		display: none;
-	}
+		:not([aria-expanded='true']) button .close-menu {
+			display: none;
+		}
 
-	:global([data-theme='light']) button {
-		background-color: var(--sl-color-black);
-		color: var(--sl-color-white);
-	}
+		:global([data-theme='light']) button {
+			background-color: var(--sl-color-black);
+			color: var(--sl-color-white);
+		}
 
-	:global([data-theme='light']) [aria-expanded='true'] button {
-		background-color: var(--sl-color-gray-5);
+		:global([data-theme='light']) [aria-expanded='true'] button {
+			background-color: var(--sl-color-gray-5);
+		}
 	}
 </style>
 
 <style is:global>
-	[data-mobile-menu-expanded] {
-		overflow: hidden;
-	}
-
-	@media (min-width: 50rem) {
+	@layer starlight.core {
 		[data-mobile-menu-expanded] {
-			overflow: auto;
+			overflow: hidden;
+		}
+
+		@media (min-width: 50rem) {
+			[data-mobile-menu-expanded] {
+				overflow: auto;
+			}
 		}
 	}
 </style>

package/components/MobileTableOfContents.astro

@@ -27,82 +27,84 @@ const { toc } = Astro.locals.starlightRoute;
 }
 
 <style>
-	nav {
-		position: fixed;
-		z-index: var(--sl-z-index-toc);
-		top: calc(var(--sl-nav-height) - 1px);
-		inset-inline: 0;
-		border-top: 1px solid var(--sl-color-gray-5);
-		background-color: var(--sl-color-bg-nav);
-	}
-	@media (min-width: 50rem) {
+	@layer starlight.core {
 		nav {
-			inset-inline-start: var(--sl-content-inline-start, 0);
+			position: fixed;
+			z-index: var(--sl-z-index-toc);
+			top: calc(var(--sl-nav-height) - 1px);
+			inset-inline: 0;
+			border-top: 1px solid var(--sl-color-gray-5);
+			background-color: var(--sl-color-bg-nav);
+		}
+		@media (min-width: 50rem) {
+			nav {
+				inset-inline-start: var(--sl-content-inline-start, 0);
+			}
 		}
-	}
 
-	summary {
-		gap: 0.5rem;
-		align-items: center;
-		height: var(--sl-mobile-toc-height);
-		border-bottom: 1px solid var(--sl-color-hairline-shade);
-		padding: 0.5rem 1rem;
-		font-size: var(--sl-text-xs);
-		outline-offset: var(--sl-outline-offset-inside);
-	}
-	summary::marker,
-	summary::-webkit-details-marker {
-		display: none;
-	}
+		summary {
+			gap: 0.5rem;
+			align-items: center;
+			height: var(--sl-mobile-toc-height);
+			border-bottom: 1px solid var(--sl-color-hairline-shade);
+			padding: 0.5rem 1rem;
+			font-size: var(--sl-text-xs);
+			outline-offset: var(--sl-outline-offset-inside);
+		}
+		summary::marker,
+		summary::-webkit-details-marker {
+			display: none;
+		}
 
-	.toggle {
-		flex-shrink: 0;
-		gap: 1rem;
-		align-items: center;
-		justify-content: space-between;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 0.5rem;
-		padding-block: 0.5rem;
-		padding-inline-start: 0.75rem;
-		padding-inline-end: 0.5rem;
-		line-height: 1;
-		background-color: var(--sl-color-black);
-		user-select: none;
-		cursor: pointer;
-	}
-	details[open] .toggle {
-		color: var(--sl-color-white);
-		border-color: var(--sl-color-accent);
-	}
-	details .toggle:hover {
-		color: var(--sl-color-white);
-		border-color: var(--sl-color-gray-2);
-	}
+		.toggle {
+			flex-shrink: 0;
+			gap: 1rem;
+			align-items: center;
+			justify-content: space-between;
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+			padding-block: 0.5rem;
+			padding-inline-start: 0.75rem;
+			padding-inline-end: 0.5rem;
+			line-height: 1;
+			background-color: var(--sl-color-black);
+			user-select: none;
+			cursor: pointer;
+		}
+		details[open] .toggle {
+			color: var(--sl-color-white);
+			border-color: var(--sl-color-accent);
+		}
+		details .toggle:hover {
+			color: var(--sl-color-white);
+			border-color: var(--sl-color-gray-2);
+		}
 
-	:global([dir='rtl']) .caret {
-		transform: rotateZ(180deg);
-	}
-	details[open] .caret {
-		transform: rotateZ(90deg);
-	}
+		:global([dir='rtl']) .caret {
+			transform: rotateZ(180deg);
+		}
+		details[open] .caret {
+			transform: rotateZ(90deg);
+		}
 
-	.display-current {
-		white-space: nowrap;
-		text-overflow: ellipsis;
-		overflow: hidden;
-		color: var(--sl-color-white);
-	}
+		.display-current {
+			white-space: nowrap;
+			text-overflow: ellipsis;
+			overflow: hidden;
+			color: var(--sl-color-white);
+		}
 
-	.dropdown {
-		--border-top: 1px;
-		margin-top: calc(-1 * var(--border-top));
-		border: var(--border-top) solid var(--sl-color-gray-6);
-		border-top-color: var(--sl-color-hairline-shade);
-		max-height: calc(85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height));
-		overflow-y: auto;
-		background-color: var(--sl-color-black);
-		box-shadow: var(--sl-shadow-md);
-		overscroll-behavior: contain;
+		.dropdown {
+			--border-top: 1px;
+			margin-top: calc(-1 * var(--border-top));
+			border: var(--border-top) solid var(--sl-color-gray-6);
+			border-top-color: var(--sl-color-hairline-shade);
+			max-height: calc(85vh - var(--sl-nav-height) - var(--sl-mobile-toc-height));
+			overflow-y: auto;
+			background-color: var(--sl-color-black);
+			box-shadow: var(--sl-shadow-md);
+			overscroll-behavior: contain;
+		}
 	}
 </style>
 

package/components/Page.astro

@@ -1,11 +1,17 @@
 ---
+// Important that this is the first import so it can override cascade layers order.
+import 'virtual:starlight/user-css';
+
+// Starlight nested cascade layers definitions which specify the default order of internal layers.
+import '../style/layers.css';
+
 // Built-in CSS styles.
 import '../style/props.css';
 import '../style/reset.css';
-import '../style/shiki.css';
+import '../style/asides.css';
 import '../style/util.css';
+import 'virtual:starlight/optional-css';
 
-// Components — can override built-in CSS, but not user CSS.
 import Banner from 'virtual:starlight/components/Banner';
 import ContentPanel from 'virtual:starlight/components/ContentPanel';
 import FallbackContentNotice from 'virtual:starlight/components/FallbackContentNotice';
@@ -23,12 +29,6 @@ import SkipLink from 'virtual:starlight/components/SkipLink';
 import ThemeProvider from 'virtual:starlight/components/ThemeProvider';
 import TwoColumnContent from 'virtual:starlight/components/TwoColumnContent';
 
-// Remark component CSS (needs to override `MarkdownContent.astro`)
-import '../style/asides.css';
-
-// Important that this is the last import so it can override built-in styles.
-import 'virtual:starlight/user-css';
-
 import printHref from '../style/print.css?url&no-inline';
 
 const { starlightRoute } = Astro.locals;

package/components/PageFrame.astro

@@ -22,72 +22,76 @@ const { hasSidebar } = Astro.locals.starlightRoute;
 </div>
 
 <style>
-	.page {
-		flex-direction: column;
-		min-height: 100vh;
-	}
-
-	.header {
-		z-index: var(--sl-z-index-navbar);
-		position: fixed;
-		inset-inline-start: 0;
-		inset-block-start: 0;
-		width: 100%;
-		height: var(--sl-nav-height);
-		border-bottom: 1px solid var(--sl-color-hairline-shade);
-		padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
-		padding-inline-end: var(--sl-nav-pad-x);
-		background-color: var(--sl-color-bg-nav);
-	}
+	@layer starlight.core {
+		.page {
+			flex-direction: column;
+			min-height: 100vh;
+		}
 
-	:global([data-has-sidebar]) .header {
-		padding-inline-end: calc(var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size));
-	}
+		.header {
+			z-index: var(--sl-z-index-navbar);
+			position: fixed;
+			inset-inline-start: 0;
+			inset-block-start: 0;
+			width: 100%;
+			height: var(--sl-nav-height);
+			border-bottom: 1px solid var(--sl-color-hairline-shade);
+			padding: var(--sl-nav-pad-y) var(--sl-nav-pad-x);
+			padding-inline-end: var(--sl-nav-pad-x);
+			background-color: var(--sl-color-bg-nav);
+		}
 
-	.sidebar-pane {
-		visibility: var(--sl-sidebar-visibility, hidden);
-		position: fixed;
-		z-index: var(--sl-z-index-menu);
-		inset-block: var(--sl-nav-height) 0;
-		inset-inline-start: 0;
-		width: 100%;
-		background-color: var(--sl-color-black);
-		overflow-y: auto;
-	}
+		:global([data-has-sidebar]) .header {
+			padding-inline-end: calc(
+				var(--sl-nav-gap) + var(--sl-nav-pad-x) + var(--sl-menu-button-size)
+			);
+		}
 
-	:global([aria-expanded='true']) ~ .sidebar-pane {
-		--sl-sidebar-visibility: visible;
-	}
+		.sidebar-pane {
+			visibility: var(--sl-sidebar-visibility, hidden);
+			position: fixed;
+			z-index: var(--sl-z-index-menu);
+			inset-block: var(--sl-nav-height) 0;
+			inset-inline-start: 0;
+			width: 100%;
+			background-color: var(--sl-color-black);
+			overflow-y: auto;
+		}
 
-	.sidebar-content {
-		height: 100%;
-		min-height: max-content;
-		padding: 1rem var(--sl-sidebar-pad-x) 0;
-		flex-direction: column;
-		gap: 1rem;
-	}
+		:global([aria-expanded='true']) ~ .sidebar-pane {
+			--sl-sidebar-visibility: visible;
+		}
 
-	@media (min-width: 50rem) {
-		.sidebar-content::after {
-			content: '';
-			padding-bottom: 1px;
+		.sidebar-content {
+			height: 100%;
+			min-height: max-content;
+			padding: 1rem var(--sl-sidebar-pad-x) 0;
+			flex-direction: column;
+			gap: 1rem;
 		}
-	}
 
-	.main-frame {
-		padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
-		padding-inline-start: var(--sl-content-inline-start);
-	}
+		@media (min-width: 50rem) {
+			.sidebar-content::after {
+				content: '';
+				padding-bottom: 1px;
+			}
+		}
 
-	@media (min-width: 50rem) {
-		:global([data-has-sidebar]) .header {
-			padding-inline-end: var(--sl-nav-pad-x);
+		.main-frame {
+			padding-top: calc(var(--sl-nav-height) + var(--sl-mobile-toc-height));
+			padding-inline-start: var(--sl-content-inline-start);
 		}
-		.sidebar-pane {
-			--sl-sidebar-visibility: visible;
-			width: var(--sl-sidebar-width);
-			background-color: var(--sl-color-bg-sidebar);
-			border-inline-end: 1px solid var(--sl-color-hairline-shade);
+
+		@media (min-width: 50rem) {
+			:global([data-has-sidebar]) .header {
+				padding-inline-end: var(--sl-nav-pad-x);
+			}
+			.sidebar-pane {
+				--sl-sidebar-visibility: visible;
+				width: var(--sl-sidebar-width);
+				background-color: var(--sl-color-bg-sidebar);
+				border-inline-end: 1px solid var(--sl-color-hairline-shade);
+			}
 		}
 	}
 </style>

package/components/PageSidebar.astro

@@ -19,39 +19,41 @@ import TableOfContents from 'virtual:starlight/components/TableOfContents';
 }
 
 <style>
-	.right-sidebar-panel {
-		padding: 1rem var(--sl-sidebar-pad-x);
-	}
-	.sl-container {
-		width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
-	}
-	.right-sidebar-panel :global(h2) {
-		color: var(--sl-color-white);
-		font-size: var(--sl-text-h5);
-		font-weight: 600;
-		line-height: var(--sl-line-height-headings);
-		margin-bottom: 0.5rem;
-	}
-	.right-sidebar-panel :global(:where(a)) {
-		display: block;
-		font-size: var(--sl-text-xs);
-		text-decoration: none;
-		color: var(--sl-color-gray-3);
-		overflow-wrap: anywhere;
-	}
-	.right-sidebar-panel :global(:where(a):hover) {
-		color: var(--sl-color-white);
-	}
-	@media (min-width: 72rem) {
+	@layer starlight.core {
+		.right-sidebar-panel {
+			padding: 1rem var(--sl-sidebar-pad-x);
+		}
 		.sl-container {
-			max-width: calc(
-				(
+			width: calc(var(--sl-sidebar-width) - 2 * var(--sl-sidebar-pad-x));
+		}
+		.right-sidebar-panel :global(h2) {
+			color: var(--sl-color-white);
+			font-size: var(--sl-text-h5);
+			font-weight: 600;
+			line-height: var(--sl-line-height-headings);
+			margin-bottom: 0.5rem;
+		}
+		.right-sidebar-panel :global(:where(a)) {
+			display: block;
+			font-size: var(--sl-text-xs);
+			text-decoration: none;
+			color: var(--sl-color-gray-3);
+			overflow-wrap: anywhere;
+		}
+		.right-sidebar-panel :global(:where(a):hover) {
+			color: var(--sl-color-white);
+		}
+		@media (min-width: 72rem) {
+			.sl-container {
+				max-width: calc(
 					(
-							100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
-								var(--sl-sidebar-pad-x)
-						) * 0.25 /* MAGIC NUMBER 🥲 */
-				)
-			);
+						(
+								100vw - var(--sl-sidebar-width) - 2 * var(--sl-content-pad-x) - 2 *
+									var(--sl-sidebar-pad-x)
+							) * 0.25 /* MAGIC NUMBER 🥲 */
+					)
+				);
+			}
 		}
 	}
 </style>

package/components/PageTitle.astro

@@ -5,11 +5,13 @@ import { PAGE_TITLE_ID } from '../constants';
 <h1 id={PAGE_TITLE_ID}>{Astro.locals.starlightRoute.entry.data.title}</h1>
 
 <style>
-	h1 {
-		margin-top: 1rem;
-		font-size: var(--sl-text-h1);
-		line-height: var(--sl-line-height-headings);
-		font-weight: 600;
-		color: var(--sl-color-white);
+	@layer starlight.core {
+		h1 {
+			margin-top: 1rem;
+			font-size: var(--sl-text-h1);
+			line-height: var(--sl-line-height-headings);
+			font-weight: 600;
+			color: var(--sl-color-white);
+		}
 	}
 </style>

package/components/Pagination.astro

@@ -34,44 +34,46 @@ const isRtl = dir === 'rtl';
 </div>
 
 <style>
-	.pagination-links {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
-		gap: 1rem;
-	}
+	@layer starlight.core {
+		.pagination-links {
+			display: grid;
+			grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
+			gap: 1rem;
+		}
 
-	a {
-		display: flex;
-		align-items: center;
-		justify-content: flex-start;
-		gap: 0.5rem;
-		width: 100%;
-		flex-basis: calc(50% - 0.5rem);
-		flex-grow: 1;
-		border: 1px solid var(--sl-color-gray-5);
-		border-radius: 0.5rem;
-		padding: 1rem;
-		text-decoration: none;
-		color: var(--sl-color-gray-2);
-		box-shadow: var(--sl-shadow-md);
-		overflow-wrap: anywhere;
-	}
-	[rel='next'] {
-		justify-content: end;
-		text-align: end;
-		flex-direction: row-reverse;
-	}
-	a:hover {
-		border-color: var(--sl-color-gray-2);
-	}
+		a {
+			display: flex;
+			align-items: center;
+			justify-content: flex-start;
+			gap: 0.5rem;
+			width: 100%;
+			flex-basis: calc(50% - 0.5rem);
+			flex-grow: 1;
+			border: 1px solid var(--sl-color-gray-5);
+			border-radius: 0.5rem;
+			padding: 1rem;
+			text-decoration: none;
+			color: var(--sl-color-gray-2);
+			box-shadow: var(--sl-shadow-md);
+			overflow-wrap: anywhere;
+		}
+		[rel='next'] {
+			justify-content: end;
+			text-align: end;
+			flex-direction: row-reverse;
+		}
+		a:hover {
+			border-color: var(--sl-color-gray-2);
+		}
 
-	.link-title {
-		color: var(--sl-color-white);
-		font-size: var(--sl-text-2xl);
-		line-height: var(--sl-line-height-headings);
-	}
+		.link-title {
+			color: var(--sl-color-white);
+			font-size: var(--sl-text-2xl);
+			line-height: var(--sl-line-height-headings);
+		}
 
-	svg {
-		flex-shrink: 0;
+		svg {
+			flex-shrink: 0;
+		}
 	}
 </style>