@supertype.ai/foundations 0.1.29 → 0.1.31

package/dist/tone.d.ts

@@ -1,3 +1,4 @@
+import type { CSSProperties } from "react";
 /**
  * One semantic colour vocabulary, for every component that carries meaning in a
  * hue: Button, Callout, TypographyLink. Before this there were three lists —
@@ -30,8 +31,8 @@
  */
 /**
  * `muted` is the only row that names a fourth value. A hairline derived from the
- * ink at 45% is right for a hue and wrong for the absence of one; `--border` is
- * the tuned answer there, and it is not a wash of `--foreground`.
+ * ink at 45% is right for a hue and wrong for the absence of one. `--border` is
+ * the tuned answer there, in place of a wash of `--foreground`.
  *
  * Its hue is `--foreground` rather than `--muted-foreground` on purpose. `muted`
  * says the control carries no meaning, not that it carries less contrast — a
@@ -47,15 +48,15 @@ export declare const TONE: {
     /** No meaning: chrome, toolbars, anything that must not compete. */
     readonly muted: "[--tone-fill:var(--muted)] [--tone-ink:var(--foreground)] [--tone-hue:var(--foreground)] [--tone-line:var(--border)]";
     /** The principal action, and the package's default wherever a tone is optional. */
-    readonly primary: "[--tone-fill:var(--primary)] [--tone-ink:var(--primary-foreground)] [--tone-hue:var(--primary)]";
+    readonly primary: "[--tone-fill:var(--primary)] [--tone-ink:var(--primary-foreground)] [--tone-hue:var(--primary-ink,var(--primary))]";
     /** The warm accent. `--secondary-ink` is its readable cut; the fill is not. */
     readonly secondary: "[--tone-fill:var(--secondary)] [--tone-ink:var(--secondary-foreground)] [--tone-hue:var(--secondary-ink)]";
     /** The consumer's identity hue, if it defined one. Otherwise the principal one. */
-    readonly brand: "[--tone-fill:var(--brand,var(--primary))] [--tone-ink:var(--tint-foreground)] [--tone-hue:var(--brand-ink,var(--primary))]";
+    readonly brand: "[--tone-fill:var(--brand,var(--primary))] [--tone-ink:var(--brand-foreground,var(--primary-foreground))] [--tone-hue:var(--brand-ink,var(--primary-ink,var(--primary)))]";
     /** It worked. */
-    readonly success: "[--tone-fill:var(--success)] [--tone-ink:var(--tint-foreground)] [--tone-hue:var(--success-ink)]";
+    readonly success: "[--tone-fill:var(--success)] [--tone-ink:var(--success-foreground)] [--tone-hue:var(--success-ink)]";
     /** A footgun: the reader can still proceed, but not blindly. */
-    readonly warn: "[--tone-fill:var(--warn)] [--tone-ink:var(--tint-foreground)] [--tone-hue:var(--warn-ink)]";
+    readonly warn: "[--tone-fill:var(--warn)] [--tone-ink:var(--warn-foreground)] [--tone-hue:var(--warn-ink)]";
     /** It deletes something, or it already failed. */
     readonly destructive: "[--tone-fill:var(--destructive)] [--tone-ink:var(--destructive-foreground)] [--tone-hue:var(--destructive)]";
 };
@@ -70,9 +71,13 @@ export type Tone = keyof typeof TONE;
  * while `color-mix` is what the modifier compiles to anyway — the same CSS, one
  * layer less of trust.
  *
- * `--tone-fill-hover` mixes toward `--foreground` rather than darkening by a
- * fixed amount, so a filled control deepens on the light theme and lifts on the
- * dark one from a single declaration. A `dark:` override here is what the
+ * A hover moves the fill 18% toward `--hover-toward`, the extreme theme.css
+ * points away from the page: black on latte, white on espresso. The token
+ * carries the direction and the percentage carries the state. Mixing toward
+ * `--foreground` instead made the step as long as the gap between the fill and
+ * the ink, so a `primary` button moved 4.9 ΔL* on latte against 6.2 on espresso
+ * and read as no hover at all. Every tone now clears 6 ΔL* in both themes,
+ * measured in test/composition.test.ts. A `dark:` override here is what the
  * package's own ESLint rule exists to prevent.
  */
 export declare const TONE_SURFACE: string;
