@grove-dev/astro 0.2.18 → 0.2.20

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);

package/templates/default/src/styles/global.css

@@ -5,26 +5,22 @@
  * at scaffold time; we expose the same names as CSS variables so
  * consumers can layer their own brand colors in without forking.
  *
- * The `ink-*` color scale is preserved from the V0 template because
- * the page-level classes (`text-ink-900`, `bg-ink-50`, ...) still
- * reference it. New pages should prefer the default Tailwind
- * `gray-*` / `slate-*` palettes; the ink scale exists for
- * back-compat with the V1 minimal template.
+ * The package owns the Starlight-aligned palette, semantic theme tokens,
+ * font stacks, and light/dark base styles. This consumer sheet contains
+ * only scaffold-level overrides so those foundations cannot drift when
+ * the package theme changes.
+ *
+ * NOTE: do NOT add `@custom-variant dark` here. `@grove-dev/astro`'s
+ * `styles.css` already declares the `.dark`-class variant, and
+ * Tailwind v4 only honors one definition per build — adding a
+ * second one in this consumer file has been observed to confuse
+ * the variant resolution and produce utilities that key off
+ * `prefers-color-scheme` instead of the `.dark` class on <html>.
+ * The net effect: `<html class="dark">` is set but the page stays
+ * in light mode because the `dark:` utilities never match.
  */
 @theme {
-  --color-ink-50: #fafafa;
-  --color-ink-100: #f4f4f5;
-  --color-ink-200: #e4e4e7;
-  --color-ink-300: #d4d4d8;
-  --color-ink-400: #a1a1aa;
-  --color-ink-500: #71717a;
-  --color-ink-600: #52525b;
-  --color-ink-700: #3f3f46;
-  --color-ink-800: #27272a;
-  --color-ink-900: #18181b;
-  --color-ink-950: #09090b;
-
-  --color-grove-primary: #16a34a;
+  --color-grove-primary: var(--color-foreground);
 }
 
 @layer base {
@@ -33,26 +29,5 @@
     --grove-radius: 0.5rem;
     --grove-container-width: 72rem;
 
-    color-scheme: light dark;
-  }
-
-  html {
-    -webkit-text-size-adjust: 100%;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-  }
-
-  body {
-    background: #ffffff;
-    color: var(--color-ink-900);
-    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
-      "Helvetica Neue", Arial, sans-serif;
-    font-size: 15px;
-    line-height: 1.55;
-  }
-
-  body.dark {
-    background: var(--color-ink-950);
-    color: var(--color-ink-100);
   }
 }

package/templates/default/tailwind.config.mjs

@@ -1,130 +0,0 @@
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ['./src/**/*.{astro,html,js,jsx,ts,tsx,md,mdx}'],
-  // Use a `.dark` class on <html> (toggled by the theme script in
-  // the document head) rather than the OS media query, so a manual
-  // theme switcher can override the user's system preference.
-  darkMode: 'class',
-  theme: {
-    // Disable default palette so we only ship our own neutral / accent
-    // tokens. Keeps the bundle small and forces a unified look.
-    colors: {
-      transparent: 'transparent',
-      current: 'currentColor',
-      white: '#ffffff',
-      black: '#000000',
-      ink: {
-        50: '#fafafa',
-        100: '#f4f4f5',
-        200: '#e4e4e7',
-        300: '#d4d4d8',
-        400: '#a1a1aa',
-        500: '#71717a',
-        600: '#52525b',
-        700: '#3f3f46',
-        800: '#27272a',
-        900: '#18181b',
-        950: '#09090b',
-      },
-      accent: {
-        DEFAULT: '#1f6feb',
-        muted: '#388bfd1a',
-      },
-      emerald: {
-        50: '#ecfdf5',
-        300: '#6ee7b7',
-        400: '#34d399',
-        700: '#047857',
-        800: '#065f46',
-        950: '#022c22',
-      },
-      orange: {
-        50: '#fff7ed',
-        300: '#fdba74',
-        400: '#fb923c',
-        700: '#c2410c',
-        800: '#9a3412',
-        950: '#431407',
-      },
-      blue: {
-        50: '#eff6ff',
-        300: '#93c5fd',
-        400: '#60a5fa',
-        700: '#1d4ed8',
-        800: '#1e40af',
-        950: '#172554',
-      },
-      amber: {
-        50: '#fffbeb',
-        300: '#fcd34d',
-        400: '#fbbf24',
-        700: '#b45309',
-        800: '#92400e',
-        950: '#451a03',
-      },
-    },
-    extend: {
-      fontFamily: {
-        sans: [
-          'ui-sans-serif',
-          'system-ui',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          '"Helvetica Neue"',
-          'Arial',
-          'sans-serif',
-        ],
-        mono: [
-          'ui-monospace',
-          'SFMono-Regular',
-          'Menlo',
-          'Monaco',
-          'Consolas',
-          '"Liberation Mono"',
-          '"Courier New"',
-          'monospace',
-        ],
-      },
-      fontSize: {
-        '2xs': ['0.6875rem', { lineHeight: '1rem' }],
-      },
-      maxWidth: {
-        container: '1140px',
-        wide: '1400px',
-        narrow: '720px',
-      },
-      borderRadius: {
-        DEFAULT: '0.375rem',
-        lg: '0.5rem',
-        xl: '0.75rem',
-      },
-      keyframes: {
-        'fade-in-up': {
-          '0%': { opacity: '0', transform: 'translateY(8px)' },
-          '100%': { opacity: '1', transform: 'translateY(0)' },
-        },
-        'fade-in': {
-          '0%': { opacity: '0' },
-          '100%': { opacity: '1' },
-        },
-        'gradient-shift': {
-          '0%, 100%': { 'background-position': '0% 50%' },
-          '50%': { 'background-position': '100% 50%' },
-        },
-        'subtle-bob': {
-          '0%, 100%': { transform: 'translateY(0)' },
-          '50%': { transform: 'translateY(-2px)' },
-        },
-      },
-      animation: {
-        'fade-in-up': 'fade-in-up 0.6s ease-out both',
-        'fade-in': 'fade-in 0.8s ease-out both',
-        'gradient-shift': 'gradient-shift 8s ease-in-out infinite',
-        'subtle-bob': 'subtle-bob 3s ease-in-out infinite',
-      },
-    },
-  },
-  plugins: [],
-};