From 0ea9374b46c7284e5d186dd53347371b66500cfb Mon Sep 17 00:00:00 2001 From: Alexander Heldt Date: Mon, 31 Aug 2026 22:36:45 +0000 Subject: [PATCH] Give asleep a readable ink as well MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --sleep was doing the same two jobs --wake had just been split out of: the pale tint behind a timer and the text on top of it. As text it never worked — 2.57:1 on the day-bar pill, 2.79 on the big card, 2.85 on the list label — and the dark theme was no better off than the light one, at 4.07 on the pill, which I had assumed was fine until I measured it. So --sleep-ink joins --wake-ink, deep blue in the light theme and a lighter one in the dark, and the four places that painted text with --sleep now use it. The tints, stripes, chart bars and borders keep --sleep: nothing about the colour of sleep changes, only the colour of writing about it. All sixteen text sites the two states cover — pill, big clock, list label and open-row label, each state, each theme — now clear 4.5:1, the worst being 4.71. The pedigree's ♂ keeps the raw --sleep. It is the same blue serving an unrelated meaning, and recolouring it here would be a change to the pedigree made for reasons that have nothing to do with it. --- src/changelog.json | 1 + src/style.css | 18 +++++++++++------- 2 files changed, 12 insertions(+), 7 deletions(-) diff --git a/src/changelog.json b/src/changelog.json index 665fc94..61cb4cd 100644 --- a/src/changelog.json +++ b/src/changelog.json @@ -1,4 +1,5 @@ [ + { "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" }, { "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" }, diff --git a/src/style.css b/src/style.css index a7cb4fe..62a6632 100644 --- a/src/style.css +++ b/src/style.css @@ -12,9 +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. */ + /* Asleep and awake each come in two values: the bright one for stripes, + tints and fills, and an -ink for text on those pale grounds. Both inks + flip with the theme; the brights don't. --sleep itself was doing both + jobs and failing the second — 2.6:1 on the timer pill it painted. */ + --sleep-ink: #4258cc; --wake: #f2b705; --wake-ink: #8f6400; --note: #6f7a90; @@ -37,6 +39,7 @@ --muted: #9c9bab; --accent: #a690ff; --accent-soft: #2a2640; + --sleep-ink: #8ba4ff; --wake-ink: #f5c451; --border: #2c2a3a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3); @@ -49,6 +52,7 @@ --muted: #9c9bab; --accent: #a690ff; --accent-soft: #2a2640; + --sleep-ink: #8ba4ff; --wake-ink: #f5c451; --border: #2c2a3a; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.3); @@ -222,7 +226,7 @@ body::before { .bar-clock[hidden] { display: none; } /* Big timer still on screen: keep the pill's slot but show nothing. */ .bar-clock.standby { visibility: hidden; } -.bar-clock.asleep { background: color-mix(in srgb, var(--sleep) 18%, var(--surface)); color: var(--sleep); } +.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); } @@ -252,7 +256,7 @@ body::before { font-variant-numeric: tabular-nums; } .big-clock.asleep { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--sleep) 10%, var(--surface))); } -.big-clock.asleep .bc-time { color: var(--sleep); } +.big-clock.asleep .bc-time { color: var(--sleep-ink); } .big-clock.awake { background: linear-gradient(180deg, var(--surface), color-mix(in srgb, var(--wake) 10%, var(--surface))); } .big-clock.awake .bc-time { color: var(--wake-ink); } @@ -485,7 +489,7 @@ textarea { resize: vertical; } .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(--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.sleep-ww .ww-tag { color: var(--sleep-ink); } .ww.wake-ww .ww-tag { color: var(--wake-ink); } .ww.walk-ww .ww-tag { color: var(--walk); } .ww.ongoing .ww-tag { color: var(--accent); } @@ -493,7 +497,7 @@ textarea { resize: vertical; } border-color: var(--sleep); background: color-mix(in srgb, var(--sleep) 14%, var(--surface)); } -.ww.sleep-ww.ongoing .ww-tag { color: var(--sleep); } +.ww.sleep-ww.ongoing .ww-tag { color: var(--sleep-ink); } /* 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. The tag needs saying too — .ww.wake-ww