style: update MCP server picker styles and variables for improved UI consistency

[SonyLeo]

McpServerPicker 组件 UI 整改

优化前：

亮色模式

暗色模式

优化后：

亮色模式

暗色模式

Summary by CodeRabbit

• Style
  • Enhanced visual styling for the MCP server picker component with improved theme consistency across light and dark modes.
  • Updated delete trigger UI appearance on plugin cards.
  • Refined tab, field, header button, and market section styling for better overall design coherence.

[coderabbitai]

Walkthrough

This PR refactors the MCP Server Picker component's styling architecture to use CSS custom properties instead of hardcoded values, introducing granular theme tokens in variables.css, updating PluginCard.vue with variable-based styling and a delete-trigger UI change, and refactoring index.vue to replace inline styles and update deep component overrides.

Changes

MCP Server Picker Variable-Driven Styling

Layer / File(s)	Summary
CSS Custom Properties Foundation packages/components/src/styles/variables.css	New --tr-mcp-server-picker-* CSS variables defined for tabs border/divider, field background/border/icon colors, card background, header button border/text/icon, and market button styling across light and dark theme modes. Removes deprecated tokens like bg-default-2 and tabs-nav-wrap-bg-color.
PluginCard Component Styling packages/components/src/mcp-server-picker/components/PluginCard.vue	Delete trigger now uses a dedicated plugin-card__delete-trigger class; card base styling, button styling, expanded tools layout, and dividers refactored to use --plugin-card-* CSS variables instead of hardcoded values. Delete trigger visibility controlled by hover/focus-within. Removes .common-icon.delete color rule.
Parent Component (index.vue) Styling packages/components/src/mcp-server-picker/index.vue	SelectDropStyle background token, header IconPlus class, and market filter/search moved from inline styles to dedicated CSS classes. Header button, tabs, and deep tiny-input/tiny-base-select overrides refactored to use new theme variables for text, border, icon, and placeholder colors.

Estimated Code Review Effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 Hop through the theme variables deep,
Where CSS tokens dance and keep
The picker cards in color true,
Light and dark, both fresh and new!
No hardcoded values left to creep—
Just lovely tokens, safe to reap. ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title directly reflects the main change: updating MCP server picker styles and CSS variables for UI consistency, which matches the actual modifications across three files.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@packages/components/src/mcp-server-picker/components/PluginCard.vue`:
- Around line 116-118: The delete trigger uses a non-focusable <span> (class
"plugin-card__delete-trigger") which prevents keyboard users from activating the
popconfirm; replace the span with a semantic <button type="button"> (preserving
class "plugin-card__delete-trigger" and the IconDelete child) so it is focusable
and keyboard-operable, add an accessible name via aria-label (e.g., "Remove
plugin") and ensure any existing click handlers or popconfirm binding attached
to the span are kept on the new button; apply the same change to the other two
occurrences of the same trigger in this file (the duplicate delete triggers).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 6e5dd9f1-c6cb-4e59-b07b-55c0f812eb0c

📥 Commits

Reviewing files that changed from the base of the PR and between 72cfb12 and dafb539.

📒 Files selected for processing (3)

• packages/components/src/mcp-server-picker/components/PluginCard.vue
• packages/components/src/mcp-server-picker/index.vue
• packages/components/src/styles/variables.css

[github-actions]

✅ Preview build completed successfully!

Click the image above to preview.
Preview will be automatically removed when this PR is closed.

[github-actions]

📦 Package Preview

pnpm add https://pkg.pr.new/@opentiny/tiny-robot@dafb539

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-kit@dafb539

pnpm add https://pkg.pr.new/@opentiny/tiny-robot-svgs@dafb539

commit: dafb539