starlight-theme-celestia 0.2.0

package/lib/aside.css

@@ -0,0 +1,13 @@
+.starlight-aside {
+  border: 1px solid var(--sl-color-asides-border);
+  border-radius: 0.5rem;
+}
+
+.starlight-aside,
+.starlight-aside a {
+  color: color-mix(in srgb, var(--sl-color-asides-text-accent) 50%, var(--sl-color-white));
+}
+
+.starlight-aside a:is(:hover, :focus-visible) {
+  color: var(--sl-color-asides-text-accent);
+}

package/lib/badge.css

@@ -0,0 +1,23 @@
+.sl-badge {
+  --sl-badge-default-border: var(--sl-color-accent);
+  --sl-badge-default-bg: var(--sl-color-accent-low);
+  --sl-badge-default-text: var(--sl-color-accent-high);
+  --sl-badge-tip-text: var(--sl-color-purple-high);
+  --sl-badge-caution-text: var(--sl-color-orange-high);
+  --sl-badge-note-text: var(--sl-color-blue-high);
+  --sl-badge-success-text: var(--sl-color-green-high);
+  --sl-badge-danger-text: var(--sl-color-red-high);
+}
+
+[data-theme="light"] .sl-badge {
+  --sl-badge-tip-bg: var(--sl-color-purple-low);
+  --sl-badge-tip-text: var(--sl-color-purple-high);
+  --sl-badge-caution-bg: var(--sl-color-orange-low);
+  --sl-badge-caution-text: var(--sl-color-orange-high);
+  --sl-badge-note-bg: var(--sl-color-blue-low);
+  --sl-badge-note-text: var(--sl-color-blue-high);
+  --sl-badge-success-bg: var(--sl-color-green-low);
+  --sl-badge-success-text: var(--sl-color-green-high);
+  --sl-badge-danger-bg: var(--sl-color-red-low);
+  --sl-badge-danger-text: var(--sl-color-red-high);
+}

package/lib/card.css

@@ -0,0 +1,42 @@
+.sl-markdown-content .card-grid.stagger {
+  --stagger-height: 2.5rem;
+}
+
+.sl-markdown-content .card {
+  --sl-text-h1: var(--sl-text-4xl);
+  --sl-text-h2: var(--sl-text-3xl);
+  --sl-text-h3: var(--sl-text-2xl);
+  --sl-text-h4: var(--sl-text-xl);
+  --sl-text-h5: var(--sl-text-lg);
+
+  border-radius: 0.5rem;
+  padding: clamp(1rem, calc(0.125rem + 1.5vw), 2.5rem);
+}
+
+.sl-markdown-content .card .title .icon {
+  font-size: 1.875rem;
+}
+
+.sl-markdown-content .sl-link-card {
+  box-shadow: none;
+}
+
+.sl-markdown-content .sl-link-card:hover {
+  background: initial;
+}
+
+.sl-markdown-content .sl-link-card .title {
+  color: var(--sl-color-white);
+}
+
+.sl-markdown-content .sl-link-card .description {
+  color: var(--sl-color-gray-3);
+}
+
+.sl-markdown-content .sl-link-card:is(:hover, :focus-visible) .description {
+  color: var(--sl-color-gray-2);
+}
+
+.sl-markdown-content .sl-link-card .icon {
+  color: var(--sl-color-gray-2);
+}

package/lib/fonts.css

@@ -0,0 +1,4 @@
+@import "@fontsource/inter/latin-400.css";
+@import "@fontsource/inter/latin-500.css";
+@import "@fontsource/inter/latin-600.css";
+@import "@fontsource/inter/latin-700.css";

package/lib/layer.css

