@apliteni/apliteni-ui 0.24.0 → 0.25.0

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.0",
   "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/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);

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;

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;

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;