@@ -87,6 +92,50 @@ export declare const TONE_SURFACE: string;
  * whose order matters and whose values always travel together is one argument.
  */
 export declare const toneClass: (tone: Tone) => string;
+/**
+ * The ink a nested element inherits, declared by whatever painted the surface
+ * under it. Two properties, one rule: paint a background, hand down its ink.
+ *
+ * `toneClass` alone is a palette, not a surface — a `Callout` spends the same
+ * seven values as a filled `Button` and tints at 5%, so the words inside it
+ * still sit on the page and still want the page's ink. Only a component that
+ * actually fills promotes `--tone-ink` to the inherited ink, and the type
+ * primitives read it with the page as their fallback. A tint that promotes
+ * nothing is therefore correct by default, which is the failure this replaces:
+ * `TypographyLabel` pinned `text-foreground`, won over the `text-primary-foreground`
+ * on the anchor around it, and printed 2.34:1 on a filled button.
+ *
+ * `--ink-muted` collapses to the ink itself, because a hue fill has no second
+ * rung: mixing the ink 20% toward `--primary` measures 4.22:1 on the
+ * espresso theme and 3.49:1 at 30%. Nothing on a filled control may be quieter
+ * than its label. Wanting two rungs is wanting a tinted surface.
+ */
+export declare const INK_ON_FILL = "[--ink:var(--tone-ink)] [--ink-muted:var(--tone-ink)]";
+/**
+ * The same contract for a surface the tones do not name. These are tints of the
+ * page rather than hues, so both rungs survive and the pair is stated rather
+ * than collapsed.
+ *
+ * Stated one constant at a time, and not built from an argument, for the reason
+ * `TONE` above is a table of literals: Tailwind reads this file as text and can
+ * only generate a class it can see. A class assembled at runtime is a class that
+ * was never generated — no error, no style, and the nested type quietly keeps
+ * the page's ink on a surface that is not the page. The set is closed because
+ * the set of surfaces the theme names is closed; a surface with no token is not
+ * a surface. For one the package does not name, see `inkOnSurfaceStyle`.
+ */
+export declare const INK_ON_CARD = "[--ink:var(--card-foreground)] [--ink-muted:var(--muted-foreground)]";
+export declare const INK_ON_POPOVER = "[--ink:var(--popover-foreground)] [--ink-muted:var(--muted-foreground)]";
+export declare const INK_ON_SIDEBAR = "[--ink:var(--sidebar-foreground)] [--ink-muted:var(--muted-foreground)]";
+/**
+ * The escape hatch, for an app painting a surface of its own.
+ *
+ * Properties rather than a class, because a class this function returned would
+ * have to be generated by a scanner that never saw it. Inline custom properties
+ * need no scanner at all, so this works for any token and cannot silently
+ * produce nothing. It replaces a version that returned a class string and did.
+ */
+export declare const inkOnSurfaceStyle: (ink: string, muted?: string) => CSSProperties;
 /**
  * What an unstated tone means, given how much ink the component is spending.
  * Shared, because `Button` and `Badge` both need it and two copies of a default

package/dist/tone.js

@@ -30,8 +30,8 @@
  */
 /**
  * `muted` is the only row that names a fourth value. A hairline derived from the
- * ink at 45% is right for a hue and wrong for the absence of one; `--border` is
- * the tuned answer there, and it is not a wash of `--foreground`.
+ * ink at 45% is right for a hue and wrong for the absence of one. `--border` is
+ * the tuned answer there, in place of a wash of `--foreground`.
  *
  * Its hue is `--foreground` rather than `--muted-foreground` on purpose. `muted`
  * says the control carries no meaning, not that it carries less contrast — a
@@ -47,15 +47,15 @@ export const TONE = {
     /** No meaning: chrome, toolbars, anything that must not compete. */
     muted: "[--tone-fill:var(--muted)] [--tone-ink:var(--foreground)] [--tone-hue:var(--foreground)] [--tone-line:var(--border)]",
     /** The principal action, and the package's default wherever a tone is optional. */
