drwily/Pete
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: make the night phase's text colours survive a dark card

Browse Source 
The adventure purple was unreadable on night, and measuring the family showed
it was not alone: every one of the eleven .text-theme-* colours lands between
1.08:1 (eu, effectively invisible) and 3.12:1 (finance) on night's #2d365a.
They were all picked against a light card and never checked against a dark
one. Same hue, lifted lightness, saturation floored so the dull ones stay a
colour instead of going grey — all now >=5.5:1.

Night only. Dusk and dawn are lit cards despite their names, so they keep
today's values exactly and the light phases are pixel-identical. Lego can't
stay pillar-box red and be legible on navy; a red light enough to pass reads
as salmon, which is the honest trade against a red nobody can see.

Also adds --warn as a phase variable for the new "inert" chip, for the same
reason --ink is one. Tailwind's dark: variant cannot do this job: darkMode is
unconfigured, so dark: follows the OS's prefers-color-scheme, which knows
nothing about which phase Pete is showing. That mismatch left the chip at
2.34:1 on a dark phase under a light OS, and 1.55:1 on a light phase under a
dark OS — half the combinations unreadable, decided by a setting outside the
page. Now 4.52-7.04 across all four phases, OS irrelevant.

Still open, and NOT fixed here: text-[color:var(--ink)]/NN appears not to
compile — there is no such rule in output.css, and the item description
computes to a fixed rgb(74,46,42) that ignores the phase entirely. If that
holds it is a pre-existing site-wide no-op, not confined to these panels.
Recorded rather than guessed at.
This commit is contained in:
prosolis
2026-07-17 07:28:05 -07:00
parent 1425033047
commit 7d2d9910cf
3 changed files with 42 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
internal/web/static/css/input.css
View File

