@supertype.ai/foundations 0.1.24

package/dist/cjs/eslint.js

@@ -0,0 +1,146 @@
+"use strict";
+/**
+ * The design rules, as ESLint selectors, shared so the two apps cannot drift.
+ * Plain data — esquery matches these against className strings, so no plugin.
+ * They see values, never the shape of a class list; a primitive fixes that.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.colourRules = colourRules;
+exports.themeOverrideRules = themeOverrideRules;
+exports.surfaceAsInkRules = surfaceAsInkRules;
+exports.renamedTokenRules = renamedTokenRules;
+exports.typographyRules = typographyRules;
+exports.designConfig = designConfig;
+/** A className written as a plain string, or as a chunk of a template literal. */
+const classString = (pattern) => [
+    `Literal[value=${pattern}]`,
+    `TemplateElement[value.raw=${pattern}]`,
+];
+const rule = (pattern, message) => classString(pattern).map((selector) => ({ selector, message }));
+const VARIANTS = "(dark:|hover:|focus:|group-hover:|active:|disabled:|sm:|md:|lg:|xl:)*";
+const PALETTE = "(slate|gray|zinc|neutral|stone|red|orange|amber|yellow|lime|green|emerald|teal|cyan|sky|blue|indigo|violet|purple|fuchsia|pink|rose)";
+/** Applies everywhere, marketing included — the tints exist for those pages. */
+function colourRules({ accents = "a brand accent", } = {}) {
+    return [
+        ...rule(`/(^| )${VARIANTS}(text|bg|border|ring|from|to|via|fill|stroke|divide|outline|placeholder|shadow|decoration|accent|caret)-${PALETTE}-\\d+/`, `Raw Tailwind palette. Use a token — text-foreground / text-muted-foreground / text-subtle-foreground, bg-background / bg-card / bg-muted, border-border — a status token (success, warn, destructive), or ${accents}.`),
+        // Split by prefix: alpha on a fill is a scrim (the effect), on ink or a
+        // hairline it is just an undeclared colour.
+        ...rule(`/(^| )${VARIANTS}(bg|from|to|via|shadow)-(white|black)($| )/`, "Solid white/black is a hand-rolled surface. Use bg-card / bg-background, or bg-tint for a tinted panel. Alpha scrims (bg-black/50) stay legal — there the point is the transparency, not the hue."),
+        ...rule(`/(^| )${VARIANTS}(text|border|ring|divide|fill|stroke|decoration|outline|placeholder)-(white|black)($| |\\x2f)/`, "White/black ink and hairlines are hand-rolled colour, alpha or not. Use text-foreground / text-background for ink, text-tint-foreground for ink on a tinted surface, and border-border for a hairline — the token already carries the alpha the theme wants."),
+        ...rule("/(^| )(text|bg|border|fill|stroke|ring)-\\[#/", "Hex colours bypass the token system entirely. Add a token if the colour is real; use an existing one if it is not."),
+    ];
+}
+/**
+ * The semantic tokens, for the rules that care which token it is rather than
+ * whether one was used at all.
+ */
+const TOKEN = "foreground|muted-foreground|subtle-foreground|muted|card-foreground|card|popover-foreground|popover|" +
+    "secondary-foreground|secondary|accent-foreground|accent|primary-foreground|primary|border|input|ring|" +
+    "background|destructive-foreground|destructive|success|warn|info|brand|tint-foreground";
+const COLOUR_PREFIX = "text|bg|border|ring|from|to|via|fill|stroke|divide|placeholder|decoration|shadow|outline";
+/**
+ * A token already knows what it does in the dark; `dark:` on one says the token
+ * is wrong. Only the solid form is restricted — `dark:bg-destructive/20` against
+ * a `/10` is the same token at the density a darker ground needs.
+ */
+function themeOverrideRules() {
+    return rule(`/(^| )dark:(${COLOUR_PREFIX})-(${TOKEN})($| )/`, "A `dark:` override on a token means the token is wrong — fix it in theme.css, where one change covers every call site, rather than here. Alpha variants (dark:bg-destructive/20) stay legal: those tune a wash's density, not the token.");
+}
+/**
+ * `--muted` is a fill at L92%, so `text-muted` is ~1.1:1 — invisible, and it
+ * shipped at 17 sites. `text-background` is absent: inverse ink is a real 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.");
+}
+/**
+ * `-foreground` means the label printed on a fill; `-ink` means the hue as
+ * words. `warn-foreground` was always the ink, under the other name.
+ */
+function renamedTokenRules() {
+    return rule("/(^| )(dark:|hover:|focus:|group-hover:)*(text|bg|border|ring|fill|stroke)-warn-foreground($| )/", "`warn-foreground` is the deprecated name for `warn-ink`. In this package `-foreground` is the label printed on a fill and `-ink` is the hue used as text; warn has no printed-on label, because orange carries white text at no lightness. Use warn-ink.");
+}
+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, } = {}) {
+    return [
+        // Alpha ink composites against whatever surface it lands on, so its
+        // contrast is unmeasurable. The ink tokens are measured.
+        // `\x2f`, never a literal slash: ESLint 8's esquery ends the regex at the
+        // first `/` it sees, however escaped, and hands RegExp the truncated half.
+        ...rule("/text-(foreground|muted-foreground|subtle-foreground)\\x2f\\d+/", "Alpha on a text token has unmeasurable contrast (it composites against whatever surface it lands on). Use text-foreground (primary), text-muted-foreground (secondary), or text-subtle-foreground (tertiary)."),
+        // px only: a rem value at display scale is an ornament, not a rung.
+        ...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.
+        //
+        // Matching the class node INSIDE the attribute, rather than the className
+        // string on its own, lets this name the component. It reaches into `cn()`
+        // for free, since the argument sits in the same subtree.
+        ...(axis
+            ? [
+                // Both node kinds, for the same reason `classString` above covers both: a
+                // class list assembled in a template literal is the shape a call site
+                // reaches for precisely when it is doing something conditional, which
+                // is where a stray rung is most likely to be hiding.
+                ...["Literal[value", "TemplateElement[value.raw"].map((node) => ({
+                    selector: `JSXOpeningElement[name.name=/^Typography(Small|Caption|Stat|Eyebrow)$/] JSXAttribute[name.name="className"] ${node}=/(^| )text-(3xs|2xs|xs|sm|base|lg|xl|[2-9]xl|h[1-4])( |$)/]`,
+                    message: "This primitive owns its size: pass the axis (TypographySmall/Caption size=, TypographyStat size=, TypographyEyebrow tone=) rather than a text-* class, which takes the size and drops the leading and ladder that come with the rung.",
+                })),
+            ]
+            : []),
+        // 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.
+        //
+        // `~` and never `+`: JSX puts a whitespace text node between sibling
+        // elements, and an adjacent-sibling selector will not cross it — measured,
+        // `+` matches nothing at all here. The cost of `~` is that it means "any
+        // later sibling", so it can reach past an intervening paragraph; on a corpus
+        // of 168 files it fired four times and was right four times.
+        ...(pairing
+            ? [
+                {
+                    selector: 'JSXElement:has(>JSXOpeningElement[name.name="TypographyP"]) ~ JSXElement > JSXOpeningElement[name.name="TypographyProseList"]',
+                    message: "A ui paragraph over a prose list splits one passage across two rungs. Promote the paragraph with TypographyProse, or drop the list to the paragraph's rung with TypographyList variant=\"ui\".",
+                },
+            ]
+            : []),
+        ...(weights
+            ? rule("/(^| )font-(bold|extrabold|black)( |$)/", "The product weight ramp is 400 body / 500 label / 600 heading. Use font-semibold for headings, or a label primitive for a label.")
+            : []),
+    ];
+}
+/**
+ * Every rule in one flat-config entry, ready to spread into eslint.config.js:
+ *
+ *   import { designConfig } from "@supertype.ai/foundations/eslint";
+ *   export default [ ...designConfig({ accents: "the brand tints" }) ];
+ *
+ * One entry is not a detail. Flat config replaces a rule's options rather than
+ * merging them, so two blocks covering overlapping files leave only the last
+ * one's rules in effect. Combining them here is what stops a consumer losing
+ * half the set by accident. If you need a second scope, call this again with a
+ * different `files` and no overlap.
+ */
+function designConfig({ files = ["**/*.{ts,tsx,js,jsx}"], accents, weights, ramp, pairing, axis, } = {}) {
+    return [
+        {
+            name: "@supertype.ai/foundations/design",
+            files,
+            rules: {
+                "no-restricted-syntax": [
+                    "error",
+                    ...colourRules({ accents }),
+                    ...typographyRules({ weights, ramp, pairing, axis }),
+                    ...themeOverrideRules(),
+                    ...surfaceAsInkRules(),
+                    ...renamedTokenRules(),
+                ],
+            },
+        },
+    ];
+}

