@axiapps/axi-design 1.38.0 → 1.40.0

package/README.md

@@ -144,6 +144,7 @@ not "what does the system look like". Everything else is
 | `--axi-pill-size` | an `.axi-pill`'s text size, which travels with its padding | `13px` | `<button class="axi-pill" style="--axi-pill-size: 10px">` |
 | `--axi-input-pad` | the padding inside an `.axi-input`, for a field that is furniture in a header rather than a control on a page | `11px 12px` | `<input class="axi-input" style="--axi-input-pad: 7px 12px">` |
 | `--axi-input-size` | an `.axi-input`'s text size, which travels with its padding | `14px` | `<input class="axi-input" style="--axi-input-size: 13px">` |
+| `--axi-action-hit` | the hit target of an `.axi-action--glyph`, whose label is one character and gives the pointer nothing to land on | `24px` | `<button class="axi-action axi-action--glyph" style="--axi-action-hit: 32px">` |
 | `--axi-well-pad` | the padding inside an `.axi-well` | `10px` | `<div class="axi-well" style="--axi-well-pad: 18px">` |
 | `--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">` |

package/dist/axi.css

@@ -786,6 +786,74 @@ button.axi-panel--tile:hover,
 .axi-link:where(:hover),
 .axi-prose a:where(:hover) { color: var(--axi-text); }
 
+/* ---------- quiet action ---------- */
+/* A control that is only its label. Not a button - it draws no box, takes no
+   padding and sits inside running text or a dense header where a box would be
+   the loudest thing on screen. Not a link either: a link goes somewhere and
+   says so with an underline and the accent, while this does something to the
+   view you are already looking at.
+
+   It exists because the first consumer counted had ninety of them and no class
+   for any of them, so each spelled out its own resting colour and - the part
+   that actually broke - its own hover colour. Fifteen different hover colours
+   across ninety sites, every one a literal from a utility palette rather than
+   a token, which means every one of them left the theme at the moment the
+   cursor arrived.
+
+   Three of those ninety did worse than leave the theme. A control resting on
+   the warning ink hovered to a neutral grey, and one resting on the danger ink
+   hovered to white: the verdict disappearing exactly when the reader reaches
+   for it. That is the same failure rule 6's addendum describes on .axi-btn,
+   arriving by a different road - not a component out-ranking its own modifier,
+   but an author naming a colour that had no business being named. The fix is
+   the same shape, and it is why the hover below is `:where(:hover)`: it weighs
+   one class, so `axi-action axi-ink-danger` stays red under the cursor and
+   takes its feedback from the underline instead.
+
+   `font: inherit` and not the label font: these land at 10px in a chart
+   legend, 11px in a section header and 14px in a modal, and a control that is
+   only its label has no business resizing the text around it. The weight is
+   inherited too, which is where this parts company with .axi-link - a link is
+   600 wherever it lands because it must be findable in a paragraph; an action
+   already sits where the reader is looking. */
+.axi-action {
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+  color: var(--axi-text-dim);
+  cursor: pointer;
+  transition: color .1s;
+}
+/* Brighten for the uninked case, underline for every case. The colour change
+   is a fallback the ink layer beats by design, so an inked action would have
+   no hover feedback at all without a second signal that names no colour. An
+   underline is the one this language already trusts - it is how .axi-link
+   marks itself actionable - and it reads on amber, on red and on plain alike. */
+.axi-action:where(:hover) {
+  color: var(--axi-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* An action whose label is a single glyph: a clear-field cross, a stepper
+   arrow, a star that marks a favourite. Same control, but a glyph gives the
+   pointer almost nothing to land on, so this is the one thing the plain action
+   does not need - a hit target. The box stays invisible; only its size is
+   declared. */
+.axi-action--glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--axi-action-hit, 24px);
+  min-height: var(--axi-action-hit, 24px);
+  /* The label is a glyph, so there is no text to underline - the brighten is
+     the whole signal and the underline would draw a stray rule beside it. */
+  text-decoration: none;
+}
+.axi-action--glyph:where(:hover) { text-decoration: none; }
+
 /* ---------- keyboard key ---------- */
 /* A key on the keyboard, named in the interface: the Esc that closes a
    palette, the Ctrl K that opens it. Drawn as a small control rather than as a
@@ -2429,7 +2497,19 @@ textarea.axi-input {
    alternative of filling the container and leaving the cells transparent: a
    sticky head has to carry its own fill, because a fill on `thead` stays
    behind while the cells travel. */
