Export · #424

A package that does not overreach

A React package could ship one honest thing today: a provider that puts the 14 colour tokens on a subtree as custom properties. It cannot ship the catalog components, because their source is not stored anywhere this export can read — so the provider wraps your markup in the palette and stops there.

Download the provider The Tailwind preset →

The file (1.4 KB, complete)

/* Motif UI — token provider.
 *
 * This is the one component a package could ship honestly today: it puts the
 * design tokens on a subtree as custom properties, which is exactly what this
 * site's stylesheet does at :root. It does not render the catalog components,
 * because their source is not part of the export.
 *
 * Intended package layout (not published — see /integrations/react):
 *   motif-tokens/package.json      name, version, peerDependencies: react>=18
 *   motif-tokens/index.js          this file
 *   motif-tokens/tokens.json       the DTCG file from /api/exports/tokens.json
 *   motif-tokens/README.md         what it does and what it does not
 */
"use client";

import React from "react";

const TOKENS = {
  "--color-bg": "#06070b",
  "--color-panel": "#0b0d14",
  "--color-raised": "#10131d",
  "--color-edge": "rgba(255, 255, 255, 0.08)",
  "--color-edge-strong": "rgba(255, 255, 255, 0.16)",
  "--color-ink": "#edf0f7",
  "--color-ink-dim": "#9aa3b5",
  "--color-ink-faint": "#747b87",
  "--color-accent": "#8b5cf6",
  "--color-accent-2": "#22d3ee",
  "--color-accent-3": "#f472b6",
  "--color-mint": "#34d399",
  "--color-amber": "#fbbf24",
  "--color-danger": "#f87171",
};

export function MotifTokens({ mode = "dark", children }) {
  return React.createElement(
    "div",
    {
      "data-motif-mode": mode,
      style: TOKENS,
    },
    children
  );
}


export default MotifTokens;

The package layout it implies

motif-tokens/
├─ package.json     name, version, peerDependencies: react >= 18
├─ index.js         the provider above
├─ tokens.json      the DTCG file from /api/exports/tokens.json
└─ README.md        what it does, and the three things it does not

Nothing here is inside a component that pretends to be one of the catalog's 289. A wrapper that rendered a “button” this site never authored would make the package look bigger than the product.

Not published, and why that matters

There is no registry entry, so npm install motif-tokens installs nothing. The page will not print a command that fails.
No version resolution means no lockfile: a copy you take today is the copy you have. Re-downloading is the update mechanism.
Peer dependency ranges, licence files and a changelog are the work of publishing, not of exporting — they are listed here as the gap rather than approximated.