actual-css 0.12.0 → 0.14.0

package/src/js/tab.js

@@ -9,6 +9,8 @@
  *            ArrowUp/Down for aria-orientation="vertical"
  *            ArrowDown (focus selected panel)
  *            [hidden], disabled and panel-less tabs are skipped
+ * Overflow:  a horizontal strip shows its whole selected tab, at connect and
+ *            on every selection
  *
  * Self-registers via registerEnhancement: injected tablists wire automatically.
  * The tab→panel map is rebuilt from the live tablist on each interaction,
@@ -17,9 +19,13 @@
  */
 
 import { registerEnhancement } from "./enhance.js";
+import { ensureInlineVisible } from "./inline-visible.js";
 import { itemForKey, shouldIgnoreKey } from "./keys.js";
+import { afterParse } from "./parsed.js";
 
-const TABLIST_SELECTOR = '[data-enhance~="tabs"]';
+// Ownership follows the ARIA structure, not the activation token: a tab
+// belongs to its closest role="tablist", enhanced or not.
+const TABLIST_SELECTOR = '[role="tablist"]';
 
 // A tablist owns only the tabs directly beneath it, not those of a nested
 // tablist. Filtering by closest owner keeps the outer list from operating on
@@ -85,10 +91,19 @@ function activate(tab) {
   }
 }
 
