@engineio/ui 0.5.0 → 0.6.0

package/AGENTS.md

@@ -76,7 +76,8 @@ radii      --radius-tag 6  --radius-field 10  --radius-card-inner 10
            --radius-control 999
 motion     --ease-brand  --ease-brand-out  --ease-brand-accelerate
            140ms controls · 220ms surfaces · 360–640ms reveals
-type       --font-brand (Proxima Nova) --font-mono (JetBrains Mono, see gaps)
+type       --font-brand --font-condensed --font-extra-condensed --font-mono
+           ROLES ONLY — no face ships here. Bind them in your repo (see below)
 depth      --shadow-panel  --shadow-modal   (product chrome and modals only)
 utility    `field` — the shared input skin, incl. the focus ring
 ```
@@ -131,8 +132,30 @@ State these rather than working around them silently.
    component where §6 specifies two, and Alert signals state with a coloured
    left-edge bar which §11 prohibits for *category or ownership* — state is a
    narrower reading, not an exemption.
-3. **JetBrains Mono is not loaded.** `--font-mono` falls back to the platform
-   monospace, so every mono surface is off-brand until the binary ships.
-4. **Proxima Nova is commercially licensed** and ships inside this package.
+3. **No mono face.** JetBrains Mono is retired; `--font-mono` resolves to the
+   brand face. Set it yourself if a surface genuinely needs character-cell
+   alignment.
+4. **No typeface ships with this package.** It names the type roles and binds
+   none of them. Each consumer declares its own `@font-face` blocks, keeps the
+   binaries in its own repo, and overrides the tokens:
+
+   ```css
+   @import "./fonts.css";          /* your own @font-face blocks */
+   @import "@engineio/ui/styles";
+
+   @theme {
+     --font-brand: "ProximaNova", "Helvetica Neue", Arial, sans-serif;
+     --font-condensed: "ProximaNovaCondensed", Arial, sans-serif;
+     --font-extra-condensed: "ProximaNovaExtraCondensed", Arial, sans-serif;
+   }
+   ```
+
+   **This is a required setup step and it fails quietly** — exactly like a
+   missing `@source` line. Skip it and the tokens still resolve, nothing
+   errors, and the app renders in the system stack. Generic-looking type is
+   the symptom.
+
+   Proxima Nova used to ship here. It is commercially licensed and this package
+   is MIT and public, which is why it no longer does.
 5. **Engine Integration's accent is unsettled** — build Integration in magenta;
    `--color-partner-yellow` exists but is not in use.

package/README.md

@@ -97,15 +97,45 @@ this. Every primitive also passes `class` through `cn`, so
 colours, three status colours, a twelve-step neutral ramp, radii by role, two
 shadows, three easings.
 
-**The brand face** — Proxima Nova, seven cuts, referenced by relative path so
-your bundler fingerprints them out of `node_modules`. You do not need a copy in
-`static/fonts`.
+**Type roles, not faces** — `--font-brand`, `--font-condensed`,
+`--font-extra-condensed`, `--font-mono`. No typeface ships here. Declare your
+own `@font-face` blocks, keep the binaries in your repo, and bind the tokens in
+your `@theme`. See "Wiring your faces" below — it is a required step and it
+fails quietly.
 
 **Marks** — `EngineWordmark` and `EngineIcon`, vector, in the two sanctioned
 colourways (`variant="primary"` white, `variant="secondary"` Off Black). Size
 by height alone. The wordmark is artwork, not type — with the vector in the
 package there is no reason to typeset "engine" in Proxima Nova again.
 
+### Wiring your faces
+
+The system names four type roles and binds none of them:
+
+```css
+@import "./fonts.css";          /* your own @font-face blocks */
+@import "tailwindcss";
+@import "@engineio/ui/styles";
+@source "../node_modules/@engineio/ui/dist";
+
+@theme {
+  --font-brand: "ProximaNova", "Helvetica Neue", Arial, sans-serif;
+  --font-condensed: "ProximaNovaCondensed", Arial, sans-serif;
+  --font-extra-condensed: "ProximaNovaExtraCondensed", Arial, sans-serif;
+  /* --font-mono defaults to --font-brand; set it only if you have a mono face */
+}
+```
+
+Keep the binaries in your own `static/fonts/` and reference them with absolute
+`/fonts/...` URLs. Weight coverage is a local concern too — if your family is
+missing a cut the product asks for, declare the face over a `font-weight`
+RANGE so the gap maps somewhere deliberate rather than wherever the browser's
+matching algorithm lands.
+
+**Like `@source`, this fails silently.** The tokens resolve either way, so a
+repo that skips it renders in the system stack with no error. Generic-looking
+type is the symptom.
+
 **Primitives** — Alert, Badge, Button, Card, Checkbox, Dialog, Input, Label,
 Popover, Progress, RadioGroup, Select, Separator, Skeleton, Switch, Table, Tabs,
 Textarea, Tooltip.
@@ -262,18 +292,20 @@ first is a decision made here that the brand documents have not caught up with.
    Either way, §6 and §11 need updating or these need reverting, and by this
    repo's own source-of-truth rule the document nominally wins.
 
-4. **JetBrains Mono is not loaded.** The brand specifies it for all numerics,
-   keys, IDs, code and eyebrow labels. Neither engine nor rgs has ever shipped
-   the binary, so every monospace surface in both products renders in the
-   platform default. `--font-mono` falls back safely, but the brand face is
-   absent. It is OFL-licensed and free to redistribute: drop the `.woff2` files
-   into `src/lib/fonts/` and add the `@font-face` blocks to `styles/fonts.css`.
-
-5. **Proxima Nova is commercially licensed.** The seven cuts ship inside this
-   package, which is private and org-scoped — the same internal distribution as
-   the copies already sitting in engine's and rgs's `static/fonts`. Worth a
-   glance from whoever owns the licence before this goes anywhere less private.
-   Inter is the documented substitute where the licence does not reach.
+4. **No mono face.** JetBrains Mono is retired at the owner's direction and
+   `--font-mono` resolves to the brand face, so `font-mono` is not monospaced.
+   Set the token yourself if a surface genuinely needs character-cell
+   alignment. ENGINE-BRAND.md and ENGINE-DESIGN-SYSTEM.md still name JetBrains
+   Mono and need updating.
+
+5. **No typeface ships with this package, and that is the point.** Proxima Nova
+   used to. It is commercially licensed, and this package is MIT and published
+   publicly to npm from a public repo — so the seven cuts were being handed to
+   every reader of the registry under a licence nobody here can grant. They are
+   gone from `dist/`, and each product now keeps its own copy in its own
+   private repo. Note that removing them does not unpublish them: they remain
+   inside every already-published 0.x tarball and in this repo's git history,
+   which is a separate call for whoever owns the licence.
 
 6. **Engine Integration's accent is unsettled.** Brand direction assigns it
    Partner Yellow; every shipped surface is magenta and was deliberately

package/dist/styles/index.css

@@ -18,11 +18,14 @@
 
   Import the parts individually if you need finer control:
 
-      @import "@engineio/ui/styles/fonts";
       @import "@engineio/ui/styles/tokens";
       @import "@engineio/ui/styles/utilities";
+
+  NO FACES SHIP HERE. This package names the type ROLES (--font-brand,
+  --font-condensed, --font-extra-condensed, --font-mono) and binds none of
+  them to a binary. Each consumer declares its own @font-face blocks and sets
+  those tokens — see "Type" in tokens.css for the contract and the recipe.
 */
 
-@import "./fonts.css";
 @import "./tokens.css";
 @import "./utilities.css";

package/dist/styles/tokens.css

@@ -177,28 +177,53 @@
   --ease-brand-out: cubic-bezier(0.16, 1, 0.3, 1);
   --ease-brand-accelerate: cubic-bezier(0.6, 0, 0.3, 1);
 
-  /* ── Type ─────────────────────────────────────────────────────────── */
-  /* Proxima Nova is the brand face and ships with this package. Inter is the
-     documented substitute where the licence does not reach. */
-  --font-brand:
-    "ProximaNova", "Inter", "Helvetica Neue", Arial, sans-serif;
-  --font-sans: var(--font-brand);
-  --font-condensed:
-    "ProximaNovaCondensed", "ProximaNova", Arial, sans-serif;
-  --font-extra-condensed:
-    "ProximaNovaExtraCondensed", "ProximaNovaCondensed", Arial, sans-serif;
-  /* NO MONO FACE. JetBrains Mono was specified for numerics, keys, IDs, code
-     and eyebrow labels, and is now retired at the owner's direction: Proxima
-     Nova is the root face everywhere, and there is no second typeface.
-
-     The token stays, pointed at the brand face, because ~200 call sites and
-     every `font-mono` utility read it — removing the name would silently drop
-     each of them to the browser default rather than to the brand. Code blocks
-     that genuinely need character-cell alignment should say so explicitly and
-     are a product decision, not a token one.
+  /* ── Type ─────────────────────────────────────────────────────────────
+     THIS PACKAGE NAMES ROLES. IT SHIPS NO FACES.
+
+     Every value below is a fallback, not a choice. The consumer declares its
+     own @font-face blocks, keeps the binaries in its own repo, and overrides
+     these four names in its own `@theme`:
+
+         @import "./fonts.css";        <- your own @font-face blocks
+         @import "@engineio/ui/styles";
+
+         @theme {
+           --font-brand: "YourFace", "Helvetica Neue", Arial, sans-serif;
+           --font-condensed: "YourFaceCondensed", Arial, sans-serif;
+           --font-extra-condensed: "YourFaceExtraCondensed", Arial, sans-serif;
+         }
+
+     WHY, rather than shipping the brand face here as this package used to.
+
+     1. LICENCE. Proxima Nova is commercially licensed. This package is MIT
+        and published publicly to npm from a public repo, so shipping the
+        binaries handed every reader of the registry a font nobody here has
+        the right to sublicense. That is the blocking reason.
+     2. ONE SYSTEM, MANY BRANDS. Engine Studio and Engine Integration are
+        Proxima Nova; the casino product is a separate brand on its own faces.
+        A design system that hard-codes one typeface makes every other brand
+        fight it — which is exactly what the casino repo was doing.
+     3. WEIGHTS ARE A LOCAL PROBLEM. Which cuts a repo has licensed, and how
+        the gaps get mapped, differs per repo. That belongs next to the
+        binaries, not in a shared token.
+
+     SETTING THESE IS A REQUIRED SETUP STEP, and skipping it fails the same
+     quiet way a missing `@source` line does: the tokens still resolve, so
+     nothing errors — the app just renders in the system stack. If the type
+     looks generic, this is the first thing to check.
+
+     --font-mono has NO mono face on purpose. JetBrains Mono was retired at the
+     owner's direction and the token points at the brand face, because every
+     `font-mono` utility reads it and removing the name would drop those call
+     sites to the browser default rather than to the brand. A consumer that
+     wants a real monospace sets it, like any other role.
 
      ENGINE-BRAND.md and ENGINE-DESIGN-SYSTEM.md still name JetBrains Mono and
-     need updating to match. */
+     still describe the face as shipping with the system; both need updating. */
+  --font-brand: ui-sans-serif, system-ui, -apple-system, Arial, sans-serif;
+  --font-sans: var(--font-brand);
+  --font-condensed: var(--font-brand);
+  --font-extra-condensed: var(--font-condensed);
   --font-mono: var(--font-brand);
 
   --breakpoint-2xl: 1400px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@engineio/ui",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "The Engine design system — tokens, fonts and Svelte primitives.",
   "license": "MIT",
   "private": false,
@@ -32,9 +32,7 @@
     },
     "./styles": "./dist/styles/index.css",
     "./styles/tokens": "./dist/styles/tokens.css",
-    "./styles/fonts": "./dist/styles/fonts.css",
     "./styles/utilities": "./dist/styles/utilities.css",
-    "./fonts/*": "./dist/fonts/*",
     "./utils": {
       "types": "./dist/utils.d.ts",
       "default": "./dist/utils.js"

package/dist/styles/fonts.css

@@ -1,152 +0,0 @@
-/*
-  Engine design system — the brand face.
-
-  Proxima Nova only. Regular (400) for body, Semibold (600) for subtitles and
-  UI labels, Bold (700) for display and headings, Black (900) and the
-  condensed cuts for poster-scale words and stat bands.
-
-  Paths are RELATIVE to this file, so the consumer's bundler resolves and
-  fingerprints the binaries out of `node_modules`. The engine and rgs repos
-  currently use absolute `/fonts/...` URLs, which is why both of them keep
-  their own copy of these seven files in `static/fonts/`. Importing this
-  stylesheet replaces that: delete the local copies once you have migrated.
-
-  THREE CORRECTIONS TO THE UPSTREAM STYLESHEET, all deliberate:
-
-  1. Semibold is mapped to 600, not 500. Upstream declares
-     `ProximaNovaSemibold.otf` at `font-weight: 500`, so every `font-semibold`
-     (600) label in the products — which the design system specifies for ALL
-     UI labels and subtitles — matched no @font-face at all and was either
-     synthesised by the browser or snapped to Bold.
-
-  2. `font-display: swap` on every face. Otherwise the whole UI holds at
-     invisible text for up to 3s on a cold cache, and these are .otf files
-     served uncompressed.
-
-  3. LeagueGothic is NOT here. Upstream loads three LeagueGothic faces; the
-     brand is Proxima Nova and JetBrains Mono, and "no other typefaces" is an
-     explicit rule. If a product still needs it, it is a product font — load
-     it there.
-*/
-
-/*
-  ── WEIGHT RANGES, AND WHY ────────────────────────────────────────────────
-
-  Four faces ship: Regular 400, Semibold 600, Bold 700, Black 900. There is no
-  Medium (500) binary and no ExtraBold (800) one, and the products ask for both
-  — 500 is the single most-used non-body weight across the three sites (490
-  uses in studio, 61 in rgs, 7 in casino) and 800 has 23.
-
-  Left to the CSS font-matching algorithm those two land badly. A request for
-  500 searches DOWN before it searches up, so it resolves to Regular and a
-  `font-medium` label comes out identical to body text — the emphasis is
-  silently gone. A request for 800 searches UP, so it resolves to Black, two
-  steps heavier than asked for.
-
-  This was masked until now: the products loaded Inter (400–800) and Archivo
-  (400–600) from Google Fonts, both of which carry a real 500.
-
-  So each face declares the RANGE it stands in for, rather than a single value.
-  A static face named over a range is used for every weight in it, with no
-  synthesis. 500 is deliberately folded UP into Semibold, not down into
-  Regular: `font-medium` is used in these UIs to lift labels above body, and
-  the brand specifies Semibold for exactly that job (ENGINE-BRAND.md §3, "UI
-  labels and subtitles"). Folding it down would erase the distinction the call
-  site was making.
-
-  650 and 700 keep resolving to Bold exactly as they do today. Only 500 and 800
-  change, and both were broken.
-
-  THE REAL FIX is the two missing binaries. If Medium and ExtraBold can be
-  licensed, add them and narrow these ranges back to single values.
-*/
-
-/* ── ProximaNova ──────────────────────────────────────────────────────── */
-
-@font-face {
-  font-family: "ProximaNova";
-  src: url("../fonts/ProximaNovaRegular.otf") format("opentype");
-  /* Body only. 500 is NOT folded in here — see the note above. */
-  font-weight: 400;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "ProximaNova";
-  src: url("../fonts/ProximaNovaSemibold.otf") format("opentype");
-  /* Stands in for Medium: no 500 binary ships. */
-  font-weight: 500 600;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "ProximaNova";
-  src: url("../fonts/ProximaNovaBold.otf") format("opentype");
-  /* Stands in for ExtraBold: no 800 binary ships. 650 lands here too, which
-     is where it already resolved. */
-  font-weight: 650 800;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "ProximaNova";
-  src: url("../fonts/ProximaNovaBlack.otf") format("opentype");
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-/* ── Condensed cuts ───────────────────────────────────────────────────── */
-/*
-  Declared as their own families rather than as `font-stretch` variants of
-  ProximaNova. Upstream uses font-stretch, which means the condensed cuts can
-  only be reached by a `font-stretch` declaration — there is no Tailwind
-  utility for that, so in practice they were unreachable from component
-  markup. Separate families make `font-condensed` work.
-
-  Condensed Black and Extra Condensed Black are for big numbers and
-  poster-scale words only — stat bands, lanyards, single-word statements.
-  Never running text.
-*/
-
-@font-face {
-  font-family: "ProximaNovaCondensed";
-  src: url("../fonts/ProximaNovaCondensedBlack.otf") format("opentype");
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "ProximaNovaExtraCondensed";
-  src: url("../fonts/ProximaNovaExtraCondensedBlack.otf") format("opentype");
-  font-weight: 900;
-  font-style: normal;
-  font-display: swap;
-}
-
-@font-face {
-  font-family: "ProximaNovaExtraCondensed";
-  src: url("../fonts/ProximaNova-ExtraCondensedThin.otf") format("opentype");
-  font-weight: 100;
-  font-style: normal;
-  font-display: swap;
-}
-
-/*
-  ── JetBrains Mono ────────────────────────────────────────────────────────
-
-  NOT LOADED. The design system specifies JetBrains Mono for all numerics,
-  keys, IDs, code samples and eyebrow labels, and neither the engine nor the
-  rgs repo has ever shipped the binary — so every monospace surface in both
-  products currently renders in the platform default. `--font-mono` falls back
-  to `ui-monospace` so nothing breaks, but the brand face is absent.
-
-  JetBrains Mono is OFL-licensed and free to redistribute, so this is a
-  five-minute fix that was deliberately left to you rather than pulling font
-  binaries off the internet unasked: drop the .woff2 files into
-  `src/lib/fonts/` and add the @font-face blocks here. See README, Known gaps.
-*/