@grove-dev/astro 0.5.2 → 0.5.3

package/src/lib/packaged-icons.ts

@@ -0,0 +1,32 @@
+/**
+ * Locate the icon set that ships inside `@grove-dev/astro`.
+ *
+ * The component and the SVGs it points at live in the same package on
+ * purpose: an upgrade that changes how `Icon.astro` resolves a name
+ * carries the matching artwork with it, so a consumer can never end up
+ * with a component asking for files their site does not have.
+ */
+import { dirname, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+import type { IconSyncOptions, IconSyncResult } from "@grove-dev/core";
+import { syncIconAssets } from "@grove-dev/core";
+
+/**
+ * `packages/astro/assets/icons` — two levels up, which holds for both
+ * `src/lib/` (tests, Vite) and `dist/lib/` (published).
+ */
+export const packagedIconsDir = resolve(
+  dirname(fileURLToPath(import.meta.url)),
+  "..",
+  "..",
+  "assets",
+  "icons",
+);
+
+/** Copy the packaged icon set into a site's `public/`. */
+export function syncPackagedIcons(
+  publicDir: string,
+  options?: IconSyncOptions,
+): Promise<IconSyncResult> {
+  return syncIconAssets(packagedIconsDir, publicDir, options);
+}

package/src/styles.css

@@ -424,6 +424,67 @@
  * Colors come from the package's `ink-*` scale via CSS variables so
  * every consumer gets the same baseline regardless of brand overrides.
  * ────────────────────────────────────────────────────────────────── */
+
+/* ──────────────────────────────────────────────────────────────────
+ * Monochrome brand marks (`Icon.astro`, kind: "mono")
+ *
+ * An SVG loaded through `<img src>` is an independent document that
+ * page CSS cannot reach, so `currentColor` inside it never resolves
+ * against the theme — it silently renders black in both modes. That
+ * is why single-color marks (Apple, Rust, Tauri, Deno, …) used to
+ * need a hand-maintained `-light`/`-dark` file pair plus a JS `src`
+ * swap, and why the pair was easy to get backwards.
+ *
+ * Masking inverts the relationship: the SVG supplies the *shape*
+ * (via its alpha channel) and the page supplies the *color* — no
+ * script and no second file.
+ *
+ * The paint is `--grove-foreground`, NOT `currentColor`. These are
+ * brand marks, and a brand mark's real presentation is solid black on
+ * light and solid white on dark — not whatever tint the surrounding
+ * chip label happens to use. Inheriting `currentColor` washed the
+ * Apple mark down to the chip's muted `ink-500`, which reads as a
+ * greyed-out logo rather than a logo. Callers that genuinely want a
+ * tinted mark can override `--grove-icon-mono`.
+ *
+ * The URL is per-icon and computed at render time, so it can never
+ * appear literally in a source file for Tailwind's extractor to find
+ * — arbitrary `mask-[url(…)]` utilities are structurally impossible
+ * here. Everything static lives in this class; only the URL travels
+ * inline, as `--grove-icon-url`.
+ * ────────────────────────────────────────────────────────────────── */
+.grove-icon-mask {
+  display: inline-block;
+  flex-shrink: 0;
+  vertical-align: middle;
+  background-color: var(--grove-icon-mono, var(--grove-foreground));
+  -webkit-mask-image: var(--grove-icon-url);
+  mask-image: var(--grove-icon-url);
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  -webkit-mask-position: center;
+  mask-position: center;
+}
+
+/* Print stylesheets drop background colors, which would erase the
+ * glyph entirely — an `<img>` would still print. */
+@media print {
+  .grove-icon-mask {
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+  }
+}
+
+/* Forced-colors mode overrides `background-color`; pin it to the
+ * system text color so the mark stays visible. */
+@media (forced-colors: active) {
+  .grove-icon-mask {
+    background-color: CanvasText;
+  }
+}
+
 .grove-prose {
   font-size: 1.0625rem; /* 17px */
   line-height: 1.75;