ferst-core 0.9.2 → 0.9.4

package/lib/themeTokens.ts

@@ -25,14 +25,11 @@
  * Pure + framework-free so it is unit-testable without a render.
  */
 import type { ThemeSettings } from '../content/schemas';
+import { DARK_DEFAULTS, NEUTRAL_SOURCE } from './themeDefaults';
+import { onBrandColour } from './contrast';
+
+export { DARK_DEFAULTS, NEUTRAL_SOURCE };
 
-/** The neutral source triple — used to fill any colour a client leaves blank so
- *  the derivation is always self-contained (mirrors `styles/theme.css`). */
-export const NEUTRAL_SOURCE = {
-  brand: '#4F46E5',
-  ink: '#1F2937',
-  surface: '#F1F5F9',
-} as const;
 
 /** Corner-knob vocabulary → the `--radius` value every surface reads. */
 export const CORNERS_PX: Record<ThemeSettings['corners'], string> = {
@@ -111,10 +108,11 @@ const DARK_DOWNSTREAM = [
   '--gold-light:oklch(from var(--dark-accent) calc(l - 0.46) calc(c * 0.6) h)',
   '--accent-2:oklch(from var(--dark-accent) calc(l - 0.08) c calc(h + 26))',
   '--text-footer-link:var(--dark-accent)',
+  // Text on brand fills: the accent is light in dark mode, so its text is the dark ground
+  // (light text on it fell to ~1.9:1; lib/contrast.ts checks it).
+  '--on-brand:var(--dark-ground)',
 ].join(';');
 
-/** Defaults for the dark-formula knobs (also the CMS/schema defaults). */
-export const DARK_DEFAULTS = { depth: 0.21, chroma: 0.05 } as const;
 
 /** Clamp a numeric knob to a range, falling back to `fallback` when absent/NaN. */
 function clampNum(v: unknown, min: number, max: number, fallback: number): number {
@@ -188,6 +186,10 @@ export function buildThemeStyle(theme: ThemeSettings): ThemeStyle {
     rootDecls.push(`--brand:${brand || NEUTRAL_SOURCE.brand}`);
     rootDecls.push(`--ink:${ink || NEUTRAL_SOURCE.ink}`);
     rootDecls.push(`--surface:${surface || NEUTRAL_SOURCE.surface}`);
+    // Text on brand fills: white or the ink, whichever reads better on the brand (dark mode
+    // overrides it with the dark ground). A colour it can't read leaves theme.css's white.
+    const onBrand = onBrandColour(brand || NEUTRAL_SOURCE.brand, ink || NEUTRAL_SOURCE.ink);
+    if (onBrand) rootDecls.push(`--on-brand:${onBrand}`);
   }
   const fh = clean(theme.fonts?.heading);
   const fb = clean(theme.fonts?.body);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ferst-core",
-  "version": "0.9.2",
+  "version": "0.9.4",
   "type": "module",
   "description": "Ferst Core — the shared, brand-agnostic client-site system: Astro components, layouts, content schemas, the layered config resolver, and a neutral styling architecture that every client overrides.",
   "license": "BUSL-1.1",

package/routes/accessibility.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * The accessibility statement (`/accessibility`) — INJECTED by the ferst() integration, and
+ * linked from every page's footer. Generated from the site's name and contact details
+ * (content/accessibility.ts). A site with its own `src/pages/accessibility.astro` keeps it
+ * (the integration skips this route then).
+ */
+import Base from '../layouts/Base.astro';
+import { loadSiteSettings } from '../lib/siteSettings';
+import { accessibilityStatement } from '../content/accessibility';
+
+const { identity, contact } = await loadSiteSettings();
+const statement = accessibilityStatement({
+  siteName: identity.siteTitle || identity.shortName,
+  email: contact.email || undefined,
+  phone: contact.phoneDisplay || undefined,
+});
+const tel = contact.phoneTel || contact.phoneDisplay;
+---
+
+<Base title={statement.title} description={`How ${identity.shortName || identity.siteTitle} works for everyone, and how to report a problem.`}>
+  <section class="b-accessibility">
+    <h1>{statement.title}</h1>
+    <p>{statement.intro}</p>
+    {statement.sections.map((s) => (
+      <>
+        <h2>{s.heading}</h2>
+        {s.paragraphs.map((p) => <p>{p}</p>)}
+        {s.items && <ul>{s.items.map((i) => <li>{i}</li>)}</ul>}
+        {s.contact && (
+          <ul>
+            {s.contact.email && <li>Email: <a href={`mailto:${s.contact.email}`}>{s.contact.email}</a></li>}
+            {s.contact.phone && <li>Phone: <a href={`tel:${tel}`}>{s.contact.phone}</a></li>}
+          </ul>
+        )}
+      </>
+    ))}
+  </section>
+</Base>
+
+<style>
+  .b-accessibility { max-width: 52rem; margin-inline: auto; padding: 2rem 1rem 3rem; }
+  .b-accessibility ul { padding-inline-start: 1.25rem; }
+</style>

package/styles/theme.css

@@ -41,6 +41,7 @@
   --gold-light: #E0E7FF;
   --brown: #4B5563;
   --text-light: #FFFFFF;
+  --on-brand: #FFFFFF; /* text on brand-coloured fills (buttons, badges) */
   --text-footer: #4B5563;
   --text-footer-link: #4F46E5;
   --text-copyright: #94A3B8;
@@ -109,6 +110,7 @@
   --gold-light: #312E81;
   --brown: #94A3B8;
   --text-light: #E2E8F0;
+  --on-brand: #0F172A; /* the light accent needs dark text */
   --text-footer: #94A3B8;
   --text-footer-link: #818CF8;
   --text-copyright: #64748B;