@astrojs/starlight 0.33.1 → 0.34.0

package/style/markdown.css

@@ -1,28 +1,29 @@
-.sl-markdown-content
-	:not(a, strong, em, del, span, input, code, br)
-	+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
-	margin-top: 1rem;
-}
+@layer starlight.content {
+	.sl-markdown-content
+		:not(a, strong, em, del, span, input, code, br)
+		+ :not(a, strong, em, del, span, input, code, br, :where(.not-content *)) {
+		margin-top: 1rem;
+	}
 
-/* Headings after non-headings have more spacing. */
-.sl-markdown-content
-	:not(h1, h2, h3, h4, h5, h6)
-	+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
-	margin-top: 1.5em;
-}
+	/* Headings after non-headings have more spacing. */
+	.sl-markdown-content
+		:not(h1, h2, h3, h4, h5, h6)
+		+ :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+		margin-top: 1.5em;
+	}
 
-.sl-markdown-content li + li:not(:where(.not-content *)),
-.sl-markdown-content dt + dt:not(:where(.not-content *)),
-.sl-markdown-content dt + dd:not(:where(.not-content *)),
-.sl-markdown-content dd + dd:not(:where(.not-content *)) {
-	margin-top: 0.25rem;
-}
+	.sl-markdown-content li + li:not(:where(.not-content *)),
+	.sl-markdown-content dt + dt:not(:where(.not-content *)),
+	.sl-markdown-content dt + dd:not(:where(.not-content *)),
+	.sl-markdown-content dd + dd:not(:where(.not-content *)) {
+		margin-top: 0.25rem;
+	}
 
-.sl-markdown-content li:not(:where(.not-content *)) {
-	overflow-wrap: anywhere;
-}
+	.sl-markdown-content li:not(:where(.not-content *)) {
+		overflow-wrap: anywhere;
+	}
 
-.sl-markdown-content
+	.sl-markdown-content
 	li
 	> :is(
 		:last-child:not(
@@ -47,193 +48,198 @@
 			 */
 		:not(script):has(~ script:last-child):not(:has(~ :not(script)))
 	) {
-	margin-bottom: 1.25rem;
-}
+		margin-bottom: 1.25rem;
+	}
 
-.sl-markdown-content dt:not(:where(.not-content *)) {
-	font-weight: 700;
-}
-.sl-markdown-content dd:not(:where(.not-content *)) {
-	padding-inline-start: 1rem;
-}
+	.sl-markdown-content dt:not(:where(.not-content *)) {
+		font-weight: 700;
+	}
+	.sl-markdown-content dd:not(:where(.not-content *)) {
+		padding-inline-start: 1rem;
+	}
 
-.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-	line-height: var(--sl-line-height-headings);
-	font-weight: 600;
-}
+	.sl-markdown-content :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) {
+		color: var(--sl-color-white);
+		line-height: var(--sl-line-height-headings);
+		font-weight: 600;
+	}
 
-.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
-	display: block;
-	max-width: 100%;
-	height: auto;
-}
+	.sl-markdown-content :is(img, picture, video, canvas, svg, iframe):not(:where(.not-content *)) {
+		display: block;
+		max-width: 100%;
+		height: auto;
+	}
 
-.sl-markdown-content h1:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h1);
-}
-.sl-markdown-content h2:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h2);
-}
-.sl-markdown-content h3:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h3);
-}
-.sl-markdown-content h4:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h4);
-}
-.sl-markdown-content h5:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h5);
-}
-.sl-markdown-content h6:not(:where(.not-content *)) {
-	font-size: var(--sl-text-h6);
-}
+	.sl-markdown-content h1:not(:where(.not-content *)) {
+		font-size: var(--sl-text-h1);
+	}
+	.sl-markdown-content h2:not(:where(.not-content *)) {
+		font-size: var(--sl-text-h2);
+	}
+	.sl-markdown-content h3:not(:where(.not-content *)) {
+		font-size: var(--sl-text-h3);
+	}
+	.sl-markdown-content h4:not(:where(.not-content *)) {
+		font-size: var(--sl-text-h4);
+	}
+	.sl-markdown-content h5:not(:where(.not-content *)) {
+		font-size: var(--sl-text-h5);
+	}
+	.sl-markdown-content h6:not(:where(.not-content *)) {
+		font-size: var(--sl-text-h6);
+	}
 
