@axiapps/axi-design 1.10.0 → 1.11.0

package/src/shells.css

@@ -63,16 +63,17 @@
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
   border-color: var(--axi-ink-line);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
 }
 
 /* ---------- notice ---------- */
 .axi-notice {
   display: flex; gap: 14px; padding: 15px 18px;
   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-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
 }
 .axi-notice__icon {
   flex: none; width: 26px; height: 26px;
@@ -90,9 +91,10 @@
   display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
   padding: 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-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
 }
 
 /* ---------- menu popover ---------- */
@@ -107,9 +109,10 @@
   width: var(--axi-menu-width, 310px);
   max-height: 340px; overflow-y: auto; padding: 8px;
   background: var(--axi-surface-raised);
+  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-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
 }
 .axi-menu__pop[hidden] { display: none; }
 .axi-menu__pop label {
@@ -118,7 +121,7 @@
   font-size: 13px; font-weight: 600; color: var(--axi-text-dim); cursor: pointer;
 }
 .axi-menu__pop label:hover { background: var(--axi-ground); color: var(--axi-text); }
-.axi-menu__pop input { margin: 3px 0 0; accent-color: var(--axi-accent); }
+.axi-menu__pop input { margin: 3px 0 0; }
 
 /* ---------- tooltip ---------- */
 /* One line of ink on the darkest surface in the language, so it reads over
@@ -131,7 +134,11 @@
    exists nowhere else, because a keyboard or touch user may never see it. */
 .axi-tooltip {
   position: fixed;
-  z-index: 99999;
+  /* Layer 70: above the drawer and its scrim, above toasts, below a
+     showModal()-ed dialog's top layer - which it was below anyway, since the
+     top layer is above every z-index. 99999 was not a layer, it was an
+     argument with one. */
+  z-index: 70;
   padding: 5px 8px;
   background: var(--axi-ink-line);
   color: var(--axi-text);
@@ -149,15 +156,16 @@
   display: flex; flex-direction: column; gap: 11px;
   padding: 22px 16px 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-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel);
   font: inherit; color: inherit; text-decoration: none; cursor: pointer;
   transition: transform .1s, box-shadow .1s;
 }
 .axi-card:hover {
   transform: translate(-3px, -3px);
-  box-shadow: var(--axi-offset-panel-hover) var(--axi-offset-panel-hover) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-panel-hover);
 }
 /* The top strip is drawn from the card itself so a renderer does not have to
    emit an extra element for it. It is opt-in: a card only gets a strip when
@@ -205,12 +213,13 @@
 .axi-card:hover .axi-card__go { color: var(--axi-text); }
 
 /* ---------- drawer ---------- */
-.axi-scrim { position: fixed; inset: 0; z-index: 50; background: var(--axi-scrim); border: 0; }
+.axi-scrim { position: fixed; inset: 0; z-index: 50; background: var(--axi-scrim); backdrop-filter: var(--axi-surface-filter); border: 0; }
 .axi-drawer {
   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);
+  backdrop-filter: var(--axi-surface-filter);
   border-left: var(--axi-border-panel) solid var(--axi-ink-line);
 }
 .axi-drawer[hidden], .axi-scrim[hidden] { display: none; }
@@ -236,7 +245,7 @@
 }
 .axi-drawer__close:hover {
   background: var(--axi-accent); color: var(--axi-accent-ink);
-  box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  box-shadow: var(--axi-shadow-control);
   transform: translate(-2px, -2px);
 }
 .axi-drawer__body { overflow-y: auto; padding: 18px 24px 30px; }
@@ -304,10 +313,70 @@
 .axi-titlebar__btns button:hover { background: var(--axi-surface); color: var(--axi-text); }
 /* Close is the one destructive control in the chrome, and the one place a
    status ink belongs in a titlebar. */
