Christian Byrne
37d2f25d2f
[style] ensure all floating menus have same gap from screen edges ( #6120 )
...
## Summary
Ensures all the floating shell app elements (graph canvas menu, minmap,
floating sidebar) all have .5rem gap between edge and viewport. Was not
proper distance for graph canvas menu and minimap due to splitter
overlay (parent) itself having 8px gap from viewport.
**After**:
<img width="605" height="535" alt="Screenshot from 2025-10-18 01-34-51"
src="https://github.com/user-attachments/assets/215efd5c-541f-441a-8b0d-1eb1f6fce672 "
/>
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6120-style-ensure-all-floating-menus-have-same-gap-from-screen-edges-2906d73d365081598ae4d16f2380baf8 )
by [Unito](https://www.unito.io )
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-10-18 05:07:06 -07:00
Christian Byrne
10af2300fa
rework minimap, toolbox, and menu designs with unified theming ( #6038 )
...
## Summary
This PR redesigns the graph canvas interface components including
minimap, toolbox, and menu systems with updated spacing, colors, and
interaction patterns - using the design tokens directly from Figma,
which can be used elsewhere going forward.
There are some other changes to the designs, outlined
[here](https://www.notion.so/comfy-org/Update-Minimap-Menu-v2-2886d73d365080e88e12f8df027019c0 ):
- [x] Update/standardize the padding between viewport and toolbox
- [x] Update toolbox component’s style to match the other floating menus
style (border radius, height, padding and follow theme colors)
- [x] Expose the minimap button
- [x] Remove the focus button and delete it’s keybinding
- [x] Group the hand and the default cursor buttons
https://github.com/user-attachments/assets/92542e60-c32d-4a21-a6f6-e72837a70b17
## Review Focus
New CSS variables for cross-component theming consistency and
CanvasModeSelector component extraction for improved code organization.
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-6038-rework-minimap-toolbox-and-menu-designs-with-unified-theming-28b6d73d36508191a0c6cf8036d965c4 )
by [Unito](https://www.unito.io )
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-10-14 14:26:07 -07:00
Alexander Brown
b943c0fa75
Lint: Add tailwind linter ( #5984 )
...
## Summary
Adds the [tailwind lint
plugin](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#eslint-plugin-tailwindcss )
and fixes the currently fixable rules ([v4 is still in
beta](https://github.com/francoismassart/eslint-plugin-tailwindcss/?tab=readme-ov-file#about-tailwind-css-4-support )).
## Changes
- **What**: Enforces things like consistent class order, and eventually
can prohibit extra classes that could be utilities instead
- **Dependencies**: The plugin and its types
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5984-Lint-Add-tailwind-linter-2866d73d365081d89db0d998232533bb )
by [Unito](https://www.unito.io )
---------
Co-authored-by: GitHub Action <action@github.com >
2025-10-08 19:39:14 -07:00
Alexander Brown
99b3a59679
Style: Standardize icon use Part 1 ( #5947 )
...
## Summary
Remove the mix of class based and component style icons in favor of just
[classes](https://iconify.design/docs/usage/css/tailwind/tailwind4/#basic-usage ).
## Changes
- **What**: Migrate existing lucide icons
## Review Focus
What differs between the icons before and now?
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5947-Style-Standardize-icon-use-Part-1-2846d73d365081bfa66ceb6bdaa9ff02 )
by [Unito](https://www.unito.io )
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-10-07 17:53:38 -07:00
Alexander Brown
e7745eb2be
Style: Make components themeable ( #5908 )
...
## Summary
Replace color/dark-color pairs in components with design tokens to allow
for easy overriding.
<!-- Also standardizes the icon pattern to simplify the tailwind config.
-->
## Changes
- **What**: Token based colors, for now, mostly.
- **Breaking**: Got approval from Design to collapse some very similar
pairs of colors that seem to have diverged in implementations over time.
Some of the colors might be a little different, but we can tweak them
later.
## Review Focus
Still have quite a few places from which to remove `dark-theme`, but
this at least gets the theming much closer.
Need to decide if I want to keep going in here or cut this and do the
rest in a subsequent PR.
## Screenshots (if applicable)
<!-- Add screenshots or video recording to help explain your changes -->
┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5908-WIP-Make-components-themeable-2816d73d365081ffbc05d189fe71084b )
by [Unito](https://www.unito.io )
---------
Co-authored-by: github-actions <github-actions@github.com >
2025-10-06 16:27:08 -07:00
Christian Byrne
0854194aa1
[refactor] Refactor rendering-related files to DDD organization ( #5388 )
...
* refactor rendering-related files to DDD organization
* add to git ignore ignore revs
2025-09-06 02:47:37 -07:00
