Comfy-Org/ComfyUI_frontend
1
0
Fork 0
mirror of https://github.com/Comfy-Org/ComfyUI_frontend.git synced 2026-04-29 10:42:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

[backport core/1.33] A11y/style: Make properties panel use theme colors. Not comprehensive. (#7243)

Browse Source 
Backport of #7036 to `core/1.33`

Automatically created by backport workflow.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-7243-backport-core-1-33-A11y-style-Make-properties-panel-use-theme-colors-Not-comprehensiv-2c36d73d365081d988c0f360b3a26872)
by [Unito](https://www.unito.io)

Co-authored-by: Alexander Brown <drjkl@comfy.org>
Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Comfy Org PR Bot
2025-12-09 08:27:10 +09:00
committed by GitHub
parent 5b3401b8dd
commit f7278ddbee
8 changed files with 35 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 103 KiB

BIN
browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 107 KiB

BIN
browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

BIN
browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 96 KiB

After

Width:  |  Height:  |  Size: 97 KiB

BIN
browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 108 KiB

After

Width:  |  Height:  |  Size: 108 KiB

BIN
browser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 106 KiB

After

Width:  |  Height:  |  Size: 106 KiB

19
packages/design-system/src/css/style.css
View File

@@ -1190,24 +1190,19 @@ dialog::backdrop {
.litegraph.litecontextmenu, .litegraph.litecontextmenu,
.litegraph.litecontextmenu.dark { .litegraph.litecontextmenu.dark {
z-index: 9999 !important; z-index: 9999 !important;
background-color: var(--comfy-menu-bg) !important; background-color: var(--comfy-menu-bg);
} }
.litegraph.litecontextmenu
.litemenu-entry:hover:not(.disabled):not(.separator) {
background-color: var(--comfy-menu-hover-bg, var(--border-color)) !important;
color: var(--fg-color);
}
.litegraph.litecontextmenu .litemenu-entry.submenu, .litegraph.litecontextmenu .litemenu-entry.submenu,
.litegraph.litecontextmenu.dark .litemenu-entry.submenu { .litegraph.litecontextmenu.dark .litemenu-entry.submenu {
background-color: var(--comfy-menu-bg) !important; background-color: var(--comfy-menu-bg);
color: var(--input-text); color: var(--fg-color);
} }
.litegraph.litecontextmenu input { .litegraph.litecontextmenu input {
background-color: var(--comfy-input-bg) !important; background-color: var(--comfy-input-bg);
color: var(--input-text) !important; color: var(--input-text);
} }
.comfy-context-menu-filter { .comfy-context-menu-filter {
@@ -1248,14 +1243,14 @@ dialog::backdrop {
.litegraph.litesearchbox { .litegraph.litesearchbox {
z-index: 9999 !important; z-index: 9999 !important;
background-color: var(--comfy-menu-bg) !important; background-color: var(--comfy-menu-bg);
overflow: hidden; overflow: hidden;
display: block; display: block;
} }
.litegraph.litesearchbox input, .litegraph.litesearchbox input,
.litegraph.litesearchbox select { .litegraph.litesearchbox select {
background-color: var(--comfy-input-bg) !important; background-color: var(--comfy-input-bg);
color: var(--input-text); color: var(--input-text);
} }

74
src/lib/litegraph/public/css/litegraph.css
View File

@@ -21,8 +21,8 @@
min-width: 100px; min-width: 100px;
color: #aaf; color: #aaf;
padding: 0; padding: 0;
box-shadow: 0 0 10px black !important; box-shadow: 0 0 10px black;
background-color: #2e2e2e !important; background-color: #2e2e2e;
z-index: 10; z-index: 10;
max-height: -webkit-fill-available; max-height: -webkit-fill-available;
overflow-y: auto; overflow-y: auto;
@@ -36,10 +36,6 @@
} }
} }
.litegraph.litecontextmenu.dark {
background-color: #000 !important;
}
.litegraph.litecontextmenu .litemenu-title img { .litegraph.litecontextmenu .litemenu-title img {
margin-top: 2px; margin-top: 2px;
margin-left: 2px; margin-left: 2px;
@@ -51,14 +47,6 @@
padding: 2px; padding: 2px;
} }
.litegraph.litecontextmenu .litemenu-entry.submenu {
background-color: #2e2e2e !important;
}
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
background-color: #000 !important;
}
.litegraph .litemenubar ul { .litegraph .litemenubar ul {
font-family: Tahoma, sans-serif; font-family: Tahoma, sans-serif;
margin: 0; margin: 0;
@@ -132,14 +120,13 @@
.litegraph .litemenu-entry.separator { .litegraph .litemenu-entry.separator {
display: block; display: block;
border-top: 1px solid #333; border-top: 1px solid var(--border-default);
border-bottom: 1px solid #666;
width: 100%; width: 100%;
height: 0px; height: 0px;
margin: 3px 0 2px 0; margin: 3px 0 2px 0;
background-color: transparent; background-color: transparent;
padding: 0 !important; padding: 0;
cursor: default !important; cursor: default;
} }
.litegraph .litemenu-entry.has_submenu { .litegraph .litemenu-entry.has_submenu {
@@ -155,8 +142,8 @@
} }
.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) { .litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
background-color: #444 !important; background-color: var(--palette-interface-panel-hover-surface);
color: #eee; color: var(--content-hover-fg);
transition: all 0.2s; transition: all 0.2s;
} }
@@ -259,7 +246,8 @@
margin-top: -150px; margin-top: -150px;
margin-left: -200px; margin-left: -200px;
background-color: #2a2a2a; color: var(--base-foreground);
background-color: var(--comfy-menu-bg);
min-width: 400px; min-width: 400px;
min-height: 200px; min-height: 200px;
@@ -299,8 +287,7 @@
} }
.litegraph .dialog .dialog-header { .litegraph .dialog .dialog-header {
color: #aaa; border-bottom: 1px solid var(--border-default);
border-bottom: 1px solid #161616;
} }
.litegraph .dialog .dialog-header { .litegraph .dialog .dialog-header {
@@ -310,11 +297,12 @@
height: 50px; height: 50px;
padding: 10px; padding: 10px;
margin: 0; margin: 0;
border-top: 1px solid #1a1a1a; border-top: 1px solid var(--border-default);
} }
.litegraph .dialog .dialog-header .dialog-title { .litegraph .dialog .dialog-header .dialog-title {
font: 20px "Arial"; font: 1rem;
font-family: Inter, Arial, sans-serif;
margin: 4px; margin: 4px;
padding: 4px 10px; padding: 4px 10px;
display: inline-block; display: inline-block;
@@ -326,7 +314,7 @@
width: 100%; width: 100%;
min-height: 100px; min-height: 100px;
display: inline-block; display: inline-block;
color: #aaa; /* color: #aaa; */
/*background-color: black;*/ /*background-color: black;*/
overflow: auto; overflow: auto;
} }
@@ -362,8 +350,7 @@
display: block; display: block;
width: calc(100% - 4px); width: calc(100% - 4px);
height: 1px; height: 1px;
border-top: 1px solid #000; border-top: 1px solid var(--border-default);
border-bottom: 1px solid #333;
margin: 10px 2px; margin: 10px 2px;
padding: 0; padding: 0;
} }
@@ -373,12 +360,8 @@
padding: 4px; padding: 4px;
} }
.litegraph .dialog .property:hover {
background: #545454;
}
.litegraph .dialog .property_name { .litegraph .dialog .property_name {
color: #737373; color: var(--muted-foreground);
display: inline-block; display: inline-block;
text-align: left; text-align: left;
vertical-align: top; vertical-align: top;
@@ -395,8 +378,8 @@
.litegraph .dialog .property_value { .litegraph .dialog .property_value {
display: inline-block; display: inline-block;
text-align: right; text-align: right;
color: #aaa; color: var(--input-text);
background-color: #1a1a1a; background-color: var(--component-node-widget-background);
/*width: calc( 100% - 122px );*/ /*width: calc( 100% - 122px );*/
max-width: calc(100% - 162px); max-width: calc(100% - 162px);
min-width: 200px; min-width: 200px;
@@ -432,18 +415,18 @@
border-radius: 4px; border-radius: 4px;
padding: 4px 20px; padding: 4px 20px;
margin-left: 0px; margin-left: 0px;
background-color: #060606; background-color: var(--secondary-background);
color: #8e8e8e; color: var(--base-foreground);
} }
.litegraph .dialog .btn:hover { .litegraph .dialog .btn:hover {
background-color: #111; background-color: var(--secondary-background-hover);
color: #fff; color: var(--base-foreground);
} }
.litegraph .dialog .btn.delete:hover { .litegraph .dialog .btn.delete:hover {
background-color: #f33; background-color: var(--color-danger-100);
color: black; color: var(--base-foreground);
} }
.litegraph .bullet_icon { .litegraph .bullet_icon {
@@ -497,11 +480,11 @@
.graphmenu-entry.danger, .graphmenu-entry.danger,
.litemenu-entry.danger { .litemenu-entry.danger {
color: var(--error-text) !important; color: var(--error-text);
} }
.litegraph .litemenu-entry.danger:hover:not(.disabled) { .litegraph .litemenu-entry.danger:hover:not(.disabled) {
color: var(--error-text) !important; color: var(--error-text);
opacity: 0.8; opacity: 0.8;
} }
@@ -518,8 +501,7 @@
} }
.graphmenu-entry.separator { .graphmenu-entry.separator {
background-color: #111; background-color: var(--border-default);
border-bottom: 1px solid #666;
height: 1px; height: 1px;
width: calc(100% - 20px); width: calc(100% - 20px);
-moz-width: calc(100% - 20px); -moz-width: calc(100% - 20px);
@@ -551,7 +533,7 @@
min-height: 2em; min-height: 2em;
background-color: #333; background-color: #333;
font-size: 1.2em; font-size: 1.2em;
box-shadow: 0 0 10px black !important; box-shadow: 0 0 10px black;
z-index: 10; z-index: 10;
} }