alex/puppy-tracker
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Give asleep a readable ink as well

Browse Source 
--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.
This commit is contained in:
Alexander Heldt
2026-08-31 22:36:45 +00:00
parent f9becddbc6
commit 0ea9374b46
2 changed files with 12 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+11 -7
View File
@@ -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