@contentrain/astro-kit 0.4.0 → 0.5.0

package/README.md

@@ -66,6 +66,8 @@ theme applies them to the kit's markers, and only when the site sets them:
 - `--text-body`: `[data-kit-text]`, the lead and body paragraphs of hero, CTA
   and card grid.
 - `--text-nav`: the header navigation, `[data-cr-part="nav-header"]`.
+- `--text-footer`: the footer's text and links, `[data-kit-footer]` (the kit's
+  own size is `text-sm`).
 - `--spacing-section`: the distance between two consecutive sections; each
   `[data-kit-section]` gets half of it as vertical padding, except
   where `data-kit-spacing="none"`.

package/catalog.json

@@ -22,6 +22,7 @@
     "--radius-image",
     "--spacing-gutter",
     "--text-nav",
+    "--text-footer",
     "--text-heading-1",
     "--text-heading-2",
     "--text-heading-3",
@@ -563,7 +564,7 @@
             "plain"
           ],
           "default": "lines",
-          "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes (WordPress's details block)."
+          "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes, questions at the body size (WordPress's details block)."
         },
         "tone": {
           "options": [
@@ -1236,6 +1237,14 @@
           ],
           "default": "compact",
           "description": "Gap and text size of the inline list."
+        },
+        "color": {
+          "options": [
+            "current",
+            "link"
+          ],
+          "default": "current",
+          "description": "current: the surrounding text, dimmed until hovered. link: the site's link colour (--color-link, else the accent) at full strength."
         }
       },
       "props": {

package/components/faq/Faq.astro

@@ -26,7 +26,7 @@ const faq = tv({
       lines: { list: 'divide-y divide-line border-y border-line' },
       cards: { list: 'gap-3', item: 'rounded-card border border-line px-5', summary: 'py-5' },
       // WordPress's details block: the browser's own disclosure triangle, no rules or box.
-      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-base [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 pl-5' },
+      plain: { list: 'gap-2', summary: 'list-item list-[revert] py-1 text-[length:var(--text-body,1rem)] [font-weight:inherit] [&::-webkit-details-marker]:inline', marker: 'hidden', answer: 'pt-2 pl-5' },
     },
     tone: { default: {}, muted: { item: 'bg-surface' }, inverse: { answer: 'prose-invert' }, accent: { answer: 'prose-invert' } },
   },

package/components/faq/meta.json

@@ -6,7 +6,7 @@
   "uses": [],
   "shared": ["Section.astro"],
   "variants": {
-    "style": { "options": ["lines", "cards", "plain"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes (WordPress's details block)." },
+    "style": { "options": ["lines", "cards", "plain"], "default": "lines", "description": "lines: rows divided by rules. cards: each question in a rounded box. plain: the browser's own disclosure triangle without rules or boxes, questions at the body size (WordPress's details block)." },
     "tone": { "options": ["default", "muted", "inverse", "accent"], "default": "default", "description": "Section background." }
   },
   "props": {

package/components/footer/Footer.astro

@@ -47,7 +47,7 @@ const year = String(new Date().getFullYear())
 const line = copyright?.replaceAll('{year}', year) ?? `© ${year} ${siteName}`
 ---
 <footer class={root()}>
-  <div class={inner()} style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
+  <div class={inner()} data-kit-footer style={layout === 'columns' ? `--footer-columns: ${Math.max(columns.length, 1)}` : undefined}>
     <div class="flex flex-col gap-3">
       <p class="text-base font-semibold" data-kit-brand>{siteName}</p>
       {tagline && <p class={muted()} data-kit-tagline>{tagline}</p>}

package/components/header/Header.astro

@@ -56,24 +56,15 @@ const { root, inner, brand } = header({ layout, tone, position })
 ---
 <header class={root()}>
   <div class={inner()}>
-    {tagline
-      ? (
-        <div class="flex flex-col gap-1">
-          <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
-            {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-            {showName && <span>{siteName}</span>}
-          </a>
-          <p class="opacity-75" data-kit-tagline>{tagline}</p>
-        </div>
-      )
-      : (
-        <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
-          {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
-          {showName && <span>{siteName}</span>}
-        </a>
-      )}
-    <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto', linkNav && 'text-[color:var(--color-link,var(--color-accent))]']}>
-      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" align={layout === 'centered' ? 'center' : 'end'} />
+    <div class="flex flex-col gap-1">
+      <a href={homeHref} class={brand()} aria-label={showName ? undefined : siteName} style={brandSize ? `font-size: ${brandSize}` : undefined} data-kit-brand>
+        {logo && <KitImage image={logo} priority class="h-8 w-auto" sizes="160px" />}
+        {showName && <span>{siteName}</span>}
+      </a>
+      {tagline && <p class="opacity-75" data-kit-tagline>{tagline}</p>}
+    </div>
+    <div class:list={['flex items-center gap-4', layout === 'centered' ? 'justify-center' : 'ml-auto']}>
+      <Nav items={items} label={navLabel} menuLabel={menuLabel} closeLabel={closeLabel} part="nav-header" color={linkNav ? 'link' : 'current'} align={layout === 'centered' ? 'center' : 'end'} />
       {action && <Button action={action} size="sm" class="hidden md:inline-flex" />}
     </div>
   </div>

package/components/nav/Nav.astro

@@ -8,7 +8,7 @@ import type { NavItem } from '../_shared/types'
 const nav = tv({
   slots: {
     list: 'hidden items-center md:flex',
-    link: 'text-current no-underline opacity-80 hover:opacity-100 aria-[current=page]:font-semibold aria-[current=page]:opacity-100',
+    link: 'no-underline aria-[current=page]:font-semibold',
     // hidden, not invisible: a closed submenu takes no space, so one under the last item cannot widen the page.
     sub: 'absolute top-full z-30 hidden min-w-48 rounded-lg border border-line bg-surface p-2 text-ink shadow-lg group-hover:block group-focus-within:block',
     toggle: 'inline-flex cursor-pointer list-none items-center gap-2 rounded-md px-3 py-2 text-sm font-medium hover:bg-current/10 md:hidden [&::-webkit-details-marker]:hidden',
@@ -17,8 +17,14 @@ const nav = tv({
     // Submenus open towards the page: leftwards under an end-aligned menu.
     align: { start: { list: 'justify-start', sub: 'left-0' }, end: { list: 'justify-end', sub: 'right-0' }, center: { list: 'justify-center', sub: 'left-0' } },
     density: { compact: { list: 'gap-5 text-sm' }, comfortable: { list: 'gap-8 text-base' } },
+    // current: the surrounding text, dimmed until hovered. link: the site's link colour at full strength, as themes that
+    // colour every link draw their menu; the toggle keeps the surrounding text.
+    color: {
+      current: { link: 'text-current opacity-80 hover:opacity-100 aria-[current=page]:opacity-100' },
+      link: { link: 'text-[color:var(--color-link,var(--color-accent))]' },
+    },
   },
-  defaultVariants: { align: 'end', density: 'compact' },
+  defaultVariants: { align: 'end', density: 'compact', color: 'current' },
 })
 
 interface Props {
@@ -32,14 +38,15 @@ interface Props {
   mobile?: 'popover' | 'details' | undefined
   align?: 'start' | 'end' | 'center' | undefined
   density?: 'compact' | 'comfortable' | undefined
+  color?: 'current' | 'link' | undefined
   /** Unique per page when a page has two navigations. */
   id?: string | undefined
   /** What the navigation is, for checks that find a page's parts (`data-cr-part`, e.g. "nav-header"). */
   part?: string | undefined
 }
 
-const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, id = 'site-nav', part } = Astro.props
-const { list, link, sub, toggle } = nav({ align, density })
+const { items, label = 'Main', menuLabel = 'Menu', closeLabel = 'Close', mobile = 'popover', align, density, color, id = 'site-nav', part } = Astro.props
+const { list, link, sub, toggle } = nav({ align, density, color })
 const current = Astro.url.pathname
 const drawer = `${id}-drawer`
 ---

package/components/nav/fixtures.json

@@ -61,6 +61,7 @@
     "props": {
       "id": "fx-nav-c",
       "align": "center",
+      "color": "link",
       "items": [
         {
           "label": "Work",

package/components/nav/meta.json

@@ -32,6 +32,14 @@
       ],
       "default": "compact",
       "description": "Gap and text size of the inline list."
+    },
+    "color": {
+      "options": [
+        "current",
+        "link"
+      ],
+      "default": "current",
+      "description": "current: the surrounding text, dimmed until hovered. link: the site's link colour (--color-link, else the accent) at full strength."
     }
   },
   "props": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "license": "MIT",
   "description": "Copy-in Astro components for Contentrain sites (shadcn model): typed props, tailwind-variants, zero JavaScript by default — with a machine-readable catalog",
   "type": "module",
@@ -42,7 +42,7 @@
     "mapping"
   ],
   "dependencies": {
-    "@contentrain/types": "1.28.0"
+    "@contentrain/types": "1.29.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",