feat(ui): modernize editor UI with monochrome design system#592
feat(ui): modernize editor UI with monochrome design system#592JasonXuDeveloper merged 8 commits intomasterfrom
Conversation
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 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
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 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
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 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
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 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
…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 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
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 <noreply@anthropic.com> Signed-off-by: JasonXuDeveloper - 傑 <jason@xgamedev.net>
There was a problem hiding this comment.
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
Show resolved
Hide resolved
UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Base/JComponent.cs
Show resolved
Hide resolved
UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Button/JButtonGroup.cs
Show resolved
Hide resolved
UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Button/JButtonGroup.cs
Show resolved
Hide resolved
UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Form/JFormField.cs
Show resolved
Hide resolved
UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Form/JFormSection.cs
Show resolved
Hide resolved
UnityProject/Packages/com.jasonxudeveloper.jengine.ui/Editor/Components/Layout/JSection.cs
Show resolved
Hide resolved
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 - 傑 <jason@xgamedev.net>
Unity Test Results✅ EditMode: All tests passed Unity Version: 2022.3.55f1 ✅ All tests passed! The PR is ready for review. View workflow run |
Response to Code Review CommentsLINQ Suggestions (6 comments)We intentionally avoid LINQ (including I've updated XML DocumentationWill 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 - 傑 <jason@xgamedev.net>
There was a problem hiding this comment.
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.
Summary
Changes
Test Plan
🤖 Generated with Claude Code