@siyahi/tools 0.1.9-next.33 → 0.1.9-next.34

package/README.md

@@ -178,6 +178,7 @@ the surface under it. It fails unless text reaches 4.5:1 on the page, on its own
 fill and on the tints Siyahi's components put it on (Callout washes, the
 destructive tint and its hover, code-line fills, treemap heat steps), a field's
 edge, the focus ring, a selected tab and every chart and meaning colour reach
-3:1 against what is next to them, and every colour sits inside sRGB. Slots two
+3:1 against what is next to them, every bar colour's tint (`--bar-tint`) reaches
+1.5:1 against the card and each slot's against the next slot's, and every colour sits inside sRGB. Slots two
 apart share a lightness and are told apart by hue, so series take slots in
 order.

package/contrast.mjs

@@ -35,6 +35,12 @@ import { readTheme } from "./theme.mjs";
 
 const TEXT = 4.5;
 const MARK = 3;
+// A fill told apart from the fill or card beside it, inside a 1px edge that already carries the mark's 3:1. Only a
+// nearly solid tint reaches 3:1 against its neighbour's: the solid slots next to each other sit just over 3:1, and
+// mixing both into the card narrows that. At 25% a stack's pale segments sat at 1.2:1 against each other and read as
+// one, and a pale slot's lone bar at 1.3:1 against the card. 1.5:1 is a guard against sliding back there, not a
+// published threshold.
+const FILL = 1.5;
 const SURFACES = ["background", "card"];
 const CHARTS = ["chart-1", "chart-2", "chart-3", "chart-4", "chart-5"];
 
@@ -145,11 +151,21 @@ const PAIRS = [
   // The selected tab's fill against its list.
   { fg: "foreground", bg: "muted", min: MARK },
   // Chart marks on the canvas and the card. A bar is read by its full-colour
-  // edge, so these are the edges too; the tint inside is carried by the edge and
-  // has no pair of its own, nor has a dimmed bar's fainter tint. A stale
-  // block's marks (greyed, at 65%) are exempt: stale is meant to read faintly.
+  // edge, so these are the edges too. A stale block's marks (greyed, at 65%)
+  // are exempt: stale is meant to read faintly.
   ...[...CHARTS, "positive", "negative"].map((fg) => ({ fg, bg: "", min: MARK })),
   ...CHARTS.slice(0, -1).map((fg, i) => ({ fg, bg: CHARTS[i + 1] ?? "", min: MARK })),
+  // A bar's tint (--bar-tint) carries its colour where the bar is short, such as
+  // a thin stacked segment that is mostly edge: every bar colour's tint against
+  // the card, and each slot's against the next slot's, its neighbour in a stack.
+  // A dimmed bar's fainter tint has no pair: a selection means it to fade.
+  ...[...CHARTS, "positive", "negative"].map((fg) => ({ fg: `${fg}@bar-tint`, bg: "", min: FILL, surface: "card" })),
+  ...CHARTS.slice(0, -1).map((slot, i) => ({
+    fg: `${slot}@bar-tint`,
+    bg: `${CHARTS[i + 1]}@bar-tint`,
+    min: FILL,
+    surface: "card",
+  })),
   // Every bar colour against the 40% muted band a chart card lays behind a
   // hovered category (lib/chart-frame).
   ...[...CHARTS, "positive", "negative"].map((fg) => ({ fg, bg: "muted/40", min: MARK, surface: "card" })),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/tools",
-  "version": "0.1.9-next.33",
+  "version": "0.1.9-next.34",
   "description": "Checks and build helpers for Siyahi pages: a lint plugin, a font preload plugin, a theme contrast check, and screenshot and layout shift scripts.",
   "homepage": "https://siyahi.jatinbansal.com",
   "license": "MIT",