mirror of
https://github.com/Comfy-Org/ComfyUI_frontend.git
synced 2026-01-30 21:09:53 +00:00
265f1257e7
This pull request updates the design system color tokens and refactors node and widget component styles throughout the codebase to use new, more consistent CSS variables. The changes ensure that node and widget components are styled using unified design tokens, improving maintainability and theme support for both light and dark modes. **Design System Token Updates** * Added new component and node-related CSS variables for background, border, foreground, and widget states in both light and dark themes in `style.css`. [[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R246-R256) [[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R354-R364) * Introduced `--color-graphite-400` and adjusted several existing color assignments for better palette consistency. [[1]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0R76) [[2]](diffhunk://#diff-71b6b57a56095b04e47c797a5016149b76b27971cab04b93f033f1f846e0f5a0L304-R316) * Updated semantic CSS variables to reference the new component/node tokens for easier usage in components. * Changed `--secondary-background-hover` to match `--secondary-background` for improved hover consistency. **Component Refactoring: Node and Widget Styles** * Refactored Vue component classes and inline styles to use the new CSS variables for node backgrounds, borders, and widget states, replacing legacy variables like `bg-node-component-surface` and `border-node-component-border` with `bg-component-node-background` and `border-component-node-border`. [[1]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L11-R14) [[2]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L39-R39) [[3]](diffhunk://#diff-a7744614cf842e54416047326db79ad81f7c7ab7bfb66ae2b46f5c73ac7d47f2L384-R384) [[4]](diffhunk://#diff-19537a67677431ecdc9aec43877d28814e37edf0e45b0b0b484ea08832cad299L5-R13) * Updated widget dropdowns, select, and input components to use `text-component-node-foreground-secondary` for icons and foregrounds, and new background variables for buttons and inputs. [[1]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L29-R29) [[2]](diffhunk://#diff-489229f88dfdfd5d883a3ef7fad6effa0790a18a831d5a9d84642dfb246962a2L100-R100) [[3]](diffhunk://#diff-661a09de2721335e118a693b25d09922ada0ccbd0a51284691ed784fbe18874eL13-R13) [[4]](diffhunk://#diff-2856391d03b0d38db1ed922b5034a05bc32e978c51f8175057d84cf82399d986L13-R13) [[5]](diffhunk://#diff-4ee47848821aff71b6da0a1bb7fb8976e7879d706f71ff2ab3c5b046f5ef528cL10-R10) [[6]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L106-R113) [[7]](diffhunk://#diff-8b7ed2ce6194a262fb1e950294699cb8722630920362143a765802b602ae5fc8L119-R123) [[8]](diffhunk://#diff-597a77456bf4b0c2d390fc46a930f37156b2f26ca030259b6703e5d39ff6b20eL37-R53) [[9]](diffhunk://#diff-29348fa2e5b8cec1301a99bdec241379aeefc1747cceeb0c39b7df452ca635ffL7-R7) **Service Layer Updates** * Updated the color palette service mapping to use the new CSS variable names for node and widget colors, ensuring consistency across the application. * https://github.com/user-attachments/assets/d9535f9a-b459-49bf-b2fe-ed872916fa4e These changes collectively modernize the styling approach for node and widget components, making it easier to maintain and extend theme support. --------- Co-authored-by: github-actions <github-actions@github.com>