@axiapps/axi-design 1.11.0 → 1.12.0

package/dist/axi.css

@@ -19,6 +19,15 @@
   --axi-surface: #222731;         /* a panel raised off the page */
   --axi-surface-raised: #2b313d;  /* a chip or popover raised off a panel */
   --axi-ink-line: #0c0e12;        /* the outline every raised element is drawn with */
+  /* The tone a shape is made of when it is made of the line ink rather than
+     outlined in it - the tooltip, the titlebar strip, the switch's slug. Holds
+     --axi-ink-line today, which is why it reads as the same decision and is
+     not: one is the colour a shape's EDGE is drawn in, the other the colour a
+     shape is FILLED with. They only have to diverge once - a theme that
+     outlines in a light colour so its page can go near-black - for the
+     conflated spelling to turn the tooltip into a pale box. Same split as
+     --axi-ink-on-fill below, on the other side of the same token. */
+  --axi-ground-deep: var(--axi-ink-line);
   --axi-rule: #3a4250;            /* internal rules, inside an outlined panel */
   --axi-text: #f4f6f9;
   --axi-text-dim: #a7b0be;
@@ -342,7 +351,7 @@ a { color: inherit; }
   top: 2px; bottom: 2px; left: 2px;
   width: var(--axi-switch-knob, 16px);
   border-radius: var(--axi-radius-sm);
-  background: var(--axi-ink-line);
+  background: var(--axi-ground-deep);
   transition: transform .1s;
 }
 /* The travel is the track's inner width less the slug and its two insets.
@@ -922,7 +931,7 @@ textarea.axi-input {
      argument with one. */
   z-index: 70;
   padding: 5px 8px;
-  background: var(--axi-ink-line);
+  background: var(--axi-ground-deep);
   color: var(--axi-text);
   border: var(--axi-border-hairline) solid var(--axi-rule);
   border-radius: var(--axi-radius-sm);
@@ -1071,7 +1080,7 @@ textarea.axi-input {
   flex: none;
   display: flex; align-items: center; gap: 12px;
   height: 38px; padding-left: 14px;
-  background: var(--axi-ink-line);
+  background: var(--axi-ground-deep);
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);

package/dist/themes/glass.css

