@hirobius/design-system 0.23.0 → 0.23.1

package/CHANGELOG.md

@@ -1,5 +1,32 @@
 # Changelog
 
+## 0.23.1
+
+### Upgrade
+
+```sh
+npx @hirobius/design-system@latest upgrade
+```
+
+- Looks different: The scoped HDS font variable now names Plus Jakarta Sans first instead of Satoshi.
+- Looks different: Display and title text now renders in Plus Jakarta Sans instead of Satoshi.
+- Looks different: Body, UI and caption text now renders in Plus Jakarta Sans instead of Satoshi.
+- Looks different: fonts.css no longer declares Satoshi 400; it declares Plus Jakarta Sans 400 instead, so drop any font-family: Satoshi of your own.
+- And 2 more: see [UPGRADING.md](https://github.com/hirobius/hds/blob/main/UPGRADING.md#0231).
+
+### Patch Changes
+
+- d907e73: CONSUMING.md points agents at the docs site (https://hirobius-hds-components.vercel.app/llms.txt), which now serves the llms files, the manifest, DESIGN.md and component-api.json.
+- 29af78f: feat(brand): the primary and display typeface is now Plus Jakarta Sans.
+
+  Satoshi's license (the Fontshare FF EULA) does not allow the font files to be redistributed, so HDS could not keep shipping them in the package or a public repo. Plus Jakarta Sans (Tokotype, SIL Open Font License 1.1) replaces it in the same three weights: 400 body, 500 UI and captions, 700 display and titles.
+  - `primitive.typography.family.primary` and `.display` now start with `"Plus Jakarta Sans"`, with the same system fallback stack.
+  - `@hirobius/design-system/fonts.css` now declares Plus Jakarta Sans 400/500/700, as Latin-subset woff2 files of about 15 KB each (Satoshi's were about 26 KB). The OFL license text ships beside the fonts in `dist/fonts/`.
+  - `package.json` `license` is now `MIT AND OFL-1.1`, since every bundled font is OFL.
+  - `ch`-based widths read a little wider in Figma, because the "0" advance is 0.732em instead of 0.683em.
+
+  Visual-only, with no API changes. If you import `fonts.css`, the new face loads with nothing else to do.
+
 ## 0.23.0
 
 ### Upgrade

package/CONSUMING.md

@@ -29,7 +29,7 @@ version keeps the `LucideIcon` type identical).
 ```tsx
 import { Button, Card, Dialog } from '@hirobius/design-system';
 import '@hirobius/design-system/tokens.css'; // required — design tokens as CSS vars
-import '@hirobius/design-system/fonts.css'; // optional — the HDS brand fonts (Satoshi, IBM Plex Mono)
+import '@hirobius/design-system/fonts.css'; // optional — the HDS brand fonts (Plus Jakarta Sans, IBM Plex Mono)
 
 export function Example() {
   return (
@@ -45,7 +45,7 @@ Available subpaths:
 | Import                               | What                                                                                                                                                                                                                                        |
 | ------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | `@hirobius/design-system`            | The 43-component core set ([README → What belongs in the system](README.md#what-belongs-in-the-system)), the rest of the allow-list and the templates; the `pattern` tier is only in `/patterns`                                            |
-| `@hirobius/design-system/fonts.css`  | Optional brand fonts (Satoshi, IBM Plex Mono); woff2 files ship in the package, relative URLs, `font-display: swap`                                                                                                                         |
+| `@hirobius/design-system/fonts.css`  | Optional brand fonts (Plus Jakarta Sans, IBM Plex Mono); woff2 files ship in the package, relative URLs, `font-display: swap`                                                                                                               |
 | `@hirobius/design-system/tokens.css` | Token CSS variables (import once at app root)                                                                                                                                                                                               |
 | `@hirobius/design-system/tokens`     | Token values as TS constants                                                                                                                                                                                                                |
 | `@hirobius/design-system/cn`         | `cn()` class-merge helper                                                                                                                                                                                                                   |
@@ -103,7 +103,7 @@ them without network access. Under `node_modules/@hirobius/design-system/`:
 - `DESIGN.md` - the lean visual spec
 - `src/app/data/component-api.json` - full prop reference
 
-The same files are served at <https://hirobius-design-system.vercel.app/llms.txt>
+The same files are served at <https://hirobius-hds-components.vercel.app/llms.txt>
 (and `/llms-full.txt`, `/llms/components.txt`, `/DESIGN.md`, `/component-api.json`).
 
 ## 3. Receiving updates

package/DESIGN.md

@@ -28,8 +28,8 @@ Feedback hues are never decorative; do not use them as accents. Light and dark m
 <!-- auto:start:typography -->
 HDS ships three typefaces — each with a distinct and exclusive role:
 
-- **Display / Heading font**: Satoshi. Bound exclusively to the `display` and `title` styles. Never used for body copy or UI labels.
-- **Body / UI font**: Satoshi. All prose, labels, small text, captions, and UI copy.
+- **Display / Heading font**: Plus Jakarta Sans. Bound exclusively to the `display` and `title` styles. Never used for body copy or UI labels.
+- **Body / UI font**: Plus Jakarta Sans. All prose, labels, small text, captions, and UI copy.
 - **Mono font**: IBM Plex Mono. Reserved for tokens, code, technical callouts, and metric readouts.
 
 Weights declared: `400` regular, `500` medium, `700` bold. Heading styles (display · title) use `700` bold; body, UI, and caption use `400` regular / `500` medium.

package/NOTICE.md

@@ -1,9 +1,9 @@
 # License notice
 
-`@hirobius/design-system` is not under a single license.
+`@hirobius/design-system` is under two licenses: MIT for the code, and the SIL Open Font License 1.1 for the bundled fonts.
 
 - **HDS code** (components, compiled JavaScript, types, CSS, and token files): MIT. See [LICENSE](LICENSE).
-- **Satoshi** (weights 400, 500 and 700, by Indian Type Foundry, distributed through [Fontshare](https://www.fontshare.com/fonts/satoshi)): ITF Free Font License.
+- **Plus Jakarta Sans** (weights 400, 500 and 700, by Tokotype, [source](https://github.com/tokotype/PlusJakartaSans), Latin subset): SIL Open Font License 1.1.
 - **IBM Plex Mono** (weight 400, by IBM, [source](https://github.com/IBM/plex)): SIL Open Font License 1.1.
 
-Both fonts are embedded as base64 `@font-face` data in `dist/tokens.css` and `dist/styles.css`. The MIT license does not cover them; each font keeps its own license. `dist/variables.css` embeds no fonts.
+Both fonts ship as woff2 files in `dist/fonts/`, declared by the opt-in `dist/fonts.css`; each font's license text ships beside it as `dist/fonts/<family>-LICENSE.txt`. The MIT license does not cover the fonts. `dist/tokens.css`, `dist/styles.css` and `dist/variables.css` embed no fonts.

package/README.md

@@ -1,11 +1,11 @@
 # Hirobius Design System
 
-[![CI](https://github.com/hirobius/hds/actions/workflows/ci.yml/badge.svg)](https://github.com/hirobius/hds/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@hirobius/design-system)](https://www.npmjs.com/package/@hirobius/design-system) [![Storybook](https://img.shields.io/badge/Storybook-live-ff4785)](https://hirobius-design-system.vercel.app)
+[![CI](https://github.com/hirobius/hds/actions/workflows/ci.yml/badge.svg)](https://github.com/hirobius/hds/actions/workflows/ci.yml) [![npm](https://img.shields.io/npm/v/@hirobius/design-system)](https://www.npmjs.com/package/@hirobius/design-system) [![Docs](https://img.shields.io/badge/Docs-live-000000)](https://hirobius-hds-components.vercel.app)
 
 **A governed, token-first React design system.** Components plus the system
 around them: a DTCG token pipeline (CSS variables + TypeScript constants),
 quality gates in git hooks and CI, one-way Figma sync, and WCAG-checked contrast
-and focus. Live Storybook: **<https://hirobius-design-system.vercel.app>**
+and focus. Live docs: **<https://hirobius-hds-components.vercel.app>**
 
 ```bash
 pnpm add @hirobius/design-system
@@ -13,7 +13,7 @@ pnpm add @hirobius/design-system
 
 Upgrading: [UPGRADING.md](UPGRADING.md) lists what each release asks of you. From 0.22.0, `npx @hirobius/design-system@latest upgrade` does it for you.
 
-[![Buttons under the Brand and Theme dials: base and accent-lilac, light and dark](docs/images/storybook-brand-theme-dials.png)](https://hirobius-design-system.vercel.app)
+[![Buttons under the Brand and Theme dials: base and accent-lilac, light and dark](docs/images/storybook-brand-theme-dials.png)](https://hirobius-hds-components.vercel.app)
 
 <!-- auto:start:front-door-counts -->
 
@@ -128,12 +128,12 @@ HDS theming is driven by root attributes + CSS variables, so it works with **zer
 JavaScript** — set them on any element (React, Astro, plain HTML) and every HDS
 descendant re-skins:
 
-| Dial    | Attribute / var                                | Values          | Default                 |
-| ------- | ---------------------------------------------- | --------------- | ----------------------- |
-| theme   | `data-theme`                                   | `dark`          | light (unset)           |
-| density | `data-density`                                 | `compact`       | comfortable (unset)     |
-| brand   | `data-brand` (+ `data-tenant` alias)           | overlay slug    | base (unset)            |
-| font    | `--hds-font-family` / `--hds-font-family-mono` | any font-family | Satoshi / IBM Plex Mono |
+| Dial    | Attribute / var                                | Values          | Default                           |
+| ------- | ---------------------------------------------- | --------------- | --------------------------------- |
+| theme   | `data-theme`                                   | `dark`          | light (unset)                     |
+| density | `data-density`                                 | `compact`       | comfortable (unset)               |
+| brand   | `data-brand` (+ `data-tenant` alias)           | overlay slug    | base (unset)                      |
+| font    | `--hds-font-family` / `--hds-font-family-mono` | any font-family | Plus Jakarta Sans / IBM Plex Mono |
 
 ```html
 <!-- zero-JS: static markup (e.g. an Astro layout) -->
@@ -220,6 +220,7 @@ What CI and the hooks check today, and nothing more:
 - **Lint:** `jsx-a11y` rules run inside ESLint with zero warnings allowed.
 - **Focus:** `scripts/check-focus-states.mjs` (`pnpm check:focus`) audits focus styles on interactive components. It runs in `pretest` under `pnpm test`, so in the pre-push hook and in CI, and passes with 0 violations.
 - **Storybook:** the `addon-a11y` panel shows axe results for each story while you review it. The gate is `scripts/check-storybook-axe.mjs`: CI scans every built story in light and dark, including the open Select and Combobox, and fails on serious or critical violations outside its allowlist (`scripts/axe-allowlist.json`). The allowlist has one entry: `aria-hidden-focus` on the open Select story, where Radix Select hides the page around its listbox while focus stays trapped inside it (hds#407).
+- **Docs site:** `scripts/check-docs-axe.mjs` (`pnpm check:docs-axe`, after `pnpm docs:publish`) scans the live demo of every `/docs/components/*` and `/docs/patterns/*` page of the built docs site in light and dark with the same axe rules, scoped to the demo frame so the Fumadocs chrome does not count. CI runs it and fails on serious or critical violations outside `scripts/docs-axe-allowlist.json`, which is empty.
 
 Screen-reader output is checked by `tests/primitive-contracts/screen-reader.contract.test.tsx`, which runs in `pnpm test` and walks Dialog, Menu, Select, Combobox, Table and Alert with a virtual screen-reader (`@guidepup/virtual-screen-reader`) under jsdom, asserting the role, name and state phrases it reads and the alert's live-region announcement; it reads the jsdom accessibility tree, not what a desktop or mobile screen-reader says.
 
@@ -284,4 +285,4 @@ public/
 
 ## License
 
-The HDS code is MIT ([LICENSE](LICENSE)). The package CSS also embeds the Satoshi and IBM Plex Mono fonts, which keep their own licenses and are not covered by MIT. See [NOTICE.md](NOTICE.md).
+The HDS code is MIT ([LICENSE](LICENSE)). The package CSS also embeds the Plus Jakarta Sans and IBM Plex Mono fonts, which keep their own licenses and are not covered by MIT. See [NOTICE.md](NOTICE.md).

package/UPGRADING.md

@@ -1,6 +1,6 @@
 # Upgrading @hirobius/design-system
 
-This file only knows the releases up to the version you have installed, 0.23.0. For newer releases, run `npx @hirobius/design-system@latest upgrade`: it always fetches the newest steps.
+This file only knows the releases up to the version you have installed, 0.23.1. For newer releases, run `npx @hirobius/design-system@latest upgrade`: it always fetches the newest steps.
 
 ## How to upgrade
 
@@ -10,6 +10,19 @@ npx @hirobius/design-system@latest upgrade
 
 It finds the version you have, moves you to the newest release, runs each release's codemods (Fixed for you) and lists what is left for you (Do by hand). It works from 0.16.0 on; from an older version, first reach 0.16.0 with the notes in CHANGELOG.md. MIGRATIONS.md has longer guides for the big releases.
 
+## 0.23.1
+
+Released 2026-10-11 (patch). 6 that look different.
+
+### Looks different
+
+- The scoped HDS font variable now names Plus Jakarta Sans first instead of Satoshi.
+- Display and title text now renders in Plus Jakarta Sans instead of Satoshi.
+- Body, UI and caption text now renders in Plus Jakarta Sans instead of Satoshi.
+- fonts.css no longer declares Satoshi 400; it declares Plus Jakarta Sans 400 instead, so drop any font-family: Satoshi of your own.
+- fonts.css no longer declares Satoshi 500; it declares Plus Jakarta Sans 500 instead, so drop any font-family: Satoshi of your own.
+- fonts.css no longer declares Satoshi 700; it declares Plus Jakarta Sans 700 instead, so drop any font-family: Satoshi of your own.
+
 ## 0.23.0
 
 Released 2026-10-10 (minor). 14 that look different.