@supertype.ai/foundations 0.1.33 → 0.1.35

package/README.md

@@ -66,7 +66,7 @@ untagged git dependency resolves to a different commit on a fresh install.
 
 ```jsonc
 // package.json
-"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.33"
+"@supertype.ai/foundations": "https://github.com/supertypeai/foundations.git#v0.1.35"
 ```
 
 </details>

package/dist/blocks/bulletin.d.ts

@@ -0,0 +1,71 @@
+import type { ReactNode } from "react";
+/** One cell of the grid. `mark` and `ink` are class names, so they can be any
+ *  hue the consuming app has: `bg-fern`/`text-fern-ink` from theme.css, or a
+ *  token of their own. Both optional — a point with no hue is a plain one. */
+export interface BulletinPoint {
+    title: ReactNode;
+    body: ReactNode;
+    /** The dot before the title. A background class: `bg-terracotta`. */
+    mark?: string;
+    /** The title's ink. A text class: `text-terracotta-ink`. */
+    ink?: string;
+}
+export interface BulletinProps {
+    /** `card` is the panel. `line` is the same statement at one line: the accent,
+     *  the action and the sentence, with the grid dropped. */
+    variant?: "card" | "line";
+    /**
+     * Drawn along the top edge of the panel, full width, before the padding
+     * starts. `<Ribbon />` is the one that ships; a rule, a gradient or nothing
+     * are all fine.
+     */
+    accent?: ReactNode;
+    /** The kicker over the headline. */
+    eyebrow?: ReactNode;
+    headline?: ReactNode;
+    /** The sentence under the headline on `card`, and the whole of the copy on `line`. */
+    lede?: ReactNode;
+    /** The grid. One point renders full width; two or more go two-up from `sm`. */
+    points?: readonly BulletinPoint[];
+    /** The control on the footer rule — a `Button`, a link, a form. */
+    action?: ReactNode;
+    /** The line opposite the action. A licence, a date, a version. */
+    footnote?: ReactNode;
+    /** Under the rule, for whatever the panel has left to say. */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * The shell. Every slot is optional, and an omitted one renders nothing rather
+ * than an empty box, so the same component covers a full credits panel and a
+ * headline with one button under it.
+ */
+export declare function Bulletin({ variant, accent, eyebrow, headline, lede, points, action, footnote, children, className, }: BulletinProps): import("react").JSX.Element;
+/** One band of the ribbon: the class that paints it, and the word shown on hover. */
+export interface RibbonHue {
+    name: string;
+    fill: string;
+}
+/**
+ * The categorical palette in ribbon order: warm through green through cool and
+ * back to earth, so the run reads as one spectrum rather than eight swatches.
+ *
+ * Written out one full classname at a time, never assembled from the name.
+ * Tailwind generates the classes it can see as literals, and a template string
+ * would leave every one of them purged with nothing to report. A consumer
+ * passing hues of their own is subject to the same rule in their own source.
+ */
+export declare const EDITORIAL_INKS: readonly RibbonHue[];
+/**
+ * A band of hues, for a `Bulletin`'s `accent`. Decorative, so it is hidden from
+ * the reader that cannot see it and carries a `title` for the one that can:
+ * hovering names the hue, and the segment widens to show the cut at full size.
+ *
+ * `h-1.5 w-full` on a panel and `h-1 min-w-20 flex-1 rounded-full` in a row —
+ * stated by the caller, since the two shapes have nothing in common but the
+ * colours.
+ */
+export declare function Ribbon({ hues, className, }: {
+    hues?: readonly RibbonHue[];
+    className?: string;
+}): import("react").JSX.Element;

package/dist/blocks/bulletin.js

@@ -0,0 +1,53 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+import { INK_ON_CARD } from "../tone.js";
+import { TypographyCaption, TypographyLabel, TypographyMuted, } from "../typography/paragraph.js";
+import { TypographyEyebrow, TypographyH3 } from "../typography/header.js";
+/**
+ * The shell. Every slot is optional, and an omitted one renders nothing rather
+ * than an empty box, so the same component covers a full credits panel and a
+ * headline with one button under it.
+ */
+export function Bulletin({ variant = "card", accent, eyebrow, headline, lede, points, action, footnote, children, className, }) {
+    if (variant === "line") {
+        return (_jsxs("div", { className: cn("flex flex-wrap items-center gap-x-4 gap-y-3", "pt-4", className), children: [action, accent, lede && _jsx(TypographyCaption, { size: "2xs", children: lede })] }));
+    }
+    const rule = action || footnote;
+    return (_jsxs("section", { className: cn("overflow-hidden rounded-xl border border-border", 
+        // It paints, so it hands down its ink.
+        "bg-card", INK_ON_CARD, className), children: [accent, _jsxs("div", { className: "p-6 sm:p-8", children: [eyebrow && (_jsx(TypographyEyebrow, { tone: "subtle", children: eyebrow })), headline && (_jsx(TypographyH3, { className: cn("max-w-lg", eyebrow && "mt-2"), children: headline })), lede && (_jsx(TypographyMuted, { as: "p", className: "mt-2 max-w-xl", children: lede })), points && points.length > 0 && (
+                    // A lone point takes the width. Two columns holding one of them is a
+                    // grid drawn around an empty cell.
+                    _jsx("ul", { className: cn("mt-7 grid gap-6", points.length > 1 && "sm:grid-cols-2"), children: points.map(({ title, body, mark, ink }, i) => (_jsxs("li", { children: [_jsxs(TypographyLabel, { as: "p", size: "xs", className: cn("flex items-center gap-2", ink), children: [mark && (_jsx("span", { "aria-hidden": true, className: cn("size-2 rounded-full", mark) })), title] }), _jsx(TypographyCaption, { as: "p", size: "xs", className: "mt-1.5", children: body })] }, i))) })), rule && (_jsxs("div", { className: "mt-8 flex flex-wrap items-center justify-between gap-4 border-t border-border pt-5", children: [action, footnote && (_jsx(TypographyCaption, { size: "2xs", children: footnote }))] })), children && (_jsx(TypographyCaption, { as: "div", size: "xs", className: cn(rule && "mt-5"), children: children }))] })] }));
+}
+/**
+ * The categorical palette in ribbon order: warm through green through cool and
+ * back to earth, so the run reads as one spectrum rather than eight swatches.
+ *
+ * Written out one full classname at a time, never assembled from the name.
+ * Tailwind generates the classes it can see as literals, and a template string
+ * would leave every one of them purged with nothing to report. A consumer
+ * passing hues of their own is subject to the same rule in their own source.
+ */
+export const EDITORIAL_INKS = [
+    { name: "terracotta", fill: "bg-terracotta" },
+    { name: "ochre", fill: "bg-ochre" },
+    { name: "moss", fill: "bg-moss" },
+    { name: "fern", fill: "bg-fern" },
+    { name: "sage", fill: "bg-sage" },
+    { name: "stone", fill: "bg-stone" },
+    { name: "fig", fill: "bg-fig" },
+    { name: "cocoa", fill: "bg-cocoa" },
+];
+/**
+ * A band of hues, for a `Bulletin`'s `accent`. Decorative, so it is hidden from
+ * the reader that cannot see it and carries a `title` for the one that can:
+ * hovering names the hue, and the segment widens to show the cut at full size.
+ *
+ * `h-1.5 w-full` on a panel and `h-1 min-w-20 flex-1 rounded-full` in a row —
+ * stated by the caller, since the two shapes have nothing in common but the
+ * colours.
+ */
+export function Ribbon({ hues = EDITORIAL_INKS, className, }) {
+    return (_jsx("div", { "aria-hidden": true, className: cn("flex overflow-hidden", className), children: hues.map(({ name, fill }) => (_jsx("span", { title: name, className: cn("flex-1 transition-[flex-grow] duration-500 ease-out hover:grow-[2.5]", fill) }, name))) }));
+}

package/dist/blocks/button.d.ts

@@ -4,10 +4,10 @@ import { type VariantProps } from "class-variance-authority";
 import { type LinkBehavior } from "../href.js";
 declare const button: (props?: ({
     tone?: "muted" | "primary" | "secondary" | "brand" | "success" | "warn" | "destructive" | null | undefined;
-    size?: "sm" | "xs" | "md" | "lg" | "xl" | null | undefined;
+    size?: "sm" | "xs" | "lg" | "xl" | "md" | null | undefined;
     icon?: boolean | null | undefined;
     pill?: boolean | null | undefined;
-    variant?: "solid" | "link" | "soft" | "outline" | "ghost" | null | undefined;
+    variant?: "link" | "solid" | "soft" | "outline" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ButtonLook = VariantProps<typeof button>;
 /**

package/dist/blocks/colophon.d.ts

@@ -0,0 +1,48 @@
+import type { ReactNode } from "react";
+/** Where the mark points. Exported because a footer sometimes wants the bare
+ *  href — a `<link rel="…">`, a sitemap entry, an analytics label. */
+export declare const FOUNDATIONS_URL = "https://github.com/supertypeai/foundations";
+/**
+ * The palette reduced to a small chip. It is small enough for a footer row and
+ * still recognisable from the full panel.
+ */
+export declare function FoundationsMark({ className }: {
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * The standalone link. It is meant for a footer row or another layout that
+ * already has its own structure. Use `Colophon` when the block itself is the
+ * thing being placed.
+ */
+export declare function BuiltWithFoundations({ label, className, }: {
+    label?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+export interface ColophonProps {
+    /**
+     * `card` is the full panel and `line` is the compact row.
+     */
+    variant?: "card" | "line";
+    /**
+     * The link label. Use this for translations or a different wording.
+     */
+    label?: ReactNode;
+    /**
+     * Extra content for the panel, such as a short note about the site or the
+     * people behind it.
+     */
+    children?: ReactNode;
+    className?: string;
+}
+/**
+ * A preset built on top of `Bulletin`.
+ *
+ * ```tsx
+ * <Colophon />                 // the panel
+ * <Colophon variant="line" />  // the compact row
+ * ```
+ *
+ * Use `BuiltWithFoundations` for the standalone link, and `Bulletin` if you
+ * want the same layout with different copy.
+ */
+export declare function Colophon({ variant, label, children, className, }: ColophonProps): import("react").JSX.Element;

package/dist/blocks/colophon.js

@@ -0,0 +1,82 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../cn.js";
+import { Button } from "./button.js";
+import { Bulletin, EDITORIAL_INKS, Ribbon, } from "./bulletin.js";
+// ---------------------------------------------------------------------------
+// A compact statement block for a footer, a section, or a page.
+//
+// Colophon keeps the name because it matches the role: a short note about the
+// system behind the site. The layout is shared with Bulletin, while the copy
+// here is the package's own preset.
+//
+// The panel uses the editorial inks and the row uses the same mark in a tighter
+// layout. The content is mostly fixed, but the label and children can be
+// replaced for a site that wants its own wording.
+// ---------------------------------------------------------------------------
+/** Where the mark points. Exported because a footer sometimes wants the bare
+ *  href — a `<link rel="…">`, a sitemap entry, an analytics label. */
+export const FOUNDATIONS_URL = "https://github.com/supertypeai/foundations";
+/**
+ * The two claims, each paired with a hue from the ribbon above it.
+ *
+ * They are short statements about how the package is built and how the system
+ * is checked.
+ */
+const CLAIMS = [
+    {
+        mark: "bg-terracotta",
+        ink: "text-terracotta-ink",
+        title: "Decisions live in one place",
+        body: "Utility classes are for styling. The actual decision belongs in the design system. Every type style, tone, and divider on this page comes from one package, so a change is one diff instead of a search through the app.",
+    },
+    {
+        mark: "bg-sage",
+        ink: "text-sage-ink",
+        title: "Every colour is measured twice",
+        body: "WCAG tells us whether a colour passes the audit. APCA's Lc tells us how it feels in context, since the same contrast can read differently on different backgrounds. Both checks run against the shipped stylesheet in light and dark mode, so CI catches anything that slips.",
+    },
+];
+const HEADLINE = "Designed with intention and mathematical rigor.";
+/** The panel has a paragraph's room under its headline. */
+const LEDE = "Typography primitives, semantic tokens, the essay shell, and contrast checks in one package, enforced in CI.";
+/** The row has a line. Sharing `LEDE` with the panel put a paragraph in a
+ *  footer, where it wrapped under the ribbon and stopped being a row. */
+const NOTE = "Colors, typography, and blocks, tested and measured.";
+const FOOTNOTE = "Open source design system by Supertype. MIT licensed.";
+/**
+ * The palette reduced to a small chip. It is small enough for a footer row and
+ * still recognisable from the full panel.
+ */
+export function FoundationsMark({ className }) {
+    return (_jsx("span", { "aria-hidden": true, className: cn("grid size-4 shrink-0 grid-cols-4 grid-rows-2 overflow-hidden rounded-[3px]", className), children: EDITORIAL_INKS.map(({ name, fill }) => (_jsx("span", { className: fill }, name))) }));
+}
+/**
+ * The trailing arrow. It sits just under the text and keeps the link visually
+ * aligned with the other controls.
+ */
+function Arrow() {
+    return (_jsx("svg", { "aria-hidden": "true", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "size-3 opacity-60 transition-opacity group-hover:opacity-100", children: _jsx("path", { d: "M7 17 17 7M7 7h10v10" }) }));
+}
+/**
+ * The standalone link. It is meant for a footer row or another layout that
+ * already has its own structure. Use `Colophon` when the block itself is the
+ * thing being placed.
+ */
+export function BuiltWithFoundations({ label = "Built with Foundations", className, }) {
+    return (_jsxs(Button, { href: FOUNDATIONS_URL, variant: "outline", size: "sm", className: cn("group gap-2", className), children: [_jsx(FoundationsMark, { className: "size-3.5" }), label, _jsx(Arrow, {})] }));
+}
+/**
+ * A preset built on top of `Bulletin`.
+ *
+ * ```tsx
+ * <Colophon />                 // the panel
+ * <Colophon variant="line" />  // the compact row
+ * ```
+ *
+ * Use `BuiltWithFoundations` for the standalone link, and `Bulletin` if you
+ * want the same layout with different copy.
+ */
+export function Colophon({ variant = "card", label, children, className, }) {
+    const line = variant === "line";
+    return (_jsx(Bulletin, { variant: variant, accent: _jsx(Ribbon, { className: line ? "h-1 min-w-20 flex-1 rounded-full" : "h-1.5 w-full" }), eyebrow: "Colophon", headline: HEADLINE, lede: line ? NOTE : LEDE, points: CLAIMS, action: _jsx(BuiltWithFoundations, { label: label }), footnote: FOOTNOTE, className: className, children: children }));
+}

package/dist/blocks/index.d.ts

@@ -8,3 +8,5 @@ export { Badge, badgeVariants, type BadgeLook } from "./badge.js";
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabGroup, type TabItem, } from "./tabs.js";
 export { SEGMENT } from "./segment.js";
 export { Steps, Step } from "./steps.js";
+export { Bulletin, Ribbon, EDITORIAL_INKS, type BulletinProps, type BulletinPoint, type RibbonHue, } from "./bulletin.js";
+export { Colophon, BuiltWithFoundations, FoundationsMark, FOUNDATIONS_URL, type ColophonProps, } from "./colophon.js";

package/dist/blocks/index.js

@@ -8,3 +8,5 @@ export { Badge, badgeVariants } from "./badge.js";
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabGroup, } from "./tabs.js";
 export { SEGMENT } from "./segment.js";
 export { Steps, Step } from "./steps.js";
+export { Bulletin, Ribbon, EDITORIAL_INKS, } from "./bulletin.js";
+export { Colophon, BuiltWithFoundations, FoundationsMark, FOUNDATIONS_URL, } from "./colophon.js";

package/dist/cjs/eslint.js

@@ -54,7 +54,20 @@ function themeOverrideRules() {
  * role.
  */
 function surfaceAsInkRules() {
-    return rule("/(^| )(dark:|hover:|focus:|group-hover:)*text-(muted|card|popover|input)($| )/", "That is a surface token, not an ink — as text it has no defined contrast (text-muted measures ~1.1:1 on a light page). Use text-muted-foreground for secondary ink, text-subtle-foreground for tertiary, or text-card-foreground on a card.");
+    return [
+        ...rule("/(^| )(dark:|hover:|focus:|group-hover:)*text-(muted|card|popover|input)($| )/", "That is a surface token, not an ink — as text it has no defined contrast (text-muted measures ~1.1:1 on a light page). Use text-muted-foreground for secondary ink, text-subtle-foreground for tertiary, or text-card-foreground on a card."),
+        // The three fills with no legitimate use as a foreground, glyph or word.
+        // Each is a background whose lightness is chosen to hold a label, so read as
+        // ink against the page it lands under the tertiary rung: in dark, secondary
+        // measures 2.77:1, primary 3.36:1 and success 3.79:1, where
+        // `--subtle-foreground` is 6.75:1. An accent quieter than the quietest ink is
+        // the bug, and it reads the same way on an icon as it does in a sentence.
+        //
+        // Unconditional, unlike the opt-in rules above, because the sweep is done in
+        // both apps and there is no correct call site left to grandfather. `warn` and
+        // `info` stay out: their fills are bright enough to read (7.68:1 and 6.10:1).
+        ...rule("/(^| )(dark:|hover:|focus:|group-hover:)*text-(primary|secondary|success)($| )/", "That is a fill token used as ink. A fill's lightness is chosen to hold a label printed on it, so against the page it reads under the tertiary ink in dark (primary 3.36:1, secondary 2.77:1, success 3.79:1). Each ships an `-ink` cut checked at 4.5:1 against the page. Add `-ink`."),
+    ];
 }
 /**
  * `-foreground` means the label printed on a fill; `-ink` means the hue as
@@ -92,7 +105,7 @@ function linkRules() {
         },
     ];
 }
-function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2xs 11 / text-xs 12 / text-sm 14 / text-base 16 and up", pairing = false, axis = false, } = {}) {
+function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2xs 11 / text-xs 12 / text-sm 14 / text-base 16 and up", pairing = false, axis = false, leading = false, } = {}) {
     return [
         // Alpha ink composites against whatever surface it lands on, so its
         // contrast is unmeasurable. The ink tokens are measured.
@@ -103,11 +116,10 @@ function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2xs 11 /
         ...rule("/(^| )text-\\[\\d+px\\]/", `Arbitrary font sizes bypass the type ramp. Use a rung (${ramp}).`),
         // A primitive that owns a size axis, reached past for a class that does the
         // same thing. The class wins on the page, so nothing looks wrong — what is
-        // lost is everything else the axis carries: `TypographyCaption` pins leading
-        // per rung because a wrapped caption sets cramped at the ramp's own setting,
-        // and `TypographyStat` pairs its rungs with the heading ladder so a figure
-        // and the heading beside it retune together on an editorial surface. A
-        // literal gets the size and silently drops the rest.
+        // lost is everything else the axis carries: `TypographyStat` pairs its rungs
+        // with the heading ladder, so a figure and the heading beside it retune
+        // together on an editorial surface, where a literal stays put. A literal
+        // gets the size and silently drops the rest.
         //
         // Matching the class node INSIDE the attribute, rather than the className
         // string on its own, lets this name the component. It reaches into `cn()`
@@ -124,6 +136,20 @@ function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2xs 11 /
                 })),
             ]
             : []),
+        // Leading stated at a call site, on a primitive whose rung already carries
+        // one. The ramp is what an app retunes, and a class pins past it: the pinned
+        // value follows the component onto a surface tuned for different sizes and
+        // reports nothing when it no longer fits. Where a role genuinely needs a
+        // number the rung cannot give, the reading paragraph and the value being the
+        // two, the primitive states it and every call site inherits the decision.
+        ...(leading
+            ? [
+                ...["Literal[value", "TemplateElement[value.raw"].map((node) => ({
+                    selector: `JSXOpeningElement[name.name=/^Typography[A-Z]/] JSXAttribute[name.name="className"] ${node}=/(^| )leading-/]`,
+                    message: "Leading comes from the rung, which is what an app retunes. Move the rung (size=), or state it on the primitive if every call site wants it.",
+                })),
+            ]
+            : []),
         // Two valid primitives forming an invalid pair, which the value rules above
         // cannot see: `<TypographyP>` is the 14px interface rung, and the list under
         // it reads at the prose rung, so one passage lands two rungs apart.

package/dist/cn.js

@@ -1,5 +1,39 @@
 import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { extendTailwindMerge } from "tailwind-merge";
+/**
+ * `text-h1`…`text-h4` are this package's rungs, declared in type.css as
+ * `--text-h1`…`--text-h4`. tailwind-merge has never heard of them.
+ *
+ * Faced with a `text-*` it does not know, it has to pick a class group, and
+ * `h3` matches neither a t-shirt size nor an arbitrary value — so it falls
+ * through to `text-color`, which accepts any token. tailwind-merge therefore
+ * believed `text-h3` was a colour, and deleted whichever colour stood beside
+ * it. Measured, not assumed:
+ *
+ *   twMerge("text-red-500 text-h3")  →  "text-h3"          // collided
+ *   twMerge("text-sm text-h3")       →  "text-sm text-h3"  // did not
+ *
+ * Which side lost depended on `cva` key order, so it broke in both directions
+ * at once. `HEADING_BASE` states the ink before the rung, so every heading on
+ * the default variant shipped with no colour class at all and quietly inherited
+ * whatever painted above it — which is right on a page and wrong on every
+ * surface that hands down an ink, the contract `INK_ON_CARD` and friends exist
+ * to keep. `statVariants` orders `size` before `tone`, so a
+ * `<TypographyStat size="card" tone="muted">` lost its rung instead and
+ * rendered at the inherited size.
+ *
+ * `text-2xs` and `text-3xs` are custom rungs too and were never affected: they
+ * match tailwind-merge's t-shirt-size pattern and land in `font-size` on their
+ * own. Only the four heading rungs fall through, which is why this list is
+ * exactly four names long.
+ *
+ * Registering them leaves every real conflict intact — two rungs still collide
+ * with each other and with the body ramp, two colours still collide — and stops
+ * the one that was never a conflict. test/heading-ink.test.tsx holds it.
+ */
+const twMerge = extendTailwindMerge({
+    extend: { classGroups: { "font-size": [{ text: ["h1", "h2", "h3", "h4"] }] } },
+});
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }

package/dist/eslint.d.ts

@@ -59,8 +59,11 @@ export interface TypographyOptions {
      * migrated, and that migration is the intended end state.
      */
     axis?: boolean;
+    /** Flag a leading class on a typography primitive. Off by default: an app
+     *  adopting it has a backlog to clear first. */
+    leading?: boolean;
 }
-export declare function typographyRules({ weights, ramp, pairing, axis, }?: TypographyOptions): RestrictedSyntax[];
+export declare function typographyRules({ weights, ramp, pairing, axis, leading, }?: TypographyOptions): RestrictedSyntax[];
 /**
  * Every design rule, as one list.
  *

package/dist/eslint.js

@@ -44,7 +44,20 @@ export function themeOverrideRules() {
  * role.
  */
 export function surfaceAsInkRules() {
-    return rule("/(^| )(dark:|hover:|focus:|group-hover:)*text-(muted|card|popover|input)($| )/", "That is a surface token, not an ink — as text it has no defined contrast (text-muted measures ~1.1:1 on a light page). Use text-muted-foreground for secondary ink, text-subtle-foreground for tertiary, or text-card-foreground on a card.");
+    return [
+        ...rule("/(^| )(dark:|hover:|focus:|group-hover:)*text-(muted|card|popover|input)($| )/", "That is a surface token, not an ink — as text it has no defined contrast (text-muted measures ~1.1:1 on a light page). Use text-muted-foreground for secondary ink, text-subtle-foreground for tertiary, or text-card-foreground on a card."),
+        // The three fills with no legitimate use as a foreground, glyph or word.
+        // Each is a background whose lightness is chosen to hold a label, so read as
+        // ink against the page it lands under the tertiary rung: in dark, secondary
+        // measures 2.77:1, primary 3.36:1 and success 3.79:1, where
+        // `--subtle-foreground` is 6.75:1. An accent quieter than the quietest ink is
+        // the bug, and it reads the same way on an icon as it does in a sentence.
+        //
+        // Unconditional, unlike the opt-in rules above, because the sweep is done in
+        // both apps and there is no correct call site left to grandfather. `warn` and
+        // `info` stay out: their fills are bright enough to read (7.68:1 and 6.10:1).
+        ...rule("/(^| )(dark:|hover:|focus:|group-hover:)*text-(primary|secondary|success)($| )/", "That is a fill token used as ink. A fill's lightness is chosen to hold a label printed on it, so against the page it reads under the tertiary ink in dark (primary 3.36:1, secondary 2.77:1, success 3.79:1). Each ships an `-ink` cut checked at 4.5:1 against the page. Add `-ink`."),
+    ];
 }
 /**
  * `-foreground` means the label printed on a fill; `-ink` means the hue as
@@ -82,7 +95,7 @@ export function linkRules() {
         },
     ];
 }
-export function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2xs 11 / text-xs 12 / text-sm 14 / text-base 16 and up", pairing = false, axis = false, } = {}) {
+export function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2xs 11 / text-xs 12 / text-sm 14 / text-base 16 and up", pairing = false, axis = false, leading = false, } = {}) {
     return [
         // Alpha ink composites against whatever surface it lands on, so its
         // contrast is unmeasurable. The ink tokens are measured.
@@ -93,11 +106,10 @@ export function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2x
         ...rule("/(^| )text-\\[\\d+px\\]/", `Arbitrary font sizes bypass the type ramp. Use a rung (${ramp}).`),
         // A primitive that owns a size axis, reached past for a class that does the
         // same thing. The class wins on the page, so nothing looks wrong — what is
-        // lost is everything else the axis carries: `TypographyCaption` pins leading
-        // per rung because a wrapped caption sets cramped at the ramp's own setting,
-        // and `TypographyStat` pairs its rungs with the heading ladder so a figure
-        // and the heading beside it retune together on an editorial surface. A
-        // literal gets the size and silently drops the rest.
+        // lost is everything else the axis carries: `TypographyStat` pairs its rungs
+        // with the heading ladder, so a figure and the heading beside it retune
+        // together on an editorial surface, where a literal stays put. A literal
+        // gets the size and silently drops the rest.
         //
         // Matching the class node INSIDE the attribute, rather than the className
         // string on its own, lets this name the component. It reaches into `cn()`
@@ -114,6 +126,20 @@ export function typographyRules({ weights = false, ramp = "text-3xs 10 / text-2x
                 })),
             ]
             : []),
+        // Leading stated at a call site, on a primitive whose rung already carries
+        // one. The ramp is what an app retunes, and a class pins past it: the pinned
+        // value follows the component onto a surface tuned for different sizes and
+        // reports nothing when it no longer fits. Where a role genuinely needs a
+        // number the rung cannot give, the reading paragraph and the value being the
+        // two, the primitive states it and every call site inherits the decision.
+        ...(leading
+            ? [
+                ...["Literal[value", "TemplateElement[value.raw"].map((node) => ({
+                    selector: `JSXOpeningElement[name.name=/^Typography[A-Z]/] JSXAttribute[name.name="className"] ${node}=/(^| )leading-/]`,
+                    message: "Leading comes from the rung, which is what an app retunes. Move the rung (size=), or state it on the primitive if every call site wants it.",
+                })),
+            ]
+            : []),
         // Two valid primitives forming an invalid pair, which the value rules above
         // cannot see: `<TypographyP>` is the 14px interface rung, and the list under
         // it reads at the prose rung, so one passage lands two rungs apart.

package/dist/essay/essay.js

@@ -62,7 +62,7 @@ export function createEssay({ Reveal = PlainReveal, Glow = NoGlow, } = {}) {
        * An ordered list says that without an arrow — the ordinal is the ornament.
        */
     function EssayMovements({ items }) {
-        return (_jsx("ol", { className: "flex flex-col", children: items.map(({ title, body }, i) => (_jsxs("li", { className: "border-t border-border/60 py-8 first:border-t-0 first:pt-0 last:pb-0 sm:grid sm:grid-cols-[3.5rem_minmax(0,1fr)] sm:gap-6", children: [_jsx(TypographyCaption, { className: "block pt-2 font-mono tabular-nums text-primary max-sm:mb-2", children: String(i + 1).padStart(2, "0") }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(TypographyH3, { children: title }), body] })] }, title))) }));
+        return (_jsx("ol", { className: "flex flex-col", children: items.map(({ title, body }, i) => (_jsxs("li", { className: "border-t border-border/60 py-8 first:border-t-0 first:pt-0 last:pb-0 sm:grid sm:grid-cols-[3.5rem_minmax(0,1fr)] sm:gap-6", children: [_jsx(TypographyCaption, { className: "block pt-2 font-mono tabular-nums text-primary-ink max-sm:mb-2", children: String(i + 1).padStart(2, "0") }), _jsxs("div", { className: "flex flex-col gap-3", children: [_jsx(TypographyH3, { children: title }), body] })] }, title))) }));
     }
     /**
      * A reference document as data: the index derives from the sections, so a

package/dist/essay/layout.js

@@ -105,5 +105,5 @@ export function ReadTime({ minutes, icon: Icon, className, }) {
 export function TagPills({ tags, className, }) {
     if (tags.length === 0)
         return null;
-    return (_jsx("span", { className: cn("flex flex-wrap gap-1.5", className), children: tags.map((tag) => (_jsx("span", { className: "rounded-full bg-primary/15 px-2.5 py-0.5 text-xs font-medium text-primary", children: tag }, tag))) }));
+    return (_jsx("span", { className: cn("flex flex-wrap gap-1.5", className), children: tags.map((tag) => (_jsx("span", { className: "rounded-full bg-primary/15 px-2.5 py-0.5 text-xs font-medium text-primary-ink", children: tag }, tag))) }));
 }

package/dist/essay/rail.js

@@ -18,7 +18,7 @@ export function RailLink({ active = false, nested = false, className, children,
         // inactive neighbour keeps its line and nothing shifts when the active
         // item changes.
         "before:absolute before:inset-y-1 before:-left-px before:w-0.5 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity", active
-            ? "font-medium text-primary before:opacity-100"
+            ? "font-medium text-primary-ink before:opacity-100"
             : "text-muted-foreground hover:text-foreground", className),
         children,
     };

package/dist/typography/header.d.ts

@@ -31,11 +31,11 @@ import { type WithAs } from "./as.js";
  */
 export declare const headingFace = "font-heading font-[number:var(--heading-weight)]";
 declare const h1Variants: (props?: ({
-    variant?: "default" | "display" | null | undefined;
+    variant?: "display" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare function TypographyH1({ className, variant, children, ...props }: React.ComponentProps<"h1"> & VariantProps<typeof h1Variants>): import("react").JSX.Element;
 declare const h2Variants: (props?: ({
-    variant?: "default" | "display" | null | undefined;
+    variant?: "display" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /** The h2 ramp as a class, for a caller that must render its own element. */
 export declare const headingClass: (variant?: VariantProps<typeof h2Variants>["variant"]) => string;
@@ -48,7 +48,7 @@ export declare function TypographyH2({ className, variant, divider, children, ..
     divider?: boolean;
 }): import("react").JSX.Element;
 declare const h3Variants: (props?: ({
-    variant?: "default" | "display" | null | undefined;
+    variant?: "display" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export declare function TypographyH3({ className, variant, children, ...props }: React.ComponentProps<"h3"> & VariantProps<typeof h3Variants>): import("react").JSX.Element;
 /** The card / panel title: 14px in the product, 20 on an editorial surface. */

package/dist/typography/paragraph.d.ts

@@ -55,11 +55,11 @@ export declare function TypographyProseList(props: Preset<ListProps, typeof PROS
  * `sm` is the default because meta is separated from body by ink, not size;
  * the smaller rungs are a deliberate step down, not the norm.
  *
- * The two upper rungs open their leading past the ramp: plenty of captions are
- * a wrapped sentence, and the ramp sets those cramped at reading rungs. The
- * micro rung keeps whatever the ramp gives it, which is already tuned tight —
- * half again the glyph height at 11px reads as a stray gap under a one-line
- * note, and it is the rung the labels beside it are set on.
+ * Leading comes from the rung, as it does for every other primitive here. Two
+ * of these rungs used to pin a fixed ratio on top of the ramp, which held a
+ * caption apart from the label beside it and overrode the retune an editorial
+ * subtree had just made. An app that wants more air under a wrapped caption
+ * moves the rung, which is where the rest of the page reads its leading from.
  *
  * `inherit` is the parenthetical inside a heading, an eyebrow or a stat. It
  * takes the size of whatever set it and resets the weight, because the only
@@ -108,13 +108,19 @@ export declare function TypographyLabel({ className, size, as, children, ...prop
  *
  * Tabular is right in a column and wrong in a headline, so it is an axis rather
  * than a constant. Keep `tabular` anywhere a value updates in place.
+ *
+ * Leading is the one thing here the rung does not decide. A stat sits on the
+ * body rungs, whose leading is room for the line that follows, and a value has
+ * no line following it: the ratio lands as dead space arguing with the padding
+ * the tile around it already sets. Pinned tight, for the reason a badge is.
  */
 declare const statVariants: (props?: ({
-    size?: "inherit" | "page" | "display" | "card" | "panel" | null | undefined;
+    size?: "display" | "base" | "section" | "inherit" | "page" | "sm" | "xs" | "2xs" | "3xs" | "lg" | "xl" | "2xl" | "3xl" | "card" | "panel" | null | undefined;
+    tone?: "muted" | "default" | null | undefined;
     figures?: "tabular" | "proportional" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type StatVariants = VariantProps<typeof statVariants>;
-export declare function TypographyStat({ className, size, figures, children, ...props }: ComponentProps<"span"> & StatVariants): import("react").JSX.Element;
+export declare function TypographyStat({ className, size, figures, tone, children, ...props }: ComponentProps<"span"> & StatVariants): import("react").JSX.Element;
 /**
  * A run of code inside a sentence: a command, a field name, a trigger.
  *

package/dist/typography/paragraph.js

@@ -86,11 +86,11 @@ export function TypographyProseList(props) {
  * `sm` is the default because meta is separated from body by ink, not size;
  * the smaller rungs are a deliberate step down, not the norm.
  *
- * The two upper rungs open their leading past the ramp: plenty of captions are
- * a wrapped sentence, and the ramp sets those cramped at reading rungs. The
- * micro rung keeps whatever the ramp gives it, which is already tuned tight —
- * half again the glyph height at 11px reads as a stray gap under a one-line
- * note, and it is the rung the labels beside it are set on.
+ * Leading comes from the rung, as it does for every other primitive here. Two
+ * of these rungs used to pin a fixed ratio on top of the ramp, which held a
+ * caption apart from the label beside it and overrode the retune an editorial
+ * subtree had just made. An app that wants more air under a wrapped caption
+ * moves the rung, which is where the rest of the page reads its leading from.
  *
  * `inherit` is the parenthetical inside a heading, an eyebrow or a stat. It
  * takes the size of whatever set it and resets the weight, because the only
@@ -100,8 +100,8 @@ export function TypographyProseList(props) {
 const captionVariants = cva("text-[color:var(--ink-muted,var(--muted-foreground))]", {
     variants: {
         size: {
-            sm: "text-sm leading-normal",
-            xs: "text-xs leading-normal",
+            sm: "text-sm",
+            xs: "text-xs",
             "2xs": "text-2xs",
             inherit: "font-normal",
         },
@@ -158,27 +158,62 @@ export function TypographyLabel({ className, size, as, children, ...props }) {
  *
  * Tabular is right in a column and wrong in a headline, so it is an axis rather
  * than a constant. Keep `tabular` anywhere a value updates in place.
+ *
+ * Leading is the one thing here the rung does not decide. A stat sits on the
+ * body rungs, whose leading is room for the line that follows, and a value has
+ * no line following it: the ratio lands as dead space arguing with the padding
+ * the tile around it already sets. Pinned tight, for the reason a badge is.
  */
-const statVariants = cva("font-semibold tracking-tight", {
+const statVariants = cva("tracking-tight leading-none", {
     variants: {
         /**
-         * Named rungs, because the ramp was reachable only by spelling a class. The
-         * three here are the ones call sites actually converged on: `display` is the
-         * figure a section is built around, `page` and `panel` ride the heading
-         * ladder so a stat and the heading beside it step together — and therefore
-         * retune together on an editorial surface, which a literal never would.
+         * Two ladders, because a figure sits in one of two places and they scale
+         * apart on an editorial surface. The rung names are the body ramp: a value
+         * in a table cell, a chip or a tile, beside interface copy it should step
+         * with. The surface names ride the heading ladder, for a figure that is
+         * itself the headline, so it and the heading beside it retune together.
          *
-         * `inherit` is the default and writes nothing: a stat inside a heading, a
-         * chip or a sentence takes the size that set it, and every existing call
-         * site keeps the size it passed.
+         * The heading half shipped alone and covered three call sites in eighteen.
+         * The other fifteen wanted a body rung, could not say so, and spelled a
+         * class instead, which takes the size and drops everything else the axis
+         * carries.
+         *
+         * `inherit` is the default and writes nothing: a stat inside a heading or a
+         * sentence takes the size that set it.
          */
         size: {
             inherit: "",
+            "3xs": "text-3xs",
+            "2xs": "text-2xs",
+            xs: "text-xs",
+            sm: "text-sm",
+            base: "text-base",
+            lg: "text-lg",
+            xl: "text-xl",
+            "2xl": "text-2xl",
+            "3xl": "text-3xl",
             card: "text-h4",
             panel: "text-h3",
+            section: "text-h2",
             page: "text-h1",
             display: "text-6xl font-black",
         },
+        /**
+         * How loud the value is. `muted` is the qualifier that follows a figure,
+         * "of 2,000" beside "1,284": a value, so it keeps the tight leading, and
+         * quiet, so it does not compete with what it qualifies. Unweighted for the
+         * reason the caption is, that colour and weight both saying "secondary" is
+         * one of them arguing with the other.
+         *
+         * `default` states no ink on purpose. A stat takes the ink around it, which
+         * inside a filled control is that control's label and in a muted row is the
+         * row's, and naming one here would repaint every stat that inherits a
+         * quieter ink deliberately.
+         */
+        tone: {
+            default: "font-semibold",
+            muted: "font-normal text-[color:var(--ink-muted,var(--muted-foreground))]",
+        },
         figures: {
             /** Even advances stop a value jittering as it refreshes. */
             tabular: "tabular-nums",
@@ -186,10 +221,10 @@ const statVariants = cva("font-semibold tracking-tight", {
             proportional: "proportional-nums",
         },
     },
-    defaultVariants: { size: "inherit", figures: "tabular" },
+    defaultVariants: { size: "inherit", figures: "tabular", tone: "default" },
 });
-export function TypographyStat({ className, size, figures, children, ...props }) {
-    return (_jsx("span", { className: cn(statVariants({ size, figures }), className), ...props, children: children }));
+export function TypographyStat({ className, size, figures, tone, children, ...props }) {
+    return (_jsx("span", { className: cn(statVariants({ size, figures, tone }), className), ...props, children: children }));
 }
 /**
  * A run of code inside a sentence: a command, a field name, a trigger.

package/llms.txt

@@ -57,6 +57,9 @@ silently. Full reference: https://github.com/supertypeai/foundations
 | a link card, or a grid of them | `Card`, `Cards` | `/blocks` |
 | an aside, warning or note | `Callout` | `/blocks` |
 | numbered instructions | `Steps`, `Step` | `/blocks` |
+| an announcement, release note or credits panel | `Bulletin` | `/blocks` |
+| a compact statement block for a page, section, or footer | `Colophon` | `/blocks` |
+| the same statement as one item in a footer row | `BuiltWithFoundations` | `/blocks` |
 | an FAQ or collapsible, no JS | `Disclosure`, `DisclosureGroup` | `/blocks` |
 | an animated accordion | `Accordion` (client) | `/blocks` |
 | tabbed content | `TabGroup` when the tabs are data, `Tabs` to compose by hand (client) | `/blocks` |
@@ -73,7 +76,7 @@ silently. Full reference: https://github.com/supertypeai/foundations
 | import | exports |
 |---|---|
 | `@supertype.ai/foundations` | `cn`, `TypographyH1`, `TypographyH2`, `TypographyH3`, `TypographyH4`, `TypographyEyebrow`, `TypographyP`, `TypographyMuted`, `TypographyProse`, `TypographyList`, `TypographyProseList`, `TypographyCaption`, `TypographySmall`, `TypographyLabel`, `TypographyStat`, `TypographyInlineCode`, `TypographyLink`, `TypographyHighlight`, `headingClass`, `headingFace`, `eyebrowClass`, `toneClass`, `impliedTone`, `resolveLink`, `isExternalHref`. Types: `TypographyTag`, `ParagraphVariants`, `ListProps`, `CaptionVariants`, `LabelVariants`, `StatVariants`, `Tone`, `HighlightTone`, `LinkBehavior`, `ResolvedLink` |
-| `@supertype.ai/foundations/blocks` | `Anchor`, `Cards`, `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `Callout`, `Button`, `buttonVariants`, `Badge`, `badgeVariants`, `Steps`, `Step`, `Disclosure`, `DisclosureGroup`, `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`, `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabGroup`, `SEGMENT`. Types: `ButtonLook`, `BadgeLook`, `TabItem` |
+| `@supertype.ai/foundations/blocks` | `Anchor`, `Cards`, `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardContent`, `Callout`, `Button`, `buttonVariants`, `Badge`, `badgeVariants`, `Steps`, `Step`, `Disclosure`, `DisclosureGroup`, `Accordion`, `AccordionItem`, `AccordionTrigger`, `AccordionContent`, `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabGroup`, `SEGMENT`, `Bulletin`, `Ribbon`, `EDITORIAL_INKS`, `Colophon`, `BuiltWithFoundations`, `FoundationsMark`, `FOUNDATIONS_URL`. Types: `ButtonLook`, `BadgeLook`, `TabItem`, `BulletinProps`, `BulletinPoint`, `RibbonHue`, `ColophonProps` |
 | `@supertype.ai/foundations/mdx` | `proseMdxComponents` |
 | `@supertype.ai/foundations/essay` | `createEssay`, `EssayHeader`, `EssayLayout`, `EssaySection`, `EssayPullQuote`, `EssayFigure`, `EssayMovements`, `EssayDocument`, `EssayColumns`, `EssayAside`, `EssayBody`, `ReadingLayout`, `TableOfContents`, `ReadingRail`, `ReadingProgressBar`, `Rail`, `RailLink`, `PostMetaRow`, `PostDate`, `ReadTime`, `TagPills`, `MetaDot`, `formatPostDate`, `extractHeadings`, `readingTime`, `createSlugger`, `useReadingProgress`, `useScrollSpy`. Types: `TocHeading`, `EssayDecorations`, `EssayIndexEntry`, `EssayDocSection`, `EssayMovement`, `PostDateFormat` |
 | `@supertype.ai/foundations/seo` | `createSeo`. Types: `SeoConfig`, `ArticleAuthor`, `ArticleOptions`, `PageMetadata` |
@@ -91,7 +94,7 @@ silently. Full reference: https://github.com/supertypeai/foundations
   prop each one pins is dropped from its type, so passing it fails to compile.
 - `TypographyCaption`, `TypographyLabel`, `TypographySmall`: `size?: "sm" | "xs" | "2xs" | "inherit"`, `as?`.
 - `TypographyEyebrow`: `tone?: "heading" | "label" | "muted" | "subtle"`, `size?: "sm" | "xs" | "2xs" | "3xs"`, `as?`. Each tone carries the rung it is usually set at and `size` overrides it, so omitting it changes nothing. Reach for `muted` for the uppercase micro-label a dense product sets over a group of controls, and `subtle` for a column head or rail marker read on the way past — that shape hand-rolled is the most common way an app ends up spelling type classes.
-- `TypographyStat`: `size?: "inherit" | "card" | "panel" | "page" | "display"`, `figures?: "tabular" | "proportional"`. Keep tabular where a value updates in place.
+- `TypographyStat`: `size?: "inherit" | "3xs" | "2xs" | "xs" | "sm" | "base" | "lg" | "xl" | "2xl" | "3xl" | "card" | "panel" | "section" | "page" | "display"`, `figures?: "tabular" | "proportional"`, `tone?: "default" | "muted"`. Two ladders in one axis: the rung names are the body ramp, for a figure beside interface copy it should step with, and the surface names ride the heading ladder, for a figure that is the headline. `tone="muted"` is the qualifier after a figure, "of 2,000" beside "1,284": still tight, no longer competing. Keep tabular where a value updates in place.
 - `TypographyLink`: `href` (required), `tone?: Tone` (default `muted`), `addArrow?`, `newTab?`. The href decides internal versus external.
 - `TypographyHighlight`: `tone?: HighlightTone`, one of `"primary" | "success" | "ochre" | "terracotta" | "sage" | "fig"`, plus `seed?: number`. A separate type from `Tone` on purpose: this axis is categorical (which one it is) where `Tone` is semantic (what it means), the same split theme.css draws between the earth swatches and the status tokens.
 - `Card`: `href`, `title`, `description`, `icon`, `external`. An href makes the whole card a link.
@@ -104,6 +107,9 @@ silently. Full reference: https://github.com/supertypeai/foundations
 - `Button`: `variant?: "solid" | "soft" | "outline" | "ghost" | "link"` (default `solid`), `tone?: Tone` (defaults to `primary` on a solid button and `muted` on every other variant — filling a button in is how a page says this is the action), `size?: "xs" | "sm" | "md" | "lg" | "xl"` (default `md`), `icon?: boolean` for a square glyph box, `pill?: boolean` for full-round corners, `href` to make it a link, `render` for an element that is neither a button nor a link. Variant is how much ink it spends and tone is what the ink means, on separate axes, so a quiet delete is `variant="ghost" tone="destructive"`.
 - `Badge`: `variant?: "solid" | "soft" | "outline" | "ghost"` (default `solid`), `tone?: Tone`, `size?: "xs" | "sm"` (default `sm`), `pill?: boolean`, `href` for a badge that leads somewhere. Same axes and same spellings as `Button`, minus `link`, which belongs to things you click. `warning` and `supertype` were `tone="warn"` and `tone="brand"` under invented names.
 - `Callout`: `tone?: Tone`, `density?: "compact" | "editorial"`, `title`, `icon`, `action`.
+- `Bulletin`: the panel shape with no copy in it — `variant?: "card" | "line"` (default `card`), `accent` (drawn along the top edge, full width, before the padding; `<Ribbon />` is the one that ships), `eyebrow`, `headline`, `lede`, `points` (a `BulletinPoint[]` of `{ title, body, mark?, ink? }`, where `mark` and `ink` are class names like `bg-fern`/`text-fern-ink`; one point takes the width, two or more go two-up from `sm`), `action` (the control on the footer rule), `footnote` (the line opposite it), `children` (under the rule) and `className`. Every slot is optional and an omitted one renders nothing, so the same component covers a credits panel and a headline with one button under it. Reach for it for an announcement, a release note, a status bulletin. `Ribbon` takes `hues?: RibbonHue[]` (default `EDITORIAL_INKS`, the eight categorical hues as data) and states no size of its own — the caller passes `h-1.5 w-full` on a panel and `h-1 min-w-20 flex-1 rounded-full` in a row.
+- `Colophon`: `Bulletin` with this package's words in it, and the words are not props. `variant?: "card" | "line"` (default `card`), plus `label` (the link's words, for translation) and `children` (the consumer's own credit, rendered under the rule on `card`). A compact statement block for a page (`card`) or a footer row (`line`). There is nothing to configure, so `<Colophon />` is the whole call. Its copy is deliberately not props: this is the package's only content component — every other block is an empty container whose words come from the call site — which makes it a mark rather than a block, and a mark every site rewrites is not a mark. An app wanting to say something in its own words wants a `Card`. It draws the eight categorical hues and inks two of them, all declared in theme.css: an app that imported tokens.css alone renders a panel with an invisible ribbon and no error.
+- **`Colophon` or `BuiltWithFoundations`.** A colophon is a block with something to say and needs a place to say it — a credits page, an about page, the foot of a long article. `BuiltWithFoundations` is one item in a row somebody else laid out, beside a privacy link and a copyright line, and says only where the site came from. The test is what the surface is for: somewhere with its own columns already takes the link, and somewhere the block itself is being placed takes the colophon. There is no `Colophon` variant rendering the link alone, since that would be a second name for a component that already has one. `BuiltWithFoundations` is a `Button variant="outline" size="sm"` with an `href`, so it sits on the same hairline and the same radius rung as every other control on the page. `FoundationsMark` is the eight-hue chip alone and `FOUNDATIONS_URL` the bare href.
 - `DisclosureGroup`: `type?: "multiple" | "single"`, `defaultValue` (matches the title string).
 - `TabsList`: `variant?: "default" | "line"`, `tone?: Tone` (default `primary`). The tone
   inks the marker alone, which on `line` means the underline and the active icon. The

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@supertype.ai/foundations",
-  "version": "0.1.33",
+  "version": "0.1.35",
   "license": "MIT",
   "publishConfig": {
     "access": "public",

package/src/tokens.css

@@ -38,6 +38,21 @@
   --color-info-ink: var(--info-ink);
   --color-danger: var(--danger);
 
+  /* The one role with no value in this package, and registered anyway. A v4
+     utility exists only for a name in the namespace, so without these three
+     `bg-brand` compiles to nothing at all and the element keeps whatever ink it
+     inherited, silently. Naming a role is structural; the hue stays the app's.
+
+     The fallbacks are the chains tone.ts already reads, so an app that declares
+     no identity hue paints its principal one here too, and an app that declares
+     `--brand` alone still gets a readable ink and label rather than nothing. */
+  --color-brand: var(--brand, var(--primary));
+  --color-brand-ink: var(--brand-ink, var(--primary-ink, var(--primary)));
+  --color-brand-foreground: var(
+    --brand-foreground,
+    var(--primary-foreground)
+  );
+
   --color-border: var(--border);
   --color-input: var(--input);
   --color-ring: var(--ring);

package/src/type.css

@@ -1,5 +1,7 @@
-/* Editorial ramp: Tailwind's default sizes, untouched. Density is a product
-   concern — viably runs its own dense ramp and opts marketing back out to these. */
+/* The type ramp. A product may retune the body rungs at the root, where density
+   is its own concern; `.editorial` below restates the reading sizes so a marketing
+   or docs subtree inside a dense app lands back on them without the app copying
+   Tailwind's table into its own stylesheet. */
 
 @theme {
   /* Below Tailwind's 12px floor. Without them these get written as `text-[11px]`. */
@@ -50,6 +52,24 @@
     --font-heading: var(--font-average, ui-serif), Georgia, serif;
     --heading-weight: 400;
 
+    /* Tailwind's own rungs, restated rather than inherited. A dense app has
+       already moved these at the root, and this is the surface that has to get
+       back to reading sizes: without them `.editorial` retunes the headings and
+       leaves the body under them at 13px, which is the ratio the ladder exists
+       to keep. Stated here, the class is the whole opt-out. */
+    --text-xs: 0.75rem;
+    --text-xs--line-height: calc(1 / 0.75);
+    --text-sm: 0.875rem;
+    --text-sm--line-height: calc(1.25 / 0.875);
+    --text-base: 1rem;
+    --text-base--line-height: calc(1.5 / 1);
+    --text-lg: 1.125rem;
+    --text-lg--line-height: calc(1.75 / 1.125);
+    --text-xl: 1.25rem;
+    --text-xl--line-height: calc(1.75 / 1.25);
+    --text-2xl: 1.5rem;
+    --text-2xl--line-height: calc(2 / 1.5);
+
     /* The same ladder off an 18px reading rung: 1.11 / 1.33 / 1.67 / 2. Every
        rung clears the body it sits over — the contract the product values above
        keep too, and the one the shared rungs could not. */