@kommon-lab/tokens 0.1.6 → 0.1.7

package/README.md

@@ -116,6 +116,16 @@ var(--font-body-m-bold-font-weight)
 > **Responsive:** `display` and `title` tokens are defined mobile-first and automatically
 > override at `min-width: 768px`. No extra configuration needed.
 
+## Custom fonts
+
+Most brands use **Figtree** (Google Fonts) — no setup needed.
+
+**Ekstract** uses a custom font (`Ltt Recoleta`) bundled directly in this package. The `@font-face` declarations are injected automatically into `dist/css/ekstract.css` — just import the CSS and it works.
+
+**Beebs** uses `Really Sans Small` (font files not yet available). Figtree is used as a placeholder in the meantime.
+
+See `docs/tokens-guidelines.md` for details.
+
 ## For AI tools & LLMs
 
 This package is designed to work with AI coding assistants.

package/dist/css/beebs.css

@@ -1,3 +1,10 @@
+/* Really Sans Small — PLACEHOLDER using Figtree until font files are provided */
+@font-face {
+  font-family: 'Really Sans Small';
+  src: local('Figtree'), local('system-ui');
+  font-weight: 100 900;
+  font-style: normal;
+}
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/dist/css/ekstract.css

@@ -1,3 +1,25 @@
+/* Ltt Recoleta — custom brand font for Ekstract */
+@font-face {
+  font-family: 'Ltt Recoleta';
+  src: url('../fonts/ekstract/LttRecoleta-Medium.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Ltt Recoleta';
+  src: url('../fonts/ekstract/LttRecoleta-SemiBold.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Ltt Recoleta';
+  src: url('../fonts/ekstract/LttRecoleta-Bold.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
 /**
  * Do not edit directly, this file was auto-generated.
  */

package/docs/tokens-guidelines.md

@@ -43,3 +43,31 @@ Règles d'usage des tokens Kommon pour les développeurs et les outils IA.
 | `font.link.s.bold` | Variante de `font.link.s` pour créer davantage d'**emphase** sur le lien |
 | `font.link.xs` | **Lien cliquable** intégré dans un texte `font.body.xs` |
 | `font.link.xs.bold` | Variante de `font.link.xs` pour créer davantage d'**emphase** sur le lien |
+
+---
+
+## Fonts personnalisées par brand
+
+Toutes les brands utilisent **Figtree** (Google Fonts) pour les textes body et link.
+Les fonts de titres (`font.display.*`, `font.title.*`) varient par brand.
+
+| Brand | Font | Source | Statut |
+|---|---|---|---|
+| kiabi | Figtree | Google Fonts | ✅ |
+| kitchoun | Figtree | Google Fonts | ✅ |
+| kiabi-home | Figtree | Google Fonts | ✅ |
+| ekstract | **Ltt Recoleta** | Fichiers woff2 embarqués dans le paquet (`fonts/ekstract/`) | ✅ |
+| beebs | Really Sans Small | Fichiers woff2 à venir | ⏳ Figtree utilisée en placeholder |
+
+### Ekstract — Ltt Recoleta
+
+La font `Ltt Recoleta` est embarquée directement dans le paquet npm. Les `@font-face` sont injectés automatiquement dans `dist/css/ekstract.css` — aucune configuration supplémentaire nécessaire.
+
+Les fichiers sont disponibles dans `fonts/ekstract/` si un usage direct est nécessaire :
+- `LttRecoleta-Medium.woff2` — font-weight: 500
+- `LttRecoleta-SemiBold.woff2` — font-weight: 600
+- `LttRecoleta-Bold.woff2` — font-weight: 700
+
+### Beebs — Really Sans Small ⏳
+
+La font `Really Sans Small` n'est pas encore disponible. En attendant, un `@font-face` placeholder redirige vers Figtree. Dès réception des fichiers woff2, remplacer le placeholder dans `scripts/build-tokens.js` → `FONT_FACES.beebs`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kommon-lab/tokens",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Design tokens for Kommon Lab multi-brand design system",
   "exports": {
     "./css/*": "./dist/css/*",
@@ -9,6 +9,7 @@
   "files": [
     "dist/",
     "tokens/",
+    "fonts/",
     "docs/tokens-guidelines.md"
   ],
   "scripts": {