@zevra/ui 0.26.0 → 0.27.0

package/react/email.ts

@@ -23,6 +23,11 @@
 // stylées.
 
 import { COULEURS, POLICES as PILES } from './email-tokens.js'
+// Les URL publiques des glyphes — sept chaînes, aucune image inlinée : un
+// client de messagerie ne résout pas une data-URI (Gmail les bloque), il lui
+// faut une adresse absolue.
+import { LOGOS_PRODUITS } from './glyph-urls.js'
+export { BASE_RESSOURCES, LOGOS_PRODUITS } from './glyph-urls.js'
 
 /** ⚠️ Les piles de polices du paquet contiennent des GUILLEMETS DOUBLES
  *  (`"Public Sans", …`), et tout ici s'écrit dans un attribut `style="…"`
@@ -144,6 +149,10 @@ export interface EmailOptions {
   /** L'URL ABSOLUE du logo — une image d'e-mail ne se résout pas depuis un
    *  chemin relatif, et les data-URI sont bloquées par Gmail. */
   logo?: { src: string; hauteur?: number }
+  /** Raccourci : le glyphe d'un produit Zevra, à son URL publiée avec la
+   *  planche. Écrase `logo`.
+   *  ⚠️ Ne dispense PAS de `marque` : une image sur deux est bloquée. */
+  produit?: keyof typeof LOGOS_PRODUITS
   /** Les blocs, concaténés. */
   contenu: string
   /** Sous la carte : mentions légales, désinscription. */
@@ -167,12 +176,17 @@ export function email({
   preheader,
   marque,
   logo,
+  produit,
   contenu,
   pied,
   lang = 'fr',
 }: EmailOptions): string {
-  const enTete = logo
-    ? `<img src="${echappe(logo.src)}" height="${logo.hauteur ?? 28}" alt="${echappe(marque)}" style="display:block;border:0;height:${logo.hauteur ?? 28}px;width:auto;">`
+  const source = produit ? LOGOS_PRODUITS[produit] : logo?.src
+  // 34px : la hauteur du logo de la barre de vitrine sous le seuil. Un
+  // e-mail se lit surtout au téléphone.
+  const hauteur = logo?.hauteur ?? 34
+  const enTete = source
+    ? `<img src="${echappe(source)}" height="${hauteur}" alt="${echappe(marque)}" style="display:block;border:0;height:${hauteur}px;width:auto;">`
     : `<span style="font-family:${POLICES.display};font-weight:600;font-size:20px;letter-spacing:-0.02em;color:${COULEURS.ink};">${echappe(marque)}</span>`
 
   return `<!doctype html>

package/react/glyph-urls.ts

@@ -0,0 +1,16 @@
+// GÉNÉRÉ par scripts/build-glyph-data.mjs — ne pas éditer à la main.
+
+/** Où la planche publie les glyphes (staticDirs de .storybook/main.ts). */
+export const BASE_RESSOURCES = 'https://design.zevra.tech'
+
+/** L'URL PUBLIQUE de chaque glyphe. Absolue, parce qu'un e-mail ne résout
+ *  ni un chemin relatif ni une data-URI. */
+export const LOGOS_PRODUITS = {
+  'campus': `${BASE_RESSOURCES}/logos/glyphes/campus.png`,
+  'lexform': `${BASE_RESSOURCES}/logos/glyphes/lexform.png`,
+  'mcp': `${BASE_RESSOURCES}/logos/glyphes/mcp.png`,
+  'memoire': `${BASE_RESSOURCES}/logos/glyphes/memoire.png`,
+  'plume': `${BASE_RESSOURCES}/logos/glyphes/plume.png`,
+  'supernovia': `${BASE_RESSOURCES}/logos/glyphes/supernovia.png`,
+  'zevra': `${BASE_RESSOURCES}/logos/glyphes/zevra.png`,
+} as const

package/src/surfaces.css

@@ -173,13 +173,39 @@
   background: radial-gradient(closest-side, rgba(32, 160, 240, 0.5), rgba(32, 160, 240, 0) 70%);
 }
 
-/* Texte courant sur fond sombre : ni blanc pur, ni le gris du mode clair. */
-.zv-band .zv-body,
-.zv-band .zv-rule,
+/* ─── Texte sur fond sombre ─────────────────────────────────────────────
+ * Ni blanc pur, ni le gris du mode clair.
+ *
+ * ⚠️ POURQUOI CETTE RÈGLE EXISTE, ET POURQUOI ELLE COUVRE TOUT. Les classes
+ * de texte du paquet posent leur PROPRE couleur (.zv-body, .zv-lead,
+ * .zv-note et .zv-rule sont en --muted ; .zv-h1 en --ink). Cette couleur
+ * l'emporte sur celle héritée de la surface : poser un paragraphe dans un
+ * panneau navy donnait du gris de mode clair sur du bleu nuit, et un titre
+ * h1 y devenait carrément invisible.
+ *
+ * La règle ne visait que `.zv-band` et deux classes. Les autres surfaces
+ * sombres du système — le panneau navy, l'enveloppe .zv-text-on-dark, la
+ * planche sociale — n'étaient pas couvertes, et les trois autres paliers de
+ * texte non plus. Corrigé le 27/08/2026 : une seule liste, toutes les
+ * surfaces, tous les paliers.
+ *
+ * Ce qui reste EXPLICITE et ne s'adapte pas tout seul : les labels mono
+ * (`Mono ton="on-dark"`) et la mise en valeur (`Em surSombre`). Ceux-là
+ * changent de RÔLE sur fond sombre, pas seulement de clarté — c'est une
+ * décision de rédaction, elle se pose à la main. */
+:is(.zv-band, .zv-panel-navy, .zv-text-on-dark, .zv-social--manifeste)
+  :is(.zv-body, .zv-lead, .zv-rule, .zv-note),
 .zv-text-on-dark {
   color: #c7cde0;
 }
 
+/* Les titres, eux, reprennent le blanc : sur une surface sombre ils portent
+ * la même hiérarchie que l'encre sur le papier. */
+:is(.zv-band, .zv-panel-navy, .zv-text-on-dark, .zv-social--manifeste)
+  :is(.zv-h1, .zv-h2, .zv-h3, .zv-card-title, .zv-display) {
+  color: var(--white);
+}
+
 /* Panneau navy compact (planches de logos). */
 .zv-panel-navy {
   background: linear-gradient(135deg, #06063a 0%, #0b0b5e 40%, var(--accent-deep) 100%);