inkbridge 0.1.0-beta.5 → 0.1.0-beta.7

package/README.md

@@ -1,3 +1,5 @@
+<img src="https://inkbridge.ink/inkbridge-logo.png" alt="Inkbridge" width="80" />
+
 # Inkbridge
 
 Generates native Figma frames from your Tailwind React components and syncs design tokens back to your codebase via GitHub PRs.

package/code.js

@@ -26,7 +26,7 @@
     repo: "",
     baseBranch: "main",
     tokenPath: "design-tokens/tokens.dtcg.json",
-    tokenSourceMode: "auto",
+    tokenSourceMode: "css",
     cssTokenPath: "",
     syncDtcgOnPush: false,
     allowNewTokensFromFigma: false,
@@ -44,8 +44,8 @@
     return tokenPath;
   }
   function normalizeTokenSourceMode(mode) {
-    if (mode === "css" || mode === "dtcg" || mode === "auto") return mode;
-    return "auto";
+    if (mode === "dtcg") return "dtcg";
+    return "css";
   }
   function normalizeCssTokenPath(cssTokenPath) {
     if (typeof cssTokenPath !== "string") return "";
@@ -1696,7 +1696,7 @@
   function normalizeTokenMap(raw) {
     if (!raw || !isPlainObject3(raw)) return void 0;
     const mode = raw.mode === "css" || raw.mode === "dtcg" || raw.mode === "embedded" ? raw.mode : "embedded";
-    const requestedMode = raw.requestedMode === "css" || raw.requestedMode === "dtcg" || raw.requestedMode === "auto" ? raw.requestedMode : void 0;
+    const requestedMode = raw.requestedMode === "css" || raw.requestedMode === "dtcg" ? raw.requestedMode : void 0;
     const out = createEmptyScannedTokenMap(
       mode,
       typeof raw.source === "string" && raw.source ? raw.source : "embedded:tokens.ts",
@@ -1803,7 +1803,7 @@
         const baseUrl = "http://localhost:" + port + "/" + path;
         const query = [];
         const requestedMode = config == null ? void 0 : config.tokenSourceMode;
-        if (requestedMode === "auto" || requestedMode === "css" || requestedMode === "dtcg") {
+        if (requestedMode === "css" || requestedMode === "dtcg") {
           query.push("tokenSourceMode=" + encodeURIComponent(requestedMode));
         }
         const cssTokenPath = ((config == null ? void 0 : config.cssTokenPath) || "").trim();
@@ -4402,7 +4402,7 @@
     const modeRaw = raw && typeof raw === "object" ? raw.mode : null;
     const mode = modeRaw === "css" || modeRaw === "dtcg" || modeRaw === "embedded" ? modeRaw : "embedded";
     const requestedRaw = raw && typeof raw === "object" ? raw.requestedMode : null;
-    const requestedMode = requestedRaw === "auto" || requestedRaw === "css" || requestedRaw === "dtcg" ? requestedRaw : void 0;
+    const requestedMode = requestedRaw === "css" || requestedRaw === "dtcg" ? requestedRaw : void 0;
     return { source, mode, requestedMode };
   }
   async function loadTokenSourceInfo() {
@@ -4823,8 +4823,8 @@
     return true;
   }
   function resolveConfiguredMode(mode) {
-    if (mode === "css" || mode === "dtcg" || mode === "auto") return mode;
-    return "auto";
+    if (mode === "dtcg") return "dtcg";
+    return "css";
   }
   async function buildTokenCommitPlan(token) {
     const tokensBeforeVariablePatch = JSON.parse(JSON.stringify(TOKENS));
@@ -4838,7 +4838,7 @@
     const configuredMode = resolveConfiguredMode(GITHUB_CONFIG.tokenSourceMode);
     const dtcgPath = normalizePath(GITHUB_CONFIG.tokenPath, DEFAULT_DTCG_PATH);
     const dtcgExisting = await fetchFileContent(token, dtcgPath, GITHUB_CONFIG.baseBranch);
-    const preferDtcg = configuredMode === "dtcg" || configuredMode === "auto" && sourceInfo.mode === "dtcg";
+    const preferDtcg = configuredMode === "dtcg" || configuredMode === "css" && sourceInfo.mode === "dtcg";
     if (preferDtcg) {
       const dtcg = tokensToDTCG(workingTokens);
       const dtcgContent = JSON.stringify(dtcg, null, 2) + "\n";
@@ -11760,7 +11760,7 @@
   }
   function coerceTokenSourceInfo(raw) {
     const mode = raw && (raw.mode === "css" || raw.mode === "dtcg" || raw.mode === "embedded") ? raw.mode : "embedded";
-    const requestedMode = raw && (raw.requestedMode === "auto" || raw.requestedMode === "css" || raw.requestedMode === "dtcg") ? raw.requestedMode : void 0;
+    const requestedMode = raw && (raw.requestedMode === "css" || raw.requestedMode === "dtcg") ? raw.requestedMode : void 0;
     const source = raw && typeof raw.source === "string" && raw.source.trim() ? raw.source.trim() : "embedded:tokens.ts";
     return { source, mode, requestedMode };
   }
@@ -12101,7 +12101,7 @@
           repo: msg.repo || "",
           baseBranch: msg.baseBranch || "main",
           tokenPath: msg.tokenPath || "design-tokens/tokens.dtcg.json",
-          tokenSourceMode: msg.tokenSourceMode || "auto",
+          tokenSourceMode: msg.tokenSourceMode || "css",
           cssTokenPath: msg.cssTokenPath || "",
           syncDtcgOnPush: msg.syncDtcgOnPush === true,
           allowNewTokensFromFigma: msg.allowNewTokensFromFigma === true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "inkbridge",
-  "version": "0.1.0-beta.5",
+  "version": "0.1.0-beta.7",
   "description": "Figma plugin that generates a pixel-accurate design system from your Tailwind React components.",
   "type": "module",
   "bin": {
@@ -42,10 +42,5 @@
     "storybook"
   ],
   "license": "MIT",
-  "homepage": "https://inkbridge.io",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/inkn9ne/inkbridge.git",
-    "directory": "tools/figma-plugin-tailwind-tokens"
-  }
+  "homepage": "https://inkbridge.ink"
 }

package/scanner/css-token-reader.ts

@@ -84,6 +84,10 @@ function resolveImportedCssPath(baseFilePath: string, params: string): string |
 }
 
 function cssHasTokenDeclarations(cssText: string): boolean {
+  // Only count declarations inside :root {} or .[theme] {} rules — the same
+  // selectors that patchCssVariables targets. We intentionally skip @theme
+  // at-rules (Tailwind v4 utility mappings) because those contain var()
+  // references, not source values, and the patcher cannot update them.
   try {
     const root = postcss.parse(cssText);
     let found = false;
@@ -91,16 +95,9 @@ function cssHasTokenDeclarations(cssText: string): boolean {
       if (found) return;
       if (!decl.prop || !decl.prop.startsWith('--')) return;
       const parent = decl.parent;
-      if (!parent) return;
-      if (parent.type === 'atrule') {
-        const at = parent as AtRule;
-        if ((at.name || '').toLowerCase() === 'theme') found = true;
-        return;
-      }
-      if (parent.type === 'rule') {
-        const selector = (parent as Rule).selector || '';
-        if (parseThemeSelectors(selector).length > 0) found = true;
-      }
+      if (!parent || parent.type !== 'rule') return;
+      const selector = (parent as Rule).selector || '';
+      if (parseThemeSelectors(selector).length > 0) found = true;
     });
     return found;
   } catch {
@@ -108,7 +105,7 @@ function cssHasTokenDeclarations(cssText: string): boolean {
   }
 }
 
-function resolveCssTokenPathFromImports(filePath: string, visited: Set<string> = new Set()): string {
+export function resolveCssTokenPathFromImports(filePath: string, visited: Set<string> = new Set()): string {
   const absolute = path.resolve(filePath);
   if (visited.has(absolute)) return absolute;
   visited.add(absolute);
@@ -383,7 +380,7 @@ function walkCssNodes(map: ScannedTokenMap, container: postcss.Container): void
   }
 }
 
-export function parseCssTokenMap(cssText: string, source: string, requestedMode: TokenSourceMode = 'auto'): ScannedTokenMap {
+export function parseCssTokenMap(cssText: string, source: string, requestedMode: TokenSourceMode = 'css'): ScannedTokenMap {
   const map = createEmptyScannedTokenMap('css', source, requestedMode);
   const root = postcss.parse(cssText);
   walkCssNodes(map, root);
@@ -424,7 +421,7 @@ function applyDtcgDimensionGroup(
 function parseDtcgTokenMap(
   dtcgJson: unknown,
   source: string,
-  requestedMode: TokenSourceMode = 'auto'
+  requestedMode: TokenSourceMode = 'dtcg'
 ): ScannedTokenMap {
   const map = createEmptyScannedTokenMap('dtcg', source, requestedMode);
   if (!isPlainObject(dtcgJson)) return map;
@@ -452,16 +449,10 @@ function parseDtcgTokenMap(
 
 export function readTokenSourceMap(options: ReadTokenSourceOptions): ScannedTokenMap {
   const projectRoot = path.resolve(options.projectRoot);
-  const requestedMode = options.tokenSourceMode || 'auto';
+  const requestedMode: TokenSourceMode = options.tokenSourceMode === 'dtcg' ? 'dtcg' : 'css';
   const cssPath = discoverCssTokenPath(projectRoot, options.cssTokenPath);
   const dtcgPath = discoverDtcgTokenPath(projectRoot, options.dtcgTokenPath);
 
-  if (requestedMode === 'css') {
-    if (!cssPath) return createEmptyScannedTokenMap('embedded', 'embedded:tokens.ts', requestedMode);
-    const cssText = readCssWithImports(cssPath);
-    return parseCssTokenMap(cssText, toDisplayPath(projectRoot, cssPath), requestedMode);
-  }
-
   if (requestedMode === 'dtcg') {
     if (!dtcgPath) return createEmptyScannedTokenMap('embedded', 'embedded:tokens.ts', requestedMode);
     const dtcgText = fs.readFileSync(dtcgPath, 'utf-8');
@@ -469,10 +460,14 @@ export function readTokenSourceMap(options: ReadTokenSourceOptions): ScannedToke
     return parseDtcgTokenMap(dtcgJson, toDisplayPath(projectRoot, dtcgPath), requestedMode);
   }
 
-  // auto mode: CSS always wins when present.
+  // css mode: CSS preferred; fall back to DTCG if no CSS file found, then embedded.
   if (cssPath) {
     const cssText = readCssWithImports(cssPath);
-    return parseCssTokenMap(cssText, toDisplayPath(projectRoot, cssPath), requestedMode);
+    // Use the file that actually contains the declarations as source so the
+    // write-back path (PR/patch) targets the right file even when globals.css
+    // delegates token definitions to an imported file like tokens.css.
+    const writeTarget = resolveCssTokenPathFromImports(cssPath);
+    return parseCssTokenMap(cssText, toDisplayPath(projectRoot, writeTarget), requestedMode);
   }
   if (dtcgPath) {
     const dtcgText = fs.readFileSync(dtcgPath, 'utf-8');

package/src/token-source.ts

@@ -1,4 +1,4 @@
-export type TokenSourceMode = 'auto' | 'css' | 'dtcg';
+export type TokenSourceMode = 'css' | 'dtcg';
 export type ResolvedTokenSourceMode = 'css' | 'dtcg' | 'embedded';
 
 export interface ScannedThemeTokens {

package/ui.html

@@ -205,7 +205,7 @@
     </div>
     <div id="tokenSourceInfoPush" class="repo-display" style="display:none;padding:6px 8px;">
       Last scan source: <strong id="tokenSourceLabelPush"></strong><br>
-      Configured mode: <strong id="configuredTokenSourceModePush">auto</strong>
+      Configured mode: <strong id="configuredTokenSourceModePush">css</strong>
     </div>
 
     <div class="field">
@@ -250,7 +250,7 @@
 
     <div id="tokenSourceInfoSettings" class="repo-display" style="display:none;padding:6px 8px;">
       Last scan source: <strong id="tokenSourceLabelSettings"></strong><br>
-      Configured mode: <strong id="configuredTokenSourceModeSettings">auto</strong>
+      Configured mode: <strong id="configuredTokenSourceModeSettings">css</strong>
     </div>
 
     <div class="field">
@@ -271,11 +271,10 @@
     <div class="field">
       <label>Token Source Mode</label>
       <select id="settingsTokenSourceMode">
-        <option value="auto">auto (prefer CSS)</option>
-        <option value="css">css (force CSS only)</option>
-        <option value="dtcg">dtcg (force DTCG only)</option>
+        <option value="css">css (auto-discover CSS, fallback to DTCG)</option>
+        <option value="dtcg">dtcg (force DTCG file only)</option>
       </select>
-      <p class="hint">`auto` prefers CSS and falls back to DTCG, then embedded tokens.</p>
+      <p class="hint">CSS mode auto-discovers your globals.css and falls back to DTCG if not found. Use DTCG to force the legacy token file.</p>
     </div>
 
     <div class="field" id="tokenPathField">
@@ -291,25 +290,25 @@
     </div>
 
     <div class="field" id="syncDtcgOnPushField">
-      <label style="display:flex;align-items:center;gap:8px;">
-        <input type="checkbox" id="settingsSyncDtcgOnPush">
-        Also update DTCG on Push to Code
-      </label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input type="checkbox" id="settingsSyncDtcgOnPush" style="width:auto;flex-shrink:0;">
+        <label for="settingsSyncDtcgOnPush" style="display:inline;margin:0;cursor:pointer;">Also update DTCG on Push to Code</label>
+      </div>
       <p class="hint">When enabled, the plugin also commits <code>tokens.dtcg.json</code> as a generated artifact.</p>
     </div>
 
     <div class="field">
-      <label style="display:flex;align-items:center;gap:8px;">
-        <input type="checkbox" id="settingsAllowNewTokensFromFigma">
-        Allow New Tokens from Figma
-      </label>
+      <div style="display:flex;align-items:center;gap:8px;">
+        <input type="checkbox" id="settingsAllowNewTokensFromFigma" style="width:auto;flex-shrink:0;">
+        <label for="settingsAllowNewTokensFromFigma" style="display:inline;margin:0;cursor:pointer;">Allow New Tokens from Figma</label>
+      </div>
       <p class="hint">Disabled by default. When enabled, new token keys can be added to code on push.</p>
     </div>
 
-    <div class="field">
+    <div class="field" id="newTokenPrefixesField" style="display:none;">
       <label>New Token Prefixes (optional)</label>
       <input type="text" id="settingsNewTokenPrefixes" placeholder="chart-, brand-">
-      <p class="hint">Comma-separated. If empty, all new keys are allowed. If set, only matching prefixes are allowed.</p>
+      <p class="hint">Comma-separated. Only tokens with these prefixes can be added. Leave empty to allow all new tokens.</p>
     </div>
 
     <div class="divider"></div>
@@ -410,7 +409,7 @@
     </div>
     <div id="tokenSourceInfoSync" class="repo-display" style="display:none;padding:6px 8px;">
       Last scan source: <strong id="tokenSourceLabelSync"></strong><br>
-      Configured mode: <strong id="configuredTokenSourceModeSync">auto</strong>
+      Configured mode: <strong id="configuredTokenSourceModeSync">css</strong>
     </div>
 
     <p style="font-size: 11px; color: #666; margin-bottom: 12px;">
@@ -531,6 +530,7 @@
     var syncDtcgOnPushField = document.getElementById('syncDtcgOnPushField');
     var settingsAllowNewTokensFromFigma = document.getElementById('settingsAllowNewTokensFromFigma');
     var settingsNewTokenPrefixes = document.getElementById('settingsNewTokenPrefixes');
+    var newTokenPrefixesField = document.getElementById('newTokenPrefixesField');
     var settingsToken = document.getElementById('settingsToken');
     var settingsProjectName = document.getElementById('settingsProjectName');
     var settingsLicenseKey = document.getElementById('settingsLicenseKey');
@@ -538,7 +538,7 @@
     // Current detected changes
     var detectedChanges = { tokens: true, components: [] };
     var lastTokenSourceInfo = null;
-    var configuredTokenSourceMode = 'auto';
+    var configuredTokenSourceMode = 'css';
 
     function resizeToContent() {
       // Wait for layout to settle before measuring
@@ -580,25 +580,20 @@
     }
 
     function normalizeConfiguredMode(mode) {
-      if (mode === 'css' || mode === 'dtcg' || mode === 'auto') return mode;
-      return 'auto';
+      if (mode === 'dtcg') return 'dtcg';
+      return 'css';
     }
 
     function applyTokenSourceModeVisibility(mode) {
       var normalized = normalizeConfiguredMode(mode);
-      if (normalized === 'css') {
-        tokenPathField.style.display = 'none';
-        cssTokenPathField.style.display = 'block';
-        syncDtcgOnPushField.style.display = 'block';
-        return;
-      }
       if (normalized === 'dtcg') {
         tokenPathField.style.display = 'block';
         cssTokenPathField.style.display = 'none';
         syncDtcgOnPushField.style.display = 'none';
         return;
       }
-      tokenPathField.style.display = 'block';
+      // css mode
+      tokenPathField.style.display = 'none';
       cssTokenPathField.style.display = 'block';
       syncDtcgOnPushField.style.display = 'block';
     }
@@ -980,7 +975,8 @@
         settingsCssTokenPath.value = config.cssTokenPath || '';
         settingsSyncDtcgOnPush.checked = config.syncDtcgOnPush === true;
         settingsAllowNewTokensFromFigma.checked = config.allowNewTokensFromFigma === true;
-        settingsNewTokenPrefixes.value = Array.isArray(config.newTokenPrefixes) ? config.newTokenPrefixes.join(', ') : '';
+        settingsNewTokenPrefixes.value = Array.isArray(config.newTokenPrefixes) ? config.newTokenPrefixes.join(', ') : (typeof config.newTokenPrefixes === 'string' ? config.newTokenPrefixes : '');
+        newTokenPrefixesField.style.display = config.allowNewTokensFromFigma === true ? 'block' : 'none';
         settingsProjectName.value = config.projectName || '';
         configuredTokenSourceMode = tokenSourceMode;
         applyTokenSourceModeVisibility(tokenSourceMode);
@@ -1197,7 +1193,7 @@
           repo: repo,
           baseBranch: settingsBranch.value.trim() || 'main',
           tokenPath: settingsTokenPath.value.trim() || 'design-tokens/tokens.dtcg.json',
-          tokenSourceMode: settingsTokenSourceMode.value || 'auto',
+          tokenSourceMode: settingsTokenSourceMode.value || 'css',
           cssTokenPath: settingsCssTokenPath.value.trim(),
           syncDtcgOnPush: settingsSyncDtcgOnPush.checked === true,
           allowNewTokensFromFigma: settingsAllowNewTokensFromFigma.checked === true,
@@ -1217,6 +1213,10 @@
       applyTokenSourceModeVisibility(configuredTokenSourceMode);
       setTokenSourceInfo(lastTokenSourceInfo);
     };
+
+    settingsAllowNewTokensFromFigma.onchange = function() {
+      newTokenPrefixesField.style.display = settingsAllowNewTokensFromFigma.checked ? 'block' : 'none';
+    };
   </script>
 </body>
 </html>