Skip to content

Commit d3aa8df

Browse files
DrJKLgithub-actions
andauthored
A11y/style: Make properties panel use theme colors. Not comprehensive. (#7036)
## Summary Addressing the theme aspect of #6976 ## Changes - **What**: Not comprehensive, but swaps many of the colors in the litegraph panel styles to reference theme tokens. ## Screenshots (if applicable) <img width="730" height="637" alt="image" src="https://github.com/user-attachments/assets/1f8b0c0f-f957-487e-96b5-324ed2a6a717" /> <img width="721" height="719" alt="image" src="https://github.com/user-attachments/assets/37f098a3-39f6-4cae-8bcb-601121d106f5" /> ┆Issue is synchronized with this [Notion page](https://www.notion.so/PR-7036-A11y-style-Make-properties-panel-use-theme-colors-Not-comprehensive-2ba6d73d365081038481c66be68a599a) by [Unito](https://www.unito.io) --------- Co-authored-by: github-actions <[email protected]>
1 parent 2cce0fe commit d3aa8df

File tree

8 files changed

+35
-58
lines changed

8 files changed

+35
-58
lines changed
661 Bytes
Loading
596 Bytes
Loading
35 Bytes
Loading
1.24 KB
Loading
-103 Bytes
Loading
35 Bytes
Loading

packages/design-system/src/css/style.css

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1190,24 +1190,19 @@ dialog::backdrop {
11901190
.litegraph.litecontextmenu,
11911191
.litegraph.litecontextmenu.dark {
11921192
z-index: 9999 !important;
1193-
background-color: var(--comfy-menu-bg) !important;
1193+
background-color: var(--comfy-menu-bg);
11941194
}
11951195

1196-
.litegraph.litecontextmenu
1197-
.litemenu-entry:hover:not(.disabled):not(.separator) {
1198-
background-color: var(--comfy-menu-hover-bg, var(--border-color)) !important;
1199-
color: var(--fg-color);
1200-
}
12011196

12021197
.litegraph.litecontextmenu .litemenu-entry.submenu,
12031198
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
1204-
background-color: var(--comfy-menu-bg) !important;
1205-
color: var(--input-text);
1199+
background-color: var(--comfy-menu-bg);
1200+
color: var(--fg-color);
12061201
}
12071202

12081203
.litegraph.litecontextmenu input {
1209-
background-color: var(--comfy-input-bg) !important;
1210-
color: var(--input-text) !important;
1204+
background-color: var(--comfy-input-bg);
1205+
color: var(--input-text);
12111206
}
12121207

12131208
.comfy-context-menu-filter {
@@ -1248,14 +1243,14 @@ dialog::backdrop {
12481243

12491244
.litegraph.litesearchbox {
12501245
z-index: 9999 !important;
1251-
background-color: var(--comfy-menu-bg) !important;
1246+
background-color: var(--comfy-menu-bg);
12521247
overflow: hidden;
12531248
display: block;
12541249
}
12551250

12561251
.litegraph.litesearchbox input,
12571252
.litegraph.litesearchbox select {
1258-
background-color: var(--comfy-input-bg) !important;
1253+
background-color: var(--comfy-input-bg);
12591254
color: var(--input-text);
12601255
}
12611256

src/lib/litegraph/public/css/litegraph.css

Lines changed: 28 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -21,8 +21,8 @@
2121
min-width: 100px;
2222
color: #aaf;
2323
padding: 0;
24-
box-shadow: 0 0 10px black !important;
25-
background-color: #2e2e2e !important;
24+
box-shadow: 0 0 10px black;
25+
background-color: #2e2e2e;
2626
z-index: 10;
2727
max-height: -webkit-fill-available;
2828
overflow-y: auto;
@@ -36,10 +36,6 @@
3636
}
3737
}
3838

39-
.litegraph.litecontextmenu.dark {
40-
background-color: #000 !important;
41-
}
42-
4339
.litegraph.litecontextmenu .litemenu-title img {
4440
margin-top: 2px;
4541
margin-left: 2px;
@@ -51,14 +47,6 @@
5147
padding: 2px;
5248
}
5349

54-
.litegraph.litecontextmenu .litemenu-entry.submenu {
55-
background-color: #2e2e2e !important;
56-
}
57-
58-
.litegraph.litecontextmenu.dark .litemenu-entry.submenu {
59-
background-color: #000 !important;
60-
}
61-
6250
.litegraph .litemenubar ul {
6351
font-family: Tahoma, sans-serif;
6452
margin: 0;
@@ -132,14 +120,13 @@
132120

133121
.litegraph .litemenu-entry.separator {
134122
display: block;
135-
border-top: 1px solid #333;
136-
border-bottom: 1px solid #666;
123+
border-top: 1px solid var(--border-default);
137124
width: 100%;
138125
height: 0px;
139126
margin: 3px 0 2px 0;
140127
background-color: transparent;
141-
padding: 0 !important;
142-
cursor: default !important;
128+
padding: 0;
129+
cursor: default;
143130
}
144131

145132
.litegraph .litemenu-entry.has_submenu {
@@ -155,8 +142,8 @@
155142
}
156143

157144
.litegraph .litemenu-entry:hover:not(.disabled):not(.separator) {
158-
background-color: #444 !important;
159-
color: #eee;
145+
background-color: var(--palette-interface-panel-hover-surface);
146+
color: var(--content-hover-fg);
160147
transition: all 0.2s;
161148
}
162149

@@ -259,7 +246,8 @@
259246
margin-top: -150px;
260247
margin-left: -200px;
261248

262-
background-color: #2a2a2a;
249+
color: var(--base-foreground);
250+
background-color: var(--comfy-menu-bg);
263251

264252
min-width: 400px;
265253
min-height: 200px;
@@ -299,8 +287,7 @@
299287
}
300288

301289
.litegraph .dialog .dialog-header {
302-
color: #aaa;
303-
border-bottom: 1px solid #161616;
290+
border-bottom: 1px solid var(--border-default);
304291
}
305292

306293
.litegraph .dialog .dialog-header {
@@ -310,11 +297,12 @@
310297
height: 50px;
311298
padding: 10px;
312299
margin: 0;
313-
border-top: 1px solid #1a1a1a;
300+
border-top: 1px solid var(--border-default);
314301
}
315302

316303
.litegraph .dialog .dialog-header .dialog-title {
317-
font: 20px "Arial";
304+
font: 1rem;
305+
font-family: Inter, Arial, sans-serif;
318306
margin: 4px;
319307
padding: 4px 10px;
320308
display: inline-block;
@@ -326,7 +314,7 @@
326314
width: 100%;
327315
min-height: 100px;
328316
display: inline-block;
329-
color: #aaa;
317+
/* color: #aaa; */
330318
/*background-color: black;*/
331319
overflow: auto;
332320
}
@@ -362,8 +350,7 @@
362350
display: block;
363351
width: calc(100% - 4px);
364352
height: 1px;
365-
border-top: 1px solid #000;
366-
border-bottom: 1px solid #333;
353+
border-top: 1px solid var(--border-default);
367354
margin: 10px 2px;
368355
padding: 0;
369356
}
@@ -373,12 +360,8 @@
373360
padding: 4px;
374361
}
375362

