svelte-readme 4.1.0 → 4.2.0

package/dist/layout.css

@@ -1,5 +1,7 @@
 .code-fence {
-  padding: 1.5rem 0.9375rem;
+  padding: 1.5rem var(--sr-box-padding);
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
   border: 1px solid var(--sr-color-border-muted);
   border-bottom: 0;
   overflow-x: auto;
@@ -8,7 +10,7 @@
 .sr-layout {
   display: grid;
   grid-template-columns: 11.25rem minmax(0, 60rem) 11.25rem;
-  column-gap: 2.5rem;
+  column-gap: 3.125rem;
   max-width: 87.5rem;
   margin: 0 auto;
   padding: 2.8125rem;
@@ -25,7 +27,7 @@ main.markdown-body {
    (mobile) — only one of the two is ever visible at a given viewport width. */
 .sr-toc {
   font-family: var(--sr-font-sans);
-  font-size: 0.75rem;
+  font-size: var(--sr-text-xs);
   color: var(--sr-color-fg-muted);
 }
 
@@ -53,11 +55,48 @@ main.markdown-body {
 }
 
 .sr-toc a.sr-toc-active {
-  color: var(--sr-color-fg);
-  font-weight: 600;
+  color: var(--sr-color-link);
   text-decoration: underline;
 }
 
+/* Rendered as the first child of both `.sr-toc` variants (sidebar and inline),
+   so it always sits directly above whichever TOC copy is visible at the current
+   viewport width. */
+.sr-theme-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.75rem;
+  height: 1.75rem;
+  margin-bottom: 0.75rem;
+  padding: 0;
+  color: var(--sr-color-fg-muted);
+  cursor: pointer;
+  appearance: none;
+  background-color: var(--sr-color-canvas);
+  border: 1px solid var(--sr-color-border);
+  border-radius: 0.375rem;
+}
+
+.sr-theme-toggle:hover {
+  color: var(--sr-color-fg);
+}
+
+/* Same specificity trick as `.sr-copy-icon`/`.sr-copy-check` in `style.css`: one
+   class each, so source order (not selector specificity) decides which icon shows
+   before `data-sr-theme` flips it. */
+.sr-theme-icon-moon {
+  display: none;
+}
+
+:root[data-sr-theme="dark"] .sr-theme-icon-sun {
+  display: none;
+}
+
+:root[data-sr-theme="dark"] .sr-theme-icon-moon {
+  display: block;
+}
+
 .sr-toc-sidebar {
   grid-column: 3;
   min-width: 0;
@@ -66,7 +105,7 @@ main.markdown-body {
   top: 0;
   align-self: stretch;
   max-height: 100vh;
-  padding: 2rem 0;
+  padding: 1.5rem 0 2rem;
   overflow-y: auto;
 }
 
@@ -78,6 +117,10 @@ main.markdown-body p {
   max-width: 52ch;
 }
 
+main.markdown-body blockquote p {
+  max-width: none;
+}
+
 /* Between the mobile breakpoint and the full desktop width, the fixed-width empty
    spacer column wastes space and pushes content off-center for no reason — drop it
    and let content use the freed-up width, keeping only the sticky TOC column.
@@ -99,6 +142,15 @@ main.markdown-body p {
 }
 
 @media (max-width: 900px) {
+  /* The desktop scale's upper steps (tuned for a wide text column) read as
+     oversized against a narrow mobile viewport — h1 in particular dwarfs the
+     content below it — so the top of the scale is compressed here. */
+  :root {
+    --sr-text-xl: 1.25rem;
+    --sr-text-2xl: 1.5rem;
+    --sr-text-3xl: 1.875rem;
+  }
+
   .sr-layout {
     grid-template-columns: 1fr;
     padding: 0.9375rem;
@@ -116,4 +168,25 @@ main.markdown-body p {
     display: block;
     margin-bottom: var(--sr-spacing-lg);
   }
+
+  /* The desktop bleed (negative margin equal to the box's own padding) assumes
+     room in the gutter outside the text column to bleed into. On mobile there's
+     no gutter — the layout padding above is already tight — so bleeding here would
+     just push these boxes past the viewport edge instead of aligning them. */
+  main.markdown-body table,
+  main.markdown-body pre,
+  main.markdown-body .sr-code-block,
+  main.markdown-body .code-fence,
+  main.markdown-body details {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  /* `table`'s desktop `width: fit-content` can still exceed the viewport here if a
+     cell's content can't wrap below some minimum width (e.g. a long unbroken
+     string) — cap it so the table's own horizontal scrollbar handles the overflow
+     instead of the page growing wider than the viewport. */
+  main.markdown-body table {
+    max-width: 100%;
+  }
 }

package/dist/shared.css

@@ -22,3 +22,24 @@
 .token.boolean {
   color: #005cc5;
 }
+
+:root[data-sr-theme="dark"] .token.keyword,
+:root[data-sr-theme="dark"] .token.operator {
+  color: #ff7b72;
+}
+:root[data-sr-theme="dark"] .token.punctuation {
+  color: #c9d1d9;
+}
+:root[data-sr-theme="dark"] .token.comment {
+  color: #8b949e;
+}
+:root[data-sr-theme="dark"] .token.function {
+  color: #d2a8ff;
+}
+:root[data-sr-theme="dark"] .token.string {
+  color: #a5d6ff;
+}
+:root[data-sr-theme="dark"] .token.number,
+:root[data-sr-theme="dark"] .token.boolean {
+  color: #79c0ff;
+}

package/dist/style.css

@@ -36,8 +36,63 @@
   --sr-color-border-table: #d4d4d8;
   --sr-color-hr: #e4e4e7;
 
-  --sr-spacing: 1.25rem;
-  --sr-spacing-lg: 2rem;
+  /* Glossy top-edge highlight on the code-fence/copy button and `summary`'s bevel
+     (see `.code-fence button`/`summary` below) — a fixed white reads as a subtle sheen
+     on the light canvas but as a harsh glowing line once the surface behind it goes
+     dark, so it's a variable rather than a literal `rgba(255, 255, 255, 0.6)`. */
+  --sr-color-bevel-highlight: rgba(255, 255, 255, 0.6);
+
+  --sr-spacing: 1.5rem;
+  --sr-spacing-lg: 2.5rem;
+  --sr-spacing-xl: 4rem;
+  --sr-box-padding: 1rem;
+
+  --sr-text-2xs: 0.6875rem;
+  --sr-text-xs: 0.75rem;
+  --sr-text-sm: 0.8125rem;
+  --sr-text-base: 0.875rem;
+  --sr-text-lg: 1.125rem;
+  --sr-text-xl: 1.375rem;
+  --sr-text-2xl: 1.75rem;
+  --sr-text-3xl: 2.5rem;
+
+  /* Declared here (rather than on `body`) so `purgeUnusedCss` — which only checks
+     tags/classes/attrs actually present in the server-rendered markup — has no reason
+     to strip it: `:root` has no selector to verify and is always kept, while `body`
+     never literally appears in Svelte's SSR output (which renders only what's inside
+     it). `<html>`'s background still paints the full viewport per the CSS spec's
+     canvas-background propagation, same as if this were set on `body`. */
+  background-color: var(--sr-color-canvas);
+
+  /* Tells the browser which palette this page actually uses, so native chrome that
+     isn't styled by the rules below — form controls, the scrollbar, `<select>`
+     dropdowns — switches to match instead of rendering a light widget on a dark page. */
+  color-scheme: light;
+}
+
+/* Set on `<html>` before first paint by the inline script in the HTML template
+   (see `THEME_INIT_SCRIPT` in `svelteReadme.ts`), so this never flashes the light
+   palette before switching to dark. */
+:root[data-sr-theme="dark"] {
+  --sr-color-fg: #e4e4e7;
+  --sr-color-fg-muted: #a1a1aa;
+  --sr-color-fg-subtle: #d4d4d8;
+  --sr-color-link: #a5b4fc;
+
+  --sr-color-canvas: #18181b;
+  --sr-color-canvas-subtle: #27272a;
+  --sr-color-kbd-bg: #26262b;
+  --sr-color-code-bg: rgba(255, 255, 255, 0.08);
+
+  --sr-color-border: #3f3f46;
+  --sr-color-border-muted: #313136;
+  --sr-color-border-kbd: #52525b;
+  --sr-color-border-table: #52525b;
+  --sr-color-hr: #3f3f46;
+
+  --sr-color-bevel-highlight: rgba(255, 255, 255, 0.06);
+
+  color-scheme: dark;
 }
 
 .anchor {
@@ -66,7 +121,7 @@ main {
   line-height: 1.5;
   color: var(--sr-color-fg);
   font-family: var(--sr-font-sans);
-  font-size: 0.9375rem;
+  font-size: var(--sr-text-base);
   word-wrap: break-word;
 }
 
@@ -91,11 +146,6 @@ strong {
   font-weight: bolder;
 }
 
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
 img {
   border-style: none;
 }
@@ -186,7 +236,7 @@ details summary {
 kbd {
   display: inline-block;
   padding: 0.1875rem 0.3125rem;
-  font: 0.6875rem var(--sr-font-mono);
+  font: var(--sr-text-2xs) var(--sr-font-mono);
   line-height: 0.625rem;
   color: var(--sr-color-fg-subtle);
   vertical-align: middle;
@@ -196,55 +246,6 @@ kbd {
   box-shadow: inset 0 -1px 0 var(--sr-color-border-kbd);
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-h1 {
-  font-size: 2rem;
-}
-
-h1,
-h2 {
-  font-weight: 600;
-}
-
-h2 {
-  font-size: 1.5rem;
-}
-
-h3 {
-  font-size: 1.25rem;
-}
-
-h3,
-h4 {
-  font-weight: 600;
-}
-
-h4 {
-  font-size: 1rem;
-}
-
-h5 {
-  font-size: 0.875rem;
-}
-
-h5,
-h6 {
-  font-weight: 600;
-}
-
-h6 {
-  font-size: 0.75rem;
-}
-
 p {
   margin-top: 0;
   margin-bottom: 0.625rem;
@@ -280,7 +281,6 @@ dd {
 code,
 pre {
   font-family: var(--sr-font-mono);
-  font-size: 0.75rem;
 }
 
 pre {
@@ -377,33 +377,28 @@ h6 {
 }
 
 h1 {
-  font-size: 2em;
-}
-
-h1,
-h2 {
-  padding-bottom: 0.3em;
-  border-bottom: 1px solid var(--sr-color-border-muted);
+  font-size: var(--sr-text-3xl);
 }
 
 h2 {
-  font-size: 1.5em;
+  margin-top: var(--sr-spacing-xl);
+  font-size: var(--sr-text-2xl);
 }
 
 h3 {
-  font-size: 1.25em;
+  font-size: var(--sr-text-xl);
 }
 
 h4 {
-  font-size: 1em;
+  font-size: var(--sr-text-lg);
 }
 
 h5 {
-  font-size: 0.875em;
+  font-size: var(--sr-text-sm);
 }
 
 h6 {
-  font-size: 0.85em;
+  font-size: var(--sr-text-xs);
   color: var(--sr-color-fg-muted);
 }
 
@@ -413,11 +408,18 @@ ul {
 }
 
 ol ol,
-ol ul,
+ol ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* A numbered sub-list (above) reads as a continuation of its parent's sequence —
+   tight to its own numbering flow. A bulleted sub-list is a categorical grouping,
+   so it gets the extra bottom margin to set it apart from the next category. */
 ul ol,
 ul ul {
   margin-top: 0;
-  margin-bottom: 0;
+  margin-bottom: var(--sr-spacing);
 }
 
 li {
@@ -451,8 +453,11 @@ dl dd {
 
 table {
   display: block;
-  width: 100%;
+  width: fit-content;
+  margin-right: -0.8125rem;
+  margin-left: -0.8125rem;
   overflow: auto;
+  font-size: var(--sr-text-sm);
 }
 
 table th {
@@ -470,10 +475,6 @@ table tr {
   border-top: 1px solid var(--sr-color-border-table);
 }
 
-table tr:nth-child(2n) {
-  background-color: var(--sr-color-canvas-subtle);
-}
-
 img {
   max-width: 100%;
   box-sizing: initial;
@@ -493,7 +494,6 @@ code {
   margin: 0;
   font-size: 85%;
   background-color: var(--sr-color-code-bg);
-  border-radius: 0.1875rem;
 }
 
 pre {
@@ -521,12 +521,13 @@ pre > code {
 
 .highlight pre,
 pre {
-  padding: var(--sr-spacing);
+  padding: var(--sr-box-padding);
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
   overflow: auto;
-  font-size: 85%;
-  line-height: 1.45;
+  font-size: var(--sr-text-xs);
+  line-height: 1.4;
   background-color: var(--sr-color-canvas-subtle);
-  border-radius: 0.1875rem;
 }
 
 pre code {
@@ -547,7 +548,7 @@ p {
   min-height: 1.75rem;
 }
 pre {
-  margin-bottom: 3rem;
+  margin-bottom: var(--sr-spacing-xl);
 }
 
 /* Default code-fence button styling (formerly `button.css`). */
@@ -558,7 +559,7 @@ pre {
   position: relative;
   display: inline-block;
   padding: 0.1875rem 0.625rem;
-  font-size: 0.75rem;
+  font-size: var(--sr-text-xs);
   font-weight: 500;
   line-height: 1rem;
   white-space: nowrap;
@@ -576,7 +577,7 @@ pre {
   );
   box-shadow:
     0 1px 0 rgba(24, 24, 27, 0.04),
-    inset 0 1px 0 rgba(255, 255, 255, 0.6);
+    inset 0 1px 0 var(--sr-color-bevel-highlight);
   transition:
     background 0.2s cubic-bezier(0.3, 0, 0.5, 1),
     box-shadow 0.15s;
@@ -594,3 +595,151 @@ pre {
   background: var(--sr-color-canvas-subtle);
   box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.08);
 }
+
+/* Copy-to-clipboard button rendered as the last child of each code snippet's `<pre>`
+   (see `COPY_BUTTON_MARKUP` in `preprocessReadme.ts`) and overlaid on its corner via
+   `position: absolute`. Anchored against `.sr-code-block` (a non-scrolling wrapper
+   `preprocessReadme.ts` adds around every highlighted `<pre>`) rather than `<pre>`
+   itself — `<pre>` has its own `overflow: auto` for long lines, and a `right`-anchored
+   absolute child of a scrolling box drifts with that box's horizontal scroll.
+
+   The bleed (negative margin equal to `pre`'s own padding, same technique as the
+   table/details bleed above) moves from `pre` to `.sr-code-block` here, with `pre`'s
+   own margin canceled below — otherwise `.sr-code-block`'s box (what the button is
+   positioned against) would stop short of `pre`'s bled edge, leaving the button
+   inset from the visible corner by the full bleed amount. */
+
+.sr-code-block {
+  position: relative;
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
+}
+
+.sr-code-block pre {
+  margin-right: 0;
+  margin-left: 0;
+}
+
+.sr-copy-button {
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0.25rem;
+  color: var(--sr-color-fg-muted);
+  cursor: pointer;
+  appearance: none;
+  background-color: var(--sr-color-canvas);
+  border: 1px solid var(--sr-color-border);
+  border-radius: 0.375rem;
+}
+
+/* Hidden until hover/focus so it doesn't clutter every code block at rest — but
+   only on devices that actually have a hover affordance. On touch-only devices
+   `(hover: none)` there's no hover to reveal it, so it stays visible instead. */
+@media (hover: hover) {
+  .sr-copy-button {
+    opacity: 0;
+    transition: opacity 0.15s;
+  }
+
+  .sr-code-block:hover .sr-copy-button,
+  .sr-copy-button:focus-visible,
+  .sr-copy-button.sr-copy-copied {
+    opacity: 1;
+  }
+}
+
+/* Same specificity as `.sr-copy-check` below (one class each) so source order
+   decides the default state — a `.sr-copy-button svg` selector here would win on
+   specificity regardless of order and defeat that rule's `display: none`. */
+.sr-copy-icon,
+.sr-copy-check {
+  display: block;
+  fill: currentColor;
+}
+
+/* `.sr-copy-copied` is toggled client-side by the copy-button script for 2s of
+   feedback after a successful copy — never present in server-rendered markup. */
+.sr-copy-check {
+  display: none;
+}
+
+.sr-copy-button.sr-copy-copied .sr-copy-icon {
+  display: none;
+}
+
+.sr-copy-button.sr-copy-copied .sr-copy-check {
+  display: block;
+}
+
+/* `details`/`summary`, styled with the same clickable material as the code-fence
+   button above. `summary` bleeds out to the `details` border via a negative
+   margin (same technique as the table/pre bleed) so its background spans the
+   full box edge-to-edge, rather than sitting inset with the revealed content. */
+
+details {
+  padding: 0 var(--sr-box-padding);
+  margin-right: calc(var(--sr-box-padding) * -1);
+  margin-left: calc(var(--sr-box-padding) * -1);
+  border: 1px solid var(--sr-color-border-muted);
+}
+
+/* Bottom padding only applies once there's revealed content to pad — otherwise
+   (closed, just the summary bar) it'd reserve empty space below the summary,
+   showing as a hollow gap before the box's own bottom border. */
+details[open] {
+  padding-bottom: var(--sr-spacing);
+}
+
+summary {
+  padding: 0.75rem var(--sr-box-padding);
+  margin: 0 calc(var(--sr-box-padding) * -1);
+  font-weight: 500;
+  color: var(--sr-color-fg);
+  background: linear-gradient(
+    180deg,
+    var(--sr-color-kbd-bg),
+    var(--sr-color-canvas-subtle)
+  );
+  box-shadow:
+    0 1px 0 rgba(24, 24, 27, 0.04),
+    inset 0 1px 0 var(--sr-color-bevel-highlight);
+  transition:
+    background 0.2s cubic-bezier(0.3, 0, 0.5, 1),
+    box-shadow 0.15s;
+}
+
+summary:hover {
+  background: linear-gradient(
+    180deg,
+    var(--sr-color-canvas-subtle),
+    var(--sr-color-border)
+  );
+}
+
+summary:active {
+  background: var(--sr-color-canvas-subtle);
+  box-shadow: inset 0 1px 2px rgba(24, 24, 27, 0.08);
+}
+
+details[open] > summary {
+  border-bottom: 1px solid var(--sr-color-border-muted);
+}
+
+summary + * {
+  margin-top: var(--sr-spacing);
+}
+
+/* Adjacent `details` conjoin into a single accordion: no gap and no doubled
+   border at the seam between them. */
+details + details {
+  margin-top: 0;
+  border-top: 0;
+}
+
+details:has(+ details) {
+  margin-bottom: 0;
+}

package/dist/svelte.css

@@ -13,3 +13,17 @@
 .language-svelte .property {
   color: #005cc5;
 }
+
+:root[data-sr-theme="dark"] .language-svelte .tag,
+:root[data-sr-theme="dark"] .language-svelte .selector {
+  color: #7ee787;
+}
+:root[data-sr-theme="dark"] .language-svelte .attr-name {
+  color: #d2a8ff;
+}
+:root[data-sr-theme="dark"] .language-svelte .attr-value {
+  color: #a5d6ff;
+}
+:root[data-sr-theme="dark"] .language-svelte .property {
+  color: #79c0ff;
+}

package/dist/typescript.css

@@ -10,3 +10,16 @@
 .language-javascript .class-name {
   color: #24292f;
 }
+
+:root[data-sr-theme="dark"] .language-typescript,
+:root[data-sr-theme="dark"] .language-javascript {
+  color: #79c0ff;
+}
+:root[data-sr-theme="dark"] .language-typescript .string,
+:root[data-sr-theme="dark"] .language-javascript .string {
+  color: #a5d6ff;
+}
+:root[data-sr-theme="dark"] .language-typescript .class-name,
+:root[data-sr-theme="dark"] .language-javascript .class-name {
+  color: #c9d1d9;
+}

package/dist/utils/purgeCss.d.ts

@@ -1 +1 @@
-export declare function purgeUnusedCss(rawCss: string, html: string, alwaysKeepClasses?: string[]): string;
+export declare function purgeUnusedCss(rawCss: string, html: string, alwaysKeepTokens?: string[]): string;

package/dist/yaml.css

@@ -1,3 +1,7 @@
 .language-yaml {
   color: #0550ae;
 }
+
+:root[data-sr-theme="dark"] .language-yaml {
+  color: #79c0ff;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "svelte-readme",
-  "version": "4.1.0",
+  "version": "4.2.0",
   "license": "MIT",
   "description": "Develop and demo your Svelte components in your README.md",
   "author": "Eric Liu (https://github.com/metonym)",