@apliteni/apliteni-ui 0.24.0 → 0.25.2

package/README.md

@@ -48,7 +48,7 @@ npm install @apliteni/apliteni-ui
 ## Use it
 
 ```js
-import '@apliteni/apliteni-ui/css';           // once, at app root (needs the Poppins font)
+import '@apliteni/apliteni-ui/css';           // once, at app root (load the two fonts too — see below)
 import { button, card, topbar, wireTopbar } from '@apliteni/apliteni-ui';
 
 el.innerHTML = topbar({ word: 'Strategy', account: { name, email } })
@@ -56,6 +56,26 @@ el.innerHTML = topbar({ word: 'Strategy', account: { name, email } })
 wireTopbar(document);                          // theme toggle, menus, segmented, copy buttons
 ```
 
+### The two fonts
+
+The kit names two families and bundles neither, so the host page loads them. Poppins is
+`--font-display` — headings, brand marks, large readouts. IBM Plex Sans is `--font-sans` —
+tables, fields, paragraphs, chat, which is most of an application. Weights 300-700 in both:
+
+```html
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&display=swap">
+```
+
+Load only one of them and the other falls through to the system stack behind it, without
+saying so. Want the old
+single-family look back? Set both roles to the same family in your own stylesheet, after the
+kit's:
+
+```css
+:root { --font-sans: var(--font-display); }
+```
+
 ### Reuse the account page
 
 The whole `/account` layout (topbar + sticky sidebar + page body) ships as one

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.24.0",
+  "version": "0.25.2",
   "workspaces": [
     "react"
   ],

package/src/index.css

@@ -4,7 +4,12 @@
  * addressable — package.json `exports` has no wildcard for ./styles/*, so a deep
  * path into src/styles/ does not resolve. To take one component, read it by name
  * through `apliteni-ui/inline` (`import { topbarCss } from …`).
- * Requires the Poppins font (loaded by the host page or Storybook preview).
+ * Requires two families, loaded by the host page or the Storybook preview:
+ * Poppins (--font-display, headings and brand marks) and IBM Plex Sans
+ * (--font-sans, everything else). Weights 300-700 in both. Neither is
+ * bundled; a family that never loads falls back to the system stack behind
+ * it, in silence.
+ * why: docs/specification.md#typefaces
  * ========================================================================== */
 @import "./tokens/brand.generated.css";
 @import "./tokens/tokens.css";

package/src/styles/base.css

@@ -35,6 +35,28 @@ a {
   text-decoration: none;
 }
 
+/* -- The two typeface roles -----------------------------------------------
+ * A heading is the display face, running text is the text face, and the
+ * ELEMENT decides which — never the size. A size threshold would change a
+ * heading's typeface halfway through a resize, which is the one thing a
+ * reader notices. A component that wants a heading tag set in the text face
+ * says so on its own rule, which outranks this one at (0,1,0); .ui-drawer__title
+ * and .ui-confirm__title are the two that do.
+ * why: docs/specification.md#typefaces */
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-display);
+}
+
+/* The browser default for b/strong is 700, and at the 13px the kit's tables and
+ * chat feeds run at, 700 stops reading as emphasis and starts reading as a
+ * filled-in shape. The semibold step is the emphasis; the bold step stays
+ * available to anything that asks for it by name.
+ * why: docs/specification.md#typefaces */
+b,
+strong {
+  font-weight: var(--weight-semibold);
+}
+
 /* Ambient blurred glow — the deck's signature background depth.
    Place <span class="ui-glow ui-glow--purple"> absolutely inside a positioned
    parent. Two colour variants ship; scale/position with inline styles. */

package/src/styles/callout.css

@@ -83,7 +83,7 @@
 .ui-toast__action { flex: none; align-self: center; background: none; border: 0; padding: 4px 9px; border-radius: var(--radius-xs); font: inherit; font-weight: var(--weight-medium); color: var(--toast-action-ink); cursor: pointer; }
 .ui-toast__action:hover { background: color-mix(in srgb, var(--bg) 55%, transparent); }
 