-    primary: "[--tone-fill:var(--primary)] [--tone-ink:var(--primary-foreground)] [--tone-hue:var(--primary)]",
+    primary: "[--tone-fill:var(--primary)] [--tone-ink:var(--primary-foreground)] [--tone-hue:var(--primary-ink,var(--primary))]",
     /** The warm accent. `--secondary-ink` is its readable cut; the fill is not. */
     secondary: "[--tone-fill:var(--secondary)] [--tone-ink:var(--secondary-foreground)] [--tone-hue:var(--secondary-ink)]",
     /** The consumer's identity hue, if it defined one. Otherwise the principal one. */
-    brand: "[--tone-fill:var(--brand,var(--primary))] [--tone-ink:var(--tint-foreground)] [--tone-hue:var(--brand-ink,var(--primary))]",
+    brand: "[--tone-fill:var(--brand,var(--primary))] [--tone-ink:var(--brand-foreground,var(--primary-foreground))] [--tone-hue:var(--brand-ink,var(--primary-ink,var(--primary)))]",
     /** It worked. */
-    success: "[--tone-fill:var(--success)] [--tone-ink:var(--tint-foreground)] [--tone-hue:var(--success-ink)]",
+    success: "[--tone-fill:var(--success)] [--tone-ink:var(--success-foreground)] [--tone-hue:var(--success-ink)]",
     /** A footgun: the reader can still proceed, but not blindly. */
-    warn: "[--tone-fill:var(--warn)] [--tone-ink:var(--tint-foreground)] [--tone-hue:var(--warn-ink)]",
+    warn: "[--tone-fill:var(--warn)] [--tone-ink:var(--warn-foreground)] [--tone-hue:var(--warn-ink)]",
     /** It deletes something, or it already failed. */
     destructive: "[--tone-fill:var(--destructive)] [--tone-ink:var(--destructive-foreground)] [--tone-hue:var(--destructive)]",
 };
