@axiapps/axi-design 1.30.0 → 1.31.0

package/dist/axi.css

@@ -569,6 +569,27 @@ button.axi-panel--tile:hover,
   color: var(--axi-meta);
 }
 
+/* A chip you press. A chip is a mark - it states a value about the thing it
+   sits on - and a mark has no cursor and does not move. But the same shape also
+   turns up holding a value the *reader* chose and can take back: the filters
+   standing above a table, one per selection, each one dismissable. That is
+   still a chip and not a button, because its label is data rather than an
+   action - "DAMAGE", not "Clear all" - and rule 5 is what tells the reader
+   which of the two they are looking at. What it is missing is only the press
+   affordances: the hand, and the block that every other pressable thing in the
+   language raises on hover.
+
+   It deliberately says nothing about colour. `.axi-chip--accent` and the three
+   status fills each set their own contrast pair at one class, and a hover
+   brighten here would weigh the same and win on source order - putting a
+   neutral back on top of a saturated fill. There is nothing for a brighten to
+   add to a filled chip anyway; the lift is the feedback. */
+.axi-chip--action { cursor: pointer; }
+.axi-chip--action:where(:hover) {
+  box-shadow: var(--axi-shadow-control);
+  transform: translate(-2px, -2px);
+}
+
 /* ---------- count badge ---------- */
 .axi-badge-count {
   display: inline-block;
@@ -578,6 +599,17 @@ button.axi-panel--tile:hover,
   color: var(--axi-accent-ink);
   font: var(--axi-t-micro);
 }
+/* The one placement where the badge's own fill is the fill it is sitting on.
+   .axi-btn--primary is the accent, and so is the badge, so the count went
+   invisible - not dim, gone. Inverted rather than given a third colour: the
+   same two values the other way round is the only pairing rule 5 leaves, since
+   a status hue here would say something about the count that is not true.
+   Found by a consumer, which had written this rule itself against its own
+   class name because the language had no answer. */
+.axi-btn--primary .axi-badge-count {
+  background: var(--axi-accent-ink);
+  color: var(--axi-accent);
+}
 
 /* ---------- diamond ---------- */
 /* The family motif: a rotated outlined square. Used as a bullet, a status dot

package/docs/RULES.md

@@ -211,6 +211,30 @@ A filled chip asserts a value about the thing. An outlined chip in the cool ink
 is commentary *about* the thing — a maintainer's judgment, a source, a caveat.
 A reader must be able to tell which they are looking at before reading either.
 
+A chip may be a press. `.axi-chip--action` adds the hand and the block, and
+nothing else — the label of a dismissable filter is still data ("DAMAGE"), not
+an action ("Clear all"), so this rule is what tells a reader which of the two a
+given box is, and a chip that becomes clickable must not stop looking like a
+chip.
+
+**Inside a fill, the only inks are that fill's own pair.** A filled chip, a
+pressed pill, a primary button and a current tab each set a contrast ink against
+a saturated ground, and anything nested inside them inherits that ground whether
+it reads the pair or not. A neutral from the ramp there is not quieter, it is
+gone: a consumer's dismiss glyph written `--axi-text-dim` measured **1.39:1**
+against the accent fill beside a label at 12.24:1, and `.axi-badge-count` inside
+`.axi-btn--primary` was the accent on the accent until 1.30.1. The fix in both
+cases is to say nothing — `currentColor` is already the pair — and the trap is
+that saying nothing looks like an omission while `--axi-text-dim` looks like a
+decision.
+
+This is checked by eye and not by a test, deliberately. The obvious static
+check — no descendant rule inside a fillable component may set `color` to a
+neutral — flags `.axi-tabs .axi-tabs__close`, which is correct: the tab's fill
+sits on the anchor and the close control is its *sibling*, so the faint neutral
+is against the page ground. Whether a nested element is on the fill is a fact
+about the paint chain, and a stylesheet does not contain it.
+
 The same rule governs coloured strips on cards: a strip must encode real data.
 A strip that carries "category" is decoration impersonating data, and it takes
 the first position the eye lands on.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.30.0",
+  "version": "1.31.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",

package/src/primitives.css

@@ -295,6 +295,27 @@ button.axi-panel--tile:hover,
   color: var(--axi-meta);
 }
 
+/* A chip you press. A chip is a mark - it states a value about the thing it
+   sits on - and a mark has no cursor and does not move. But the same shape also
+   turns up holding a value the *reader* chose and can take back: the filters
+   standing above a table, one per selection, each one dismissable. That is
+   still a chip and not a button, because its label is data rather than an
+   action - "DAMAGE", not "Clear all" - and rule 5 is what tells the reader
+   which of the two they are looking at. What it is missing is only the press
+   affordances: the hand, and the block that every other pressable thing in the
+   language raises on hover.
+
+   It deliberately says nothing about colour. `.axi-chip--accent` and the three
+   status fills each set their own contrast pair at one class, and a hover
+   brighten here would weigh the same and win on source order - putting a
+   neutral back on top of a saturated fill. There is nothing for a brighten to
+   add to a filled chip anyway; the lift is the feedback. */
+.axi-chip--action { cursor: pointer; }
+.axi-chip--action:where(:hover) {
+  box-shadow: var(--axi-shadow-control);
+  transform: translate(-2px, -2px);
+}
+
 /* ---------- count badge ---------- */
 .axi-badge-count {
   display: inline-block;
@@ -304,6 +325,17 @@ button.axi-panel--tile:hover,
   color: var(--axi-accent-ink);
   font: var(--axi-t-micro);
 }
+/* The one placement where the badge's own fill is the fill it is sitting on.
+   .axi-btn--primary is the accent, and so is the badge, so the count went
+   invisible - not dim, gone. Inverted rather than given a third colour: the
+   same two values the other way round is the only pairing rule 5 leaves, since
+   a status hue here would say something about the count that is not true.
+   Found by a consumer, which had written this rule itself against its own
+   class name because the language had no answer. */
+.axi-btn--primary .axi-badge-count {
+  background: var(--axi-accent-ink);
+  color: var(--axi-accent);
+}
 
 /* ---------- diamond ---------- */
 /* The family motif: a rotated outlined square. Used as a bullet, a status dot