-.sl-markdown-content a:not(:where(.not-content *)) {
-	color: var(--sl-color-text-accent);
-}
-.sl-markdown-content a:hover:not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-}
+	.sl-markdown-content a:not(:where(.not-content *)) {
+		color: var(--sl-color-text-accent);
+	}
+	.sl-markdown-content a:hover:not(:where(.not-content *)) {
+		color: var(--sl-color-white);
+	}
 
-.sl-markdown-content code:not(:where(.not-content *)) {
-	background-color: var(--sl-color-bg-inline-code);
-	margin-block: -0.125rem;
-	padding: 0.125rem 0.375rem;
-	font-size: var(--sl-text-code-sm);
-}
-.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
-	font-size: inherit;
-}
+	.sl-markdown-content code:not(:where(.not-content *)) {
+		background-color: var(--sl-color-bg-inline-code);
+		margin-block: -0.125rem;
+		padding: 0.125rem 0.375rem;
+		font-size: var(--sl-text-code-sm);
+	}
+	.sl-markdown-content :is(h1, h2, h3, h4, h5, h6) code {
+		font-size: inherit;
+	}
 
-.sl-markdown-content pre:not(:where(.not-content *)) {
-	border: 1px solid var(--sl-color-gray-5);
-	padding: 0.75rem 1rem;
-	font-size: var(--sl-text-code);
-	tab-size: 2;
-}
+	.sl-markdown-content pre:not(:where(.not-content *)) {
+		border: 1px solid var(--sl-color-gray-5);
+		padding: 0.75rem 1rem;
+		font-size: var(--sl-text-code);
+		tab-size: 2;
+	}
 
-.sl-markdown-content pre code:not(:where(.not-content *)) {
-	all: unset;
-	font-family: var(--__sl-font-mono);
-}
+	.sl-markdown-content pre code:not(:where(.not-content *)) {
+		all: unset;
+		font-family: var(--__sl-font-mono);
+	}
 
-.sl-markdown-content blockquote:not(:where(.not-content *)) {
-	border-inline-start: 1px solid var(--sl-color-gray-5);
-	padding-inline-start: 1rem;
-}
+	.sl-markdown-content blockquote:not(:where(.not-content *)) {
+		border-inline-start: 1px solid var(--sl-color-gray-5);
+		padding-inline-start: 1rem;
+	}
 
