feat(look): en akse mere — hvordan det læses, ikke hvor lyst det er

Fire udseender ved siden af de fem temaer: Verdande, Rolig (serif, mere luft),
Tæt (flere rækker, mindre luft) og Terminal (én bredde til det hele). De ganges ud
til tyve udseender fra otte små blokke CSS frem for at kræve en blok hver.

To akser, fordi det er to spørgsmål. Den, der vil have en serif om natten, skal
ikke opgive den mørke palet for at få den — og prøven holder netop det fast: at
vælge en skrift må ikke trække temaet med sig.

Udseendet sættes før første optegning, ligesom temaet. Ellers bliver siden sat op
i én skrift og derefter i en anden, og det er et synligt spring.

Det er også det ærlige svar på at ligne noget andet. Standarden er bevidst
genkendelig — det var det, der blev bedt om — men et program med ét muligt
udseende har lånt en form, det ikke kan give tilbage. Med udseender er ligheden en
indstilling blandt flere frem for det eneste, det kan være.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Kristian Wind
2026-08-19 17:07:39 +02:00
co-authored by Claude Opus 5
parent 1bbae698d5
commit 90bdf4b725
7 changed files with 235 additions and 1 deletions
+37
View File
@@ -2045,3 +2045,40 @@ test('en note kan deles med et projekts folk, og tages tilbage igen', async ({ p
expect(trouble).toEqual([]);
});
test('udseendet kan skiftes uafhængigt af temaet, og overlever en genindlæsning', async ({
page
}) => {
const trouble = watchForTrouble(page);
await page.goto('/indstillinger');
const face = () =>
page.evaluate(() => getComputedStyle(document.body).fontFamily);
const ground = () =>
page.evaluate(() => getComputedStyle(document.body).backgroundColor);
const startFace = await face();
await page.getByRole('button', { name: /^Rolig/ }).click();
const serif = await face();
expect(serif, 'skriften skiftede ikke').not.toBe(startFace);
expect(serif.toLowerCase()).toContain('serif');
// The other axis is untouched: choosing a face must not drag the palette with
// it. That is the whole reason they are two settings and not one list.
const darkGround = await ground();
await page.getByRole('button', { name: /^Papir/ }).click();
expect(await ground(), 'temaet skiftede ikke').not.toBe(darkGround);
expect(await face(), 'temaet ændrede skriften').toBe(serif);
// And it is on before the first paint, not applied afterwards — otherwise the
// page is laid out once in one face and again in another.
await page.reload();
expect(await face()).toBe(serif);
expect(await page.evaluate(() => document.documentElement.dataset.look)).toBe('rolig');
// Back to the default, which carries no attribute at all.
await page.getByRole('button', { name: /^Verdande/ }).click();
expect(await page.evaluate(() => document.documentElement.dataset.look)).toBeUndefined();
expect(trouble).toEqual([]);
});