feat(ui): modernize editor UI with monochrome design system #592

JasonXuDeveloper · 2026-01-28T11:58:50Z

Summary

Introduces a modern, shadcn-inspired design system for JEngine Editor UI
Implements true color inversion between light and dark themes (dark Primary = light Secondary)
Eliminates closure allocations in event callbacks using C#9 static lambdas
Creates comprehensive UI component library (buttons, forms, layouts, feedback)

Changes

Theming: Dark theme is now a true grayscale inversion of light theme
Components: Added JButton, JToggle, JCard, JSection, JFormField, JLogView, JStatusBar, etc.
Performance: Replaced lambda closures with static callbacks to reduce GC pressure
Consistency: Unified visual language across Bootstrap Editor and Panel UI

Test Plan

Verify light theme appearance unchanged
Verify dark theme shows proper color inversion
Test all form components (buttons, toggles, dropdowns)
Check text contrast meets accessibility requirements

🤖 Generated with Claude Code

Major UI overhaul implementing shadcn-inspired design with glassmorphic elements in dark mode and clean monochromatic styling in light mode. ## New UI Package (com.jasonxudeveloper.jengine.ui) ### Components - **Button**: JButton, JToggleButton, JButtonGroup with 5 variants - **Form**: JFormField, JTextField, JDropdown, JToggle, JObjectField - **Layout**: JCard, JSection, JStack, JRow for composition - **Feedback**: JStatusBar, JLogView, JProgressBar - **Navigation**: JBreadcrumb with clean hierarchical display ### Theme System - Design tokens (Tokens.cs) with dark/light theme support - Glassmorphic palette for dark mode (translucent layers, vibrant accents) - shadcn-style monochromatic palette for light mode (black/white/grey only) - 8px spacing grid, typography scale, border radius system - Smooth transitions (150-300ms) ### Enhanced Editor UIs - BootstrapEditorUI: Redesigned Bootstrap inspector with modern components - PanelUI: Redesigned Panel window with enhanced scene management ## Core Package Improvements ### Code Deduplication - **EditorUtils.cs**: Extracted 6 shared helper methods from BootstrapEditor and BootstrapEditorUI (GetAvailableAsmdefFiles, GetAvailableHotScenes, GetAvailableHotClasses, GetAvailableHotMethods, GetAvailableDynamicSecretKeys, GetAvailableAOTDataFiles) - **BuildHelper.cs**: New shared build execution logic with UI callbacks, eliminating ~200 lines of duplication between Panel.cs and PanelUI.cs ### Bug Fixes - Panel.cs: Added null checks in LogMessage to prevent crashes when using enhanced PanelUI - PanelUI: Creates its own BuildManager with proper log routing to JLogView ## Design Decisions ### Light Theme Philosophy - Monochromatic black/white/grey only (no colors except semantic highlights) - Buttons use grey shades (Primary: gray-700, Secondary: gray-300) - Clean, minimal aesthetic inspired by shadcn/ui ### Dark Theme Philosophy - Glassmorphic translucent layers (40-80% opacity) - Vibrant cyan accents (#06B6D4) with subtle glow effects - 5-level glass system (Base → Subtle → Surface → Elevated → Overlay) ### Component Patterns - Fluent API for chaining (.WithText().FullWidth()) - Consistent spacing and sizing across all components - Theme-aware colors (automatically adapt to Unity editor theme) - Proper keyboard navigation with visible focus states Co-Authored-By: Claude Sonnet 4.5 <[email protected]> Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Replace lambda closures with static lambdas and state parameters to avoid heap allocations in RegisterCallback calls. Updated 6 component files: - JBreadcrumb: static methods with state parameters - JCard: instance methods - JStack: static lambda with tuple state - JToggle: static lambdas with state parameters - JObjectField: instance methods + static lambdas with state - JTextField: static lambdas with state parameters This improves performance by eliminating 14 closure allocations across the UI toolkit components using C#9 static lambda support. Co-Authored-By: Claude Sonnet 4.5 <[email protected]> Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Replace vibrant glassmorphic design with clean monochrome palette where dark theme is the grayscale inversion of light theme. Changes: - Remove all vibrant accent colors (cyan, emerald, rose, amber) - Dark theme now uses black/white/greys inverted from light theme - Light theme colors remain unchanged - Remove opacity-based glass layers, use solid greys - Update JToggle to use Primary/Secondary instead of Accent - Simplify comments to reflect new monochrome approach Color mapping (dark theme inverted from light): - BgBase: #0F1419 (near-black) ← #FFFFFF (white) - BgSurface: #374151 (gray-700) ← #E5E7EB (gray-200) - TextPrimary: #FFFFFF (white) ← #111827 (gray-900) - Primary: #D1D5DB (gray-300) ← #374151 (gray-700) - Borders: #4B5563 (gray-600) ← #D1D5DB (gray-300) Co-Authored-By: Claude Sonnet 4.5 <[email protected]> Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Improved dark theme to use truly neutral RGB greys (R=G=B) instead of blue-tinted colors. Fixed three visual issues from user feedback: 1. Primary button color too dark - changed dark theme to use lighter #C8C8C8 grey for better contrast with white text 2. Status bar showing blue - removed colored backgrounds in dark mode, now uses neutral grey like light mode (monochrome design) 3. Log view too black - changed from BgBase (#0A0A0A) to BgSubtle (#1A1A1A) for slightly lighter background Color changes (dark theme only, light theme unchanged): - BgBase: #0F1419 → #0A0A0A (pure neutral black) - BgSubtle: #1F2937 → #1A1A1A (pure neutral dark grey) - BgSurface: #374151 → #2A2A2A (pure neutral grey) - BgElevated: #4B5563 → #3A3A3A (pure neutral medium-dark grey) - BgOverlay: #6B7280 → #4A4A4A (pure neutral medium grey) - Primary: #D1D5DB → #C8C8C8 (lighter for better button contrast) - All text/borders now use neutral greys (#FFFFFF, #D0D0D0, etc.) JStatusBar now uses monochrome design in both themes (no colored backgrounds in dark mode). Co-Authored-By: Claude Sonnet 4.5 <[email protected]> Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