@@ -0,0 +1,31 @@
+@layer base, starlight, celestia, theme, components, utilities;
+
+:root,
+::backdrop {
+  font-size: 14px;
+  --sl-text-body: 0.9rem;
+  --sl-text-h1: 1.45rem;
+  --sl-text-h2: 1.2rem;
+  --sl-text-h3: 1.05rem;
+  --sl-text-h4: 0.95rem;
+  --sl-text-h5: 0.85rem;
+  --sl-text-h6: 0.8rem;
+  --sl-text-code: 0.8rem;
+  --sl-text-code-sm: 0.75rem;
+
+  --celestia-secondary-light: #c2410c;
+  --celestia-secondary-dark: #fb923c;
+}
+
+/* Dark mode accents — must load first to prevent flash */
+:root {
+  --sl-color-accent-low: color-mix(in oklch, #fb923c 15%, #030712);
+  --sl-color-accent: #fb923c;
+  --sl-color-accent-high: #fb923c;
+}
+
+:root[data-theme="light"] {
+  --sl-color-accent-low: color-mix(in oklch, #c2410c 10%, #f3f4f6);
+  --sl-color-accent: #c2410c;
+  --sl-color-accent-high: #c2410c;
+}

package/lib/markdown.css

@@ -0,0 +1,71 @@
+.sl-markdown-content {
+  /* Style the Markdown heading links. */
+  :is(h1, h2, h3, h4, h5, h6):not(:where(.not-content *)) > a {
+    color: var(--sl-color-white);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  ul:not(:where(.not-content *)):not(.sl-steps) {
+    padding-inline-start: 1.6em;
+
+    & > li:not(.task-list-item):not(:where(.not-content *)) {
+      list-style-type: disc;
+      list-style-position: outside;
+      padding-inline-start: 0.3em;
+    }
+
+    & > li.task-list-item:not(:where(.not-content *)) {
+      list-style-type: none;
+      padding-inline-start: 0.3em;
+      position: relative;
+
+      > input[type="checkbox"] {
+        position: absolute;
+        left: -1.1em;
+        top: 0.6em;
+      }
+    }
+  }
+
+  ol:not(:where(.not-content *)):not(.sl-steps) {
+    padding-inline-start: 1.6em;
+
+    & > li:not(:where(.not-content *)) {
+      list-style-type: decimal;
+      list-style-position: outside;
+      padding-inline-start: 0.3em;
+    }
+  }
+
+  code:not(:where(.not-content *)) {
+    border-radius: 0.25rem;
+    border-style: solid;
+    border-width: 1px;
+    border-color: var(--sl-color-border-inline-code);
+    padding: 0.125rem 0.25rem;
+  }
+
+  a:not(:where(.not-content *)) {
+    text-underline-offset: 0.25em;
+    text-decoration: underline;
+  }
+
+  /* Rounded images with subtle shadow */
+  img:not(:where(.not-content *)) {
+    border-radius: 0.5rem;
+    box-shadow:
+      0 1px 3px 0 rgb(0 0 0 / 0.1),
+      0 1px 2px -1px rgb(0 0 0 / 0.1);
+  }
+}
+
+/* <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 *)) {
+    border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
+  }
+}

package/lib/shiki.css

@@ -0,0 +1,79 @@
+@import "shiki-twoslash-renderer/style.css";
+
+.sl-markdown-content .astro-code {
+  padding: 0;
+  font-size: 0.875rem;
+  border-radius: 0.5rem;
+  overflow-x: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--sl-color-gray-5);
+
+  & > code {
+    display: grid;
+    align-items: stretch;
+    overflow-x: hidden;
+    padding: 0.75rem 0;
+    box-sizing: border-box;
+    min-width: min-content;
+  }
+
+  .line {
+    min-height: 1lh;
+    margin-left: 0;
+    margin-right: 0;
+    padding-left: 1rem;
+    padding-right: 1rem;
+    display: inline-block;
+    flex: 1;
+    flex-grow: 1;
+    width: 100%;
+    min-width: min-content;
+  }
+
+  .line.highlighted,
+  .line.diff.add,
+  .line.diff.remove {
+    display: inline-block;
+  }
+
+  .line.highlighted {
+    background-color: var(--nano-color-highlight);
+  }
+
+  .line.diff.add {
+    background-color: var(--sl-color-green-low);
+  }
+
+  .line.diff.remove {
+    background-color: var(--sl-color-red-low);
+  }
+
+  .highlighted-word {
+    border-radius: 0.25rem;
+    border-color: var(--sl-color-gray-5);
+    border-style: solid;
+    border-width: 1px;
+    padding: 0 0.125rem;
+  }
+}
+
+.astro-code,
+.astro-code span {
+  color: var(--shiki-light);
+  font-style: var(--shiki-light-font-style);
+  font-weight: var(--shiki-light-font-weight);
+  text-decoration: var(--shiki-light-text-decoration);
+}
+
+html[data-theme="dark"] .astro-code,
+html[data-theme="dark"] .astro-code span {
+  color: var(--shiki-dark);
+  font-style: var(--shiki-dark-font-style);
+  font-weight: var(--shiki-dark-font-weight);
+  text-decoration: var(--shiki-dark-text-decoration);
+}

package/lib/styles.css

@@ -0,0 +1,6 @@
+@import "./fonts.css";
+@import "./markdown.css" layer(celestia);
+@import "./shiki.css" layer(celestia);
+@import "./aside.css" layer(celestia);
+@import "./badge.css" layer(celestia);
+@import "./card.css" layer(celestia);

package/lib/tailwind.build.css

@@ -0,0 +1,2 @@
+@import "tailwindcss";
+@import "./tailwind.css";

package/lib/tailwind.css

@@ -0,0 +1,29 @@
+@source '../src/**/*.ts';
+@source '../src/**/*.astro';
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+
+@theme {
+  /*
+    Match Starlight breakpoints
+    https://github.com/withastro/starlight/blob/893be3b4a106ab75b706142bbd06b00268ccc298/packages/starlight/style/util.css#L22-L43
+  */
+  --breakpoint-md: 50rem;
+  --breakpoint-lg: 72rem;
+}
+
+@layer utilities {
+  /* Wire up Starlight theme to use Tailwind config. */
+  :root {
+    --sl-font-mono: var(--font-mono);
+  }
+}
+
+@utility celestia-scroll-container {
+  scrollbar-width: thin;
+  scrollbar-color: var(--sl-color-gray-5) transparent;
+}
+
+.sl-markdown-content .code-tabs .tablist-wrapper {
+  @apply celestia-scroll-container;
+}