withastro · tony-sull · Jun 5, 2023 · Jun 5, 2023 · Jun 5, 2023 · Jun 5, 2023
diff --git a/packages/starlight/components/EditLink.astro b/packages/starlight/components/EditLink.astro
@@ -26,7 +26,7 @@ const url =
 
 {
   editUrl !== false && url && (
-    <a href={url} class="flex">
+    <a href={url} class="flex print:hidden">
       <Icon name="pencil" size="1.2em" />
       {t('page.editLink')}
     </a>

diff --git a/packages/starlight/components/Header.astro b/packages/starlight/components/Header.astro
@@ -15,7 +15,7 @@ const { locale } = Astro.props;
 <div class="header flex">
   <SiteTitle {locale} />
   <Search {locale} />
-  <div class="hidden md:flex right-group">
+  <div class="hidden md:flex print:hidden right-group">
     <SocialIcons />
     <ThemeSelect {locale} />
     <LanguageSelect {locale} />

diff --git a/packages/starlight/components/MobileMenuToggle.astro b/packages/starlight/components/MobileMenuToggle.astro
@@ -9,7 +9,7 @@ interface Props {
 const t = useTranslations(Astro.props.locale);
 ---
 
-<starlight-menu-button>
+<starlight-menu-button class="print:hidden">
   <button
     aria-expanded="false"
     aria-label={t('menuButton.accessibleLabel')}

diff --git a/packages/starlight/components/PrevNextLinks.astro b/packages/starlight/components/PrevNextLinks.astro
@@ -15,7 +15,7 @@ const isRtl = dir === 'rtl';
 const t = useTranslations(locale);
 ---
 
-<div class="pagination-links flex" dir={dir}>
+<div class="pagination-links flex print:hidden" dir={dir}>
   {
     prev && (
       <a href={prev.href} rel="prev">

diff --git a/packages/starlight/components/Search.astro b/packages/starlight/components/Search.astro
@@ -19,7 +19,7 @@ const pagefindTranslations = {
 };
 ---
 
-<site-search data-translations={JSON.stringify(pagefindTranslations)}>
+<site-search data-translations={JSON.stringify(pagefindTranslations)} class="print:hidden">
   <button data-open-modal disabled>
     {
       /* The span is `aria-hidden` because it is not shown on small screens. Instead, the icon label is used for accessibility purposes. */

diff --git a/packages/starlight/components/Sidebar.astro b/packages/starlight/components/Sidebar.astro
@@ -12,7 +12,7 @@ interface Props {
 const { sidebar, locale } = Astro.props;
 ---
 
-<div class="sidebar flex">
+<div class="sidebar flex print:hidden">
   <SidebarSublist sublist={sidebar} />
   <div class="mobile-preferences flex md:hidden">
     <ThemeSelect {locale} />

diff --git a/packages/starlight/components/SiteTitle.astro b/packages/starlight/components/SiteTitle.astro
@@ -31,7 +31,7 @@ const href = pathWithBase(Astro.props.locale || '/');
     config.logo && logos.dark && (
       <>
         <img
-          class:list={{ 'dark-only': !('src' in config.logo) }}
+          class:list={{ 'dark-only print:hidden': !('src' in config.logo) }}
           alt={config.logo.alt}
           src={logos.dark.src}
           width={logos.dark.width}
@@ -40,7 +40,7 @@ const href = pathWithBase(Astro.props.locale || '/');
         {/* Show light alternate if a user configure both light and dark logos. */}
         {!('src' in config.logo) && (
           <img
-            class="light-only"
+            class="light-only print:block"
             alt={config.logo.alt}
             src={logos.light?.src}
             width={logos.light?.width}

diff --git a/packages/starlight/components/TableOfContents/MobileTableOfContents.astro b/packages/starlight/components/TableOfContents/MobileTableOfContents.astro
@@ -16,7 +16,7 @@ const t = useTranslations(locale);
 ---
 
 <mobile-starlight-toc data-min-h={minHeadingLevel} data-max-h={maxHeadingLevel}>
-  <nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden">
+  <nav aria-labelledby="starlight__on-this-page--mobile" class="lg:hidden print:hidden">
     <details id="starlight__mobile-toc">
       <summary id="starlight__on-this-page--mobile" class="flex">
         <div class="toggle flex">

diff --git a/packages/starlight/index.astro b/packages/starlight/index.astro
@@ -32,6 +32,8 @@ 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';
+
 export async function getStaticPaths() {
   return paths;
 }
@@ -54,6 +56,7 @@ const hasHero = Boolean(entry.data.hero);
 
 <html lang={lang} dir={dir} data-has-toc={hasToC} data-has-sidebar={hasSidebar} data-has-hero={hasHero}>
   <head>
+    <link rel="stylesheet" href={printHref} media="print">
     <HeadSEO data={entry.data} lang={lang} />
     <style>
       html:not([data-has-toc]) {

diff --git a/packages/starlight/layout/PageFrame.astro b/packages/starlight/layout/PageFrame.astro
@@ -15,7 +15,7 @@ const t = useTranslations(locale);
   <header class="header"><slot name="header" /></header>
   {
     hasSidebar && (
-      <nav class="sidebar" aria-label={t('sidebarNav.accessibleLabel')}>
+      <nav class="sidebar print:hidden" aria-label={t('sidebarNav.accessibleLabel')}>
         <MobileMenuToggle {locale} />
         <div id="starlight__sidebar" class="sidebar-pane">
           <div class="sidebar-content">

diff --git a/packages/starlight/layout/TwoColumnContent.astro b/packages/starlight/layout/TwoColumnContent.astro
@@ -7,7 +7,7 @@ interface Props {
 <div class="lg:flex">
   {
     Astro.props.hasToC && (
-      <aside class="right-sidebar-container">
+      <aside class="right-sidebar-container print:hidden">
         <div class="right-sidebar">
           <slot name="right-sidebar" />
         </div>

diff --git a/packages/starlight/style/print.css b/packages/starlight/style/print.css
@@ -0,0 +1,91 @@
+:root,
+::backdrop {
+  /* Colours (light mode) */
+  --sl-color-white: hsl(223, 13%, 10%) !important;
+  --sl-color-gray-1: hsl(222, 13%, 16%) !important;
+  --sl-color-gray-2: hsl(222, 11%, 23%) !important;
+  --sl-color-gray-3: hsl(225, 9%, 36%) !important;
+  --sl-color-gray-4: hsl(221, 8%, 56%) !important;
+  --sl-color-gray-5: hsl(228, 8%, 77%) !important;
+  --sl-color-gray-6: hsl(231, 23%, 94%) !important;
+  --sl-color-gray-7: hsl(240, 20%, 97%) !important;
+  --sl-color-black: hsl(0, 0%, 100%) !important;
+
+  --sl-color-orange-high: hsl(var(--sl-hue-orange), 80%, 25%) !important;
+  --sl-color-orange: hsl(var(--sl-hue-orange), 90%, 60%) !important;
+  --sl-color-orange-low: hsl(var(--sl-hue-orange), 90%, 88%) !important;
+  --sl-color-green-high: hsl(var(--sl-hue-green), 80%, 22%) !important;
+  --sl-color-green: hsl(var(--sl-hue-green), 90%, 46%) !important;
+  --sl-color-green-low: hsl(var(--sl-hue-green), 85%, 90%) !important;
+  --sl-color-blue-high: hsl(var(--sl-hue-blue), 80%, 30%) !important;
+  --sl-color-blue: hsl(var(--sl-hue-blue), 90%, 60%) !important;
+  --sl-color-blue-low: hsl(var(--sl-hue-blue), 88%, 90%) !important;
+  --sl-color-purple-high: hsl(var(--sl-hue-purple), 39%, 30%) !important;
+  --sl-color-purple: hsl(var(--sl-hue-purple), 90%, 60%) !important;
+  --sl-color-purple-low: hsl(var(--sl-hue-purple), 80%, 90%) !important;
+  --sl-color-red-high: hsl(var(--sl-hue-red), 80%, 30%) !important;
+  --sl-color-red: hsl(var(--sl-hue-red), 90%, 60%) !important;
+  --sl-color-red-low: hsl(var(--sl-hue-red), 80%, 90%) !important;
+
+  --sl-color-accent-high: hsl(var(--sl-hue-accent), 80%, 30%) !important;
+  --sl-color-accent: hsl(var(--sl-hue-accent), 90%, 60%) !important;
+  --sl-color-accent-low: hsl(var(--sl-hue-accent), 88%, 90%) !important;
+
+  --sl-color-text-accent: var(--sl-color-accent) !important;
+  --sl-color-text-invert: var(--sl-color-black) !important;
+  --sl-color-bg-nav: var(--sl-color-gray-7) !important;
+  --sl-color-bg-sidebar: var(--sl-color-bg) !important;
+  --sl-color-bg-inline-code: var(--sl-color-gray-6) !important;
+  --sl-color-hairline-shade: var(--sl-color-gray-6) !important;
+
+  --sl-color-backdrop-overlay: hsla(225, 9%, 36%, 0.66) !important;
+
+  /* Shadows (light mode) */
+  --sl-shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06),
+    0px 2px 1px hsla(0, 0%, 0%, 0.06) !important;
+  --sl-shadow-md: 0px 8px 4px hsla(0, 0%, 0%, 0.03),
+    0px 5px 2px hsla(0, 0%, 0%, 0.03), 0px 3px 2px hsla(0, 0%, 0%, 0.06),
+    0px 1px 1px hsla(0, 0%, 0%, 0.06) !important;
+  --sl-shadow-lg: 0px 25px 7px rgba(0, 0, 0, 0.01),
+    0px 16px 6px hsla(0, 0%, 0%, 0.03), 0px 9px 5px hsla(223, 13%, 10%, 0.08),
+    0px 4px 4px hsla(0, 0%, 0%, 0.16), 0px 4px 2px hsla(0, 0%, 0%, 0.04) !important;
+}
+
+.print\:hidden {
+  display: none !important;
+}
+.print\:flex {
+  display: flex !important;
+}
+.print\:block {
+  display: block !important;
+}
+
+/* index.astro */
+main {
+  padding-bottom: 0 !important;
+}
+main > .content-panel {
+  padding-block-start: 0 !important;
+}
+
+/* components/MarkdownContent.astro */
+.content pre {
+  overflow-x: hidden !important;
+  white-space: pre-wrap !important;
+  page-break-inside: avoid;
+}
+
+/* layout/PageFrame.astro */
+.page > header {
+  position: relative !important;
+}
+.page > .main-frame {
+  padding-inline-start: 0 !important;
+}
+
+/* layout/TwoColumnContent.astro */
+.main-pane {
+  --sl-sidebar-width: 0px !important;
+  --sl-content-width: 100% !important;
+}