@grove-dev/astro 0.2.19 → 0.2.20

package/dist/theme.test.js

@@ -3,6 +3,11 @@ 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)");
@@ -37,5 +42,14 @@ describe("Astro theme contract", () => {
         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

@@ -1 +1 @@
-{"version":3,"file":"theme.test.js","sourceRoot":"","sources":["../src/theme.test.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,SAAS,CAAC;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAE,EAAE,EAAE,MAAM,QAAQ,CAAC;AAE9C,MAAM,UAAU,GAAG,YAAY,CAAC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,YAAY,CAAC,EAAE,MAAM,CAAC,CAAC;AACpF,MAAM,aAAa,GAAG,YAAY,CAChC,OAAO,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,4CAA4C,CAAC,EAC1E,MAAM,CACP,CAAC;AAEF,QAAQ,CAAC,sBAAsB,EAAE,GAAG,EAAE;IACpC,EAAE,CAAC,oDAAoD,EAAE,GAAG,EAAE;QAC5D,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,qCAAqC,CAAC,CAAC;QACpE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACzE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,0CAA0C,CAAC,CAAC;QACzE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,yCAAyC,CAAC,CAAC;QACxE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,kCAAkC,CAAC,CAAC;QACjE,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,mCAAmC,CAAC,CAAC;IACpE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,6CAA6C,EAAE,GAAG,EAAE;QACrD,KAAK,MAAM,KAAK,IAAI;YAClB,YAAY;YACZ,YAAY;YACZ,SAAS;YACT,WAAW;YACX,OAAO;YACP,QAAQ;YACR,QAAQ;YACR,MAAM;YACN,SAAS;SACV,EAAE,CAAC;YACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,WAAW,KAAK,iBAAiB,KAAK,GAAG,CAAC,CAAC;QAC1E,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,uDAAuD,EAAE,GAAG,EAAE;QAC/D,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAC1B,qEAAqE,CACtE,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAC1B,qEAAqE,CACtE,CAAC;QACF,MAAM,CAAC,UAAU,CAAC,CAAC,SAAS,CAAC,+BAA+B,CAAC,CAAC;IAChE,CAAC,CAAC,CAAC;IAEH,EAAE,CAAC,oEAAoE,EAAE,GAAG,EAAE;QAC5E,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACpD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,cAAc,CAAC,CAAC;QACpD,MAAM,CAAC,aAAa,CAAC,CAAC,GAAG,CAAC,SAAS,CAAC,eAAe,CAAC,CAAC;IACvD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"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.19",
+  "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

@@ -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, oklch(97% 0 0));
-    color: var(--color-ink-700, oklch(37.1% 0 0));
-    font-weight: 600;
-    line-height: 1;
-    text-transform: uppercase;
-    user-select: none;
-  }
-  :global(.dark) .grove-icon-fallback {
-    background: var(--color-ink-800, oklch(26.9% 0 0));
-    color: var(--color-ink-200, oklch(92.2% 0 0));
-  }
-</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">

package/src/components/RefinePanel.astro

@@ -104,7 +104,7 @@ const groups: RenderedFilterGroup[] = baseGroups
     {!hide.includes("sort") && (
       <label class="relative">
         <span class="sr-only">Sort items</span>
-        <select name="sort" class="h-9 cursor-pointer appearance-none rounded-md border border-ink-200 bg-white py-1.5 pl-3 pr-8 text-[0.8125rem] font-medium text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300">
+        <select name="sort" class="h-9 cursor-pointer appearance-none border py-1.5 pl-3 pr-8 text-[0.8125rem] font-medium">
           {SORT_OPTIONS.map((option) => <option value={option.value} selected={(initial.sort ?? "recently-updated") === option.value}>{option.label}</option>)}
         </select>
         <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" class="pointer-events-none absolute right-2.5 top-1/2 -translate-y-1/2 text-ink-400" fill="currentColor">

package/src/components/SmartLensTabs.astro

@@ -55,10 +55,10 @@ const lenses =
       <a
         href={hrefForLens(lens.id, currentParams, pathPrefix)}
         class:list={[
-          "grove-btn rounded-md px-3 py-1.5 text-2xs font-medium transition-colors",
+          "inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 rounded-[var(--radius)] border border-transparent px-3 text-2xs font-medium leading-none no-underline outline-none transition-colors focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35",
           active
-            ? "grove-btn-primary"
-            : "grove-btn-ghost border border-ink-200 dark:border-ink-800",
+            ? "bg-primary text-primary-foreground hover:bg-primary/90"
+            : "border-border bg-secondary text-foreground hover:bg-accent",
         ]}
         aria-current={active ? "page" : undefined}
         data-event="lens_tab_click"

package/src/components/StackGrid.astro

@@ -64,10 +64,10 @@ function statusLabel(s: StackEntry["status"]): string | null {
 
 <section
   id="stacks"
-  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-stackgrid-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">
@@ -89,7 +89,7 @@ function statusLabel(s: StackEntry["status"]): string | null {
       {stacks.map((s) => (
         <a
           href={buildHref(s.slug)}
-          class="card card-hover group flex h-full items-center gap-3 p-3.5 no-underline"
+          class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors hover:bg-secondary group flex h-full items-center gap-3 p-3.5 no-underline"
           data-event="stack_grid_click"
           data-event-source="stack_grid"
         >
@@ -115,10 +115,10 @@ function statusLabel(s: StackEntry["status"]): string | null {
               class:list={[
                 "shrink-0 inline-flex items-center rounded-md border px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wider",
                 s.status === "live"
-                  ? "grove-badge-new"
+                  ? "!bg-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300"
                   : s.status === "expanding"
-                    ? "grove-badge-mature"
-                    : "grove-badge-stale",
+                    ? "!bg-blue-50 !text-blue-700 dark:!bg-blue-950/80 dark:!text-blue-300"
+                    : "!bg-amber-50 !text-amber-800 dark:!bg-amber-950/80 dark:!text-amber-300",
               ]}
             >
               {statusLabel(s.status)}
@@ -129,12 +129,3 @@ function statusLabel(s: StackEntry["status"]): string | null {
     </div>
   </div>
 </section>
-
-<style>
-  .line-clamp-2 {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/src/components/WhyThisExists.astro

@@ -56,10 +56,10 @@ const items = points && points.length > 0 ? points : defaultPoints;
 
 <section
   id="about"
-  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="grove-why-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="flex flex-col gap-2">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         {eyebrow}
@@ -82,7 +82,7 @@ const items = points && points.length > 0 ? points : defaultPoints;
       aria-label="Why this directory"
     >
       {items.map((p) => (
-        <li class="grove-card p-4">
+        <li class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-4">
           <div
             aria-hidden="true"
             class="mb-3 flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-300"

package/src/layouts/Container.astro

@@ -7,12 +7,12 @@ interface Props {
 const { size = "default", class: className = "" } = Astro.props;
 const sizeClass =
   size === "wide"
-    ? "grove-container-wide max-w-wide"
+    ? "mx-auto w-full max-w-wide"
     : size === "narrow"
-      ? "grove-container-narrow max-w-narrow"
-      : "grove-container max-w-container";
+      ? "mx-auto w-full max-w-narrow"
+      : "mx-auto w-full max-w-container";
 ---
 
-<div class={`${sizeClass} mx-auto px-5 sm:px-7 ${className}`}>
+<div class={`${sizeClass} px-5 sm:px-7 ${className}`}>
   <slot />
 </div>

package/src/layouts/Footer.astro

@@ -104,12 +104,12 @@ const projectItems = project.items.length ? project.items : defaultProject;
 
 <footer
   class:list={[
-    "mt-16 border-t border-ink-200 bg-white text-ink-500 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-400",
+    "border-border bg-background mt-16 border-t text-ink-500 dark:text-ink-400",
     className,
   ]}
 >
   <div
-    class="grove-container-wide mx-auto grid max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
+    class="mx-auto grid w-full max-w-wide grid-cols-2 gap-8 px-5 py-12 md:grid-cols-4 sm:px-7"
   >
     <div class="col-span-2 md:col-span-1">
       <div
@@ -225,7 +225,7 @@ const projectItems = project.items.length ? project.items : defaultProject;
 
   <div class="border-t border-ink-200 dark:border-ink-800">
     <div
-      class="grove-container-wide mx-auto flex max-w-wide flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
+      class="mx-auto flex w-full max-w-wide flex-wrap items-center gap-3 px-5 py-4 text-2xs text-ink-500 sm:px-7 dark:text-ink-400"
     >
       <span>© {year} {holder}{licenseLine ? `. ${licenseLine}` : "."}</span>
       {gh && (