@axiapps/axi-design 1.30.1 → 1.32.0

package/README.md

@@ -140,6 +140,8 @@ not "what does the system look like". Everything else is
 | `--axi-textarea-h` | the minimum height of a `<textarea class="axi-input">` | `90px` | `<textarea class="axi-input" style="--axi-textarea-h: 200px">` |
 | `--axi-btn-pad` | the padding inside an `.axi-btn`. The three named steps set it for you; reach for the knob only for a size they do not cover | `12px 20px` | `<button class="axi-btn" style="--axi-btn-pad: 3px 7px">` |
 | `--axi-btn-size` | an `.axi-btn`'s text size, which travels with its padding | `13px` | `<button class="axi-btn" style="--axi-btn-size: 10px">` |
+| `--axi-pill-pad` | the padding inside an `.axi-pill`. The same scale and the same two named steps as the button, because a pill is a button that holds a state | `12px 20px` | `<button class="axi-pill" style="--axi-pill-pad: 3px 7px">` |
+| `--axi-pill-size` | an `.axi-pill`'s text size, which travels with its padding | `13px` | `<button class="axi-pill" style="--axi-pill-size: 10px">` |
 | `--axi-input-pad` | the padding inside an `.axi-input`, for a field that is furniture in a header rather than a control on a page | `11px 12px` | `<input class="axi-input" style="--axi-input-pad: 7px 12px">` |
 | `--axi-input-size` | an `.axi-input`'s text size, which travels with its padding | `14px` | `<input class="axi-input" style="--axi-input-size: 13px">` |
 | `--axi-well-pad` | the padding inside an `.axi-well` | `10px` | `<div class="axi-well" style="--axi-well-pad: 18px">` |

package/dist/axi.css

@@ -448,19 +448,30 @@ button.axi-panel--tile:hover,
    as a generic "selected". Consumers set that colour with --axi-pill-fill,
    on the pill or on any ancestor - it is read through a fallback and never
    declared on the component, which is what keeps both placements working. */
+/* On the button's scale, and deliberately the same numbers. The only thing a
+   pill has that a button does not is a state, so two of them carrying the same
+   13px uppercase label have no reason to be different shapes - and they were:
+   measured at 12px/20px against 10px/9px, the pill's sides less than half the
+   button's, 43px tall against 39px. Side by side that reads as two components
+   rather than one component holding a state. The steps below are the button's
+   steps verbatim for the same reason, and a test holds the two in step. */
 .axi-pill {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 10px 9px;
+  padding: var(--axi-pill-pad, 12px 20px);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
   letter-spacing: var(--axi-ls-label);
+  /* After the `font` shorthand, which sets 13px and would otherwise reset it. */
+  font-size: var(--axi-pill-size, 13px);
   text-transform: uppercase;
   cursor: pointer;
   transition: transform .1s, box-shadow .1s;
 }
+.axi-pill--sm { --axi-pill-pad: 8px 13px; --axi-pill-size: 12px; }
+.axi-pill--xs { --axi-pill-pad: 5px 9px;  --axi-pill-size: 11px; }
 /* :where() for the same reason the button's hover has it - the brighten is
    what a pill that has not been told its colour falls back to, not an override
    of one that has. See rule 6's addendum. */
@@ -569,6 +580,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;

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.1",
+  "version": "1.32.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

@@ -174,19 +174,30 @@ button.axi-panel--tile:hover,
    as a generic "selected". Consumers set that colour with --axi-pill-fill,
    on the pill or on any ancestor - it is read through a fallback and never
    declared on the component, which is what keeps both placements working. */
+/* On the button's scale, and deliberately the same numbers. The only thing a
+   pill has that a button does not is a state, so two of them carrying the same
+   13px uppercase label have no reason to be different shapes - and they were:
+   measured at 12px/20px against 10px/9px, the pill's sides less than half the
+   button's, 43px tall against 39px. Side by side that reads as two components
+   rather than one component holding a state. The steps below are the button's
+   steps verbatim for the same reason, and a test holds the two in step. */
 .axi-pill {
   display: inline-flex; align-items: center; gap: 6px;
-  padding: 10px 9px;
+  padding: var(--axi-pill-pad, 12px 20px);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
   letter-spacing: var(--axi-ls-label);
+  /* After the `font` shorthand, which sets 13px and would otherwise reset it. */
+  font-size: var(--axi-pill-size, 13px);
   text-transform: uppercase;
   cursor: pointer;
   transition: transform .1s, box-shadow .1s;
 }
+.axi-pill--sm { --axi-pill-pad: 8px 13px; --axi-pill-size: 12px; }
+.axi-pill--xs { --axi-pill-pad: 5px 9px;  --axi-pill-size: 11px; }
 /* :where() for the same reason the button's hover has it - the brighten is
    what a pill that has not been told its colour falls back to, not an override
    of one that has. See rule 6's addendum. */
@@ -295,6 +306,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;