@grove-dev/astro 0.2.18 → 0.2.20

package/dist/index.d.ts

@@ -2,4 +2,5 @@ import type { AstroIntegration } from "astro";
 export * from "@grove-dev/core";
 export * from "./lib/index.js";
 export default function groveAstro(): AstroIntegration;
+export declare const CONSUMER_GLOBAL_CSS_ID = "virtual:grove-consumer-global-css";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,cAAc,iBAAiB,CAAC;AAMhC,cAAc,gBAAgB,CAAC;AAW/B,MAAM,CAAC,OAAO,UAAU,UAAU,IAAI,gBAAgB,CAuBrD"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AA6BA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAE9C,cAAc,iBAAiB,CAAC;AAMhC,cAAc,gBAAgB,CAAC;AAkB/B,MAAM,CAAC,OAAO,UAAU,UAAU,IAAI,gBAAgB,CAuDrD;AAID,eAAO,MAAM,sBAAsB,sCAAiC,CAAC"}

package/dist/index.js

@@ -16,7 +16,15 @@
  *  - Re-exports the generic `lib/` helpers (search, lenses, scores,
  *    repo, format, display, taxonomy-counts) under a single import
  *    path so consumers can `import { ... } from "@grove-dev/astro"`.
+ *
+ * Also auto-loads the consumer's `src/styles/global.css` when it
+ * exists. Without this hook the scaffold's global.css (which the
+ * CLI generates for theme overrides) sits on disk unused, and any
+ * custom theme tokens silently degrade to the package defaults —
+ * which is the classic "I changed the brand color in global.css
+ * and nothing happened" surprise.
  */
+import { existsSync } from "node:fs";
 import { fileURLToPath } from "node:url";
 import { dirname, resolve } from "node:path";
 export * from "@grove-dev/core";
@@ -33,16 +41,24 @@ const here = dirname(fileURLToPath(import.meta.url));
 const srcRoot = resolve(here, "..", "src");
 const componentsDir = resolve(srcRoot, "components");
 const layoutsDir = resolve(srcRoot, "layouts");
