@grove-dev/astro 0.2.19 → 0.2.20

package/templates/default/src/pages/[slug]/[recordSlug].astro

@@ -101,18 +101,14 @@ const tags = record.tags ?? [];
 const healthStatus = proj?.health?.status;
 const healthLabel = healthStatus ? statusDisplay(healthStatus) : null;
 
-// ── Badge class lookup ────────────────────────────────────────────
-// The previous code interpolated `LabelId` straight into the class
-// string (`grove-badge-{l}`), which Astro renders as a literal class
-// name — every badge became `grove-badge-{l}` regardless of value.
-// Map each known id to its stable CSS class in the package
-// stylesheet. Unknown ids (e.g. legacy "featured") fall back to the
-// neutral `.grove-badge` look instead of producing broken classes.
+// Map each known label to a static Tailwind class string so every
+// utility is visible to Tailwind's source scanner. Unknown/legacy
+// labels use the neutral secondary badge treatment.
 const labelClassMap: Record<LabelId, string> = {
-  new: "grove-badge-new",
-  hot: "grove-badge-hot",
-  mature: "grove-badge-mature",
-  featured: "grove-badge",
+  new: "!bg-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300",
+  hot: "!bg-orange-50 !text-orange-800 dark:!bg-orange-950/80 dark:!text-orange-300",
+  mature: "!bg-blue-50 !text-blue-700 dark:!bg-blue-950/80 dark:!text-blue-300",
+  featured: "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",
 };
 
 // ── Optional content markdown (record.content is a path under
