Paint awake as sunshine, not accent
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.
This commit is contained in:
@@ -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" },
|
||||
|
||||
+14
-5
@@ -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));
|
||||
|
||||
Reference in New Issue
Block a user