…trast Fixed multiple visual issues in dark theme based on user feedback: 1. Button colors now properly inverted: - Dark Primary (#D0D0D0) = Light Secondary - Dark Secondary (#374151) = Light Primary - True grayscale inversion between themes 2. Input field backgrounds differentiated: - New BgInput color (#353535) lighter than BgSurface in dark mode - Applies to JTextField, JObjectField, and JDropdown - Better visual separation from surrounding surface 3. Toggle styling fixed: - Track colors match Primary/Secondary button colors - Thumb stays white in both themes (no inversion) 4. Separator/divisor visibility improved: - BorderSubtle lightened to #454545 in dark mode - Now visible against darker backgrounds 5. Button text colors use theme tokens: - JButton and JToggleButton use PrimaryText/SecondaryText - No more hardcoded Color.white - Dark Primary buttons now have black text (#111111) 6. Log view lightened: - Uses BgSubtle (#252525) instead of BgBase - More readable background Color mapping (dark theme): - Primary: #D0D0D0 (light grey, black text) - Secondary: #374151 (dark grey, white text) - BgInput: #353535 (for inputs) - BgSubtle: #252525 (for log view) - BorderSubtle: #454545 (for separators) Co-Authored-By: Claude Sonnet 4.5 <[email protected]> Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Fixed Primary button hover and active states to properly invert with light theme's Secondary colors: Dark mode Primary (was wrong): - Hover: #E0E0E0 → #9A9A9A (now matches light's SecondaryHover) - Active: #C0C0C0 → #6A6A6A (now matches light's SecondaryActive) Now the inversion is complete and consistent across all button states. Co-Authored-By: Claude Sonnet 4.5 <[email protected]> Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Copilot

Pull request overview

This pull request introduces a modern, monochrome design system for JEngine Editor UI with a comprehensive component library. The implementation creates a new UI package (com.jasonxudeveloper.jengine.ui) that provides themed UI components adapting to Unity's light/dark themes.

Changes:

Implements a complete design token system with true color inversion between light and dark themes
Adds comprehensive UI component library (JButton, JToggle, JCard, JSection, JFormField, JLogView, JStatusBar, etc.)
Integrates with existing editor windows (Panel, BootstrapEditor) via extensibility handlers
Refactors build operations into reusable BuildHelper class
Moves utility methods to EditorUtils for code reuse

Reviewed changes

Copilot reviewed 78 out of 78 changed files in this pull request and generated 7 comments.

Show a summary per file

File	Description
Tokens.cs	Design token system with monochrome color palette and theme adaptation
JTheme.cs	Theme application utilities and button variant color management
JComponent.cs	Base class for UI components with fluent API
JButton.cs, JToggle.cs, JToggleButton.cs	Button components with variant styling
JFormField.cs, JTextField.cs, JDropdown.cs, JObjectField.cs	Form input components
JCard.cs, JSection.cs, JStack.cs, JRow.cs	Layout components
JStatusBar.cs, JLogView.cs, JProgressBar.cs	Feedback components
JBreadcrumb.cs	Navigation component
StyleSheetManager.cs	USS stylesheet loading and caching
PopupFieldStyleHelper.cs	Async styling for PopupField with retry logic
EnumHelpers.cs	Enum conversion utilities
EditorUIRegistration.cs	Integration point using InitializeOnLoad
PanelUI.cs, BootstrapEditorUI.cs	Enhanced UI implementations
Panel.cs, BootstrapEditor.cs	Modified to support extensibility handlers
BuildHelper.cs	Extracted build operation logic
EditorUtils.cs	Added utility methods for asset/assembly queries

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Theming/Tokens.cs

UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Base/JComponent.cs

UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Button/JButtonGroup.cs

UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Form/JFormField.cs

UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Form/JFormSection.cs

UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Layout/JSection.cs

Replace LINQ Any() with Count > 0 or Length > 0 for better performance as recommended by CodeFactor (CA1860). Also remove duplicate blank line (SA1507). Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

github-actions · 2026-01-28T12:03:08Z

Unity Test Results

✅ EditMode: All tests passed
✅ PlayMode: All tests passed

Unity Version: 2022.3.55f1
Project Path: UnityProject

✅ All tests passed! The PR is ready for review.

View workflow run

Click here to view the full workflow run

JasonXuDeveloper · 2026-01-28T12:05:39Z

Response to Code Review Comments

LINQ Suggestions (6 comments)

We intentionally avoid LINQ (including .Where(), .Any(), .First()) for performance reasons in UI code. LINQ allocates iterators and delegates which causes GC pressure. The inline null check pattern (if (child != null)) is more performant than .Where(c => c != null).

I've updated .github/instructions/code-review.instructions.md to document this pattern so future reviews don't flag it.

XML Documentation

Will add XML documentation to the remaining properties in Tokens.cs nested classes.

- Add XML documentation to Tokens.cs nested class members - Update code review instructions to document LINQ avoidance pattern for performance (use inline null checks instead of .Where()) Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Copilot

Pull request overview

Copilot reviewed 79 out of 79 changed files in this pull request and generated no new comments.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

github-actions

Auto-approved: Copilot review found no issues and Unity Tests passed (or were skipped for non-code changes).

JasonXuDeveloper and others added 6 commits January 28, 2026 22:58

Copilot AI review requested due to automatic review settings January 28, 2026 11:58

github-actions bot added core editor labels Jan 28, 2026

Copilot started reviewing on behalf of JasonXuDeveloper January 28, 2026 11:59 View session

JasonXuDeveloper enabled auto-merge (squash) January 28, 2026 12:00

Copilot AI reviewed Jan 28, 2026

View reviewed changes

style(ui): replace Any() with Count/Length for performance

8608cd6

Replace LINQ Any() with Count > 0 or Length > 0 for better performance as recommended by CodeFactor (CA1860). Also remove duplicate blank line (SA1507). Signed-off-by: JasonXuDeveloper - 傑 <[email protected]>

Copilot AI review requested due to automatic review settings January 28, 2026 12:06

github-actions bot added the documentation Improvements or additions to documentation label Jan 28, 2026

Copilot started reviewing on behalf of JasonXuDeveloper January 28, 2026 12:06 View session

Copilot AI reviewed Jan 28, 2026

View reviewed changes

github-actions bot approved these changes Jan 28, 2026

View reviewed changes

JasonXuDeveloper merged commit 3b89208 into master Jan 28, 2026
26 checks passed

JasonXuDeveloper deleted the feat/ui-modernization-v2 branch January 28, 2026 12:12

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(ui): modernize editor UI with monochrome design system #592

feat(ui): modernize editor UI with monochrome design system #592

Uh oh!

JasonXuDeveloper commented Jan 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 28, 2026 •

edited

Loading

Uh oh!

JasonXuDeveloper commented Jan 28, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

github-actions bot left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

feat(ui): modernize editor UI with monochrome design system #592

feat(ui): modernize editor UI with monochrome design system #592

Uh oh!

Conversation

JasonXuDeveloper commented Jan 28, 2026

Summary

Changes

Test Plan

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Jan 28, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Unity Test Results

Uh oh!

JasonXuDeveloper commented Jan 28, 2026

Response to Code Review Comments

LINQ Suggestions (6 comments)

XML Documentation

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

github-actions bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

github-actions bot commented Jan 28, 2026 •

edited

Loading