phantom
4dccf18743
- Added Photopea theme implementation report and design specifications. - Created tool options and settings panels to match Photopea's layout. - Implemented settings persistence to save and load user preferences. - Updated toolbar to include SVG icons and tool options in a single row. - Enhanced tool settings with specific parameters for each tool type. - Added functionality for resetting tool settings to defaults.
3.1 KiB
3.1 KiB
Photopea Theme Design Spec
[S1] Problem
The HCIE-Rust iced GUI needs to match Photopea's visual design language — a professional, dark-themed image editor UI. Analysis of 93 Photopea screenshots reveals specific color tokens, typography, layout patterns, and widget styling that must be replicated.
[S2] Photopea Color Palette (Dark Theme)
Surface Colors (3-tier elevation system)
| Token | Photopea Value | Description |
|---|---|---|
bg_app |
#1e1e1e (30,30,30) |
Main workspace/canvas background |
bg_panel |
#2a2a2a (42,42,42) |
Docked panel backgrounds |
bg_hover |
#3a3a3a (58,58,58) |
Hover state on panels |
bg_active |
#333333 (51,51,51) |
Active tabs, selected items |
bg_recessed |
#1a1a1a (26,26,26) |
Input fields, slider tracks |
Accent & Interactive
| Token | Photopea Value | Description |
|---|---|---|
accent |
#4a9eff (74,158,255) |
Active selections, links, submenu arrows |
accent_green |
#4caf50 (76,175,80) |
Active tool highlight in toolbox |
danger |
#e74c3c (231,76,60) |
"Account" button, warnings |
Menu Dropdown Colors (Light)
| Token | Photopea Value | Description |
|---|---|---|
menu_bg |
#e8e8e8 (232,232,232) |
Menu dropdown background |
menu_hover |
#b3d9ff (179,217,255) |
Menu item hover highlight |
menu_text |
#000000 (0,0,0) |
Menu item text |
menu_shortcut |
#666666 (102,102,102) |
Keyboard shortcut text |
[S3] Typography
- Menu font size: 12px
- Panel font size: 11px
- Font weight: Regular (400) for all text
- Font family: Sans-serif system default
[S4] Layout Structure
Top Menu Bar
- Height: 24px
- Background:
#2a2a2a - Items: File | Edit | Image | Layer | Select | Filter | View | Window | More
- Menu font: 12px
Left Toolbox
- Width: 36px
- Background:
#1e1e1e - Active tool: Green background (#4caf50)
- Tool icons: White/light gray, 20px
Right Panels
- Width: ~260px
- Background:
#2a2a2a - Tab headers:
#333333background
Dropdown Menus
- Background:
#e8e8e8(light gray) - Text:
#000000(black) - Hover:
#b3d9ff(light blue) - Shortcuts: Right-aligned,
#666666
[S5] Implementation Status
| Component | Status |
|---|---|
| ThemeColors | ✅ Updated with Photopea tokens |
| ThemePreset | ✅ Photopea as default |
| Title bar | ✅ Photopea-style 24px bar |
| Dropdown menus | ✅ Light gray with dark text |
| Sidebar | ✅ Green active tool highlight |
| Style functions | ✅ Updated to use new tokens |
| Compilation | ✅ Passes (warnings only) |
[S6] Files Modified
| File | Changes |
|---|---|
iced-panel-adapter/src/theme.rs |
New Photopea preset, new color tokens |
hcie-iced-gui/src/theme.rs |
Updated docs |
hcie-iced-gui/src/panels/title_bar.rs |
24px bar, 12px font, Photopea menus |
hcie-iced-gui/src/panels/menus.rs |
Light dropdown, Photopea menu structure |
hcie-iced-gui/src/sidebar/mod.rs |
Green active tool, 36px width |
hcie-iced-gui/src/panels/styles.rs |
Updated style functions |
hcie-iced-gui/src/app.rs |
Updated dropdown_overlay call |