@axiapps/axi-design 1.45.0 → 1.47.0

package/README.md

@@ -147,6 +147,7 @@ not "what does the system look like". Everything else is
 | `--axi-action-hit` | the hit target of an `.axi-action--glyph`, whose label is one character and gives the pointer nothing to land on | `24px` | `<button class="axi-action axi-action--glyph" style="--axi-action-hit: 32px">` |
 | `--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-empty-pad` | the padding inside an `.axi-empty`, for an empty state standing in a tighter space than a table would | `24px 16px` | `<div class="axi-empty" style="--axi-empty-pad: 12px">` |
 | `--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">` |
 | `--axi-rail-pad` | the padding inside an `.axi-rail` | `10px` | `<aside class="axi-rail" style="--axi-rail-pad: 6px">` |
 | `--axi-toolbar-pad` | the padding inside an `.axi-toolbar` | `14px` | `<div class="axi-toolbar" style="--axi-toolbar-pad: 4px 7px">` |

package/dist/axi.css

@@ -590,6 +590,30 @@ button.axi-panel--tile:hover,
    the pad knob is still the right way to say anything else. */
 .axi-well--sm { --axi-well-radius: var(--axi-radius-sm); }
 
+/* ---------- the empty state ---------- */
+/* A well with nothing in it but the sentence saying so.
+
+   Every view that can have no data has to say so somewhere, and the first
+   consumer counted said it eighty times - a dashed-border box, centred, small,
+   dim - in eighty copies of the same eleven utilities, none of them a word the
+   language had. Dashed, because the box was "provisional"; the language says
+   provisional with the outlined/filled distinction (rule 5), so the edge is
+   the well's own rule. It is a well because an absence is a recess: the place
+   a table would stand, sunk into the surface, with nothing standing in it.
+
+   Only the sentence's type and placement are added to the well, and the
+   generous pad is the point - an empty state that is as tall as a single row
+   reads as a row that failed to render. */
+.axi-empty {
+  background: var(--axi-well-fill);
+  border: var(--axi-border-control) solid var(--axi-well-line);
+  border-radius: var(--axi-radius-sm);
+  padding: var(--axi-empty-pad, 24px 16px);
+  text-align: center;
+  font: var(--axi-t-small);
+  color: var(--axi-text-dim);
+}
+
 /* ---------- button ---------- */
 .axi-btn {
   display: inline-flex; align-items: center; gap: 8px;
@@ -2492,6 +2516,12 @@ textarea.axi-input {
   display: flex; align-items: center; gap: 12px;
   height: 38px; padding-left: 14px;
   background: var(--axi-ground-deep);
+  /* The chrome takes the surface filter for the same reason a panel does: on a
+     theme that makes its surfaces translucent, the one strip a reader never
+     scrolls away is the one that has to agree. --axi-surface-filter is none on
+     every opaque surface, so this is inert there - the same inert-by-default
+     shape the panels already use. */
+  backdrop-filter: var(--axi-surface-filter);
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -2516,6 +2546,13 @@ textarea.axi-input {
 /* Close is the one destructive control in the chrome, and the one place a
    status ink belongs in a titlebar. */
 .axi-titlebar__btns :where(button:last-child:hover) { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
+/* The page-wide ring sits 2px OUTSIDE its element, which a window button
+   cannot afford: it is flush to the top of the frame and flush to its
+   neighbours, so an outward ring spills past the window edge and reads as a
+   loud accent box across the corner of the chrome. Pull it inward, the same
+   way a picker option and a select option already do inside their own tight
+   containers. */
+.axi-titlebar__btns :where(button:focus-visible) { outline-offset: -3px; }
 /* The scrolling region under the chrome. */
 .axi-window__body { flex: 1; overflow-y: auto; }
 

package/dist/themes/flat.css

@@ -17,6 +17,10 @@
   --axi-text-dim: #8b929e;
   --axi-text-faint: #5d6577;
   --axi-scrim: rgba(4, 5, 8, .72);
+  --axi-offset-panel: 0;
+  --axi-offset-control: 0;
+  --axi-offset-panel-hover: 0;
+  --axi-offset-control-hover: 0;
   --axi-shadow-panel: 0 2px 8px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .05);
   --axi-shadow-control: 0 1px 4px rgba(0, 0, 0, .3), inset 0 1px 0 rgba(255, 255, 255, .045);
   --axi-shadow-panel-hover: 0 6px 18px rgba(0, 0, 0, .5), 0 2px 5px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .07);

package/dist/themes/glass.css

@@ -13,7 +13,7 @@
   --axi-surface-filter: blur(18px) saturate(140%);
   --axi-ink-line: rgba(180, 200, 255, .16);
   --axi-rule: rgba(180, 200, 255, .14);
-  --axi-ground-deep: #0c0e12;
+  --axi-ground-deep: rgba(12, 14, 18, .72);
   --axi-well-fill: rgba(6, 8, 14, .32);
   --axi-accent-ink: #0c0e12;
   --axi-ink-on-fill: #0c0e12;
@@ -21,6 +21,10 @@
   --axi-text-dim: #b3bdd0;
   --axi-text-faint: #7f8aa0;
   --axi-scrim: rgba(4, 6, 12, .66);
+  --axi-offset-panel: 0;
+  --axi-offset-control: 0;
+  --axi-offset-panel-hover: 0;
+  --axi-offset-control-hover: 0;
   --axi-shadow-panel: 0 18px 44px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .14);
   --axi-shadow-control: 0 6px 16px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .12);
   --axi-shadow-panel-hover: 0 26px 60px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2);