@@ -69,9 +69,13 @@ export const TONE = {
  * while `color-mix` is what the modifier compiles to anyway — the same CSS, one
  * layer less of trust.
  *
- * `--tone-fill-hover` mixes toward `--foreground` rather than darkening by a
- * fixed amount, so a filled control deepens on the light theme and lifts on the
- * dark one from a single declaration. A `dark:` override here is what the
+ * A hover moves the fill 18% toward `--hover-toward`, the extreme theme.css
+ * points away from the page: black on latte, white on espresso. The token
+ * carries the direction and the percentage carries the state. Mixing toward
+ * `--foreground` instead made the step as long as the gap between the fill and
+ * the ink, so a `primary` button moved 4.9 ΔL* on latte against 6.2 on espresso
+ * and read as no hover at all. Every tone now clears 6 ΔL* in both themes,
+ * measured in test/composition.test.ts. A `dark:` override here is what the
  * package's own ESLint rule exists to prevent.
  */
 export const TONE_SURFACE = [
@@ -81,10 +85,10 @@ export const TONE_SURFACE = [
     "[--tone-veil:color-mix(in_oklab,var(--tone-hue)_5%,transparent)]",
     /** A control's tint at rest. */
     "[--tone-wash:color-mix(in_oklab,var(--tone-hue)_10%,transparent)]",
-    /** The same control under the pointer. */
-    "[--tone-wash-hover:color-mix(in_oklab,var(--tone-hue)_18%,transparent)]",
+    /** The same control under the pointer: twice the tint, so the step reads. */
+    "[--tone-wash-hover:color-mix(in_oklab,var(--tone-hue)_20%,transparent)]",
     /** A filled control under the pointer. */
-    "[--tone-fill-hover:color-mix(in_oklab,var(--tone-fill)_88%,var(--foreground))]",
+    "[--tone-fill-hover:color-mix(in_oklab,var(--tone-fill),var(--hover-toward)_18%)]",
 ].join(" ");
 /**
  * A tone, as one class list. This is the only thing a component should need.
@@ -97,6 +101,50 @@ export const TONE_SURFACE = [
  * whose order matters and whose values always travel together is one argument.
  */
 export const toneClass = (tone) => `${TONE_SURFACE} ${TONE[tone]}`;
+/**
+ * The ink a nested element inherits, declared by whatever painted the surface
+ * under it. Two properties, one rule: paint a background, hand down its ink.
+ *
+ * `toneClass` alone is a palette, not a surface — a `Callout` spends the same
+ * seven values as a filled `Button` and tints at 5%, so the words inside it
+ * still sit on the page and still want the page's ink. Only a component that
+ * actually fills promotes `--tone-ink` to the inherited ink, and the type
+ * primitives read it with the page as their fallback. A tint that promotes
+ * nothing is therefore correct by default, which is the failure this replaces:
+ * `TypographyLabel` pinned `text-foreground`, won over the `text-primary-foreground`
+ * on the anchor around it, and printed 2.34:1 on a filled button.
+ *
+ * `--ink-muted` collapses to the ink itself, because a hue fill has no second
+ * rung: mixing the ink 20% toward `--primary` measures 4.22:1 on the
+ * espresso theme and 3.49:1 at 30%. Nothing on a filled control may be quieter
+ * than its label. Wanting two rungs is wanting a tinted surface.
+ */
+export const INK_ON_FILL = "[--ink:var(--tone-ink)] [--ink-muted:var(--tone-ink)]";
+/**
+ * The same contract for a surface the tones do not name. These are tints of the
+ * page rather than hues, so both rungs survive and the pair is stated rather
+ * than collapsed.
+ *
+ * Stated one constant at a time, and not built from an argument, for the reason
+ * `TONE` above is a table of literals: Tailwind reads this file as text and can
+ * only generate a class it can see. A class assembled at runtime is a class that
+ * was never generated — no error, no style, and the nested type quietly keeps
+ * the page's ink on a surface that is not the page. The set is closed because
+ * the set of surfaces the theme names is closed; a surface with no token is not
+ * a surface. For one the package does not name, see `inkOnSurfaceStyle`.
+ */
+export const INK_ON_CARD = "[--ink:var(--card-foreground)] [--ink-muted:var(--muted-foreground)]";
+export const INK_ON_POPOVER = "[--ink:var(--popover-foreground)] [--ink-muted:var(--muted-foreground)]";
+export const INK_ON_SIDEBAR = "[--ink:var(--sidebar-foreground)] [--ink-muted:var(--muted-foreground)]";
+/**
+ * The escape hatch, for an app painting a surface of its own.
+ *
+ * Properties rather than a class, because a class this function returned would
+ * have to be generated by a scanner that never saw it. Inline custom properties
+ * need no scanner at all, so this works for any token and cannot silently
+ * produce nothing. It replaces a version that returned a class string and did.
+ */
+export const inkOnSurfaceStyle = (ink, muted = "--muted-foreground") => ({ "--ink": `var(${ink})`, "--ink-muted": `var(${muted})` });
 /**
  * What an unstated tone means, given how much ink the component is spending.
  * Shared, because `Button` and `Badge` both need it and two copies of a default

package/dist/typography/header.d.ts

@@ -59,8 +59,8 @@ declare const eyebrowVariants: (props?: ({
 /**
  * The eyebrow's ramp as a class, for a caller that cannot render our element —
  * a dialog title primitive, a motion element. Same escape hatch as
- * `headingClass`, and it exists so that a consumer needing the class does not
- * hand-roll a second copy of it that then drifts from the component.
+ * `headingClass`. It exists so a consumer needing the class can take ours rather
+ * than hand-rolling a copy that drifts from the component.
  */
 export declare const eyebrowClass: (tone?: VariantProps<typeof eyebrowVariants>["tone"]) => string;
 /**

package/dist/typography/header.js

@@ -32,7 +32,7 @@ import { TextAs } from "./as.js";
  * the face had no door, arriving with a `scroll-m-20` for an anchor it does not have.
  */
 export const headingFace = "font-heading font-[number:var(--heading-weight)]";
-const HEADING_BASE = `scroll-m-20 ${headingFace} text-foreground`;
+const HEADING_BASE = `scroll-m-20 ${headingFace} text-[color:var(--ink,var(--foreground))]`;
 const h1Variants = cva(`${HEADING_BASE} tracking-tight`, {
     variants: {
         variant: {
@@ -98,7 +98,7 @@ const eyebrowVariants = cva("block uppercase tracking-wider", {
              * Primary ink, stated not inherited — an eyebrow names the section under it,
              * and one that turns red from its surroundings is not a heading.
              */
-            heading: "text-xs font-semibold text-foreground",
+            heading: "text-xs font-semibold text-[color:var(--ink,var(--foreground))]",
             /** Stat cards invert it: the figure is the headline, so the label yields. */
             label: "text-2xs font-medium text-accent-foreground",
         },
@@ -108,8 +108,8 @@ const eyebrowVariants = cva("block uppercase tracking-wider", {
 /**
  * The eyebrow's ramp as a class, for a caller that cannot render our element —
  * a dialog title primitive, a motion element. Same escape hatch as
- * `headingClass`, and it exists so that a consumer needing the class does not
- * hand-roll a second copy of it that then drifts from the component.
+ * `headingClass`. It exists so a consumer needing the class can take ours rather
+ * than hand-rolling a copy that drifts from the component.
  */
 export const eyebrowClass = (tone) => eyebrowVariants({ tone });
 /**

package/dist/typography/highlight.d.ts

@@ -5,8 +5,7 @@ import type { ComponentProps } from "react";
  * hue for nothing. That is why the earth tones enter as `-foreground`: those are
  * the ink-grade pair, mixed to hold at text weight in both themes.
  *
- * Emphasis, never status. Warn and info and destructive are absent on purpose —
- * a swipe of red under a phrase says less than the words do.
+ * Emphasis, never status. Warn and info and destructive are absent on purpose.
  *
  * The four earth tones are one palette, not a menu: each is a different hue,
  * because two a reader cannot tell apart are one tone with two names.
@@ -24,6 +23,8 @@ export type HighlightTone = keyof typeof MARKER_TONES;
  * Marker highlight for inline text. Painted as the run's own background, never a
  * mask — a mask would shave the glyph tops. `luminosity` lets letters borrow the
  * marker's hue while keeping their own lightness, so contrast holds in both themes.
+ * That lightness comes from `--marker-ink`, a deepened `--foreground`, so the run
+ * still reads as the emphasised one rather than sinking into its own wash.
  */
 export declare function TypographyHighlight({ tone, seed, className, style, children, ...props }: ComponentProps<"span"> & {
     tone?: HighlightTone;

package/dist/typography/highlight.js

@@ -6,8 +6,7 @@ import { cn } from "../cn.js";
  * hue for nothing. That is why the earth tones enter as `-foreground`: those are
  * the ink-grade pair, mixed to hold at text weight in both themes.
  *
- * Emphasis, never status. Warn and info and destructive are absent on purpose —
- * a swipe of red under a phrase says less than the words do.
+ * Emphasis, never status. Warn and info and destructive are absent on purpose.
  *
  * The four earth tones are one palette, not a menu: each is a different hue,
  * because two a reader cannot tell apart are one tone with two names.
@@ -41,7 +40,8 @@ const DABS = [
 // Integer-only: `Math.sin` is implementation-defined, so Node and the browser
 // disagreed in the last bits and the swipe hydrated as a mismatch.
 const hash = (seed, i) => {
-    let h = Math.imul(seed ^ 0x9e3779b9, 0x85ebca6b) ^ Math.imul(i + 0x165667b1, 0xc2b2ae35);
+    let h = Math.imul(seed ^ 0x9e3779b9, 0x85ebca6b) ^
+        Math.imul(i + 0x165667b1, 0xc2b2ae35);
     h ^= h >>> 15;
     h = Math.imul(h, 0x2545f491);
     h ^= h >>> 13;
@@ -88,11 +88,17 @@ const markerFill = (seed) => {
  * Marker highlight for inline text. Painted as the run's own background, never a
  * mask — a mask would shave the glyph tops. `luminosity` lets letters borrow the
  * marker's hue while keeping their own lightness, so contrast holds in both themes.
+ * That lightness comes from `--marker-ink`, a deepened `--foreground`, so the run
+ * still reads as the emphasised one rather than sinking into its own wash.
  */
 export function TypographyHighlight({ tone = "primary", seed = 3, className, style, children, ...props }) {
-    return (_jsx("span", { className: cn("isolate inline px-[0.3em] py-[0.06em]", "[-webkit-box-decoration-break:clone] [box-decoration-break:clone]", "[--marker-alpha:44%] dark:[--marker-alpha:58%]", className), style: {
+    return (_jsx("span", { className: cn("isolate inline px-[0.3em] py-[0.06em]", "[-webkit-box-decoration-break:clone] [box-decoration-break:clone]", "[--marker-alpha:44%] dark:[--marker-alpha:58%]", 
+        // The blend keeps a glyph's lightness and nothing else, so a run over the
+        // wash reads flatter than the same words beside it. Pushing the lightness
+        // past --foreground buys that punch back without touching the hue borrow.
+        "[--marker-ink:color-mix(in_oklab,var(--foreground)_85%,black)]", "dark:[--marker-ink:color-mix(in_oklab,var(--foreground)_88%,white)]", className), style: {
             "--marker": MARKER_TONES[tone],
             backgroundImage: markerFill(seed),
             ...style,
-        }, ...props, children: _jsx("span", { className: "[mix-blend-mode:luminosity]", children: children }) }));
+        }, ...props, children: _jsx("span", { className: "text-(color:--marker-ink) [mix-blend-mode:luminosity]", children: children }) }));
 }

package/dist/typography/paragraph.d.ts

@@ -1,3 +1,4 @@
+import { type LinkBehavior } from "../href.js";
 import { type VariantProps } from "class-variance-authority";
 import type { ComponentProps, ReactNode } from "react";
 import { type Tone } from "../tone.js";
@@ -101,7 +102,7 @@ export declare function TypographyLabel({ className, size, as, children, ...prop
  * than a constant. Keep `tabular` anywhere a value updates in place.
  */
 declare const statVariants: (props?: ({
-    size?: "inherit" | "display" | "card" | "panel" | "page" | null | undefined;
+    size?: "inherit" | "page" | "display" | "card" | "panel" | null | undefined;
     figures?: "tabular" | "proportional" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type StatVariants = VariantProps<typeof statVariants>;
@@ -114,28 +115,24 @@ export declare function TypographyStat({ className, size, figures, children, ...
  * optical correction — the mono face carries a taller x-height than the sans.
  */
 export declare function TypographyInlineCode({ className, children, ...props }: ComponentProps<"code">): import("react").JSX.Element;
-type TypographyLinkProps = Omit<ComponentProps<"a">, "href"> & {
+type TypographyLinkProps = Omit<ComponentProps<"a">, "href"> & LinkBehavior & {
     href: string;
     children: ReactNode;
     tone?: Tone;
-    /** Defaults on for an off-site link. Turn it off for one that starts a flow the reader should stay in. */
-    newTab?: boolean;
     /**
      * A trailing arrow, for a link that ends a sentence and leads somewhere. The
      * glyph follows the href: `↗` when the link leaves the site, `→` when it does
-     * not. That is the convention, and it is not a call site's to get wrong.
+     * not. The href picks it, so a call site never has to.
      */
     addArrow?: boolean;
 };
 /**
  * The inline link.
  *
- * Internal and external are decided from the href, never at the call site: an
- * href with a scheme renders a plain anchor and, if it is http(s), opens away
- * with `rel="noopener noreferrer"`; everything else routes through the router's
- * Link. `newTab` is the one override, for an off-site href that starts a flow
- * the reader should stay in. Call-site props apply last, so a passed
- * `target`/`rel` still wins.
+ * Internal and external are decided from the href, never at the call site —
+ * ../href.ts holds that decision, and Button, Badge and Card make the same one.
+ * `newTab` and `external` are the overrides. Call-site props apply last, so a
+ * passed `target`/`rel` still wins.
  *
  * The router is `next-view-transitions`, imported rather than injected. Every
  * project on this package is a Next app and wants the same link, and a factory
@@ -143,5 +140,5 @@ type TypographyLinkProps = Omit<ComponentProps<"a">, "href"> & {
  * not be imported by name. One call site ended up on the unbound version that
  * way and lost its decoration.
  */
-export declare function TypographyLink({ href, children, tone, newTab, addArrow, className, ...props }: TypographyLinkProps): import("react").JSX.Element;
+export declare function TypographyLink({ href, children, tone, external: leavesApp, newTab, addArrow, className, ...props }: TypographyLinkProps): import("react").JSX.Element;
 export {};

package/dist/typography/paragraph.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { Link } from "next-view-transitions";
+import { resolveLink } from "../href.js";
 import { cva } from "class-variance-authority";
 import { cn } from "../cn.js";
 import { toneClass } from "../tone.js";
@@ -19,8 +19,8 @@ const pVariants = cva("", {
             prose: "text-pretty text-lg leading-relaxed",
         },
         tone: {
-            default: "text-foreground",
-            muted: "text-muted-foreground",
+            default: "text-[color:var(--ink,var(--foreground))]",
+            muted: "text-[color:var(--ink-muted,var(--muted-foreground))]",
         },
     },
     defaultVariants: { variant: "ui", tone: "default" },
@@ -34,7 +34,10 @@ export function TypographyMuted(props) {
     return _jsx(TypographyP, { ...props, ...MUTED });
 }
 /** Reading-size body copy. `TypographyMuted` is the same ink one rung down. */
-const PROSE = { variant: "prose", tone: "muted" };
+const PROSE = {
+    variant: "prose",
+    tone: "muted",
+};
 export function TypographyProse(props) {
     return _jsx(TypographyP, { ...props, ...PROSE });
 }
@@ -86,7 +89,7 @@ export function TypographyProseList(props) {
  * reason to sit there is to be quieter than the thing you qualify — and every
  * container that sets a size for you sets a weight too.
  */
-const captionVariants = cva("text-muted-foreground", {
+const captionVariants = cva("text-[color:var(--ink-muted,var(--muted-foreground))]", {
     variants: {
         size: {
             sm: "text-sm leading-normal",
@@ -127,7 +130,7 @@ export function TypographySmall(props) {
  * `as` is here for the same reason it is on `TypographyEyebrow`: a config panel
  * names its sections at this size, and those names are the page's outline.
  */
-const labelVariants = cva("font-medium text-foreground", {
+const labelVariants = cva("font-medium text-[color:var(--ink,var(--foreground))]", {
     variants: {
         size: {
             sm: "text-sm",
@@ -188,11 +191,11 @@ export function TypographyStat({ className, size, figures, children, ...props })
  * optical correction — the mono face carries a taller x-height than the sans.
  */
 export function TypographyInlineCode({ className, children, ...props }) {
-    return (_jsx("code", { className: cn("rounded-[3px] bg-foreground/[0.03] px-[0.3em] py-[0.1em] font-mono text-[0.9em] text-secondary-ink", className), ...props, children: children }));
+    return (_jsx("code", { className: cn("rounded-[3px] bg-current/[0.06] px-[0.3em] py-[0.1em] font-mono text-[0.9em] text-[color:var(--ink,var(--secondary-ink))]", className), ...props, children: children }));
 }
 /**
  * A statement about the surface, not the link: `muted` inside a paragraph,
- * `primary` when the link is the point of the line, `secondary` for a note
+ * `primary` when the link is the main thing on the line, `secondary` for a note
  * beneath a hero where `primary` would compete with the CTA beside it. The other
  * four come free, and a link inside a warning should be able to say so.
  *
@@ -203,17 +206,22 @@ export function TypographyInlineCode({ className, children, ...props }) {
  * `font-medium`, which read as a lighter link rather than a differently-coloured
  * one.
  */
+const INHERITED_INK = "text-[color:var(--ink,var(--foreground))]";
 const LINK_DECORATION = "underline decoration-dotted decoration-1 decoration-muted-foreground decoration-skip-ink-none underline-offset-2 hover:decoration-solid hover:decoration-current/70";
-const linkClass = (tone = "muted", className) => cn(toneClass(tone), "font-medium text-(color:--tone-hue)", LINK_DECORATION, className);
+/**
+ * No tone stated means "read the surface": the ink comes from whatever painted
+ * the ground, which on a page is `--foreground` and inside a filled control is
+ * that control's label ink. The old default spelled this `muted`, whose hue is
+ * `--foreground` — identical on a page, and 2.28:1 on a filled button.
+ */
+const linkClass = (tone, className) => cn(tone ? cn(toneClass(tone), "text-(color:--tone-hue)") : INHERITED_INK, "font-medium", LINK_DECORATION, className);
 /**
  * The inline link.
  *
- * Internal and external are decided from the href, never at the call site: an
- * href with a scheme renders a plain anchor and, if it is http(s), opens away
- * with `rel="noopener noreferrer"`; everything else routes through the router's
- * Link. `newTab` is the one override, for an off-site href that starts a flow
- * the reader should stay in. Call-site props apply last, so a passed
- * `target`/`rel` still wins.
+ * Internal and external are decided from the href, never at the call site —
+ * ../href.ts holds that decision, and Button, Badge and Card make the same one.
+ * `newTab` and `external` are the overrides. Call-site props apply last, so a
+ * passed `target`/`rel` still wins.
  *
  * The router is `next-view-transitions`, imported rather than injected. Every
  * project on this package is a Next app and wants the same link, and a factory
@@ -221,13 +229,12 @@ const linkClass = (tone = "muted", className) => cn(toneClass(tone), "font-mediu
  * not be imported by name. One call site ended up on the unbound version that
  * way and lost its decoration.
  */
-export function TypographyLink({ href, children, tone = "muted", newTab, addArrow, className, ...props }) {
+export function TypographyLink({ href, children, tone = "muted", external: leavesApp, newTab, addArrow, className, ...props }) {
     const style = linkClass(tone, className);
-    const external = /^[a-z][a-z0-9+.-]*:/i.test(href);
+    const { Component, props: link, external } = resolveLink(href, {
+        external: leavesApp,
+        newTab,
+    });
     const body = (_jsxs(_Fragment, { children: [children, addArrow && (_jsx("svg", { "aria-hidden": "true", className: "ml-1 inline size-3.5 align-middle", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("path", { d: external ? "M7 17 17 7M7 7h10v10" : "M5 12h14M12 5l7 7-7 7" }) }))] }));
-    if (external) {
-        const away = newTab ?? href.startsWith("http");
-        return (_jsx("a", { href: href, className: style, ...(away ? { target: "_blank", rel: "noopener noreferrer" } : {}), ...props, children: body }));
-    }
-    return (_jsx(Link, { href: href, className: style, ...props, children: body }));
+    return (_jsx(Component, { className: style, ...link, ...props, children: body }));
 }