@axiapps/axi-design 1.6.0 → 1.7.0

package/dist/accents.css

@@ -0,0 +1,14 @@
+/* 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-accent="axi-gold"] { --axi-accent: #ffc53d; }
+[data-axi-accent="electric-blue"] { --axi-accent: #3b82f6; }
+[data-axi-accent="refined-cyan"] { --axi-accent: #5eadd5; }
+[data-axi-accent="amber-warm"] { --axi-accent: #f59e0b; }
+[data-axi-accent="emerald-mint"] { --axi-accent: #34d399; }
+[data-axi-accent="rose-pink"] { --axi-accent: #f43f5e; }
+[data-axi-accent="violet-purple"] { --axi-accent: #8b5cf6; }
+[data-axi-accent="crimson-red"] { --axi-accent: #ef4444; }
+[data-axi-accent="slate-silver"] { --axi-accent: #94a3b8; }
+[data-axi-accent="teal-ocean"] { --axi-accent: #14b8a6; }
+[data-axi-accent="gold-bronze"] { --axi-accent: #d4a017; }

package/dist/axi.css

@@ -49,8 +49,17 @@
      block instead of admitting bare literals. */
   --axi-offset-panel-hover: 10px;
   --axi-offset-control-hover: 6px;
-  --axi-radius: 10px;
-  --axi-radius-sm: 6px;
+  /* 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
+     some other language. Two tokens rather than one because the scale still
+     has to be able to come back - a consumer that wants soft corners sets
+     these and gets them everywhere, which is the whole point of the pass that
+     took the hand-written 8px, 9px, 5px, 4px, 2px and 99px out of the
+     components. Panel-sized surfaces read --axi-radius; everything
+     control-sized reads --axi-radius-sm. */
+  --axi-radius: 0;
+  --axi-radius-sm: 0;
   /* Not a form step: a hairline used inside prose (inline code, table rules,
      the list bullet) where the two form steps above would read as too heavy
      for a line of running text. */
@@ -181,7 +190,7 @@ a { color: inherit; }
   display: inline-flex; align-items: center; gap: 8px;
   padding: 12px 20px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
@@ -225,7 +234,7 @@ a { color: inherit; }
   display: inline-flex; align-items: center; gap: 6px;
   padding: 10px 9px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
@@ -295,7 +304,7 @@ a { color: inherit; }
   position: absolute;
   top: 2px; bottom: 2px; left: 2px;
   width: var(--axi-switch-knob, 16px);
-  border-radius: 2px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ink-line);
   transition: transform .1s;
 }
@@ -340,7 +349,7 @@ a { color: inherit; }
 .axi-badge-count {
   display: inline-block;
   padding: 1px 7px;
-  border-radius: 99px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
   font: var(--axi-t-micro);
@@ -372,7 +381,7 @@ a { color: inherit; }
   padding: 11px 12px;
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   color: var(--axi-text);
   font: var(--axi-t-label);
   font-size: 14px;
@@ -396,7 +405,7 @@ a { color: inherit; }
   appearance: none;
   padding: 10px 30px 10px 9px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background-color: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
@@ -432,7 +441,7 @@ a { color: inherit; }
   .axi-select::picker(select) {
     margin-top: 9px; padding: 6px;
     border: var(--axi-border-panel) solid var(--axi-ink-line);
-    border-radius: 9px;
+    border-radius: var(--axi-radius);
     background: var(--axi-surface-raised);
     box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
   }
@@ -546,7 +555,7 @@ a { color: inherit; }
 .axi-sigil::before {
   content: ""; position: absolute; inset: 0; z-index: -1;
   transform: rotate(45deg);
-  border-radius: 5px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-accent);
   border: var(--axi-border-control) solid var(--axi-ink-line);
 }