@@ -248,8 +244,8 @@ if (isProject && proj) {
   submitHref="/submit"
   submitLabel={`Submit ${name}`}
 >
-  <article class="grove-section">
-    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <article class="py-12 sm:py-16">
+    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
       <nav class="mb-6 text-2xs text-ink-500 dark:text-ink-400" aria-label="Breadcrumb">
         <a href={`/${slug}`} class="hover:text-ink-900 dark:hover:text-ink-100 capitalize">
           {slug}
@@ -259,7 +255,7 @@ if (isProject && proj) {
       </nav>
 
       {/* ── AppCard-style header ──────────────────────────────── */}
-      <header class="grove-card flex flex-col gap-5 p-6 sm:flex-row sm:items-start">
+      <header class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col gap-5 p-6 sm:flex-row sm:items-start">
         <div class="flex-shrink-0">
           {avatarSrc ? (
             <img
@@ -292,7 +288,7 @@ if (isProject && proj) {
               </span>
             )}
             {curationLabels.map((l) => (
-              <span class={`grove-badge ${labelClassMap[l as LabelId] ?? ""}`} title={`Curated: ${labelDisplay(l) ?? l}`}>
+              <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 ${labelClassMap[l as LabelId] ?? ""}`} title={`Curated: ${labelDisplay(l) ?? l}`}>
                 {labelDisplay(l) ?? prettySlug(l)}
               </span>
             ))}
@@ -308,7 +304,7 @@ if (isProject && proj) {
               </span>
             )}
             {healthLabel && (
-              <span class="grove-badge grove-badge-stale">{healthLabel}</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">{healthLabel}</span>
             )}
           </div>
 
@@ -350,7 +346,7 @@ if (isProject && proj) {
                 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"
               >
                 View on GitHub →
               </a>
@@ -360,7 +356,7 @@ if (isProject && proj) {
                 href={homepageUrl}
                 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"
               >
                 Homepage
               </a>
@@ -371,7 +367,7 @@ if (isProject && proj) {
 
       {/* ── Score bars ───────────────────────────────────────── */}
       {proj && (
-        <section class="mt-8 grove-card p-6" aria-labelledby="scores-heading">
+        <section class="mt-8 rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-6" aria-labelledby="scores-heading">
           <h2 id="scores-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             Scores
           </h2>
@@ -396,7 +392,7 @@ if (isProject && proj) {
 
       {/* ── GitHub signals dl ────────────────────────────────── */}
       {isProject && github && (
-        <section class="mt-8 grove-card p-6" aria-labelledby="signals-heading">
+        <section class="mt-8 rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-6" aria-labelledby="signals-heading">
           <h2 id="signals-heading" class="m-0 text-lg font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             GitHub signals
           </h2>
@@ -461,8 +457,8 @@ if (isProject && proj) {
       {/* ── Decision signals (3-col) ──────────────────────────── */}
       {isProject && github && (
         <section class="mt-8 grid grid-cols-1 gap-4 lg:grid-cols-3" aria-label="Decision signals">
-          {/* Repository health 3-col card */}
-          <div class="grove-card p-5">
+          {/* Repository health card */}
+          <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
             <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
               Repository health
             </h3>
@@ -501,7 +497,7 @@ if (isProject && proj) {
           </div>
 
           {/* Activity bar chart */}
-          <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-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
               Activity
             </h3>
@@ -537,7 +533,7 @@ if (isProject && proj) {
           </div>
 
           {/* Contribution readiness chips */}
-          <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-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
               Contribution readiness
             </h3>
@@ -563,7 +559,7 @@ if (isProject && proj) {
 
       {/* ── Language mix ─────────────────────────────────────── */}
       {isProject && languages.length > 0 && (
-        <section class="mt-4 grove-card p-5">
+        <section class="mt-4 rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
           <h3 class="m-0 text-[1rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
             Language mix
           </h3>
@@ -597,7 +593,7 @@ if (isProject && proj) {
                   Stack
                 </span>
                 {stacks.map((s) => (
-                  <span class="grove-badge inline-flex items-center gap-1.5">
+                  <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 items-center gap-1.5">
                     <Icon name={s} category="stack" size={14} />
                     {s}
                   </span>
@@ -610,7 +606,7 @@ if (isProject && proj) {
                   Platform
                 </span>
                 {platforms.map((p) => (
-                  <span class="grove-badge inline-flex items-center gap-1.5">
+                  <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 items-center gap-1.5">
                     <Icon name={p} category="platform" size={14} />
                     {p}
                   </span>
@@ -632,7 +628,7 @@ if (isProject && proj) {
               <li>
                 <a
                   href={`/${slug}?q=${encodeURIComponent(t)}`}
-                  class="grove-badge inline-flex items-center gap-1.5"
+                  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"
                 >
                   {t}
                 </a>
@@ -650,12 +646,12 @@ if (isProject && proj) {
           </h2>
           <ul class="mt-4 m-0 flex list-none flex-col gap-2 p-0">
             {distribution.map((c) => (
-              <li class="grove-card flex flex-wrap items-baseline justify-between gap-2 p-3">
+              <li class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-wrap items-baseline justify-between gap-2 p-3">
                 <div class="flex flex-col">
                   <span class="text-sm font-semibold text-ink-900 dark:text-ink-100">
                     {c.label ?? c.type}
                     {c.verified && (
-                      <span class="ml-2 grove-badge grove-badge-new">Verified</span>
+                      <span class="ml-2 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-emerald-50 !text-emerald-700 dark:!bg-emerald-950/80 dark:!text-emerald-300">Verified</span>
                     )}
                   </span>
                   {c.notes && (
@@ -666,7 +662,7 @@ if (isProject && proj) {
                   href={c.url}
                   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"
                 >
                   {c.platform ?? c.type} →
                 </a>

package/templates/default/src/pages/[slug]/index.astro

@@ -110,7 +110,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
   submitLabel={`Submit ${itemLabel()}`}
 >
   <section class="border-b border-ink-200 bg-white dark:border-ink-800 dark:bg-ink-950">
-    <div class="grove-container-wide mx-auto px-5 pt-10 sm:px-7 sm:pt-12">
+    <div class="mx-auto w-full max-w-wide px-5 pt-10 sm:px-7 sm:pt-12">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         {slug}
       </span>
@@ -171,7 +171,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
             <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>
         </label>
-        <button type="submit" class="grove-btn grove-btn-primary">Search</button>
+        <button type="submit" 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">Search</button>
       </form>
 
       <div class="mt-4">
@@ -192,8 +192,8 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
     </div>
   </section>
 
-  <section class="grove-section-tight">
-    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+  <section class="py-10 sm:py-12">
+    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
       <header class="mb-6">
         <h2 class="m-0 text-[1.5rem] sm:text-[1.625rem] font-semibold tracking-tight text-ink-900 dark:text-ink-100">
           {`All ${itemLabelPlural()}`}
@@ -220,7 +220,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
             {chips.map((chip) => (
               <a
                 href={hrefForRemove(chip.key, chip.value)}
-                class="grove-badge transition-colors hover:border-ink-400"
+                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 transition-colors hover:border-ink-400"
               >
                 {chip.label} <span aria-hidden="true">x</span>
               </a>
@@ -248,7 +248,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
         <p class="m-0 text-sm font-medium text-ink-700 dark:text-ink-200">
           {`No ${itemLabel()}s match these filters.`}
         </p>
-        <a href={`/${slug}`} class="grove-btn grove-btn-outline mt-4">Clear filters</a>
+        <a href={`/${slug}`} 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 mt-4">Clear filters</a>
       </div>
       <nav class="mt-8 flex flex-wrap items-center justify-center gap-1.5" aria-label="Pagination">
         <Pagination current={page} total={pages} hrefFor={hrefForPage} />
@@ -257,7 +257,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
   </section>
 
   <section class="border-t border-ink-200 dark:border-ink-800">
-    <div class="grove-container-wide mx-auto px-5 sm:px-7">
+    <div class="mx-auto w-full max-w-wide px-5 sm:px-7">
       <div class="flex flex-col items-center gap-3 py-12 text-center">
         <h2 class="m-0 text-xl font-semibold tracking-tight text-ink-900 dark:text-ink-100">
           {`Know a real ${itemLabel()} that belongs here?`}
@@ -267,7 +267,7 @@ function hrefForRemove(key: keyof IndexFilters, value: string): string {
         </p>
         <a
           href={siteConfig.submitUrl ?? "/submit"}
-          class="grove-btn grove-btn-primary mt-2"
+          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 mt-2"
         >
           {`Submit ${itemLabel()}`}
         </a>

package/templates/default/src/pages/about.astro

@@ -13,7 +13,7 @@
  *   - New: "A growing community knowledge site. A curated, health-
  *          aware developer directory…"
  *
- * The card utility classes (`grove-card`, `grove-btn-*`) match the
+ * The Tailwind card and button utilities match the
  * rest of the framework, and the data fields it references
  * (`siteConfig.tagline`, `siteConfig.repoUrl`) all flow from the
  * site config — no hardcoded brand or copy.
@@ -57,7 +57,7 @@ const item = itemLabel();
         </p>
       </header>
 
-      <section class="grove-card mt-8 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-8 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Why
         </span>
@@ -78,7 +78,7 @@ const item = itemLabel();
         </p>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Why real {item}s
         </span>
@@ -95,7 +95,7 @@ const item = itemLabel();
         </p>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           What you get
         </span>
@@ -130,7 +130,7 @@ const item = itemLabel();
         </ul>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Generic by design
         </span>
@@ -145,7 +145,7 @@ const item = itemLabel();
         </p>
       </section>
 
-      <section class="grove-card mt-4 p-5 sm:p-6">
+      <section class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors mt-4 p-5 sm:p-6">
         <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
           Free to fork, free to extend
         </span>
@@ -164,18 +164,18 @@ const item = itemLabel();
       </section>
 
       <section class="mt-8 flex flex-wrap items-center gap-3">
-        <a href={`/${slug}`} class="grove-btn grove-btn-primary">Browse the directory</a>
+        <a href={`/${slug}`} 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 the directory</a>
         {githubUrl && (
           <a
             href={githubUrl}
             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"
           >
             View on GitHub
           </a>
         )}
-        <a href="/submit" class="grove-btn grove-btn-ghost">Submit a {item} →</a>
+        <a href="/submit" 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-transparent text-foreground hover:bg-accent hover:text-accent-foreground">Submit a {item} →</a>
       </section>
     </article>
   </Container>

package/templates/default/src/pages/contributors.astro

@@ -82,8 +82,8 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
 ---
 
 <BaseLayout title={title} description={description} site={siteConfig}>
-  <section class="grove-section">
-    <div class="grove-container-wide mx-auto px-5 py-12 sm:px-7 sm:py-16">
+  <section class="py-12 sm:py-16">
+    <div class="mx-auto w-full max-w-wide px-5 py-12 sm:px-7 sm:py-16">
       <span class="text-2xs font-medium uppercase tracking-wider text-ink-500 dark:text-ink-400">
         Contributors
       </span>
@@ -112,9 +112,9 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
   </section>
 
   {sorted.length === 0 ? (
-    <section class="grove-section">
-      <div class="grove-container mx-auto px-5 pb-16 sm:px-7">
-        <div class="grove-card flex flex-col items-center gap-3 p-8 text-center">
+    <section class="py-12 sm:py-16">
+      <div class="mx-auto w-full max-w-container px-5 pb-16 sm:px-7">
+        <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col items-center gap-3 p-8 text-center">
           <p class="m-0 text-sm text-ink-500 dark:text-ink-400">
             No contributors synced yet. Once the first sync runs, every
             contributor avatar lands here.
@@ -123,8 +123,8 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
       </div>
     </section>
   ) : (
-    <section class="grove-section" aria-label="Contributors list">
-      <div class="grove-container-wide mx-auto px-5 pb-16 sm:px-7">
+    <section class="py-12 sm:py-16" aria-label="Contributors list">
+      <div class="mx-auto w-full max-w-wide px-5 pb-16 sm:px-7">
         <ul
           class="m-0 grid list-none grid-cols-2 gap-3 p-0 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6"
           aria-label="Contributors"
@@ -140,7 +140,7 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
                   href={href}
                   target="_blank"
                   rel="noopener noreferrer"
-                  class="group grove-card flex flex-col items-center gap-2 p-3 text-center no-underline transition-colors hover:border-ink-300 dark:hover:border-ink-700"
+                  class="group rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex flex-col items-center gap-2 p-3 text-center no-underline  hover:border-ink-300 dark:hover:border-ink-700"
                   data-event="contributor_click"
                   data-event-source="contributors_page"
                 >
@@ -173,12 +173,3 @@ const contributorsGraphHref = repoUrl ? `${repoUrl.replace(/\/$/, "")}/graphs/co
     </section>
   )}
 </BaseLayout>
-
-<style>
-  .line-clamp-1 {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-  }
-</style>

package/templates/default/src/pages/submit.astro

@@ -60,7 +60,7 @@ const pleaseAvoid = [
           ["2", "Edit the draft", "Fix the category, stack, platforms, and notes."],
           ["3", "Open a pull request", "Reviewers will validate and merge the record."],
         ].map(([number, heading, copy]) => (
-          <li class="card flex items-start gap-2 p-3">
+          <li class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex items-start gap-2 p-3">
             <span class="mt-0.5 inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-full border border-ink-300 font-mono font-semibold text-ink-700 dark:border-ink-700 dark:text-ink-300">{number}</span>
             <div>
               <div class="font-medium text-ink-900 dark:text-ink-100">{heading}</div>
@@ -71,43 +71,43 @@ const pleaseAvoid = [
       </ol>
 
       <div class="mt-8 grid grid-cols-1 gap-6 lg:grid-cols-[minmax(0,1fr)_minmax(360px,0.8fr)]">
-        <form id="submit-form" class="card p-5">
+        <form id="submit-form" class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
           <div class="grid gap-5">
             <label class="grid gap-1.5">
-              <span class="label">GitHub URL</span>
+              <span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">GitHub URL</span>
               <div class="flex flex-col gap-2 sm:flex-row">
-                <input id="repo-url" type="url" required placeholder="https://github.com/owner/repo" class="field flex-1" />
-                <button id="fetch-repo" type="button" class="btn-primary min-h-10 justify-center">Generate draft</button>
+                <input id="repo-url" type="url" required placeholder="https://github.com/owner/repo" class="min-h-10 flex-1 rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" />
+                <button id="fetch-repo" type="button" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--radius)] border border-transparent bg-primary px-3 text-sm font-medium leading-none text-primary-foreground no-underline outline-none transition-colors hover:bg-primary/90 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 min-h-10 justify-center">Generate draft</button>
               </div>
-              <span class="help">The repository must be public. We never write to it.</span>
+              <span class="text-2xs text-muted-foreground">The repository must be public. We never write to it.</span>
             </label>
 
             <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
-              <label class="grid gap-1.5"><span class="label">Name</span><input id="item-name" type="text" class="field" /></label>
-              <label class="grid gap-1.5"><span class="label">Slug</span><input id="item-slug" type="text" class="field font-mono" /><span class="help">URL fragment, auto-filled from the repository name.</span></label>
+              <label class="grid gap-1.5"><span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Name</span><input id="item-name" type="text" class="min-h-10 rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" /></label>
+              <label class="grid gap-1.5"><span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Slug</span><input id="item-slug" type="text" class="min-h-10 rounded-[var(--radius)] border border-input bg-background px-3 py-2 font-mono text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" /><span class="text-2xs text-muted-foreground">URL fragment, auto-filled from the repository name.</span></label>
             </div>
 
             <label class="grid gap-1.5">
-              <span class="label">Description</span>
-              <textarea id="item-description" rows="3" class="field resize-y"></textarea>
-              <span class="help">One or two sentences in plain language.</span>
+              <span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Description</span>
+              <textarea id="item-description" rows="3" class="min-h-10 resize-y rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35"></textarea>
+              <span class="text-2xs text-muted-foreground">One or two sentences in plain language.</span>
             </label>
 
             <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
               <label class="grid gap-1.5">
-                <span class="label">Category</span>
-                <input id="item-category" list="category-options" class="field" />
+                <span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Category</span>
+                <input id="item-category" list="category-options" class="min-h-10 rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" />
                 <datalist id="category-options">{categories.map((value) => <option value={value} />)}</datalist>
               </label>
               <label class="grid gap-1.5">
-                <span class="label">Primary stack</span>
-                <input id="primary-stack" list="stack-options" class="field" />
+                <span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Primary stack</span>
+                <input id="primary-stack" list="stack-options" class="min-h-10 rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" />
                 <datalist id="stack-options">{stacks.map((value) => <option value={value} />)}</datalist>
               </label>
             </div>
 
             <fieldset class="grid gap-2">
-              <legend class="label">Platforms</legend>
+              <legend class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Platforms</legend>
               <div class="grid grid-cols-2 gap-2 sm:grid-cols-3">
                 {platformOptions.map((platform) => (
                   <label class="flex min-h-9 items-center gap-2 rounded-md border border-ink-200 px-2 text-sm dark:border-ink-800">
@@ -118,14 +118,14 @@ const pleaseAvoid = [
               </div>
             </fieldset>
 
-            <label class="grid gap-1.5"><span class="label">Tags</span><input id="item-tags" type="text" placeholder="self-hosted, developer-tools, offline-first" class="field" /></label>
-            <label class="grid gap-1.5"><span class="label">Website</span><input id="item-website" type="url" placeholder="https://example.com" class="field" /></label>
-            <label class="grid gap-1.5"><span class="label">Best for</span><textarea id="best-for" rows="3" class="field resize-y" placeholder="One use case per line"></textarea></label>
+            <label class="grid gap-1.5"><span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Tags</span><input id="item-tags" type="text" placeholder="self-hosted, developer-tools, offline-first" class="min-h-10 rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" /></label>
+            <label class="grid gap-1.5"><span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Website</span><input id="item-website" type="url" placeholder="https://example.com" class="min-h-10 rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" /></label>
+            <label class="grid gap-1.5"><span class="text-2xs font-medium uppercase tracking-[.05em] text-muted-foreground">Best for</span><textarea id="best-for" rows="3" class="min-h-10 resize-y rounded-[var(--radius)] border border-input bg-background px-3 py-2 text-sm text-foreground outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35" placeholder="One use case per line"></textarea></label>
           </div>
         </form>
 
         <aside class="flex flex-col gap-4">
-          <div class="card p-5">
+          <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors p-5">
             <h2 class="m-0 text-[0.9375rem] font-semibold text-ink-900 dark:text-ink-100">Submission criteria</h2>
             <p class="m-0 mt-1 text-2xs text-ink-500 dark:text-ink-400">Use this checklist before opening the draft.</p>
             <div class="mt-4 grid grid-cols-1 gap-4 text-2xs sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2">
@@ -140,12 +140,12 @@ const pleaseAvoid = [
             </div>
           </div>
 
-          <div class="card flex min-h-[420px] flex-col p-5">
+          <div class="rounded-[calc(var(--radius)+0.25rem)] border-0 bg-muted shadow-none transition-colors flex min-h-[420px] flex-col p-5">
             <div class="flex flex-wrap items-center justify-between gap-3">
               <h2 class="m-0 text-base font-semibold text-ink-900 dark:text-ink-100">YAML draft</h2>
               <div class="flex items-center gap-2">
-                <button id="copy-yaml" type="button" class="btn-outline pointer-events-none opacity-50" disabled>Copy YAML</button>
-                <a id="open-pr-link" href="#" target="_blank" rel="noopener noreferrer" class="btn-outline pointer-events-none opacity-50">Open PR draft</a>
+                <button id="copy-yaml" type="button" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--radius)] border border-border bg-secondary px-3 text-sm font-medium leading-none text-foreground no-underline outline-none transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 pointer-events-none opacity-50" disabled>Copy YAML</button>
+                <a id="open-pr-link" href="#" target="_blank" rel="noopener noreferrer" class="inline-flex h-8 cursor-pointer items-center justify-center gap-1.5 whitespace-nowrap rounded-[var(--radius)] border border-border bg-secondary px-3 text-sm font-medium leading-none text-foreground no-underline outline-none transition-colors hover:bg-accent focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/35 pointer-events-none opacity-50">Open PR draft</a>
               </div>
             </div>
             <pre class="mt-4 min-h-0 flex-1 overflow-auto rounded-md border border-ink-200 bg-ink-50 p-3 text-xs leading-relaxed text-ink-800 dark:border-ink-800 dark:bg-ink-900/60 dark:text-ink-200"><code id="yaml-preview">Paste a GitHub URL to generate a draft.</code></pre>
@@ -156,14 +156,6 @@ const pleaseAvoid = [
     </section>
   </Container>
 
-  <style>
-    .field { min-height: 2.5rem; border-radius: .375rem; border: 1px solid var(--color-ink-200); background: white; padding: .5rem .75rem; color: var(--color-ink-900); font-size: .875rem; outline: none; }
-    .field:focus { border-color: var(--color-ink-500); }
-    :global(.dark) .field { border-color: var(--color-ink-800); background: var(--color-ink-950); color: var(--color-ink-100); }
-    .label { font-size: var(--text-2xs); font-weight: 500; text-transform: uppercase; letter-spacing: .05em; color: var(--color-ink-500); }
-    .help { font-size: var(--text-2xs); color: var(--color-ink-500); }
-  </style>
-
   <script is:inline define:vars={{ existingSlugs, existingFullNames, repoUrl }}>
     // @ts-nocheck
     const $ = (selector) => document.querySelector(selector);