mirror of
https://github.com/webstudio-is/webstudio.git
synced 2026-11-03 02:27:57 +09:00
Oleg Isonen
1de752f2ae
## Summary - Define the purple treatment as a semantic secondary-accent CSS color family. - Use its foreground in the Layers panel and its background/on-background pair on the canvas. - Add visual regression coverage that shows the actual Navigator and canvas Slot treatments together. - Keep the same purple in light mode and use a more chromatic, readable foreground in dark mode. ## Implementation The dark-theme migration replaced the former reusable-instance color with two unrelated choices: the blue accent foreground in the navigator and an accent-derived purple canvas fill. This change adds three generated, theme-aware semantic colors using Craft's existing naming and explicit foreground pairing conventions: - `--background-accent-secondary` for Slot canvas labels and outlines. - `--foreground-accent-secondary` for reusable instances in the navigator. - `--foreground-on-accent-secondary` for content on the strong secondary-accent background. The secondary accent derives from the theme accent. Its foreground keeps the existing strong purple in light mode and raises dark-mode lightness without washing out its chroma, so reusable instances remain visibly distinct from ordinary Navigator text. Portable light and dark visual stories render the real `NavigatorTree` beside the real canvas `Outline` and `Label` Slot variant. This covers the user-reported cross-surface consistency and the dark-mode foreground directly. ## Todo - [x] Trace the regression to the color-system migration. - [x] Add the secondary-accent semantic CSS family and generated types. - [x] Add foreground/background contrast contracts across supported themes. - [x] Update navigator and canvas consumers. - [x] Add light and dark visual regression coverage for the actual Navigator and canvas treatments. - [x] Confirm the visual comparison fails before approval and inspect the rendered screenshot. - [x] Run Design System and focused Builder tests. - [x] Run Design System and Builder typechecks, scoped lint, and formatting checks. - [x] Review fixture impact; no fixture inputs or generated fixture outputs are affected. - [x] Review documentation impact; update the internal color-system reference. Authoritative user documentation is unaffected. ## Verification - `pnpm --filter @webstudio-is/design-system test` — 223 tests passed. - `pnpm --filter @webstudio-is/builder exec vitest run --project core-browser-builder-features app/builder/features/navigator/navigator-tree.test.ts` — 20 tests passed. - The dark secondary-accent regression test was confirmed to fail with the washed-out foreground, then pass with the stronger chromatic foreground. - `pnpm --filter @webstudio-is/design-system typecheck` — passed, including generated color-type freshness. - `pnpm --filter @webstudio-is/builder typecheck` — passed. - Scoped `oxlint --deny-warnings` — passed. - Scoped `oxfmt --check` — passed. - `pnpm visual-regression -- --base origin/main --grep "Builder/Navigator/Navigator tree"` — expected failure with two added visual stories; both light and dark screenshots were inspected. The source-contract test was confirmed to fail before the semantic variables were added, then pass with the implementation. Browser contrast tests cover both new pairings across light/dark modes and the complete supported theme parameter range. Closes #6295