@designtools/docs 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @designtools/docs
 
+## 0.2.2
+
+### Patch Changes
+
+- c4b61fb: The workbench no longer freezes on a component with a function prop it calls while rendering (Base UI's Meter and Progress, through `getAriaValueText`): only event handlers (`on…`) are logged to Actions now, so logging can never re-render the component into calling it again. The overview's section list loses its glimpses (colour dots, the logo, sample rules): each part is its name, its count and why it exists.
+
+## 0.2.1
+
+### Patch Changes
+
+- a6d3829: The colour page gives its samples room: no panels round them, one hairline in each sample's own colour, the mode named once over each column, surfaces and utility colours as one row each with their full names and ratios, and the on-the-page table's verdicts as one quiet line (an icon, the ratio, the word) instead of wrapping pills.
+
 ## 0.2.0
 
 ### Minor Changes

package/dist/lib/handlers.d.ts

@@ -0,0 +1,7 @@
+import type { PropEntry } from "./manifest-types.js";
+/**
+ * The props the workbench logs to its Actions tab: event handlers only. A function prop that is not a
+ * handler (getAriaValueText, a formatter, a render function) is called while the component renders, and
+ * logging it re-renders the component, which calls it again, for ever.
+ */
+export declare function handlerNames(props: Record<string, PropEntry>): string[];

package/dist/lib/handlers.js

@@ -0,0 +1,11 @@
+const isFunction = (name, p) => /=>|^\(|Function|Handler/.test(p.type) || /^on[A-Z]/.test(name);
+/**
+ * The props the workbench logs to its Actions tab: event handlers only. A function prop that is not a
+ * handler (getAriaValueText, a formatter, a render function) is called while the component renders, and
+ * logging it re-renders the component, which calls it again, for ever.
+ */
+export function handlerNames(props) {
+    return Object.entries(props)
+        .filter(([name, p]) => isFunction(name, p) && /^on[A-Z]/.test(name))
+        .map(([name]) => name);
+}

package/dist/next/pages.js

@@ -1,14 +1,12 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { ArrowRight, ArrowUpRight } from "lucide-react";
 import Link from "next/link";
-import { cx, display } from "../lib/cx.js";
 import { AdherenceSummary } from "../adherence-summary.js";
 import { Anatomy } from "../anatomy.js";
 import { Examples } from "../examples.js";
 import { Glossary } from "../glossary.js";
 import { Imagery } from "../imagery.js";
 import { groupFamilies, slugOf } from "../lib/manifest.js";
-import { StatusBadge } from "../lib/status.js";
 import { LogoUsage } from "../logo-usage.js";
 import { PageActions } from "../page-actions.js";
 import { Pattern } from "../pattern.js";
@@ -112,69 +110,56 @@ function Overview({ site }) {
     const count = families.reduce((n, g) => n + g.families.length, 0);
     const brandPages = site.editorial.filter((p) => (p.section ?? "brand") === "brand");
     const brandFirst = brandPages[0];
-    const products = site.taxonomy.terms.filter((t) => t.kind === "product" && t.wrong?.length);
-    const example = products[0] ?? site.taxonomy.terms.find((t) => t.wrong?.length);
-    const fills = ["--primary", "--neutral", "--success", "--warning", "--destructive"].filter((n) => site.tokens.tokens.some((t) => t.name === n));
     const share = config.adherence?.summary.share;
-    // each section of the system, why it exists, how much is in it, and a glimpse of it, live from the manifest
+    // each section of the system, why it exists and how much is in it
     const sections = [];
     if (brandFirst || site.shows("logo"))
         sections.push({
             title: "Brand",
             href: `${base}/${brandFirst?.slug ?? "brand/logo"}`,
             why: "What the brand believes, how it sounds and how it looks, so every screen and sentence comes from the same place.",
-            count: `${brandPages.length + (site.assets.assets.some((a) => a.kind === "logo") ? 1 : 0)} pages`,
-            preview: config.logo ? _jsx("span", { className: "flex h-10 items-center [&_img]:h-8 [&_svg]:h-8", children: config.logo }) : null,
+            count: `${brandPages.length + (site.assets.assets.some((a) => a.kind === "logo") ? 1 : 0)} pages`
         });
     sections.push({
         title: "Foundations",
         href: `${base}/colour`,
         why: "Colour, type and the scale, generated from the tokens and measured in both modes, so nothing is a guess.",
         count: `${site.tokens.tokens.length} tokens`,
-        preview: (_jsxs("span", { className: "flex items-center gap-4", children: [_jsx("span", { className: "flex -space-x-1.5", children: fills.map((n) => (_jsx("span", { "aria-hidden": true, className: "size-8 rounded-full ring-2 ring-canvas", style: { background: `var(${n})` } }, n))) }), _jsx("span", { "aria-hidden": true, className: cx(display, "text-3xl leading-none tracking-tight"), children: "Aa" })] })),
     });
     if (site.rules.rules.length)
         sections.push({
             title: "Rules",
             href: `${base}/rules`,
             why: "The lines the brand and the interface hold, each written for people, with the check that proves it.",
-            count: `${site.rules.rules.length} rules, ${site.rules.rules.filter((r) => r.status === "confirmed").length} confirmed`,
-            preview: (_jsx("span", { className: "flex flex-col gap-1.5 text-sm", children: site.rules.rules
-                    .filter((r) => r.kind === "brand")
-                    .slice(0, 2)
-                    .map((r) => (_jsxs("span", { className: "flex items-center gap-2", children: [_jsx(StatusBadge, { status: r.status }), _jsx("span", { className: "truncate", children: r.title })] }, r.id))) })),
+            count: `${site.rules.rules.length} rules, ${site.rules.rules.filter((r) => r.status === "confirmed").length} confirmed`
         });
     if (site.shows("components") && count)
         sections.push({
             title: "Components",
             href: `${base}/components/${slugOf(families[0].families[0].head)}`,
             why: "The real components the product is built from, each with when to use it, a live workbench and an accessibility report.",
-            count: `${count} components`,
-            preview: (_jsx("span", { className: "flex flex-wrap gap-1.5", children: families.slice(0, 6).map((g) => (_jsxs("span", { className: "inline-flex min-h-7 items-center rounded-md bg-muted px-2 text-xs", children: [g.category, " ", _jsx("span", { className: "ml-1.5 text-muted-foreground tabular-nums", children: g.families.length })] }, g.category))) })),
+            count: `${count} components`
         });
     if (site.patterns.patterns.length)
         sections.push({
             title: "Patterns",
             href: `${base}/patterns/${site.patterns.patterns[0].id}`,
             why: "The screens the product keeps making, composed of the components, so a recurring problem is solved once.",
-            count: `${site.patterns.patterns.length} patterns`,
-            preview: _jsx("span", { className: "text-sm text-muted-foreground", children: site.patterns.patterns.slice(0, 3).map((p) => p.name).join(" · ") }),
+            count: `${site.patterns.patterns.length} patterns`
         });
     if (site.shows("standards") && (config.baselines || config.adherence))
         sections.push({
             title: "Standards",
             href: `${base}/standards`,
             why: "The bar the product is held to, and how closely it follows the system today, reported on every change.",
-            count: share == null ? "Baselines agreed" : `${Math.round(share * 100)}% of the product on the system`,
-            preview: share == null ? null : (_jsxs("span", { className: "flex w-full max-w-56 items-center gap-3", children: [_jsx("span", { className: "h-1.5 flex-1 overflow-hidden rounded-full bg-muted", children: _jsx("span", { className: "block h-full rounded-full bg-canvas-foreground", style: { width: `${Math.round(share * 100)}%` } }) }), _jsxs("span", { className: "text-sm tabular-nums", children: [Math.round(share * 100), "%"] })] })),
+            count: share == null ? "Baselines agreed" : `${Math.round(share * 100)}% of the product on the system`
         });
     if (site.shows("vocabulary") && site.taxonomy.terms.length)
         sections.push({
             title: "Vocabulary",
             href: `${base}/vocabulary`,
             why: "One name for each thing, and the names people reach for instead, so people and agents mean the same thing.",
-            count: `${site.taxonomy.terms.length} terms`,
-            preview: example ? (_jsxs("span", { className: "text-sm", children: ["Say ", _jsx("strong", { className: "font-semibold", children: example.name }), ", ", _jsx("span", { className: "text-muted-foreground line-through decoration-current/40", children: example.wrong?.[0] })] })) : null,
+            count: `${site.taxonomy.terms.length} terms`
         });
     const loop = [
         ["Written once", "The components, tokens and rules live in the product's own code. Nobody keeps a second copy in a slide deck or a wiki."],
@@ -183,6 +168,6 @@ function Overview({ site }) {
         ["Checked", "Each rule names the check that proves it. Stale docs stop a commit; everything else is reported."],
         ["Measured", "A report on every change shows how closely the product follows the system. It informs the conversation; it never blocks the work."],
     ];
-    return (_jsxs(_Fragment, { children: [!config.hero && (_jsx(DocsHeader, { title: site.title, lead: config.lead ?? "The brand and the design system in one place, for the people who make the product and the agents that build it with them.", children: _jsx(PageActions, { basePath: base }) })), _jsx(DocsSection, { title: "What's here, and why", lead: "Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.", children: _jsx("ul", { "data-slot": "overview-sections", className: "grid gap-x-12 md:grid-cols-2", children: sections.map((sec) => (_jsx("li", { className: "border-t border-border", children: _jsxs(Link, { href: sec.href, className: "group flex h-full flex-col gap-4 py-7 focus-visible:outline-2 focus-visible:outline-ring", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-4", children: [_jsx("span", { className: "text-2xl leading-tight tracking-tight underline-offset-[6px] group-hover:underline", children: sec.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: sec.count })] }), _jsx("span", { className: "max-w-md text-base leading-relaxed text-muted-foreground", children: sec.why }), sec.preview && _jsx("span", { className: "mt-auto flex min-h-10 items-center pt-2", children: sec.preview })] }) }, sec.title))) }) }), config.overview?.agentic !== false && (_jsxs(DocsSection, { title: "Why this is agentic", lead: config.overview?.agenticLead ??
+    return (_jsxs(_Fragment, { children: [!config.hero && (_jsx(DocsHeader, { title: site.title, lead: config.lead ?? "The brand and the design system in one place, for the people who make the product and the agents that build it with them.", children: _jsx(PageActions, { basePath: base }) })), _jsx(DocsSection, { title: "What's here, and why", lead: "Each part of the system has one job. Together they mean the product, its people and its agents work from the same source.", children: _jsx("ul", { "data-slot": "overview-sections", className: "grid gap-x-12 md:grid-cols-2", children: sections.map((sec) => (_jsx("li", { className: "border-t border-border", children: _jsxs(Link, { href: sec.href, className: "group flex h-full flex-col gap-4 py-7 focus-visible:outline-2 focus-visible:outline-ring", children: [_jsxs("span", { className: "flex items-baseline justify-between gap-4", children: [_jsx("span", { className: "text-2xl leading-tight tracking-tight underline-offset-[6px] group-hover:underline", children: sec.title }), _jsx("span", { className: "shrink-0 text-xs text-muted-foreground tabular-nums", children: sec.count })] }), _jsx("span", { className: "max-w-md text-base leading-relaxed text-muted-foreground", children: sec.why })] }) }, sec.title))) }) }), config.overview?.agentic !== false && (_jsxs(DocsSection, { title: "Why this is agentic", lead: config.overview?.agenticLead ??
                     "A design system used to be a document people were asked to follow. This one is the source the product, its people and its AI agents all work from, and it checks itself.", children: [_jsx("ol", { "data-slot": "overview-loop", className: "grid gap-x-6 gap-y-8 sm:grid-cols-2 xl:grid-cols-5", children: loop.map(([title, body], i) => (_jsxs("li", { className: "relative flex flex-col gap-3 xl:pr-2", children: [_jsxs("span", { className: "flex items-center gap-3", children: [_jsx("span", { className: "grid size-8 shrink-0 place-items-center rounded-full bg-canvas-foreground text-sm font-medium text-canvas tabular-nums", children: i + 1 }), i < loop.length - 1 && _jsx("span", { "aria-hidden": true, className: "hidden h-px flex-1 bg-border xl:block" })] }), _jsx("span", { className: "text-lg leading-snug tracking-tight", children: title }), _jsx("span", { className: "text-sm leading-relaxed text-muted-foreground", children: body })] }, title))) }), _jsxs("p", { className: "flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-muted-foreground", children: ["See it the way an agent does:", _jsxs("a", { href: `${base}.md`, className: "inline-flex items-center gap-1 font-medium text-canvas-foreground underline underline-offset-4 hover:decoration-2", children: ["this page as markdown ", _jsx(ArrowUpRight, { "aria-hidden": true, className: "size-3.5" })] })] })] })), _jsx(DocsFooter, { provenance: config.provenance })] }));
 }

package/dist/styles.css

@@ -10,7 +10,6 @@
       --tw-rotate-z: initial;
       --tw-skew-x: initial;
       --tw-skew-y: initial;
-      --tw-space-x-reverse: 0;
       --tw-divide-y-reverse: 0;
       --tw-border-style: solid;
       --tw-gradient-position: initial;
@@ -630,10 +629,6 @@
     margin-left: .25rem;
   }
 
-  :where([data-designtools]) .ml-1\.5:not([data-docs-content] *), .ml-1\.5:where([data-designtools]):not([data-docs-content] *) {
-    margin-left: .375rem;
-  }
-
   :where([data-designtools]) .ml-3:not([data-docs-content] *), .ml-3:where([data-designtools]):not([data-docs-content] *) {
     margin-left: .75rem;
   }
@@ -751,6 +746,11 @@
     height: 2.25rem;
   }
 
+  :where([data-designtools]) .size-10:not([data-docs-content] *), .size-10:where([data-designtools]):not([data-docs-content] *) {
+    width: 2.5rem;
+    height: 2.5rem;
+  }
+
   :where([data-designtools]) .size-14:not([data-docs-content] *), .size-14:where([data-designtools]):not([data-docs-content] *) {
     width: 3.5rem;
     height: 3.5rem;
@@ -778,10 +778,6 @@
     height: .125rem;
   }
 
-  :where([data-designtools]) .h-1\.5:not([data-docs-content] *), .h-1\.5:where([data-designtools]):not([data-docs-content] *) {
-    height: .375rem;
-  }
-
   :where([data-designtools]) .h-2:not([data-docs-content] *), .h-2:where([data-designtools]):not([data-docs-content] *) {
     height: .5rem;
   }
@@ -818,6 +814,10 @@
     height: 3rem;
   }
 
+  :where([data-designtools]) .h-14:not([data-docs-content] *), .h-14:where([data-designtools]):not([data-docs-content] *) {
+    height: 3.5rem;
+  }
+
   :where([data-designtools]) .h-16:not([data-docs-content] *), .h-16:where([data-designtools]):not([data-docs-content] *) {
     height: 4rem;
   }
@@ -894,10 +894,6 @@
     min-height: 2.25rem;
   }
 
-  :where([data-designtools]) .min-h-10:not([data-docs-content] *), .min-h-10:where([data-designtools]):not([data-docs-content] *) {
-    min-height: 2.5rem;
-  }
-
   :where([data-designtools]) .min-h-11:not([data-docs-content] *), .min-h-11:where([data-designtools]):not([data-docs-content] *) {
     min-height: 2.75rem;
   }
@@ -906,14 +902,14 @@
     min-height: 3rem;
   }
 
-  :where([data-designtools]) .min-h-20:not([data-docs-content] *), .min-h-20:where([data-designtools]):not([data-docs-content] *) {
-    min-height: 5rem;
-  }
-
   :where([data-designtools]) .min-h-28:not([data-docs-content] *), .min-h-28:where([data-designtools]):not([data-docs-content] *) {
     min-height: 7rem;
   }
 
+  :where([data-designtools]) .min-h-36:not([data-docs-content] *), .min-h-36:where([data-designtools]):not([data-docs-content] *) {
+    min-height: 9rem;
+  }
+
   :where([data-designtools]) .min-h-40:not([data-docs-content] *), .min-h-40:where([data-designtools]):not([data-docs-content] *) {
     min-height: 10rem;
   }
@@ -970,14 +966,14 @@
     width: 2.75rem;
   }
 
-  :where([data-designtools]) .w-14:not([data-docs-content] *), .w-14:where([data-designtools]):not([data-docs-content] *) {
-    width: 3.5rem;
-  }
-
   :where([data-designtools]) .w-28:not([data-docs-content] *), .w-28:where([data-designtools]):not([data-docs-content] *) {
     width: 7rem;
   }
 
+  :where([data-designtools]) .w-32:not([data-docs-content] *), .w-32:where([data-designtools]):not([data-docs-content] *) {
+    width: 8rem;
+  }
+
   :where([data-designtools]) .w-48:not([data-docs-content] *), .w-48:where([data-designtools]):not([data-docs-content] *) {
     width: 12rem;
   }
@@ -1018,10 +1014,6 @@
     max-width: 7rem;
   }
 
-  :where([data-designtools]) .max-w-56:not([data-docs-content] *), .max-w-56:where([data-designtools]):not([data-docs-content] *) {
-    max-width: 14rem;
-  }
-
   :where([data-designtools]) .max-w-64:not([data-docs-content] *), .max-w-64:where([data-designtools]):not([data-docs-content] *) {
     max-width: 16rem;
   }
@@ -1070,8 +1062,8 @@
     min-width: 36rem;
   }
 
-  :where([data-designtools]) .min-w-\[40rem\]:not([data-docs-content] *), .min-w-\[40rem\]:where([data-designtools]):not([data-docs-content] *) {
-    min-width: 40rem;
+  :where([data-designtools]) .min-w-\[46rem\]:not([data-docs-content] *), .min-w-\[46rem\]:where([data-designtools]):not([data-docs-content] *) {
+    min-width: 46rem;
   }
 
   :where([data-designtools]) .min-w-\[var\(--docs-target\,2\.75rem\)\]:not([data-docs-content] *), .min-w-\[var\(--docs-target\,2\.75rem\)\]:where([data-designtools]):not([data-docs-content] *) {
@@ -1090,6 +1082,10 @@
     flex-shrink: 0;
   }
 
+  :where([data-designtools]) .table-fixed:not([data-docs-content] *), .table-fixed:where([data-designtools]):not([data-docs-content] *) {
+    table-layout: fixed;
+  }
+
   :where([data-designtools]) .border-collapse:not([data-docs-content] *), .border-collapse:where([data-designtools]):not([data-docs-content] *) {
     border-collapse: collapse;
   }
@@ -1332,12 +1328,6 @@
     column-gap: 3rem;
   }
 
-  :where([data-designtools]) :where(.-space-x-1\.5 > :not(:last-child)):not([data-docs-content] *), :where(.-space-x-1\.5 > :not(:last-child)):where([data-designtools]):not([data-docs-content] *) {
-    --tw-space-x-reverse: 0;
-    margin-inline-start: calc(calc(.25rem * -1.5) * var(--tw-space-x-reverse));
-    margin-inline-end: calc(calc(.25rem * -1.5) * calc(1 - var(--tw-space-x-reverse)));
-  }
-
   :where([data-designtools]) .gap-y-1:not([data-docs-content] *), .gap-y-1:where([data-designtools]):not([data-docs-content] *) {
     row-gap: .25rem;
   }
@@ -1507,10 +1497,6 @@
     border-style: solid;
   }
 
-  :where([data-designtools]) .border-\(--border\):not([data-docs-content] *), .border-\(--border\):where([data-designtools]):not([data-docs-content] *) {
-    border-color: var(--border);
-  }
-
   :where([data-designtools]) .border-border:not([data-docs-content] *), .border-border:where([data-designtools]):not([data-docs-content] *) {
     border-color: var(--border, #e2e4e8);
   }
@@ -1896,10 +1882,6 @@
     padding-top: 1.5rem;
   }
 
-  :where([data-designtools]) .pt-8:not([data-docs-content] *), .pt-8:where([data-designtools]):not([data-docs-content] *) {
-    padding-top: 2rem;
-  }
-
   :where([data-designtools]) .pt-10:not([data-docs-content] *), .pt-10:where([data-designtools]):not([data-docs-content] *) {
     padding-top: 2.5rem;
   }
@@ -1960,6 +1942,10 @@
     padding-bottom: 1rem;
   }
 
+  :where([data-designtools]) .pb-5:not([data-docs-content] *), .pb-5:where([data-designtools]):not([data-docs-content] *) {
+    padding-bottom: 1.25rem;
+  }
+
   :where([data-designtools]) .pb-20:not([data-docs-content] *), .pb-20:where([data-designtools]):not([data-docs-content] *) {
     padding-bottom: 5rem;
   }
@@ -1996,6 +1982,10 @@
     vertical-align: middle;
   }
 
+  :where([data-designtools]) .align-top:not([data-docs-content] *), .align-top:where([data-designtools]):not([data-docs-content] *) {
+    vertical-align: top;
+  }
+
   :where([data-designtools]) .\[font-family\:var\(--docs-display\,var\(--font-display\,var\(--font-sans\)\)\)\]:not([data-docs-content] *), .\[font-family\:var\(--docs-display\,var\(--font-display\,var\(--font-sans\)\)\)\]:where([data-designtools]):not([data-docs-content] *) {
     font-family: var(--docs-display, var(--font-display, var(--font-sans)));
   }
@@ -2326,8 +2316,8 @@
     opacity: .7;
   }
 
-  :where([data-designtools]) .opacity-75:not([data-docs-content] *), .opacity-75:where([data-designtools]):not([data-docs-content] *) {
-    opacity: .75;
+  :where([data-designtools]) .opacity-80:not([data-docs-content] *), .opacity-80:where([data-designtools]):not([data-docs-content] *) {
+    opacity: .8;
   }
 
   :where([data-designtools]) .shadow:not([data-docs-content] *), .shadow:where([data-designtools]):not([data-docs-content] *) {
@@ -2410,26 +2400,31 @@
     box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   }
 
-  :where([data-designtools]) .ring-2:not([data-docs-content] *), .ring-2:where([data-designtools]):not([data-docs-content] *) {
-    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
-    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+  :where([data-designtools]) .ring-\(--border\):not([data-docs-content] *), .ring-\(--border\):where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-color: var(--border);
   }
 
-  :where([data-designtools]) .ring-border:not([data-docs-content] *), .ring-border:where([data-designtools]):not([data-docs-content] *) {
-    --tw-ring-color: var(--border, #e2e4e8);
+  :where([data-designtools]) .ring-\(--canvas-foreground\)\/15:not([data-docs-content] *), .ring-\(--canvas-foreground\)\/15:where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-color: var(--canvas-foreground);
   }
 
-  :where([data-designtools]) .ring-canvas:not([data-docs-content] *), .ring-canvas:where([data-designtools]):not([data-docs-content] *) {
-    --tw-ring-color: var(--canvas, #fff);
+  @supports (color: color-mix(in lab, red, red)) {
+    :where([data-designtools]) .ring-\(--canvas-foreground\)\/15:not([data-docs-content] *), .ring-\(--canvas-foreground\)\/15:where([data-designtools]):not([data-docs-content] *) {
+      --tw-ring-color: color-mix(in oklab, var(--canvas-foreground) 15%, transparent);
+    }
   }
 
-  :where([data-designtools]) .ring-current\/30:not([data-docs-content] *), .ring-current\/30:where([data-designtools]):not([data-docs-content] *) {
+  :where([data-designtools]) .ring-border:not([data-docs-content] *), .ring-border:where([data-designtools]):not([data-docs-content] *) {
+    --tw-ring-color: var(--border, #e2e4e8);
+  }
+
+  :where([data-designtools]) .ring-current\/15:not([data-docs-content] *), .ring-current\/15:where([data-designtools]):not([data-docs-content] *) {
     --tw-ring-color: currentcolor;
   }
 
   @supports (color: color-mix(in lab, red, red)) {
-    :where([data-designtools]) .ring-current\/30:not([data-docs-content] *), .ring-current\/30:where([data-designtools]):not([data-docs-content] *) {
-      --tw-ring-color: color-mix(in oklab, currentcolor 30%, transparent);
+    :where([data-designtools]) .ring-current\/15:not([data-docs-content] *), .ring-current\/15:where([data-designtools]):not([data-docs-content] *) {
+      --tw-ring-color: color-mix(in oklab, currentcolor 15%, transparent);
     }
   }
 
@@ -2678,15 +2673,6 @@
     margin-left: -.375rem;
   }
 
-  :where([data-designtools]) .first\:border-t-0:first-child:not([data-docs-content] *), .first\:border-t-0:first-child:where([data-designtools]):not([data-docs-content] *) {
-    border-top-style: var(--tw-border-style);
-    border-top-width: 0;
-  }
-
-  :where([data-designtools]) .first\:pt-0:first-child:not([data-docs-content] *), .first\:pt-0:first-child:where([data-designtools]):not([data-docs-content] *) {
-    padding-top: 0;
-  }
-
   :where([data-designtools]) .first\:pt-1:first-child:not([data-docs-content] *), .first\:pt-1:first-child:where([data-designtools]):not([data-docs-content] *) {
     padding-top: .25rem;
   }
@@ -3040,6 +3026,10 @@
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 
+    :where([data-designtools]) .md\:grid-cols-\[9rem_repeat\(var\(--modes\)\,minmax\(0\,1fr\)\)\]:not([data-docs-content] *), .md\:grid-cols-\[9rem_repeat\(var\(--modes\)\,minmax\(0\,1fr\)\)\]:where([data-designtools]):not([data-docs-content] *) {
+      grid-template-columns: 9rem repeat(var(--modes),minmax(0,1fr));
+    }
+
     :where([data-designtools]) .md\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .md\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 11rem minmax(0, 1fr);
     }
@@ -3159,10 +3149,6 @@
       grid-template-columns: 3rem minmax(0, 1fr);
     }
 
-    :where([data-designtools]) .lg\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[11rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
-      grid-template-columns: 11rem minmax(0, 1fr);
-    }
-
     :where([data-designtools]) .lg\:grid-cols-\[19rem_minmax\(0\,1fr\)\]:not([data-docs-content] *), .lg\:grid-cols-\[19rem_minmax\(0\,1fr\)\]:where([data-designtools]):not([data-docs-content] *) {
       grid-template-columns: 19rem minmax(0, 1fr);
     }
@@ -3294,10 +3280,6 @@
     font-size: .875em;
   }
 
-  :where([data-designtools]) .\[\&_img\]\:h-8 img:not([data-docs-content] *), .\[\&_img\]\:h-8 img:where([data-designtools]):not([data-docs-content] *) {
-    height: 2rem;
-  }
-
   :where([data-designtools]) .\[\&_pre\]\:break-words pre:not([data-docs-content] *), .\[\&_pre\]\:break-words pre:where([data-designtools]):not([data-docs-content] *) {
     overflow-wrap: break-word;
   }
@@ -3306,10 +3288,6 @@
     white-space: pre-wrap;
   }
 
-  :where([data-designtools]) .\[\&_svg\]\:h-8 svg:not([data-docs-content] *), .\[\&_svg\]\:h-8 svg:where([data-designtools]):not([data-docs-content] *) {
-    height: 2rem;
-  }
-
   :where([data-designtools]) .\[\&\:\:-webkit-details-marker\]\:hidden:not([data-docs-content] *)::-webkit-details-marker, .\[\&\:\:-webkit-details-marker\]\:hidden:where([data-designtools]):not([data-docs-content] *)::-webkit-details-marker {
     display: none;
   }
@@ -3362,12 +3340,6 @@
   inherits: false
 }
 
-@property --tw-space-x-reverse {
-  syntax: "*";
-  inherits: false;
-  initial-value: 0;
-}
-
 @property --tw-divide-y-reverse {
   syntax: "*";
   inherits: false;

package/dist/swatches.d.ts

@@ -1,11 +1,12 @@
 import { type Mode } from "./lib/manifest.js";
 import type { TokensManifest } from "./lib/manifest-types.js";
 /**
- * Colour, painted from the tokens rather than restated. Each colour with a
- * subdued pair is a card: its fill, subdued, hover and press, in light and dark
- * side by side. Then the surfaces, then the utility colours. Every sample sits
- * inside its own `data-theme`, so dark is shown as the dark tokens resolve, and
- * every pair's contrast is measured on the colours the browser actually paints.
+ * Colour, painted from the tokens rather than restated. No panels and no cards around the samples:
+ * each sample is its own colour, with one hairline round it, set on the page in a light and a dark
+ * column. Each colour with a subdued pair shows its fill large, then subdued, hover and press; then
+ * the surfaces and the utility colours, one row each. Every sample sits inside its own `data-theme`,
+ * so dark is shown as the dark tokens resolve, and every pair's contrast is measured on the colours
+ * the browser actually paints.
  */
 export declare function SemanticSwatches({ tokens, modes, }: {
     tokens: TokensManifest;
@@ -15,7 +16,7 @@ export declare function SemanticSwatches({ tokens, modes, }: {
  * Each colour on each background, per mode: a label is measured on its own fill, and this is
  * everything else, red text on the page, a brand fill on a dark section. Backgrounds are the
  * canvas, surface and overlay and every named `--surface-<name>`; colours are each semantic fill
- * and muted text. T: fine as text (4.5:1); S: fine as a shape only (3:1); none: neither.
+ * and muted text. Text: fine as text (4.5:1); shape: fine as a shape only (3:1); none: neither.
  * Measured on what the browser paints, inside each mode's `data-theme`.
  */
 export declare function PageContrast({ tokens, modes }: {