inkbridge 0.1.0-beta.21 → 0.1.0-beta.23

package/scanner/text-truncate-regression.ts

@@ -0,0 +1,481 @@
+import assert from 'node:assert/strict';
+
+(globalThis as unknown as { figma: unknown }).figma = {
+  notify: () => undefined,
+  showUI: () => undefined,
+};
+
+import {
+  applyTruncation,
+  getTruncateFromClasses,
+  markForTruncation,
+  readTruncationMark,
+} from '../src/text/text-truncate';
+import { applyDeferredTruncationPass } from '../src/layout/text-truncate-pass';
+import { applyTableColumnAlignment } from '../src/layout/table-layout';
+import { findTruncateInInlineTree } from '../src/text/inline-text';
+import type { NodeIR } from '../src/tailwind';
+
+/**
+ * Regression: text-truncation primitives + deferred-truncation pass.
+ *
+ * The renderer marks each TextNode that came from `truncate` /
+ * `line-clamp-N` with `markForTruncation`. The actual ellipsis +
+ * resize (`applyTruncation`) runs either immediately when the
+ * effective max-width is already known at render time, or later from
+ * a deferred pass (e.g. table column-alignment) once the parent's
+ * width is final.
+ *
+ * Real-world repro: `RecentTradesCard` — the `$500.00 Withdrawn`
+ * collateral cell rendered as `$500.00 Withdraw` because the cell
+ * was visually clipped by the next column. With the deferred pass,
+ * any text inside such a cell that was authored with `truncate`
+ * gets `textTruncation = 'ENDING'` + the cell's content width.
+ */
+
+// ---------------------------------------------------------------------------
+// Stub-frame + stub-text harness. Mirrors the table-column-alignment
+// fixture's StubFrame; adds StubText so the deferred pass can walk
+// the subtree and mutate text nodes.
+// ---------------------------------------------------------------------------
+
+interface StubBase {
+  name: string;
+  parent: StubFrame | null;
+  width: number;
+  height: number;
+  pluginData: Record<string, string>;
+  setPluginData(key: string, value: string): void;
+  getPluginData(key: string): string;
+  resize(w: number, h: number): void;
+}
+
+interface StubFrame extends StubBase {
+  type: 'FRAME';
+  layoutMode: 'NONE' | 'HORIZONTAL' | 'VERTICAL';
+  layoutPositioning: 'AUTO' | 'ABSOLUTE';
+  primaryAxisSizingMode: 'AUTO' | 'FIXED';
+  counterAxisSizingMode: 'AUTO' | 'FIXED';
+  layoutGrow: number;
+  paddingLeft: number;
+  paddingRight: number;
+  paddingTop: number;
+  paddingBottom: number;
+  children: (StubFrame | StubText)[];
+  appendChild(child: StubFrame | StubText): void;
+}
+
+interface StubText extends StubBase {
+  type: 'TEXT';
+  fontSize: number | symbol;
+  lineHeight: { unit: 'PIXELS' | 'PERCENT' | 'AUTO'; value?: number };
+  textTruncation: 'DISABLED' | 'ENDING';
+  maxLines: number | null;
+  textAutoResize: 'NONE' | 'HEIGHT' | 'WIDTH_AND_HEIGHT';
+}
+
+function mkData(): { data: Record<string, string>; setPluginData: (k: string, v: string) => void; getPluginData: (k: string) => string } {
+  const data: Record<string, string> = {};
+  return {
+    data,
+    setPluginData(key, value) { data[key] = value; },
+    getPluginData(key) { return data[key] || ''; },
+  };
+}
+
+function mkFrame(name: string): StubFrame {
+  const d = mkData();
+  const f: StubFrame = {
+    type: 'FRAME',
+    name,
+    layoutMode: 'NONE',
+    layoutPositioning: 'AUTO',
+    primaryAxisSizingMode: 'AUTO',
+    counterAxisSizingMode: 'AUTO',
+    layoutGrow: 0,
+    width: 0,
+    height: 0,
+    paddingLeft: 0,
+    paddingRight: 0,
+    paddingTop: 0,
+    paddingBottom: 0,
+    parent: null,
+    children: [],
+    pluginData: d.data,
+    appendChild(child) {
+      child.parent = this;
+      this.children.push(child);
+    },
+    resize(w, h) {
+      this.width = w;
+      this.height = h;
+    },
+    setPluginData: d.setPluginData,
+    getPluginData: d.getPluginData,
+  };
+  return f;
+}
+
+function mkText(text: string, opts: {
+  width: number;
+  height?: number;
+  fontSize?: number;
+  lineHeight?: number;
+}): StubText {
+  const d = mkData();
+  return {
+    type: 'TEXT',
+    name: text,
+    parent: null,
+    width: opts.width,
+    height: opts.height ?? (opts.lineHeight ?? Math.ceil((opts.fontSize ?? 14) * 1.5)),
+    fontSize: opts.fontSize ?? 14,
+    lineHeight: opts.lineHeight
+      ? { unit: 'PIXELS', value: opts.lineHeight }
+      : { unit: 'AUTO' },
+    textTruncation: 'DISABLED',
+    maxLines: null,
+    textAutoResize: 'WIDTH_AND_HEIGHT',
+    pluginData: d.data,
+    setPluginData: d.setPluginData,
+    getPluginData: d.getPluginData,
+    resize(w, h) {
+      this.width = w;
+      this.height = h;
+    },
+  };
+}
+
+const asScene = <T>(n: T) => n as unknown as SceneNode;
+const asText = <T>(n: T) => n as unknown as TextNode;
+
+// ---------------------------------------------------------------------------
+// Cell 1 — mark / read roundtrip. Empty / missing / invalid all return null.
+// ---------------------------------------------------------------------------
+{
+  const t = mkText('hello', { width: 50 });
+  assert.equal(readTruncationMark(asText(t)), null, 'no mark → null');
+
+  markForTruncation(asText(t), 1);
+  assert.equal(readTruncationMark(asText(t)), 1, 'mark with 1 → 1');
+
+  markForTruncation(asText(t), 3);
+  assert.equal(readTruncationMark(asText(t)), 3, 'overwrite mark with 3 → 3');
+
+  markForTruncation(asText(t), 0);
+  assert.equal(readTruncationMark(asText(t)), 3, 'mark with 0 is rejected; old value kept');
+
+  markForTruncation(asText(t), -2);
+  assert.equal(readTruncationMark(asText(t)), 3, 'negative mark rejected; old value kept');
+
+  // Manual corruption: invalid stored value → null.
+  t.setPluginData('inkbridge:truncate-max-lines', 'not-a-number');
+  assert.equal(readTruncationMark(asText(t)), null, 'corrupted value → null');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 2 — applyTruncation sets textTruncation, maxLines, and resizes.
+// Lineheight defaults to fontSize*1.5 when not provided.
+// ---------------------------------------------------------------------------
+{
+  const t = mkText('truncate me', { width: 200, fontSize: 16 });
+  applyTruncation(asText(t), 100, 1);
+  assert.equal(t.textTruncation, 'ENDING', 'truncation enabled');
+  assert.equal(t.maxLines, 1, 'maxLines = 1');
+  assert.equal(t.width, 100, 'resized to maxWidth');
+  // lh default = ceil(16 * 1.5) = 24. height = max(24, 24*1) = 24.
+  assert.equal(t.height, 24, 'height = lineHeight × maxLines (default leading-normal)');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 3 — applyTruncation uses provided lineHeight; line-clamp-N grows
+// the height proportionally.
+// ---------------------------------------------------------------------------
+{
+  const t = mkText('multi-line', { width: 300, fontSize: 14 });
+  applyTruncation(asText(t), 120, 3, 20);  // 3 lines × 20px = 60.
+  assert.equal(t.maxLines, 3);
+  assert.equal(t.width, 120);
+  assert.equal(t.height, 60, 'height = explicit lineHeight × maxLines');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 4 — applyTruncation no-ops on invalid inputs.
+// ---------------------------------------------------------------------------
+{
+  const t = mkText('ignored', { width: 200 });
+  applyTruncation(asText(t), 0, 1);  // bad width
+  assert.equal(t.textTruncation, 'DISABLED', 'maxWidth=0 → no-op');
+  applyTruncation(asText(t), 100, 0);  // bad maxLines
+  assert.equal(t.textTruncation, 'DISABLED', 'maxLines=0 → no-op');
+  assert.equal(t.width, 200, 'unchanged');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 5 — Deferred pass: marked text directly under container.
+// Overflowing text gets truncated; unmarked text and fitting text are
+// untouched.
+// ---------------------------------------------------------------------------
+{
+  const cell = mkFrame('td');
+  cell.layoutMode = 'HORIZONTAL';
+  cell.width = 100;
+  cell.height = 24;
+
+  const overflow = mkText('$500.00 Withdrawn', { width: 200 });
+  markForTruncation(asText(overflow), 1);
+  cell.appendChild(overflow);
+
+  applyDeferredTruncationPass(asScene(cell));
+  assert.equal(overflow.textTruncation, 'ENDING', 'overflowing marked text → truncated');
+  assert.equal(overflow.width, 100, 'resized to cell content width');
+}
+
+{
+  const cell = mkFrame('td');
+  cell.width = 100;
+  const fits = mkText('short', { width: 40 });
+  markForTruncation(asText(fits), 1);
+  cell.appendChild(fits);
+  applyDeferredTruncationPass(asScene(cell));
+  assert.equal(fits.textTruncation, 'DISABLED', 'fitting text untouched');
+  assert.equal(fits.width, 40, 'fitting text keeps width');
+}
+
+{
+  const cell = mkFrame('td');
+  cell.width = 100;
+  const unmarked = mkText('long unmarked text', { width: 200 });
+  // No mark — should be ignored even though it overflows.
+  cell.appendChild(unmarked);
+  applyDeferredTruncationPass(asScene(cell));
+  assert.equal(unmarked.textTruncation, 'DISABLED', 'unmarked text ignored');
+  assert.equal(unmarked.width, 200, 'unmarked text width preserved');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 6 — Container paddings are subtracted from budget. A 100-wide
+// cell with paddingLeft=8 + paddingRight=8 yields 84 of content width.
+// ---------------------------------------------------------------------------
+{
+  const cell = mkFrame('td');
+  cell.width = 100;
+  cell.paddingLeft = 8;
+  cell.paddingRight = 8;
+  const t = mkText('overflow', { width: 90 });
+  markForTruncation(asText(t), 1);
+  cell.appendChild(t);
+  applyDeferredTruncationPass(asScene(cell));
+  assert.equal(t.width, 84, 'text resized to 100 - 8 - 8 = 84');
+  assert.equal(t.textTruncation, 'ENDING');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 7 — Intermediate wrapper frame's paddings are subtracted as we
+// descend, so a deeply-nested marked text node sees its true budget.
+// ---------------------------------------------------------------------------
+{
+  const cell = mkFrame('td');
+  cell.width = 200;
+  cell.paddingLeft = 10;
+  cell.paddingRight = 10;
+  // Budget at cell's children: 180.
+
+  const wrapper = mkFrame('div');
+  wrapper.paddingLeft = 5;
+  wrapper.paddingRight = 5;
+  cell.appendChild(wrapper);
+  // Budget at wrapper's children: 180 - 5 - 5 = 170.
+
+  const t = mkText('deep text', { width: 250 });
+  markForTruncation(asText(t), 1);
+  wrapper.appendChild(t);
+
+  applyDeferredTruncationPass(asScene(cell));
+  assert.equal(t.width, 170, 'budget = cellContent - wrapperPaddings = 170');
+  assert.equal(t.textTruncation, 'ENDING');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 8 — Idempotency: running the pass twice doesn't re-truncate a
+// node that now fits exactly. Confirms the > available + 0.5 tolerance.
+// ---------------------------------------------------------------------------
+{
+  const cell = mkFrame('td');
+  cell.width = 100;
+  const t = mkText('x', { width: 200 });
+  markForTruncation(asText(t), 1);
+  cell.appendChild(t);
+
+  const first = applyDeferredTruncationPass(asScene(cell));
+  assert.equal(first, 1, 'first pass applied to 1 node');
+  const second = applyDeferredTruncationPass(asScene(cell));
+  assert.equal(second, 0, 'second pass is a no-op (already fits)');
+  assert.equal(t.width, 100, 'width unchanged on second pass');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 9 — End-to-end via applyTableColumnAlignment: a card-anchored
+// table where one cell's marked text overflows the assigned column
+// width. The column-alignment pass shrinks the column to fit the
+// card, then the deferred-truncation pass clips the text.
+// ---------------------------------------------------------------------------
+{
+  // Parent card at FIXED 200; two-column table whose natural sum (300)
+  // exceeds available 200.
+  const card = mkFrame('div');
+  card.layoutMode = 'VERTICAL';
+  card.counterAxisSizingMode = 'FIXED';
+  card.width = 200;
+  card.height = 60;
+
+  function cellWith(textWidth: number, mark: boolean): { cell: StubFrame; text: StubText } {
+    const c = mkFrame('td');
+    c.layoutMode = 'HORIZONTAL';
+    c.layoutGrow = 1;
+    c.width = textWidth;
+    c.height = 20;
+    c.setPluginData('inkbridge:col-span', '1');
+    const t = mkText('content', { width: textWidth });
+    if (mark) markForTruncation(asText(t), 1);
+    c.appendChild(t);
+    return { cell: c, text: t };
+  }
+
+  const row1Col0 = cellWith(100, true);   // marked, overflowing column
+  const row1Col1 = cellWith(200, false);  // unmarked
+  // applyTableColumnAlignment skips single-row tables. Add a header
+  // row so the pass actually runs.
+  const headerCol0 = cellWith(50, false);
+  const headerCol1 = cellWith(80, false);
+
+  const tableFrame = mkFrame('table');
+  tableFrame.layoutMode = 'VERTICAL';
+  const thead = mkFrame('thead');
+  thead.layoutMode = 'VERTICAL';
+  const headerTr = mkFrame('tr');
+  headerTr.layoutMode = 'HORIZONTAL';
+  headerTr.appendChild(headerCol0.cell);
+  headerTr.appendChild(headerCol1.cell);
+  thead.appendChild(headerTr);
+  const tbody = mkFrame('tbody');
+  tbody.layoutMode = 'VERTICAL';
+  const tr = mkFrame('tr');
+  tr.layoutMode = 'HORIZONTAL';
+  tr.appendChild(row1Col0.cell);
+  tr.appendChild(row1Col1.cell);
+  tbody.appendChild(tr);
+  tableFrame.appendChild(thead);
+  tableFrame.appendChild(tbody);
+  card.appendChild(tableFrame);
+
+  applyTableColumnAlignment(asScene(card));
+
+  // Natural sum = 300, available = 200, scale = 2/3.
+  // Col 0: floor(100 * 2/3) = 66. Col 1: floor(200 * 2/3) = 133.
+  assert.equal(row1Col0.cell.width, 66, 'col 0 scaled down to 66');
+  assert.equal(row1Col1.cell.width, 133, 'col 1 scaled down to 133');
+
+  // Marked text inside col 0 was 100 wide; the cell now is 66.
+  // Deferred pass should kick in and clip it.
+  assert.equal(row1Col0.text.textTruncation, 'ENDING', 'marked overflow → ENDING');
+  assert.equal(row1Col0.text.width, 66, 'marked text resized to cell width');
+
+  // Unmarked text in col 1: was 200 wide, cell is now 133. Pass
+  // ignores it because no mark.
+  assert.equal(row1Col1.text.textTruncation, 'DISABLED', 'unmarked text untouched');
+  assert.equal(row1Col1.text.width, 200, 'unmarked text not resized by truncation pass');
+}
+
+// ---------------------------------------------------------------------------
+// Cell 9b — Inline-collapse tree walker: the RecentTradesCard pattern
+//   <td><span class="block max-w-[9.5rem] truncate">…</span></td>
+// rolls through `createInlineTextNode`, which calls
+// `findTruncateInInlineTree` to decide whether to mark the merged
+// TextNode. The walker must find a truncate anywhere in the tree
+// (outer node, immediate child, deeper descendant).
+// ---------------------------------------------------------------------------
+{
+  function elem(tag: string, classes: string[], children: NodeIR[]): NodeIR {
+    return {
+      kind: 'element',
+      tagName: tag,
+      tagLower: tag,
+      classes,
+      props: {},
+      children,
+    } as NodeIR;
+  }
+  function text(value: string): NodeIR {
+    return { kind: 'text', text: value } as NodeIR;
+  }
+
+  // Outer alone has truncate.
+  {
+    const tree = elem('p', ['truncate'], [text('hello')]);
+    assert.deepEqual(findTruncateInInlineTree(tree), { maxLines: 1 }, 'outer .truncate');
+  }
+
+  // Inner child has truncate (real-world RecentTradesCard shape).
+  {
+    const inner = elem('span', ['block', 'max-w-[9.5rem]', 'truncate'], [text('$500.00')]);
+    const td = elem('td', ['min-w-0'], [inner]);
+    assert.deepEqual(findTruncateInInlineTree(td), { maxLines: 1 }, 'inner span .truncate inside td');
+  }
+
+  // Deeper nesting: td → span → b → truncate.
+  {
+    const bold = elem('b', ['line-clamp-2'], [text('long')]);
+    const span = elem('span', [], [bold]);
+    const td = elem('td', [], [span]);
+    assert.deepEqual(findTruncateInInlineTree(td), { maxLines: 2 }, 'deep-nested line-clamp-2');
+  }
+
+  // No truncate anywhere → null.
+  {
+    const tree = elem('td', ['min-w-0'], [
+      elem('span', ['text-sm'], [text('plain')]),
+    ]);
+    assert.equal(findTruncateInInlineTree(tree), null, 'no truncate → null');
+  }
+
+  // childrenOverride takes precedence over node.children — used
+  // by the hidden-children filter to drop responsive-hidden spans
+  // before truncate detection.
+  {
+    const visibleSpan = elem('span', ['truncate'], [text('visible')]);
+    const hiddenSpan = elem('span', ['truncate', 'hidden'], [text('hidden')]);
+    const td = elem('td', [], [hiddenSpan, visibleSpan]);
+    // With override pointing to only the visible span, the walker
+    // still picks the truncate up — but from the override list.
+    assert.deepEqual(
+      findTruncateInInlineTree(td, [visibleSpan]),
+      { maxLines: 1 },
+      'childrenOverride list is walked',
+    );
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Cell 10 — getTruncateFromClasses: single source of truth for parsing.
+// ---------------------------------------------------------------------------
+{
+  assert.equal(getTruncateFromClasses([]), null, 'empty → null');
+  assert.equal(getTruncateFromClasses(['flex', 'gap-2']), null, 'no truncate / clamp → null');
+  assert.deepEqual(getTruncateFromClasses(['truncate']), { maxLines: 1 }, 'truncate → 1 line');
+  assert.deepEqual(
+    getTruncateFromClasses(['block', 'max-w-[9.5rem]', 'truncate']),
+    { maxLines: 1 },
+    'truncate among other classes → 1 line',
+  );
+  assert.deepEqual(getTruncateFromClasses(['line-clamp-3']), { maxLines: 3 }, 'line-clamp-3 → 3');
+  assert.deepEqual(
+    getTruncateFromClasses(['truncate', 'line-clamp-5']),
+    { maxLines: 1 },
+    'truncate wins when both present (matches Tailwind: truncate is later in CSS)',
+  );
+  assert.equal(getTruncateFromClasses(['line-clamp-0']), null, 'clamp-0 rejected (n>0 only)');
+  assert.equal(getTruncateFromClasses(['line-clamp-foo']), null, 'non-numeric clamp value → null');
+}
+
+console.log('text-truncate-regression: ok (10 cells)');

package/scanner/types.ts

@@ -38,6 +38,19 @@ export interface StoryInfo {
   layoutClasses?: string[];
   /** Full JSX tree for recursive rendering */
   jsxTree?: JsxNode;
+  /**
+   * Opt-in/opt-out for responsive-breakpoint frames. When unset, the
+   * plugin renders responsive frames only for the canonical "Default"
+   * story (or first export) of each component. Setting `true` forces
+   * responsive frames for this story; `false` suppresses them.
+   *
+   * Source: Storybook story export's `parameters.inkbridge.responsive`:
+   *   export const WithMarkerLegend: Story = {
+   *     args: { ... },
+   *     parameters: { inkbridge: { responsive: true } },
+   *   };
+   */
+  responsive?: boolean;
 }
 
 /**

package/src/components/component-gen.ts

@@ -4,7 +4,7 @@ import { getComponentDef } from './component-defs';
 import type { ComponentAnalysis } from '../../scanner/types';
 import type { ComponentDef } from './scanner-types';
 import { tailwindClassesToStyle, applyTailwindStylesToFrame } from '../tailwind';
-import { bindColorVariable, pxFromSizeToken } from '../tokens';
+import { applyTokenColor, pxFromSizeToken } from '../tokens';
 import { createTextNode } from '../text';
 import { extractStatesFromClasses, mergeStatesWithDefinition, type StateInfo } from '../tailwind';
 import { getRingInfoFromClasses, markRingNode, applyRingIfPossible } from '../layout';
@@ -114,29 +114,19 @@ export function createCVAComponentSet(parent: FrameNode | PageNode, def: Compone
       // Get style for this state (base + state overrides)
       const style = tailwindClassesToStyle(stateClasses, 'default', colorGroup);
 
-      // Apply background - try variable binding first, fall back to raw color
       if (style.bg) {
-        const bgBound = style.bgToken && bindColorVariable(comp, style.bgToken, 'fill', theme);
-        if (bgBound) {
-          if (style.bgOpacity != null && Array.isArray(comp.fills) && comp.fills.length > 0) {
-            const nextFills = JSON.parse(JSON.stringify(comp.fills));
-            nextFills[0].opacity = style.bgOpacity;
-            comp.fills = nextFills;
-          }
-        } else {
-          const bg = parseColor(style.bg);
-          const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
-          comp.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
-        }
+        applyTokenColor(comp, 'fill', {
+          token: style.bgToken,
+          value: style.bg,
+          opacity: style.bgOpacity,
+        }, theme);
       }
-
-      // Apply border - try variable binding first, fall back to raw color
       if (style.border) {
-        const borderBound = style.borderToken && bindColorVariable(comp, style.borderToken, 'stroke', theme);
-        if (!borderBound) {
-          const borderColor = parseColor(style.border);
-          comp.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
-        }
+        applyTokenColor(comp, 'stroke', {
+          token: style.borderToken,
+          value: style.border,
+          opacity: style.borderOpacity,
+        }, theme);
         comp.strokeWeight = 1;
       }
 
@@ -222,26 +212,19 @@ export function createStateComponentSet(parent: FrameNode | PageNode, def: Compo
     const style = tailwindClassesToStyle(stateClasses, 'default', colorGroup);
 
     if (style.bg) {
-      const bgBound = style.bgToken && bindColorVariable(comp, style.bgToken, 'fill', theme);
-      if (bgBound) {
-        if (style.bgOpacity != null && Array.isArray(comp.fills) && comp.fills.length > 0) {
-          const nextFills = JSON.parse(JSON.stringify(comp.fills));
-          nextFills[0].opacity = style.bgOpacity;
-          comp.fills = nextFills;
-        }
-      } else {
-        const bg = parseColor(style.bg);
-        const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
-        comp.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
-      }
+      applyTokenColor(comp, 'fill', {
+        token: style.bgToken,
+        value: style.bg,
+        opacity: style.bgOpacity,
+      }, theme);
     }
 
     if (style.border) {
-      const borderBound = style.borderToken && bindColorVariable(comp, style.borderToken, 'stroke', theme);
-      if (!borderBound) {
-        const borderColor = parseColor(style.border);
-        comp.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
-      }
+      applyTokenColor(comp, 'stroke', {
+        token: style.borderToken,
+        value: style.border,
+        opacity: style.borderOpacity,
+      }, theme);
       comp.strokeWeight = 1;
     } else {
       let hasBorderWidth = false;

package/src/design-system/cva-master.ts

@@ -1,5 +1,5 @@
 import { splitClassName, applyTailwindStylesToFrame, tailwindClassesToStyle, type TailwindStyle } from '../tailwind';
-import { parseColor, bindColorVariable } from '../tokens';
+import { applyTokenColor, parseColor } from '../tokens';
 import { createTextNode } from '../text';
 import { getRingInfoFromClasses, markRingNode, applyRingIfPossible, enforceFixedBoxSizingAfterLayout } from '../layout';
 import { MASTER_ICON_NAME_KEY } from '../components/component-instance';
@@ -38,26 +38,19 @@ export function applyStyleToFrame(frame: FrameNode, style: TailwindStyle, theme:
   if (!style) return;
 
   if (style.bg) {
-    const bgBound = style.bgToken && bindColorVariable(frame, style.bgToken, 'fill', theme);
-    if (bgBound) {
-      if (style.bgOpacity != null && Array.isArray(frame.fills) && frame.fills.length > 0) {
-        const nextFills = JSON.parse(JSON.stringify(frame.fills));
-        nextFills[0].opacity = style.bgOpacity;
-        frame.fills = nextFills;
-      }
-    } else {
-      const bg = parseColor(style.bg);
-      const bgOpacity = style.bgOpacity != null ? style.bgOpacity : (bg.a == null ? 1 : bg.a);
-      frame.fills = [{ type: 'SOLID', color: { r: bg.r, g: bg.g, b: bg.b }, opacity: bgOpacity }];
-    }
+    applyTokenColor(frame, 'fill', {
+      token: style.bgToken,
+      value: style.bg,
+      opacity: style.bgOpacity,
+    }, theme);
   }
 
   if (style.border) {
-    const borderBound = style.borderToken && bindColorVariable(frame, style.borderToken, 'stroke', theme);
-    if (!borderBound) {
-      const borderColor = parseColor(style.border);
-      frame.strokes = [{ type: 'SOLID', color: { r: borderColor.r, g: borderColor.g, b: borderColor.b } }];
-    }
+    applyTokenColor(frame, 'stroke', {
+      token: style.borderToken,
+      value: style.border,
+      opacity: style.borderOpacity,
+    }, theme);
     frame.strokeWeight = 1;
   }