-/* Table styling */
-.sl-markdown-content table:not(:where(.not-content *)) {
-	display: block;
-	overflow: auto;
-	border-spacing: 0;
-}
-.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
-	border-bottom: 1px solid var(--sl-color-gray-5);
-	padding: 0.5rem 1rem;
-	/* Align text to the top of the row in multiline tables. */
-	vertical-align: baseline;
-}
-.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
-	padding-inline-start: 0;
-}
-.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
-	padding-inline-end: 0;
-}
-.sl-markdown-content th:not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-	font-weight: 600;
-}
-/* Align headings to the start of the line unless set by the `align` attribute. */
-.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
-	text-align: start;
-}
-/* <table>s, <hr>s, and <blockquote>s inside asides */
-.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
-	border-color: var(--sl-color-gray-4);
-}
-@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)) {
+	/* Table styling */
+	.sl-markdown-content table:not(:where(.not-content *)) {
+		display: block;
+		overflow: auto;
+		border-spacing: 0;
+	}
+	.sl-markdown-content :is(th, td):not(:where(.not-content *)) {
+		border-bottom: 1px solid var(--sl-color-gray-5);
+		padding: 0.5rem 1rem;
+		/* Align text to the top of the row in multiline tables. */
+		vertical-align: baseline;
+	}
+	.sl-markdown-content :is(th:first-child, td:first-child):not(:where(.not-content *)) {
+		padding-inline-start: 0;
+	}
+	.sl-markdown-content :is(th:last-child, td:last-child):not(:where(.not-content *)) {
+		padding-inline-end: 0;
+	}
+	.sl-markdown-content th:not(:where(.not-content *)) {
+		color: var(--sl-color-white);
+		font-weight: 600;
+	}
+	/* Align headings to the start of the line unless set by the `align` attribute. */
+	.sl-markdown-content th:not([align]):not(:where(.not-content *)) {
+		text-align: start;
+	}
+	/* <table>s, <hr>s, and <blockquote>s inside asides */
 	.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
-		border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent);
+		border-color: var(--sl-color-gray-4);
+	}
+	@supports (
+		border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent)
+	) {
+		.sl-markdown-content .starlight-aside :is(th, td, hr, blockquote):not(:where(.not-content *)) {
+			border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 30%, transparent);
+		}
 	}
-}
 
-/* <code> inside asides */
-@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)) {
-	.sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
-		background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
+	/* <code> inside asides */
+	@supports (
+		border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)
+	) {
+		.sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
+			background-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
+		}
 	}
-}
 
-.sl-markdown-content hr:not(:where(.not-content *)) {
-	border: 0;
-	border-bottom: 1px solid var(--sl-color-hairline);
-}
+	.sl-markdown-content hr:not(:where(.not-content *)) {
+		border: 0;
+		border-bottom: 1px solid var(--sl-color-hairline);
+	}
 
-/* <details> and <summary> styles */
-.sl-markdown-content details:not(:where(.not-content *)) {
-	--sl-details-border-color: var(--sl-color-gray-5);
-	--sl-details-border-color--hover: var(--sl-color-text-accent);
+	/* <details> and <summary> styles */
+	.sl-markdown-content details:not(:where(.not-content *)) {
+		--sl-details-border-color: var(--sl-color-gray-5);
+		--sl-details-border-color--hover: var(--sl-color-text-accent);
 
-	border-inline-start: 2px solid var(--sl-details-border-color);
-	padding-inline-start: 1rem;
-}
-.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
-.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
-	border-color: var(--sl-details-border-color--hover);
-}
-.sl-markdown-content summary:not(:where(.not-content *)) {
-	color: var(--sl-color-white);
-	cursor: pointer;
-	display: block; /* Needed to hide the default marker in some browsers. */
-	font-weight: 600;
-	/* Expand the outline so that the marker cannot distort it. */
-	margin-inline-start: -0.5rem;
-	padding-inline-start: 0.5rem;
-}
-.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
-	margin-bottom: 1rem;
-}
+		border-inline-start: 2px solid var(--sl-details-border-color);
+		padding-inline-start: 1rem;
+	}
+	.sl-markdown-content details:not([open]):hover:not(:where(.not-content *)),
+	.sl-markdown-content details:has(> summary:hover):not(:where(.not-content *)) {
+		border-color: var(--sl-details-border-color--hover);
+	}
+	.sl-markdown-content summary:not(:where(.not-content *)) {
+		color: var(--sl-color-white);
+		cursor: pointer;
+		display: block; /* Needed to hide the default marker in some browsers. */
+		font-weight: 600;
+		/* Expand the outline so that the marker cannot distort it. */
+		margin-inline-start: -0.5rem;
+		padding-inline-start: 0.5rem;
+	}
+	.sl-markdown-content details[open] > summary:not(:where(.not-content *)) {
+		margin-bottom: 1rem;
+	}
 
