@axiapps/axi-design 1.31.0 → 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. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.31.0",
+  "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. */