-.axi-table tbody tr:hover :is(td, th) {
+/* Written to weigh exactly one class, which takes some doing for a rule that
+   has to reach a descendant. `.axi-table tbody tr:hover :is(td, th)` weighed
+   three classes and four elements, so it beat the ink layer's one - and the
+   consumer that found this had six cells inked danger and six inked ok, every
+   one of which went plain the moment its row was hovered. A red value and a
+   green value both losing their verdict exactly as the reader reaches for them
+   is rule 6's addendum again, arriving through a descendant selector.
+
+   `.axi-table` is the only thing here that counts, so this lands level with the
+   resting cell rule (`.axi-table :where(td, tbody th)`, also one class) and
+   wins on order, while an ink class in utilities.css - one class, later file -
+   wins over both. */
+.axi-table :where(tbody tr:hover) :where(td, th) {
   background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);

package/dist/themes/flat.css

@@ -0,0 +1,27 @@
+/* axi design language - generated by scripts/build.mjs.
+   Edit the files in src/ and run `npm run build`; do not edit this file. */
+
+[data-axi-theme="flat"] {
+  --axi-ground: #090b10;
+  --axi-surface: linear-gradient(#1c2130, #181d2c);
+  --axi-surface-raised: linear-gradient(#242a3b, #202636);
+  --axi-well-fill: #141822;
+  --axi-ink-line: rgba(255, 255, 255, .10);
+  --axi-rule: rgba(255, 255, 255, .07);
+  --axi-ground-deep: #0c1015;
+  --axi-accent-ink: #0c1015;
+  --axi-ink-on-fill: #0c1015;
+  --axi-text: #e8eaed;
+  --axi-text-dim: #8b929e;
+  --axi-text-faint: #5d6577;
+  --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);
+  --axi-shadow-control-hover: 0 3px 10px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .06);
+  --axi-border-panel: 1px;
+  --axi-border-control: 1px;
+  --axi-border-hairline: 1px;
+  --axi-radius: 6px;
+  --axi-radius-sm: 4px;
+  --axi-radius-xs: 2px;
+}

package/package.json

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

@@ -127,7 +127,19 @@
    alternative of filling the container and leaving the cells transparent: a
    sticky head has to carry its own fill, because a fill on `thead` stays
    behind while the cells travel. */
-.axi-table tbody tr:hover :is(td, th) {
+/* Written to weigh exactly one class, which takes some doing for a rule that
+   has to reach a descendant. `.axi-table tbody tr:hover :is(td, th)` weighed
+   three classes and four elements, so it beat the ink layer's one - and the
+   consumer that found this had six cells inked danger and six inked ok, every
+   one of which went plain the moment its row was hovered. A red value and a
+   green value both losing their verdict exactly as the reader reaches for them
+   is rule 6's addendum again, arriving through a descendant selector.
+
+   `.axi-table` is the only thing here that counts, so this lands level with the
+   resting cell rule (`.axi-table :where(td, tbody th)`, also one class) and
+   wins on order, while an ink class in utilities.css - one class, later file -
+   wins over both. */
+.axi-table :where(tbody tr:hover) :where(td, th) {
   background: var(--axi-surface-raised);
   background-attachment: fixed;
   color: var(--axi-text);

package/src/primitives.css

@@ -493,6 +493,74 @@ button.axi-panel--tile:hover,
 .axi-link:where(:hover),
 .axi-prose a:where(:hover) { color: var(--axi-text); }
 
+/* ---------- quiet action ---------- */
+/* A control that is only its label. Not a button - it draws no box, takes no
+   padding and sits inside running text or a dense header where a box would be
+   the loudest thing on screen. Not a link either: a link goes somewhere and
+   says so with an underline and the accent, while this does something to the
+   view you are already looking at.
+
+   It exists because the first consumer counted had ninety of them and no class
+   for any of them, so each spelled out its own resting colour and - the part
+   that actually broke - its own hover colour. Fifteen different hover colours
+   across ninety sites, every one a literal from a utility palette rather than
+   a token, which means every one of them left the theme at the moment the
+   cursor arrived.
+
+   Three of those ninety did worse than leave the theme. A control resting on
+   the warning ink hovered to a neutral grey, and one resting on the danger ink
+   hovered to white: the verdict disappearing exactly when the reader reaches
+   for it. That is the same failure rule 6's addendum describes on .axi-btn,
+   arriving by a different road - not a component out-ranking its own modifier,
+   but an author naming a colour that had no business being named. The fix is
+   the same shape, and it is why the hover below is `:where(:hover)`: it weighs
+   one class, so `axi-action axi-ink-danger` stays red under the cursor and
+   takes its feedback from the underline instead.
+
+   `font: inherit` and not the label font: these land at 10px in a chart
+   legend, 11px in a section header and 14px in a modal, and a control that is
+   only its label has no business resizing the text around it. The weight is
+   inherited too, which is where this parts company with .axi-link - a link is
+   600 wherever it lands because it must be findable in a paragraph; an action
+   already sits where the reader is looking. */
+.axi-action {
+  padding: 0;
+  background: none;
+  border: 0;
+  font: inherit;
+  text-align: inherit;
+  color: var(--axi-text-dim);
+  cursor: pointer;
+  transition: color .1s;
+}
+/* Brighten for the uninked case, underline for every case. The colour change
+   is a fallback the ink layer beats by design, so an inked action would have
+   no hover feedback at all without a second signal that names no colour. An
+   underline is the one this language already trusts - it is how .axi-link
+   marks itself actionable - and it reads on amber, on red and on plain alike. */
+.axi-action:where(:hover) {
+  color: var(--axi-text);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* An action whose label is a single glyph: a clear-field cross, a stepper
+   arrow, a star that marks a favourite. Same control, but a glyph gives the
+   pointer almost nothing to land on, so this is the one thing the plain action
+   does not need - a hit target. The box stays invisible; only its size is
+   declared. */
+.axi-action--glyph {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: var(--axi-action-hit, 24px);
+  min-height: var(--axi-action-hit, 24px);
+  /* The label is a glyph, so there is no text to underline - the brighten is
+     the whole signal and the underline would draw a stray rule beside it. */
+  text-decoration: none;
+}
+.axi-action--glyph:where(:hover) { text-decoration: none; }
+
 /* ---------- keyboard key ---------- */
 /* A key on the keyboard, named in the interface: the Esc that closes a
    palette, the Ctrl K that opens it. Drawn as a small control rather than as a