[AlexandraGallipoliRodrigues]

Adds support for per-corner border radius tokens in the design token generator. Exports the four corners as a CSS shorthand string in both TypeScript skins and CSS, preserving existing uniform radius tokens.

Validates corner values and rejects incomplete or mixed definitions. Includes 23 tests covering parsing and generation, added to CI.

Token names, per-skin values, and Message integration remain pending agreement with Design.

Ref: #1752

[github-actions]

Size stats

	master	this branch	diff
Total JS	16.4 MB	16.4 MB	-2 B
JS without icons	2.06 MB	2.06 MB	-2 B
Lib overhead	100 kB	100 kB	0 B
Lib overhead (gzip)	21.5 kB	21.5 kB	0 B

[Copilot]

🟢 Approval recommended

The implementation satisfies the stated requirements with appropriate validation, backward compatibility, documentation, and coverage.

0 open findings

What changed in this PR

Adds per-corner border-radius token support while preserving uniform-radius generation.

Changes:

• Validates and converts uniform and four-corner radius values.
• Generates CSS shorthand values for TypeScript skins and CSS variables.
• Adds documentation, automated tests, and CI execution.

File	Description
packages/​generate-design-tokens/​token-types.ts	Models uniform and per-corner radius tokens.
packages/​generate-design-tokens/​css-generator.ts	Validates and formats radius values.
packages/​generate-design-tokens/​radius-test.ts	Tests parsing, validation, and generated output.
packages/​generate-design-tokens/​package.json	Adds the package test command.
packages/​generate-design-tokens/​README.md	Documents the token format and constraints.
.github/​workflows/​ci.yml	Runs generator tests in CI.

🧠 Review effort: Balanced

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[github-actions]

Deploy preview for mistica-web ready!

Project:	mistica-web
Status:	✅  Deploy successful!
Preview URL:	https://mistica-b8mjbmtgr-flows-projects-65bb050e.vercel.app
Latest Commit:	0a80b2e

Deployed with vercel-action

[github-actions]

Accessibility report
✔️ No issues found

ℹ️ You can run this locally by executing yarn audit-accessibility.

[AnaMontes11]

Useful improvement and keeps compatibility with existing tokens. :)

[brtbrt]

I think we've implemented this too early, because we don't have a branch on mistica-design with the schema evolution about this, right?

To check we properly implement what's needed, and make it 100% compatible with mistica-design, we do need that branch and schema change 🤔

[Marcosld]

I think we've implemented this too early, because we don't have a branch on mistica-design with the schema evolution about this, right?

To check we properly implement what's needed, and make it 100% compatible with mistica-design, we do need that branch and schema change 🤔

We can just create a test branch with per-corner tokens, test and merge this so we have it already in main

[Marcosld]

Should we support defining only a subset of the corners? for example topLeft and bottomRight but not the other two?

[AlexandraGallipoliRodrigues]

Currently all four corners are required. Supporting a subset makes sense, but what should omitted corners resolve to? For Message, we’d need them to use the regular container radius rather than zero. Should we represent that fallback in the token schema?

[Marcosld]

Omitted corners could default to 0

[AlexandraGallipoliRodrigues]

I think we've implemented this too early, because we don't have a branch on mistica-design with the schema evolution about this, right?
To check we properly implement what's needed, and make it 100% compatible with mistica-design, we do need that branch and schema change 🤔

We can just create a test branch with per-corner tokens, test and merge this so we have it already in main

Yes, this implementation follows the illustrative structure in the issue, but we still need to validate it against the schema in mistica-design. A test branch with the schema change and sample per-corner tokens sounds good. We can use it to verify the import before merging this PR

@AnaMontes11 will you create the test branch with the schema change and the example tokens? As soon as it’s ready, I’ll approve the import using the generator in this PR. But before that, we’ll need to agree on how to deal with the missing corners.

[brtbrt]

I still don't see any mistica-design PR to make this branch comply with that one?

[AnaMontes11]

I think we've implemented this too early, because we don't have a branch on mistica-design with the schema evolution about this, right?
To check we properly implement what's needed, and make it 100% compatible with mistica-design, we do need that branch and schema change 🤔

We can just create a test branch with per-corner tokens, test and merge this so we have it already in main

Yes, this implementation follows the illustrative structure in the issue, but we still need to validate it against the schema in mistica-design. A test branch with the schema change and sample per-corner tokens sounds good. We can use it to verify the import before merging this PR

@AnaMontes11 will you create the test branch with the schema change and the example tokens? As soon as it’s ready, I’ll approve the import using the generator in this PR. But before that, we’ll need to agree on how to deal with the missing corners.

hi @AlexandraGallipoliRodrigues @Marcosld @brtbrt Finally, for this specific case (the Message/Bubble corners) there’s going to be no variation across skins, so we’ve found a simpler solution that resolves at the component level, avoiding the schema change and the new token: 3 corners use the existing container token, and the fourth uses a fixed value.

I’ve updated the Bubble specs in Figma to make this explicit.

This evolution may be necessary in the future, so we’ll revisit the schema change when that case comes up.