package/docs/RULES.md

@@ -830,10 +830,19 @@ What is **not** a theme's to restate, and each for its own reason:
   companions are not on this list: `--axi-accent-ink` and `--axi-ink-on-fill`
   are the colour a word is written in when it sits on a fill, and a theme that
   lightens the outline has to be able to hold them dark.
-- **The offset scale.** `--axi-offset-*` is what the main theme's block is
-  composed *from*. A theme restates the composed `--axi-shadow-*` wholesale or
-  leaves it; retuning the offsets underneath would leave the two spellings of
-  "the block" disagreeing.
+- **The offset scale, except to switch it off.** `--axi-offset-*` is what the
+  main theme's block is composed *from*, and retuning it underneath a restated
+  `--axi-shadow-*` would leave the two spellings of "the block" disagreeing.
+  A theme may set the offsets to `0` and may do nothing else to them. Zero is
+  not a retune — it is the same sentence the restated `--axi-shadow-*` is
+  already saying. This started out as a flat prohibition and shipped a bug:
+  the tokens are public, consumers compose blocks from them directly rather
+  than asking for `--axi-shadow-panel`, and a theme whose relief is a soft drop
+  was leaving a 6px near-black step standing behind every one of those cards.
+  On a square corner it read as a stray backdrop; on a rounded one it read as
+  broken rounding. A consumer still composing from the offsets now gets no
+  relief on a theme rather than the wrong one, which is a visible prompt to ask
+  for the composed block instead.
 - **The measure.** `--axi-page`, `--axi-gutter`. Where the text wraps is not a
   look, and moving it would reflow every page rather than repaint it.
 - **The type.** `--axi-sans`, `--axi-mono`, `--axi-t-*`, `--axi-ls-*`. The same

package/package.json

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

@@ -186,6 +186,30 @@ button.axi-panel--tile:hover,
    the pad knob is still the right way to say anything else. */
 .axi-well--sm { --axi-well-radius: var(--axi-radius-sm); }
 
+/* ---------- the empty state ---------- */
+/* A well with nothing in it but the sentence saying so.
+
+   Every view that can have no data has to say so somewhere, and the first
+   consumer counted said it eighty times - a dashed-border box, centred, small,
+   dim - in eighty copies of the same eleven utilities, none of them a word the
+   language had. Dashed, because the box was "provisional"; the language says
+   provisional with the outlined/filled distinction (rule 5), so the edge is
+   the well's own rule. It is a well because an absence is a recess: the place
+   a table would stand, sunk into the surface, with nothing standing in it.
+
+   Only the sentence's type and placement are added to the well, and the
+   generous pad is the point - an empty state that is as tall as a single row
+   reads as a row that failed to render. */
+.axi-empty {
+  background: var(--axi-well-fill);
+  border: var(--axi-border-control) solid var(--axi-well-line);
+  border-radius: var(--axi-radius-sm);
+  padding: var(--axi-empty-pad, 24px 16px);
+  text-align: center;
+  font: var(--axi-t-small);
+  color: var(--axi-text-dim);
+}
+
 /* ---------- button ---------- */
 .axi-btn {
   display: inline-flex; align-items: center; gap: 8px;

package/src/shells.css

@@ -947,6 +947,12 @@
   display: flex; align-items: center; gap: 12px;
   height: 38px; padding-left: 14px;
   background: var(--axi-ground-deep);
+  /* The chrome takes the surface filter for the same reason a panel does: on a
+     theme that makes its surfaces translucent, the one strip a reader never
+     scrolls away is the one that has to agree. --axi-surface-filter is none on
+     every opaque surface, so this is inert there - the same inert-by-default
+     shape the panels already use. */
+  backdrop-filter: var(--axi-surface-filter);
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -971,6 +977,13 @@
 /* Close is the one destructive control in the chrome, and the one place a
    status ink belongs in a titlebar. */
 .axi-titlebar__btns :where(button:last-child:hover) { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
+/* The page-wide ring sits 2px OUTSIDE its element, which a window button
+   cannot afford: it is flush to the top of the frame and flush to its
+   neighbours, so an outward ring spills past the window edge and reads as a
+   loud accent box across the corner of the chrome. Pull it inward, the same
+   way a picker option and a select option already do inside their own tight
+   containers. */
+.axi-titlebar__btns :where(button:focus-visible) { outline-offset: -3px; }
 /* The scrolling region under the chrome. */
 .axi-window__body { flex: 1; overflow-y: auto; }