@axiapps/axi-design 1.28.0 → 1.29.0

package/README.md

@@ -138,6 +138,8 @@ not "what does the system look like". Everything else is
 | `--axi-check-size` | the size of an `.axi-check` or `.axi-radio` box | `22px` | `<input type="checkbox" class="axi-check" style="--axi-check-size: 16px">` |
 | `--axi-check-fill` | the fill a checked `.axi-check` takes, and the colour of a checked `.axi-radio`'s diamond | `var(--axi-accent)` | `<input type="checkbox" class="axi-check" style="--axi-check-fill: var(--axi-danger)">` |
 | `--axi-textarea-h` | the minimum height of a `<textarea class="axi-input">` | `90px` | `<textarea class="axi-input" style="--axi-textarea-h: 200px">` |
+| `--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">` |
 | `--axi-well-radius` | an `.axi-well`'s corner radius, for a well used at reading scale rather than page scale | `var(--axi-radius)` | `<div class="axi-well" style="--axi-well-radius: var(--axi-radius-sm)">` |
 | `--axi-rail-w` | an `.axi-rail`'s width, for labels longer than the default holds | `208px` | `<aside class="axi-rail" style="--axi-rail-w: 260px">` |

package/dist/axi.css

@@ -562,15 +562,23 @@ button.axi-panel--tile:hover,
 .axi-diamond--series { background: var(--axi-series, var(--axi-accent)); }
 
 /* ---------- input ---------- */
+/* Two knobs rather than one fixed size, for the same reason --axi-well-pad
+   exists: a field is used at two scales. A form control standing on a page is
+   the 14px default; a filter sitting in a section header or a row in a bar is
+   smaller, because there it is furniture next to 11px type rather than the
+   thing the page is for. The alternative is what this file did before - a
+   context selector per place that wanted the small one (.axi-palette__bar
+   .axi-input, still the only one upstream needs) - and that does not scale
+   past the cases upstream happens to ship. */
 .axi-input {
   width: 100%;
-  padding: 11px 12px;
+  padding: var(--axi-input-pad, 11px 12px);
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
   color: var(--axi-text);
   font: var(--axi-t-label);
-  font-size: 14px;
+  font-size: var(--axi-input-size, 14px);
 }
 .axi-input::placeholder { color: var(--axi-text-faint); font-weight: 500; }
 
@@ -1411,7 +1419,7 @@ textarea.axi-input {
    not a form control standing on a page. No focus ring: the palette opens with
    the caret already here, so a permanent outline says nothing, and it would
    argue with the one mark that does - the accent on the cursor row. */
-.axi-palette__bar .axi-input { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
+.axi-palette__bar .axi-input { --axi-input-pad: 7px 12px; --axi-input-size: 13px; }
 .axi-palette__bar .axi-input:focus-visible { outline: none; }
 .axi-palette__filters { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
 /* What the list is not showing. Meta, at the end of the filter row, because it

package/package.json

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

@@ -288,15 +288,23 @@ button.axi-panel--tile:hover,
 .axi-diamond--series { background: var(--axi-series, var(--axi-accent)); }
 
 /* ---------- input ---------- */
+/* Two knobs rather than one fixed size, for the same reason --axi-well-pad
+   exists: a field is used at two scales. A form control standing on a page is
+   the 14px default; a filter sitting in a section header or a row in a bar is
+   smaller, because there it is furniture next to 11px type rather than the
+   thing the page is for. The alternative is what this file did before - a
+   context selector per place that wanted the small one (.axi-palette__bar
+   .axi-input, still the only one upstream needs) - and that does not scale
+   past the cases upstream happens to ship. */
 .axi-input {
   width: 100%;
-  padding: 11px 12px;
+  padding: var(--axi-input-pad, 11px 12px);
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);
   color: var(--axi-text);
   font: var(--axi-t-label);
-  font-size: 14px;
+  font-size: var(--axi-input-size, 14px);
 }
 .axi-input::placeholder { color: var(--axi-text-faint); font-weight: 500; }
 

package/src/shells.css

@@ -439,7 +439,7 @@
    not a form control standing on a page. No focus ring: the palette opens with
    the caret already here, so a permanent outline says nothing, and it would
    argue with the one mark that does - the accent on the cursor row. */
-.axi-palette__bar .axi-input { padding-top: 7px; padding-bottom: 7px; font-size: 13px; }
+.axi-palette__bar .axi-input { --axi-input-pad: 7px 12px; --axi-input-size: 13px; }
 .axi-palette__bar .axi-input:focus-visible { outline: none; }
 .axi-palette__filters { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
 /* What the list is not showing. Meta, at the end of the filter row, because it