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 <github-actions@github.com>

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

@@ -1190,24 +1190,19 @@ dialog::backdrop {
 .litegraph.litecontextmenu,
 .litegraph.litecontextmenu.dark {
   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.dark .litemenu-entry.submenu {
-  background-color: var(--comfy-menu-bg) !important;
-  color: var(--input-text);
+  background-color: var(--comfy-menu-bg);
+  color: var(--fg-color);
 }
 
 .litegraph.litecontextmenu input {
-  background-color: var(--comfy-input-bg) !important;
-  color: var(--input-text) !important;
+  background-color: var(--comfy-input-bg);
+  color: var(--input-text);
 }
 
 .comfy-context-menu-filter {
@@ -1248,14 +1243,14 @@ dialog::backdrop {
 
 .litegraph.litesearchbox {
   z-index: 9999 !important;
-  background-color: var(--comfy-menu-bg) !important;
+  background-color: var(--comfy-menu-bg);
   overflow: hidden;
   display: block;
 }
 
 .litegraph.litesearchbox input,
 .litegraph.litesearchbox select {
-  background-color: var(--comfy-input-bg) !important;
+  background-color: var(--comfy-input-bg);
   color: var(--input-text);
 }
 

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

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