@contentrain/astro-kit 0.27.2 → 0.28.1

package/README.md

@@ -46,9 +46,16 @@ Each component lives in `components/<id>/`:
 Components use colour roles and widths, never raw values. A site defines them
 in `@theme` (the starter already does): `--color-surface`,
 `--color-surface-muted`, `--color-ink`, `--color-ink-muted`, `--color-line`,
-`--color-accent`, `--color-accent-ink`, `--font-sans`, `--container-prose`,
+`--color-accent`, `--color-accent-ink`, `--color-accent-text`,
+`--color-accent-text-inverse`, `--font-sans`, `--container-prose`,
 `--container-page`, `--container-wide` and `--radius-card`.
 
+Text in the accent (an eyebrow, a category link) reads `--color-accent-text`, never
+`--color-accent`: an accent picked for fills can be too light for text on the page.
+The starter sets it to the accent; a site whose accent does not reach 4.5:1 on its
+surface sets a readable one. A dark section (`tone="inverse"`) reads
+`--color-accent-text-inverse` in its place.
+
 A migrated site also carries its theme's type and shape, and components read
 these with a fallback to the kit's own values, so a site without them looks
 unchanged:

package/catalog.json

@@ -8,6 +8,8 @@
     "--color-line",
     "--color-accent",
     "--color-accent-ink",
+    "--color-accent-text",
+    "--color-accent-text-inverse",
     "--font-sans",
     "--container-prose",
     "--container-page",

package/components/_shared/Section.astro

@@ -10,7 +10,8 @@ const section = tv({
     tone: {
       default: 'bg-surface text-ink',
       muted: 'bg-surface-muted text-ink',
-      inverse: 'bg-ink text-surface',
+      // A dark band reads the accent's text colour made for it (`--color-accent-text-inverse`).
+      inverse: 'bg-ink text-surface [--color-accent-text:var(--color-accent-text-inverse)]',
       accent: 'bg-accent text-accent-ink',
       // The site's brand colour where it is not the accent (a band the source paints in the builder's own colour).
       brand: 'bg-brand text-brand-ink',

package/components/card-grid/CardGrid.astro

@@ -72,10 +72,10 @@ const headingId = title ? `cards-${title.toLowerCase().replace(/[^a-z0-9]+/g, '-
     {items.map(item => (
       <li class={card()}>
         {imageOf(item.image, item.imageAlt) && <div class={media()}><KitImage image={imageOf(item.image, item.imageAlt)!} sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw" class="aspect-[3/2] w-full object-cover transition duration-300 group-hover:scale-[1.02]" /></div>}
-        {item.eyebrow && <p class="text-sm font-medium text-accent">{item.eyebrow}</p>}
+        {item.eyebrow && <p class="text-sm font-medium text-accent-text">{item.eyebrow}</p>}
         <CardHeading class={cardTitle()}>
           {item.href
-            ? <a href={item.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{item.title}</a>
+            ? <a href={item.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{item.title}</a>
             : item.title}
         </CardHeading>
         {item.text && <p class={text({ class: dim })} data-kit-text>{item.text}</p>}

package/components/feature-list/FeatureList.astro

@@ -8,7 +8,7 @@ const list = tv({
   slots: {
     grid: 'grid gap-x-8 gap-y-10 sm:grid-cols-2',
     item: 'flex gap-4',
-    mark: 'flex size-6 shrink-0 items-center justify-center text-accent',
+    mark: 'flex size-6 shrink-0 items-center justify-center text-accent-text',
     title: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)] text-balance',
     text: 'mt-1 opacity-80',
   },

package/components/post-card/PostCard.astro

@@ -29,7 +29,7 @@ const card = tv({
     },
     byline: {
       inline: {},
-      below: { meta: 'text-xs font-semibold text-accent' },
+      below: { meta: 'text-xs font-semibold text-accent-text' },
     },
   },
   defaultVariants: { layout: 'vertical', surface: 'plain', byline: 'inline' },
@@ -75,13 +75,13 @@ const Heading = `h${headingLevel}` as 'h2' | 'h3'
     )}
     {!below && (category || date) && (
       <p class={slots.meta()}>
-        {category && <a href={category.href} class="relative z-10 font-medium text-accent no-underline hover:underline">{category.label}</a>}
+        {category && <a href={category.href} class="relative z-10 font-medium text-accent-text no-underline hover:underline">{category.label}</a>}
         {category && date && <span aria-hidden="true">·</span>}
         {date && <time datetime={date.toISOString()}>{shown}</time>}
       </p>
     )}
     <Heading class={slots.title({ class: linkTitle ? 'text-[color:var(--color-link,var(--color-accent))]' : undefined })}>
-      <a href={href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{title}</a>
+      <a href={href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{title}</a>
     </Heading>
     {below && (author || date) && (
       <p class={slots.meta()}>

package/components/team/Team.astro

@@ -15,7 +15,7 @@ const team = tv({
     member: 'group relative flex flex-col gap-3',
     portrait: 'overflow-hidden rounded-[var(--radius-image,var(--radius-card))]',
     name: 'text-lg leading-snug [font-weight:var(--font-weight-heading,600)]',
-    role: 'text-sm font-medium text-accent',
+    role: 'text-sm font-medium text-accent-text',
     bio: 'text-pretty opacity-80',
   },
   variants: {
@@ -75,7 +75,7 @@ const NameHeading = heading ? 'h3' : 'h2'
           {imageOf(member.image, member.imageAlt ?? member.name) && <div class={s.portrait()}><KitImage image={imageOf(member.image, member.imageAlt ?? member.name)!} sizes="(min-width: 1024px) 25vw, (min-width: 640px) 50vw, 100vw" class="aspect-square w-full object-cover" /></div>}
           <NameHeading class={s.name()}>
             {member.href
-              ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent">{member.name}</a>
+              ? <a href={member.href} class="text-current no-underline after:absolute after:inset-0 after:content-[''] hover:text-accent-text">{member.name}</a>
               : member.name}
           </NameHeading>
           {member.role && <p class={s.role()}>{member.role}</p>}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contentrain/astro-kit",
-  "version": "0.27.2",
+  "version": "0.28.1",
   "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.53.0"
+    "@contentrain/types": "1.54.0"
   },
   "devDependencies": {
     "@types/node": "^22.10.0",