@axiapps/axi-design 1.46.0 → 1.47.0

package/dist/axi.css

@@ -2516,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);
@@ -2540,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.46.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/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; }