chore(monorepo): 🤖 Figma Design Tokens plugin (initial)

[punkbit]

Why?

The Design Tokens Figma plugin is based on Figma's Schema 2025 Design Systems recap and was developed as a standalone proof of concept in a separate repo. Porting it to the monorepo as a new package ensures it shares the same dependency management, build tooling, and workspace conventions as the rest of the click-ui ecosystem.

⚠️ Depends on #946 (which should be merged first)

How?

• Copied plugin source files (src/index.ts, src/utils/, src/ui/) from the POC repo to packages/figma-design-tokens-plugin
• Copied build and TypeScript config (vite.config.ts, tsconfig.json, tsconfig.node.json, manifest.json) as-is
• Created a new package.json scoped as @clickhouse/figma-design-tokens-plugin with no unnecessary dependencies
• Removed all code comments from TypeScript source files

Tickets?

N/A

Contribution checklist?

• You've done enough research before writing
• You have reviewed the PR
• The commit messages are detailed
• The build command runs locally
• Assets or static content are linked and stored in the project
• For documentation, guides or references, you've tested the commands

Security checklist?

• All user inputs are validated and sanitized
• No usage of dangerouslySetInnerHTML
• Sensitive data has been identified and is being protected properly
• Build output contains no secrets or API keys

Preview?

Install via Plugins → Development → Import plugin from manifest... using packages/figma-design-tokens-plugin/manifest.json

[changeset-bot]

⚠️ No Changeset found

Latest commit: bad2a63

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[punkbit]

• DEBUG console.log spam (flagged 4× now) — src/index.ts and src/utils/tokens.ts contain 60+ console.log("DEBUG ...") calls. The latest commit added more. Every single token import floods the Figma developer console for all users. Key locations: index.ts:38–121, tokens.ts:49–128, tokens.ts:310–534, tokens.ts:671–939, tokens.ts:955–985. Strip them entirely or gate behind const DEBUG = false before merging.

This is expected. The console logs must persist throughout this initial phase to get feedback due to the context. Do ignore for now, please!

[github-actions]

Claude finished @punkbit's task in 1m 2s —— View job

---

Code Review

• Gather context
• Read source files
• Check previously flagged issues
• Post review

---

All three previously flagged must-fix items have been addressed in this round of commits. 🙌

✅ Resolved from prior reviews

• Error handling (index.ts:219–234) — importJSONFile is now wrapped in a proper try/catch that posts IMPORT_ERROR to the UI. The UI handler at main.ts:216–226 re-enables the button and surfaces the error via alert. Fixed.

• Non-null assertion crash (tokens.ts:540–547) — createVariableAlias now guards against a missing allTokens[valueKey] by throwing a descriptive error with the alias key and referenced key name. Fixed.

• (token as any).scopes cast — VariableWithScopes type alias is now defined at tokens.ts:13 (Variable & { scopes: VariableScope[] }), replacing all as any casts throughout the file. Fixed.

• Filename heuristic undocumented — README has been updated (commit ed788eee) with a naming convention note. Fixed.

ℹ️ Console logs

Noted that these are intentional for the initial feedback phase per the author's comment — acknowledged, not flagging.

💡 Suggestion (non-blocking)

• package.json lint/format scripts are still echo 'Skip ...' stubs. Wiring lint to tsc --noEmit costs nothing and lets CI catch type errors without a separate invocation.

---

The plugin is in solid shape for this initial port. No blocking issues remain.

[DreaminDani]

This is net new designer-only tooling. So I have no problem approving it.

[github-actions]

Claude finished @punkbit's task in 2m 39s —— View job

---

Code Review

• Gather context
• Read CLAUDE.md and conventions
• Read source files
• Post review

---

Solid initial port — the logic is well-structured, the type system is clean, and test coverage for the core paths is good. Previous must-fix items were all addressed. A few things worth noting:

♿ Accessibility

• import/index.html:261-263,278-279: The two <label> elements ("Collection Name" and "Token File") have no for attribute, so they're not programmatically associated with their inputs. Clicking them won't focus the input and screen readers won't announce them on focus. Fix: add for="collectionInput" and for="fileInput" respectively. Fix this →

💡 Suggestions (non-blocking)

• colors.ts:90,150-152: The floatRgbRegex branch is effectively dead code — the regex matches {r: x, g: y, b: z} (unquoted keys), but JSON.parse requires quoted keys and will always throw a SyntaxError for that input. The tests correctly skip this with an explanation. Consider either removing the branch entirely or replacing JSON.parse with a manual parser for this format.

• tokens.test.ts:165: Contradictory comment. Line says "should not throw" but the assertion is toThrow(). The assertion is correct (passing null bypasses the value !== null guard and hits null.toString()); the comment should say "will throw".

• tokens.test.ts: inferScopes has no tests for FONT_SIZE, FONT_WEIGHT, or LINE_HEIGHT scope inference — these are the first branches checked for FLOAT types and are therefore high-value paths to cover.

• tokens.ts:295-462: The update logic for existingVariables[name] (exact match) and existingVariables[dotName] (dot format) is ~100 lines of near-identical code. Extracting a shared updateExistingToken(token, ...) helper would make both branches much easier to maintain.

---

Overall the plugin is in good shape. The a11y gap is the only item I'd encourage addressing before merge. Everything else is future polish.

