stack-site-builder 1.19.1 → 1.19.3

package/CHANGELOG.md

@@ -11,6 +11,28 @@ content schema, while a consuming site supplies only content, taxonomy data and
 config. Sites track the theme with `pnpm up stack-site-builder`, so each release
 here is a plain version bump they pull in.
 
+## [1.19.3] - 2026-07-23
+
+### Fixed
+
+- **Hero/card icons: no more drop shadow, no more distortion** — the cards
+  home and product-landing hero icons dropped their shadow, and every icon
+  slot (heroes, home cards, products index) now uses `object-contain`, so a
+  non-square source keeps its aspect ratio instead of stretching to fill
+  the square box.
+
+## [1.19.2] - 2026-07-23
+
+### Fixed
+
+- **Dark mode made custom-styled diagrams unreadable** — authored
+  `style X fill:#…` lines carry light-mode colors, while Mermaid's HTML
+  labels take their text color from the theme variables; in dark mode that
+  paired light text with the hardcoded light fills. The loader now drops
+  fill styles when rendering in dark mode, so those diagrams follow the
+  theme palette there — light mode keeps the authored colors, and toggling
+  the theme re-renders accordingly.
+
 ## [1.19.1] - 2026-07-23
 
 ### Changed
@@ -333,6 +355,8 @@ catalog sites from a thin content-only repository.
 - **Standalone development setup** — a devcontainer and a minimal `playground/`
   consuming site for developing and previewing the theme on its own.
 
+[1.19.3]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.19.2...v1.19.3
+[1.19.2]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.19.1...v1.19.2
 [1.19.1]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.19.0...v1.19.1
 [1.19.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.18.0...v1.19.0
 [1.18.0]: https://github.com/CodeCompose7/stack-site-builder/compare/v1.17.4...v1.18.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "stack-site-builder",
   "type": "module",
-  "version": "1.19.1",
+  "version": "1.19.3",
   "license": "MIT",
   "description": "The engine behind the awesome-*-stack catalog sites: an Astro theme with the catalog/concepts/articles/slides/samples routes, components, styles and markdown pipeline. Sites provide content, taxonomy data and config.",
   "repository": {

package/src/components/CardsHome.astro

@@ -29,7 +29,7 @@ const resolveHref = (href: string, external?: boolean) =>
 ---
 
 <section class="py-14 text-center">
-  {h?.hero?.icon && <img src={withBase(h.hero.icon)} alt="" class="mx-auto h-20 w-20 rounded-[22%] shadow-md" />}
+  {h?.hero?.icon && <img src={withBase(h.hero.icon)} alt="" class="mx-auto h-20 w-20 rounded-[22%] object-contain" />}
   <h1 class="mt-5 text-4xl font-bold tracking-tight sm:text-5xl">{heroTitle}</h1>
   <p class="mx-auto mt-4 max-w-2xl text-xl text-[var(--aas-muted)]" set:html={heroSubtitle} />
 </section>
@@ -50,7 +50,7 @@ const resolveHref = (href: string, external?: boolean) =>
                 <img
                   src={withBase(c.icon)}
                   alt=""
-                  class:list={['h-20 w-20 shrink-0', c.rounded ? 'rounded-[22%]' : 'rounded-xl']}
+                  class:list={['h-20 w-20 shrink-0 object-contain', c.rounded ? 'rounded-[22%]' : 'rounded-xl']}
                   loading="lazy"
                 />
               )}

package/src/components/MermaidLoader.astro

@@ -56,6 +56,19 @@
     });
   }
 
+  // Authored `style X fill:#…` lines carry light-mode colors, and Mermaid's
+  // HTML labels take their text color from the THEME variables — in dark mode
+  // that pairs light text with the hardcoded light fills, unreadable. So in
+  // dark mode we drop those fill styles and let the diagram render entirely
+  // from the theme palette; light mode keeps the authored colors.
+  function srcForTheme(src: string): string {
+    if (document.documentElement.dataset.theme !== 'dark') return src;
+    return src
+      .split('\n')
+      .filter((l) => !/^\s*style\s+\S+.*fill:#/.test(l))
+      .join('\n');
+  }
+
   async function renderAll() {
     const nodes = Array.from(document.querySelectorAll<HTMLElement>('pre.mermaid'));
     if (nodes.length === 0) return;
@@ -66,7 +79,7 @@
       // injecting it as HTML would turn `<…>` in labels into live DOM (the
       // server-side escaping exists precisely to prevent that). Mermaid reads
       // the element's innerHTML and decodes entities itself.
-      n.textContent = n.dataset.src ?? '';
+      n.textContent = srcForTheme(n.dataset.src ?? '');
     }
     init();
     try {

package/src/components/ProductLanding.astro

@@ -47,7 +47,7 @@ const altBg = (i: number) => i % 2 === 1;
     ]}
   >
     <div class="mx-auto max-w-[75rem] px-5">
-      {d.icon && <img src={withBase(d.icon)} alt="" class="mx-auto h-24 w-24 rounded-[22%] shadow-lg" />}
+      {d.icon && <img src={withBase(d.icon)} alt="" class="mx-auto h-24 w-24 rounded-[22%] object-contain" />}
       <h1 class="mt-6 text-4xl font-bold tracking-tight sm:text-5xl">{d.title}</h1>
       {d.subtitle && <p class="mt-3 text-xl text-[var(--aas-muted)]" set:html={d.subtitle} />}
       {

package/src/components/ProductsIndex.astro

@@ -54,7 +54,7 @@ const sections = productTree.roots
             class="aas-lift flex items-center gap-6 rounded-3xl border border-[var(--aas-border)] bg-[var(--aas-panel)] p-6 no-underline"
           >
             {a.data.icon && (
-              <img src={withBase(a.data.icon)} alt="" class="h-20 w-20 shrink-0 rounded-[22%]" loading="lazy" />
+              <img src={withBase(a.data.icon)} alt="" class="h-20 w-20 shrink-0 rounded-[22%] object-contain" loading="lazy" />
             )}
             <span class="min-w-0">
               <span class="block text-xl font-semibold text-[var(--aas-text)]">{a.data.title}</span>