+// Virtual module id used to inject the consumer's `src/styles/global.css`.
+// Resolved by the inline Vite plugin below to the absolute file path
+// when the file exists, or to an empty module when it doesn't.
+const CONSUMER_GLOBAL_CSS_VIRTUAL_ID = "virtual:grove-consumer-global-css";
+const CONSUMER_GLOBAL_CSS_EMPTY_ID = "\0virtual:grove-consumer-global-css:empty";
 export default function groveAstro() {
     return {
         name: "@grove-dev/astro",
         hooks: {
-            "astro:config:setup": ({ updateConfig }) => {
+            "astro:config:setup": ({ config, updateConfig, injectScript }) => {
                 // Alias the components/layouts source directories so
                 // consumer builds can import from
                 //   @grove-dev/astro/components/ItemCard.astro
                 // without us shipping a glob-shaped `exports` map that
                 // Vite/Rollup does not expand reliably.
+                const consumerRoot = fileURLToPath(config.root);
+                const globalCssPath = resolve(consumerRoot, "src/styles/global.css");
+                const globalCssExists = existsSync(globalCssPath);
                 updateConfig({
                     vite: {
                         resolve: {
@@ -51,10 +67,37 @@ export default function groveAstro() {
                                 "@grove-dev/astro/layouts": layoutsDir,
                             },
                         },
+                        plugins: [
+                            {
+                                name: "grove:consumer-global-css-resolver",
+                                resolveId(id) {
+                                    if (id === CONSUMER_GLOBAL_CSS_VIRTUAL_ID) {
+                                        return globalCssExists
+                                            ? globalCssPath
+                                            : CONSUMER_GLOBAL_CSS_EMPTY_ID;
+                                    }
+                                    return null;
+                                },
+                                load(id) {
+                                    if (id === CONSUMER_GLOBAL_CSS_EMPTY_ID) {
+                                        return "";
+                                    }
+                                    return null;
+                                },
+                            },
+                        ],
                     },
                 });
+                // Always inject the virtual module so the build is symmetric
+                // regardless of whether the consumer has a global.css yet.
+                // Vite's CSS pipeline (with @tailwindcss/vite) handles the
+                // resulting import as a stylesheet — no JS bundle weight.
+                injectScript("page-ssr", `import "${CONSUMER_GLOBAL_CSS_VIRTUAL_ID}";`);
             },
         },
     };
 }
+// Re-export the virtual module id so consumers (and tests) can
+// reason about it without copy-pasting the literal string.
+export const CONSUMER_GLOBAL_CSS_ID = CONSUMER_GLOBAL_CSS_VIRTUAL_ID;
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AACH,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAG7C,cAAc,iBAAiB,CAAC;AAEhC,+DAA+D;AAC/D,mEAAmE;AACnE,iEAAiE;AACjE,mCAAmC;AACnC,cAAc,gBAAgB,CAAC;AAE/B,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACrD,+DAA+D;AAC/D,0DAA0D;AAC1D,8DAA8D;AAC9D,sCAAsC;AACtC,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AACrD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE/C,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,OAAO;QACL,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE;YACL,oBAAoB,EAAE,CAAC,EAAE,YAAY,EAAE,EAAE,EAAE;gBACzC,qDAAqD;gBACrD,kCAAkC;gBAClC,+CAA+C;gBAC/C,uDAAuD;gBACvD,wCAAwC;gBACxC,YAAY,CAAC;oBACX,IAAI,EAAE;wBACJ,OAAO,EAAE;4BACP,KAAK,EAAE;gCACL,6BAA6B,EAAE,aAAa;gCAC5C,0BAA0B,EAAE,UAAU;6BACvC;yBACF;qBACF;iBACF,CAAC,CAAC;YACL,CAAC;SACF;KACF,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AACrC,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AAG7C,cAAc,iBAAiB,CAAC;AAEhC,+DAA+D;AAC/D,mEAAmE;AACnE,iEAAiE;AACjE,mCAAmC;AACnC,cAAc,gBAAgB,CAAC;AAE/B,MAAM,IAAI,GAAG,OAAO,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC;AACrD,+DAA+D;AAC/D,0DAA0D;AAC1D,8DAA8D;AAC9D,sCAAsC;AACtC,MAAM,OAAO,GAAG,OAAO,CAAC,IAAI,EAAE,IAAI,EAAE,KAAK,CAAC,CAAC;AAC3C,MAAM,aAAa,GAAG,OAAO,CAAC,OAAO,EAAE,YAAY,CAAC,CAAC;AACrD,MAAM,UAAU,GAAG,OAAO,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;AAE/C,2EAA2E;AAC3E,qEAAqE;AACrE,+DAA+D;AAC/D,MAAM,8BAA8B,GAAG,mCAAmC,CAAC;AAC3E,MAAM,4BAA4B,GAChC,2CAA2C,CAAC;AAE9C,MAAM,CAAC,OAAO,UAAU,UAAU;IAChC,OAAO;QACL,IAAI,EAAE,kBAAkB;QACxB,KAAK,EAAE;YACL,oBAAoB,EAAE,CAAC,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,EAAE,EAAE;gBAC/D,qDAAqD;gBACrD,kCAAkC;gBAClC,+CAA+C;gBAC/C,uDAAuD;gBACvD,wCAAwC;gBACxC,MAAM,YAAY,GAAG,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;gBAChD,MAAM,aAAa,GAAG,OAAO,CAAC,YAAY,EAAE,uBAAuB,CAAC,CAAC;gBACrE,MAAM,eAAe,GAAG,UAAU,CAAC,aAAa,CAAC,CAAC;gBAElD,YAAY,CAAC;oBACX,IAAI,EAAE;wBACJ,OAAO,EAAE;4BACP,KAAK,EAAE;gCACL,6BAA6B,EAAE,aAAa;gCAC5C,0BAA0B,EAAE,UAAU;6BACvC;yBACF;wBACD,OAAO,EAAE;4BACP;gCACE,IAAI,EAAE,oCAAoC;gCAC1C,SAAS,CAAC,EAAE;oCACV,IAAI,EAAE,KAAK,8BAA8B,EAAE,CAAC;wCAC1C,OAAO,eAAe;4CACpB,CAAC,CAAC,aAAa;4CACf,CAAC,CAAC,4BAA4B,CAAC;oCACnC,CAAC;oCACD,OAAO,IAAI,CAAC;gCACd,CAAC;gCACD,IAAI,CAAC,EAAE;oCACL,IAAI,EAAE,KAAK,4BAA4B,EAAE,CAAC;wCACxC,OAAO,EAAE,CAAC;oCACZ,CAAC;oCACD,OAAO,IAAI,CAAC;gCACd,CAAC;6BACF;yBACF;qBACF;iBACF,CAAC,CAAC;gBAEH,6DAA6D;gBAC7D,2DAA2D;gBAC3D,2DAA2D;gBAC3D,0DAA0D;gBAC1D,YAAY,CACV,UAAU,EACV,WAAW,8BAA8B,IAAI,CAC9C,CAAC;YACJ,CAAC;SACF;KACF,CAAC;AACJ,CAAC;AAED,+DAA+D;AAC/D,2DAA2D;AAC3D,MAAM,CAAC,MAAM,sBAAsB,GAAG,8BAA8B,CAAC"}

package/dist/theme.test.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=theme.test.d.ts.map

package/dist/theme.test.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.test.d.ts","sourceRoot":"","sources":["../src/theme.test.ts"],"names":[],"mappings":""}

package/dist/theme.test.js

@@ -0,0 +1,55 @@
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
+import { describe, expect, it } from "vitest";
+const astroTheme = readFileSync(resolve(import.meta.dirname, "styles.css"), "utf8");
+const scaffoldTheme = readFileSync(resolve(import.meta.dirname, "../templates/default/src/styles/global.css"), "utf8");
+const tailwindMarkup = [
+    "components/ItemCard.astro",
+    "layouts/Header.astro",
+    "../templates/default/src/pages/submit.astro",
+].map((file) => readFileSync(resolve(import.meta.dirname, file), "utf8")).join("\n");
+describe("Astro theme contract", () => {
+    it("keeps Starlight's light and dark foundation values", () => {
+        expect(astroTheme).toContain("--grove-background: oklch(100% 0 0)");
+        expect(astroTheme).toContain("--grove-foreground: var(--color-ink-950)");
+        expect(astroTheme).toContain("--grove-background: var(--color-ink-950)");
+        expect(astroTheme).toContain("--grove-foreground: var(--color-ink-50)");
+        expect(astroTheme).toContain("--color-ink-50: oklch(98.5% 0 0)");
+        expect(astroTheme).toContain("--color-ink-950: oklch(14.5% 0 0)");
+    });
+    it("exposes runtime semantic colors to Tailwind", () => {
+        for (const token of [
+            "background",
+            "foreground",
+            "primary",
+            "secondary",
+            "muted",
+            "accent",
+            "border",
+            "card",
+            "popover",
+        ]) {
+            expect(astroTheme).toContain(`--color-${token}: var(--grove-${token})`);
+        }
+    });
+    it("uses the same system and mono font stacks as the docs", () => {
+        expect(astroTheme).toContain('--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,');
+        expect(astroTheme).toContain("--font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,");
+        expect(astroTheme).toContain("font-family: var(--font-sans)");
+    });
+    it("does not duplicate package-owned foundation tokens in the scaffold", () => {
+        expect(scaffoldTheme).not.toContain("--color-ink-");
+        expect(scaffoldTheme).not.toContain("font-family:");
+        expect(scaffoldTheme).not.toContain("color-scheme:");
+    });
+    it("styles components in HTML with Starlight-aligned Tailwind utilities", () => {
+        expect(tailwindMarkup).toContain("rounded-[calc(var(--radius)+0.25rem)]");
+        expect(tailwindMarkup).toContain("rounded-full");
+        expect(tailwindMarkup).toContain("min-h-5");
+        expect(tailwindMarkup).toContain("h-8");
+        expect(tailwindMarkup).toContain("focus-visible:ring-3");
+        expect(astroTheme).not.toContain(".grove-card");
+        expect(astroTheme).not.toContain(".grove-btn");
+    });
+});
+//# sourceMappingURL=theme.test.js.map

package/dist/theme.test.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.test.js","sourceRoot":"","sources":["../src/theme.test.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grove-dev/astro",
-  "version": "0.2.18",
+  "version": "0.2.20",
   "type": "module",
   "description": "Astro framework adapter for Grove. Components, layouts, design tokens, and a default template.",
   "license": "MIT",

package/src/components/CategoryGrid.astro

@@ -41,10 +41,10 @@ function buildHref(slug: string): string {
 
 <section
   id="categories"
-  class:list={["grove-section scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
+  class:list={["py-12 sm:py-16 scroll-mt-20 border-b border-ink-200 dark:border-ink-800", className]}
   aria-labelledby={bare ? undefined : "grove-categorygrid-heading"}
 >
-  <div class="grove-container mx-auto px-5 sm:px-7">
+  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
     {!bare && (
       <header class="mb-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
@@ -97,12 +97,3 @@ function buildHref(slug: string): string {
     </div>
   </div>
 </section>
-
-<style>
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/src/components/ContributorsGrid.astro

@@ -56,10 +56,10 @@ const visible = contributors
 ---
 
 <section
-  class:list={["grove-section", className]}
+  class:list={["py-12 sm:py-16", className]}
   aria-labelledby="grove-contributors-heading"
 >
-  <div class="grove-container mx-auto px-5 sm:px-7">
+  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
     <header class="mb-6 flex flex-wrap items-end justify-between gap-3">
       <div>
         <h2
@@ -138,12 +138,3 @@ const visible = contributors
     )}
   </div>
 </section>
-
-<style>
-  .line-clamp-1 {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/src/components/CurationGrid.astro

@@ -26,7 +26,7 @@ const columns = [
     aria-label="Curation notes"
   >
     {columns.map((column) => (
-      <div class="grove-card p-5">
+      <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
         <h3 class="m-0 text-sm font-semibold uppercase tracking-wider text-ink-500 dark:text-ink-400">
           {column.title}
         </h3>

package/src/components/DecisionRow.astro

@@ -69,7 +69,7 @@ const cleanup = project?.health?.cleanupCandidate;
   </td>
   <td class="px-3 py-2 text-2xs">
     {cleanup ? (
-      <span class="grove-badge grove-badge-stale">cleanup</span>
+      <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-amber-50 !text-amber-800 dark:!bg-amber-950/80 dark:!text-amber-300">cleanup</span>
     ) : (
       <span class="text-ink-400">—</span>
     )}

package/src/components/ExploreByCategory.astro

@@ -34,8 +34,8 @@ function buildHref(slug: string): string {
 }
 ---
 
-<section class:list={["grove-section-tight", className]}>
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+<section class:list={["py-10 sm:py-12", className]}>
+  <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
     <header class="mb-3 flex flex-col gap-1">
       <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
         {title}
@@ -51,7 +51,7 @@ function buildHref(slug: string): string {
         <li>
           <a
             href={buildHref(c.slug)}
-            class="grove-badge inline-flex items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
+            class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
             data-event="explore_category_click"
             data-event-source="explore_category"
           >

package/src/components/ExploreByStack.astro

@@ -40,8 +40,8 @@ function buildHref(slug: string): string {
 }
 ---
 
-<section class:list={["grove-section-tight", className]}>
-  <div class="grove-container-wide mx-auto px-5 sm:px-7">
+<section class:list={["py-10 sm:py-12", className]}>
+  <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
     <header class="mb-3 flex flex-col gap-1">
       <h2 class="m-0 text-[1.125rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
         {title}
@@ -57,7 +57,7 @@ function buildHref(slug: string): string {
         <li>
           <a
             href={buildHref(s.slug)}
-            class="grove-badge inline-flex items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
+            class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground items-center gap-1.5 transition-colors hover:border-ink-400 dark:hover:border-ink-600"
             data-event="explore_stack_click"
             data-event-source="explore_stack"
           >

package/src/components/FilterGroupMenu.astro

@@ -25,10 +25,10 @@ const group = Astro.props;
   <button
     type="button"
     class:list={[
-      "grove-filter-trigger inline-flex h-9 items-center gap-1.5 rounded-md border px-3 text-[0.8125rem] font-medium transition-colors",
+      "grove-filter-trigger inline-flex h-9 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-[0.8125rem] font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35",
       group.active
-        ? "border-ink-900 bg-ink-900 text-white dark:border-ink-100 dark:bg-ink-100 dark:text-ink-900"
-        : "border-ink-200 bg-white text-ink-700 hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/60",
+        ? "bg-primary text-primary-foreground hover:bg-primary/90"
+        : "border-border bg-secondary text-foreground hover:bg-accent",
     ]}
     aria-haspopup="listbox"
     aria-expanded="false"
@@ -39,13 +39,13 @@ const group = Astro.props;
       <path d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z"/>
     </svg>
   </button>
-  <div id={group.popoverId} class="grove-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] rounded-lg border border-ink-200 bg-white p-1.5 shadow-lg dark:border-ink-800 dark:bg-ink-950" role="listbox" hidden>
+  <div id={group.popoverId} class="rounded-[calc(var(--radius)+0.25rem)] border border-border bg-popover text-popover-foreground shadow-xl grove-filter-popover absolute left-0 top-full z-40 mt-1 hidden w-72 max-w-[calc(100vw-2rem)] p-1.5" role="listbox" hidden>
     <FilterOptions filterKey={group.filterKey} options={group.options} initial={group.initial} single={group.single} />
     <div class="mt-1 flex items-center justify-between border-t border-ink-100 px-2 pt-1.5 dark:border-ink-900">
       {group.active && (
         <button type="button" class="grove-filter-clear text-2xs font-medium text-ink-500 hover:text-ink-900 dark:text-ink-400 dark:hover:text-ink-100">Clear {group.label.toLowerCase()}</button>
       )}
-      <button type="button" class="grove-filter-apply ml-auto rounded-md bg-ink-900 px-2.5 py-1 text-2xs font-medium text-white dark:bg-ink-100 dark:text-ink-900">Apply</button>
+      <button type="button" class="grove-filter-apply inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90 ml-auto px-2.5 text-2xs">Apply</button>
     </div>
   </div>
 </div>

package/src/components/Hero.astro

@@ -114,9 +114,9 @@ const trustStats: { value: string; label: string }[] = [
     class="pointer-events-none absolute inset-0 opacity-60 dark:opacity-40"
     style="
       background-image:
-        radial-gradient(60% 50% at 15% 20%, rgba(31, 111, 235, 0.12), transparent 60%),
-        radial-gradient(50% 40% at 85% 10%, rgba(110, 231, 183, 0.10), transparent 60%),
-        radial-gradient(40% 40% at 50% 90%, rgba(251, 146, 60, 0.08), transparent 60%);
+        radial-gradient(60% 50% at 15% 20%, color-mix(in oklab, var(--color-ink-300) 34%, transparent), transparent 60%),
+        radial-gradient(50% 40% at 85% 10%, color-mix(in oklab, var(--color-ink-200) 28%, transparent), transparent 60%),
+        radial-gradient(40% 40% at 50% 90%, color-mix(in oklab, var(--color-ink-400) 18%, transparent), transparent 60%);
     "
   ></div>
 
@@ -214,7 +214,7 @@ const trustStats: { value: string; label: string }[] = [
         </label>
         <a
           href={searchHref}
-          class="inline-flex h-10 items-center justify-center gap-1.5 rounded-md border border-ink-200 bg-white px-3 text-[0.875rem] font-medium text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300 dark:hover:border-ink-700 dark:hover:bg-ink-900/40"
+          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent h-10"
           aria-label={`Browse all ${itemsLabel} with filters`}
         >
           <svg viewBox="0 0 16 16" width="13" height="13" aria-hidden="true" fill="currentColor">
@@ -224,7 +224,7 @@ const trustStats: { value: string; label: string }[] = [
         </a>
         <button
           type="submit"
-          class="grove-btn grove-btn-primary h-10 px-4 sm:px-5"
+          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90 h-10 px-4 sm:px-5"
         >
           Search
         </button>
@@ -256,12 +256,12 @@ const trustStats: { value: string; label: string }[] = [
             <a
               href={cta.href}
               class:list={[
-                "grove-btn",
+                "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35",
                 cta.variant === "primary"
-                  ? "grove-btn-primary"
+                  ? "bg-primary text-primary-foreground hover:bg-primary/90"
                   : cta.variant === "ghost"
-                    ? "grove-btn-ghost"
-                    : "grove-btn-outline",
+                    ? "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground"
+                    : "border-border bg-secondary text-foreground hover:bg-accent",
               ]}
               {...(cta.external
                 ? { target: "_blank", rel: "noopener noreferrer" }
@@ -278,14 +278,14 @@ const trustStats: { value: string; label: string }[] = [
       {/* Help debug the type system when callers forget to pass ctas. */}
       {ctas.length === 0 && githubUrl && (
         <div class="mt-5 flex flex-wrap items-center gap-2">
-          <a href={searchHref} class="grove-btn grove-btn-primary">
+          <a href={searchHref} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90">
             Browse {itemsLabel}
           </a>
           <a
             href={`${githubUrl}/blob/main/CONTRIBUTING.md`}
             target="_blank"
             rel="noopener noreferrer"
-            class="grove-btn grove-btn-outline"
+            class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent"
           >
             Submit via GitHub
           </a>

package/src/components/Icon.astro

@@ -135,7 +135,10 @@ const a11y: Record<string, string> = title
 {
   showFallback ? (
     <span
-      class:list={["grove-icon grove-icon-fallback", className]}
+      class:list={[
+        "inline-flex shrink-0 select-none items-center justify-center rounded-sm bg-ink-100 align-middle font-semibold uppercase leading-none text-ink-700 dark:bg-ink-800 dark:text-ink-200",
+        className,
+      ]}
       style={`width:${size}px;height:${size}px;font-size:${Math.max(10, size - 6)}px;`}
       {...a11y}
     >
@@ -151,7 +154,7 @@ const a11y: Record<string, string> = title
       width={size}
       height={size}
       alt=""
-      class:list={["grove-icon grove-icon-themed", className]}
+      class:list={["inline-block shrink-0 align-middle", className]}
       {...a11y}
     />
   ) : (
@@ -160,7 +163,7 @@ const a11y: Record<string, string> = title
       width={size}
       height={size}
       alt=""
-      class:list={["grove-icon", className]}
+      class:list={["inline-block shrink-0 align-middle", className]}
       loading="lazy"
       decoding="async"
       {...a11y}
@@ -168,36 +171,6 @@ const a11y: Record<string, string> = title
   )
 }
 
-<style>
-  .grove-icon {
-    display: inline-block;
-    vertical-align: middle;
-    flex-shrink: 0;
-  }
-  .grove-icon-themed {
-    /* Theme-aware: dark/light variants selected by the inline script
-       below based on `data-resolved-theme` set by BaseLayout's
-       THEME_INIT. Default to the light variant so the markup looks
-       correct even before the script runs. */
-  }
-  .grove-icon-fallback {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 0.25rem;
-    background: var(--color-ink-100, #f4f4f5);
-    color: var(--color-ink-700, #3f3f46);
-    font-weight: 600;
-    line-height: 1;
-    text-transform: uppercase;
-    user-select: none;
-  }
-  :global(.dark) .grove-icon-fallback {
-    background: var(--color-ink-800, #27272a);
-    color: var(--color-ink-200, #e4e4e7);
-  }
-</style>
-
 {mode === "auto" && (
   <script is:inline>
     // Theme-aware icon swap. Runs after THEME_INIT (BaseLayout) so

package/src/components/IndexRow.astro

@@ -32,7 +32,7 @@ const status = project?.health?.status;
 const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.length || project.whyListed.length || project.caveats.length)));
 ---
 
-<article class={`group relative flex flex-col gap-3 rounded-lg border border-ink-200 bg-white p-4 transition-colors hover:border-ink-300 hover:shadow-[0_1px_2px_rgba(0,0,0,0.04),0_4px_12px_-2px_rgba(0,0,0,0.06)] dark:border-ink-800 dark:bg-ink-950 dark:hover:border-ink-700 ${className}`}>
+<article class={`rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group relative flex flex-col gap-3 p-4  ${className}`}>
   <header class="flex items-start gap-3">
     <a href={detailHref} class="relative z-10 flex shrink-0" aria-label={`Open ${name} details`}>
       {avatar ? (
@@ -76,13 +76,13 @@ const curated = Boolean(item.curation?.reviewed || (project && (project.bestFor.
 
   {showChips && (platforms.length > 0 || stacks.length > 0) && (
     <div class="flex flex-col gap-1.5">
-      <div class="flex flex-wrap gap-1.5">{platforms.slice(0, 4).map((platform) => <span class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-1.5 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"><Icon name={platform} category="platform" size={11} />{platform}</span>)}</div>
-      <div class="flex flex-wrap gap-1.5">{stacks.slice(0, 4).map((stack) => <span class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-ink-50 px-1.5 py-0.5 text-2xs font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-300"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
+      <div class="flex flex-wrap gap-1.5">{platforms.slice(0, 4).map((platform) => <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground"><Icon name={platform} category="platform" size={11} />{platform}</span>)}</div>
+      <div class="flex flex-wrap gap-1.5">{stacks.slice(0, 4).map((stack) => <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground"><Icon name={stack} category="stack" size={11} />{stack}</span>)}</div>
     </div>
   )}
 
   <footer class="relative z-10 mt-1 flex items-center gap-2 border-t border-ink-100 pt-2 text-2xs dark:border-ink-900">
-    <a href={detailHref} class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 font-medium text-ink-700 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">View details →</a>
-    {repoHref && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-2 py-1 font-medium text-ink-700 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">GitHub</a>}
+    <a href={detailHref} class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent px-2 text-2xs">View details →</a>
+    {repoHref && <a href={repoHref} target="_blank" rel="noopener noreferrer" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent px-2 text-2xs">GitHub</a>}
   </footer>
 </article>

package/src/components/ItemCard.astro

@@ -150,7 +150,7 @@ const category = (item as { category?: string }).category;
 ---
 
 <article
-  class={`card card-hover group relative flex h-full flex-col gap-3 p-4 ${className}`}
+  class={`rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group relative flex h-full flex-col gap-3 p-4 ${className}`}
 >
   {/* Top row: logo + name + (optional) status + curated mark. */}
   <header class="relative z-10 flex items-start gap-3">
@@ -297,26 +297,26 @@ const category = (item as { category?: string }).category;
       {visiblePlatforms.length > 0 && (
         <div class="flex flex-wrap items-center gap-1.5">
           {visiblePlatforms.map((p) => (
-            <span class="chip">
+            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground">
               <Icon name={p} category="platform" size={11} />
               <span>{p}</span>
             </span>
           ))}
           {platformOverflow > 0 && (
-            <span class="chip text-ink-400 dark:text-ink-500">+{platformOverflow}</span>
+            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground text-ink-400 dark:text-ink-500">+{platformOverflow}</span>
           )}
         </div>
       )}
       {visibleStacks.length > 0 && (
         <div class="flex flex-wrap items-center gap-1.5">
           {visibleStacks.map((s) => (
-            <span class="chip chip-stack">
+            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground">
               <Icon name={s} category="stack" size={11} />
               <span>{s}</span>
             </span>
           ))}
           {stackOverflow > 0 && (
-            <span class="chip chip-stack text-ink-400 dark:text-ink-500">+{stackOverflow}</span>
+            <span class="inline-flex min-h-5 items-center justify-center gap-1 rounded-full border border-transparent bg-secondary px-2 py-0.5 align-middle text-xs font-medium leading-none text-secondary-foreground !bg-muted !text-muted-foreground text-ink-400 dark:text-ink-500">+{stackOverflow}</span>
           )}
         </div>
       )}
@@ -350,14 +350,3 @@ const category = (item as { category?: string }).category;
     </a>
   </footer>
 </article>
-
-<style>
-  @reference "../styles.css";
-
-  .chip {
-    @apply inline-flex items-center gap-1 rounded-md border border-ink-200 bg-white px-1.5 py-0.5 text-2xs font-medium text-ink-700 transition-colors dark:border-ink-200 dark:bg-ink-950 dark:text-ink-300;
-  }
-  .chip-stack {
-    @apply bg-ink-50 dark:bg-ink-900/60;
-  }
-</style>

package/src/components/MinimalAbout.astro

@@ -45,8 +45,8 @@ const defaultPoints: AboutPoint[] = [
 const items = points && points.length > 0 ? points : defaultPoints;
 ---
 
-<section class:list={["grove-section", className]}>
-  <div class="grove-container-narrow mx-auto px-5 sm:px-7">
+<section class:list={["py-12 sm:py-16", className]}>
+  <div class="mx-auto w-full max-w-narrow px-5 sm:px-7">
     <header class="mb-6 flex flex-col gap-2">
       <h2 class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
         {title}

package/src/components/OriginalCollection.astro

@@ -51,10 +51,10 @@ const hasStats =
   stats.contributors !== undefined;
 ---
 
-<section class:list={["grove-section", className]}>
-  <div class="grove-container mx-auto px-5 sm:px-7">
+<section class:list={["py-12 sm:py-16", className]}>
+  <div class="mx-auto w-full max-w-container px-5 sm:px-7">
     <div
-      class="grove-card flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
+      class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col gap-4 p-6 sm:flex-row sm:items-center sm:justify-between"
     >
       <div class="flex flex-col gap-2">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
@@ -104,7 +104,7 @@ const hasStats =
           href={repoUrl}
           target="_blank"
           rel="noopener noreferrer"
-          class="grove-btn grove-btn-primary"
+          class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 bg-primary text-primary-foreground hover:bg-primary/90"
           data-event="original_collection_click"
           data-event-source="original_collection"
         >

package/src/components/Pagination.astro

@@ -23,7 +23,7 @@ function pageList(active: number, count: number): Array<number | "ellipsis"> {
 
 const pages = pageList(current, total);
 const linkClass =
-  "grove-btn grove-btn-outline min-w-9 px-2 py-1.5 text-2xs";
+  "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-sm font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 border-border bg-secondary text-foreground hover:bg-accent min-w-9 px-2 py-1.5 text-2xs";
 ---
 
 {total > 1 && (
@@ -45,7 +45,7 @@ const linkClass =
           href={hrefFor(page)}
           class:list={[
             linkClass,
-            page === current && "grove-btn-primary",
+            page === current && "bg-primary text-primary-foreground hover:bg-primary/90",
           ]}
           aria-current={page === current ? "page" : undefined}
         >

package/src/components/RecordSection.astro

@@ -68,7 +68,7 @@ const visible = items.slice(0, 6);
 
 <section
   id={id}
-  class={`grove-section scroll-mt-20 ${className}`}
+  class={`py-12 sm:py-16 scroll-mt-20 ${className}`}
 >
   <Container>
     <div class="mb-6 flex flex-wrap items-end justify-between gap-3">