Aero glass goes back to glass

The uniform wash (background-glass) made the rail and the chat chrome nearly
opaque - "why is the sidebar so white and non-translucent... its supposed to
be translucent and blurry!". The rail, the chat header, the welcome card and
the composer now use the same recipe as every other surface in the app
(background-blur under the shared gloss + veil + --glass-bg, exactly what the
deck cards do), and the dedicated wash asset is deleted. Answer bubbles keep a
thin 0.3 veil over the same blurred wallpaper.

Measured: the rail runs 181,229,241 over the sky to 133,174,75 over the grass
(translucent, d166) and the chat/library screens still scan at 0 below-minimum
text-contrast findings in all three themes. The chat suite now pins both the
shared recipe and the translucency, so a future "make it uniform" pass cannot
quietly reintroduce an opaque panel. Phone touch keeps the flat 32% glass.

Version 0.6.3, SW v85.
This commit is contained in:
Martin Dvořák 2026-10-15 09:37:26 +00:00
commit b9d0cd34b9
6 changed files with 58 additions and 34 deletions

View file

@ -320,7 +320,7 @@ try {
bl: style.borderBottomLeftRadius,
br: style.borderBottomRightRadius,
border: style.borderTopWidth,
wash: style.backgroundImage.includes("background-glass"),
wash: style.backgroundImage.includes("background-blur"),
};
};
return {
@ -354,8 +354,43 @@ try {
),
JSON.stringify(chrome),
);
/* Translucency, measured on the pixels: an opaque (or near-opaque) panel
reads nearly the same colour over the bright sky and over the dark
grass; glass follows the scene behind it. */
const railShot = await aero.page.screenshot({ type: "png", scale: "css" });
const railData = `data:image/png;base64,${railShot.toString("base64")}`;
const railTint = await aero.page.evaluate(async ({ dataUrl }) => {
const image = await new Promise((resolve, reject) => {
const img = new Image();
img.onload = () => resolve(img);
img.onerror = reject;
img.src = dataUrl;
});
const canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
const ctx = canvas.getContext("2d");
ctx.drawImage(image, 0, 0);
const strip = (y) => {
const data = ctx.getImageData(30, y, 200, 12).data;
let r = 0, g = 0, b = 0, n = 0;
for (let i = 0; i < data.length; i += 4) {
r += data[i]; g += data[i + 1]; b += data[i + 2]; n += 1;
}
return [Math.round(r / n), Math.round(g / n), Math.round(b / n)];
};
return { upper: strip(440), lower: strip(680) };
}, { dataUrl: railData });
const tintDistance = Math.max(
...[0, 1, 2].map((index) => Math.abs(railTint.upper[index] - railTint.lower[index])),
);
check(
"desktop: the rail and the chat chrome share one even wash",
"desktop: the rail is still translucent (its tint follows the scene)",
tintDistance >= 30,
`${railTint.upper.join(",")} → ${railTint.lower.join(",")} (Δ${tintDistance})`,
);
check(
"desktop: the rail and the chat chrome share the app's glass recipe",
chrome !== null && [chrome.card, chrome.header, chrome.empty, chrome.band].every((panel) => panel.wash),
chrome ? [chrome.card.wash, chrome.header.wash, chrome.empty.wash, chrome.band.wash].join(",") : "missing",
);