client_v2: stop the alpha slider tiling colour under its border

A `background` shorthand resets background-origin to the padding box, so
the slider's gradient was sized to the padding box but painted out under
its 1px border — and backgrounds repeat, so the strip under the border
showed the far edge of the next tile: a hairline of full-opacity colour
down the transparent end. It surfaced wherever the border doesn't cover
that strip exactly, i.e. Firefox at fractional display scaling.

Anchor every layer to the border box, and keep the colour gradient from
repeating at all.
This commit is contained in:
Donkie committed 2026-08-11 22:35:15 +02:00
1 parent 948c95866d
commit fb723f0af8
2 files changed
+12 -2

No files matched your search

@@ -96,9 +96,11 @@
}
// Transparent-to-opaque gradient over a checkerboard, so the slider previews
// what it controls. Falls back to grey until the row holds a real colour.
// `border-box no-repeat` keeps the gradient from tiling a hairline of full
// colour under the border at the transparent end — see ALPHA_CHECKER.
function alphaTrack(h: string): string {
const rgb = normalizeHex(h)?.slice(0, 6) ?? '9AA0A6';
return `background:linear-gradient(to right,#${rgb}00,#${rgb}FF),${ALPHA_CHECKER}`;
return `background:linear-gradient(to right,#${rgb}00,#${rgb}FF) border-box no-repeat,${ALPHA_CHECKER}`;
}
function addColor() {
list.push('');
+9 -1
View File
@@ -45,9 +45,17 @@ export function withAlpha(h: string, alpha: number): string {
* transparent instead of as a different color. Deliberately theme-independent
* (the usual white/grey of every color picker) and composited over white, which
* also previews how the filament looks against a printed label.
*
* Every layer is anchored to the border box. A `background` shorthand resets
* `background-origin` to the padding box, so on a bordered element the layers
* would be sized to the padding box but painted out under the border — and
* since backgrounds repeat, the strip under the border shows the far edge of
* the next tile. On a colour gradient that is a hairline of full-opacity colour
* down the transparent end, visible wherever the border doesn't perfectly cover
* it (Firefox at fractional display scaling).
*/
export const ALPHA_CHECKER =
'conic-gradient(#cfcfcf 0 25%, #0000 0 50%, #cfcfcf 0 75%, #0000 0) 0 0/6px 6px, #fff';
'conic-gradient(#cfcfcf 0 25%, #0000 0 50%, #cfcfcf 0 75%, #0000 0) 0 0/6px 6px border-box, #fff';
export function hexRgb(h: string): [number, number, number] {
let s = (h || '#888').replace('#', '');