@grove-dev/astro 0.2.19 → 0.3.1

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 && (

package/src/layouts/Header.astro

@@ -73,12 +73,12 @@ const starsLabel =
 
 <header
   class:list={[
-    "sticky top-0 z-50 border-b border-ink-200 bg-white/85 backdrop-blur dark:border-ink-800 dark:bg-ink-950/85",
+    "border-border bg-background/85 sticky top-0 z-50 border-b backdrop-blur",
     className,
   ]}
 >
   <div
-    class="grove-container-wide mx-auto flex max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
+    class="mx-auto flex w-full max-w-wide items-center gap-6 px-5 py-3 sm:px-7"
   >
     <a
       href="/"
@@ -110,7 +110,7 @@ const starsLabel =
       {submitHref && (
         <a
           href={submitHref}
-          class="hidden h-9 items-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 sm:inline-flex 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 hidden sm:inline-flex"
         >
           <svg
             viewBox="0 0 16 16"
@@ -132,7 +132,7 @@ const starsLabel =
           rel="noopener noreferrer"
           aria-label={`${repoLabel} on GitHub — ${stars} stars`}
           title={`${repoLabel} on GitHub`}
-          class="inline-flex h-9 items-center divide-x divide-ink-200 overflow-hidden rounded-md border border-ink-200 text-[0.875rem] font-medium transition-colors hover:border-ink-300 hover:bg-ink-50 dark:divide-ink-800 dark:border-ink-800 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 overflow-hidden rounded-[var(--radius)] border border-border bg-secondary p-0 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"
         >
           <span class="flex items-center gap-1.5 px-2.5 py-1.5 text-ink-900 dark:text-ink-100">
             <svg viewBox="0 0 16 16" width="16" height="16" aria-hidden="true" fill="currentColor">
@@ -140,7 +140,7 @@ const starsLabel =
             </svg>
             <span>{repoLabel}</span>
           </span>
-          <span class="flex items-center gap-1 bg-ink-50 px-2 py-1.5 text-ink-700 dark:bg-ink-900/60 dark:text-ink-300">
+          <span class="flex items-center gap-1 border-s border-border bg-secondary px-2 py-1.5 text-secondary-foreground">
             <svg viewBox="0 0 16 16" width="11" height="11" aria-hidden="true" fill="currentColor" class="text-amber-500">
               <path d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.751.751 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z"></path>
             </svg>

package/src/layouts/ThemeToggle.astro

@@ -24,7 +24,7 @@ const { class: className = "" } = Astro.props;
   data-theme-toggle
   aria-label="Toggle theme"
   title="Toggle theme"
-  class={`relative inline-flex h-8 w-8 items-center justify-center rounded-md border border-ink-200 bg-white text-ink-700 transition-colors hover:border-ink-300 hover:bg-ink-50 dark:border-ink-800 dark:bg-ink-950 dark:text-ink-200 dark:hover:border-ink-700 dark:hover:bg-ink-900/40 ${className}`}
+  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 relative h-8 w-8 p-0 ${className}`}
 >
   {/* Sun — shown in dark mode (click to go light) */}
   <svg

package/src/styles.css

@@ -6,14 +6,9 @@
  *
  *     import "@grove-dev/astro/styles.css";
  *
- * The `grove-` prefix below is the stable contract for the showcase
- * component classes (`grove-section`, `grove-card`, `grove-btn`, etc.).
- * Tailwind v4's `@theme` block declares the same tokens as CSS custom
- * properties and Tailwind utility names — components can use either
- * bare `grove-*` classes or Tailwind utilities like `text-ink-900`.
- *
- * Namespace history: earlier V0 drafts used a different (now
- * removed) prefix. Only `grove-*` remains.
+ * This file owns only Tailwind theme tokens, runtime light/dark values,
+ * base element defaults, and rendered Markdown styles. Astro components
+ * keep their presentation in HTML with Tailwind utilities.
  */
 
 @import "tailwindcss";
@@ -127,7 +122,7 @@
   --container-narrow: 720px;
 
   /* ── Border radius scale ─────────────────────────────────────── */
-  --radius: 0.375rem;
+  --radius: 0.625rem;
   --radius-lg: 0.5rem;
   --radius-xl: 0.75rem;
 
@@ -287,6 +282,35 @@
   button {
     font: inherit;
   }
+
+  :where(
+    input[type="text"],
+    input[type="search"],
+    input[type="url"],
+    input[type="email"],
+    input:not([type]),
+    select,
+    textarea
+  ) {
+    border-color: var(--grove-input) !important;
+    border-radius: var(--radius) !important;
+    background-color: var(--grove-background) !important;
+    color: var(--grove-foreground) !important;
+  }
+
+  :where(
+    input[type="text"],
+    input[type="search"],
+    input[type="url"],
+    input[type="email"],
+    input:not([type]),
+    select,
+    textarea
+  ):focus-visible {
+    border-color: var(--grove-ring) !important;
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklab, var(--grove-ring) 35%, transparent);
+  }
 }
 
 /* ──────────────────────────────────────────────────────────────────
@@ -394,333 +418,3 @@
   padding-left: 1rem;
   color: var(--color-ink-500);
 }
-
-/* ──────────────────────────────────────────────────────────────────
- * Component classes — shared by the showcase component library.
- * Use these directly; you can also use the equivalent Tailwind
- * utilities (text-ink-900, bg-white, …) and mix freely.
- * ────────────────────────────────────────────────────────────────── */
-
-@layer components {
-  /*
-   * Stable container classes for consumers of the packaged stylesheet.
-   * Tailwind does not emit utilities referenced only inside a dependency,
-   * so relying on `max-w-container` alone can leave template content
-   * unconstrained.
-   */
-  .grove-container,
-  .grove-container-wide,
-  .grove-container-narrow {
-    width: 100%;
-    margin-inline: auto;
-  }
-
-  .grove-container {
-    max-width: var(--container-container);
-  }
-
-  .grove-container-wide {
-    max-width: var(--container-wide);
-  }
-
-  .grove-container-narrow {
-    max-width: var(--container-narrow);
-  }
-
-  /* Section spacing — consistent vertical rhythm */
-  .grove-section {
-    padding-top: 3rem;
-    padding-bottom: 3rem;
-  }
-  @media (min-width: 640px) {
-    .grove-section {
-      padding-top: 4rem;
-      padding-bottom: 4rem;
-    }
-  }
-
-  .grove-section-tight {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-  @media (min-width: 640px) {
-    .grove-section-tight {
-      padding-top: 3rem;
-      padding-bottom: 3rem;
-    }
-  }
-
-  /* Subtle card border + hover lift, used everywhere */
-  .grove-card {
-    border: 1px solid var(--color-ink-200);
-    background: #ffffff;
-    border-radius: var(--radius-lg);
-    transition:
-      border-color 150ms ease,
-      box-shadow 150ms ease,
-      background-color 150ms ease;
-  }
-  .dark .grove-card {
-    border-color: var(--color-ink-800);
-    background: var(--color-ink-950);
-  }
-
-  .grove-card-hover:hover {
-    border-color: var(--color-ink-300);
-    background: rgba(244, 244, 245, 0.6);
-    box-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.04),
-      0 4px 12px -2px rgba(0, 0, 0, 0.06);
-  }
-  .dark .grove-card-hover:hover {
-    border-color: var(--color-ink-700);
-    background: rgba(24, 24, 27, 0.4);
-    box-shadow:
-      0 1px 2px rgba(0, 0, 0, 0.4),
-      0 4px 12px -2px rgba(0, 0, 0, 0.3);
-  }
-
-  /* Pill badge — small, neutral */
-  .grove-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 0.25rem;
-    border-radius: 0.25rem;
-    border: 1px solid var(--color-ink-200);
-    background: var(--color-ink-50);
-    padding: 0.125rem 0.375rem;
-    font-size: var(--text-2xs);
-    line-height: var(--text-2xs--line-height);
-    font-weight: 500;
-    color: var(--color-ink-700);
-  }
-  .dark .grove-badge {
-    border-color: var(--color-ink-800);
-    background: rgba(24, 24, 27, 0.6);
-    color: var(--color-ink-300);
-  }
-
-  .grove-badge-accent {
-    border-color: var(--color-ink-900);
-    background: var(--color-ink-900);
-    color: #ffffff;
-  }
-  .dark .grove-badge-accent {
-    border-color: var(--color-ink-100);
-    background: var(--color-ink-100);
-    color: var(--color-ink-900);
-  }
-
-  .grove-badge-new {
-    border-color: rgba(110, 231, 183, 0.6);
-    background: var(--color-emerald-50);
-    color: var(--color-emerald-800);
-  }
-  .dark .grove-badge-new {
-    border-color: rgba(6, 95, 70, 0.6);
-    background: rgba(2, 44, 34, 0.4);
-    color: var(--color-emerald-300);
-  }
-
-  .grove-badge-hot {
-    border-color: rgba(253, 186, 116, 0.6);
-    background: var(--color-orange-50);
-    color: var(--color-orange-800);
-  }
-  .dark .grove-badge-hot {
-    border-color: rgba(154, 52, 18, 0.6);
-    background: rgba(67, 20, 7, 0.4);
-    color: var(--color-orange-300);
-  }
-
-  .grove-badge-mature {
-    border-color: rgba(147, 197, 253, 0.6);
-    background: var(--color-blue-50);
-    color: var(--color-blue-800);
-  }
-  .dark .grove-badge-mature {
-    border-color: rgba(30, 64, 175, 0.6);
-    background: rgba(23, 37, 84, 0.4);
-    color: var(--color-blue-300);
-  }
-
-  .grove-badge-stale {
-    border-color: rgba(252, 211, 77, 0.6);
-    background: var(--color-amber-50);
-    color: var(--color-amber-800);
-  }
-  .dark .grove-badge-stale {
-    border-color: rgba(146, 64, 14, 0.6);
-    background: rgba(69, 26, 3, 0.4);
-    color: var(--color-amber-300);
-  }
-
-  /* Buttons — outline / ghost / primary */
-  .grove-btn {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.375rem;
-    border-radius: var(--radius);
-    border: 1px solid transparent;
-    padding: 0.375rem 0.75rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 500;
-    transition: color 150ms ease, background-color 150ms ease,
-      border-color 150ms ease;
-    text-decoration: none;
-    cursor: pointer;
-  }
-
-  .grove-btn-ghost {
-    color: var(--color-ink-700);
-  }
-  .grove-btn-ghost:hover {
-    background: var(--color-ink-100);
-  }
-  .dark .grove-btn-ghost {
-    color: var(--color-ink-300);
-  }
-  .dark .grove-btn-ghost:hover {
-    background: var(--color-ink-900);
-  }
-
-  .grove-btn-outline {
-    border-color: var(--color-ink-200);
-    background: #ffffff;
-    color: var(--color-ink-900);
-  }
-  .grove-btn-outline:hover {
-    border-color: var(--color-ink-300);
-    background: var(--color-ink-50);
-  }
-  .dark .grove-btn-outline {
-    border-color: var(--color-ink-800);
-    background: var(--color-ink-950);
-    color: var(--color-ink-100);
-  }
-  .dark .grove-btn-outline:hover {
-    border-color: var(--color-ink-700);
-    background: rgba(24, 24, 27, 0.4);
-  }
-
-  .grove-btn-primary {
-    border-color: var(--color-ink-900);
-    background: var(--color-ink-900);
-    color: #ffffff;
-  }
-  .grove-btn-primary:hover {
-    background: var(--color-ink-800);
-  }
-  .dark .grove-btn-primary {
-    border-color: var(--color-ink-100);
-    background: var(--color-ink-100);
-    color: var(--color-ink-900);
-  }
-  .dark .grove-btn-primary:hover {
-    background: #ffffff;
-  }
-}
-
-/* ────────────────────────────────────────────────────────────────────
- * Backwards-compat aliases — openapps used the unprefixed utility
- * names (`card`, `btn-primary`, `btn-outline`, `btn-ghost`). New
- * components should use the `grove-` prefix. These rules mirror
- * the `grove-*` definitions above so the openapps-derived
- * components (ItemCard, AppCard, etc. — kept as `ItemCard` for V1
- * published API stability) work without per-component
- * edits.
- * ────────────────────────────────────────────────────────────────────*/
-.card {
-  border: 1px solid var(--color-ink-200);
-  background: #ffffff;
-  border-radius: 0.5rem;
-  transition: border-color 150ms ease, background-color 150ms ease, box-shadow 150ms ease;
-}
-.dark .card {
-  border-color: var(--color-ink-800);
-  background: var(--color-ink-950);
-}
-.card-hover:hover {
-  border-color: var(--color-ink-300);
-  background: rgba(244, 244, 245, 0.6);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.06);
-}
-.dark .card-hover:hover {
-  border-color: var(--color-ink-700);
-  background: rgba(24, 24, 27, 0.4);
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 4px 12px -2px rgba(0, 0, 0, 0.3);
-}
-
-/* Chip — small inline label used for platforms/stacks/etc. on
- * ItemCard. Mirrors openapps' `.chip` from the ItemCard.astro
- * (component name retained for V1 published API stability).
- * `<style>` block so the @apply in the component still works. */
-.chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  border-radius: 0.375rem;
-  border: 1px solid var(--color-ink-200);
-  background: #ffffff;
-  padding: 0.125rem 0.375rem;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  color: var(--color-ink-700);
-  transition: color 150ms ease, background-color 150ms ease, border-color 150ms ease;
-}
-.dark .chip {
-  border-color: var(--color-ink-200);
-  background: var(--color-ink-950);
-  color: var(--color-ink-300);
-}
-.chip-stack {
-  background: var(--color-ink-50);
-}
-.dark .chip-stack {
-  background: rgba(24, 24, 27, 0.6);
-}
-.btn-primary,
-.btn-outline,
-.btn-ghost {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.375rem;
-  border-radius: 0.5rem;
-  padding: 0.5rem 0.875rem;
-  font-size: 0.875rem;
-  font-weight: 500;
-  white-space: nowrap;
-  transition: color 0.15s, background-color 0.15s, border-color 0.15s;
-  cursor: pointer;
-  border: 1px solid transparent;
-  text-decoration: none;
-}
-.btn-primary {
-  border-color: var(--color-ink-900);
-  background: var(--color-ink-900);
-  color: var(--color-ink-50);
-}
-.btn-primary:hover {
-  background: var(--color-ink-700);
-  border-color: var(--color-ink-700);
-}
-.btn-outline {
-  border-color: var(--color-ink-200);
-  background: var(--color-ink-50);
-  color: var(--color-ink-700);
-}
-.btn-outline:hover {
-  border-color: var(--color-ink-300);
-  background: var(--color-ink-100);
-}
-.btn-ghost {
-  background: transparent;
-  color: var(--color-ink-500);
-}
-.btn-ghost:hover {
-  color: var(--color-ink-900);
-  background: var(--color-ink-100);
-}