@ptlm-azulejo/themes 1.1.0 → 1.2.0-alpha.67

package/CHANGELOG.md

@@ -0,0 +1,56 @@
+# @ptlm-azulejo/themes
+
+## 1.2.0
+
+### Minor Changes
+
+- eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
+  expose stable `data-testid` hooks.
+
+  - Each preset now names its brand's typeface in `--font-family`
+    (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
+    `Arial, sans-serif` as the fallback stack.
+  - Components apply that typeface on their root, so they follow the active brand
+    instead of inheriting the host page's font. Opt out per component by setting
+    `--font-family: inherit` on it.
+  - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
+    (400), semi-bold (600) and bold (700) weights.
+  - Every component now exposes `data-testid` on its root and on meaningful
+    sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
+    `datepicker` / `datepicker-clear`, `segmented-control` /
+    `segmented-control-segment`), so tests can target them without depending on
+    CSS class names.
+
+  As with upstream Mozaic, the presets **name** the typeface but ship no
+  `@font-face` and no font binaries — loading the files stays the app's job, so you
+  keep control of hosting, subsetting and preload. Until you load them the fallback
+  stack renders and nothing breaks. Install the font package matching your brand
+  alongside the preset:
+
+  ```bash
+  # Leroy Merlin
+  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
+  # Adeo
+  yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
+  ```
+
+  See the Fonts section of `packages/themes/README.md` for the full recipe.
+
+## 1.1.0
+
+### Minor Changes
+
+- 53000f7: Add Mozaic-aligned multi-brand theming support.
+
+  - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
+    and brand presets selected by a root class (`presets/leroy-merlin.css`,
+    `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
+    light/dark.
+  - `AzButton` now consumes theme tokens through utilities mapped in
+    `@theme inline`, working across both brands and in light/dark.
+
+  **BREAKING:** components no longer bake brand colors. The consumer must now
+  import `@ptlm-azulejo/themes/base.css` + a preset and apply the
+  `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
+  element; otherwise components render uncolored. See the migration notes in
+  `packages/themes/README.md`.

package/README.md

@@ -11,12 +11,24 @@ The theme has two parts:
 
 | File | Contents | Brand-specific? |
 |---|---|---|
-| `base.css` | **Structural + status** tokens (`--spacing-*`, `--border-radius-*`, `--font-*`, `--shadow-*`, `--color-danger-*`…) | No |
-| `presets/<brand>.css` | **Functional color** tokens (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes |
+| `base.css` | **Structural + status** tokens (`--spacing-*`, `--border-radius-*`, `--font-size-*`, `--font-weight-*`, `--shadow-*`, `--color-danger-*`…) | No |
+| `presets/<brand>.css` | **Brand** tokens — typeface (`--font-family`) and functional colors (`--color-brand`, `--color-text-*`, `--color-background-*`, `--color-border-*`) | Yes |
 
 The brand is selected with a **class on the root element** (`.preset-lm`,
 `.preset-adeo`) and light/dark mode with the **`data-theme`** attribute.
 
+> Font **sizes and weights** live in `base.css` and are the same for every brand
+> (400 / 500 / 600 / 700). The **typeface itself** is the brand's voice, so
+> `--font-family` lives in the preset.
+>
+> Heads-up for anyone doing a strict DE→PARA: upstream Mozaic defines the weights
+> **per brand** — `build/<brand>/css/root.css` in `@mozaic-ds/tokens` sets
+> `--font-weight-semi-bold` to **500** for Adeo (aliased to `font.weight.medium`)
+> and 600 for Leroy Merlin. This library uses 600 for both, and exposes 500
+> separately as `--font-weight-medium`. The two also differ on which cuts
+> physically exist: LeroyMerlinSans ships no Medium (500) or Bold (700) file, so
+> 500 falls back to Regular and 700 is browser-synthesized from SemiBold.
+
 ## Installation
 
 ```bash
@@ -36,7 +48,11 @@ import '@ptlm-azulejo/button/style.css'
 
 > Each preset `@import`s `base.css` (the structural + status tokens), so a single
 > preset import gives you everything. You can still import `base.css` on its own
-> (`@ptlm-azulejo/themes/base.css`) if you ever need it without a brand.
+> (`@ptlm-azulejo/themes/base.css`) if you ever need it without a brand — but note
+> it carries **no `--font-family`**, since the typeface belongs to the brand.
+> Without a preset, components render uncolored and fall back to a generic
+> sans-serif (the font weights still apply). Define `--font-family` yourself if you
+> go this route.
 
 Then apply the brand class on `<html>` (or any container):
 
@@ -57,6 +73,70 @@ Then apply the brand class on `<html>` (or any container):
 - `data-theme="dark"` forces dark; `data-theme="light"` forces light.
 - With no `data-theme`, the preset follows the operating system's `prefers-color-scheme`.
 
+## Fonts
+
+Each preset **names** its brand's typeface but **ships no font files and no
+`@font-face`** — exactly like upstream Mozaic, which sets
+`font-family: LeroyMerlin` and assumes the app already loaded it. Loading the
+files is the app's job.
+
+There is a package per brand that does exactly that job:
+
+| Brand | `--font-family` | Font package |
+|---|---|---|
+| `.preset-lm` | `"LeroyMerlin",  Arial, sans-serif` | [`@ptlm-azulejo/fonts-leroy-merlin`](../FontsLeroyMerlin/README.md) |
+| `.preset-adeo` | `"Roboto",  Arial, sans-serif` | [`@ptlm-azulejo/fonts-adeo`](../FontsAdeo/README.md) |
+
+```bash
+yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
+```
+
+```js
+import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
+import '@ptlm-azulejo/fonts-leroy-merlin'
+```
+
+Until you load a typeface the fallback stack renders, so nothing breaks — it just
+isn't on-brand. You can also wire the `@font-face` yourself if you'd rather
+control hosting, subsetting and preload; the packages are a convenience, not a
+requirement.
+
+Declare the cuts the tokens reference — 400, 500, 600 and 700. One upstream quirk
+worth knowing: **LeroyMerlinSans ships only Light, Regular and SemiBold**
+(`@mozaic-ds/web-fonts`), so it has no Medium (500) or Bold (700) file — 500 falls
+back to Regular and 700 is synthesized from SemiBold, same as upstream Mozaic.
+Roboto on the Google Fonts CDN serves all four cuts.
+
+### How each brand loads its font
+
+The two font packages differ, for licensing reasons:
+
+- **`@ptlm-azulejo/fonts-leroy-merlin` ships the files** and serves them from your
+  own domain — LeroyMerlinSans is proprietary and not on a public CDN.
+- **`@ptlm-azulejo/fonts-adeo` loads Roboto from the Google Fonts CDN** — Roboto is
+  OFL-1.1 and Google serves every cut the tokens reference, so the package is a
+  single `@import` with no binaries to vendor.
+
+### Only the active brand's font is downloaded
+
+You can declare **both** brands' faces and switch freely — the other brand's file
+is never fetched. `@font-face` is a *declaration*, not a fetch: a browser only
+requests a font file when text it is actually rendering computes a `font-family`
+naming it. With `.preset-lm` on the root, nothing ever computes `Roboto`.
+
+The one thing that breaks this is **`<link rel="preload" as="font">`**, which is
+eager and bypasses that matching. If you ship a single fixed brand, preload it —
+just never preload both.
+
+### Opting out
+
+Components apply the brand typeface themselves, so they follow the brand rather
+than inheriting your page's font. To hand a component back to the page font:
+
+```css
+.preset-lm .btn { font-family: inherit; }
+```
+
 ### Switching brand at runtime
 
 Just swap the root class (both presets can be imported at the same time):
@@ -68,10 +148,14 @@ document.documentElement.classList.add('preset-adeo')
 
 ## Creating a custom brand
 
-Define the same functional tokens of the contract under your brand class:
+Define the same brand tokens of the contract under your brand class:
 
 ```css
 .preset-my-brand {
+  /* Typeface. The 400/500/600/700 weights come from base.css; override them here
+     only if your typeface lacks those cuts. */
+  --font-family: "Inter",  Arial, sans-serif;
+
   --color-brand: #6c2bd9;
   --color-brand-dark: #531fb0;
   --color-brand-light: #efe7fb;

package/base.css

@@ -5,8 +5,9 @@
  * System. The functional naming (--spacing-*, --border-radius-*, --font-*,
  * --color-danger-* ...) matches Mozaic to ease DE→PARA migrations.
  *
- * These tokens do NOT change per brand. Brand/neutral colors come from a preset
- * (presets/leroy-merlin.css or presets/adeo.css) applied via a root class.
+ * These tokens do NOT change per brand. The brand typeface (--font-family) and
+ * the neutral/functional colors come from a preset (presets/leroy-merlin.css or
+ * presets/adeo.css) applied via a root class.
  *
  * Usage (consumer):
  *   import "@ptlm-azulejo/themes/base.css";
@@ -57,8 +58,9 @@
   --font-size-11: 3.0625rem;
   --font-size-12: 3.6875rem;
 
-  /* ── Typography · font weights ──────────────────────────────── */
+  /* ── Typography · font weights ──────────────────────────── */
   --font-weight-regular: 400;
+  --font-weight-medium: 500;
   --font-weight-semi-bold: 600;
   --font-weight-bold: 700;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ptlm-azulejo/themes",
-  "version": "1.1.0",
+  "version": "1.2.0-alpha.67",
   "description": "Multi-brand theme tokens (Leroy Merlin, Adeo) for the @ptlm-azulejo components, aligned with the Mozaic Design System.",
   "type": "module",
   "exports": {

package/presets/adeo.css

@@ -64,6 +64,8 @@
   --color-brand-dark: var(--color-teal-700);
   --color-brand-light: var(--color-teal-100);
 
+  --font-family: "Roboto",  Arial, sans-serif;
+
   /* ── Functional tokens · light (default) ──────────────────── */
   --color-text-primary: #000000;
   --color-text-secondary: #404040;

package/presets/leroy-merlin.css

@@ -42,6 +42,8 @@
   --color-brand-dark: var(--color-green-700);
   --color-brand-light: var(--color-green-100);
 
+  --font-family: "LeroyMerlin",  Arial, sans-serif;
+
   /* ── Functional tokens · light (default) ──────────────────── */
   --color-text-primary: #000000;
   --color-text-secondary: #404040;