refactor(agentflow): use design tokens for validation colors

[jocelynlin-wd]

Summary

• Added tokens.colors.border.validation to the design token system
• Replaced hardcoded #FFB938 with the new token in AgentFlowNode and ValidationFeedback components

Addresses review feedback from #5915 (#5915 (review)).

Test plan

• All 455 existing tests pass
• Verify validation border color renders correctly in light/dark mode

🤖 Generated with Claude Code

[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 refactors the application's UI to utilize a design token for validation colors. By moving from a hardcoded color value to a centralized design token, the change enhances the consistency and maintainability of the user interface, particularly for validation feedback elements across different components. This update directly addresses previous review feedback, promoting a more robust and scalable design system.

Highlights

• Design Tokens: Added tokens.colors.border.validation to the design token system, centralizing the definition of validation-related border colors.
• Refactoring: Replaced the hardcoded hexadecimal color value #FFB938 with the newly introduced tokens.colors.border.validation in the AgentFlowNode and ValidationFeedback components for improved consistency and maintainability.

Changelog

• packages/agentflow/src/core/theme/tokens.ts
  • Added a new validation property to the border object within the tokens.colors structure, assigning baseColors.nodeCondition as its value.
• packages/agentflow/src/features/canvas/components/ValidationFeedback.tsx
  • Imported the tokens object from the theme system.
  • Introduced a validationColor constant, initialized with tokens.colors.border.validation.
  • Replaced hardcoded #FFB938 with validationColor for border, background, and icon colors within the component's styling.
  • Adjusted background color logic to use darken and lighten functions with validationColor for dark and light modes respectively.
• packages/agentflow/src/features/canvas/containers/AgentFlowNode.tsx
  • Imported the tokens object from the theme system.
  • Updated the borderColor property of the CardWrapper to use tokens.colors.border.validation when hasValidationErrors is true, replacing the hardcoded #FFB938 value.

Activity

• Addressed review feedback from pull request feat(agentflow): enhance validation and feedback mechanisms #5915.
• Confirmed that all 455 existing tests pass.
• Included a manual verification step to ensure validation border color renders correctly in light/dark mode.

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.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

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 successfully refactors hardcoded validation colors to use a new design token, tokens.colors.border.validation. The changes in AgentFlowNode and ValidationFeedback correctly replace the magic string #FFB938 with the new token, improving maintainability and consistency. I have one suggestion in ValidationFeedback.tsx to move a constant declaration out of the component body for a minor performance improvement and better code clarity. Overall, this is a good refactoring.

[mmattu-wd]

lgtm!

[mmattu-wd]

👍