91 lines
3.1 KiB
Markdown
91 lines
3.1 KiB
Markdown
|
# 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: `#333333` background
|
||
|
|
|
||
|
|
### 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 |
|