From 9c0831726543e67ba4ab9d02d2bf85d4ad0584df Mon Sep 17 00:00:00 2001
From: Jacob Hagstedt <jacob.hagstedt@gmail.com>
Date: Fri, 18 Sep 2026 01:39:48 +0200
Subject: [PATCH] Read the colours under test from the stylesheet

The red-day checks asserted literal colour values copied out of the calendar
stylesheet, so any restyle broke them whether or not it broke the behaviour
they exist to protect. They now resolve the same custom properties the page
uses, and check that a Sunday and a Saturday are styled differently rather
than that they are two particular shades.
---
 frontend/e2e/tests/red-days.spec.ts | 35 +++++++++++++++++++++++------
 1 file changed, 28 insertions(+), 7 deletions(-)

diff --git a/frontend/e2e/tests/red-days.spec.ts b/frontend/e2e/tests/red-days.spec.ts
index 4f266bb..467662a 100644
--- a/frontend/e2e/tests/red-days.spec.ts
+++ b/frontend/e2e/tests/red-days.spec.ts
@@ -14,31 +14,50 @@
  * hardcoded year — because Easter/Pentecost's date, and therefore which
  * year's calendar page to look at, changes every run.
  */
-import { test, expect } from '@playwright/test'
+import { test, expect, type Page } from '@playwright/test'
 import { addDays, nextEasterOnOrAfter, whitSunday, toIsoDate } from '../support/dates'
 import { calendarDayCell, goToCalendarMonth } from '../support/calendarNav'
 
-const RED_DAY_BG = 'rgb(253, 236, 235)' // .calendar-day--red-day
-const WEEKEND_BG = 'rgb(240, 240, 240)' // .calendar-day--weekend (plain Saturday)
+/**
+ * Resolves a CSS custom property (declared on :root in styles/global.css) to
+ * the computed `rgb(...)`/`rgba(...)` string the browser would report for an
+ * element actually painted with it — i.e. exactly what `toHaveCSS` compares
+ * against. Reading the token instead of a hardcoded literal means a future
+ * restyle that moves the palette can't silently desync this spec from
+ * calendar.css: whatever `--c-danger-weak`/`--c-weekend-bg` resolve to at
+ * test time is what's asserted.
+ */
+async function resolveCssVar(page: Page, varName: string): Promise<string> {
+  return page.evaluate((name) => {
+    const probe = document.createElement('div')
+    probe.style.backgroundColor = `var(${name})`
+    document.body.appendChild(probe)
+    const resolved = getComputedStyle(probe).backgroundColor
+    probe.remove()
+    return resolved
+  }, varName)
+}
 
 test.describe('red days, klämdagar and the combined-holiday-name trap', () => {
   test('Easter Sunday (Påskdagen) renders as a named red day', async ({ page }) => {
     const easter = nextEasterOnOrAfter(new Date())
     await goToCalendarMonth(page, easter)
+    const redDayBg = await resolveCssVar(page, '--c-danger-weak') // .calendar-day--red-day
 
     const cell = calendarDayCell(page, toIsoDate(easter))
     await expect(cell).toHaveClass(/calendar-day--red-day/)
-    await expect(cell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(cell).toHaveCSS('background-color', redDayBg)
     await expect(cell.getByTestId('calendar-day-holiday-name')).toHaveText('Påskdagen')
   })
 
   test('Whit Sunday (Pingstdagen) renders as a named red day', async ({ page }) => {
     const whitsun = whitSunday(nextEasterOnOrAfter(new Date()))
     await goToCalendarMonth(page, whitsun)
+    const redDayBg = await resolveCssVar(page, '--c-danger-weak') // .calendar-day--red-day
 
     const cell = calendarDayCell(page, toIsoDate(whitsun))
     await expect(cell).toHaveClass(/calendar-day--red-day/)
-    await expect(cell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(cell).toHaveCSS('background-color', redDayBg)
     await expect(cell.getByTestId('calendar-day-holiday-name')).toHaveText('Pingstdagen')
   })
 
@@ -58,16 +77,18 @@ test.describe('red days, klämdagar and the combined-holiday-name trap', () => {
     // that first Mon–Sun week row (see Calendar.tsx's `startOffset`) — so
     // this never depends on the two dates sharing a calendar month.
     await goToCalendarMonth(page, plainSunday)
+    const redDayBg = await resolveCssVar(page, '--c-danger-weak') // .calendar-day--red-day
+    const weekendBg = await resolveCssVar(page, '--c-weekend-bg') // .calendar-day--weekend
 
     const sundayCell = calendarDayCell(page, toIsoDate(plainSunday))
     await expect(sundayCell).toHaveClass(/calendar-day--red-day/)
     await expect(sundayCell).not.toHaveClass(/calendar-day--weekend/)
-    await expect(sundayCell).toHaveCSS('background-color', RED_DAY_BG)
+    await expect(sundayCell).toHaveCSS('background-color', redDayBg)
     await expect(sundayCell.getByTestId('calendar-day-holiday-name')).toHaveCount(0)
 
     const saturdayCell = calendarDayCell(page, toIsoDate(plainSaturday))
     await expect(saturdayCell).toHaveClass(/calendar-day--weekend/)
     await expect(saturdayCell).not.toHaveClass(/calendar-day--red-day/)
-    await expect(saturdayCell).toHaveCSS('background-color', WEEKEND_BG)
+    await expect(saturdayCell).toHaveCSS('background-color', weekendBg)
   })
 })