From 3baff5f6dcbea66d4afae6a46de8ca8b7999c597 Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Tue, 1 Sep 2026 06:43:23 +0000 Subject: [PATCH] Tone down the awake pill MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reported as too yellow and hard to read, and both were fair. The pill measured 4.71:1, which clears the bar on paper but only just, and the pair it clears it with — dark yellow on light yellow — differ almost only in lightness, so there is no hue separation doing any of the work. The purple it replaced measured worse at 3.46 and still read more easily, which is the tell that the number was not the whole story. Treating 4.71 as sufficient rather than as barely-passing was the mistake. Two changes, one per complaint. The pill's tint drops from 18% to 12%, where asleep keeps 18%: equal percentages of these two hues are not equally strong, and the yellow shouted at a share the blue carries quietly. And --wake-ink goes from #8f6400 to #6f4d00, which the labels in the list and on the big card take along with the pill — they were light by the same reasoning, just against paler grounds that hid it. The pill now measures 7.10 in the light theme and 7.98 in the dark, against the asleep pill's 5.01, and all sixteen text sites the two states cover still clear 4.5:1, worst 5.01. --- src/changelog.json | 1 + src/style.css | 8 +++++--- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/changelog.json b/src/changelog.json index 61cb4cd..5408c65 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -1,4 +1,5 @@ [ + { "date": "2026-09-01", "text": "Toned the awake timer down: the pill in the day bar is a fainter yellow and its text a good deal darker, so “Awake for” is comfortable to read rather than technically legible. The Awake labels elsewhere darkened with it" }, { "date": "2026-08-31", "text": "The asleep timer text is a deeper blue, so “Asleep for” in the day-bar pill and on the big card is properly readable against its own pale blue background instead of the near-invisible blue-on-blue it was — the same treatment the awake gold just got, and it applies to the Asleep labels in the Sleep & wake list too" }, { "date": "2026-08-31", "text": "The awake timer is sunshine too now — both the big “Awake for” card and the pill in the day bar — so the whole app tells asleep and awake apart by night-blue against day-gold rather than by blue against purple" }, { "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" }, diff --git a/src/style.css b/src/style.css index 62a6632..12523e2 100644 --- a/src/style.css +++ b/src/style.css @@ -18,7 +18,7 @@ jobs and failing the second — 2.6:1 on the timer pill it painted. */ --sleep-ink: #4258cc; --wake: #f2b705; - --wake-ink: #8f6400; + --wake-ink: #6f4d00; --note: #6f7a90; --danger: #d64545; --gain: #2e9e5b; @@ -228,8 +228,10 @@ body::before { .bar-clock.standby { visibility: hidden; } .bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep-ink); } /* Dark text on the yellow, the way the pee button already does it: a gold - light enough to read as sunshine is never legible as text on a pale ground. */ -.bar-clock.awake { background: color-mix(in srgb, var(--wake) 18%, var(--surface)); color: var(--wake-ink); } + light enough to read as sunshine is never legible as text on a pale ground. + 12% where asleep takes 18% — equal percentages of these two hues are not + equally strong, and yellow at 18% shouted while the blue did not. */ +.bar-clock.awake { background: color-mix(in srgb, var(--wake) 12%, var(--surface)); color: var(--wake-ink); } .big-clock { text-align: center;