From a7608829e9e7cc8982b134bc33550e87c174b461 Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Mon, 31 Aug 2026 22:31:14 +0000 Subject: [PATCH] Paint awake as sunshine, not accent MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Awake rows in the sleep & wake list borrowed --accent, which meant purple did double duty: it was the colour of "awake" and also the colour of "this row is the one still running", so the two readings overlapped on exactly the row where both applied. A warm gold takes the first job. Asleep against awake now reads as night against day, which is the distinction the list exists to draw, and it agrees with the ☀️ the timer pill already shows. Two variables rather than one. --wake is the bright gold, for the stripe and the open row's tint. --wake-ink is that warmth pulled dark, for the small uppercase label, and it is the value that flips with the theme: a yellow legible on white is not legible on near-black, and vice versa. Measured on the four backgrounds it lands on, it clears 4.5:1 in both themes, ordinary rows and the tinted open one alike — better than the purple it replaces, which only ever made the large-text bar. The gold sits near --pee, but the two never share a panel: pee is a dot in the history log and a bar in the counts chart, awake is a stripe in a list of windows. Scoped to the list, as asked. The big timer card and the day-bar pill still paint awake with the accent. --- src/changelog.json | 1 + src/style.css | 19 ++++++++++++++----- 2 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/changelog.json b/src/changelog.json index f072a9f..71269a4 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -1,4 +1,5 @@ [ + { "date": "2026-08-31", "text": "Awake stretches in the Sleep & wake list are sunshine yellow now instead of the app's purple — the same idea as the ☀️ on the timer pill — so asleep and awake read as night and day down the list rather than as two shades of the same accent" }, { "date": "2026-08-31", "text": "The Walks list reads newest first as well, so a walk in progress is the top row and every list in the app now runs the same way" }, { "date": "2026-08-31", "text": "The Walks panel and its two charts have moved down the page, below “Pees, poos & meals”" }, { "date": "2026-08-31", "text": "Sleep windows and Wake windows are one “Sleep & wake” panel now, with the two interleaved into a single list, newest first — awake since 12:30, asleep 11:40–12:30, awake since 09:15, and so on back through the day. A wake window is just the gap between two sleeps, so the two lists were always halves of the same sequence, and reading them together makes “only a 45-minute nap after two and a half hours up” obvious in a way two separate lists never did. Whatever is happening right now is the first row, as in the history and notes logs. Each row says which it is and carries a stripe in its colour; whichever one is still running keeps the highlight" }, diff --git a/src/style.css b/src/style.css index 73b8c3c..48a70db 100644 --- a/src/style.css +++ b/src/style.css @@ -12,6 +12,11 @@ --weight: #2bb3a3; --training: #b04ecf; --walk: #3f9e63; + /* Awake = sunshine. The bright gold is for stripes and fills; --wake-ink is + the same warmth pulled dark enough for a small uppercase label to be + readable, and is the one value that has to flip with the theme. */ + --wake: #f2b705; + --wake-ink: #8f6400; --note: #6f7a90; --danger: #d64545; --gain: #2e9e5b; @@ -32,6 +37,7 @@ --muted: #9c9bab; --accent: #a690ff; --accent-soft: #2a2640; + --wake-ink: #f5c451; --border: #2c2a3a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3); } @@ -43,6 +49,7 @@ --muted: #9c9bab; --accent: #a690ff; --accent-soft: #2a2640; + --wake-ink: #f5c451; --border: #2c2a3a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3); } @@ -474,10 +481,10 @@ textarea { resize: vertical; } /* A stripe in the row's own colour, so an alternating list reads as alternating before you get to the words. */ .ww.sleep-ww { border-left: 3px solid color-mix(in srgb, var(--sleep) 55%, transparent); } -.ww.wake-ww { border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent); } +.ww.wake-ww { border-left: 3px solid color-mix(in srgb, var(--wake) 75%, transparent); } .ww.walk-ww { border-left: 3px solid color-mix(in srgb, var(--walk) 55%, transparent); } .ww.sleep-ww .ww-tag { color: var(--sleep); } -.ww.wake-ww .ww-tag { color: var(--accent); } +.ww.wake-ww .ww-tag { color: var(--wake-ink); } .ww.walk-ww .ww-tag { color: var(--walk); } .ww.ongoing .ww-tag { color: var(--accent); } .ww.sleep-ww.ongoing { @@ -487,11 +494,13 @@ textarea { resize: vertical; } .ww.sleep-ww.ongoing .ww-tag { color: var(--sleep); } /* Spelled out like the other two: the faded stripe above would otherwise win over the generic .ww.ongoing on specificity ties and leave the open awake - row without its full-strength edge. */ + row without its full-strength edge. The tag needs saying too — .ww.wake-ww + .ww-tag ties with .ww.ongoing .ww-tag and loses on order. */ .ww.wake-ww.ongoing { - border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 14%, var(--surface)); + border-color: var(--wake); + background: color-mix(in srgb, var(--wake) 16%, var(--surface)); } +.ww.wake-ww.ongoing .ww-tag { color: var(--wake-ink); } .ww.walk-ww.ongoing { border-color: var(--walk); background: color-mix(in srgb, var(--walk) 14%, var(--surface));