@siyahi/tools 0.1.9-next.29 → 0.1.9-next.30

package/contrast.mjs

@@ -91,9 +91,18 @@ const PAIRS = [
   ...["", "muted", "muted/50"].map((bg) => ({ fg: "input", bg, min: MARK })),
   { fg: "input", bg: "input/30", min: MARK, scheme: "dark" },
   ...["ring", "destructive"].map((fg) => ({ fg, bg: "", min: MARK })),
-  // A toggle's focus ring also meets the button it rings: a selected one's
-  // foreground fill, or a hovered one's muted fill.
-  ...["foreground", "muted"].map((bg) => ({ fg: "ring", bg, min: MARK })),
+  // Focus is a 2px ring of --ring on the control's edge with a 2px ring of the
+  // page colour inside it. The outer ring meets what lies around the control:
+  // the page and the card (above), a tab list's muted fill and the sidebar.
+  // The inner ring meets the control's own fill, which matters where that is
+  // dark: a primary button's (a pressed toggle's foreground fill is checked
+  // with the selected toggle's text, above).
+  ...["muted", "sidebar"].map((bg) => ({ fg: "ring", bg, min: MARK })),
+  { fg: "background", bg: "primary", min: MARK },
+  // An invalid field's red wash (--field-wash): the value and placeholder on
+  // it, and its red edge against it.
+  ...["foreground", "muted-foreground"].map((fg) => ({ fg, bg: "destructive@field-wash", min: TEXT })),
+  { fg: "destructive", bg: "destructive@field-wash", min: MARK },
   // A tone's icon or StatusBadge dot against the tone's own wash (lib/tone.ts).
   ...[
     ["link", "chart-1/8"],
@@ -127,16 +136,21 @@ const PAIRS = [
     ["negative", ["negative/wash", "negative/8"]],
     ["warning", ["warning/wash", "warning/10"]],
   ].map(([fg, bg]) => ({ fg: String(fg), bg: /** @type {Paint[]} */ (bg), min: MARK })),
+  // A chart's forecast stretch is hatched with 1px stripes of the text colour
+  // at 16% (lib/chart-marks). Its dashed lines and its FORECAST and TODAY
+  // labels sit on card-coloured halos, so no stripe runs beside them; the
+  // today rule in the link colour does meet the stripes.
+  { fg: "link", bg: "foreground/16", min: MARK, surface: "card" },
   // The selected tab's fill against its list.
   { fg: "foreground", bg: "muted", min: MARK },
-  // Chart marks on the canvas and the card. A dimmed bar keeps its full colour
-  // as its outline, so these are the outlines too.
+  // 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.
   ...[...CHARTS, "positive", "negative"].map((fg) => ({ fg, bg: "", min: MARK })),
   ...CHARTS.slice(0, -1).map((fg, i) => ({ fg, bg: CHARTS[i + 1] ?? "", min: MARK })),
-  // A waterfall's rise and fall: the full-colour edge against the tint it
-  // encloses, on the bar and its legend chip; and every bar colour against the
-  // 40% muted band a chart card lays behind a hovered category (lib/chart-frame).
-  ...["positive", "negative"].map((side) => ({ fg: side, bg: `${side}@35`, min: MARK })),
+  // 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" })),
   // A chart card's footer text, on the footer's muted wash.
   { fg: "foreground", bg: "muted/50", min: TEXT },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@siyahi/tools",
-  "version": "0.1.9-next.29",
+  "version": "0.1.9-next.30",
   "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",