@@ -563,7 +572,7 @@ a { color: inherit; }
   font: 800 13.5px/1 var(--axi-sans);
   color: var(--axi-text-dim); text-decoration: none;
   border: var(--axi-border-control) solid transparent;
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
 }
 .axi-tabs a:hover { color: var(--axi-text); border-color: var(--axi-rule); }
 /* The current tab is filled and blocked - the same treatment a pressed pill
@@ -617,7 +626,7 @@ a { color: inherit; }
   max-height: 340px; overflow-y: auto; padding: 8px;
   background: var(--axi-surface-raised);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
-  border-radius: 9px;
+  border-radius: var(--axi-radius);
   box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
 }
 .axi-menu__pop[hidden] { display: none; }
@@ -659,7 +668,7 @@ a { color: inherit; }
 .axi-card__glyph {
   flex: none; width: 40px; height: 40px;
   display: grid; place-items: center;
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   background: var(--axi-surface-raised);
   color: var(--axi-text);
@@ -714,7 +723,7 @@ a { color: inherit; }
   position: absolute; top: 16px; right: 18px;
   width: 32px; height: 32px;
   display: grid; place-items: center;
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   color: var(--axi-text-dim);
@@ -834,7 +843,7 @@ a { color: inherit; }
   padding: 12px 14px;
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
 }
 .axi-stat__n {
   display: block;
@@ -1109,7 +1118,7 @@ a { color: inherit; }
   font-family: var(--axi-mono); font-size: .88em;
   background: var(--axi-ground); color: var(--axi-text);
   border: var(--axi-border-hairline) solid var(--axi-ink-line);
-  border-radius: 4px; padding: 1px 5px;
+  border-radius: var(--axi-radius-sm); padding: 1px 5px;
 }
 .axi-prose pre {
   margin: 0 0 18px; padding: 14px 16px; overflow-x: auto;

package/docs/RULES.md

@@ -95,10 +95,21 @@ deliberate asymmetry: it costs the (rare, deliberate) case of a bare named
 colour smuggled inside a data-URI SVG, in exchange for never blocking a font
 stack, a filename or a `content` string again.
 
-Radii are the one part of the form that is **not** enforced: `--axi-radius`
-and `--axi-radius-sm` exist, but controls carry a literal `8px` (and `9px`,
-`5px`, `4px` appear elsewhere). Treat the radius scale as convention, not
-contract, until it is tokenised.
+**The corner is square.** `--axi-radius` and `--axi-radius-sm` are both `0`.
+A hard outline, a hard block and a rounded corner are three decisions, and the
+rounded one quietly undoes the other two — the corner is the first place a
+flat outlined shape starts looking like a button borrowed from some other
+system. Nothing in the language rounds.
+
+The two tokens stay because the scale has to be able to come back: a consumer
+that wants soft corners sets them once and gets them everywhere. That is only
+true now that the components read them. They previously carried a hand-written
+`8px` on every control, with `9px`, `5px`, `4px`, `2px` and a `99px` lozenge
+scattered elsewhere, and this paragraph used to say to treat the scale as
+convention rather than contract. It is a contract now: panel-sized surfaces
+read `--axi-radius`, everything control-sized reads `--axi-radius-sm`, and
+`tests/tokens.test.mjs` fails on a literal radius in a component file the same
+way it fails on a literal border weight.
 
 ## 4. Hover lifts
 
@@ -181,6 +192,40 @@ spends the brightest thing on screen on the fact that a list has a first line.
 The hover on a row is the neutral ramp, not an ink, for the same reason: moving
 the cursor down a table is not a series of status changes.
 
+### The counterpart: a short list of things you act on
+
+Rule 8 is about a *reading*. Forty rows of numbers exist to be compared, and
+the comparison happens down a column — outlining the rows cuts the column into
+boxes and takes away the only reason the table was worth drawing.
+
+A launcher's list is not that. Each row is one thing, with its own name, its
+own state and its own verb sitting at the end of it. Nobody scans down such a
+list comparing rows; they find the one they came for and press it. There is no
+column to protect, and the flat interior treatment actively lies about what the
+row is, because the thing you are about to click looks like a line of a table.
+
+So: **a short list of objects you act on is drawn as a stack of cards** —
+outline and block, the same as any other raised thing.
+
+Three bounds, and the rule is only sound with all three:
+
+- **Short.** A dozen or so. The block is what says "press me", and past about
+  that many the blocks stop reading as depth and start reading as texture — at
+  which point the list has become a table again and rule 8 has it back.
+- **Control weight, not panel.** These cards sit *inside* a panel that already
+  carries a 6px block. A second 6px block nested in the first reads as two
+  planes arguing; the 3px control step reads as the contents of a box. This is
+  also the honest weight: each row is a control you press, not a surface.
+- **The outline stays `--axi-ink-line`.** Status goes on a filled shape inside
+  the row — the icon tile, a chip — and never on the row's own edge. Colouring
+  the edge is exactly the full-height stripe rule 5 rejects: five states become
+  five coloured frames and the colour stops saying anything about any one of
+  them.
+
+The test for which rule applies: *does the eye run down a column?* If yes, it
+is a table and it is drawn in rules. If every row ends in a button, it is a
+stack and it is drawn in cards.
+
 ## 9. A quantity is drawn as length, never intensity
 
 A proportion is a bar: the track is the ground, the fill is the value, and the
@@ -264,6 +309,25 @@ literal, so a light theme is a second palette block, not a rewrite. It is not
 a token swap either — the saturated inks that read as vivid on near-black go
 washed out on white and would need retuning.
 
+## The official accents
+
+`--axi-accent` is the per-app theming surface, and the family now agrees on
+what may go in it. The official accents live in `accents.json` — id, label,
+hex — and `dist/accents.css` is generated from it: one
+`[data-axi-accent="<id>"]` selector per accent, setting `--axi-accent` and
+nothing else. An app opts in by importing `accents.css` alongside `axi.css`
+and setting `data-axi-accent` on its root element; an app that renders a
+picker reads `accents.json` for the ids and labels.
+
+accents.json is the second sanctioned home for a colour literal, after
+tokens.css — sanctioned because it is data the build generates from, not
+stylesheet source. Adding an accent means editing accents.json and running
+the build; hand-editing dist/accents.css is exactly as wrong as hand-editing
+dist/axi.css.
+
+The default remains `#ffc53d` Axi Gold, declared in tokens.css: an app that
+sets no `data-axi-accent` is gold, and correctly themed.
+
 ## Adding a component
 
 1. Which rule justifies it? If none, write the rule first or stop.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@axiapps/axi-design",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "The design language for the axi suite — flat and outlined, dark, drawn in saturated ink.",
   "type": "module",
   "license": "MIT",
@@ -14,6 +14,8 @@
   "exports": {
     "./axi.css": "./dist/axi.css",
     "./tokens.css": "./src/tokens.css",
+    "./accents.css": "./dist/accents.css",
+    "./accents.json": "./accents.json",
     "./package.json": "./package.json"
   },
   "//sideEffects": "A stylesheet is nothing but a side effect. Without this a bundler treating the import as dead code would drop the whole design language from a production build.",

package/src/data.css

@@ -20,7 +20,7 @@
   padding: 12px 14px;
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
 }
 .axi-stat__n {
   display: block;

package/src/primitives.css

@@ -24,7 +24,7 @@
   display: inline-flex; align-items: center; gap: 8px;
   padding: 12px 20px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
@@ -68,7 +68,7 @@
   display: inline-flex; align-items: center; gap: 6px;
   padding: 10px 9px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
@@ -138,7 +138,7 @@
   position: absolute;
   top: 2px; bottom: 2px; left: 2px;
   width: var(--axi-switch-knob, 16px);
-  border-radius: 2px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ink-line);
   transition: transform .1s;
 }
@@ -183,7 +183,7 @@
 .axi-badge-count {
   display: inline-block;
   padding: 1px 7px;
-  border-radius: 99px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-accent);
   color: var(--axi-accent-ink);
   font: var(--axi-t-micro);
@@ -215,7 +215,7 @@
   padding: 11px 12px;
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   color: var(--axi-text);
   font: var(--axi-t-label);
   font-size: 14px;
@@ -239,7 +239,7 @@
   appearance: none;
   padding: 10px 30px 10px 9px;
   border: var(--axi-border-control) solid var(--axi-ink-line);
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background-color: var(--axi-ground);
   color: var(--axi-text-dim);
   font: var(--axi-t-label);
@@ -275,7 +275,7 @@
   .axi-select::picker(select) {
     margin-top: 9px; padding: 6px;
     border: var(--axi-border-panel) solid var(--axi-ink-line);
-    border-radius: 9px;
+    border-radius: var(--axi-radius);
     background: var(--axi-surface-raised);
     box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
   }

package/src/prose.css

@@ -50,7 +50,7 @@
   font-family: var(--axi-mono); font-size: .88em;
   background: var(--axi-ground); color: var(--axi-text);
   border: var(--axi-border-hairline) solid var(--axi-ink-line);
-  border-radius: 4px; padding: 1px 5px;
+  border-radius: var(--axi-radius-sm); padding: 1px 5px;
 }
 .axi-prose pre {
   margin: 0 0 18px; padding: 14px 16px; overflow-x: auto;

package/src/shells.css

@@ -37,7 +37,7 @@
 .axi-sigil::before {
   content: ""; position: absolute; inset: 0; z-index: -1;
   transform: rotate(45deg);
-  border-radius: 5px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-accent);
   border: var(--axi-border-control) solid var(--axi-ink-line);
 }
@@ -54,7 +54,7 @@
   font: 800 13.5px/1 var(--axi-sans);
   color: var(--axi-text-dim); text-decoration: none;
   border: var(--axi-border-control) solid transparent;
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
 }
 .axi-tabs a:hover { color: var(--axi-text); border-color: var(--axi-rule); }
 /* The current tab is filled and blocked - the same treatment a pressed pill
@@ -108,7 +108,7 @@
   max-height: 340px; overflow-y: auto; padding: 8px;
   background: var(--axi-surface-raised);
   border: var(--axi-border-panel) solid var(--axi-ink-line);
-  border-radius: 9px;
+  border-radius: var(--axi-radius);
   box-shadow: var(--axi-offset-panel) var(--axi-offset-panel) 0 var(--axi-ink-line);
 }
 .axi-menu__pop[hidden] { display: none; }
@@ -150,7 +150,7 @@
 .axi-card__glyph {
   flex: none; width: 40px; height: 40px;
   display: grid; place-items: center;
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   background: var(--axi-surface-raised);
   color: var(--axi-text);
@@ -205,7 +205,7 @@
   position: absolute; top: 16px; right: 18px;
   width: 32px; height: 32px;
   display: grid; place-items: center;
-  border-radius: 8px;
+  border-radius: var(--axi-radius-sm);
   background: var(--axi-ground);
   border: var(--axi-border-control) solid var(--axi-ink-line);
   color: var(--axi-text-dim);

package/src/tokens.css

@@ -45,8 +45,17 @@
      block instead of admitting bare literals. */
   --axi-offset-panel-hover: 10px;
   --axi-offset-control-hover: 6px;
-  --axi-radius: 10px;
-  --axi-radius-sm: 6px;
+  /* 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
+     some other language. Two tokens rather than one because the scale still
+     has to be able to come back - a consumer that wants soft corners sets
+     these and gets them everywhere, which is the whole point of the pass that
+     took the hand-written 8px, 9px, 5px, 4px, 2px and 99px out of the
+     components. Panel-sized surfaces read --axi-radius; everything
+     control-sized reads --axi-radius-sm. */
+  --axi-radius: 0;
+  --axi-radius-sm: 0;
   /* Not a form step: a hairline used inside prose (inline code, table rules,
      the list bullet) where the two form steps above would read as too heavy
      for a line of running text. */