-/* <summary> marker styles */
-.sl-markdown-content summary:not(:where(.not-content *))::marker,
-.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
-	display: none;
-}
-.sl-markdown-content summary:not(:where(.not-content *))::before {
-	--sl-details-marker-size: 1.25rem;
-
-	background-color: currentColor;
-	content: '';
-	display: inline-block;
-	height: var(--sl-details-marker-size);
-	width: var(--sl-details-marker-size);
-	margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
-	vertical-align: middle;
-	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
-	-webkit-mask-repeat: no-repeat;
-	mask-repeat: no-repeat;
-}
-@media (prefers-reduced-motion: no-preference) {
+	/* <summary> marker styles */
+	.sl-markdown-content summary:not(:where(.not-content *))::marker,
+	.sl-markdown-content summary:not(:where(.not-content *))::-webkit-details-marker {
+		display: none;
+	}
 	.sl-markdown-content summary:not(:where(.not-content *))::before {
-		transition: transform 0.2s ease-in-out;
+		--sl-details-marker-size: 1.25rem;
+
+		background-color: currentColor;
+		content: '';
+		display: inline-block;
+		height: var(--sl-details-marker-size);
+		width: var(--sl-details-marker-size);
+		margin-inline: calc((var(--sl-details-marker-size) / 4) * -1) 0.25rem;
+		vertical-align: middle;
+		-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+		mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14.8 11.3 10.6 7a1 1 0 1 0-1.4 1.5l3.5 3.5-3.5 3.5a1 1 0 0 0 0 1.4 1 1 0 0 0 .7.3 1 1 0 0 0 .7-.3l4.2-4.2a1 1 0 0 0 0-1.4Z'/%3E%3C/svg%3E%0A");
+		-webkit-mask-repeat: no-repeat;
+		mask-repeat: no-repeat;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.sl-markdown-content summary:not(:where(.not-content *))::before {
+			transition: transform 0.2s ease-in-out;
+		}
+	}
+	.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
+		transform: rotateZ(90deg);
+	}
+	[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
+	.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
+		transform: rotateZ(180deg);
+	}
+	/* <summary> with only a paragraph automatically added when using MDX */
+	.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
+		display: inline;
 	}
-}
-.sl-markdown-content details[open] > summary:not(:where(.not-content *))::before {
-	transform: rotateZ(90deg);
-}
-[dir='rtl'] .sl-markdown-content summary:not(:where(.not-content *))::before,
-.sl-markdown-content [dir='rtl'] summary:not(:where(.not-content *))::before {
-	transform: rotateZ(180deg);
-}
-/* <summary> with only a paragraph automatically added when using MDX */
-.sl-markdown-content summary:not(:where(.not-content *)) p:only-child {
-	display: inline;
-}
 
-/* <details> styles inside asides */
-.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
-	--sl-details-border-color: var(--sl-color-asides-border);
-	--sl-details-border-color--hover: var(--sl-color-asides-text-accent);
+	/* <details> styles inside asides */
+	.sl-markdown-content .starlight-aside details:not(:where(.not-content *)) {
+		--sl-details-border-color: var(--sl-color-asides-border);
+		--sl-details-border-color--hover: var(--sl-color-asides-text-accent);
+	}
 }

package/style/print.css

