@designtools/docs 0.2.3 → 0.3.0

package/src/playground.tsx

@@ -250,9 +250,9 @@ export function FlagControl({ name, checked, onChange }: { name: string; checked
         checked={checked}
         onCheckedChange={onChange}
         // drawn small, pressed large: the hit area reaches the docs' target without the switch growing
-        className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-input p-0.5 transition-colors duration-(--dt-duration-fast) after:absolute after:-inset-2.5 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:bg-primary"
+        className="relative h-6 w-10 shrink-0 cursor-pointer rounded-full bg-input p-0.5 transition-colors duration-(--dt-duration-fast) after:absolute after:-inset-2.5 after:content-[''] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring data-[checked]:bg-[var(--docs-accent,var(--primary))]"
       >
-        <Switch.Thumb className="block size-5 rounded-full bg-primary-foreground shadow-xs transition-transform duration-(--dt-duration-fast) data-[checked]:translate-x-4" />
+        <Switch.Thumb className="block size-5 rounded-full bg-canvas shadow-xs ring-1 ring-border transition-transform duration-(--dt-duration-fast) data-[checked]:translate-x-4" />
       </Switch.Root>
     </div>
   );

package/src/shell.tsx

@@ -93,6 +93,8 @@ export function DocsShell({
   children: ReactNode;
 }) {
   const current = usePathname();
+  // the overview's own address: the base path, or the site root when the docs are served there (basePath "")
+  const home = basePath || "/";
   const searchItems = useMemo(
     () =>
       searchIndex({
@@ -109,7 +111,7 @@ export function DocsShell({
   const sections = useMemo<Section[]>(() => {
     const families = groupFamilies(manifest);
     const all: Section[] = [
-      { id: "overview", label: "Overview", icon: House, href: basePath, groups: [] },
+      { id: "overview", label: "Overview", icon: House, href: home, groups: [] },
       { id: "brand", label: "Brand", icon: BookOpen, groups: [{ links: brand }] },
       { id: "foundations", label: "Foundations", icon: Palette, groups: [{ links: foundations }] },
       ...(rules?.rules.length ? [{ id: "rules", label: "Rules", icon: Scale, href: `${basePath}/rules`, groups: [] }] : []),
@@ -135,7 +137,7 @@ export function DocsShell({
       { id: "standards", label: "Standards", icon: Gauge, groups: [{ links: standards }] },
     ];
     return all.filter((s) => s.href || s.groups.some((g) => g.links.length));
-  }, [manifest, rules, patterns, brand, foundations, standards, basePath]);
+  }, [manifest, rules, patterns, brand, foundations, standards, basePath, home]);
 
   // every page in navigation order, for the section a page sits in and its neighbours
   const page = useMemo(() => {
@@ -156,7 +158,7 @@ export function DocsShell({
   useEffect(() => setMenu(false), [current]);
 
   const brandLink = (
-    <Link href={basePath} data-slot="docs-title" className={cx(target, "flex min-w-0 items-center gap-3 rounded-md focus-visible:outline-2 focus-visible:outline-ring")}>
+    <Link href={home} data-slot="docs-title" className={cx(target, "flex min-w-0 items-center gap-3 rounded-md focus-visible:outline-2 focus-visible:outline-ring")}>
       {logo && (
         <span data-slot="docs-logo" className="shrink-0">
           <Live>{logo}</Live>
@@ -224,7 +226,7 @@ export function DocsShell({
             {search && <DocsSearch items={searchItems} shortcuts={false} variant="icon" />}
           </header>
 
-          {hero && current === basePath && (
+          {hero && current === home && (
             <div data-slot="docs-hero" className="w-full">
               <Live>{hero}</Live>
             </div>

package/src/standards.tsx

@@ -26,13 +26,13 @@ export function Standards({ baselines, children }: { baselines: Record<string, u
                 {section.title}
               </h3>
               {single ? (
-                <p className="text-5xl font-light tracking-tight">{section.rows[0].value}</p>
+                <p className="text-xl leading-snug tracking-tight text-pretty">{section.rows[0].value}</p>
               ) : section.rows.length ? (
                 <dl className="flex flex-col gap-3">
                   {section.rows.map((row) => (
                     <div key={row.label} className="flex flex-col gap-0.5">
                       <dt className="text-xs text-muted-foreground">{row.label}</dt>
-                      <dd className="text-2xl font-light tracking-tight tabular-nums">{row.value}</dd>
+                      <dd className="text-lg leading-snug tracking-tight tabular-nums">{row.value}</dd>
                     </div>
                   ))}
                 </dl>

package/src/styles.css

@@ -9,8 +9,9 @@
  * semantic names (--canvas, --surface, --primary, …), so a project on our tokens
  * needs nothing; any other project sets those names on the docs. Fonts take
  * --docs-font-sans / --docs-font-mono, else the project's --font-sans and
- * --font-mono; headings --docs-display, else --font-display. Sizes, radii,
- * shadows, leading and tracking follow the project's scale where it has one.
+ * --font-mono; headings --docs-display, else --font-display. Sizes, shadows,
+ * leading and tracking follow the project's scale where it has one; corners
+ * are the docs' own (--docs-radius-*), never the project's.
  * Every value has a fallback, so the docs render on a project with none of it.
  */
 @layer theme, base, components, utilities;
@@ -109,12 +110,12 @@
   --tracking-wide: var(--tracking-wide, 0.04em);
   --tracking-widest: var(--tracking-widest, 0.16em);
 
-  --radius-xs: var(--docs-radius-xs, var(--radius-xs, 0.125rem));
-  --radius-sm: var(--docs-radius-sm, var(--radius-sm, 0.25rem));
-  --radius-md: var(--docs-radius-md, var(--radius-md, 0.375rem));
-  --radius-lg: var(--docs-radius-lg, var(--radius-lg, 0.5rem));
-  --radius-xl: var(--docs-radius-xl, var(--radius-xl, 0.75rem));
-  --radius-2xl: var(--docs-radius-2xl, var(--radius-2xl, 1rem));
+  --radius-xs: var(--docs-radius-xs, 0.125rem);
+  --radius-sm: var(--docs-radius-sm, 0.25rem);
+  --radius-md: var(--docs-radius-md, 0.375rem);
+  --radius-lg: var(--docs-radius-lg, 0.5rem);
+  --radius-xl: var(--docs-radius-xl, 0.75rem);
+  --radius-2xl: var(--docs-radius-2xl, 1rem);
 
   --shadow-xs: var(--shadow-xs, 0 1px 2px 0 color-mix(in oklch, var(--shadow, #0b0d12) 6%, transparent));
   --shadow-sm: var(--shadow-sm, 0 1px 3px 0 color-mix(in oklch, var(--shadow, #0b0d12) 10%, transparent));

package/src/type-ramp.tsx

@@ -34,12 +34,9 @@ export function TypeRamp({
         <div className="grid gap-x-12 gap-y-10 md:grid-cols-2">
           {families.map((f) => (
             <figure key={f.name} data-slot="type-family" className="flex flex-col gap-5 border-t border-border pt-6">
-              <div className="flex flex-col gap-6" style={{ fontFamily: `var(${f.name})` }}>
-                <span className="text-8xl leading-none font-light tracking-tighter">Aa</span>
-                <span className="text-sm leading-relaxed break-all text-muted-foreground">
-                  ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789 &amp;?!
-                </span>
-              </div>
+              <span className="text-8xl leading-none font-light tracking-tighter" style={{ fontFamily: `var(${f.name})` }}>
+                Aa
+              </span>
               <figcaption className="flex flex-col gap-0.5">
                 <code className="font-mono text-xs font-medium">{shortName(f, "font")}</code>
                 <span className="truncate font-mono text-xs text-muted-foreground" title={f.values.default}>

package/src/variant-matrix.tsx

@@ -1,8 +1,9 @@
 "use client";
 
 import { Live } from "./lib/live";
+import { wrapIn } from "./lib/wrap";
 import { Grid3x3, Moon, Sun } from "lucide-react";
-import { type ReactNode, useEffect, useState } from "react";
+import { type ReactElement, type ReactNode, useEffect, useState } from "react";
 import { cx } from "./lib/cx";
 import { coerce, Missing, useLookup } from "./lib/lookup";
 import type { ComponentEntry, VariantAxis } from "./lib/manifest-types";
@@ -19,9 +20,12 @@ export function VariantMatrix({
   props = {},
   children,
   axes: only,
+  wrap,
 }: {
   entry: ComponentEntry;
   props?: Record<string, unknown>;
+  /** What each instance must sit in to work: a provider, its root. */
+  wrap?: ReactElement<{ children?: ReactNode }>;
   /** What to render inside each instance. Defaults to the component's name. */
   children?: ReactNode;
   /** Limit and order the axes shown. */
@@ -38,9 +42,12 @@ export function VariantMatrix({
   const content = children ?? entry.name;
   const render = (extra: Record<string, string>) => (
     <Live>
-      <Component {...props} {...coerce(extra)}>
-        {content}
-      </Component>
+      {wrapIn(
+        wrap,
+        <Component {...props} {...coerce(extra)}>
+          {content}
+        </Component>,
+      )}
     </Live>
   );
   const [rows, cols, ...rest] = axes;

package/src/workbench.tsx

@@ -2,6 +2,7 @@
 
 import { handlerNames } from "./lib/handlers";
 import { Live } from "./lib/live";
+import { wrapIn } from "./lib/wrap";
 import { Tabs } from "@base-ui/react/tabs";
 import { Toggle } from "@base-ui/react/toggle";
 import { ToggleGroup } from "@base-ui/react/toggle-group";
@@ -381,7 +382,7 @@ export function Workbench({
                 }}
               >
                 <div ref={target} data-slot="workbench-target" className="flex max-w-full items-center justify-center">
-                  <Boundary label={entry.name}>{wrap && isValidElement(wrap) ? cloneElement(wrap, undefined, node) : node}</Boundary>
+                  <Boundary label={entry.name}>{wrapIn(wrap, node)}</Boundary>
                 </div>
               </div>
             </div>