376-
.litegraph .dialog .property:hover {
377-
background: #545454;
378-
}
379-
380363
.litegraph .dialog .property_name {
381-
color: #737373;
364+
color: var(--muted-foreground);
382365
display: inline-block;
383366
text-align: left;
384367
vertical-align: top;
@@ -395,8 +378,8 @@
395378
.litegraph .dialog .property_value {
396379
display: inline-block;
397380
text-align: right;
398-
color: #aaa;
399-
background-color: #1a1a1a;
381+
color: var(--input-text);
382+
background-color: var(--component-node-widget-background);
400383
/*width: calc( 100% - 122px );*/
401384
max-width: calc(100% - 162px);
402385
min-width: 200px;
@@ -432,18 +415,18 @@
432415
border-radius: 4px;
433416
padding: 4px 20px;
434417
margin-left: 0px;
435-
background-color: #060606;
436-
color: #8e8e8e;
418+
background-color: var(--secondary-background);
419+
color: var(--base-foreground);
437420
}
438421

439422
.litegraph .dialog .btn:hover {
440-
background-color: #111;
441-
color: #fff;
423+
background-color: var(--secondary-background-hover);
424+
color: var(--base-foreground);
442425
}
443426

444427
.litegraph .dialog .btn.delete:hover {
445-
background-color: #f33;
446-
color: black;
428+
background-color: var(--color-danger-100);
429+
color: var(--base-foreground);
447430
}
448431

449432
.litegraph .bullet_icon {
@@ -497,11 +480,11 @@
497480

498481
.graphmenu-entry.danger,
499482
.litemenu-entry.danger {
500-
color: var(--error-text) !important;
483+
color: var(--error-text);
501484
}
502485

503486
.litegraph .litemenu-entry.danger:hover:not(.disabled) {
504-
color: var(--error-text) !important;
487+
color: var(--error-text);
505488
opacity: 0.8;
506489
}
507490

@@ -518,8 +501,7 @@
518501
}
519502

520503
.graphmenu-entry.separator {
521-
background-color: #111;
522-
border-bottom: 1px solid #666;
504+
background-color: var(--border-default);
523505
height: 1px;
524506
width: calc(100% - 20px);
525507
-moz-width: calc(100% - 20px);
@@ -551,7 +533,7 @@
551533
min-height: 2em;
552534
background-color: #333;
553535
font-size: 1.2em;
554-
box-shadow: 0 0 10px black !important;
536+
box-shadow: 0 0 10px black;
555537
z-index: 10;
556538
}
557539

0 commit comments

Comments
 (0)