@@ -1,10 +1,5 @@
 @media print {
-	/**
-	This is increased in specificity so it works even when injected into pages before regular styles.
-	TODO: Just use `:root` once we move to @layer.
-	Same goes for the use of `!important` in this file.
-	*/
-	:root[data-theme]:is(:root) {
+	:root {
 		/* Colours — force light mode when printing */
 		--sl-color-white: hsl(224, 10%, 10%);
 		--sl-color-gray-1: hsl(224, 14%, 16%);
@@ -55,28 +50,28 @@
 
 	/* Utility classes for controlling element visibility when printing. */
 	.print\:hidden {
-		display: none !important;
+		display: none;
 	}
 	.print\:flex {
-		display: flex !important;
+		display: flex;
 	}
 	.print\:block {
-		display: block !important;
+		display: block;
 	}
 
 	/* Page layout tweaks. */
 	main {
-		padding-bottom: 0 !important;
+		padding-bottom: 0;
 	}
 	main > .content-panel {
-		padding-block-start: 0 !important;
+		padding-block-start: 0;
 	}
 	.content-panel + .content-panel {
-		border: 0 !important;
+		border: 0;
 	}
 	/* components/PageFrame.astro */
 	.page > header {
-		position: relative !important;
+		position: relative;
 	}
 	.page > .main-frame {
 		padding-top: 0;
@@ -84,13 +79,13 @@
 	}
 	/* components/TwoColumnContent.astro */
 	.main-pane {
-		--sl-sidebar-width: 0px !important;
-		--sl-content-width: 100% !important;
+		--sl-sidebar-width: 0px;
+		--sl-content-width: 100%;
 	}
 	/* components/Banner.astro */
 	.sl-banner {
-		--sl-color-banner-text: var(--sl-color-white) !important;
-		background-color: transparent !important;
+		--sl-color-banner-text: var(--sl-color-white);
+		background-color: transparent;
 	}
 
 	/* components/MarkdownContent.astro */
@@ -102,8 +97,8 @@
 		widows: 2;
 	}
 	.sl-markdown-content pre {
-		overflow-x: hidden !important;
-		white-space: pre-wrap !important;
+		overflow-x: hidden;
+		white-space: pre-wrap;
 	}
 	.sl-markdown-content .expressive-code,
 	.sl-markdown-content figure,
@@ -116,33 +111,33 @@
 	}
 	.expressive-code .frame.has-title:not(.is-terminal) .header {
 		/* Divide title bar and code without relying on background colors. */
-		background: transparent !important;
-		border-bottom: 1px solid var(--sl-color-gray-6) !important;
+		background: transparent;
+		border-bottom: 1px solid var(--sl-color-gray-6);
 	}
 	.expressive-code .frame.has-title:not(.is-terminal) .title {
 		/* Hide title tab background color. */
-		background: transparent !important;
+		background: transparent;
 	}
 	.expressive-code .frame.has-title:not(.is-terminal) .title::after {
 		/* Remove title tab highlight. */
-		border-top: 0 !important;
+		border-top: 0;
 	}
 	.expressive-code .copy {
 		/* Ensure Expressive Code copy button is hidden when printing from touch devices. */
-		display: none !important;
+		display: none;
 	}
 	/* Inline code */
 	.sl-markdown-content code:not(:where(.not-content *)) {
-		background-color: transparent !important;
-		padding: 0 !important;
-		margin-block: unset !important;
-		font-size: 0.9375em !important;
+		background-color: transparent;
+		padding: 0;
+		margin-block: unset;
+		font-size: 0.9375em;
 	}
 
 	/* user-components/Badge.astro */
 	.sl-badge {
-		background: transparent !important;
-		color: var(--sl-color-white) !important;
+		background: transparent;
+		color: var(--sl-color-white);
 	}
 
 	/* user-components/FileTree.astro */
@@ -151,8 +146,8 @@
 	}
 	starlight-file-tree .highlight {
 		outline: 3px solid var(--sl-color-accent-low);
-		color: var(--sl-color-text) !important;
-		background-color: transparent !important;
+		color: var(--sl-color-text);
+		background-color: transparent;
 	}
 
 	/* user-components/Aside.astro */
@@ -162,9 +157,9 @@
 
 	/* user-components/LinkButton.astro */
 	.sl-link-button.primary {
-		background: transparent !important;
-		border-color: var(--sl-color-white) !important;
-		color: var(--sl-color-white) !important;
+		background: transparent;
+		border-color: var(--sl-color-white);
+		color: var(--sl-color-white);
 	}
 
 	/* user-components/Tabs.astro */