@axiapps/axi-design 1.8.0 → 1.9.0

package/README.md

@@ -83,6 +83,8 @@ not "what does the system look like". Everything else is
 | `--axi-bars-gap` | gap between columns in `.axi-bars` | `6px` | `<div class="axi-bars" style="--axi-bars-gap: 2px">` |
 | `--axi-plot-h` | height of a `.axi-plot` or `.axi-bars` | `180px` | `<div class="axi-plot" style="--axi-plot-h: 240px">` |
 | `--axi-plot-rows` | how many horizontal rules a `.axi-plot` draws | `4` | `<div class="axi-plot" style="--axi-plot-rows: 6">` |
+| `--axi-tick-w` / `--axi-tick-h` | size of one `.axi-ticks__tick` | `5px` / `15px` | `<div class="axi-ticks" style="--axi-tick-w: 7px">` |
+| `--axi-ticks-gap` | gap between marks in `.axi-ticks` | `3px` | `<div class="axi-ticks" style="--axi-ticks-gap: 2px">` |
 
 `--axi-page-pad: 0` is the one to know about: it is how a measure nested
 inside another measure avoids paying the gutter twice.

package/dist/axi.css

@@ -1028,6 +1028,42 @@ a { color: inherit; }
   background: var(--axi-series, var(--axi-accent));
 }
 
+/* ---------- ticks ---------- */
+/* A run of yes/no along a timeline: attended or missed, passed or failed,
+   shipped or skipped. This is rule 9 read the other way round - a bar has a
+   length because a quantity has one, and "no" has no length at all. Drawn as
+   a bar it has to be faked with a stub, and a stub reads as "a little bit",
+   which is the same lie as a faded fill. So every event here is one mark of
+   the same size, and what changes between them is only which ink it is drawn
+   in: rule 10's two series, the accent for the fact and the neutral ramp for
+   its absence.
+
+   Neither mark is outlined, which is the one place this departs from the
+   filled/empty pair the language reaches for first. At the size a run of
+   twenty sits in a table row the outline IS the mark - three pixels of edge
+   around one pixel of middle - so the pair would differ in nothing the eye
+   can resolve. A strip drawn large enough to outline is a bar chart, and
+   .axi-bars already is one.
+
+   Marks are a fixed width and never flex: a run of fourteen and a run of
+   three share a column in a table, and the short one has to read as a short
+   run rather than as fourteen fatter events. */
+.axi-ticks {
+  display: inline-flex;
+  align-items: stretch;
+  gap: var(--axi-ticks-gap, 3px);
+  height: var(--axi-tick-h, 15px);
+}
+.axi-ticks__tick {
+  flex: none;
+  width: var(--axi-tick-w, 5px);
+  background: var(--axi-rule);
+  border-radius: var(--axi-radius-sm);
+}
+.axi-ticks__tick--on {
+  background: var(--axi-series, var(--axi-accent));
+}
+
 /* ---------- plot ---------- */
 /* A frame for a line or an area, with its horizontal rules drawn in. The
    rules are hard stops in a repeating gradient, which is the select caret's

package/docs/RULES.md

@@ -247,6 +247,12 @@ is the one chart type that cannot be built without the thing rule 2 forbids, so
 a distribution is drawn as bars, or as a table sorted by the value, or not at
 all.
 
+The other corollary is that a thing with no quantity gets no length. A run of
+yes/no — attended or missed, passed or failed — is a sequence of facts, and a
+fact has no magnitude to draw: rendering "no" as a short bar says "a little
+bit" as loudly as a faded fill says "30%". That series is a row of marks of
+one size, differing only in ink, which is `.axi-ticks`.
+
 ## 10. A chart's ink is the accent
 
 One series is the accent. A second, for comparison, is the neutral ramp —