package/dist/cjs/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/dist/cn.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/cn.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/contrast.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Legibility measured against the cascade, not the declarations: reading `:root`
+ * and `.dark` separately measures an intention, and ssite shipped a `.dark` at a
+ * healthy 15.7:1 while the page rendered white on white. Build-time only.
+ */
+export type Rgb = [number, number, number];
+/** The themes a stylesheet is measured in. `dark` is the `.dark` class. */
+export type Theme = "light" | "dark";
+/**
+ * Specificity over what token blocks use. `:root` and `.dark` both score 1 —
+ * the tie above. `:not(…)` contributes its argument's score, per spec.
+ */
+export declare function specificity(selector: string): number;
+/** Properties surviving the cascade on :root. `css` is concatenated in import order. */
+export declare function resolveTokens(css: string, theme: Theme): Record<string, string>;
+/** Parses `hsl(...)`, `#rgb`, `#rrggbb` and `rgb(...)`. Returns null otherwise. */
+export declare function parseColor(value: string): Rgb | null;
+/** WCAG relative luminance. */
+export declare function luminance([r, g, b]: Rgb): number;
+/** WCAG contrast ratio, 1:1 to 21:1. */
+export declare function contrast(a: Rgb, b: Rgb): number;
+export interface LegibilityFailure {
+    theme: Theme;
+    ink: string;
+    surface: string;
+    ratio: number;
+    required: number;
+}
+/**
+ * Every ink on every surface, both themes. Missing or non-literal tokens are
+ * skipped — a default or an aliased variable is not a contrast failure.
+ */
+export declare function checkLegibility(css: string, { minimum, inks, surfaces, themes, }?: {
+    minimum?: number | undefined;
+    inks?: string[] | undefined;
+    surfaces?: string[] | undefined;
+    themes?: Theme[] | undefined;
+}): LegibilityFailure[];
+/**
+ * The three bars a palette owes, run over the same engine as `checkLegibility`.
+ * Without this the numbers in a theme's comments are claims, not measurements.
+ */
+export declare function checkSignals(css: string, { themes }?: {
+    themes?: Theme[] | undefined;
+}): LegibilityFailure[];
+/** A one-line report per failure, for a test's assertion message. */
+export declare function formatFailures(failures: LegibilityFailure[]): string;