[github-actions]

Claude finished @punkbit's task in 1m 40s —— View job

---

Code Review

• Gather context
• Read source files
• Check previously flagged issues
• Post review

---

The two latest commits (6c12c507, bbc87578) wired up linting and formatting — nice housekeeping. The previous suggestion to use tsc --noEmit for lint has been addressed. ✅

✅ Resolved from prior review

• lint script is now tsc --noEmit ✅
• format script wired to Prettier + .prettierrc added ✅

---

♿ Accessibility (still open from prior review)

• import/index.html:261,278 — The two <label> elements still have no for attribute and are not programmatically associated with their inputs. Screen readers won't announce the label when the input receives focus, and clicking the label won't move focus to the input.

  • Line 261: add for="collectionInput" to the Collection Name label
  • Line 278: add for="fileInput" to the Token File label

  Fix this →

💡 Suggestions (non-blocking, carried from prior review)

• tokens.test.ts:164–166 — Contradictory comment. Line 165 reads "if passed it should not throw" but the assertion is toThrow(). The assertion is correct; the comment should say "will throw" (or similar).

• tokens.test.ts — inferScopes has no cases for the FONT_SIZE, FONT_WEIGHT, or LINE_HEIGHT branches (font.size, font.weight, lineheight / line_height / line-height). These are the first branches evaluated for FLOAT and are high-value paths to cover.

• colors.ts:150–151 — The floatRgbRegex branch ({ r: x, g: y, b: z } unquoted-key format) is effectively dead: JSON.parse requires quoted keys and will always throw for that input. Either remove the branch or replace JSON.parse with a manual parser.

---

Overall the plugin continues to improve incrementally. The a11y gap is the only item I'd encourage fixing before merge.

[github-actions]

Claude finished @punkbit's task in 1m 13s —— View job

---

Code Review

• Gather context
• Read source files
• Check previously flagged issues
• Post review

---

The two latest commits (6c12c507, bbc87578) wired up linting and formatting — good housekeeping. ✅

♿ Accessibility (still open from two prior reviews)

• import/index.html:261 — <label class="collection-label">Collection Name</label> is missing for="collectionInput". The <input id="collectionInput"> directly follows, so the association is one attribute away.
• import/index.html:278 — <label class="file-label">Token File</label> is missing for="fileInput". The <input type="file" id="fileInput"> is inside the drop zone wrapper below it.

Without for attributes, clicking either label does nothing, and screen readers won't announce the label when the input receives focus. This is the third review flagging the same two lines.

Fix this →

💡 Suggestions (non-blocking, carried from prior reviews)

• tokens.test.ts:165 — Comment says "if passed it should not throw" but the assertion is toThrow(). The assertion is correct; the comment should say "will throw".

• tokens.test.ts — inferScopes has no cases for the FONT_SIZE (font/size, font.size), FONT_WEIGHT (font/weight, font.weight), or LINE_HEIGHT (lineheight, line_height, line-height) branches. These are the first branches evaluated for FLOAT and are high-value paths to cover.

• colors.ts:150–151 — The floatRgbRegex branch ({ r: x, g: y, b: z } unquoted-key format) is effectively dead: JSON.parse requires quoted keys and will always throw for that input. Either remove the branch or replace JSON.parse with a manual parser.

---

The plugin continues to improve. The a11y gap is the only item I'd encourage addressing before merge — it's a two-line fix.

[github-actions]

Claude finished @punkbit's task in 51s —— View job

---

Code Review

• Gather context
• Read source files
• Check previously flagged issues
• Post review

---

The plugin is in good shape overall and the previous must-fix items were all resolved. One a11y issue has been flagged in each of the last three reviews and remains open — flagging it here one more time.

♿ Accessibility (carried from 3 prior reviews)

• import/index.html:261 — <label class="collection-label">Collection Name</label> is missing for="collectionInput". The associated <input id="collectionInput"> is right below it — one attribute away.
• import/index.html:278 — <label class="file-label">Token File</label> is missing for="fileInput". The associated <input type="file" id="fileInput"> is inside the drop zone wrapper.

Without for attributes, clicking either label won't move focus to the input, and screen readers won't announce the label when the input receives focus.

Fix this →

💡 Suggestions (non-blocking, carried from prior reviews)

• tokens.test.ts:165 — Comment says "if passed it should not throw" but the assertion is toThrow(). The assertion is correct; the comment should read "will throw".

• tokens.test.ts — inferScopes has no cases for FONT_SIZE (font/size, font.size), FONT_WEIGHT (font/weight, font.weight), or LINE_HEIGHT (lineheight, line_height, line-height). These are the first branches evaluated for FLOAT and are high-value paths to cover.

• colors.ts:150–151 — The floatRgbRegex branch ({ r: x, g: y, b: z } unquoted-key format) is effectively dead: JSON.parse requires quoted keys and will always throw for that input. Either remove the branch or replace JSON.parse with a manual parser.

---

The a11y fix is a two-line change. Everything else is future polish.

[workflow-authentication-public]

📚 Storybook Preview Deployed

✅ Preview URL: https://click-20gk0v0jl-clickhouse.vercel.app

Built from commit: bb8971d9c0daafe3169aa5891bcd78cca9229d77