38 lines
7.3 KiB
Markdown
38 lines
7.3 KiB
Markdown
# Tasks
|
||
|
||
- [x] Add generated mecha and magical-girl SVG accessory variables to theme tokens.
|
||
- [x] Apply accessory variables to shared framed surfaces and active sidebar states.
|
||
- [x] Extend theme token tests for accessory variables.
|
||
- [x] Run tests, structure check, OpenSpec validation, and browser walkthrough.
|
||
- [x] Recalibrate uploaded-background glass so configured artwork remains recognizable.
|
||
- [x] Enlarge and strengthen magical-girl frame accessories across shared surfaces.
|
||
- [x] Repeat browser walkthrough and all repository validation after the correction.
|
||
- [x] Reduce magical-girl accessories to compact single-motif edge badges.
|
||
- [x] Rotate distinct heart, wand, moon, ribbon, crystal, and circle assets across repeated items.
|
||
- [x] Verify uploaded backgrounds remain unobscured after the decoration-density correction.
|
||
- [x] Clear stale palette variables and synchronize shell chrome after live theme switches.
|
||
- [x] Suppress nested state-view frames when a shared parent already owns the decoration.
|
||
- [x] Re-run browser theme switching and repository validation for the isolation fix.
|
||
|
||
## Evidence
|
||
|
||
- `npm test`: 11 files passed, 49 tests passed.
|
||
- `npm run typecheck`: passed.
|
||
- `npm run build`: passed.
|
||
- `scripts/check-structure.sh`: passed.
|
||
- `openspec validate polish-theme-frame-accessories --strict`: passed.
|
||
- Browser walkthrough: entered local fallback workbench, verified mecha active navigation uses generated spacecraft/radar accessories, then switched through Profile Settings to magical-girl / 粉月魔法阵 and verified shared panels render heart/star/wand/magic-circle accessories.
|
||
- Follow-up browser walkthrough after visual feedback: reduced magical-girl accessory size to `70px 42px, 78px 54px`, lowered opacity to `0.44`, moved frame accessories under content (`::after z-index: 0`, content z-index above), and confirmed the custom-background overlay token is `transparent`.
|
||
- Second follow-up after screenshot feedback: converted the SVG accessories to small line-art edge accents, locked token accessory sizes to max `48px`, reduced custom-background surface blur to `4px`, removed theme color tint from uploaded-background panel material, lowered custom-background ambient particles to `0.08`, and verified a headless Chrome screenshot at `.tmp/theme-visual-check/profile-custom-background.png` with `data-custom-background="true"`, `--custom-background-overlay: transparent`, and profile panels using `blur(4px) saturate(1.02)`.
|
||
- Final color audit after palette feedback: rebalanced uploaded-background mode so the page uses `--custom-background-overlay: transparent`, keeps controls on readable dark glass, and removes large-panel blur in favor of low-opacity ink glass; verified fresh headless screenshots at `.tmp/theme-color-audit/mecha-uploaded.png` and `.tmp/theme-color-audit/magical-uploaded.png` where uploaded artwork remains visible behind the profile/settings panels.
|
||
- Custom-background readability pass after latest screenshots: removed the visible theme-color mask from uploaded backgrounds while dimming the wallpaper layer itself, increased content-panel opacity/blur only on foreground surfaces, added dark glass treatment for server toolbars and state/error panels, and added a compact title backplate so bright uploads do not wash out page headers; verified screenshots at `.tmp/custom-background-audit/servers.png` and `.tmp/custom-background-audit/profile-settings.png` with `data-custom-background="true"`, `filter: saturate(0.72) contrast(0.88) brightness(0.82)`, and panel backdrop `blur(16px) saturate(0.78)`.
|
||
- Magical-girl correction after latest feedback: restored visible pink moonlight panel material and frame accessories under custom uploaded backgrounds, prevented the generic custom-background opacity rule from suppressing magical-girl decorations, and moved magical-girl frame accessories outside the panel border with larger edge-overhanging assets; verified screenshots at `.tmp/magical-custom-background-check.png` and `.tmp/magical-preset-border-check.png`.
|
||
- Final uploaded-background correction: replaced opaque maroon surfaces with low-opacity neutral-pink crystal glass, restored the uploaded artwork to `saturate(0.92) contrast(0.96) brightness(0.94)`, removed backdrop blur from large magical-girl custom-background panels, added real `::after` accessory layers for server toolbars and state views, and strengthened generated heart/star/wand/magic-circle SVGs so they cross the border at `132-154px` with `0.80-0.84` opacity. Browser walkthrough at `1440x1000` confirmed the configured anime artwork remains recognizable, accessories are immediately visible outside the frame, and the browser console has no errors; evidence saved at `.tmp/magical-custom-background-final.png`.
|
||
- Final verification: `npm --prefix platform_web test` passed 11 files and 49 tests; `npm --prefix platform_web run typecheck`, `npm --prefix platform_web run build`, and `scripts/check-structure.sh` passed; `openspec validate polish-theme-frame-accessories --strict` reported the change valid with exit code `0` (telemetry flush warnings only).
|
||
- Decoration-density correction after item-level feedback: replaced the two oversized magical illustrations on each surface with one `68px × 44px` edge-overhanging badge, generated six distinct inline SVG motifs (heart wings, star wand, crescent moon, ribbon, crystal, and magic circle), and rotate them through repeated cards with shared CSS variables and `:nth-child()` rules. In-app browser verification on `#/profile` with `data-theme-palette="magical-girl"` and `data-custom-background="true"` confirmed the three metric items resolve to `heart`, `wand`, and `moon`, lower settings panels resolve to different motifs, the configured background remains fully recognizable, and browser console errors are empty.
|
||
- Decoration-density verification: `npm --prefix platform_web test` passed 11 files and 49 tests; `npm --prefix platform_web run typecheck`, `npm --prefix platform_web run build`, `scripts/check-structure.sh`, and `openspec validate polish-theme-frame-accessories --strict` passed (OpenSpec telemetry flush warnings only).
|
||
- Theme-isolation correction: `applyThemePalette` now removes the union of prior palette variables before applying the selected palette and publishes a live palette-change event so AppShell updates its subtitle and swatch strip without a remount.
|
||
- Single-frame correction: nested `.state-view` elements inside shared framed surfaces now resolve to transparent, borderless, shadowless content with both pseudo-elements disabled, while the parent surface keeps the active theme accessory.
|
||
- Browser walkthrough with an uploaded custom background: switched `magical-girl` to `mecha-black` and confirmed `data-theme-palette="mecha-black"`, sidebar subtitle `黑色机甲 / OPS`, cyan `--accent: #48e6ff`, and no remaining inline `--frame-accessory-heart`; switched back to magical-girl and confirmed only parent panel accessories render; restored mecha as the final state. Two nested home-page state views resolved to `border: 0px`, transparent backgrounds, and `::after content: none`; browser warnings/errors were empty.
|
||
- Isolation verification: `npm --prefix platform_web test` passed 12 files and 51 tests; `npm --prefix platform_web run typecheck`, `npm --prefix platform_web run build`, and `scripts/check-structure.sh` passed; strict OpenSpec validation reported the change valid (telemetry flush warnings only).
|