-.axi-titlebar__btns button:last-child:hover { background: var(--axi-danger); color: var(--axi-ink-line); }
+.axi-titlebar__btns button:last-child:hover { background: var(--axi-danger); color: var(--axi-ink-on-fill); }
 /* The scrolling region under the chrome. */
 .axi-window__body { flex: 1; overflow-y: auto; }
 
+/* ---------- breadcrumbs ---------- */
+/* A path, not a control strip. The separator is the family diamond (rule 7)
+   drawn in the rule ink, so it reads as punctuation rather than as a third
+   link the reader could click.
+   The current crumb is NOT filled. Rule 5 reserves a fill for a state
+   something is in - pressed, on, current-as-in-selected - and the last crumb
+   is a position, not a control that is on. It takes the full text ink and the
+   label weight instead. */
+.axi-crumbs {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+  font: var(--axi-t-small);
+}
+.axi-crumbs a { color: var(--axi-text-dim); text-decoration: none; }
+.axi-crumbs a:hover { color: var(--axi-accent); }
+/* 7px, matching the prose bullet (src/prose.css) exactly, with the same
+   --axi-border-hairline outline: rule 7 calls the motif "a 45deg-rotated
+   outlined square", and a bare fill with no border does not match it. The
+   hairline, not one of the two form steps, is the established weight for a
+   diamond this small - at 6px a 2px border on each side would leave only a
+   2px fill, too tight to read as a diamond at all. */
+.axi-crumbs__sep {
+  width: 7px; height: 7px; flex: none;
+  background: var(--axi-rule);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+}
+.axi-crumbs [aria-current="page"] { color: var(--axi-text); font-weight: 800; }
+
+/* ---------- pagination ---------- */
+/* The same idea .axi-tabs already expresses, applied to a row of pages: the
+   current one is filled and blocked, because "this one is on" is what a fill
+   means here. Written as its own component rather than as a tabs modifier
+   because a pager sits under content and a tab strip sits in a titlebar, and
+   the two disagree about everything except that treatment. */
+.axi-pages { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
+.axi-pages__n {
+  min-width: 36px;
+  padding: 8px 10px;
+  text-align: center;
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  color: var(--axi-text-dim);
+  text-decoration: none;
+  background: var(--axi-surface-raised);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+}
+.axi-pages__n:hover { color: var(--axi-text); }
+.axi-pages__n[aria-current="page"] {
+  background: var(--axi-accent);
+  color: var(--axi-accent-ink);
+  box-shadow: var(--axi-shadow-control);
+}
+/* The elided run between two page numbers. Not a control and never focusable:
+   it is the only thing in the row a reader cannot go to. */
+.axi-pages__gap { color: var(--axi-text-faint); padding: 0 2px; }
+
 @media (max-width: 640px) {
   .axi-mast__in { min-height: 0; padding: 10px 16px; gap: 12px; }
   .axi-tabs { margin-left: 0; width: 100%; overflow-x: auto; }
@@ -317,9 +386,136 @@
      to the panel hover block, so a card on a hover-emulating touch device
      jumped further than it does on the desktop it was tuned for. */
   .axi-notice, .axi-toolbar, .axi-card {
-    box-shadow: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+    box-shadow: var(--axi-shadow-control);
   }
   .axi-card:hover {
-    box-shadow: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
+    box-shadow: var(--axi-shadow-control-hover);
   }
 }
+
+/* ---------- modal ---------- */
+/* A real <dialog>. Focus trapping, Esc-to-close, inertness for everything
+   behind it and promotion to the top layer all come from the browser, and
+   none of them can be had from CSS - so the alternative was a <div> plus a
+   focus trap this language has no script to write.
+   That choice has one visible cost, and it is named here rather than left to
+   be discovered: a <dialog> brings its own ::backdrop, so the modal styles
+   that instead of reusing .axi-scrim. The two look identical and are not the
+   same element. Reusing .axi-scrim would have meant giving up <dialog>.
+   Panel weight and panel block: it is the most raised thing on the page. */
+.axi-modal {
+  padding: 0;
+  max-width: min(var(--axi-modal-width, 560px), calc(100vw - 32px));
+  background: var(--axi-surface);
+  backdrop-filter: var(--axi-surface-filter);
+  color: var(--axi-text);
+  border: var(--axi-border-panel) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius);
+  box-shadow: var(--axi-shadow-panel);
+}
+.axi-modal::backdrop { background: var(--axi-scrim); backdrop-filter: var(--axi-surface-filter); }
+/* The head and foot are divided from the body by rules, not by outlines: they
+   are parts of one raised thing, and rule 8's reading applies - a line inside
+   a raised surface separates its parts, it does not raise them. */
+.axi-modal__head {
+  display: flex; align-items: center; gap: 12px;
+  padding: 15px 18px;
+  border-bottom: var(--axi-border-control) solid var(--axi-rule);
+}
+.axi-modal__head h2 { font: var(--axi-t-h3); letter-spacing: var(--axi-ls-h3); margin: 0; }
+.axi-modal__body { padding: 18px; font: var(--axi-t-small); color: var(--axi-text-dim); }
+.axi-modal__foot {
+  display: flex; justify-content: flex-end; gap: 9px;
+  padding: 15px 18px;
+  border-top: var(--axi-border-control) solid var(--axi-rule);
+}
+
+/* ---------- accordion ---------- */
+/* <details>/<summary>, so it opens and closes with no script and is
+   announced as a disclosure. The native marker is removed and replaced with
+   the family diamond, which rotates a quarter turn on [open] - a transform,
+   so it is inside rule 4's rationing without needing rule 11. */
+.axi-accordion {
+  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);
+}
+/* Stacked accordions need the gap the block occupies, or each one's block
+   lands on the next one's outline. */
+.axi-accordion + .axi-accordion { margin-top: calc(var(--axi-offset-panel) + 8px); }
+.axi-accordion__head {
+  display: flex; align-items: center; gap: 12px;
+  padding: 14px 18px;
+  cursor: pointer;
+  list-style: none;
+  font: var(--axi-t-label);
+  letter-spacing: var(--axi-ls-label);
+  color: var(--axi-text);
+}
+.axi-accordion__head::-webkit-details-marker { display: none; }
+.axi-accordion__head::before {
+  content: "";
+  width: 8px; height: 8px; flex: none;
+  background: var(--axi-accent);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+  transition: transform .12s;
+}
+/* A 135deg turn, not the quarter turn "45deg to 180deg" might suggest by the
+   numbers alone: a literal quarter turn on a square lands back on the same
+   silhouette and would erase the open/closed cue. */
+.axi-accordion[open] .axi-accordion__head::before { transform: rotate(180deg); }
+.axi-accordion__body {
+  padding: 0 18px 16px 38px;
+  font: var(--axi-t-small);
+  color: var(--axi-text-dim);
+}
+
+/* ---------- toasts ---------- */
+/* Layer 60, between the drawer and the tooltip.
+   The region is a layout box and nothing else, sized only by its content -
+   it sets no width or height of its own, so an empty one is zero-area and
+   pointer-events: none is not there to stop it covering the page. It is
+   there because the flex gaps between stacked toasts would otherwise eat
+   clicks aimed at the corner beneath them. The toasts themselves take their
+   events back.
+   This language ships no script, so appearing, stacking and leaving on a
+   timer are the consumer's: insert a .axi-toast into the region and remove it
+   when it is done. That is the same contract .axi-menu already publishes for
+   its open state, not a new kind of promise. */
+.axi-toasts {
+  position: fixed;
+  right: var(--axi-gutter);
+  bottom: var(--axi-gutter);
+  z-index: 60;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: calc(var(--axi-offset-control) + 9px);
+  pointer-events: none;
+}
+/* Control weight and control block, not panel: a stack of four panels over
+   the page is a wall. A toast is a chip-sized raised thing. */
+.axi-toast {
+  pointer-events: auto;
+  display: flex; align-items: center; gap: 12px;
+  padding: 12px 15px;
+  background: var(--axi-surface-raised);
+  backdrop-filter: var(--axi-surface-filter);
+  border: var(--axi-border-control) solid var(--axi-ink-line);
+  border-radius: var(--axi-radius-sm);
+  box-shadow: var(--axi-shadow-control);
+  font: var(--axi-t-small);
+  color: var(--axi-text);
+}
+.axi-toast__dot {
+  width: 10px; height: 10px; flex: none;
+  background: var(--axi-accent);
+  border: var(--axi-border-hairline) solid var(--axi-ink-line);
+  transform: rotate(45deg);
+}
+.axi-toast--ok .axi-toast__dot { background: var(--axi-ok); }
+.axi-toast--warn .axi-toast__dot { background: var(--axi-warn); }
+.axi-toast--danger .axi-toast__dot { background: var(--axi-danger); }

