actual-css 0.13.0 → 0.14.0

package/src/css/core/tokens.css

@@ -162,9 +162,20 @@
 [data-theme] {
   /* State tokens — semantic colors for selected/pressed/current and disabled.
      Components consume these instead of hard-wiring --primary/--text-subtle
-     so forced-colors can override them in one place. */
+     so forced-colors can override them in one place. --state-selected is a
+     selected fill or accent, --state-selected-fg the ink on that fill.
+     --state-selected-text is selected ink on a regular surface (current nav
+     link, selected tab, current step number). It is reset to the
+     guaranteed-invalid value on every theme boundary, so a consumer reads its
+     local --state-selected through the fallback var(--state-selected-text,
+     var(--state-selected)): a theme that resolves it to var(--link) bakes that
+     reference where it is declared, so a nested island that does not set it
+     inherits an already-resolved value the local fallback can never reach. A
+     theme sets it when one color cannot be both a fill under its -fg and text
+     on the page, typically in a dark scheme. */
   --state-selected: var(--primary);
   --state-selected-fg: var(--primary-fg);
+  --state-selected-text: initial;
   --state-disabled: var(--text-subtle);
 
   /* Status dot ring — cuts the dot out of what it overlaps. */
@@ -173,10 +184,15 @@
 
 :root {
   /* Variant tuning — themes may adjust generated soft surfaces without
-     replacing the component rules. */
+     replacing the component rules. --soft-bg-mix is the share of surface in a
+     soft fill: an opaque mix on the shared .soft, an opacity (100% minus it)
+     on the translucent badge, alert and soft-button tint. --soft-hover-alpha
+     is the extra intent share on hover. --soft-border-mix has no default: it
+     is a fallback-only hook whose absence lets each recipe keep its own rim
+     (a tinted rim on .soft, none on the tint), and a theme that sets it gives
+     both a rim of that weight. */
   --soft-bg-mix: 88%;
-  --soft-border-mix: 65%;
-  --soft-hover-alpha: 12%;
+  --soft-hover-alpha: 6%;
   /* Soft foreground: the share of raw intent in soft text. 100% keeps the
      pure intent color; lower values rebate it toward --text, which vivid or
      light intent palettes need to stay legible on their own soft surface.

package/src/css/core/variants.css

@@ -34,6 +34,9 @@
  *
  * Intent list source of truth: intents.css. Components consume --intent* tokens
  * instead of re-listing intent classes.
+ *
+ * Public hooks:
+ * --soft-border-mix (fallback-only: a soft rim of that weight on every recipe)
  */
 .solid {
   --ui-bg: var(--intent, var(--neutral));
@@ -97,7 +100,7 @@
 
 /* Shared control scale. Wrappers are listed when their descendants form one
    component (field, choice-card, floating-field, input-icon, join, pagination,
-   tabs, flyout). A local size declaration beats inherited density because it
+   tabs, segmented, flyout). A local size declaration beats inherited density because it
    is declared on the sized component itself. Guarded by check:sync
    (size-scale-participants): .sm and .lg must list the same components. */
 :where(
@@ -110,6 +113,7 @@
   .field,
   .choice,
   .choice-card,
+  .color-swatch,
   .input-icon,
   .floating-field,
   .otp,
@@ -117,6 +121,7 @@
   .pagination,
   .tabs,
   .tab,
+  .segmented,
   .flyout
 ).sm {
   --control-size: var(--control-size-sm);
@@ -137,6 +142,7 @@
   .field,
   .choice,
   .choice-card,
+  .color-swatch,
   .input-icon,
   .floating-field,
   .otp,
@@ -144,6 +150,7 @@
   .pagination,
   .tabs,
   .tab,
+  .segmented,
   .flyout
 ).lg {
   --control-size: var(--control-size-lg);
@@ -155,21 +162,25 @@
 }
 
 /* Modern color enhancement. Baseline variant values above remain usable
-   everywhere. Interactive states live in the components that consume them. */
+   everywhere. Interactive states live in the components that consume them.
+   The shared .soft is opaque: it paints zones (.card, .navbar, .app-nav,
+   .chat-bubble) an author may lay over an image, where a translucent fill
+   would hand the text's contrast to whatever is behind it. The badge, alert
+   and soft button own a translucent tint instead (soft-tint). */
 @supports (color: color-mix(in oklch, red, white)) {
   .soft {
-    /* @sync soft-recipe */
     --ui-bg: color-mix(in oklab, var(--surface) var(--soft-bg-mix), var(--intent, var(--neutral)));
     --ui-border: color-mix(
       in oklab,
-      var(--surface) var(--soft-border-mix),
+      var(--surface) var(--soft-border-mix, 65%),
       var(--intent, var(--neutral))
     );
+    /* @sync soft-ink */
     --ui-fg: var(
       --intent-soft-fg,
       color-mix(in oklab, var(--text), var(--intent, var(--text)) var(--soft-fg-mix))
     );
-    /* @sync soft-recipe */
+    /* @sync soft-ink */
   }
 }
 

package/src/css/forms/color-swatch.css

@@ -0,0 +1,159 @@
+/*
+ * Color swatch — a color chosen from a palette the application defines.
+ *
+ * Docs: docs/pages/forms/color-swatches.md
+ *
+ * A <label class="color-swatch"> wraps a native radio (one color) or checkbox
+ * (several) and paints --color-swatch-value. The same class on a <button> is
+ * the trigger of a palette flyout. The application owns the colors; Actual
+ * owns the shape, the selection mark and the focus ring.
+ *
+ * Two sizes: the visible swatch (::before) is the height of a .switch track, so
+ * a swatch and a switch in neighbouring rows match; the element is the hit
+ * area around it. The hit area reaches half the inherited --gap past the
+ * swatch, up to --control-size, and overflows its layout box: neighbours in a
+ * .cluster or .grid meet in the middle of the gap instead of overlapping, and
+ * rows sit one gap apart like columns. Edge, selection ring and focus ring all
+ * belong to the visible swatch.
+ *
+ * The color is arbitrary, so nothing drawn on it may assume a contrast: the
+ * selected mark is a double ring (--text outside, --surface-opaque inside) that
+ * reads on any fill, and a hairline edge keeps a near-white color apart from
+ * the page. ::before opts out of forced colors to keep the color, so it takes
+ * system colors itself there.
+ *
+ * Without :has() the native radio stays visible in the swatch and carries the
+ * state; the ring needs :has() to mirror it.
+ *
+ * Public hooks:
+ * --color-swatch-value (fallback-only: the color, set per swatch)
+ * --color-swatch-size
+ * --color-swatch-radius
+ */
+.color-swatch {
+  /* The .switch track height (switch.css); a browser test holds them equal. */
+  --color-swatch-size: calc(var(--choice-control-size) + 0.125em);
+  --color-swatch-radius: var(--radius-full);
+  /* Internal: what the hit area adds to the swatch, half on each side. One gap
+     at most, so two neighbours never claim the same point — a wider reach let
+     the next swatch take a click on this one's center. */
+  --color-swatch-reach: clamp(0px, var(--control-size) - var(--color-swatch-size), var(--gap));
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex: none;
+  inline-size: calc(var(--color-swatch-size) + var(--color-swatch-reach));
+  block-size: calc(var(--color-swatch-size) + var(--color-swatch-reach));
+  /* Lay out at the visible size: gaps are measured from the swatch, not from
+     its invisible reach. */
+  margin: calc(var(--color-swatch-reach) / -2);
+  padding: 0;
+  border: 0;
+  background: transparent;
+  color: inherit;
+  /* Consumed so .sm/.lg reach the em-sized swatch, as on .choice-card. */
+  font: inherit;
+  font-size: var(--control-font-size);
+  cursor: pointer;
+}
+
+.color-swatch::before {
+  content: "";
+  grid-area: 1 / 1;
+  inline-size: var(--color-swatch-size);
+  block-size: var(--color-swatch-size);
+  box-sizing: border-box;
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--color-swatch-radius);
+  background: var(--color-swatch-value, transparent) padding-box;
+  /* The color is the content, as on .color (native.css). */
+  forced-color-adjust: none;
+  transition:
+    border-color var(--duration),
+    box-shadow var(--duration);
+}
+
+/* Shares the swatch's cell and paints after ::before, so a native radio left
+   visible sits on the color. */
+.color-swatch > input {
+  grid-area: 1 / 1;
+  position: relative;
+  margin: 0;
+}
+
+/* Visually hidden but focusable, submitted and arrow-key navigable (sr-only
+   pattern). Guarded: without :has() the swatch cannot mirror :checked, so the
+   visible native radio is the fallback. */
+@supports selector(:has(*)) {
+  .color-swatch > input {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}
+
+.color-swatch:hover::before {
+  border-color: var(--text-subtle);
+}
+
+.color-swatch:has(> input:checked)::before {
+  box-shadow:
+    inset 0 0 0 2px var(--text),
+    inset 0 0 0 4px var(--surface-opaque);
+}
+
+/* The ring goes around the visible swatch, not the larger hit area. */
+.color-swatch:focus-visible {
+  outline: none;
+}
+
+.color-swatch:focus-visible::before {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.color-swatch:has(> input:focus-visible)::before {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
+
+.color-swatch:disabled {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+.color-swatch:has(> input:disabled) {
+  opacity: var(--disabled-opacity);
+  cursor: not-allowed;
+}
+
+/* A disabled swatch keeps its color: --disabled-opacity is 1 here
+   (tokens.css), and the edge carries the state. */
+@media (forced-colors: active) {
+  .color-swatch::before {
+    --focus: CanvasText;
+
+    border-color: CanvasText;
+  }
+
+  .color-swatch:has(> input:checked)::before {
+    box-shadow:
+      inset 0 0 0 2px CanvasText,
+      inset 0 0 0 4px Canvas;
+  }
+
+  .color-swatch:disabled::before {
+    border-color: GrayText;
+  }
+
+  .color-swatch:has(> input:disabled)::before {
+    border-color: GrayText;
+  }
+}

package/src/css/forms/form-actions.css

@@ -57,3 +57,12 @@
     background: color-mix(in oklch, var(--surface) 88%, transparent);
   }
 }
+
+/* Same reduce override as .topbar (src/css/layout/topbar.css). */
+@media (prefers-reduced-transparency: reduce) {
+  .form-actions.sticky {
+    background: var(--surface);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/css/forms/index.css

@@ -8,6 +8,7 @@
 @import "./switch.css";
 @import "./range.css";
 @import "./choice-card.css";
+@import "./color-swatch.css";
 @import "./custom-select.css";
 @import "./floating-field.css";
 @import "./otp.css";

package/src/css/forms/native.css

@@ -7,6 +7,9 @@
  *
  * Range has its own custom-styled file (range.css) so the focus ring can
  * target the thumb pseudo-element rather than the rectangular CSS box.
+ *
+ * Public hooks:
+ * --color-size
  */
 .file {
   color: var(--text-muted);
@@ -52,16 +55,24 @@
   outline-offset: var(--focus-outline-offset);
 }
 
-/* Native color picker — keep the browser's dialog and selected-color UI. The
-   swatch fills almost the whole control so it reads as a color, not as a tiny
-   square inside a button; the 1px padding keeps a hair of --surface around it. */
+/* Native color picker — keep the browser's dialog and selected-color UI. Same
+   geometry as .color-swatch: a --control-size hit area around a round swatch
+   the height of a .switch track, so a picker, a palette and a switch compose.
+   The input is the hit area; its padding leaves the swatch, which carries the
+   edge and the focus ring. Vendor pseudos cannot share a rule. */
 .color {
-  inline-size: var(--control-size);
-  block-size: var(--control-size);
-  padding: var(--border-width);
-  border: var(--border-width) solid var(--border-control);
-  border-radius: var(--radius);
-  background: var(--surface);
+  --color-size: calc(var(--choice-control-size) + 0.125em);
+
+  inline-size: max(var(--control-size), var(--color-size));
+  block-size: max(var(--control-size), var(--color-size));
+  padding: calc((max(var(--control-size), var(--color-size)) - var(--color-size)) / 2);
+  /* Lay out at the visible width, as .color-swatch does: the hit area
+     overflows on both sides so a label gap is measured from the swatch. */
+  margin: 0 calc((var(--color-size) - max(var(--control-size), var(--color-size))) / 2);
+  border: 0;
+  background: transparent;
+  /* Consumed so .sm/.lg reach the em-sized swatch. */
+  font-size: var(--control-font-size);
   cursor: pointer;
 }
 
@@ -70,13 +81,21 @@
 }
 
 .color::-webkit-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
 }
 
 .color::-moz-color-swatch {
-  border: 0;
-  border-radius: calc(var(--radius) - var(--border-width));
+  border: var(--border-width) solid var(--border-control);
+  border-radius: var(--radius-full);
+}
+
+.color:hover::-webkit-color-swatch {
+  border-color: var(--text-subtle);
+}
+
+.color:hover::-moz-color-swatch {
+  border-color: var(--text-subtle);
 }
 
 .color:disabled {
@@ -84,24 +103,35 @@
   opacity: var(--disabled-opacity);
 }
 
+/* The ring goes around the visible swatch, not the larger hit area. */
 .color:focus-visible {
+  outline: none;
+}
+
+.color:focus-visible::-webkit-color-swatch {
   outline: var(--focus-ring-width) solid var(--focus);
   outline-offset: var(--focus-outline-offset);
 }
 
-@media (forced-colors: active) {
-  .color {
-    border-color: ButtonText;
-    background: ButtonFace;
-  }
+.color:focus-visible::-moz-color-swatch {
+  outline: var(--focus-ring-width) solid var(--focus);
+  outline-offset: var(--focus-outline-offset);
+}
 
-  /* The swatch color is content, so preserve it without disabling the host's
-     native forced-color focus treatment. Vendor pseudos cannot share a rule. */
+@media (forced-colors: active) {
+  /* The swatch color is content, so the swatch opts out of forcing and takes
+     system colors for its edge and ring itself. */
   .color::-webkit-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 
   .color::-moz-color-swatch {
+    --focus: CanvasText;
+
     forced-color-adjust: none;
+    border-color: CanvasText;
   }
 }

package/src/css/forms/switch.css

@@ -14,6 +14,7 @@
  * --switch-block-size
  * --switch-knob-margin
  * --switch-knob-size
+ * --switch-knob-inline-size
  * --switch-travel
  *
  * The track is sized from --choice-control-size (tokens.css), not
@@ -47,9 +48,11 @@
     2 *
     var(--switch-knob-margin)
   );
+  /* A wider knob is a capsule; the travel follows its width. */
+  --switch-knob-inline-size: var(--switch-knob-size);
   --switch-travel: calc(
     var(--switch-width) -
-    var(--switch-knob-size) -
+    var(--switch-knob-inline-size) -
     2 *
     var(--border-width) -
     2 *
@@ -85,7 +88,7 @@
   position: absolute;
   inset-block-start: var(--switch-knob-margin);
   inset-inline-start: var(--switch-knob-margin);
-  inline-size: var(--switch-knob-size);
+  inline-size: var(--switch-knob-inline-size);
   block-size: var(--switch-knob-size);
   border-radius: var(--radius-full);
   background: var(--switch-knob);

package/src/css/layout/scroll-snap.css

@@ -13,16 +13,36 @@
  * --scroll-snap-align
  * --scroll-snap-item-size
  * --scroll-snap-padding
+ *
+ * Internal:
+ * --scroll-snap-focus-bleed
  */
 .scroll-snap {
   --scroll-snap-gap: var(--gap);
   --scroll-snap-align: start;
   --scroll-snap-item-size: auto;
+  /* Declared here, not as a :root alias: an inherited alias arrives already
+     computed, so a --focus-ring-width override on the rail would not reach it. */
+  --scroll-snap-focus-bleed: calc(var(--focus-outline-offset) + var(--focus-ring-width));
 
   display: flex;
   flex-direction: row;
   gap: var(--scroll-snap-gap);
+  /* Both axes clip: `auto` on one computes the other to `auto`, so a ring on
+     the top or bottom item would be lost too. Every side reserves the ring's
+     own width; the block reserve returns to the flow through a negative
+     margin, while the inline reserve stays as the rail's focus gutter.
+     Bleeding the inline reserve outward instead would make the border box
+     `containing block + 2 * reserve` wide, which at the viewport edge grows
+     the page: a rail cannot be flush with arbitrary surrounding content and
+     free of page overflow at once. */
+  margin-block: calc(var(--scroll-snap-focus-bleed) * -1);
+  padding-block: var(--scroll-snap-focus-bleed);
+  padding-inline: var(--scroll-snap-focus-bleed);
   overflow-x: auto;
+  /* One scroll axis, stated: a fractional content height could otherwise raise
+     a phantom vertical scrollbar under one font or zoom step. */
+  overflow-y: hidden;
 }
 
 .scroll-snap > * {
@@ -32,7 +52,17 @@
 @supports (scroll-snap-type: x mandatory) {
   .scroll-snap {
     overscroll-behavior-inline: contain;
+    /* Fallback only, never the ring's protector: padding-inline above already
+       guarantees paint. A unitless `0` drops the clamp below but keeps this
+       declaration, so the worst case is a snapped item flush with the gutter,
+       not a clipped ring. */
     scroll-padding-inline: var(--scroll-snap-padding, var(--scroll-snap-gap));
+    /* A conforming <length> stays at least the focus reserve, so scroll and
+       snap stop with the gutter's air. */
+    scroll-padding-inline: max(
+      var(--scroll-snap-padding, var(--scroll-snap-gap)),
+      var(--scroll-snap-focus-bleed)
+    );
     /* x then inline: an engine that lacks the logical keyword keeps x.
        proximity is the default, so a short rail cannot trap the pointer. */
     scroll-snap-type: x proximity;

package/src/css/layout/topbar.css

@@ -45,3 +45,13 @@
     -webkit-backdrop-filter: blur(0.75rem);
   }
 }
+
+/* A reduce override, not a no-preference gate: a browser without the feature
+   evaluates it false and keeps the frosted bar instead of losing it. */
+@media (prefers-reduced-transparency: reduce) {
+  .topbar {
+    background: var(--surface);
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+}

package/src/js/focus.js

@@ -44,8 +44,23 @@ export function getFocusable(root) {
   return [...root.querySelectorAll(FOCUSABLE_SELECTOR)].filter(isFocusable);
 }
 
+/* Tab reaches a radio group at its checked radio, or at its first one when none
+   is checked; the other radios are arrow-key stops only. Entering a panel on
+   an unchecked radio put focus on a value the user had not picked. */
+function isRadioTabStop(el) {
+  if (el.type !== "radio" || el.checked || !el.name) return true;
+  // form.elements also holds controls associated through form="…".
+  const candidates = el.form
+    ? [...el.form.elements]
+    : [...el.getRootNode().querySelectorAll('input[type="radio"]')];
+  return !candidates.some(
+    (radio) =>
+      radio.type === "radio" && radio.name === el.name && radio.form === el.form && radio.checked,
+  );
+}
+
 export function focusFirstDescendant(root) {
-  const target = getFocusable(root)[0];
+  const target = getFocusable(root).filter(isRadioTabStop)[0];
   target?.focus();
   return !!target;
 }

package/src/js/surface.js

@@ -386,8 +386,17 @@ export function disconnectSurface(menu) {
   }
 }
 
+/* Arrow keys in a radio group check the next radio by dispatching a click
+   (detail 0, no pointer). That click is navigation, not a pick: closing on it
+   shut a palette on the first arrow press, before the user could reach the
+   color they wanted. Space dispatches the same click and is left alone too. */
+function isKeyboardRadioMove(e) {
+  return e.detail === 0 && e.target?.matches?.('input[type="radio"]') === true;
+}
+
 function onDocumentClick(e) {
   const path = e.composedPath();
+  const radioMove = isKeyboardRadioMove(e);
 
   for (const menu of openSurfaces) {
     if (menu.ownerDocument !== e.currentTarget) continue;
@@ -396,6 +405,7 @@ function onDocumentClick(e) {
 
     const menuIndex = path.indexOf(menu);
     const isInside = menuIndex >= 0;
+    if (isInside && radioMove) continue;
     const hasCloseTrigger =
       isInside &&
       path

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
@@ -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,
   };