ferst-core 0.9.2 → 0.9.4

package/components/Button.astro

@@ -94,13 +94,13 @@ const {
   .btn--primary {
     background: var(--gold);
     border-color: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--primary:hover,
   .btn--primary:focus-visible {
     background: color-mix(in srgb, var(--gold) 85%, #000);
     border-color: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--primary:focus-visible {
     outline: 2px solid var(--gold);
@@ -122,7 +122,7 @@ const {
      darkens the accent via color-mix, which works for any brand colour. */
   .btn--cta {
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     border: none;
     border-radius: 8px;
     font-family: var(--font-body);
@@ -145,11 +145,11 @@ const {
 
   .btn--cta:hover {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--cta:focus-visible {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
     outline: 2px solid var(--gold);
     outline-offset: 2px;
   }
@@ -161,7 +161,7 @@ const {
     margin-top: auto;
     align-self: var(--content-self, flex-start);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     border: none;
     border-radius: 8px;
     font-family: var(--font-body);
@@ -184,11 +184,11 @@ const {
 
   .btn--compact:hover {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .btn--compact:focus-visible {
     background: color-mix(in srgb, var(--gold) 85%, #000);
-    color: var(--text-light);
+    color: var(--on-brand);
     outline: 2px solid var(--gold);
     outline-offset: 2px;
   }

package/components/CalendarEmbed.astro

@@ -171,7 +171,7 @@ const safe = isSafeEmbedUrl(finalEmbedUrl);
     border: none;
     border-radius: var(--radius-sm);
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     cursor: pointer;
     transition: filter 0.15s ease;
   }

package/components/CookieBanner.astro

@@ -120,7 +120,7 @@ const { policyHref = '/cookie-policy/' } = Astro.props;
   .cookie-banner__btn--primary {
     border: none;
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .cookie-banner__btn--primary:hover { filter: brightness(0.94); }
   .cookie-banner__btn--ghost {

package/components/PostsFilter.astro

@@ -64,7 +64,7 @@ const { tags, active } = Astro.props;
   .posts-filter__chip.is-active {
     background: var(--gold);
     border-color: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
   }
   .posts-filter__count {
     font-size: 0.75em;

package/components/SiteFooter.astro

@@ -85,6 +85,7 @@ const year = new Date().getFullYear();
       {footerLinks.map((link) => (
         <a href={link.href} set:html={link.label} />
       ))}
+      {import.meta.env.FERST_ROUTES_ACCESSIBILITY !== false && <a href="/accessibility/">Accessibility</a>}
       <button type="button" id="footer-cookie-preferences">Cookie preferences</button>
     </nav>
     <p class="footer-copy">&copy; {year} All rights reserved.</p>

package/components/SiteHeader.astro

@@ -398,7 +398,7 @@ const primaryNavLongestMatch = Math.max(-1, ...primaryNavMatchLengths);
     white-space: nowrap;
   }
   .nav-cta:hover,
-  .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #000); color: var(--text-light); border: none; }
+  .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #000); color: var(--on-brand); border: none; }
   [data-theme="dark"] .nav-cta { background: var(--gold); color: var(--dark-bg); border: none; }
   [data-theme="dark"] .nav-cta:hover,
   [data-theme="dark"] .nav-cta.active { background: color-mix(in srgb, var(--gold) 85%, #fff); color: var(--dark-bg); border: none; }

package/components/StickyCallout.astro

@@ -111,7 +111,7 @@ const paras = text.split(/\n\s*\n/).map((p) => p.trim()).filter(Boolean);
     gap: 0.5rem;
     padding: 0.6rem 1.05rem;
     background: var(--gold);
-    color: var(--text-light);
+    color: var(--on-brand);
     border-radius: 999px;
     box-shadow: var(--shadow-md);
     cursor: pointer;

package/components/recipes/Announcement.astro

@@ -33,7 +33,7 @@ const key = `ferst-dismissed-${id}`;
     font-size: 0.9rem;
     text-align: center;
   }
-  .b-announce[data-tone='accent'] { background: var(--gold); color: var(--text-light); }
+  .b-announce[data-tone='accent'] { background: var(--gold); color: var(--on-brand); }
   .b-announce[data-tone='neutral'] { background: var(--bg-section); color: var(--fg); }
   .b-announce__text { margin: 0; line-height: 1.4; }
   .b-announce__link {

package/components/recipes/Bento.astro

@@ -23,6 +23,8 @@ interface Props {
   items?: Item[];
 }
 const { title, intro, items = [] } = Astro.props;
+// Headings stay in order: items sit one level under the block's title, or take its place.
+const ItemHeading = title ? 'h3' : 'h2';
 // Alignment overrides (BlockLayout): the title + intro default to centred; the block's
 // own `align`, or `headingAlign` for the title alone, overrides it from the page data.
 const { align: blockAlign, headingAlign } = Astro.props as { align?: 'start' | 'center' | 'end'; headingAlign?: 'start' | 'center' | 'end' };
@@ -46,7 +48,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
             <span class="b-bento__icon"><Icon name={item.icon} size={24} /></span>
           )}
           {item.eyebrow && <span class="b-bento__eyebrow">{item.eyebrow}</span>}
-          <h3 class="b-bento__title">{item.title}</h3>
+          <ItemHeading class="b-bento__title">{item.title}</ItemHeading>
           {item.text && <p class="b-bento__text">{item.text}</p>}
         </Tag>
       );
@@ -106,7 +108,7 @@ const headAlign = headingAlign ?? blockAlign ?? 'center';
   }
   .b-bento__item[data-variant='surface'] { background: var(--bg-surface); border: var(--card-border); box-shadow: var(--shadow-md); }
   .b-bento__item[data-variant='filled'] { background: var(--gold-light); }
-  .b-bento__item[data-variant='gradient'] { background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold))); color: var(--text-light); }
+  .b-bento__item[data-variant='gradient'] { background: linear-gradient(135deg, var(--gold), var(--accent-2, var(--gold))); color: var(--on-brand); }
   .b-bento__item[data-variant='image'] { color: #fff; justify-content: flex-end; min-height: 11rem; }
   .b-bento__item[data-variant='image']::before {
     content: '';