@axiapps/axi-design 1.20.0 → 1.22.0

package/dist/axi.css

@@ -1183,7 +1183,11 @@ textarea.axi-input {
   font-size: 14px; font-weight: 900;
   border: var(--axi-border-control) solid var(--axi-ink-line);
 }
-.axi-notice p { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
+/* :where() around the element, here and on the card's and the quote's copy,
+   for the reason spelled out over `.axi-table :where(thead th)` in data.css: a
+   slot that holds a consumer's words must not out-rank the ink the consumer
+   puts on them. */
+.axi-notice :where(p) { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
 .axi-notice b { color: var(--axi-accent); font-weight: 800; }
 
 /* ---------- toolbar ---------- */
@@ -1452,7 +1456,7 @@ textarea.axi-input {
   color: var(--axi-text-faint);
   letter-spacing: .08em; text-transform: uppercase;
 }
-.axi-card p { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
+.axi-card :where(p) { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
 /* Pushed to the bottom so that in an equalised grid row every card's meta
    strip lands on the same line and the rules read as continuous across the
    grid. The cost is empty space on cards with less content. */
@@ -1515,7 +1519,7 @@ textarea.axi-input {
   background: var(--axi-ground);
   border-radius: 0 var(--axi-radius-sm) var(--axi-radius-sm) 0;
 }
-.axi-quote p { margin: 0; font-size: 13px; font-style: italic; color: var(--axi-text-dim); line-height: 1.5; }
+.axi-quote :where(p) { margin: 0; font-size: 13px; font-style: italic; color: var(--axi-text-dim); line-height: 1.5; }
 .axi-quote cite {
   display: block; margin-top: 7px;
   font-style: normal; font-size: 11.5px; font-weight: 700;
@@ -1842,7 +1846,17 @@ textarea.axi-input {
 .axi-table td { text-align: right; white-space: nowrap; }
 .axi-table th:first-child,
 .axi-table td:first-child { text-align: left; }
-.axi-table th {
+/* `thead th`, not `th`. A row's name is a `<th scope="row">` - that is what
+   tells a screen reader which cell labels the row - and it is a name, not a
+   column heading: uppercase micro type down the first column would shout every
+   row's label at the reader. A row header takes the cell treatment below.
+
+   The element part is wrapped in :where() so this rule weighs one class, not a
+   class and a type. A base rule that out-ranks the component's own modifiers is
+   a base rule nothing can correct: at (0,1,1) this beat `.axi-table__num` and
+   every ink class a consumer could put on a cell, so the column that carries
+   the measured value was silently still the dim one. */
+.axi-table :where(thead th) {
   padding: 0 10px 10px;
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -1850,7 +1864,7 @@ textarea.axi-input {
   color: var(--axi-text-faint);
   border-bottom: var(--axi-border-control) solid var(--axi-rule);
 }
-.axi-table td {
+.axi-table :where(td, tbody th) {
   padding: 9px 10px;
   font: var(--axi-t-small);
   font-weight: 700;
@@ -1861,7 +1875,7 @@ textarea.axi-input {
    hovering a row is not a status, and forty rows that each flash a colour on
    the way past the one you want is the tinted-everything failure rule 2 is
    about. */
-.axi-table tbody tr:hover td { background: var(--axi-surface-raised); color: var(--axi-text); }
+.axi-table tbody tr:hover :is(td, th) { background: var(--axi-surface-raised); color: var(--axi-text); }
 /* The measured value in a row, as opposed to its supporting numbers. */
 .axi-table__num { color: var(--axi-text); }
 /* A name cell: an icon, a diamond or a rank beside the label. */
@@ -1879,6 +1893,93 @@ textarea.axi-input {
 }
 .axi-table__rank--top { background: var(--axi-accent); color: var(--axi-accent-ink); }
 
+/* A table too wide and too tall for the panel holding it: twenty numeric
+   columns against forty players, scrolled in both directions. Rule 8 still
+   decides what every line means - the head is a lid at the control step, the
+   rows are hairlines - and the only new thing here is that the lid and the
+   row's name have to stay put while the numbers move under them.
+
+   `border-collapse: separate` is load-bearing, not housekeeping. A collapsed
+   table hoists its cell borders onto the table itself, and a border owned by
+   the table scrolls away with it, so a sticky head drawn under `collapse`
+   loses the very line that makes it a lid. Separate borders stay with the
+   cell that declared them. Each modifier sets it, so either works alone.
+
+   Note what is NOT here. No block: an edge that has to hold under scrolling
+   is a border, and a block in this language is an offset rectangle, which is
+   not the shape of the top of a column. No scrolled-under state either - the
+   head's edge is drawn whether anything has moved beneath it or not, so there
+   is nothing for scrolling to reveal. */
+/* The isolation is the reason the three z-indexes below can be 1, 2 and 3:
+   they are resolved in here and cannot compete with the page stack. See the
+   layer table in docs/RULES.md. */
+.axi-table__scroll { overflow: auto; isolation: isolate; }
+/* The head stays. */
+.axi-table--sticky { border-collapse: separate; border-spacing: 0; }
+.axi-table--sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* The float surface, not the raised one, and this is the whole reason
+     --axi-surface-float exists: rows travel behind both of these, and a glass
+     theme's ordinary surfaces are alpha, so a head at --axi-surface-raised
+     would have numbers sliding through it. Opaque is not a look here, it is
+     the requirement. */
+  background: var(--axi-surface-float);
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The first column stays. It holds the row's name, and a name scrolled out of
+   sight makes every number left of it anonymous - which is the whole reason a
+   wide table is readable at all. Its edge is the cut the head carries, turned
+   ninety degrees. */
+.axi-table--pinned { border-collapse: separate; border-spacing: 0; }
+.axi-table--pinned :is(thead, tbody) :is(th, td):first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--axi-surface-float);
+  border-right: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The corner belongs to both and has to outrank both. */
+.axi-table--sticky.axi-table--pinned thead th:first-child { z-index: 3; }
+/* Twenty columns do not get a leaderboard's padding. The type steps down with
+   them; everything else about the table is unchanged, which is the point of
+   its being a modifier rather than a second table. */
+.axi-table--dense thead th { padding: 0 7px 6px; }
+.axi-table--dense :is(td, tbody th) { padding: 5px 7px; font: var(--axi-t-micro); }
+/* The sorted column, named with the attribute a screen reader already needs
+   in order to announce it. A class beside `aria-sort` would be a second
+   source of truth for one fact. The mark is ink on the head and its edge -
+   not a fill down the column, which is rule 2's tinted-everything failure
+   applied to the one column you are trying to read. */
+.axi-table th[aria-sort] {
+  color: var(--axi-accent);
+  border-bottom-color: var(--axi-accent);
+}
+/* CSS cannot reach "the cells under the sorted head", so the consumer marks
+   them. Full-strength text against the column's dimmed neighbours. */
+.axi-table__cell--sorted { color: var(--axi-text); }
+/* A sortable heading is a button, because sorting is an action and a <th> you
+   can click but not tab to is a column the keyboard cannot sort. It inherits
+   everything and adds nothing, so a heading looks the same whether it sorts or
+   not - the only thing that marks a sorted column is aria-sort above. */
+.axi-table__sort {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.axi-table th:first-child .axi-table__sort { justify-content: flex-start; }
+
 /* ---------- meter ---------- */
 /* Rule 9: a proportion is a length. The track is the ground, the fill is the
    value, and the fill is one ink at full strength - a tinted or faded bar is
@@ -2219,3 +2320,59 @@ textarea.axi-input {
 }
 
 .axi-prose img { max-width: 100%; height: auto; border-radius: var(--axi-radius-sm); }
+
+/* --- utilities.css --- */
+/* axi design language - utilities.
+   Two families of single-purpose class, and the file is last in the cascade
+   because that is the whole point of it: a utility has to be able to overrule
+   the component it sits inside, and it is not allowed to buy that with
+   !important or with a padded selector.
+
+   Why the language needs them at all. Rules 5 and 6 draw a distinction the
+   reader is expected to make at a glance - a filled status against a cool ink
+   that is commentary - and until now the only way to say either was to be a
+   component that said it for you. Real markup is full of places that are not
+   components: a number in a sentence, a word in a legend, a value beside a
+   label. An app with no way to say "this reading is bad" in those places will
+   reach for a colour literal, and at that moment the theme stops reaching it.
+   So the language names the meanings, and the app spends them by name.
+
+   What they deliberately are not. An ink sets colour and nothing else - no
+   size, no weight, no spacing, no surface - and an edge sets border-colour
+   without asserting that there is a border. Neither is a shorthand for a
+   component: a status that belongs to a whole object still wants the chip or
+   the cap that rule 5 describes, because an object's verdict should be a shape
+   the eye finds, not a recoloured word inside it. These are for the marks
+   inside those shapes.
+
+   And there is no fill family. Under rule 2 colour at partial opacity over the
+   ground is not available, and an opaque status fill behind arbitrary text is a
+   chip - which the language already ships. A surface stays a surface token. */
+
+/* The five meanings. Ordered as rule 5 orders them: the three statuses, then
+   the cool ink that is not a status, then the accent - which means "the thing
+   you picked" and never "good". */
+.axi-ink-ok { color: var(--axi-ok); }
+.axi-ink-warn { color: var(--axi-warn); }
+.axi-ink-danger { color: var(--axi-danger); }
+.axi-ink-meta { color: var(--axi-meta); }
+.axi-ink-accent { color: var(--axi-accent); }
+
+/* The three neutral steps. `plain` rather than `text` so that reading the class
+   list does not suggest it does something to the text other than ink it, and so
+   the three read as one scale. */
+.axi-ink-plain { color: var(--axi-text); }
+.axi-ink-dim { color: var(--axi-text-dim); }
+.axi-ink-faint { color: var(--axi-text-faint); }
+
+/* Edges. `rule` and `line` are the two neutral weights of meaning, not of
+   width: --axi-rule is the quiet separator inside a surface, --axi-ink-line the
+   full ink a raised thing is outlined in. Width stays with whoever drew the
+   border. */
+.axi-edge-ok { border-color: var(--axi-ok); }
+.axi-edge-warn { border-color: var(--axi-warn); }
+.axi-edge-danger { border-color: var(--axi-danger); }
+.axi-edge-meta { border-color: var(--axi-meta); }
+.axi-edge-accent { border-color: var(--axi-accent); }
+.axi-edge-rule { border-color: var(--axi-rule); }
+.axi-edge-line { border-color: var(--axi-ink-line); }

package/docs/RULES.md

@@ -243,6 +243,30 @@ see is a slug floating in the card.
 meaning. It is the only ink guaranteed not to mean "how bad is this" — which is
 what makes it readable as commentary at a glance.
 
+### Saying a meaning outside a component
+
+Rules 5 and 6 are about marks, not only about components. A number inside a
+sentence, a word in a legend, a value beside its label — each of these can be a
+status or can be commentary, and a reader is entitled to see which. So the five
+meanings are available as inks: `.axi-ink-ok`, `.axi-ink-warn`,
+`.axi-ink-danger`, `.axi-ink-meta`, `.axi-ink-accent`, with the three neutral
+steps as `.axi-ink-plain`, `.axi-ink-dim` and `.axi-ink-faint`, and the same
+list again as `.axi-edge-*` for a border's colour.
+
+An ink colours a mark. It is not a way to skip the chip or the status cap, which
+are what rule 5 asks for when the verdict belongs to a whole object: a shape the
+eye finds beats a recoloured word inside a paragraph. Reach for an ink when
+there is no object, only a mark.
+
+They live in `src/utilities.css`, last in the cascade, which is how a single
+class overrules the component it sits inside without `!important`. That places
+an obligation on components in the other direction: **a component's base rules
+may not out-rank its own modifiers.** A rule written `.axi-table td` weighs a
+class and a type, so it silently defeats both `.axi-table__num` and any ink a
+consumer puts on the cell — the fix is `:where()` around the element, which
+spends no specificity. Where a component holds a consumer's content, wrap the
+element part.
+
 ## 7. The diamond is the family motif
 
 A 45°-rotated outlined square. Bullet, status dot, language marker, and scaled
@@ -461,6 +485,9 @@ instead of joining it.
 
 | Layer | z-index | What sits here |
 |---|---|---|
+| Pinned column | 1 | `.axi-table--pinned`'s first column |
+| Sticky head | 2 | `.axi-table--sticky`'s `thead th` |
+| Table corner | 3 | where the two cross |
 | Sticky chrome | 40 | `.axi-mast` |
 | Popovers | 41 | `.axi-menu__pop`, `.axi-picker__pop` |
 | Scrim | 50 | `.axi-scrim` |
@@ -473,6 +500,15 @@ The modal has no number on purpose. A `<dialog>` opened with `showModal()` is
 promoted to the browser's top layer, which sits above every `z-index` there is;
 writing a number in that row would describe a competition the modal is not in.
 
+The first three are sealed rather than low. `.axi-table__scroll` sets
+`isolation: isolate`, so those numbers are resolved inside the scroll container
+and never compete with the page layers under them - a table's sticky head
+cannot climb over a mast, and a table inside a drawer cannot reach out of it.
+They are listed because a table needs three orderings among its own cells and a
+number that is never written down is a number that drifts; the isolation is
+what keeps 1, 2 and 3 from meaning anything outside the table that declares
+them.
+
 A negative `z-index` inside a component's own `isolation` context — the sigil's
 backing shape — is not a layer and is not listed. It is invisible outside the
 component that owns it.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.20.0",
+  "version": "1.22.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",

package/src/data.css

@@ -64,7 +64,17 @@
 .axi-table td { text-align: right; white-space: nowrap; }
 .axi-table th:first-child,
 .axi-table td:first-child { text-align: left; }
-.axi-table th {
+/* `thead th`, not `th`. A row's name is a `<th scope="row">` - that is what
+   tells a screen reader which cell labels the row - and it is a name, not a
+   column heading: uppercase micro type down the first column would shout every
+   row's label at the reader. A row header takes the cell treatment below.
+
+   The element part is wrapped in :where() so this rule weighs one class, not a
+   class and a type. A base rule that out-ranks the component's own modifiers is
+   a base rule nothing can correct: at (0,1,1) this beat `.axi-table__num` and
+   every ink class a consumer could put on a cell, so the column that carries
+   the measured value was silently still the dim one. */
+.axi-table :where(thead th) {
   padding: 0 10px 10px;
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);
@@ -72,7 +82,7 @@
   color: var(--axi-text-faint);
   border-bottom: var(--axi-border-control) solid var(--axi-rule);
 }
-.axi-table td {
+.axi-table :where(td, tbody th) {
   padding: 9px 10px;
   font: var(--axi-t-small);
   font-weight: 700;
@@ -83,7 +93,7 @@
    hovering a row is not a status, and forty rows that each flash a colour on
    the way past the one you want is the tinted-everything failure rule 2 is
    about. */
-.axi-table tbody tr:hover td { background: var(--axi-surface-raised); color: var(--axi-text); }
+.axi-table tbody tr:hover :is(td, th) { background: var(--axi-surface-raised); color: var(--axi-text); }
 /* The measured value in a row, as opposed to its supporting numbers. */
 .axi-table__num { color: var(--axi-text); }
 /* A name cell: an icon, a diamond or a rank beside the label. */
@@ -101,6 +111,93 @@
 }
 .axi-table__rank--top { background: var(--axi-accent); color: var(--axi-accent-ink); }
 
+/* A table too wide and too tall for the panel holding it: twenty numeric
+   columns against forty players, scrolled in both directions. Rule 8 still
+   decides what every line means - the head is a lid at the control step, the
+   rows are hairlines - and the only new thing here is that the lid and the
+   row's name have to stay put while the numbers move under them.
+
+   `border-collapse: separate` is load-bearing, not housekeeping. A collapsed
+   table hoists its cell borders onto the table itself, and a border owned by
+   the table scrolls away with it, so a sticky head drawn under `collapse`
+   loses the very line that makes it a lid. Separate borders stay with the
+   cell that declared them. Each modifier sets it, so either works alone.
+
+   Note what is NOT here. No block: an edge that has to hold under scrolling
+   is a border, and a block in this language is an offset rectangle, which is
+   not the shape of the top of a column. No scrolled-under state either - the
+   head's edge is drawn whether anything has moved beneath it or not, so there
+   is nothing for scrolling to reveal. */
+/* The isolation is the reason the three z-indexes below can be 1, 2 and 3:
+   they are resolved in here and cannot compete with the page stack. See the
+   layer table in docs/RULES.md. */
+.axi-table__scroll { overflow: auto; isolation: isolate; }
+/* The head stays. */
+.axi-table--sticky { border-collapse: separate; border-spacing: 0; }
+.axi-table--sticky thead th {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  /* The float surface, not the raised one, and this is the whole reason
+     --axi-surface-float exists: rows travel behind both of these, and a glass
+     theme's ordinary surfaces are alpha, so a head at --axi-surface-raised
+     would have numbers sliding through it. Opaque is not a look here, it is
+     the requirement. */
+  background: var(--axi-surface-float);
+  border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The first column stays. It holds the row's name, and a name scrolled out of
+   sight makes every number left of it anonymous - which is the whole reason a
+   wide table is readable at all. Its edge is the cut the head carries, turned
+   ninety degrees. */
+.axi-table--pinned { border-collapse: separate; border-spacing: 0; }
+.axi-table--pinned :is(thead, tbody) :is(th, td):first-child {
+  position: sticky;
+  left: 0;
+  z-index: 1;
+  background: var(--axi-surface-float);
+  border-right: var(--axi-border-control) solid var(--axi-ink-line);
+}
+/* The corner belongs to both and has to outrank both. */
+.axi-table--sticky.axi-table--pinned thead th:first-child { z-index: 3; }
+/* Twenty columns do not get a leaderboard's padding. The type steps down with
+   them; everything else about the table is unchanged, which is the point of
+   its being a modifier rather than a second table. */
+.axi-table--dense thead th { padding: 0 7px 6px; }
+.axi-table--dense :is(td, tbody th) { padding: 5px 7px; font: var(--axi-t-micro); }
+/* The sorted column, named with the attribute a screen reader already needs
+   in order to announce it. A class beside `aria-sort` would be a second
+   source of truth for one fact. The mark is ink on the head and its edge -
+   not a fill down the column, which is rule 2's tinted-everything failure
+   applied to the one column you are trying to read. */
+.axi-table th[aria-sort] {
+  color: var(--axi-accent);
+  border-bottom-color: var(--axi-accent);
+}
+/* CSS cannot reach "the cells under the sorted head", so the consumer marks
+   them. Full-strength text against the column's dimmed neighbours. */
+.axi-table__cell--sorted { color: var(--axi-text); }
+/* A sortable heading is a button, because sorting is an action and a <th> you
+   can click but not tab to is a column the keyboard cannot sort. It inherits
+   everything and adds nothing, so a heading looks the same whether it sorts or
+   not - the only thing that marks a sorted column is aria-sort above. */
+.axi-table__sort {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  color: inherit;
+  letter-spacing: inherit;
+  text-transform: inherit;
+  cursor: pointer;
+}
+.axi-table th:first-child .axi-table__sort { justify-content: flex-start; }
+
 /* ---------- meter ---------- */
 /* Rule 9: a proportion is a length. The track is the ground, the fill is the
    value, and the fill is one ink at full strength - a tinted or faded bar is

package/src/shells.css

@@ -264,7 +264,11 @@
   font-size: 14px; font-weight: 900;
   border: var(--axi-border-control) solid var(--axi-ink-line);
 }
-.axi-notice p { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
+/* :where() around the element, here and on the card's and the quote's copy,
+   for the reason spelled out over `.axi-table :where(thead th)` in data.css: a
+   slot that holds a consumer's words must not out-rank the ink the consumer
+   puts on them. */
+.axi-notice :where(p) { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
 .axi-notice b { color: var(--axi-accent); font-weight: 800; }
 
 /* ---------- toolbar ---------- */
@@ -533,7 +537,7 @@
   color: var(--axi-text-faint);
   letter-spacing: .08em; text-transform: uppercase;
 }
-.axi-card p { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
+.axi-card :where(p) { margin: 0; font: var(--axi-t-small); color: var(--axi-text-dim); }
 /* Pushed to the bottom so that in an equalised grid row every card's meta
    strip lands on the same line and the rules read as continuous across the
    grid. The cost is empty space on cards with less content. */
@@ -596,7 +600,7 @@
   background: var(--axi-ground);
   border-radius: 0 var(--axi-radius-sm) var(--axi-radius-sm) 0;
 }
-.axi-quote p { margin: 0; font-size: 13px; font-style: italic; color: var(--axi-text-dim); line-height: 1.5; }
+.axi-quote :where(p) { margin: 0; font-size: 13px; font-style: italic; color: var(--axi-text-dim); line-height: 1.5; }
 .axi-quote cite {
   display: block; margin-top: 7px;
   font-style: normal; font-size: 11.5px; font-weight: 700;

package/src/utilities.css

@@ -0,0 +1,54 @@
+/* axi design language - utilities.
+   Two families of single-purpose class, and the file is last in the cascade
+   because that is the whole point of it: a utility has to be able to overrule
+   the component it sits inside, and it is not allowed to buy that with
+   !important or with a padded selector.
+
+   Why the language needs them at all. Rules 5 and 6 draw a distinction the
+   reader is expected to make at a glance - a filled status against a cool ink
+   that is commentary - and until now the only way to say either was to be a
+   component that said it for you. Real markup is full of places that are not
+   components: a number in a sentence, a word in a legend, a value beside a
+   label. An app with no way to say "this reading is bad" in those places will
+   reach for a colour literal, and at that moment the theme stops reaching it.
+   So the language names the meanings, and the app spends them by name.
+
+   What they deliberately are not. An ink sets colour and nothing else - no
+   size, no weight, no spacing, no surface - and an edge sets border-colour
+   without asserting that there is a border. Neither is a shorthand for a
+   component: a status that belongs to a whole object still wants the chip or
+   the cap that rule 5 describes, because an object's verdict should be a shape
+   the eye finds, not a recoloured word inside it. These are for the marks
+   inside those shapes.
+
+   And there is no fill family. Under rule 2 colour at partial opacity over the
+   ground is not available, and an opaque status fill behind arbitrary text is a
+   chip - which the language already ships. A surface stays a surface token. */
+
+/* The five meanings. Ordered as rule 5 orders them: the three statuses, then
+   the cool ink that is not a status, then the accent - which means "the thing
+   you picked" and never "good". */
+.axi-ink-ok { color: var(--axi-ok); }
+.axi-ink-warn { color: var(--axi-warn); }
+.axi-ink-danger { color: var(--axi-danger); }
+.axi-ink-meta { color: var(--axi-meta); }
+.axi-ink-accent { color: var(--axi-accent); }
+
+/* The three neutral steps. `plain` rather than `text` so that reading the class
+   list does not suggest it does something to the text other than ink it, and so
+   the three read as one scale. */
+.axi-ink-plain { color: var(--axi-text); }
+.axi-ink-dim { color: var(--axi-text-dim); }
+.axi-ink-faint { color: var(--axi-text-faint); }
+
+/* Edges. `rule` and `line` are the two neutral weights of meaning, not of
+   width: --axi-rule is the quiet separator inside a surface, --axi-ink-line the
+   full ink a raised thing is outlined in. Width stays with whoever drew the
+   border. */
+.axi-edge-ok { border-color: var(--axi-ok); }
+.axi-edge-warn { border-color: var(--axi-warn); }
+.axi-edge-danger { border-color: var(--axi-danger); }
+.axi-edge-meta { border-color: var(--axi-meta); }
+.axi-edge-accent { border-color: var(--axi-accent); }
+.axi-edge-rule { border-color: var(--axi-rule); }
+.axi-edge-line { border-color: var(--axi-ink-line); }