[Component] Update: Sync button radius to 4px

[qingqing-ux]

issues #2989

Background

Sync the latest button radius adjustment from ui/components/spx/builder-component.lib.pen to frontend implementation.

Changes

• Updated square UIButton radius to 4px
• Kept circle button styles unchanged
• Included the design library update in the same branch

Scope

• ui/components/spx/builder-component.lib.pen
• spx-gui/src/components/ui/UIButton.vue

Design System Impact

• Yes
• No

[gemini-code-assist]

Summary of Changes

Hello, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request focuses on enhancing UI consistency and developer efficiency. It updates the styling of square buttons to match the latest design system specifications and introduces a comprehensive guide that maps design components to their corresponding frontend code, aiming to streamline future design synchronization efforts.

Highlights

• UI Component Update: The radius for square UIButton components has been updated to 4px to align with the latest design specifications.
• Design System Documentation: A new design-to-code mapping guide has been added to provide clear guidelines for synchronizing design library components with frontend implementations.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	/gemini review	Performs a code review for the current pull request in its current state.
Pull Request Summary	/gemini summary	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	/gemini help	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here.

Footnotes

1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

[gemini-code-assist]

Code Review

This pull request introduces a new design-to-code-mapping.md document, providing a comprehensive guide for mapping design components to spx-gui frontend code, including UI elements, editor structures, and design tokens, with an emphasis on a 'Token-First' principle. A review comment highlights an inconsistency in UIButton.vue where a button's border-radius is hardcoded to 4px, suggesting it should instead use a CSS variable to align with the new documentation's principles. Another comment recommends expanding the Token Mapping section in the new guide to include other design tokens such as sizing, spacing, and border-radius for improved completeness.

[gemini-code-assist]

为了保持代码的可维护性和与设计系统的一致性，建议将硬编码的 4px 替换为 CSS 变量。这与您在 design-to-code-mapping.md 文档中倡导的 Token-First 原则也是一致的。如果 4px 是一个新的标准圆角值，建议在 token 系统中添加一个新的变量（例如 --ui-border-radius-1）来表示它，而不是直接使用魔法数值。

  --ui-button-radius: var(--ui-border-radius-1);

[gemini-code-assist]

这个文档非常棒！在 Token Mapping 这一节，目前只提到了颜色（colors）。为了让文档更完整，并推广最佳实践，建议也在这里补充关于尺寸（sizing）、间距（spacing）、圆角（border-radius）等设计令牌（design tokens）的说明。这与您提到的“不要直接在业务组件里写死颜色，优先改 token”的原则是一致的，将这个原则扩展到其他类型的 token 会更有帮助。

[xgopilot]

Hardcoded value breaks the design token system

This replaces var(--ui-border-radius-2) with a literal 4px, decoupling the square button radius from the design token. The token --ui-border-radius-2 is still 12px in tokens/index.ts, which is used by 40+ other components (modals, selects, block items). Future global updates to borderRadius[2] won't affect buttons, creating a silent divergence.

Consider either:

1. Introducing a dedicated token (e.g., borderRadius: { 0: '4px', 1: '8px', 2: '12px', ... }) and using var(--ui-border-radius-0), or
2. Adding a separate --ui-button-square-radius: 4px token if the button radius is intentionally independent.

The new doc (design-to-code-mapping.md) itself advises against hardcoding design values — this change contradicts that guidance.

[xgopilot]

Outlier entry: was 10, not 12 like all other square button variants

All other cornerRadius changes in this file go 12 → 4. This entry (Button-only icon/Large/Boring/Shadow/Square/Disabled, frame id svrJY) was already 10 before this PR — a pre-existing inconsistency in the Disabled variant. The change produces the intended 4, but this masked inconsistency should be either acknowledged (if intentional) or noted as a separate bug fix.

[xgopilot]

Inaccurate variant mapping: Flat-Stroke is not a valid prop value

The table maps design name Flat-Stroke to variant, implying variant="flat-stroke" is valid. The actual ButtonVariant type in UIButton.vue only accepts shadow, flat, and stroke. The design label Flat-Stroke corresponds to the code value stroke, not flat-stroke. A developer following this table would pass an invalid prop.

[xgopilot]

Clean, well-scoped design sync. The .pen file and Vue changes are consistent. Two concerns worth addressing: (1) the square button radius is now hardcoded 4px rather than using a design token, contradicting the guidance in the doc added in the same PR; (2) the new design-to-code-mapping.md is written entirely in Chinese while the rest of the developer docs are in English — worth aligning for open-source contributor accessibility.