CremaUIStudio/lib-theme-prism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Name a foreground for each chart tint

Browse Source 
An avatar filled with a chart colour drew its initials in white, on the
assumption that every tint is dark enough to carry it. Measured, white
clears AA on two of the ten tint-and-mode combinations: a palette is
tuned so series stay distinct from each other, and dark mode lifts every
tint to stay visible against the dark ground, which puts all five out of
reach. The reported 3.4:1 assistant avatar was dark chart-1, at 3.36.

Each tint now names its own foreground, chosen by measurement — worst
chosen pair 5.32:1. Consumers read them with a white fallback, so a theme
that has not defined them renders exactly as it did.
This commit is contained in:
jules
2026-08-09 09:50:34 +08:00
parent c2a414589b
commit 30ef4c71cf
1 changed files with 20 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
theme.css
View File

@@ -88,6 +88,17 @@
--chart-4: oklch(0.72 0.2 350);
--chart-5: oklch(0.5 0.18 150);
/* Text drawn ON a chart tint — a filled avatar, a category pill, a bar
* label. A palette is tuned so the series stay distinguishable from each
* other, which says nothing about whether white sits on them: of these
* five, white clears AA on two. Each tint therefore names its own
* foreground, measured (worst pair 5.32:1). */
--chart-1-foreground: oklch(1 0 0);
--chart-2-foreground: oklch(0.16 0.03 295);
--chart-3-foreground: oklch(0.16 0.03 295);
--chart-4-foreground: oklch(0.16 0.03 295);
--chart-5-foreground: oklch(1 0 0);
--sidebar: oklch(1 0 0 / 0.5);
--sidebar-foreground: oklch(0.16 0.025 285);
--sidebar-primary: oklch(0.55 0.22 295);
@@ -234,6 +245,15 @@
--chart-4: oklch(0.82 0.2 350);
--chart-5: oklch(0.6 0.18 150);
/* Dark lifts every tint to stay visible against the dark ground, which
* puts all five out of reach of white — including chart-1 at 3.36:1,
* the assistant avatar in a chat transcript. */
--chart-1-foreground: oklch(0.16 0.03 295);
--chart-2-foreground: oklch(0.16 0.03 295);
--chart-3-foreground: oklch(0.16 0.03 295);
--chart-4-foreground: oklch(0.16 0.03 295);
--chart-5-foreground: oklch(0.16 0.03 295);
--sidebar: oklch(0.2 0.04 290 / 0.55);
--sidebar-foreground: oklch(0.97 0.005 280);
--sidebar-primary: oklch(0.7 0.2 295);