@@ -8,6 +8,15 @@
thanks to the `transition-colors duration-1000` on <body>. thanks to the `transition-colors duration-1000` on <body>.
---------------------------------------------------------------------------- */ ---------------------------------------------------------------------------- */
/* --warn is the "you should look at this" amber, and it is a phase variable for
the same reason --ink is: the phase decides how dark the card underneath is.
Tailwind's dark: variant cannot do this job here — darkMode is unconfigured,
so dark: follows the OS's prefers-color-scheme, which has nothing to do with
which phase Pete is showing. A dark phase under a light OS renders amber-700
on the night card at 2.34:1, and a light phase under a dark OS renders
amber-400 on cream at 1.55:1 — half of the four combinations unreadable, and
which half depends on a setting outside the page. Only night has a dark card;
dusk and dawn are lit despite their names. */
:root, :root,
html[data-phase="day"] { html[data-phase="day"] {
--bg: #fff7e4; /* warm cream */ --bg: #fff7e4; /* warm cream */
@@ -15,6 +24,7 @@ html[data-phase="day"] {
--card: #ffffff; --card: #ffffff;
--ink: #3a2e1f; --ink: #3a2e1f;
--accent: #f2a541; /* sunshine yellow */ --accent: #f2a541; /* sunshine yellow */
--warn: #b45309;
} }
html[data-phase="dawn"] { html[data-phase="dawn"] {
@@ -23,6 +33,7 @@ html[data-phase="dawn"] {
--card: #fff4ea; --card: #fff4ea;
--ink: #4a2e2a; --ink: #4a2e2a;
--accent: #ff8a65; --accent: #ff8a65;
--warn: #b45309;
} }
html[data-phase="dusk"] { html[data-phase="dusk"] {
@@ -31,6 +42,7 @@ html[data-phase="dusk"] {
--card: #fff1de; --card: #fff1de;
--ink: #3d2417; --ink: #3d2417;
--accent: #e6553a; --accent: #e6553a;
--warn: #b45309;
} }
html[data-phase="night"] { html[data-phase="night"] {
@@ -39,6 +51,7 @@ html[data-phase="night"] {
--card: #2d365a; --card: #2d365a;
--ink: #f1ecd8; /* moonlight */ --ink: #f1ecd8; /* moonlight */
--accent: #f9d976; /* lantern */ --accent: #f9d976; /* lantern */
--warn: #fbbf24; /* the only dark card, so the only light amber */
} }
@layer base { @layer base {
@@ -93,6 +106,33 @@ html[data-phase="night"] {
.text-theme-lego { color: #b00d0e; } .text-theme-lego { color: #b00d0e; }
.text-theme-adventure { color: #5836b8; } .text-theme-adventure { color: #5836b8; }
/* Night repaint. The colours above are all tuned to sit on a light card, and
nobody checked them against a dark one when the phases were built: on
night's #2d365a every single one lands between 1.08:1 (eu) and 3.12:1
(finance), i.e. the whole family is below AA and eu is very nearly
invisible. Same hue, lifted lightness, saturation floored at 0.62 so the
dulled ones stay a colour instead of going grey — all now ≥5.5:1.
Only night gets this. Dusk and dawn are lit cards despite the names, so
they keep the originals exactly. Lego cannot stay pillar-box red and be
readable on navy — a red light enough to pass reads as salmon, and that is
the honest trade rather than a red nobody can see.
Deliberately NOT Tailwind's dark: variant: darkMode is unconfigured, so
dark: follows the OS's prefers-color-scheme, which knows nothing about
which phase Pete is showing. Keyed off the phase, like --ink is. */
html[data-phase="night"] .text-theme-gaming { color: #30cb7b; }
html[data-phase="night"] .text-theme-tech { color: #7fb8e1; }
html[data-phase="night"] .text-theme-politics { color: #e5a191; }
html[data-phase="night"] .text-theme-eu { color: #8bb1ff; }
html[data-phase="night"] .text-theme-music { color: #caa2e9; }
html[data-phase="night"] .text-theme-anime { color: #e89cb6; }
html[data-phase="night"] .text-theme-foss { color: #f69d5d; }
html[data-phase="night"] .text-theme-kids { color: #19c7ba; }
html[data-phase="night"] .text-theme-finance { color: #07cb8e; }
html[data-phase="night"] .text-theme-lego { color: #f79898; }
html[data-phase="night"] .text-theme-adventure { color: #baa9eb; }
.decoration-theme-gaming { text-decoration-color: #4caf7d; } .decoration-theme-gaming { text-decoration-color: #4caf7d; }
.decoration-theme-tech { text-decoration-color: #5aa9e6; } .decoration-theme-tech { text-decoration-color: #5aa9e6; }
.decoration-theme-politics { text-decoration-color: #e07a5f; } .decoration-theme-politics { text-decoration-color: #e07a5f; }

2
internal/web/static/css/output.css
View File

File diff suppressed because one or more lines are too long

2
internal/web/templates/who.html
View File

@@ -15,7 +15,7 @@
<div class="flex flex-wrap gap-1.5 mt-1"> <div class="flex flex-wrap gap-1.5 mt-1">
{{if .Slot}}<span class="text-[11px] rounded-full bg-[color:var(--ink)]/5 px-2 py-0.5 text-[color:var(--ink)]/60">{{.Slot}}</span>{{end}} {{if .Slot}}<span class="text-[11px] rounded-full bg-[color:var(--ink)]/5 px-2 py-0.5 text-[color:var(--ink)]/60">{{.Slot}}</span>{{end}}
{{if .SkillSource}}<span class="text-[11px] rounded-full bg-[color:var(--ink)]/5 px-2 py-0.5 text-[color:var(--ink)]/60">{{.SkillSource}}</span>{{end}} {{if .SkillSource}}<span class="text-[11px] rounded-full bg-[color:var(--ink)]/5 px-2 py-0.5 text-[color:var(--ink)]/60">{{.SkillSource}}</span>{{end}}
{{if .Attunement}}{{if .Attuned}}<span class="text-[11px] rounded-full bg-theme-adventure/15 px-2 py-0.5 text-theme-adventure font-semibold">bonded</span>{{else if .Worn}}<span class="text-[11px] rounded-full bg-amber-400/20 px-2 py-0.5 text-amber-700 dark:text-amber-400 font-semibold">inert · no bond free</span>{{else}}<span class="text-[11px] rounded-full bg-[color:var(--ink)]/10 px-2 py-0.5 text-[color:var(--ink)]/60">needs a bond</span>{{end}}{{end}} {{if .Attunement}}{{if .Attuned}}<span class="text-[11px] rounded-full bg-theme-adventure/20 px-2 py-0.5 text-theme-adventure font-semibold">bonded</span>{{else if .Worn}}<span class="text-[11px] rounded-full bg-amber-400/20 px-2 py-0.5 text-[color:var(--warn)] font-semibold">inert · no bond free</span>{{else}}<span class="text-[11px] rounded-full bg-[color:var(--ink)]/10 px-2 py-0.5 text-[color:var(--ink)]/60">needs a bond</span>{{end}}{{end}}
</div> </div>
{{end}} {{end}}
{{if .Desc}}<p class="text-xs text-[color:var(--ink)]/55 mt-1 leading-snug">{{.Desc}}</p>{{end}} {{if .Desc}}<p class="text-xs text-[color:var(--ink)]/55 mt-1 leading-snug">{{.Desc}}</p>{{end}}