package/dist/contrast.js

@@ -0,0 +1,255 @@
+/**
+ * Legibility measured against the cascade, not the declarations: reading `:root`
+ * and `.dark` separately measures an intention, and ssite shipped a `.dark` at a
+ * healthy 15.7:1 while the page rendered white on white. Build-time only.
+ */
+/**
+ * Specificity over what token blocks use. `:root` and `.dark` both score 1 —
+ * the tie above. `:not(…)` contributes its argument's score, per spec.
+ */
+export function specificity(selector) {
+    const ids = selector.match(/#[\w-]+/g)?.length ?? 0;
+    const notArgs = [...selector.matchAll(/:not\(([^)]*)\)/g)].map((m) => m[1]);
+    const bare = selector.replace(/:not\([^)]*\)/g, "");
+    const classes = bare.match(/\.[\w-]+/g)?.length ?? 0;
+    const pseudos = bare.match(/(?<!:):[\w-]+/g)?.length ?? 0;
+    const inner = notArgs.reduce((sum, arg) => sum + specificity(arg), 0);
+    return ids * 100 + classes + pseudos + inner;
+}
+/** Whether a selector applies to the document root in the given theme. */
+function matches(selector, theme) {
+    const trimmed = selector.trim();
+    // Only rules targeting the root element itself carry the token palette; a
+    // descendant selector (`.dark .notes-route`) styles something else.
+    if (/[\s>+~]/.test(trimmed))
+        return false;
+    if (!/^(:root|html|\.dark)/.test(trimmed))
+        return false;
+    const hasDark = /(^|[^(])\.dark\b/.test(trimmed.replace(/:not\([^)]*\)/g, ""));
+    const excludesDark = [...trimmed.matchAll(/:not\(([^)]*)\)/g)].some((m) => m[1].includes(".dark"));
+    if (theme === "dark")
+        return !excludesDark;
+    return !hasDark;
+}
+/** Properties surviving the cascade on :root. `css` is concatenated in import order. */
+export function resolveTokens(css, theme) {
+    const declarations = [];
+    let order = 0;
+    // Comments are stripped first. A selector is read back to the previous `}`,
+    // so a comment sitting above one becomes part of it and the rule is silently
+    // skipped — which is how a stylesheet that documents its overrides gets less
+    // checking than one that does not.
+    // A statement at-rule (`@import`, `@source`, `@custom-variant`, `@apply`) ends
+    // in a semicolon, and a selector is read back to the previous `}` — so leaving
+    // one in makes the block that follows it look like an at-rule and be skipped.
+    const source0 = css
+        .replace(/\/\*[\s\S]*?\*\//g, "")
+        .replace(/(^|[;{}])\s*@[\w-]+[^;{}]*;/g, "$1");
+    // Walk the text, tracking whether the current block sits inside `@layer`.
+    const walk = (source, layered) => {
+        for (let i = 0; i < source.length; i++) {
+            if (source[i] !== "{")
+                continue;
+            const head = source.slice(0, i);
+            const selector = head.slice(head.lastIndexOf("}") + 1).trim();
+            let depth = 0;
+            let end = i;
+            for (let j = i; j < source.length; j++) {
+                if (source[j] === "{")
+                    depth++;
+                else if (source[j] === "}" && --depth === 0) {
+                    end = j;
+                    break;
+                }
+            }
+            const body = source.slice(i + 1, end);
+            if (selector.startsWith("@layer") || selector.startsWith("@media")) {
+                walk(body, layered || selector.startsWith("@layer"));
+            }
+            else if (selector.startsWith("@")) {
+                // @theme, @custom-variant and friends declare no root palette.
+            }
+            else if (matches(selector, theme)) {
+                for (const [, property, value] of body.matchAll(/(--[\w-]+):\s*([^;]+);/g)) {
+                    declarations.push({
+                        property,
+                        value: value.trim(),
+                        layered,
+                        specificity: specificity(selector),
+                        order: order++,
+                    });
+                }
+            }
+            // Skip past the block just consumed.
+            i = end;
+        }
+    };
+    walk(source0, false);
+    const winners = {};
+    for (const decl of declarations) {
+        const held = winners[decl.property];
+        if (!held || outranks(decl, held))
+            winners[decl.property] = decl;
+    }
+    const resolved = Object.fromEntries(Object.entries(winners).map(([property, decl]) => [property, decl.value]));
+    // `--input: var(--border)` is an alias, not an unreadable value. Follow the
+    // whole-value form so a check measures what the browser paints; a fallback or
+    // an embedded var() stays unresolved, which the callers already skip.
+    const ALIAS = /^var\(\s*(--[\w-]+)\s*\)$/;
+    for (const property of Object.keys(resolved)) {
+        const seen = new Set([property]);
+        let match;
+        while ((match = ALIAS.exec(resolved[property]))) {
+            const target = match[1];
+            if (seen.has(target) || resolved[target] === undefined)
+                break;
+            seen.add(target);
+            resolved[property] = resolved[target];
+        }
+    }
+    return resolved;
+}
+function outranks(next, held) {
+    if (next.layered !== held.layered)
+        return !next.layered;
+    if (next.specificity !== held.specificity)
+        return next.specificity > held.specificity;
+    return next.order > held.order;
+}
+/** Parses `hsl(...)`, `#rgb`, `#rrggbb` and `rgb(...)`. Returns null otherwise. */
+export function parseColor(value) {
+    const input = value.trim();
+    const hsl = input.match(/hsla?\(\s*([\d.]+)(?:deg)?\s*,?\s*([\d.]+)%\s*,?\s*([\d.]+)%/i);
+    if (hsl) {
+        const [h, s, l] = [+hsl[1], +hsl[2] / 100, +hsl[3] / 100];
+        const a = s * Math.min(l, 1 - l);
+        const f = (n) => {
+            const k = (n + h / 30) % 12;
+            return (l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))) * 255;
+        };
+        return [f(0), f(8), f(4)];
+    }
+    const hex = input.match(/^#([0-9a-f]{3}|[0-9a-f]{6})$/i);
+    if (hex) {
+        const digits = hex[1].length === 3
+            ? [...hex[1]].map((d) => d + d).join("")
+            : hex[1];
+        return [
+            parseInt(digits.slice(0, 2), 16),
+            parseInt(digits.slice(2, 4), 16),
+            parseInt(digits.slice(4, 6), 16),
+        ];
+    }
+    const rgb = input.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/i);
+    if (rgb)
+        return [+rgb[1], +rgb[2], +rgb[3]];
+    return null;
+}
+/** WCAG relative luminance. */
+export function luminance([r, g, b]) {
+    const [rl, gl, bl] = [r, g, b].map((channel) => {
+        const s = channel / 255;
+        return s <= 0.03928 ? s / 12.92 : ((s + 0.055) / 1.055) ** 2.4;
+    });
+    return 0.2126 * rl + 0.7152 * gl + 0.0722 * bl;
+}
+/** WCAG contrast ratio, 1:1 to 21:1. */
+export function contrast(a, b) {
+    const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
+    return (hi + 0.05) / (lo + 0.05);
+}
+const INKS = ["--foreground", "--muted-foreground", "--card-foreground"];
+const SURFACES = ["--background", "--card", "--muted"];
+/**
+ * Every ink on every surface, both themes. Missing or non-literal tokens are
+ * skipped — a default or an aliased variable is not a contrast failure.
+ */
+export function checkLegibility(css, { minimum = 4.5, inks = INKS, surfaces = SURFACES, themes = ["light", "dark"], } = {}) {
+    const failures = [];
+    for (const theme of themes) {
+        const tokens = resolveTokens(css, theme);
+        for (const ink of inks) {
+            const inkColor = parseColor(tokens[ink] ?? "");
+            if (!inkColor)
+                continue;
+            for (const surface of surfaces) {
+                const surfaceColor = parseColor(tokens[surface] ?? "");
+                if (!surfaceColor)
+                    continue;
+                const ratio = contrast(inkColor, surfaceColor);
+                if (ratio < minimum)
+                    failures.push({ theme, ink, surface, ratio, required: minimum });
+            }
+        }
+    }
+    return failures;
+}
+/**
+ * Marks rather than words: status and categorical fills, which carry meaning as
+ * an 8px dot or a 2px bar. WCAG 1.4.11 asks 3:1 of them, not 4.5:1.
+ */
+const FILLS = [
+    "--success",
+    "--warn",
+    "--info",
+    "--terracotta",
+    "--ochre",
+    "--moss",
+    "--fern",
+    "--sage",
+    "--stone",
+    "--fig",
+    "--cocoa",
+];
+/**
+ * A fill has to separate from the page and from a card. Not from `--muted`: a
+ * wash of the hue is where its ink goes, and the fills sit at 2.7:1 there by
+ * design.
+ */
+const FILL_SURFACES = ["--background", "--card"];
+/** The same hues as words, at the bar body copy is held to. */
+const INKS_TINTED = [
+    "--success-ink",
+    "--warn-ink",
+    "--info-ink",
+    "--danger",
+    "--secondary-ink",
+    "--terracotta-foreground",
+    "--ochre-foreground",
+    "--moss-foreground",
+    "--fern-foreground",
+    "--sage-foreground",
+    "--stone-foreground",
+    "--fig-foreground",
+    "--cocoa-foreground",
+];
+/**
+ * shadcn's shape: `-foreground` is the label printed on the fill, so the pair is
+ * measured against itself rather than against the page.
+ */
+const ON_FILL = [
+    ["--primary", "--primary-foreground"],
+    ["--secondary", "--secondary-foreground"],
+    ["--destructive", "--destructive-foreground"],
+    ["--accent", "--accent-foreground"],
+    ["--card", "--card-foreground"],
+    ["--popover", "--popover-foreground"],
+    ["--sidebar", "--sidebar-foreground"],
+];
+/**
+ * The three bars a palette owes, run over the same engine as `checkLegibility`.
+ * Without this the numbers in a theme's comments are claims, not measurements.
+ */
+export function checkSignals(css, { themes = ["light", "dark"] } = {}) {
+    return [
+        ...checkLegibility(css, { inks: FILLS, surfaces: FILL_SURFACES, minimum: 3, themes }),
+        ...checkLegibility(css, { inks: INKS_TINTED, themes }),
+        ...ON_FILL.flatMap(([fill, label]) => checkLegibility(css, { inks: [label], surfaces: [fill], themes })),
+    ];
+}
+/** A one-line report per failure, for a test's assertion message. */
+export function formatFailures(failures) {
+    return failures
+        .map((f) => `${f.theme}: ${f.ink} on ${f.surface} is ${f.ratio.toFixed(2)}:1, below ${f.required}:1`)
+        .join("\n");
+}

