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:
parent
a8b3dfd0e3
commit
b9d0cd34b9
6 changed files with 58 additions and 34 deletions
|
|
@ -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",
|
||||
);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue