@usableapp/cardds 0.7.95 → 0.7.97

package/css/numbers.css

@@ -45,25 +45,21 @@
 .track {
   --_step: calc(var(--tap-base) * 2 / 3); /* 32 the round of one step */
   --_pad: calc((var(--header-h) - var(--_step)) / 2); /* 14 round + its room = the top bar's height; the end rounds sit concentric in the pill */
-  --_bg: var(--card-3-bg);
-  --_ink: var(--card-3-ink);
-  /* the track lays down its own dark ground, so like the dark card slot it
-     re-points the accent to its own ink (README rule 10). Without this, any
-     palette where --accent equals --card-3-bg — field, hydro, and the
-     wireframe default — paints done steps invisibly on the track. */
-  --accent: var(--_ink);
-  --on-accent: var(--_bg);
+  /* the track lays down the accent fill of where it stands (the brand on a light card, the card's ink on the brand card), so it is a
+     surface of that fill's side; its steps re-point the accent to its ink, as the brand card slot does (docs/reference.md rule 10) */
+  --dark: var(--accent-dark);
   list-style: none;
   margin: 0;
   padding: var(--track-pad, var(--_pad));
   display: flex;
   align-items: center;
   border-radius: var(--track-radius, var(--r-chip));
-  background: var(--_bg);
-  color: var(--_ink);
+  background: var(--accent);
+  color: var(--card-ink);
 }
-.card--3 .track { --_bg: var(--card-3-ink); --_ink: var(--card-3-bg); }
 .track__step {
+  --accent: var(--card-ink);
+  --accent-dark: calc(1 - var(--dark));
   flex: 1;
   display: flex;
   align-items: center;
@@ -75,7 +71,7 @@
   content: "";
   flex: 1;
   height: var(--sp-2);
-  background: var(--ink-rail); /* the track's own ink at 30% — identical to color-mix(in srgb, var(--_ink) 30%, transparent): --ink-rail already reads currentColor, and .track sets color to --_ink */
+  background: var(--ink-rail); /* the track's own ink at 30%: --ink-rail reads currentColor */
 }
 .track__step:first-child::before { display: none; }
 .track__step.is-done::before { background: var(--accent); }
@@ -87,8 +83,9 @@
   padding: calc(var(--_step) * 7 / 32); /* the glyph = 18 in the 32 round */
   border-radius: 50%;
   background: var(--ink-rail);
-  color: var(--_ink);
+  color: var(--card-ink);
 }
+.track__step > .track__dot { background: var(--ink-tint); } /* a number is words: on the 30% rail it fell under 4.5:1 on a mid-dark track; the 12% tint is what every tone holds its ink on */
 .track__step > .track__dot { /* a number in the round (TrackStep num) */
   display: grid; place-items: center; box-sizing: border-box;
   font: var(--track-dot-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
@@ -185,10 +182,11 @@
   font: var(--picker-item-font, var(--type-stat));
   letter-spacing: var(--track-display);
   font-variant-numeric: tabular-nums;
-  opacity: var(--faint);
+  --_rest: var(--picker-rest-ink, var(--card-muted)); /* the values either side: the ground's muted words (they faded to 0.3, 1.8:1) */
+  color: var(--_rest);
   text-align: center;
 }
-.picker__item[aria-selected="true"] { opacity: 1; }
+.picker__item[aria-selected="true"] { color: var(--card-ink); }
 /* centre rules either side of the selected value */
 .picker::before,
 .picker::after {
@@ -204,10 +202,10 @@
 .picker__unit { font: var(--picker-unit-font, var(--type-caption)); color: var(--picker-unit-ink, var(--card-muted)); }
 /* the scrolled-to item lights up by position — no JS */
 @supports (animation-timeline: view(x)) {
-  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); } /* opacity: var(--faint) already set above — the animation alone is new here */
+  .picker__item { animation: picker-focus linear both; animation-timeline: view(x); }
   @keyframes picker-focus {
-    0%, 100% { opacity: var(--faint); }
-    45%, 55% { opacity: 1; }
+    0%, 100% { color: var(--_rest); }
+    45%, 55% { color: var(--card-ink); }
   }
 }
 

package/css/palette.css

@@ -3,156 +3,138 @@
    Apply with <html data-palette="clay"> (or <body>).
    No attribute = wireframe grayscale from tokens.css.
    Each palette overrides role tokens only — components never change.
+   A palette sets its grounds, its two ink sets (onlight, ondark; docs/reference.md "Ink follows its ground") and the side of any ground
+   that is not the default's (tokens.css: tones 1, 2, 4 and the paper light; tone 3, tone 5 and the brand dark). Each ink set
+   holds 4.5:1 on every ground of its side; a tone with words on its 12% tint (a banner, a step bar, today) holds them there too.
    ============================================================ */
 
 /* ---- CLAY — earth-toned: cream surface, terracotta / mustard / ink cards ---- */
 [data-palette="clay"] {
   --surface: #ece5d8;
-  --on-surface: #191713;
-  --on-surface-muted: #6f675a;
+  --ink-onlight: #191713;  --ink-onlight-muted: #2a2723;  /* the terracotta is a middle ground: no muted shade a step lighter holds 4.5:1 on it (4.6) */
+  --ink-ondark: #f4efe4;   --ink-ondark-muted: #aeaaa1;   /* 4.6:1 on tone 5's grey */
 
-  --card-1-bg: #e8b647;  --card-1-ink: #191713;  /* mustard hero */
-  --card-2-bg: #e05c3a;  --card-2-ink: #191713;  /* terracotta */
-  --card-3-bg: #1c1a17;  --card-3-ink: #f4efe4;  /* ink */
+  --card-1-bg: #e8b647;  /* mustard hero */
+  --card-2-bg: #eb6644;  /* terracotta, a step lighter: the ink 5.5:1, 4.5 on its own tint (#e05c3a was 4.9 and 4.1) */
+  --card-3-bg: #1c1a17;  /* ink */
 
-  --card-border: transparent;
-  --card-muted: #45412f;       /* 5.5:1 on the mustard card — AA for captions and metas (#55503f was 4.3:1) */
-  --card-2-muted: var(--card-2-ink); /* terracotta holds 5:1 for its ink alone; nothing lighter passes AA, so tone 2 has no muted */
-
-  --accent: #1c1a17;     --on-accent: #f4efe4;
-  --action-bg: #f7f3e9;  --action-ink: #191713;  --action-border: transparent;
+  --accent: #1c1a17;
+  --action-bg: #f7f3e9;  --action-border: transparent;
 
   --pos: #3e7d4f;  --neg: #c23c1d;
-  --dot-a: #e05c3a;  --dot-b: #6f6be0;
+  --dot-a: #eb6644;  --dot-b: #6f6be0;
+  /* the signals, deep enough for words on the terracotta (4.5:1) and so on every lighter ground; nearly the ink, the hue stays */
+  --signal-ok-onlight: #1b2c18;  --signal-warn-onlight: #2f280d;  --signal-error-onlight: #471a17;  --signal-info-onlight: #1d2938;
 }
 
 /* ---- ROAST — coffee: warm cream surface, caramel accent ---- */
 [data-palette="roast"] {
   --surface: #f6f1e7;
-  --on-surface: #2b211a;
-  --on-surface-muted: #8c7f70;
-
-  --card-1-bg: #ffffff;  --card-1-ink: #2b211a;
-  --card-2-bg: #e9dcc6;  --card-2-ink: #2b211a;
-  --card-3-bg: #b97e3c;  --card-3-ink: #fdf9f1;
+  --ink-onlight: #2b211a;  --ink-onlight-muted: #5e554d;  /* 4.6:1 on the water note, the darkest light ground */
+  --ink-ondark: #fdf9f1;   --ink-ondark-muted: #ecdfcb;   /* 4.6:1 on the caramel */
 
-  --card-border: transparent;
-  --card-muted: #8c7f70;
+  --card-1-bg: #ffffff;
+  --card-2-bg: #e9dcc6;
+  --card-3-bg: #8c5402;  /* caramel, on its own hue as far as the light ink holds 4.5:1 on it and on its tint (#b97e3c held it at 3.3) */
 
-  --accent: #b97e3c;     --on-accent: #fdf9f1;
-  --action-bg: #ffffff;  --action-ink: #2b211a;  --action-border: transparent;
+  --accent: #8c5402;
+  --action-bg: #ffffff;  --action-border: transparent;
 
   --pos: #3e7d4f;  --neg: #bf4028;
-  --dot-a: #b97e3c;  --dot-b: #2b211a;
+  --dot-a: #8c5402;  --dot-b: #2b211a;
 }
 
 /* ---- HYDRO — cool shiny blue: airy surface, saturated blue CTA ---- */
 [data-palette="hydro"] {
   --surface: #e9f0fb;
-  --on-surface: #17203a;
-  --on-surface-muted: #64729a;
+  --ink-onlight: #17203a;  --ink-onlight-muted: #4e566c;  /* 4.6:1 on the water note, the darkest light ground */
+  --ink-ondark: #ffffff;   --ink-ondark-muted: #e0e6f9;   /* 4.6:1 on the blue */
 
-  --card-1-bg: #ffffff;  --card-1-ink: #17203a;
-  --card-2-bg: #cddcf7;  --card-2-ink: #17203a;
-  --card-3-bg: #3d63e0;  --card-3-ink: #f2f6ff;
+  --card-1-bg: #ffffff;
+  --card-2-bg: #cddcf7;
+  --card-3-bg: #365bd7;  /* white 5.7:1, 4.5 on its tint (#3d63e0 was 5.2 and 4.1) */
 
-  --card-border: transparent;
-  --card-muted: #64729a;
-
-  --accent: #3d63e0;     --on-accent: #f2f6ff;
-  --action-bg: #ffffff;  --action-ink: #17203a;  --action-border: transparent;
+  --accent: #365bd7;
+  --action-bg: #ffffff;  --action-border: transparent;
 
   --pos: #2e8f52;  --neg: #d13b1a;
-  --dot-a: #3d63e0;  --dot-b: #eec85a;
+  --dot-a: #365bd7;  --dot-b: #eec85a;
 }
 
-/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand; every
-   tone's ink + muted is a deep shade of ITS OWN ground, so lines (currentColor mixes: --hairline, --outline, field
-   edges) come out as a darker tint of the ground under them — never a grey on a warm card. Four highlights for the
-   atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
+/* ---- ORCHARD — modern earth: calm, real, touchable (Lh 2026-09-25). Linen base, bone paper, moss brand. Four highlights for
+   the atmosphere, off the earth wheel on purpose: maple red · bright yellow · sky · fuchsia. ---- */
 [data-palette="orchard"] {
   --surface: #f4efe6;          /* linen */
-  --on-surface: #2a241c;       /* umber */
-  --on-surface-muted: #6e6353;
-
-  --card-1-bg: #fbf8f2;  --card-1-ink: #2a241c;                          /* bone paper — sheets */
-  --card-2-bg: #e6d8bf;  --card-2-ink: #33291c;                          /* sand */
-  --card-3-bg: #5c6b47;  --card-3-ink: #f6f1e6;  --card-3-muted: #d3d8c4; /* moss — the brand */
-  --card-4-bg: #d3d9c4;  --card-4-ink: #2b3322;  --card-4-muted: #515c42; /* sage mist */
-  --card-5-bg: #dcc2a6;  --card-5-ink: #3a2a1c;  --card-5-muted: #6b503a; /* clay */
+  --ink-onlight: #2a241c;  --ink-onlight-muted: #565148;  /* umber; muted 4.6:1 on the clay tone */
+  --ink-ondark: #f6f1e6;   --ink-ondark-muted: #d7d6c6;   /* linen; muted 4.6:1 on the moss */
 
-  --card-border: transparent;
-  --card-muted: #736754;
-  --card-2-muted: #66573f;
+  --card-1-bg: #fbf8f2;  /* bone paper — sheets */
+  --card-2-bg: #e6d8bf;  /* sand */
+  --card-3-bg: #52613d;  /* moss — the brand: its ink 5.9:1, 4.5 on its tint (#5c6b47 was 5.1 and 4.0) */
+  --card-4-bg: #d3d9c4;  /* sage mist */
+  --card-5-bg: #dcc2a6;  --card-5-dark: 0;  /* clay: a light tone here */
 
-  --accent: #5c6b47;     --on-accent: #f6f1e6;
-  --action-bg: #fbf8f2;  --action-ink: #2a241c;  --action-border: transparent;
+  --accent: #52613d;
+  --action-bg: #fbf8f2;  --action-border: transparent;
 
   /* highlights — decoration and atmosphere, a small dose: counts, marks, chart dots, a badge on a tile */
-  --highlight-1: #d93a1f;  /* maple red */
+  --highlight-1: #d03114;  /* maple red — the linen ink 4.5:1 on it (#d93a1f was 4.1) */
   --highlight-2: #f5c518;  /* bright yellow */
   --highlight-3: #3a9fe0;  /* sky */
-  --highlight-4: #e0457b;  /* fuchsia */
+  --highlight-4: #ca2e69;  /* fuchsia — the linen ink 4.5:1 on it (#e0457b was 3.5) */
   --dot-a: var(--highlight-1);  --dot-b: var(--highlight-3);
 
   /* signals from Sweet Salmon #dd9787 — words and edges, always with an icon */
-  --pos: #6f8f5a;  --neg: #c4694f;
-  --signal-error: #b5503b;  /* salmon, deepened */
-  --signal-warn: #a0721f;   /* ochre */
-  --signal-ok: #4f7f4a;     /* leaf */
-  --signal-info: #4d6f96;   /* slate */
+  --pos: #6f8f5a;  --neg: #ad553b;  /* a falling delta's linen words 4.5:1 (#c4694f was 3.4) */
+  --signal-error-onlight: #82402f;  --signal-warn-onlight: #6b4e1b;  --signal-ok-onlight: #3e5a37;  --signal-info-onlight: #40556c;  /* 4.5:1 on the clay tone */
+  --signal-error-ondark: #f9ccc0;  --signal-warn-ondark: #f2d28b;  --signal-ok-ondark: #cfe6b8;  --signal-info-ondark: #c5d7ef;  /* the same hues, 4.5:1 on the moss */
 }
-/* on the dark moss card the signals turn to their light shades — the same hues, readable on the ground */
-/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a knob) */
-[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, #fff8f0); }
-[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); color: var(--tile-badge-ink, #2a241c); }
-[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 40%, transparent)); }
-/* fields are WHITE boxes on every ground (Lh 2026-09-25) — the words typed in them read dark, even on the moss card */
-[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: #2a241c; }
-[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: #2a241c; }
+/* where the highlights land — written as the component's own rule, its knob still first, so a project's knob wins (a palette never DECLARES a
+   knob). Each fill says its side; the words on it follow */
+[data-palette="orchard"] .badge:not(.badge--soft) { background: var(--badge-bg, var(--highlight-1)); color: var(--badge-ink, var(--ink-ondark)); }
+[data-palette="orchard"] .tile-badge:not(.tile-badge--plain) { background: var(--tile-badge-bg, var(--highlight-2)); --dark: 0; }
+[data-palette="orchard"] .calendar__day--mark { background: var(--calendar-day-mark-bg, color-mix(in srgb, var(--highlight-2) 15%, transparent)); }
+/* fields are WHITE boxes on every ground (Lh 2026-09-25): a light ground, so the words typed in them are onlight, even on the moss card */
+[data-palette="orchard"] .field { background: var(--field-bg, #ffffff); color: var(--ink-onlight); }
+[data-palette="orchard"] .pin__cell { background: var(--pin-cell-bg, #ffffff); color: var(--ink-onlight); }
 /* the vivid ones, tried on the live parts (Lh 2026-09-25): primary = yellow · a user avatar = fuchsia · ring = sky · a switch on = sky · maple only on small dots (the count, dot a); the chosen stack tab stays moss */
-[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, #2a241c); }
-[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); color: var(--avatar-ink, #ffffff); }
+[data-palette="orchard"] .btn--primary { background: var(--btn-primary-bg, var(--highlight-2)); color: var(--btn-primary-ink, var(--ink-onlight)); }
+[data-palette="orchard"] .avatar:not(.avatar--outline, .avatar--add, .avatar--on) { background: var(--avatar-bg, var(--highlight-4)); --dark: 1; }
 [data-palette="orchard"] .ring::before { background: conic-gradient(var(--highlight-3) calc(var(--value) * 1%), var(--ink-tint) 0); }
-[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); }
-[data-palette="orchard"] .toggle:checked::after { background: #ffffff; }
-[data-palette="orchard"] .card--3 { --signal-error: #f4b7a6; --signal-warn: #f1d18a; --signal-ok: #cfe6b8; --signal-info: #bcd0ec; }
+[data-palette="orchard"] .toggle:checked { background: var(--highlight-3); --accent-dark: 0; } /* sky is a light ground: its knob is onlight */
 
 /* ---- VERS — Lh's own-palette pick (2026-09-25): white surface, champagne paper, sage brand; earth tones for tones 2·4·5 ---- */
 [data-palette="vers"] {
   --surface: #ffffff;
-  --on-surface: #1f1b16;
-  --on-surface-muted: #6b6358;
-
-  --card-1-bg: #f6e7cb;  --card-1-ink: #1f1b16;  /* paper — Champagne */
-  --card-2-bg: #e3cfa6;  --card-2-ink: #1f1b16;  /* sand */
-  --card-3-bg: #678d58;  --card-3-ink: #ffffff;  /* brand — Sage */
-  --card-4-bg: #c9d6b0;  --card-4-ink: #1f1b16;  --card-4-muted: #4a5438;  /* lichen */
-  --card-5-bg: #d4bf9c;  --card-5-ink: #1f1b16;  --card-5-muted: #5e4a36;  /* wheat — bark was too dark */
-
-  --card-border: transparent;
-  --card-muted: #6b5f4c;
-  --card-2-muted: #5c4f3a;
-  --card-3-muted: #dfe8d6;
-
-  --accent: #678d58;     --on-accent: #ffffff;
-  --action-bg: #f6e7cb;  --action-ink: #1f1b16;  --action-border: transparent;
-
-  /* signals from Sweet Salmon #dd9787, deepened to read on white/champagne */
-  --pos: #7fa86f;  --neg: #dd9787;
-  --signal-error: #b5503b;  /* salmon */
-  --signal-warn: #a5782a;   /* ochre */
-  --signal-ok: #4f7f4a;     /* leaf */
-  --signal-info: #4d6f96;   /* slate */
+  --ink-onlight: #1f1b16;  --ink-onlight-muted: #534f4c;  /* 4.5:1 on the wheat */
+  --ink-ondark: #ffffff;   --ink-ondark-muted: #dee5dc;   /* 4.6:1 on the sage */
+
+  --card-1-bg: #f6e7cb;  /* paper — Champagne */
+  --card-2-bg: #e3cfa6;  /* sand */
+  --card-3-bg: #496d3a;  /* brand — Sage, on its own hue as far as white holds 4.5:1 on it and on its tint (#678d58 held it at 3.8) */
+  --card-4-bg: #c9d6b0;  /* lichen */
+  --card-5-bg: #d4bf9c;  --card-5-dark: 0;  /* wheat — a light tone here */
+
+  --accent: #496d3a;
+  --action-bg: #f6e7cb;  --action-border: transparent;
+
+  /* signals from Sweet Salmon #dd9787, deepened to read on every light ground (4.5:1 on the wheat) */
+  --pos: #7fa86f;  --neg: #a76557;  /* the salmon deepened as far as a falling delta's white words hold 4.5:1 (#dd9787 was 2.4) */
+  --signal-error-onlight: #803c2d;  --signal-warn-onlight: #654b1e;  --signal-ok-onlight: #3b5734;  --signal-info-onlight: #3c5169;
   --dot-a: #dd9787;  --dot-b: #b08a5a;
 }
 
-/* Colored palettes trade wireframe outlines for soft elevation. */
+/* Colored palettes add a soft elevation under the card's edge. */
 [data-palette] :is(.card, .band-stack) { box-shadow: var(--shadow-card); }
 /* COLOURED MODE is the attribute, whatever its value: a project with colours of its own (the five
    --color-* bases, or roles, in its theme.css) writes <html data-palette="own"> — no block here matches
    "own", so only the three generic rules apply: the card's shadow, the soft outline, the field's soft
-   edge (forms.css); and the two wireframe borders step back, as in every stock palette. */
-[data-palette] { --card-border: transparent; --action-border: transparent; }
+   edge (forms.css); and the controls' wireframe border steps back, as in every stock palette.
+   THE CARD KEEPS AN EDGE (Lh 2026-10-18, timebank's help sheet: white cards on the white sheet, "no different from
+   the background at all"). A card is one boundary, and WCAG 2.2 SC 1.4.11 asks 3:1 for it against what it stands
+   on. Light cards on a light ground cannot reach 3:1 by fill (a tone-1 card in a tone-1 sheet is 1:1), so the
+   edge carries it: the muted ink of the ground, which every palette already holds to AA on its surface.
+   `cardGrounds()` measures each tone on each ground (tests/card-grounds.spec.js). */
+[data-palette] { --card-border: var(--on-surface-muted); --action-border: transparent; }
 /* …but controls keep a faint edge so they still read as controls */
 [data-palette] { --outline: color-mix(in srgb, currentColor 25%, transparent); }

package/css/people.css

@@ -16,7 +16,8 @@
   display: grid;
   place-items: center;
   background: var(--avatar-bg, var(--card-2-bg));
-  color: var(--avatar-ink, var(--card-2-ink));
+  --dark: var(--card-2-dark);
+  color: var(--avatar-ink, var(--card-ink));
   font: var(--avatar-font, var(--type-label));
   font-size: calc(var(--_size) * 0.3);
   text-transform: uppercase;
@@ -30,10 +31,10 @@
 .avatar--lg { --_size: var(--avatar-lg); }
 .avatar--xl { --_size: var(--avatar-xl); } /* sheet head icon ring */
 /* outline avatar: no fill, an edge — icons in a ring, "add" slots */
-.avatar--outline { background: transparent; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
-.avatar--add { background: transparent; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
+.avatar--outline { background: transparent; --dark: inherit; color: inherit; border: var(--border-w) solid var(--avatar-outline-border, var(--outline)); }
+.avatar--add { background: transparent; --dark: inherit; color: inherit; border: var(--border-w) dashed var(--avatar-add-border, var(--outline)); }
 /* accent avatar: the "+7" tail, the selected person */
-.avatar--on { background: var(--avatar-on-bg, var(--accent)); color: var(--avatar-on-ink, var(--on-accent)); }
+.avatar--on { background: var(--avatar-on-bg, var(--accent)); --dark: var(--accent-dark); color: var(--avatar-on-ink, var(--card-ink)); }
 /* halo: faint concentric rings behind a hero avatar (decorative) */
 .avatar--halo::before {
   content: "";

package/css/post.css

@@ -6,7 +6,8 @@
 /* ---- post-paper: the card stock. Its own ground and ink, wherever it lies; its parts read --_muted and --_rule ---- */
 .post-paper {
   background: var(--post-paper-bg, var(--card-1-bg));
-  color: var(--post-paper-ink, var(--card-1-ink));
+  --dark: var(--card-1-dark);
+  color: var(--post-paper-ink, var(--card-ink));
   border-radius: var(--post-paper-radius, var(--sp-2));
   box-shadow: var(--post-paper-shadow, var(--shadow-card));
   --_muted: var(--post-paper-muted-ink, var(--card-muted));

package/css/sheet.css

@@ -205,12 +205,10 @@
    the default spacing), the body's own top padding, and only when the sheet is paper.
    A plain sheet keeps padding-top 0. A sheet in a stack wears the same class and the same
    inset: the stack's own gap under the head is the card's colour, so the row still needs this white.
-   The ink falls back to the wireframe word colour: an unset --color-ink would otherwise
-   inherit a dark card's light ink, and the words would vanish on the white. */
+   The paper is a surface of the plain card's side: on a dark sheet its words still turn to onlight. */
 .sheet--paper > .sheet__body {
   --card-bg: var(--color-paper, #fff);
-  --card-ink: var(--color-ink, #141414);
-  --card-muted: var(--_muted-on-paper, #555555);
+  --dark: var(--card-1-dark);
   background: var(--card-bg);
   color: var(--card-ink);
   padding-top: var(--sp-6);
@@ -391,7 +389,7 @@
   bottom: var(--sp-2);
   padding: var(--sp-0) var(--sp-2);
   border-radius: var(--map-credit-radius, var(--r-chip));
-  background: var(--map-credit-bg, color-mix(in srgb, var(--surface) 80%, transparent));
+  background: var(--map-credit-bg, var(--surface)); /* solid: at 80% over a map the muted words fell under 4.5:1 (clay, 3.9) */
   color: var(--map-credit-ink, var(--on-surface-muted));
   font: var(--map-credit-font, var(--type-caption));
   pointer-events: none;
@@ -407,7 +405,8 @@
   padding: var(--sp-2) var(--sp-4);
   border-radius: var(--map-hint-radius, var(--r-chip));
   background: var(--map-hint-bg, var(--card-3-bg));
-  color: var(--map-hint-ink, var(--card-3-ink));
+  --dark: var(--card-3-dark);
+  color: var(--map-hint-ink, var(--card-ink));
   font: var(--map-hint-font, var(--type-label));
   text-align: center;
   box-shadow: var(--map-hint-shadow, var(--shadow-float));
@@ -456,9 +455,9 @@
   width: var(--map-pick-size, var(--sp-6));
   height: var(--map-pick-size, var(--sp-6));
   border-radius: 50%;
-  border: var(--border-w) solid var(--map-pick-border, var(--accent));
+  border: var(--border-w) solid var(--map-pick-border, var(--action-accent));
   background: var(--map-pick-bg, var(--surface));
-  color: var(--map-pick-mark-ink, var(--accent));
+  color: var(--map-pick-mark-ink, var(--action-accent));
   box-shadow: var(--map-pick-shadow, var(--shadow-float));
   pointer-events: none;
 }
@@ -495,7 +494,10 @@
   display: grid;
   place-items: center;
   font: var(--sheet-stage-foot-font, var(--type-caption));
-  color: var(--sheet-stage-foot-ink, var(--card-3-ink));
+  /* words on the scrim: white on a strip of the scrim over it. The scrim alone is half black, so over a white page it is #808080, where white
+     is 3.9:1; doubled, #404040, 10:1. It read --card-3-ink, a brand's light ink, on a black scrim */
+  background: var(--sheet-stage-foot-bg, var(--scrim));
+  color: var(--sheet-stage-foot-ink, #ffffff);
   z-index: 2;
 }
 
@@ -538,6 +540,7 @@
   display: flex; align-items: center; gap: var(--sp-3); min-height: var(--_row-h); min-width: 0; /* THIN: 32px, a summary line, not a button (Lh 2026-09-25) — the tap stays 44, see __go */
   padding-inline: var(--sheet-step-bar-pad-x, var(--sp-3)); border-radius: var(--sheet-step-bar-radius, var(--r-chip));
   background: var(--sheet-step-bar-bg, var(--ink-tint)); color: var(--sheet-step-bar-ink, inherit);
+  --card-muted: var(--card-ink); /* a tint of the ink: its secondary words are the full ink (no lighter shade holds 4.5:1 there) */
   border-top: var(--sheet-step-border-w, 0rem) solid var(--sheet-step-border, currentColor); /* a rule instead of the bar: set this, the bar's bg transparent, radius 0 */
 }
 .sheet-step__title { font: var(--sheet-step-title-font, var(--type-label)); margin: 0; flex: 0 1 auto; min-width: 0; outline: none; /* the label size, not a body title: a pile of rows must stay small (Lh 2026-09-24) */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@@ -548,7 +551,7 @@
   border-radius: 50%; font: var(--sheet-step-num-font, var(--type-caption)); line-height: 1; font-variant-numeric: tabular-nums;
   background: var(--sheet-step-num-bg, var(--card-bg)); color: var(--sheet-step-num-ink, inherit);
 }
-.sheet-step__summary { color: inherit; opacity: 0.8; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sheet-step__summary { color: var(--sheet-step-summary-ink, var(--card-muted)); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .sheet-step__check { margin-inline-start: auto; }
 .sheet-step__body { min-height: 0; overflow: clip; overflow-clip-margin: var(--sp-1); }
 .sheet-step__inner { display: grid; gap: var(--card-gap); padding-block: var(--card-gap); padding-inline: var(--sheet-step-inner-pad-x, var(--sheet-step-bar-pad-x, var(--sp-3))); } /* the open step's content in the frame of its title's words (the bar's own inset), so it reads as that step's (Lh 2026-09-28, #153) */

package/css/stack.css

@@ -32,7 +32,7 @@
    bottom, the headroom above is the base's (block below).
    --flood (with --closed): an open sheet fills the whole screen, over the top bar.
    Direct children only, five at most (slots are :nth-child below):
-   first = the back of the stack, last = the front. README "Sheet stack
+   first = the back of the stack, last = the front. docs/reference.md "Sheet stack
    markup". The SheetStack component opens and closes a --tap stack; without it the
    stack still renders, it just won't open.
    ============================================================ */

package/css/sticky.css

@@ -16,8 +16,9 @@
    only its content box, which stops one fold short of the right and bottom edges; the paper's negative margins run
    back out to the full size. The paper takes the tone by `inherit`. */
 .sticky {
-  color: var(--sticky-ink, #141414);
-  --_muted: color-mix(in srgb, currentColor 62%, transparent); /* muted words: the ink sunk into the paper (currentColor is read where it is used: there it is still the note's ink) */
+  --dark: var(--sticky-dark, 0); /* a note is pastel paper: a light ground in any palette and any mode, so its words are onlight */
+  color: var(--sticky-ink, var(--card-ink));
+  --_muted: var(--card-muted);
   padding-inline-end: var(--sticky-fold, var(--sp-6)); /* the knob, read by a real property first (the knob test probes that one); --_fold hands the same value to the paper and the flap */
   --_fold: var(--sticky-fold, var(--sp-6));
   position: relative;
@@ -81,7 +82,7 @@
 .sticky__head:has(> .sticky-date) > .ph { flex: none; width: var(--sticky-pic-size, calc(var(--tap) * 1.5)); min-height: 0; aspect-ratio: 1; } /* beside a date the picture is a small square at the start */
 .sticky__body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow: clip; /* words past the note's room are cut, the foot keeps its place */ font: var(--sticky-font, var(--type-title)); overflow-wrap: anywhere; }
 .sticky--small .sticky__body { font: var(--sticky-small-font, var(--type-label)); } /* the note measured its words and they did not fit at its size (src/sticky/fit.ts) */
-.sticky__paper > :not(.sticky__body) > .chip { border-color: transparent; background-color: var(--sticky-chip-bg, rgb(255 255 255 / 0.85)); color: var(--sticky-ink, #141414); } /* a chip on a note is a label ON the paper (whose note it is): a pale ground nearly opaque (it may lie over words), no edge, the note's ink */
+.sticky__paper > :not(.sticky__body) > .chip { border-color: transparent; background-color: var(--sticky-chip-bg, rgb(255 255 255 / 0.85)); --dark: inherit; color: var(--sticky-ink, var(--card-ink)); } /* a chip on a note is a label ON the paper (whose note it is): a pale ground nearly opaque (it may lie over words), no edge, the note's ink */
 .sticky__foot { flex: none; font: var(--sticky-foot-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); padding-inline-end: var(--_fold); } /* the line stops before the fold */
 /* the flap: a square in the corner — the paper's cut takes its outer half, what is left is the triangle lying on the note */
 .sticky__fold {
@@ -109,7 +110,7 @@
 
 /* ---- sticky date: the day, big, the month under it — at the end of the note's head (its top-right corner) ----
    <div class="sticky__head">…<time class="sticky-date" datetime="2026-02-14"><span class="sticky-date__day">14</span><span class="sticky-date__month">ก.พ.</span></time></div> */
-.sticky-date { display: grid; justify-items: end; margin-inline-start: auto; text-align: end; color: var(--sticky-ink, #141414); }
+.sticky-date { display: grid; justify-items: end; margin-inline-start: auto; text-align: end; color: var(--sticky-ink, var(--card-ink)); }
 .sticky-date__day { font: var(--sticky-date-day-font, var(--type-stat)); }
 .sticky-date__month { font: var(--sticky-date-month-font, var(--type-caption)); color: var(--sticky-muted-ink, var(--_muted)); }
 
@@ -393,7 +394,7 @@
   font: inherit;
 }
 .sticky-heading__title { min-width: 0; max-width: 100%; font: var(--sticky-heading-title-font, var(--type-label)); line-height: 1.35; /* Thai marks stack taller than the label's 1.2, and overflow clips them */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-.sticky-heading__caption { font: var(--sticky-heading-caption-font, var(--type-caption)); color: color-mix(in srgb, currentColor 62%, transparent); white-space: nowrap; }
+.sticky-heading__caption { font: var(--sticky-heading-caption-font, var(--type-caption)); color: var(--sticky-heading-caption-ink, var(--card-muted)); white-space: nowrap; } /* the muted words of what it stands on: a note, or the screen */
 /* on a note: across the top of its paper, and the note's words start under it */
 .sticky__stuck > .sticky-heading { position: absolute; inset: var(--sp-2) var(--sp-4) auto; }
 .sticky:has(> .sticky__stuck > .sticky-heading) > .sticky__paper { padding-block-start: var(--sticky-heading-room, calc(var(--sp-12) + var(--sp-4))); }

package/css/theme.template.css

@@ -43,13 +43,22 @@
   /* --color-brand: #ef4e0b; */     /* the primary action, the strong card */
   /* --color-on-brand: #fff4ec; */  /* the words on the brand */
 
+  /* ---- ink: two sets, ONLIGHT and ONDARK (docs/reference.md "Ink follows its ground") ----
+     Every word and glyph on a light ground is onlight, on a dark ground ondark. Set the two sets; each one's ink and its muted shade
+     hold 4.5:1 on every ground of its side (inkGrounds() measures it). Unset, --color-ink and --color-on-brand derive them.
+     --ink-onlight --ink-onlight-muted  --ink-ondark --ink-ondark-muted
+     ---- sides: each ground says only whether it is dark (1) or light (0); its words and glyphs follow ----
+     --surface-dark (0)  --card-1-dark (0) --card-2-dark (0) --card-3-dark (1) --card-4-dark (0) --card-5-dark (1)
+     --accent-dark (1, the brand fill)  --action-dark (0, the paper of buttons, chips, fields)  --neg-dark (1, a falling Delta)
+     A dark mode is these sides turned to 1 with their fills darkened, in a [data-mode="dark"] block of your own: no rule per piece.
+     A surface of your own: give it a fill and `--dark: 1` (or 0), and its --card-ink / --card-muted that side's set. */
+
   /* ---- colour roles: only where a derivation is not what you want — a role set here wins over it ----
-     --surface  --on-surface  --on-surface-muted
-     --card-1-bg --card-1-ink  --card-2-bg --card-2-ink  --card-3-bg --card-3-ink   (three card tones)
-     --card-border  --card-muted  --card-2-muted
-     --accent --on-accent  --action-bg --action-ink --action-border
+     --surface  --card-1-bg … --card-5-bg   (five card tones: fills only, their words follow their side)
+     --card-border   (a card's fill or its --card-border holds 3:1 on its ground: cardGrounds(), docs/reference.md)
+     --accent  --action-bg  --action-border
      --pos --neg  --dot-a --dot-b
-     --signal-ok --signal-warn --signal-error --signal-info   (the signal set: green · yellow · red · blue — retune the shade,
-       keep the meaning; dark enough for words. --signal-*-soft, the light ground of each, follows by itself)
-     --dim (0.7: how far secondary words fade on a dark card, a drawer, a tile's sub line — one share for all) */
+     --signal-ok-onlight --signal-warn-onlight --signal-error-onlight --signal-info-onlight   (the signal set: green · yellow · red ·
+       blue — retune the shade, keep the meaning; 4.5:1 on every light ground) and --signal-*-ondark (on the dark side; the ondark ink
+       unless set). --signal-*-soft, the light ground of each, follows by itself */
 }