style: update Vue node designs to use semantic tokens #6304
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
🎭 Playwright Test Results⏰ Completed at: 11/05/2025, 09:30:46 PM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 11/05/2025, 09:18:45 PM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.25 MB (baseline 3.25 MB) • 🔴 +1 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 792 kB (baseline 792 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 8.18 kB (baseline 8.18 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 293 kB (baseline 293 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 12.6 kB (baseline 12.6 kB) • ⚪ 0 BReusable component library chunks
Status: 1 added / 1 removed Data & Services — 10.4 kB (baseline 10.4 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 1 added / 1 removed Utilities & Hooks — 1.07 kB (baseline 1.07 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Vendor & Third-Party — 5.32 MB (baseline 5.32 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 2.55 MB (baseline 2.55 MB) • ⚪ 0 BBundles that do not match a named category
|
2 tasks
christian-byrne
added a commit
that referenced
this pull request
Oct 27, 2025
…6320) ## Summary Fixes `trackTemplate` calls to use raw template ID instead of translated workflow name for analytics tracking. ## Problem When users load templates with non-English locale, the `workflow_name` field was being tracked in their language (e.g., "默认工作流" for Chinese users) instead of English. This makes statistical analysis difficult. ## Changes - Updated both `trackTemplate` calls in `useTemplateWorkflows.ts` to use raw `id` instead of translated `workflowName` - The translated name is still used for display purposes in `loadGraphData` **Before:** ```typescript useTelemetry()?.trackTemplate({ workflow_name: workflowName, // Could be "默认工作流" template_source: sourceModule }) ``` **After:** ```typescript useTelemetry()?.trackTemplate({ workflow_name: id, // Always "default" template_source: sourceModule }) ``` ## Testing - [x] Type checking passes - [x] Verified translated names still used for display ## Related Part of comprehensive i18n audit for telemetry tracking. Related to template metadata English tracking in PR #6304. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6320-bugfix-use-raw-template-ID-for-workflow_name-in-telemetry-tracking-2996d73d365081d8aef3fa2529a10247) by [Unito](https://www.unito.io)
github-actions bot
pushed a commit
that referenced
this pull request
Oct 27, 2025
…6320) ## Summary Fixes `trackTemplate` calls to use raw template ID instead of translated workflow name for analytics tracking. ## Problem When users load templates with non-English locale, the `workflow_name` field was being tracked in their language (e.g., "默认工作流" for Chinese users) instead of English. This makes statistical analysis difficult. ## Changes - Updated both `trackTemplate` calls in `useTemplateWorkflows.ts` to use raw `id` instead of translated `workflowName` - The translated name is still used for display purposes in `loadGraphData` **Before:** ```typescript useTelemetry()?.trackTemplate({ workflow_name: workflowName, // Could be "默认工作流" template_source: sourceModule }) ``` **After:** ```typescript useTelemetry()?.trackTemplate({ workflow_name: id, // Always "default" template_source: sourceModule }) ``` ## Testing - [x] Type checking passes - [x] Verified translated names still used for display ## Related Part of comprehensive i18n audit for telemetry tracking. Related to template metadata English tracking in PR #6304. ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-6320-bugfix-use-raw-template-ID-for-workflow_name-in-telemetry-tracking-2996d73d365081d8aef3fa2529a10247) by [Unito](https://www.unito.io)
Complete the semantic token migration by updating final hard-coded colors in widget components to use design system tokens: - MultiSelect.vue: text-neutral-400 → text-secondary - Ensure consistent text-primary/text-secondary usage across all widgets - Remove hard-coded zinc, neutral, and other color values 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Complete the semantic token migration by updating final hard-coded colors in widget components to use design system tokens: - FormSelectButton.vue: use text-primary/text-secondary consistently - FormDropdownMenuFilter.vue: use text-secondary for default text - FormDropdownMenuItem.vue: use text-secondary for metadata - AudioPreviewPlayer.vue: use text-secondary for icons - Remove hard-coded zinc, neutral, and other color values from vueNodes 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
christian-byrne
force-pushed
the
vue-node/style/improvements
branch
from
033c50e to
20015cc
Compare
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 10/27/2025, 05:15:19 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Update test expectations to use semantic color tokens instead of hard-coded classes: - bg-white → bg-interface-menu-component-surface-selected - text-neutral-900 → text-primary/text-secondary - hover:bg-zinc-200/50 → hover:bg-interface-menu-component-surface-hovered
Update test expectations to use semantic color tokens instead of hard-coded classes: - bg-white → bg-interface-menu-component-surface-selected (25 instances) - text-neutral-900 → text-primary (3 instances) - hover:bg-zinc-200/50 → hover:bg-interface-menu-component-surface-hovered (2 instances)
dosubot
bot
added
the
size:L
Member
|
LGTM |
viva-jinyi
previously approved these changes
Oct 27, 2025
Restore the semantic token migration for MultiSelect.vue: - text-neutral-400 dark-theme:text-zinc-500 → text-secondary This completes the semantic token migration across all components.
…elect.vue - Disable eslint-plugin-tailwindcss due to TailwindCSS v4 incompatibility - Revert MultiSelect.vue changes as they were not part of vueNodes scope The eslint-plugin-tailwindcss v4.0.0-beta.0 is incompatible with TailwindCSS v4.1.12 as it tries to load v3 file structure that no longer exists.
…n knip Due to TailwindCSS v4 compatibility issues with eslint-plugin-tailwindcss v4.0.0-beta.0, we temporarily disabled the plugin in eslint.config.ts. This causes knip to detect these dependencies as unused, so we add them to ignoreDependencies until the compatibility issue is resolved. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <[email protected]>
Update semantic token usage to match current design system conventions: - Use bg-component-node-widget-background (main's naming) - Use text-base-foreground for primary text (main's convention) - Use text-secondary for icons and secondary text (semantic token) - Use bg-interface-stroke and bg-button-icon (semantic tokens) - Use hover:bg-interface-menu-component-surface-hovered - Use bg-interface-menu-component-surface-selected This preserves the PR's intent of migrating to semantic tokens while adopting the evolved token names from main.
DrJKL
reviewed
Nov 6, 2025
Comment on lines
18
to
25
| { | ||
| 'bg-white': isSelected(option) && !disabled, | ||
| 'hover:bg-zinc-200/50': !isSelected(option) && !disabled, | ||
| 'bg-interface-menu-component-surface-selected': | ||
| isSelected(option) && !disabled, | ||
| 'hover:bg-interface-menu-component-surface-hovered': | ||
| !isSelected(option) && !disabled, | ||
| 'opacity-50 cursor-not-allowed': disabled, | ||
| 'cursor-pointer': !disabled | ||
| }, |
Contributor
There was a problem hiding this comment.
Optional:
Suggested change
| { | |
| 'bg-white': isSelected(option) && !disabled, | |
| 'hover:bg-zinc-200/50': !isSelected(option) && !disabled, | |
| 'bg-interface-menu-component-surface-selected': | |
| isSelected(option) && !disabled, | |
| 'hover:bg-interface-menu-component-surface-hovered': | |
| !isSelected(option) && !disabled, | |
| 'opacity-50 cursor-not-allowed': disabled, | |
| 'cursor-pointer': !disabled | |
| }, | |
| disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer', | |
| !disabled && (isSelected(option) ? 'bg-interface-menu-component-surface-selected' : 'hover:bg-interface-menu-component-surface-hovered', |
DrJKL
approved these changes
Nov 6, 2025
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
Use semantic tokens instead of colors
┆Issue is synchronized with this Notion page by Unito