@axiapps/axi-design 1.23.1 → 1.25.0

package/README.md

@@ -142,6 +142,7 @@ not "what does the system look like". Everything else is
 | `--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">` |
 | `--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">` |
 | `--axi-avatar-size` | the size of an `.axi-avatar` square | `40px` | `<span class="axi-avatar" style="--axi-avatar-size: 28px">MS</span>` |
 | `--axi-modal-width` | the maximum width of an `.axi-modal`, before the viewport clamp | `560px` | `<dialog class="axi-modal" style="--axi-modal-width: 760px">` |
 | `--axi-card-strip` | the colour of `.axi-card--strip`'s top strip | `var(--axi-accent)` | `<a class="axi-card axi-card--strip" style="--axi-card-strip: var(--axi-ok)">` |

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, .axi-rail--float or
+     .axi-toolbar--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.
 
@@ -724,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);
@@ -1140,7 +1148,13 @@ textarea.axi-input {
 .axi-rail:not(.axi-rail--flush) { box-shadow: var(--axi-shadow-panel); }
 .axi-rail--flush {
   border: 0;
-  border-right: var(--axi-border-panel) solid var(--axi-ink-line);
+  /* Logical, not physical: the border faces the content, and which physical
+     side that is depends on the writing direction. `border-right` was correct
+     only for an LTR rail pinned to the leading edge - under RTL it drew the
+     seam on the outside, facing the viewport. Note that this still assumes the
+     LEADING edge; a rail pinned to the trailing edge of its content needs the
+     other border and has no way to ask for it yet. */
+  border-inline-end: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: 0;
 }
 /* A rail the page scrolls behind, rather than one the page sits beside.
@@ -1236,13 +1250,34 @@ textarea.axi-input {
 /* ---------- toolbar ---------- */
 .axi-toolbar {
   display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
-  padding: 14px;
+  /* Own knob, like .axi-panel's and .axi-rail's. The toolbar was the one
+     container in this language whose padding was a literal, and 14px is a
+     figure for a strip above a list - a transport bar over a video or a map
+     is the same object at a third of the height, and had no way to say so
+     without writing its own padding and losing the component. */
+  padding: var(--axi-toolbar-pad, 14px);
   background: var(--axi-surface);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
   box-shadow: var(--axi-shadow-panel);
 }
+/* A toolbar that floats over moving content rather than sitting above it: the
+   controls pinned over a map, a chart, a replay. Says exactly what
+   .axi-panel--float and .axi-rail--float say, and for the same reason -
+   --axi-surface-float's own note lists the surfaces that need it and the
+   toolbar was missing from that list, which is the whole of the bug. A strip
+   above a list is not floating and keeps the plain surface; a strip over a
+   map is, and a translucent one shows the map through its own labels on any
+   platform where the blur is unavailable. */
+.axi-toolbar--float { background: var(--axi-surface-float); }
+/* A toolbar that must not become two rows. The wrap is right for a strip
+   above a list, where losing a filter off the edge is worse than a second
+   line - and wrong for a bar whose height other things are positioned
+   against, because wrapping moves everything around it. Stated as its own
+   modifier rather than left to each consumer's inline style, so the reason
+   lives here instead of in a comment in somebody's component. */
+.axi-toolbar--nowrap { flex-wrap: nowrap; }
 
 /* ---------- menu popover ---------- */
 /* A disclosure, not a permanent row of controls. The trigger is an .axi-btn
@@ -1255,7 +1290,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);
@@ -1519,7 +1560,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);
 }
@@ -1708,7 +1751,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);
@@ -1804,7 +1852,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.1",
+  "version": "1.25.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

@@ -458,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

@@ -178,7 +178,13 @@
 .axi-rail:not(.axi-rail--flush) { box-shadow: var(--axi-shadow-panel); }
 .axi-rail--flush {
   border: 0;
-  border-right: var(--axi-border-panel) solid var(--axi-ink-line);
+  /* Logical, not physical: the border faces the content, and which physical
+     side that is depends on the writing direction. `border-right` was correct
+     only for an LTR rail pinned to the leading edge - under RTL it drew the
+     seam on the outside, facing the viewport. Note that this still assumes the
+     LEADING edge; a rail pinned to the trailing edge of its content needs the
+     other border and has no way to ask for it yet. */
+  border-inline-end: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: 0;
 }
 /* A rail the page scrolls behind, rather than one the page sits beside.
@@ -274,13 +280,34 @@
 /* ---------- toolbar ---------- */
 .axi-toolbar {
   display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
-  padding: 14px;
+  /* Own knob, like .axi-panel's and .axi-rail's. The toolbar was the one
+     container in this language whose padding was a literal, and 14px is a
+     figure for a strip above a list - a transport bar over a video or a map
+     is the same object at a third of the height, and had no way to say so
+     without writing its own padding and losing the component. */
+  padding: var(--axi-toolbar-pad, 14px);
   background: var(--axi-surface);
   backdrop-filter: var(--axi-surface-filter);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
   border-radius: var(--axi-radius);
   box-shadow: var(--axi-shadow-panel);
 }
+/* A toolbar that floats over moving content rather than sitting above it: the
+   controls pinned over a map, a chart, a replay. Says exactly what
+   .axi-panel--float and .axi-rail--float say, and for the same reason -
+   --axi-surface-float's own note lists the surfaces that need it and the
+   toolbar was missing from that list, which is the whole of the bug. A strip
+   above a list is not floating and keeps the plain surface; a strip over a
+   map is, and a translucent one shows the map through its own labels on any
+   platform where the blur is unavailable. */
+.axi-toolbar--float { background: var(--axi-surface-float); }
+/* A toolbar that must not become two rows. The wrap is right for a strip
+   above a list, where losing a filter off the edge is worse than a second
+   line - and wrong for a bar whose height other things are positioned
+   against, because wrapping moves everything around it. Stated as its own
+   modifier rather than left to each consumer's inline style, so the reason
+   lives here instead of in a comment in somebody's component. */
+.axi-toolbar--nowrap { flex-wrap: nowrap; }
 
 /* ---------- menu popover ---------- */
 /* A disclosure, not a permanent row of controls. The trigger is an .axi-btn
@@ -293,7 +320,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 +590,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 +781,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 +882,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, .axi-rail--float or
+     .axi-toolbar--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.