@@ -2,9 +2,13 @@
    Edit the files in src/ and run `npm run build`; do not edit this file. */
 
 [data-axi-theme="glass"] {
-  --axi-ground: #141924;
+  --axi-ground: #0a0c10;
   --axi-surface: rgba(255, 255, 255, .09);
   --axi-surface-raised: rgba(255, 255, 255, .15);
+  --axi-ink-line: #242b38;
+  --axi-ground-deep: #0c0e12;
+  --axi-accent-ink: #0c0e12;
+  --axi-ink-on-fill: #0c0e12;
   --axi-rule: rgba(255, 255, 255, .17);
   --axi-scrim: rgba(6, 7, 9, .55);
   --axi-surface-filter: blur(14px) saturate(140%);

package/docs/RULES.md

@@ -62,11 +62,20 @@ stops looking raised.
 
 There is exactly one element drawn in the line ink rather than on a surface,
 and it is named here so it stays an exception rather than becoming a habit:
-`.axi-tooltip` is filled with `--axi-ink-line` itself. A thing cannot be
-outlined in the colour it is already made of, and a block in that same ink
-under a box already made of it reads as the box being thicker rather than
-raised — so the tooltip takes a hairline in `--axi-rule` to hold its edge
-against the page, and carries no block. Nothing else may use that reasoning.
+`.axi-tooltip` is filled with the line ink itself. A thing cannot be outlined
+in the colour it is already made of, and a block in that same ink under a box
+already made of it reads as the box being thicker rather than raised — so the
+tooltip takes a hairline in `--axi-rule` to hold its edge against the page, and
+carries no block. Nothing else may use that reasoning.
+
+It spells that fill `--axi-ground-deep`, not `--axi-ink-line`, and so do the
+two smaller shapes made of the same tone — the titlebar strip and the switch's
+slug. The token holds the line ink today and is a different decision from it:
+one is the colour a shape's edge is drawn in, the other the colour a shape is
+filled with. A theme that outlines in a light colour so its page can go
+near-black relights the first and leaves the second, and the tooltip stays a
+dark box with light words on it instead of becoming a pale box with pale ones.
+Anything else that comes to be made of this tone reads the same token.
 
 **What is mechanically enforced.** `tests/tokens.test.mjs` enforces both
 columns:
@@ -180,7 +189,7 @@ element becomes the containing block for any `position: fixed` descendant.
 An overlay positioned in viewport coordinates — `.axi-tooltip` is the one
 this language ships — must therefore live as a child of `<body>`, never
 inside the component it annotates, or the first hover lift re-anchors it.
-The class draws only the box (ink-line ground, hairline rule border, micro
+The class draws only the box (`--axi-ground-deep` ground, hairline rule border, micro
 type); measuring the trigger and setting `left`/`top` is the consumer's
 half, and `gallery.js` is the reference wiring.
 
@@ -213,7 +222,7 @@ a third step in everything but name — and would put a thin frame around a
 heavier bar.
 
 A switch is the same rule in a slot. Its track fills to assert the setting's
-status and is empty otherwise; the slug that moves is `--axi-ink-line` in both
+status and is empty otherwise; the slug that moves is `--axi-ground-deep` in both
 states, so on and off differ in what colour is *in* the slot and never in how
 bright the moving part is. It carries no block — a block belongs to things you
 press, and a switch is a slot with something sitting in it — but it keeps a
@@ -347,8 +356,8 @@ Three layers, in `src/tokens.css` — the only file permitted to contain a colou
 literal.
 
 - **Surface & text** — `--axi-ground`, `--axi-surface`, `--axi-surface-raised`,
-  `--axi-ink-line`, `--axi-rule`, `--axi-text`, `--axi-text-dim`,
-  `--axi-text-faint`, `--axi-scrim`
+  `--axi-ink-line`, `--axi-ground-deep`, `--axi-rule`, `--axi-text`,
+  `--axi-text-dim`, `--axi-text-faint`, `--axi-scrim`
 - **Accent & status** — `--axi-accent`, `--axi-accent-ink`, `--axi-meta`,
   `--axi-ok`, `--axi-warn`, `--axi-danger`. **This is the per-app override
   surface.** An app that sets `--axi-accent` and nothing else is correctly

package/package.json

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

@@ -149,7 +149,7 @@
   top: 2px; bottom: 2px; left: 2px;
   width: var(--axi-switch-knob, 16px);
   border-radius: var(--axi-radius-sm);
-  background: var(--axi-ink-line);
+  background: var(--axi-ground-deep);
   transition: transform .1s;
 }
 /* The travel is the track's inner width less the slug and its two insets.

package/src/shells.css

@@ -140,7 +140,7 @@
      argument with one. */
   z-index: 70;
   padding: 5px 8px;
-  background: var(--axi-ink-line);
+  background: var(--axi-ground-deep);
   color: var(--axi-text);
   border: var(--axi-border-hairline) solid var(--axi-rule);
   border-radius: var(--axi-radius-sm);
@@ -289,7 +289,7 @@
   flex: none;
   display: flex; align-items: center; gap: 12px;
   height: 38px; padding-left: 14px;
-  background: var(--axi-ink-line);
+  background: var(--axi-ground-deep);
   border-bottom: var(--axi-border-control) solid var(--axi-ink-line);
   font: var(--axi-t-micro);
   letter-spacing: var(--axi-ls-micro);

package/src/tokens.css

@@ -15,6 +15,15 @@
   --axi-surface: #222731;         /* a panel raised off the page */
   --axi-surface-raised: #2b313d;  /* a chip or popover raised off a panel */
   --axi-ink-line: #0c0e12;        /* the outline every raised element is drawn with */
+  /* The tone a shape is made of when it is made of the line ink rather than
+     outlined in it - the tooltip, the titlebar strip, the switch's slug. Holds
+     --axi-ink-line today, which is why it reads as the same decision and is
+     not: one is the colour a shape's EDGE is drawn in, the other the colour a
+     shape is FILLED with. They only have to diverge once - a theme that
+     outlines in a light colour so its page can go near-black - for the
+     conflated spelling to turn the tooltip into a pale box. Same split as
+     --axi-ink-on-fill below, on the other side of the same token. */
+  --axi-ground-deep: var(--axi-ink-line);
   --axi-rule: #3a4250;            /* internal rules, inside an outlined panel */
   --axi-text: #f4f6f9;
   --axi-text-dim: #a7b0be;