package/src/tokens.css

@@ -20,6 +20,15 @@
   --axi-text-dim: #a7b0be;
   --axi-text-faint: #7c8695;
   --axi-scrim: rgba(6, 7, 9, .72); /* behind a drawer */
+  /* What a surface does to whatever is behind it. `none` here, and `none` is
+     genuinely inert - it paints nothing and, unlike a transform, establishes
+     no containing block, so the fixed-descendant trap rule 4 documents stays
+     closed. It exists so a theme has somewhere to put the answer: a glass
+     theme makes the surfaces translucent and restates this token, and the
+     blur arrives on every surface at once without one component learning the
+     word. This is the toll the Themes section describes - a theme cannot
+     invent a capability, so the capability is declared here first, inert. */
+  --axi-surface-filter: none;
 
   /* --- accent & status --- */
   --axi-accent: #ffc53d;
@@ -27,6 +36,13 @@
      enough to pass contrast on this ground; an app choosing a dark accent
      overrides this to --axi-text rather than editing components. */
   --axi-accent-ink: var(--axi-ink-line);
+  /* Text drawn on top of a STATUS fill (an ok/warn/danger chip, a close
+     button gone red). Identical to --axi-ink-line today, which is precisely
+     why it has to exist: components were spelling this "the outline colour"
+     and it happened to read correctly. A theme that makes the outline light
+     would otherwise put light text on a bright fill and lose the word. Same
+     idea as --axi-accent-ink above, for the fills that are not the accent. */
+  --axi-ink-on-fill: var(--axi-ink-line);
   --axi-meta: #4ec3ff;            /* the one cool ink: meta only, never a status */
   --axi-ok: #2fd38a;
   --axi-warn: #ff7a2f;
@@ -45,6 +61,15 @@
      block instead of admitting bare literals. */
   --axi-offset-panel-hover: 10px;
   --axi-offset-control-hover: 6px;
+  /* The block itself, composed once. A component asks for "the panel block",
+     not for an offset it then has to assemble into a shadow correctly four
+     times per file - and a theme gets one place to restate what raising a
+     thing looks like. The shape is still rule 3's: two equal offsets, zero
+     blur, the outline ink. */
+  --axi-shadow-panel: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
+  --axi-shadow-control: var(--axi-offset-control) var(--axi-offset-control) 0 var(--axi-ink-line);
+  --axi-shadow-panel-hover: var(--axi-offset-panel-hover) var(--axi-offset-panel-hover) 0 var(--axi-ink-line);
+  --axi-shadow-control-hover: var(--axi-offset-control-hover) var(--axi-offset-control-hover) 0 var(--axi-ink-line);
   /* The form is sharp. A hard outline, a hard block and a rounded corner are
      three decisions, and the rounded one softens the other two: the corner is
      the first place a flat outlined shape can start looking like a button in