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:
Alexander Heldt
2026-08-31 22:31:14 +00:00
parent 9d69bac73b
commit a7608829e9
2 changed files with 15 additions and 5 deletions
+14 -5
View File
@@ -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));