@axiapps/axi-design 1.23.0 → 1.24.0

package/dist/axi.css

@@ -31,9 +31,15 @@
      wedge of colour. The ground stays a colour. This is the page's light. */
   --axi-ground-image: none;
   --axi-surface: #222731;         /* a panel raised off the page */
-  --axi-surface-raised: #2b313d;  /* a chip or popover raised off a panel */
-  /* The fill for a surface that FLOATS over content which scrolls behind it: a
-     command palette, a menu popover, a modal. Holds --axi-surface, because for
+  /* A chip, a hover, a table head - something raised off a panel that is part
+     of the page rather than over it. It said "a chip or popover" until the
+     popovers moved to the float: what they were borrowing was opacity, which
+     this token cannot promise under a translucent theme. */
+  --axi-surface-raised: #2b313d;
+  /* The fill for a surface that FLOATS over content which scrolls behind it:
+     the command palette, the menu and picker popovers, the modal, the drawer,
+     the toast, and any .axi-panel--float or .axi-rail--float a consumer
+     declares. Holds --axi-surface, because for
      a theme whose panels are opaque a floating panel is just a panel and there
      is nothing to decide.
 
@@ -321,6 +327,13 @@ a { color: inherit; }
 .axi-panel--tile {
   border-width: var(--axi-border-control);
   box-shadow: var(--axi-shadow-control);
+  /* The control radius, not the panel's. A tile has already said it is
+     control-sized by taking the control border and the control block, and
+     --axi-radius's own note says control-sized surfaces read the small step -
+     so inheriting .axi-panel's corner was the one place the tile disagreed
+     with itself. Both are 0 in this theme, which is exactly why it had to be
+     fixed by reading the token rather than by looking at it. */
+  border-radius: var(--axi-radius-sm);
   padding: var(--axi-panel-pad, 12px);
 }
 /* A tile you can press moves under the press, the way every other control in
@@ -717,7 +730,9 @@ button.axi-panel--tile:hover,
   min-width: 100%;
   max-height: 340px; overflow-y: auto;
   padding: 6px;
-  background: var(--axi-surface-raised);
+  /* Float, for the reason .axi-menu__pop is - this is the same object with a
+     selected row. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
@@ -1248,7 +1263,13 @@ textarea.axi-input {
   position: absolute; top: calc(100% + 9px); left: 0; z-index: 41;
   width: var(--axi-menu-width, 310px);
   max-height: 340px; overflow-y: auto; padding: 8px;
-  background: var(--axi-surface-raised);
+  /* The other component --axi-surface-float names. It read --axi-surface-raised
+     because that token's comment says "a chip or popover" and, before the float
+     existed, raised was the only word for "higher than the panel". Height is
+     carried by the border and the block, though - the modal is the highest
+     surface on screen and sits on the plain fill - so what raised was actually
+     lending here was opacity it cannot promise under a translucent theme. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
@@ -1512,7 +1533,9 @@ textarea.axi-input {
   position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
   width: min(var(--axi-drawer-width, 560px), 100vw);
   display: flex; flex-direction: column;
-  background: var(--axi-surface);
+  /* A drawer is pinned to three edges with the page live beside it, and its
+     own body scrolls. Float on both counts. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border-left: var(--axi-border-panel) solid var(--axi-ink-line);
 }
@@ -1701,7 +1724,12 @@ textarea.axi-input {
 .axi-modal {
   padding: 0;
   max-width: min(var(--axi-modal-width, 560px), calc(100vw - 32px));
-  background: var(--axi-surface);
+  /* The float surface, not the plain one. --axi-surface-float's own note names
+     this component as one of its three consumers and it was only ever wired
+     into the palette; a modal is the strongest case the token has, because the
+     whole app is behind it and a scrim does not make a .42-alpha pane legible
+     on a platform where the blur is switched off. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   color: var(--axi-text);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
@@ -1797,7 +1825,11 @@ textarea.axi-input {
   pointer-events: auto;
   display: flex; align-items: center; gap: 12px;
   padding: 12px 15px;
-  background: var(--axi-surface-raised);
+  /* Float at the control weight. A toast is the one floating thing the reader
+     did not open and cannot hold still: whatever is under it is mid-scroll by
+     definition, which is the float's case exactly, while the border and the
+     block stay at the control step for the reason above. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);

package/package.json

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

@@ -55,6 +55,13 @@
 .axi-panel--tile {
   border-width: var(--axi-border-control);
   box-shadow: var(--axi-shadow-control);
+  /* The control radius, not the panel's. A tile has already said it is
+     control-sized by taking the control border and the control block, and
+     --axi-radius's own note says control-sized surfaces read the small step -
+     so inheriting .axi-panel's corner was the one place the tile disagreed
+     with itself. Both are 0 in this theme, which is exactly why it had to be
+     fixed by reading the token rather than by looking at it. */
+  border-radius: var(--axi-radius-sm);
   padding: var(--axi-panel-pad, 12px);
 }
 /* A tile you can press moves under the press, the way every other control in
@@ -451,7 +458,9 @@ button.axi-panel--tile:hover,
   min-width: 100%;
   max-height: 340px; overflow-y: auto;
   padding: 6px;
-  background: var(--axi-surface-raised);
+  /* Float, for the reason .axi-menu__pop is - this is the same object with a
+     selected row. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);

package/src/shells.css

@@ -293,7 +293,13 @@
   position: absolute; top: calc(100% + 9px); left: 0; z-index: 41;
   width: var(--axi-menu-width, 310px);
   max-height: 340px; overflow-y: auto; padding: 8px;
-  background: var(--axi-surface-raised);
+  /* The other component --axi-surface-float names. It read --axi-surface-raised
+     because that token's comment says "a chip or popover" and, before the float
+     existed, raised was the only word for "higher than the panel". Height is
+     carried by the border and the block, though - the modal is the highest
+     surface on screen and sits on the plain fill - so what raised was actually
+     lending here was opacity it cannot promise under a translucent theme. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
@@ -557,7 +563,9 @@
   position: fixed; top: 0; right: 0; bottom: 0; z-index: 51;
   width: min(var(--axi-drawer-width, 560px), 100vw);
   display: flex; flex-direction: column;
-  background: var(--axi-surface);
+  /* A drawer is pinned to three edges with the page live beside it, and its
+     own body scrolls. Float on both counts. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border-left: var(--axi-border-panel) solid var(--axi-ink-line);
 }
@@ -746,7 +754,12 @@
 .axi-modal {
   padding: 0;
   max-width: min(var(--axi-modal-width, 560px), calc(100vw - 32px));
-  background: var(--axi-surface);
+  /* The float surface, not the plain one. --axi-surface-float's own note names
+     this component as one of its three consumers and it was only ever wired
+     into the palette; a modal is the strongest case the token has, because the
+     whole app is behind it and a scrim does not make a .42-alpha pane legible
+     on a platform where the blur is switched off. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   color: var(--axi-text);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
@@ -842,7 +855,11 @@
   pointer-events: auto;
   display: flex; align-items: center; gap: 12px;
   padding: 12px 15px;
-  background: var(--axi-surface-raised);
+  /* Float at the control weight. A toast is the one floating thing the reader
+     did not open and cannot hold still: whatever is under it is mid-scroll by
+     definition, which is the float's case exactly, while the border and the
+     block stay at the control step for the reason above. */
+  background: var(--axi-surface-float);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   border-radius: var(--axi-radius-sm);

package/src/tokens.css

@@ -27,9 +27,15 @@
      wedge of colour. The ground stays a colour. This is the page's light. */
   --axi-ground-image: none;
   --axi-surface: #222731;         /* a panel raised off the page */
-  --axi-surface-raised: #2b313d;  /* a chip or popover raised off a panel */
-  /* The fill for a surface that FLOATS over content which scrolls behind it: a
-     command palette, a menu popover, a modal. Holds --axi-surface, because for
+  /* A chip, a hover, a table head - something raised off a panel that is part
+     of the page rather than over it. It said "a chip or popover" until the
+     popovers moved to the float: what they were borrowing was opacity, which
+     this token cannot promise under a translucent theme. */
+  --axi-surface-raised: #2b313d;
+  /* The fill for a surface that FLOATS over content which scrolls behind it:
+     the command palette, the menu and picker popovers, the modal, the drawer,
+     the toast, and any .axi-panel--float or .axi-rail--float a consumer
+     declares. Holds --axi-surface, because for
      a theme whose panels are opaque a floating panel is just a panel and there
      is nothing to decide.