Skip to content

fix(web): use neutral Windows app background #6218

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
lefarcen merged 1 commit into from
Jul 29, 2026
+20 −5
Merged

fix(web): use neutral Windows app background #6218

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions apps/web/src/styles/app-wash.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,13 +72,19 @@ body::before {
background: var(--app-wash);
}

/* Windows desktop windows are opaque, so blend the existing neutral surfaces
instead of painting the web-only pastel wash. Keep this scoped to the
native win32 host: browser and macOS surfaces retain their materials. */
html:has(.workspace-shell--desktop[data-host-platform='win32']) {
--app-wash: color-mix(in srgb, var(--bg-panel) 50%, var(--bg-subtle));
}

/* Desktop shell (Electron on macOS with window vibrancy): the REAL desktop
wallpaper blurs through the window, so the painted pastel blobs step aside.
html/body go fully transparent and the wash collapses to a translucent
cream scrim that keeps content readable over arbitrary wallpapers — the
Craft look. The desktop and darwin markers come from the host bridge
(App.tsx data-client-type/data-host-platform). Windows desktop windows are
opaque, so they intentionally keep the normal pastel wash. */
(App.tsx data-client-type/data-host-platform). */
html:has(.workspace-shell--desktop[data-host-platform='darwin']) {
/* Focused window: a firm scrim so content sits on a mostly solid ground.
The unfocused state below thins this back to ~21% (0.34 × 62%), which
Expand Down
15 changes: 12 additions & 3 deletions apps/web/tests/styles/app-wash-platform.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,21 @@ const appWashCss = readFileSync(
);

describe('desktop app wash platform contract', () => {
it('uses a neutral token mix only for Windows desktop hosts', () => {
expect(appWashCss).toMatch(
/html:has\(\.workspace-shell--desktop\[data-host-platform='win32'\]\)\s*{\s*--app-wash:\s*color-mix\(in srgb, var\(--bg-panel\) 50%, var\(--bg-subtle\)\);\s*}/,
);
expect(appWashCss).toContain('radial-gradient(');
});

it('limits window-vibrancy material rules to macOS desktop hosts', () => {
const macDesktopSelector =
":has(.workspace-shell--desktop[data-host-platform='darwin'])";
const vibrancySelectors = appWashCss.match(
/html(?:\.is-window-blurred)?:has\(\.workspace-shell--desktop[^)]*\)(?: body(?:::before)?)?/g,
);
const vibrancySelectors = appWashCss
.match(
/html(?:\.is-window-blurred)?:has\(\.workspace-shell--desktop[^)]*\)(?: body(?:::before)?)?/g,
)
?.filter((selector) => !selector.includes("data-host-platform='win32'"));

expect(vibrancySelectors).not.toBeNull();
expect(vibrancySelectors).not.toHaveLength(0);
Expand Down
Loading