blume 1.0.3 → 1.1.0

package/src/theme/entry.ts

@@ -16,6 +16,15 @@ interface TailwindEntryOptions {
 const DARK_VARIANT = `/* Dark mode is driven by data-theme on the <html> element. */
 @custom-variant dark (&:where([data-theme="dark"], [data-theme="dark"] *));`;
 
+/** Keep browser-provided UI in sync with the active theme in both sheets. */
+const COLOR_SCHEME_DEFAULTS = `:root {
+  color-scheme: light;
+}
+
+:root[data-theme="dark"] {
+  color-scheme: dark;
+}`;
+
 /**
  * The default `--blume-*` design tokens (light + dark), shared by the app
  * sheet and the isolated example-preview sheet so previews inherit the site's
@@ -46,6 +55,10 @@ const TOKEN_DEFAULTS = `:root {
   --blume-code-word-border: oklch(0.55 0.16 255 / 0.5);
   --blume-radius: 0.75rem;
 
+  /* Max width of the prose content column (article, breadcrumb, TOC, feedback,
+     pagination, last-updated). Override to re-measure the whole column at once. */
+  --blume-content-width: 42rem;
+
   /*
    * Font tokens resolve through optional src variables that Astro's Fonts API
    * populates (via theme.fonts). When unset they fall back to the system
@@ -119,6 +132,7 @@ const THEME_MAPPING = `@theme inline {
   --color-action-foreground: var(--blume-action-foreground);
   --color-code: var(--blume-code-background);
   --radius-blume: var(--blume-radius);
+  --container-content: var(--blume-content-width);
   --font-sans: var(--blume-font-body);
   --font-mono: var(--blume-font-mono);
   --font-display: var(--blume-font-display);
@@ -141,6 +155,8 @@ ${options.sources.map((source) => `@source "${source}";`).join("\n")}
 
 ${DARK_VARIANT}
 
+${COLOR_SCHEME_DEFAULTS}
+
 ${TOKEN_DEFAULTS}
 
 ${THEME_MAPPING}
@@ -211,7 +227,7 @@ ${THEME_MAPPING}
   --tw-prose-links: var(--blume-foreground);
   --tw-prose-bold: var(--blume-foreground);
   --tw-prose-counters: var(--blume-muted-foreground);
-  --tw-prose-bullets: var(--blume-border);
+  --tw-prose-bullets: var(--blume-muted-foreground);
   --tw-prose-hr: var(--blume-border);
   --tw-prose-quotes: var(--blume-muted-foreground);
   --tw-prose-quote-borders: var(--blume-border);
@@ -386,13 +402,16 @@ blume-diff {
 
 /* Language icon (simple-icons) sits at the header's left edge; the label shifts
    right to make room. Injected at build time by the language-icon transformer.
-   Shown only for top-level prose blocks, which have a header — flush code in
-   tabs and API panels is nested deeper, so the child combinator skips it. */
+   The icon is gated on data-language (the header bar), not just data-icon: the
+   transformer runs whenever icons are on, but a header-less standalone
+   CodeBlock (no title) never gets data-language, so without this gate the
+   absolutely-positioned icon would overlap the first code line. Fenced code
+   and titled blocks always have a header, so the icon shows there. */
 .blume-lang-icon {
   display: none;
 }
 
-.prose > :where(pre[data-icon]) > .blume-lang-icon {
+.prose > :where(pre[data-language][data-icon]) > .blume-lang-icon {
   color: var(--blume-muted-foreground);
   display: block;
   height: 0.875rem;
@@ -402,7 +421,7 @@ blume-diff {
   width: 0.875rem;
 }
 
-.prose > :where(pre[data-icon])::before {
+.prose > :where(pre[data-language][data-icon])::before {
   padding-left: 2.5rem;
 }
 
@@ -453,11 +472,40 @@ blume-diff {
   font-size: 0.8125rem;
 }
 
+/* Scroll wide tables in place; the wrapper is added by the blume:table-wrap hast
+   plugin. The border+radius frames the scroll viewport so a clipped wide table
+   reads as scrollable rather than cut off, and carries the table's vertical
+   rhythm (the inner table's own margin is zeroed so it fills the frame). */
+.blume-table-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  margin: 1.5rem 0;
+  border: 1px solid var(--blume-border);
+  border-radius: var(--blume-radius);
+}
+.blume-table-scroll > table {
+  margin: 0;
+}
+/* Restore inner padding on every cell. Typography zeroes the first/last cell's
+   inline padding so a borderless table aligns to the prose margin; inside the
+   framed wrapper that leaves edge text touching the border. The :is() selector
+   outweighs Typography's :where()-scoped rules so the outer columns get it too. */
+.blume-table-scroll :is(th, td) {
+  padding: 0.5rem 0.75rem;
+}
+/* Keep column labels on one line so a two-word header does not wrap into a
+   ragged stack; the table just scrolls a little wider instead. Body cells keep
+   wrapping so a wide table stays a scroll away, not an endless horizontal run. */
+.blume-table-scroll th {
+  white-space: nowrap;
+}
+
 /* GFM renders cells as <td><code> directly, which the descendant form alone
    never matches (a cell is not its own descendant). */
 .prose :where(td, th) > code,
 .prose :where(td, th) :not(pre) > code {
-  white-space: nowrap;
+  overflow-wrap: break-word;
+  white-space: normal;
 }
 
 blume-tabs pre,
@@ -717,6 +765,8 @@ ${options.sources.map((source) => `@source "${source}";`).join("\n")}
 
 ${DARK_VARIANT}
 
+${COLOR_SCHEME_DEFAULTS}
+
 ${TOKEN_DEFAULTS}
 
 ${THEME_MAPPING}