@axiapps/axi-design 1.35.0 → 1.36.0

package/dist/axi.css

@@ -743,6 +743,49 @@ button.axi-panel--tile:hover,
   padding: 1px 5px;
 }
 
+/* ---------- link ---------- */
+/* The same trap .axi-code was pulled out of, one component later. `.axi-prose
+   a` was the language's only word for a link, and it is reachable only by
+   adopting a whole typography layer - so a consumer with a "learn more" beside
+   a setting, or a docs URL in a modal footer, writes its own. One real consumer
+   had fifteen of them, hand-spelled, and a third of those were <button>s
+   calling an openExternal bridge rather than anchors at all.
+
+   Both selectors, one rule, for the reason written at .axi-code: a link in
+   rendered markdown and a link in interface copy are the same object, and the
+   last time this language spelled one object twice the two copies drifted.
+   There is a test that they stay one rule.
+
+   The underline is stated rather than inherited. An <a href> draws one by
+   default and a <button> does not, so leaving it to the user agent is exactly
+   how the two spellings would come apart - the declaration is a no-op on the
+   anchor and load-bearing on the button. Same for the background, border and
+   padding resets: they say nothing about an anchor and are the whole reason a
+   button can wear this class.
+
+   `font-family` and `font-size` inherit, but the weight does not: a link is
+   600 wherever it lands, and `font: inherit` would quietly take that away.
+
+   The hover is written `:where(:hover)` so it weighs one class and the ink
+   layer still lands on top - see rule 6's addendum. A link in a caption that
+   says `axi-link axi-ink-dim` must stay dim under the cursor, and the plain
+   `:hover` form is what made the danger button read white under one. */
+.axi-link,
+.axi-prose a {
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  color: var(--axi-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.axi-link:where(:hover),
+.axi-prose a:where(:hover) { color: var(--axi-text); }
+
 /* ---------- 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
@@ -2745,10 +2788,9 @@ textarea.axi-input {
 
 .axi-prose p { margin: 0 0 16px; }
 .axi-prose strong { color: var(--axi-text); font-weight: 800; }
-/* Prose is the one place a link should announce itself: a reader scanning an
-   article is looking for them, and inheriting the body ink would hide them. */
-.axi-prose a { color: var(--axi-accent); font-weight: 600; text-underline-offset: 2px; }
-.axi-prose a:hover { color: var(--axi-text); }
+/* A link is drawn beside .axi-code in primitives.css, in one rule with
+   `.axi-link`, because a link in an article and a link in interface copy are
+   the same object. See the comment there. */
 
 .axi-prose ul, .axi-prose ol { margin: 0 0 16px; padding-left: 22px; }
 .axi-prose li { margin: 0 0 7px; }

package/docs/RULES.md

@@ -703,6 +703,20 @@ whole section exists to prevent.
 The test to write is not "does `.axi-code` exist". It is "are both spellings in
 the same rule", because only the second one fails when someone splits them.
 
+This has now happened twice. `.axi-prose a` was the language's only word for a
+link, and the same consumer had fifteen hand-spelled ones — a third of them
+`<button>`s calling a desktop bridge rather than anchors at all, which is what
+made the drift concrete rather than theoretical: an `<a href>` draws its own
+underline and a `<button>` does not, so the two spellings were not merely
+allowed to come apart, they had already come apart. When you lift a
+layer-scoped style out, look for the declarations the layer was getting for
+free from its element. Those are the ones the new spelling silently loses.
+
+Two instances is a pattern, so the check belongs at the top of the list when
+adding anything: grep `src/` for the component's style living behind a layer
+prefix. If it does, it has consumers you cannot see, and they have already
+drawn their own.
+
 ### A refusal holds at every level, not just the one it was written for
 
 The rail refuses two accent fills inside itself. That is why

package/package.json

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

@@ -450,6 +450,49 @@ button.axi-panel--tile:hover,
   padding: 1px 5px;
 }
 
+/* ---------- link ---------- */
+/* The same trap .axi-code was pulled out of, one component later. `.axi-prose
+   a` was the language's only word for a link, and it is reachable only by
+   adopting a whole typography layer - so a consumer with a "learn more" beside
+   a setting, or a docs URL in a modal footer, writes its own. One real consumer
+   had fifteen of them, hand-spelled, and a third of those were <button>s
+   calling an openExternal bridge rather than anchors at all.
+
+   Both selectors, one rule, for the reason written at .axi-code: a link in
+   rendered markdown and a link in interface copy are the same object, and the
+   last time this language spelled one object twice the two copies drifted.
+   There is a test that they stay one rule.
+
+   The underline is stated rather than inherited. An <a href> draws one by
+   default and a <button> does not, so leaving it to the user agent is exactly
+   how the two spellings would come apart - the declaration is a no-op on the
+   anchor and load-bearing on the button. Same for the background, border and
+   padding resets: they say nothing about an anchor and are the whole reason a
+   button can wear this class.
+
+   `font-family` and `font-size` inherit, but the weight does not: a link is
+   600 wherever it lands, and `font: inherit` would quietly take that away.
+
+   The hover is written `:where(:hover)` so it weighs one class and the ink
+   layer still lands on top - see rule 6's addendum. A link in a caption that
+   says `axi-link axi-ink-dim` must stay dim under the cursor, and the plain
+   `:hover` form is what made the danger button read white under one. */
+.axi-link,
+.axi-prose a {
+  padding: 0;
+  background: none;
+  border: 0;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: 600;
+  color: var(--axi-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+}
+.axi-link:where(:hover),
+.axi-prose a:where(:hover) { color: var(--axi-text); }
+
 /* ---------- 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

package/src/prose.css

@@ -28,10 +28,9 @@
 
 .axi-prose p { margin: 0 0 16px; }
 .axi-prose strong { color: var(--axi-text); font-weight: 800; }
-/* Prose is the one place a link should announce itself: a reader scanning an
-   article is looking for them, and inheriting the body ink would hide them. */
-.axi-prose a { color: var(--axi-accent); font-weight: 600; text-underline-offset: 2px; }
-.axi-prose a:hover { color: var(--axi-text); }
+/* A link is drawn beside .axi-code in primitives.css, in one rule with
+   `.axi-link`, because a link in an article and a link in interface copy are
+   the same object. See the comment there. */
 
 .axi-prose ul, .axi-prose ol { margin: 0 0 16px; padding-left: 22px; }
 .axi-prose li { margin: 0 0 7px; }