package/dist/eslint.d.ts

@@ -0,0 +1,74 @@
+/**
+ * The design rules, as ESLint selectors, shared so the two apps cannot drift.
+ * Plain data — esquery matches these against className strings, so no plugin.
+ * They see values, never the shape of a class list; a primitive fixes that.
+ */
+export interface RestrictedSyntax {
+    selector: string;
+    message: string;
+}
+export interface ColourOptions {
+    /** Named in the message: "use a token" without naming one sends people hunting. */
+    accents?: string;
+}
+/** Applies everywhere, marketing included — the tints exist for those pages. */
+export declare function colourRules({ accents, }?: ColourOptions): RestrictedSyntax[];
+/**
+ * A token already knows what it does in the dark; `dark:` on one says the token
+ * is wrong. Only the solid form is restricted — `dark:bg-destructive/20` against
+ * a `/10` is the same token at the density a darker ground needs.
+ */
+export declare function themeOverrideRules(): RestrictedSyntax[];
+/**
+ * `--muted` is a fill at L92%, so `text-muted` is ~1.1:1 — invisible, and it
+ * shipped at 17 sites. `text-background` is absent: inverse ink is a real role.
+ */
+export declare function surfaceAsInkRules(): RestrictedSyntax[];
+/**
+ * `-foreground` means the label printed on a fill; `-ink` means the hue as
+ * words. `warn-foreground` was always the ink, under the other name.
+ */
+export declare function renamedTokenRules(): RestrictedSyntax[];
+export interface TypographyOptions {
+    /** Three-weight ramp. Off for editorial, where 700 is a register not a shout. */
+    weights?: boolean;
+    /** The rungs, named in the message, since they differ per consumer. */
+    ramp?: string;
+    /**
+     * Flag a `ui` paragraph standing over a prose list. Off by default: it is the
+     * one rule here that reads shape rather than a value, and a consumer has to
+     * have migrated its dense-card lists to `TypographyList variant="ui"` before
+     * it can pass. Turn it on once that is done.
+     */
+    pairing?: boolean;
+    /**
+     * Flag a size class on a primitive that already owns a size axis. Off by
+     * default for the same reason as `pairing`: it fails until the consumer has
+     * migrated, and the migration is the point.
+     */
+    axis?: boolean;
+}
+export declare function typographyRules({ weights, ramp, pairing, axis, }?: TypographyOptions): RestrictedSyntax[];
+/** A flat-config entry, described structurally so the package needs no ESLint dependency. */
+export interface FlatConfigEntry {
+    name: string;
+    files: string[];
+    rules: Record<string, unknown>;
+}
+export interface DesignConfigOptions extends ColourOptions, TypographyOptions {
+    /** What the rules apply to. Narrow it to exclude generated or vendored code. */
+    files?: string[];
+}
+/**
+ * Every rule in one flat-config entry, ready to spread into eslint.config.js:
+ *
+ *   import { designConfig } from "@supertype.ai/foundations/eslint";
+ *   export default [ ...designConfig({ accents: "the brand tints" }) ];
+ *
+ * One entry is not a detail. Flat config replaces a rule's options rather than
+ * merging them, so two blocks covering overlapping files leave only the last
+ * one's rules in effect. Combining them here is what stops a consumer losing
+ * half the set by accident. If you need a second scope, call this again with a
+ * different `files` and no overlap.
+ */
+export declare function designConfig({ files, accents, weights, ramp, pairing, axis, }?: DesignConfigOptions): FlatConfigEntry[];