-function activateAndFocus(tab) {
+/* An overflowing horizontal strip shows the whole tab. At connect a
+   server-selected tab may render off-screen; on arrow keys and clicks the
+   native focus scroll is not enough: Chrome skips a tab already partly inside
+   the scrollport, so one showing a sliver at the edge stayed clipped. */
+function reveal(list, tab) {
+  if (list.getAttribute("aria-orientation") !== "vertical") ensureInlineVisible(list, tab);
+}
+
+function activateAndFocus(list, tab) {
   if (!tab) return;
   activate(tab);
   tab.focus();
+  reveal(list, tab);
 }
 
 function initialize(list) {
@@ -96,6 +111,7 @@ function initialize(list) {
   if (!tabs.length) return;
   const selected = tabs.find((tab) => tab.getAttribute("aria-selected") === "true") || tabs[0];
   activate(selected);
+  reveal(list, selected);
 }
 
 function onKeydown(e) {
@@ -133,7 +149,7 @@ function onKeydown(e) {
   if (!target) return;
 
   e.preventDefault();
-  activateAndFocus(target);
+  activateAndFocus(list, target);
 }
 
 function onClick(e) {
@@ -146,14 +162,24 @@ function onClick(e) {
   }
   e.preventDefault();
   if (tab.getAttribute("aria-selected") === "true") return;
-  activate(tab);
-  tab.focus();
+  activateAndFocus(list, tab);
 }
 
 registerEnhancement("tabs", (list) => {
+  // Tabs find their list through role="tablist"; without it nothing would
+  // respond, so say why instead of wiring a dead strip.
+  if (list.getAttribute("role") !== "tablist") {
+    console.warn('data-enhance="tabs" needs role="tablist" on the same element', list);
+    return;
+  }
   const controller = new AbortController();
-  initialize(list);
+  // Once parsed: a tablist connected mid-parse had no tabs yet, so the roving
+  // tabindex and the selected tab's placement were skipped for good.
+  const cancelInit = afterParse(list, () => initialize(list));
   list.addEventListener("click", onClick, { signal: controller.signal });
   list.addEventListener("keydown", onKeydown, { signal: controller.signal });
-  return () => controller.abort();
+  return () => {
+    cancelInit();
+    controller.abort();
+  };
 });

package/src/tooling/color.js

@@ -10,7 +10,8 @@
  * `const rgba = ${RASTERIZE};`. getComputedStyle returns color-mix() and
  * light-dark() results as oklab() or color(), so a 1x1 canvas turns any
  * computed color into sRGB bytes. Alpha is kept so contrast() can refuse a
- * translucent color instead of measuring it as if it were opaque.
+ * translucent color instead of measuring it as if it were opaque; composite()
+ * resolves it over its backdrop first.
  */
 export const RASTERIZE = `(() => {
   const canvas = Object.assign(document.createElement("canvas"), { width: 1, height: 1 });
@@ -46,6 +47,18 @@ export function contrast(a, b) {
   return (hi + 0.05) / (lo + 0.05);
 }
 
+/* `top` painted over `base`, the way the page composites a fill: source-over
+   on gamma-encoded sRGB bytes. The result is opaque when `base` is, so a
+   translucent soft fill becomes measurable once its backdrop is known. */
+export function composite(top, base) {
+  const a = (top[3] ?? 255) / 255;
+  const b = (base[3] ?? 255) / 255;
+  const alpha = a + b * (1 - a);
+  if (alpha === 0) return [0, 0, 0, 0];
+  const channel = (i) => Math.round((top[i] * a + base[i] * b * (1 - a)) / alpha);
+  return [channel(0), channel(1), channel(2), Math.round(alpha * 255)];
+}
+
 /* OKLCH of an sRGB color: L 0-1, C chroma, h degrees. */
 export function oklch([r, g, b]) {
   const [lr, lg, lb] = [r, g, b].map(toLinear);

package/src/tooling/css-bundle.js

@@ -298,11 +298,6 @@ export function bundledCssIssues(css) {
   const issues = [];
 
   if (css.includes("@import")) issues.push("contains unresolved @import");
-  if (css.includes("--lightningcss")) issues.push("contains --lightningcss-* variables");
-  if (/color-mix\(in srgb/.test(css)) issues.push("contains color-mix(in srgb, ...)");
-  if (/@media[^{]*\(\s*width\s*[<>]=/.test(css)) {
-    issues.push("contains transpiled media query range syntax");
-  }
 
   return issues;
 }

package/src/tooling/design-components.js

@@ -15,7 +15,7 @@
  * padding, height, type — about 1,800 bindings over 221 variants) froze
  * Penpot, and a theme's own lengths already arrive through the measurement.
  */
-import { hexOf, inPage, parseSrgb } from "./design-tokens.js";
+import { hexOf, hexRgbOf, inPage, parseSrgb } from "./design-tokens.js";
 
 /* Every list starts with its default: the first combination is the one a
    design tool picks for a new instance. */
@@ -214,11 +214,15 @@ export async function measureComponents({ css, resolved, linked, components = CO
       modes.forEach((mode, m) => {
         const known = recipes[mode][token];
         // A recipe name carries no size and no component: if two of them
-        // ever paint different colors, the name has to grow a dimension.
-        if (known && known.hex !== hexes[m]) {
-          throw new Error(`Recipe ${token} paints ${known.hex} and ${hexes[m]} in ${mode}`);
+        // ever paint different colors, the name has to grow a dimension. The
+        // comparison is on the CSS form (alpha included), the stored hex is the
+        // 6-digit DTCG form.
+        if (known && hexOf(known.color) !== hexes[m]) {
+          throw new Error(
+            `Recipe ${token} paints ${hexOf(known.color)} and ${hexes[m]} in ${mode}`,
+          );
         }
-        recipes[mode][token] = { color: colors[m], hex: hexes[m] };
+        recipes[mode][token] = { color: colors[m], hex: hexRgbOf(colors[m]) };
       });
     }
     const [first] = colors;

package/src/tooling/design-export.js

@@ -14,6 +14,7 @@ import {
   linkTokens,
   resolveTokens,
   themeNameOf,
+  toDtcg,
   toFigma,
   toPenpot,
 } from "./design-tokens.js";
@@ -24,6 +25,7 @@ const PLUGIN = fileURLToPath(new URL("./penpot-plugin/", import.meta.url));
 /*
  * Writes, under `out`:
  *   figma/foundations.tokens.json, figma/<scheme>.tokens.json
+ *   dtcg/foundations.tokens.json, dtcg/<scheme>.tokens.json
  *   penpot/tokens.json
  *   penpot/plugin/ (manifest.json, plugin.js, ui.html, spec.json)
  * Without `themeFile`, exports the default theme. `name` overrides the
@@ -31,7 +33,7 @@ const PLUGIN = fileURLToPath(new URL("./penpot-plugin/", import.meta.url));
  */
 export async function exportDesign({ themeFile, name, out }) {
   const themeCss = themeFile ? await inlineImports(themeFile) : "";
-  const theme = themeFile ? (name ?? themeNameOf(themeCss)) : null;
+  const theme = themeFile ? themeNameOf(themeCss, name) : null;
   const css = `${await inlineImports(FRAMEWORK)}\n${themeCss}`;
 
   const resolved = await resolveTokens({
@@ -49,6 +51,12 @@ export async function exportDesign({ themeFile, name, out }) {
         doc,
       ]),
     ),
+    ...Object.fromEntries(
+      Object.entries(toDtcg(linked, recipes)).map(([file, doc]) => [
+        `dtcg/${file}.tokens.json`,
+        doc,
+      ]),
+    ),
     "penpot/tokens.json": toPenpot(linked, recipes),
     "penpot/plugin/spec.json": spec,
   };

package/src/tooling/design-tokens.js

@@ -1,7 +1,8 @@
 /*
- * Design-tool token export: resolves a theme's tokens in headless Chrome and
- * writes them for Figma (DTCG files, one per mode) and Penpot (one token file
- * with its sets and themes).
+ * Design-tool token export: resolves a theme's tokens in headless Chrome into
+ * a target-neutral model, then writes them for Figma, Penpot, and a portable
+ * DTCG profile. Figma and Penpot get the compromises their importers need; the
+ * DTCG profile stays spec-conformant (correct $types, 6-digit `hex`).
  *
  * Values are read from the browser, never from the CSS text: tokens are built
  * with light-dark(), color-mix() and var() chains that only the browser
@@ -42,6 +43,7 @@ export const THEME_COLORS = [
   "text-subtle",
   "heading",
   "border",
+  "border-control",
   "focus",
   "hover-overlay",
   "hover-overlay-solid",
@@ -55,8 +57,9 @@ export const THEME_COLORS = [
   "backdrop-fill",
 ];
 
-/* Mode-independent tokens by role. The role tells a design tool where a value
-   applies (Penpot token types); every role but font-weight is a length. */
+/* Mode-independent tokens by role. The role drives the DTCG type (see
+   DTCG_TYPE) and the Penpot type; length roles plus font-weight are the ones
+   Figma and Penpot read, the rest are DTCG-only. */
 export const FOUNDATIONS = {
   spacing: [
     "space-10",
@@ -88,32 +91,23 @@ export const FOUNDATIONS = {
     "font-weight-semibold",
     "font-weight-bold",
   ],
+  "font-family": ["font-sans", "font-mono"],
+  duration: ["duration", "duration-fast", "duration-slow", "duration-spin", "duration-shimmer"],
+  "cubic-bezier": ["ease-enter", "ease-exit"],
+  number: ["line-height", "line-height-tight", "line-height-relaxed"],
 };
 
 /* Every custom property declared by the core token files is exported or
    listed here (tests/design-tokens.test.js), so a new token cannot silently
    stay out of the design tools. */
 export const NOT_EXPORTED = {
-  "font stack; a design tool font token holds one family": ["font-sans", "font-mono"],
   "internal 0/1 weights selecting a control step; the steps are exported": [
     "control-step-sm",
     "control-step-md",
     "control-step-lg",
   ],
-  "no design tool equivalent": [
+  "no DTCG type that keeps its meaning": [
     "font-width",
-    "line-height",
-    "line-height-tight",
-    "line-height-relaxed",
-    "shadow",
-    "shadow-popout",
-    "duration",
-    "duration-fast",
-    "duration-slow",
-    "duration-spin",
-    "duration-shimmer",
-    "ease-enter",
-    "ease-exit",
     "viewport-block",
     "viewport-inline",
     "z-sticky",
@@ -124,6 +118,7 @@ export const NOT_EXPORTED = {
     "icon-close",
     "icon-plus",
   ],
+  "composite DTCG types the export does not build yet": ["shadow", "shadow-popout"],
   "input of a derived value": [
     "backdrop-color",
     "backdrop-opacity",
@@ -131,7 +126,6 @@ export const NOT_EXPORTED = {
     "soft-border-mix",
     "soft-hover-alpha",
     "soft-fg-mix",
-    "focus-outline",
     "focus-outline-color",
   ],
   "soft recipe, exported with the components": [
@@ -142,6 +136,7 @@ export const NOT_EXPORTED = {
     "danger-soft-fg",
     "neutral-soft-fg",
   ],
+  "fallback-only state hook, read at the point of use": ["state-selected-text"],
   "internal or plumbing": [
     "density-space",
     "disabled-opacity",
@@ -152,17 +147,22 @@ export const NOT_EXPORTED = {
   ],
 };
 
+// Length roles carry a px value plus the CSS source; every other role carries
+// one scalar read as-is and parsed by role (see PARSE).
+const LENGTH_ROLES = ["spacing", "radius", "border-width", "font-size", "size", "offset"];
+const RAW_ROLES = ["font-family", "duration", "cubic-bezier", "number"];
+const LENGTHS = LENGTH_ROLES.flatMap((role) => FOUNDATIONS[role]);
 const WEIGHTS = FOUNDATIONS["font-weight"];
-const LENGTHS = Object.entries(FOUNDATIONS).flatMap(([role, names]) =>
-  role === "font-weight" ? [] : names,
-);
+const RAWS = RAW_ROLES.flatMap((role) => FOUNDATIONS[role]);
 const ROLE_OF = new Map(
   Object.entries(FOUNDATIONS).flatMap(([role, names]) => names.map((n) => [n, role])),
 );
 
 const DECLARATION_RE = /(?<![-\w])--([a-z0-9-]+)\s*:\s*([^;{}]*);/gi;
 const ALIAS_RE = /^var\(\s*--([a-z0-9-]+)\s*\)$/i;
-const THEME_NAME_RE = /\[data-theme="([^"]+)"\]/g;
+// Every valid spelling — either quote, a bare ident, whitespace inside the
+// brackets, an i/s flag: a missed name falls back to the :root theme silently.
+const THEME_NAME_RE = /\[\s*data-theme\s*=\s*(?:(["'])([^"']+)\1|([-\w]+))\s*(?:[is]\s*)?\]/gi;
 
 export function declaredTokens(css) {
   return new Set([...stripComments(css).matchAll(DECLARATION_RE)].map((m) => m[1]));
@@ -183,17 +183,29 @@ export function aliasCandidates(...sources) {
   return aliases;
 }
 
-/* The one data-theme value a theme file declares, light/dark excluded. */
-export function themeNameOf(css) {
+/* The one data-theme value a theme file declares, light/dark excluded. null
+   when it declares none: the theme is written on :root, the application's
+   own sheet rather than an island. An explicit name must be one the file
+   declares: an island no rule matches would measure the framework defaults
+   and report them as the theme (a typo passed silently). */
+export function themeNameOf(css, explicit) {
   const names = new Set(
-    [...css.matchAll(THEME_NAME_RE)].map((m) => m[1]).filter((n) => n !== "light" && n !== "dark"),
+    // Comments stripped: a selector quoted in a doc comment is not a theme.
+    [...stripComments(css).matchAll(THEME_NAME_RE)]
+      .map((m) => m[2] ?? m[3])
+      .filter((n) => n !== "light" && n !== "dark"),
   );
-  if (names.size !== 1) {
+  if (explicit != null) {
+    if (names.has(explicit)) return explicit;
+    const found = names.size ? `it declares ${[...names].join(", ")}` : "it declares none";
+    throw new Error(`The theme declares no [data-theme="${explicit}"]; ${found}.`);
+  }
+  if (names.size > 1) {
     throw new Error(
-      `Expected one [data-theme="…"] name in the theme, found ${names.size === 0 ? "none" : [...names].join(", ")}; pass the name explicitly.`,
+      `Expected one [data-theme="…"] name in the theme, found ${[...names].join(", ")}; pass the name explicitly.`,
     );
   }
-  return [...names][0];
+  return names.size === 1 ? [...names][0] : null;
 }
 
 export async function coreTokenCss() {
@@ -206,7 +218,7 @@ export async function coreTokenCss() {
  * what light-dark() resolves against. Colors go through color-mix(in srgb) so
  * every color syntax computes to the same `color(srgb r g b / a)` form.
  */
-function readIslands({ css, islands, colors, lengths, weights }) {
+function readIslands({ css, islands, colors, lengths, weights, raws }) {
   const style = document.createElement("style");
   style.textContent = css;
   document.head.append(style);
@@ -222,7 +234,7 @@ function readIslands({ css, islands, colors, lengths, weights }) {
     document.body.append(island);
 
     const computed = getComputedStyle(probe);
-    const values = { colors: {}, lengths: {}, weights: {}, missing: [] };
+    const values = { colors: {}, lengths: {}, weights: {}, raws: {}, missing: [] };
     const read = (name) => {
       const raw = computed.getPropertyValue(`--${name}`).trim();
       if (!raw) values.missing.push(name);
@@ -246,7 +258,11 @@ function readIslands({ css, islands, colors, lengths, weights }) {
       const raw = read(name);
       if (raw) values.weights[name] = Number(raw);
     }
-    values.scheme = attribute ? getComputedStyle(island).colorScheme : null;
+    for (const name of raws) {
+      const raw = read(name);
+      if (raw) values.raws[name] = raw;
+    }
+    values.scheme = getComputedStyle(island).colorScheme;
     result.push(values);
     island.remove();
   }
@@ -266,31 +282,29 @@ const evaluateIslands = (input) => inPage(readIslands, input);
 
 /*
  * Resolves one theme. `css` is the full stylesheet (framework + theme, imports
- * inlined). Without `theme`, the default theme is read through its light and
- * dark boundaries. A named theme exports the schemes it declares: `light dark`
- * gives two modes, anything else one. `islands` is returned so component
- * measurements read the same boundaries.
+ * inlined). Without `theme`, the theme is the root's — the default one, or an
+ * application theme written on :root. The theme exports the schemes it
+ * declares: `light dark` gives two modes, anything else one. `islands` is
+ * returned so component measurements read the same boundaries.
  */
-export async function resolveTokens({ css, theme, aliasSources = [] }) {
-  let islands = [
-    { mode: "light", attribute: "light" },
-    { mode: "dark", attribute: "dark" },
-  ];
-  if (theme) {
-    const [declared] = await evaluateIslands({
-      css,
-      islands: [{ attribute: theme }],
-      colors: [],
-      lengths: [],
-      weights: [],
-    });
-    const schemes = declared.scheme.split(/\s+/).filter((s) => s === "light" || s === "dark");
-    islands = (schemes.length > 0 ? schemes : ["light"]).map((mode) => ({
-      mode,
-      attribute: theme,
-      scheme: mode,
-    }));
-  }
+export async function resolveTokens({ css, theme = null, aliasSources = [] }) {
+  // A root island carries no data-theme: the core redeclares the default
+  // palette on [data-theme="light"|"dark"], which would mask a :root theme.
+  // Pinning color-scheme alone is what picks the light-dark() side.
+  const [declared] = await evaluateIslands({
+    css,
+    islands: [{ attribute: theme }],
+    colors: [],
+    lengths: [],
+    weights: [],
+    raws: [],
+  });
+  const schemes = declared.scheme.split(/\s+/).filter((s) => s === "light" || s === "dark");
+  const islands = (schemes.length > 0 ? schemes : ["light"]).map((mode) => ({
+    mode,
+    attribute: theme,
+    scheme: mode,
+  }));
 
   const read = await evaluateIslands({
     css,
@@ -298,6 +312,7 @@ export async function resolveTokens({ css, theme, aliasSources = [] }) {
     colors: THEME_COLORS,
     lengths: LENGTHS,
     weights: WEIGHTS,
+    raws: RAWS,
   });
   const missing = [...new Set(read.flatMap((values) => values.missing))];
   if (missing.length > 0) {
@@ -310,9 +325,13 @@ export async function resolveTokens({ css, theme, aliasSources = [] }) {
       Object.fromEntries(Object.entries(read[i].colors).map(([n, c]) => [n, parseSrgb(c)])),
     ]),
   );
-  // Geometry does not follow the color scheme; the first mode is the reference.
-  const [{ lengths, weights }] = read;
-  return { islands, modes, lengths, weights, aliases: aliasCandidates(...aliasSources) };
+  // Geometry and the raw foundations do not follow the color scheme; the first
+  // mode is the reference.
+  const [{ lengths, weights, raws }] = read;
+  const extras = Object.fromEntries(
+    Object.entries(raws).map(([name, raw]) => [name, PARSE[ROLE_OF.get(name)](raw)]),
+  );
+  return { islands, modes, lengths, weights, extras, aliases: aliasCandidates(...aliasSources) };
 }
 
 export function parseSrgb(value) {
@@ -325,14 +344,60 @@ export function parseSrgb(value) {
   };
 }
 
+/* Raw foundation readers. Each role maps to one parser, so a value the browser
+   reports in an unexpected shape fails loudly instead of exporting garbage. */
+export function parseDuration(value) {
+  const match = value.match(/^([\d.]+)(ms|s)$/);
+  if (!match) throw new Error(`Unexpected duration: ${value}`);
+  return { value: Number(match[1]), unit: match[2] };
+}
+
+export function parseCubicBezier(value) {
+  const match = value.match(/^cubic-bezier\(([^)]+)\)$/);
+  const numbers = match?.[1].split(",").map((n) => Number(n.trim()));
+  if (numbers?.length !== 4 || numbers.some(Number.isNaN)) {
+    throw new Error(`Unexpected cubic-bezier: ${value}`);
+  }
+  return numbers;
+}
+
+export function parseFontFamily(value) {
+  return value
+    .split(",")
+    .map((family) => family.trim().replace(/^["']|["']$/g, ""))
+    .filter(Boolean);
+}
+
+export function parseNumber(value) {
+  const n = Number(value);
+  if (Number.isNaN(n)) throw new Error(`Unexpected number: ${value}`);
+  return n;
+}
+
+const PARSE = {
+  "font-family": parseFontFamily,
+  duration: parseDuration,
+  "cubic-bezier": parseCubicBezier,
+  number: parseNumber,
+};
+
 const round = (n) => Math.round(n * 10000) / 10000;
 
+const byte = (n) =>
+  Math.round(n * 255)
+    .toString(16)
+    .padStart(2, "0");
+
+/* DTCG color `hex` is a 6-digit fallback: alpha is carried separately, and the
+   spec requires the hex itself to be 6 digits. */
+export function hexRgbOf({ components }) {
+  return `#${components.map(byte).join("")}`;
+}
+
+/* The CSS-fidelity form: keeps alpha in the hex for Penpot and for comparing
+   colors across modes (two colors that share RGB but not alpha must differ). */
 export function hexOf({ components, alpha }) {
-  const byte = (n) =>
-    Math.round(n * 255)
-      .toString(16)
-      .padStart(2, "0");
-  return `#${components.map(byte).join("")}${alpha < 1 ? byte(alpha) : ""}`;
+  return `${hexRgbOf({ components })}${alpha < 1 ? byte(alpha) : ""}`;
 }
 
 const colorsEqual = (a, b) =>
@@ -346,11 +411,12 @@ function aliasOf(name, valueSets, aliases, same) {
 }
 
 /*
- * The target-neutral model both writers read: per mode, each color is
- * `{ alias }` or `{ color, hex }`; each foundation carries its role and is
- * `{ alias }`, `{ px, css }` or `{ weight }`.
+ * The target-neutral model the writers read: per mode, each color is
+ * `{ alias }` or `{ color, hex }` (hex 6-digit, the DTCG form); each
+ * foundation carries its role and is `{ alias }`, `{ px, css }`, `{ weight }`
+ * or `{ value }` for the raw roles.
  */
-export function linkTokens({ modes, lengths, weights, aliases }) {
+export function linkTokens({ modes, lengths, weights, extras = {}, aliases }) {
   const modeSets = Object.values(modes);
   const linkedModes = Object.fromEntries(
     Object.entries(modes).map(([mode, colors]) => [
@@ -358,7 +424,7 @@ export function linkTokens({ modes, lengths, weights, aliases }) {
       Object.fromEntries(
         Object.entries(colors).map(([name, color]) => {
           const alias = aliasOf(name, modeSets, aliases, colorsEqual);
-          return [name, alias ? { alias } : { color, hex: hexOf(color) }];
+          return [name, alias ? { alias } : { color, hex: hexRgbOf(color) }];
         }),
       ),
     ]),
@@ -372,6 +438,9 @@ export function linkTokens({ modes, lengths, weights, aliases }) {
   for (const [name, weight] of Object.entries(weights)) {
     foundations[name] = { role: "font-weight", weight };
   }
+  for (const [name, value] of Object.entries(extras)) {
+    foundations[name] = { role: ROLE_OF.get(name), value };
+  }
   return { modes: linkedModes, foundations };
 }
 
@@ -400,13 +469,73 @@ export function toFigma({ modes, foundations }, recipes = {}) {
   }
 
   files.foundations = Object.fromEntries(
-    Object.entries(foundations).map(([name, token]) => {
+    Object.entries(foundations).flatMap(([name, token]) => {
       // `number`, not DTCG `fontWeight`: Figma's import drops fontWeight
       // tokens, and a number variable is what binds to a text layer's weight.
-      if (token.role === "font-weight") return [name, { $type: "number", $value: token.weight }];
+      if (token.role === "font-weight") {
+        return [[name, { $type: "number", $value: token.weight }]];
+      }
+      // Figma reads dimensions only; the raw roles stay in the DTCG profile.
+      if (!LENGTH_ROLES.includes(token.role)) return [];
       const $value = token.alias ? `{${token.alias}}` : { value: token.px, unit: "px" };
       const doc = { $type: "dimension", $value };
       if (token.css) doc.$extensions = { [EXTENSION]: { css: token.css } };
+      return [[name, doc]];
+    }),
+  );
+  return files;
+}
+
+/* DTCG `$type` per role. Figma keeps its own adaptations (a font weight as a
+   number); the neutral profile uses the type the spec defines. */
+const DTCG_TYPE = {
+  spacing: "dimension",
+  radius: "dimension",
+  "border-width": "dimension",
+  "font-size": "dimension",
+  size: "dimension",
+  offset: "dimension",
+  "font-weight": "fontWeight",
+  "font-family": "fontFamily",
+  duration: "duration",
+  "cubic-bezier": "cubicBezier",
+  number: "number",
+};
+
+function dtcgValue(token) {
+  if (token.alias) return `{${token.alias}}`;
+  if (token.role === "font-weight") return token.weight;
+  if (LENGTH_ROLES.includes(token.role)) return { value: token.px, unit: "px" };
+  return token.value;
+}
+
+/*
+ * DTCG: the portable profile. Same file split as Figma, but every foundation
+ * keeps its spec type (`fontWeight`, `duration`, `cubicBezier`, `fontFamily`,
+ * `number`), colors carry a 6-digit `hex` with alpha separate, and dimensions
+ * keep their CSS value in `$extensions`. No tool adaptation: any DTCG reader
+ * can import it.
+ */
+export function toDtcg({ modes, foundations }, recipes = {}) {
+  const files = {};
+  for (const [mode, colors] of Object.entries(modes)) {
+    files[mode] = Object.fromEntries(
+      Object.entries({ ...colors, ...recipes[mode] }).map(([name, token]) => [
+        name,
+        {
+          $type: "color",
+          $value: token.alias
+            ? `{${token.alias}}`
+            : { colorSpace: "srgb", ...token.color, hex: token.hex },
+        },
+      ]),
+    );
+  }
+
+  files.foundations = Object.fromEntries(
+    Object.entries(foundations).map(([name, token]) => {
+      const doc = { $type: DTCG_TYPE[token.role], $value: dtcgValue(token) };
+      if (token.css) doc.$extensions = { [EXTENSION]: { css: token.css } };
       return [name, doc];
     }),
   );
@@ -438,10 +567,12 @@ const PENPOT_THEME_GROUP = "Mode";
 export function toPenpot({ modes, foundations }, recipes = {}) {
   const doc = {
     foundations: Object.fromEntries(
-      Object.entries(foundations).map(([name, token]) => {
+      Object.entries(foundations).flatMap(([name, token]) => {
         const $type = PENPOT_TYPES[token.role];
-        if (token.alias) return [name, { $type, $value: `{${token.alias}}` }];
-        return [name, { $type, $value: token.weight ?? `${token.px}px` }];
+        // Penpot reads the roles it types; the DTCG-only roles stay out.
+        if (!$type) return [];
+        if (token.alias) return [[name, { $type, $value: `{${token.alias}}` }]];
+        return [[name, { $type, $value: token.weight ?? `${token.px}px` }]];
       }),
     ),
   };
@@ -450,7 +581,7 @@ export function toPenpot({ modes, foundations }, recipes = {}) {
     Object.fromEntries(
       Object.entries(colors).map(([name, token]) => [
         name,
-        { $type: "color", $value: token.alias ? `{${token.alias}}` : token.hex },
+        { $type: "color", $value: token.alias ? `{${token.alias}}` : hexOf(token.color) },
       ]),
     );
   const schemes = Object.keys(modes);