A11y/style: Make properties panel use theme colors. Not comprehensive. #7036
Conversation
dosubot
bot
added
the
size:M
📝 WalkthroughWalkthroughConverts hard-coded colors and many Changes
Possibly related PRs
✨ Finishing touches🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (2)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧠 Learnings (2)📓 Common learnings📚 Learning: 2025-11-24T19:47:45.616ZApplied to files:
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
🔇 Additional comments (5)
Comment |
🎭 Playwright Test Results⏰ Completed at: 11/29/2025, 10:02:41 AM UTC 📈 Summary
📊 Test Reports by Browser
🎉 Click on the links above to view detailed test results for each browser configuration. |
🎨 Storybook Build Status✅ Build completed successfully! ⏰ Completed at: 11/29/2025, 09:53:17 AM UTC 🔗 Links🎉 Your Storybook is ready for review! |
Bundle Size ReportSummary
Category Glance Per-category breakdownApp Entry Points — 3.18 MB (baseline 3.18 MB) • ⚪ 0 BMain entry bundles and manifests
Status: 3 added / 3 removed Graph Workspace — 949 kB (baseline 949 kB) • ⚪ 0 BGraph editor runtime, canvas, workflow orchestration
Status: 1 added / 1 removed Views & Navigation — 6.54 kB (baseline 6.54 kB) • ⚪ 0 BTop-level views, pages, and routed surfaces
Status: 1 added / 1 removed Panels & Settings — 298 kB (baseline 298 kB) • ⚪ 0 BConfiguration panels, inspectors, and settings screens
Status: 6 added / 6 removed UI Components — 139 kB (baseline 139 kB) • ⚪ 0 BReusable component library chunks
Status: 5 added / 5 removed Data & Services — 12.5 kB (baseline 12.5 kB) • ⚪ 0 BStores, services, APIs, and repositories
Status: 2 added / 2 removed Utilities & Hooks — 2.94 kB (baseline 2.94 kB) • ⚪ 0 BHelpers, composables, and utility bundles
Status: 1 added / 1 removed Vendor & Third-Party — 8.56 MB (baseline 8.56 MB) • ⚪ 0 BExternal libraries and shared vendor chunks
Other — 3.84 MB (baseline 3.84 MB) • ⚪ 0 BBundles that do not match a named category
Status: 17 added / 17 removed |
|
the images look good, this should resolve my issues. |
DrJKL
added
the
New Browser Test Expectations
|
Updating Playwright Expectations |
github-actions
bot
removed
the
New Browser Test Expectations
DrJKL
added
the
New Browser Test Expectations
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/lib/litegraph/public/css/litegraph.css (1)
413-430: I'll verify the CSS variable definitions to confirm whether--text-foregroundis actually undefined and identify the correct token to use.
<function_calls>
#!/bin/bashFirst, let's find the design-system style.css file
echo "=== Finding design-system style.css ==="
find . -name "style.css" -type f | head -20echo ""
echo "=== Looking for design-system package ==="
find . -type d -name "design-system" | head -10
</function_calls>Let me get the content of the design-system CSS file to check available variables:
<function_calls>
#!/bin/bashCheck the design-system style.css file
if [ -f "packages/design-system/src/css/style.css" ]; then
echo "=== Content of packages/design-system/src/css/style.css ==="
wc -l "packages/design-system/src/css/style.css"
echo ""Show the file with line numbers (limiting to reasonable size)
cat -n "packages/design-system/src/css/style.css" | head -100
else
echo "File not found at packages/design-system/src/css/style.css"
ls -la packages/design-system/src/css/ 2>/dev/null || echo "Directory doesn't exist"
fi
</function_calls>Now let me check the litegraph.css file to see how it uses CSS variables and search for any definitions:
<function_calls>
#!/bin/bashecho "=== Checking litegraph.css file size and content ==="
wc -l "src/lib/litegraph/public/css/litegraph.css"echo ""
echo "=== Lines 410-435 of litegraph.css (context around the issue) ==="
sed -n '410,435p' "src/lib/litegraph/public/css/litegraph.css" | cat -necho ""
echo "=== Searching for --text-foreground definition/usage in litegraph.css ==="
grep -n "--text-foreground" "src/lib/litegraph/public/css/litegraph.css"echo ""
echo "=== Searching for CSS variable definitions in litegraph.css ==="
grep -n "^\s*--" "src/lib/litegraph/public/css/litegraph.css" | head -30
</function_calls>Let me search across the codebase for where
--text-foregroundmight be defined:
<function_calls>
#!/bin/bashecho "=== Searching for --text-foreground definition anywhere ==="
rg "--text-foreground" -n --type cssecho ""
echo "=== Searching for available foreground variables ==="
rg "--.*foreground" -n --type css | head -30echo ""
echo "=== Searching for text color related variables ==="
rg "--text-" -n --type css | head -30
</function_calls>Now let me check what CSS variables are actually defined in the design-system package and see the full style.css:
<function_calls>
#!/bin/bashecho "=== Full content of design-system style.css ==="
cat -n "packages/design-system/src/css/style.css"
</function_calls>Let me also check if there are any root CSS variables or if litegraph.css defines its own tokens:
<function_calls>
#!/bin/bashecho "=== Searching for CSS variable definitions (--) in litegraph.css ==="
rg "^\s*--" "src/lib/litegraph/public/css/litegraph.css" -necho ""
echo "=== Checking for :root or html selector with variables ==="
rg -A 20 "^\s*(:root|html)\s*{" "src/lib/litegraph/public/css/litegraph.css"echo ""
echo "=== Full content of litegraph.css to understand variable context ==="
cat -n "src/lib/litegraph/public/css/litegraph.css"
</function_calls>Now let me check how other parts of the codebase handle text color for buttons and similar elements:
<function_calls>
#!/bin/bashecho "=== Searching for button styles in other CSS files ==="
rg ".btn|button" --type css -A 3 -B 1 | grep -E "(.btn|button|color|--)" | head -40echo ""
echo "=== Searching for --base-foreground usage ==="
rg "--base-foreground" -n --type cssecho ""
echo "=== Searching for color variables defined ==="
rg ":\s*var(--.*color" --type css | head -30
</function_calls>Let me get a comprehensive view of all CSS variables used in the repository:
<function_calls>
#!/bin/bashecho "=== All CSS variable references in entire codebase ==="
rg "var(--[a-zA-Z0-9-]+)" --type css -o -h | sort | uniq | head -50
</function_calls>Let me search for where CSS variables are imported or included in the litegraph context:
<function_calls>
#!/bin/bashecho "=== Check if litegraph.css imports or references design-system CSS ==="
head -50 "src/lib/litegraph/public/css/litegraph.css"echo ""
echo "=== Check for @import statements ==="
rg "@import" "src/lib/litegraph/public/css/litegraph.css"echo ""
echo "=== Look for how litegraph.css is used in the project ==="
rg "litegraph.css" --type html --type js --type ts -B 2 -A 2 | head -40
</function_calls>Now let me check the actual HTML/component files that use litegraph to understand the CSS variable scope:
<function_calls>
#!/bin/bashecho "=== Files that import or reference litegraph ==="
rg "litegraph" --type ts --type js --type vue -l | head -10echo ""
echo "=== Check main entry points or layout files ==="
find . -name "App.vue" -o -name "app.html" -o -name "index.html" -o -name "main.css" 2>/dev/null | head -10
</function_calls>Let me check what the actual design-system variables are:
<function_calls>
#!/bin/bashecho "=== Extract all CSS variable definitions from design-system ==="
rg "^\s*--" "packages/design-system/src/css/style.css" -o | sort | uniqecho ""
echo "=== Look for text or foreground related variables specifically ==="
rg "(text|foreground|color)" "packages/design-system/src/css/style.css" -i | grep "^\s*--"
</function_calls>Let me check if there's a root CSS file that applies these variables globally:
<function_calls>
#!/bin/bashecho "=== Looking for global CSS or root variable definitions ==="
find . -name ".css" -type f | xargs grep -l "^\s:root|^\shtml\s{" | head -10echo ""
echo "=== Check app layout or main CSS files ==="
find src -name "*.css" -type f | head -20echo ""
echo "=== Check if style.css from design-system is imported anywhere ==="
rg "design-system.*style.css|from.*style.css" -B 2 -A 2 | head -40
</function_calls>Let me examine the exact structure and find where CSS variables are actually defined:
<function_calls>
#!/bin/bashecho "=== Get complete design-system style.css file ==="
if [ -f "packages/design-system/src/css/style.css" ]; then
cat "packages/design-system/src/css/style.css"
else
echo "File not found"
ls -R packages/design-system/src/css/ 2>/dev/null || echo "Directory structure not found"
fiecho ""
echo "=== Look for all CSS files in packages/design-system ==="
find packages/design-system -name "*.css" -type f 2>/dev/null
</function_calls>Let me try a different approach - check the repository structure more broadly:
<function_calls>
#!/bin/bashecho "=== Check if packages directory exists ==="
ls -la packages/ 2>/dev/null | head -20echo ""
echo "=== Check for design-system package ==="
if [ -d "packages/design-system" ]; then
find "packages/design-system" -type f -name ".css" -o -name ".ts" -o -name ".js" | head -20
else
echo "packages/design-system not found - searching for design-system anywhere"
find . -type d -name "designsystem" 2>/dev/null
fi
</function_calls>Let me examine the actual litegraph.css file completely and check for variable definitions:
<function_calls>
#!/bin/bashecho "=== Complete litegraph.css file ==="
cat "src/lib/litegraph/public/css/litegraph.css"
</function_calls><function_calls>
#!/bin/bashecho "=== Check repository root structure ==="
ls -la | head -30echo ""
echo "=== Check if packages directory exists and what's in it ==="
ls -la packages/ 2>/dev/null || echo "No packages directory at root"echo ""
echo "=== Check package.json for dependencies ==="
if [ -f "package.json" ]; then
head -50 package.json
else
echo "No package.json at root"
fiecho ""
echo "=== Look for any style or CSS configuration ==="
find . -maxdepth 2 -name ".json" -o -name ".config.*" 2>/dev/null | grep -E "(style|css|config)" | head -10
</function_calls>Based on the shell script outputs, let me now verify whether
--text-foregroundis actually defined somewhere or used in the codebase:
<function_calls>
#!/bin/bashecho "=== Search for --text-foreground definition in entire repo ==="
rg "--text-foreground\s*:" --type cssecho ""
echo "=== Search for any definition or assignment of --text-foreground ==="
rg "--text-foreground" -B 2 -A 2echo ""
echo "=== Look for similar variable patterns in litegraph or globally ==="
rg "color\s*:\s*var(--" --type css -o -h | sort | uniq | head -20
</function_calls>Now let me verify what happens when CSS variables are undefined and check if there are fallback colors or defaults:
<function_calls>
#!/bin/bashecho "=== Check for any CSS variable fallbacks in litegraph.css ==="
rg "var(--.,\s" "src/lib/litegraph/public/css/litegraph.css"echo ""
echo "=== Extract all var() usages with context ==="
rg "var(--[^)]+)" "src/lib/litegraph/public/css/litegraph.css" -o | sort | uniqecho ""
echo "=== Check lines 413-430 with full context ==="
sed -n '410,435p' "src/lib/litegraph/public/css/litegraph.css"
</function_calls>Let me look at what CSS variables are actually available in the frontend styles:
<function_calls>
#!/bin/bashecho "=== Find all CSS files in src/ ==="
find src -name "*.css" -type fecho ""
echo "=== Search for CSS variable definitions in any CSS file ==="
rg "^\s*--[a-zA-Z]+" --type css -o -h | sort | uniq | head -50
</function_calls>Let me check if there's a theme or global styles file that defines these variables:
<function_calls>
#!/bin/bashecho "=== Look for theme or global style definitions ==="
find src -type f ( -name "theme" -o -name "global" -o -name "root" ) 2>/dev/nullecho ""
echo "=== Check for CSS modules or variable exports ==="
rg "export.*--" --type cssecho ""
echo "=== Look for :root selector definitions ==="
rg -A 50 "^\s*:root\s*{" --type css | head -80
</function_calls>Let me get the git history or PR information to understand what changes were made:
<function_calls>
#!/bin/bashecho "=== Check git diff for the litegraph.css file ==="
git diff HEAD -- "src/lib/litegraph/public/css/litegraph.css" 2>/dev/null | head -100echo ""
echo "=== Check git log for recent changes ==="
git log --oneline -10 -- "src/lib/litegraph/public/css/litegraph.css" 2>/dev/nullecho ""
echo "=== Check git status ==="
git status 2>/dev/null | head -20
</function_calls>Let me now run a comprehensive analysis to list all CSS variables defined in the entire codebase:
<function_calls>
#!/bin/bashecho "=== Extract ALL CSS variable definitions (--name: value) ==="
rg "^\s*--[a-zA-Z0-9-]+\s*:" --type css -A 0 -B 0 | sort | uniqecho ""
echo "=== Specifically search for foreground-related variables ==="
rg "(foreground|text.*color|color.text)" --type css -i | grep "^\s--" | head -20
</function_calls>Let me check the Vue/TypeScript files to see if they define CSS variables dynamically:
<function_calls>
#!/bin/bashecho "=== Search for CSS variable definitions in Vue/TS files ==="
rg "setProperty.*--" --type ts --type js --type vueecho ""
echo "=== Look for style definitions in Vue components ==="
rg "<style" --type vue -A 20 | grep -E "(style|--)" | head -30echo ""
echo "=== Check for Tailwind or other CSS framework config ==="
find . -maxdepth 2 -name "tailwind.config." -o -name ".postcssrc."
</function_calls>Let me verify if
--text-foregroundis used anywhere besides the flagged lines:
<function_calls>
#!/bin/bashecho "=== Search for --text-foreground in entire codebase ==="
rg "--text-foreground" -B 2 -A 2echo ""
echo "=== Count occurrences of --text-foreground ==="
rg "--text-foreground" -c --type-list | awk '{s+=$1} END {print "Total occurrences:", s}'echo ""
echo "=== Check what other color variables exist similar to this pattern ==="
rg "--(text|color|foreground)" --type css -o | sort | uniq | head -40
</function_calls>Let me check if there's a CSS root definition somewhere that I might have missed:
<function_calls>
#!/bin/bashecho "=== Find all CSS with potential variable definitions ==="
find . -name "*.css" -type f -exec grep -l "--" {} ;echo ""
echo "=== Show complete content of main CSS files ==="
for file in $(find src -name "*.css" -type f); do
echo "=== FILE: $file ==="
cat "$file"
echo ""
done
</function_calls><function_calls>
#!/bin/bashecho "=== Comprehensive search: list ALL CSS files and their CSS variable content ==="
echo "Total CSS files found:"
find . -name "*.css" -type f | wc -lecho ""
echo "=== Check each CSS file for variable definitions ==="
for file in $(find . -name ".css" -type f); do
varcount=$(grep -c "^\s--" "$file" 2>/dev/null || echo 0)
if [ "$varcount" -gt 0 ]; then
echo "$file: $varcount variables"
grep "^\s*--" "$file" | head -5
echo ""
fi
done
</function_calls>Now let me check the specific question: are these CSS variables supposed to be inherited/cascaded from somewhere?
<function_calls>
#!/bin/bashecho "=== Check how litegraph CSS file is loaded - check HTML/Vue imports ==="
rg "litegraph.css" -B 3 -A 3echo ""
echo "=== Look for component that uses litegraph classes ==="
rg "litegraph" --type vue -l | head -5if [ -n "$(rg 'litegraph' --type vue -l | head -1)" ]; then
echo ""
echo "=== Content of first litegraph Vue component ==="
vue_file=$(rg 'litegraph' --type vue -l | head -1)
cat "$vue_file" | head -100
fi
</function_calls>Let me also check if there's any initialization or setup that provides these CSS variables:
<function_calls>
#!/bin/bashecho "=== Check main.ts or app initialization ==="
find src -name "main.ts" -o -name "main.js" -o -name "app.ts" | xargs cat 2>/dev/null | head -50echo ""
echo "=== Look for any style injection or CSS setup ==="
rg "style|css|theme" --type ts --type js | grep -E "(import|require|setup)" | head -20
</function_calls>Let me take a more direct approach and examine what is currently working in the codebase:
<function_calls>
#!/bin/bashecho "=== Check if the button styles are actually rendered/working currently ==="
echo "Looking for any test files that might show expected behavior:"
find . -type f -name ".test." -o -name ".spec." | xargs grep -l "dialog.*btn|litegraph.*button" 2>/dev/nullecho ""
echo "=== Look at the actual section of litegraph with full context (lines 410-435) ==="
sed -n '410,435p' "src/lib/litegraph/public/css/litegraph.css" | cat -necho ""
echo "=== Check what comes BEFORE line 410 for any :root or variable definitions ==="
head -450 "src/lib/litegraph/public/css/litegraph.css" | tail -100 | cat -n
</function_calls>Let me verify the exact claim: is
--text-foregroundused only in litegraph.css or elsewhere?
<function_calls>
#!/bin/bashecho "=== COMPREHENSIVE CHECK: All usages of --text-foreground in entire repo ==="
rg "--text-foreground"echo ""
echo "=== Check if there are fallback values or alternate definitions ==="
rg "text-foreground|textForeground|text_foreground" -iecho ""
echo "=== Look at the PR/branch to see if this is new code ==="
git log -1 --name-only 2>/dev/null || echo "Not a git repo"
</function_calls>Let me check if there's a base CSS or design tokens file that should define these:
<function_calls>
#!/bin/bashecho "=== Look for any token files or configuration ==="
find . -type f ( -name "token" -o -name "variable" -o -name "theme" ) -name ".css" -o -name ".ts" -o -name "*.js" | grep -E "(token|variable|theme)"echo ""
echo "=== Check if there's documentation about CSS variables ==="
find . -type f ( -name "README*" -o -name "STYLE*" ) | xargs grep -l "variable|token|css" 2>/dev/null | head -5echo ""
echo "=== Final verification: Extract exact lines 413-430 from litegraph.css with line numbers ==="
sed -n '413,430p' "src/lib/litegraph/public/css/litegraph.css" | cat -n | sed 's/^/413+/'
</function_calls>Now let me search for all defined CSS custom properties to create a comprehensive list:
<function_calls>
#!/bin/bashecho "=== FINAL VERIFICATION: All CSS custom properties defined anywhere in the repo ==="
python3 << 'EOF'
import subprocess
import reFind all CSS files
css_files = subprocess.run(['find', '.', '-name', '*.css', '-type', 'f'],
capture_output=True, text=True).stdout.strip().split('\n')defined_vars = set()
used_vars = set()for css_file in css_files:
if not css_file:
continue
try:
with open(css_file, 'r') as f:
content = f.read()# Find defined variables (--name: value) definitions = re.findall(r'^\s*(-[a-zA-Z0-9\-]+)\s*:', content, re.MULTILINE) defined_vars.update(definitions) # Find used variables (var(--name)) usages = re.findall(r'var\((-[a-zA-Z0-9\-]+)', content) used_vars.update(usages) except: passprint("=== DEFINED CSS VARIABLES ===")
for var in sorted(defined_vars):
print(f" {var}")print(f"\n=== USED CSS VARIABLES (total: {len(used_vars)}) ===")
for var in sorted(used_vars):
status = "✓ DEFINED" if var in defined_vars else "✗ UNDEFINED"
print(f" {var} [{status}]")print("\n=== UNDEFINED VARIABLES (used but not defined) ===")
undefined = used_vars - defined_vars
if undefined:
for var in sorted(undefined):
print(f" {var}")
else:
print(" None found - all used variables are defined!")
EOF
</function_calls>Based on my comprehensive verification, let me now formulate the rewritten review comment:
The CSS variable
--text-foregroundused in lines 419, 424, and 429 is undefined and should be replaced with an appropriate token from the design system.Lines 413-430 of
src/lib/litegraph/public/css/litegraph.cssreferencevar(--text-foreground), which is not defined anywhere in the codebase. This will cause CSS to ignore the color property, leaving button text unstyled.Review available text/color tokens and use the correct variable (e.g.,
--base-foreground,--text-primary, or--color-text-primary, depending on the design system's defined tokens)..litegraph .dialog .btn { border: 0; border-radius: 4px; padding: 4px 20px; margin-left: 0px; background-color: var(--secondary-background); - color: var(--text-foreground); + color: var(--base-foreground); } .litegraph .dialog .btn:hover { background-color: var(--secondary-background-hover); - color: var(--text-foreground); + color: var(--base-foreground); } .litegraph .dialog .btn.delete:hover { background-color: var(--color-danger-100); - color: var(--text-foreground); + color: var(--base-foreground); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (6)
browser_tests/tests/nodeSearchBox.spec.ts-snapshots/link-release-context-menu-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-menu-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-node-properties-panel-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-pinned-node-chromium-linux.pngis excluded by!**/*.pngbrowser_tests/tests/rightClickMenu.spec.ts-snapshots/right-click-unpinned-node-chromium-linux.pngis excluded by!**/*.png
📒 Files selected for processing (2)
packages/design-system/src/css/style.css(2 hunks)src/lib/litegraph/public/css/litegraph.css(14 hunks)
🧰 Additional context used
🧠 Learnings (3)
📓 Common learnings
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:14.779Z
Learning: Applies to **/*.{vue,html} : Never use `dark:` or `dark-theme:` Tailwind variants - instead use semantic values from `style.css` theme, e.g. `bg-node-component-surface`
📚 Learning: 2025-11-24T19:47:56.371Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/lib/litegraph/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:56.371Z
Learning: Applies to src/lib/litegraph/**/*.{js,ts,jsx,tsx} : Do not replace `&&=` or `||=` with `=` when there is no reason to do so. If you do find a reason to remove either `&&=` or `||=`, leave a comment explaining why the removal occurred
Applied to files:
src/lib/litegraph/public/css/litegraph.css
📚 Learning: 2025-11-24T19:47:45.616Z
Learnt from: CR
Repo: Comfy-Org/ComfyUI_frontend PR: 0
File: src/components/CLAUDE.md:0-0
Timestamp: 2025-11-24T19:47:45.616Z
Learning: Applies to src/components/**/*.{vue,css} : Use the correct tokens from style.css in the design system package
Applied to files:
packages/design-system/src/css/style.css
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (5)
- GitHub Check: setup
- GitHub Check: setup
- GitHub Check: test
- GitHub Check: collect
- GitHub Check: lint-and-format
🔇 Additional comments (5)
packages/design-system/src/css/style.css (1)
138-504: Theme architecture is well-organized with semantic tokens across light/dark modes.The CSS variable structure supports comprehensive theming:
- Palette colors (charcoal, smoke, ash, etc.) defined once at top level
- Semantic tokens (--base-foreground, --primary-background, etc.) mapped per theme
- Tailwind color aliases in @theme inline for integration
This is a solid foundation for the litegraph migration.
src/lib/litegraph/public/css/litegraph.css (4)
16-30: Context menu and separator styling properly migrated to theme variables.The conversion from hard-coded colors (#2e2e2e, #999, etc.) to semantic CSS variables improves maintainability and enables cohesive theming. All referenced variables (--comfy-menu-bg, --border-default, --palette-interface-panel-hover-surface, --content-hover-fg) are defined in style.css.
Also applies to: 121-148
249-306: Dialog styling successfully uses theme tokens for colors and typography.The changes apply consistent theme variables to dialog backgrounds, text, borders, and font rendering. The font declaration at line 304–305 properly separates font size and font-family for clarity.
358-410: Property panel text and background colors properly migrated to theme variables.The property styling (lines 364, 381–382) now uses semantic tokens (
--muted-foregroundfor labels,--input-textand--component-node-widget-backgroundfor values), enabling consistent theming across light and dark modes.
481-510: Menu and dialog separators converted to use--border-defaultvariable.The danger entry styling (lines 483, 487) and separator backgrounds (lines 504) now reference theme tokens, ensuring UI borders respond to theme changes.
DrJKL
force-pushed
the
drjkl/properties-theme
branch
from
d0122e5 to
91ba29e
Compare
…ontext menu gets the theming now.
DrJKL
force-pushed
the
drjkl/properties-theme
branch
from
91ba29e to
0580ac6
Compare
github-actions
bot
removed
the
New Browser Test Expectations
Summary
Addressing the theme aspect of #6976
Changes
Screenshots (if applicable)
┆Issue is synchronized with this Notion page by Unito