-.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; }
+.ui-toast__close { flex: none; align-self: flex-start; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 2px; display: grid; place-items: center; position: relative; font: inherit; }
 .ui-toast__close svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.5; }
 /* The target, not the ink. WCAG 2.5.8 measures what a pointer can land on, and
    the drawn button is 19x19 — a 15px glyph in 2px of padding. Growing the box

package/src/styles/card.css

@@ -43,6 +43,13 @@
 /* Interactive card (link / button semantics) */
 .ui-card--interactive {
   cursor: pointer;
+  /* Written as a <button>, the card would take the browser's frame, centred text
+     and `font: 400 13.3333px Arial` — a shorthand, so `font: inherit` and not the
+     family longhand. .ui-card already states its own background, and the light
+     theme's border rule is (0,3,0) so `border: 0` here cannot reach it. #251 */
+  border: 0;
+  text-align: left;
+  font: inherit;
   transition: transform var(--dur-fast) var(--ease), box-shadow var(--dur-med) var(--ease);
 }
 .ui-card--interactive:hover {

package/src/styles/confirm.css

@@ -85,7 +85,10 @@
 /* -- Slots ----------------------------------------------------------------- */
 /* The question and the answers keep their size; the consequence between them is
    the one that gives, and scrolls — the same split the drawer's header / body /
-   footer makes. */
+   footer makes. The title is an h2 and opts out of the display face base.css
+   gives a heading, for the same reason .ui-drawer__title does: at --text-md it
+   is the question on a dialog, set at the size the answer beneath it is set at.
+   why: docs/specification.md#typefaces */
 .ui-confirm__title {
   margin: 0;
   flex: none;

package/src/styles/drawer.css

@@ -119,6 +119,10 @@
   border-bottom: 1px solid var(--border);
   flex: none;
 }
+/* An h2, and base.css would give it the display face. It opts out: at 15px in a
+   panel header it is a label on a piece of UI rather than a heading anybody
+   reads, and the display face at that size is exactly what #253 was about.
+   why: docs/specification.md#typefaces */
 .ui-drawer__title {
   margin: 0;
   font-family: var(--font-sans);
@@ -138,6 +142,7 @@
   background: transparent;
   border: 1px solid transparent;
   border-radius: var(--radius-sm);
+  font: inherit;
   transition:
     color var(--dur-fast) var(--ease),
     background var(--dur-fast) var(--ease),

package/src/styles/dropdown.css

@@ -45,6 +45,14 @@
      the portal's JS, so an upward panel cannot drift from a downward one.
      why: docs/specification.md#the-dropdown-panel */
   --ui-dropdown-gap: 9px;
+  /* The panel states its own role rather than inheriting one, because `portal:
+     true` moves it onto <body> and an inherited face is then decided by where
+     the panel was MOUNTED rather than by what it is. Measured: the same dropdown
+     inside a display-face subtree resolved to var(--font-display) in place and
+     var(--font-sans) once portalled — a positioning flag changing the typeface.
+     A list of item rows is text, so it is the text face in both placements.
+     why: docs/specification.md#typefaces */
+  font-family: var(--font-sans);
   position: absolute;
   top: calc(100% + var(--ui-dropdown-gap));
   left: 0;
@@ -94,15 +102,27 @@
 }
 .ui-dropdown__panel--portal.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
 
-/* Item row — [icon] [main: label + desc] [badge] [tick] */
+/* Item row — [icon] [main: label + desc] [badge] [tick]. A row is a <div>, an
+   <a href> or a <button>: `is-selected` and __tick below mean a row gets
+   chosen, and choosing is a button's job. So the tag's own styling is reset
+   here, the way .ui-nav__item resets it, and the three render identically.
+   why: docs/specification.md#a-dropdown-row-is-a-div-a-link-or-a-button */
 .ui-dropdown__item {
   display: flex;
   gap: 11px;
   align-items: center;
+  width: 100%;
   padding: 9px 12px;
+  border: 0;
   border-radius: var(--radius-sm);
+  background: none;
   cursor: pointer;
+  text-align: left;
   text-decoration: none;
+  /* `font`, not `font-family`: the UA writes one shorthand, `font: 400 13.3333px
+     Arial`, so answering its family alone leaves the size and the line-height
+     standing. The same answer .ui-toast__action gives. */
+  font: inherit;
   color: var(--text);
   transition: background var(--dur-fast) var(--ease);
 }

package/src/styles/feedback.css

@@ -22,6 +22,16 @@
   transform: translate(-50%, -100%) translateY(-4px) scale(.82); transform-origin: bottom center;
   display: inline-flex; align-items: center; gap: 9px;
   background: var(--ui-fb-pill-grad); color: var(--accent-contrast);
+  /* The pill is a click target the kit renders as a bare <div>, so the consumer who
+     needs it from the keyboard writes it as a <button> — which brings a 2px outset
+     frame around the gradient, a centred line and `font: 400 13.3333px Arial`. Stated
+     here rather than taken from the element. `font` and not `font-family`, because
+     Chrome's rule is the shorthand; the three longhands after it keep what the pill
+     wants and only the leading comes from the shorthand, which is the 1.62 the pill
+     already inherits as a div. `text-align` paints nothing on an inline-flex box
+     either way and is declared because leaving it to the element is the dependency
+     this refuses. why: #251 */
+  border: 0; text-align: center; font: inherit;
   font-family: var(--font-sans); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em;
   padding: 9px 17px 9px 15px; border-radius: 999px; cursor: pointer; white-space: nowrap; overflow: hidden;
   box-shadow: 0 10px 26px var(--ui-fb-pill-glow),
@@ -68,7 +78,7 @@
 .ui-fbc__head { display: flex; align-items: center; gap: 12px; padding: 17px 20px 0; }
 .ui-fbc__chip { display: inline-flex; align-items: center; gap: 8px; color: var(--accent); font-size: 13px; font-weight: var(--weight-semibold); letter-spacing: .01em; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 .ui-fbc__chip svg { width: 14px; height: 14px; flex: none; opacity: .85; stroke-width: 2.7; }
-.ui-fbc__x { margin-left: auto; background: var(--surface-2); color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; }
+.ui-fbc__x { margin-left: auto; background: var(--surface-2); color: var(--dim); border: 0; width: 28px; height: 28px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; flex: none; font: inherit; }
 .ui-fbc__x:hover { color: var(--strong); }
 .ui-fbc__x svg { width: 14px; height: 14px; stroke-width: 2.7; }
 .ui-fbc__quote { margin: 14px 20px 0; background: var(--surface-2); border-radius: 12px; padding: 12px 15px; display: flex; gap: 11px; }

package/src/styles/layout.css

@@ -55,6 +55,9 @@
   gap: var(--space-2);
   padding: 2px 6px;
   text-decoration: none;
+  /* display: brand — the rail's lockup is the same mark topbar.css sets, and the
+     two have to be the same face or the shell reads as two products. */
+  font-family: var(--font-display);
   font-weight: var(--weight-semibold);
   letter-spacing: var(--tracking-tight);
 }

package/src/styles/topbar.css

@@ -30,6 +30,10 @@
   display: inline-flex;
   align-items: center;
   gap: 9px;
+  /* display: brand — a wordmark is the mark, not text. It is two words beside a
+     glyph and it is what the product is recognised by, so it keeps the display
+     face at every size it is set at, including the 13px below. */
+  font-family: var(--font-display);
   font-weight: 600;
   color: var(--strong);
   text-decoration: none;
@@ -75,6 +79,7 @@
   color: var(--text);
   border: 1px solid var(--border);
   border-radius: 10px;
+  font: inherit;
   transition:
     transform var(--dur-fast) var(--ease),
     background var(--dur-fast) var(--ease),
@@ -142,6 +147,17 @@
   padding: 10px 13px;
   border-radius: 10px;
   cursor: pointer;
+  /* What a browser paints on a <button> before any author rule runs. A consumer
+     reaches for <button> whenever the row has to work from the keyboard, so the
+     row states these rather than taking them from the element. `font` and not
+     `font-family`: Chrome's rule is the shorthand `font: 400 13.3333px Arial`,
+     and answering the family alone leaves a row 2.25px shorter in type 1.17px
+     smaller. Any font longhand a rule keeps goes after it. why: #251 */
+  width: 100%;
+  background: none;
+  border: 0;
+  text-align: left;
+  font: inherit;
   transition: background var(--dur-fast) var(--ease);
 }
 .vopt:hover { background: var(--surface); }
@@ -174,6 +190,7 @@
   border: 1px solid var(--border);
   background: linear-gradient(145deg, var(--accent-strong), var(--purple));
   color: var(--accent-contrast);
+  font: inherit;
   font-weight: 600;
   font-size: 12.5px;
   display: grid;

package/src/tokens/tokens.css

@@ -42,8 +42,17 @@
   --container: 1120px;
   --measure: 860px;
 
-  /* -- Typography --------------------------------------------------------- */
-  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  /* -- Typography ---------------------------------------------------------
+   * Two roles, not one family. --font-display is the brand voice — headings,
+   * brand lockups, large readouts — and --font-sans is what an application is
+   * actually made of: tables, fields, paragraphs, chat. Poppins is a geometric
+   * display grotesque and holds its character at heading sizes; at 13-14px it
+   * smears, worst of all in Cyrillic, which is where the kit spends most of its
+   * pixels. IBM Plex Sans is humanist and narrower, and its Cyrillic was drawn
+   * by the same team as its Latin.
+   * why: docs/specification.md#typefaces */
+  --font-display: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
   --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
 
   --text-xs:   11px;