Comfy-Org / Comfy-Org/ComfyUI_frontend
Refactor: Make form dropdown styling consistent with application patterns
- Dominant language
- TypeScript
- Stars
- 2k
- Forks
- 699
- Avg merge
- 1d 7h
- Merged PRs (30d)
- 490
Description
## Summary
The styling code within the form dropdown components (e.g., `src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenu.vue`) currently applies layout configurations (gap, padding, sizing) via inline JavaScript objects using CSS variable strings, rather than using the design token and Tailwind utility patterns established elsewhere in the application.
This issue tracks the work to audit and refactor the styling approach across all form dropdown components to be consistent with the rest of the codebase — for example, leveraging Tailwind 4 design tokens, `cn()` utility, and semantic token references instead of ad-hoc CSS variable strings embedded in script-side config objects.
## Motivation
- Consistency with design token usage and Tailwind utility patterns across the application.
- Improve maintainability and discoverability of styling values.
- Reduce the surface area for mismatches between layout config values and the Tailwind design system.
## Scope
- Audit `src/renderer/extensions/vueNodes/widgets/components/form/dropdown/` for all inline CSS value strings.
- Replace where appropriate with design tokens and Tailwind utilities consistent with patterns used in the rest of the app.
## References
- Raised in PR: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9349
- Original comment: https://github.com/Comfy-Org/ComfyUI_frontend/pull/9349#discussion_r2886450492
- Requested by: @DrJKL
┆Issue is synchronized with this [Notion page](https://www.notion.so/Issue-9391-Refactor-Make-form-dropdown-styling-consistent-with-application-patterns-3196d73d365081478ee6c944aa54f40b) by [Unito](https://www.unito.io)
Contributor guide
Assessment
This issue has not been assessed yet.