@zevra/ui 0.12.6 → 0.14.0

package/src/components.css

@@ -967,3 +967,65 @@
     font-size: 21px;
   }
 }
+
+/* ─── Le lockup : la marque et le mot ───────────────────────────────────
+ *
+ * Jusqu'ici le nom d'un produit voyageait cuit dans un PNG, marque et mot
+ * ensemble. Un lockup de 555×200 dont la capitale mesure 70px se retrouvait
+ * affiché à 15px de capitale dans une barre de navigation et 10px dans un
+ * pied de page : réduit de près de cinq fois, chaque fût tombait sur une
+ * fraction de pixel et recevait sa propre dose de lissage. Le mot devenait
+ * gris et le V, seul à n'avoir aucun fût vertical sur quoi s'aligner,
+ * semblait flotter.
+ *
+ * Le mot est donc un SVG (`logos/svg/<produit>-wordmark.svg`), à
+ * `currentColor` : net à toute taille, et il prend enfin les nuances encre
+ * / navy / blanc que le registre des logos décrit. La marque reste le PNG
+ * couleur du paquet — c'est un dégradé, il ne se recolore pas.
+ *
+ * ⚠️ Ces tracés sont RELEVÉS sur le lockup bitmap d'origine, faute de son
+ * fichier vectoriel. Ils sont fidèles à 0,1 % en largeur et nettement plus
+ * lisibles que le bitmap partout où le site les pose, mais ils portent les
+ * approximations du relevé : réservés à l'ÉCRAN, jusqu'à 120px de capitale.
+ * Au-delà — grand format, impression — exiger le fichier d'origine.
+ *
+ * Les proportions viennent du lockup, mesurées au pixel : la marque vaut
+ * 2,86 fois la capitale, l'écart entre les deux 0,64 fois, et les deux
+ * pièces se centrent l'une sur l'autre (elles ne partagent pas de ligne de
+ * base). Tout se pilote par --zv-cap, qui EST la hauteur de capitale : le
+ * SVG du mot a un viewBox dont la hauteur vaut la capitale, si bien qu'une
+ * hauteur CSS posée dessus se lit directement. */
+
+.zv-lockup {
+  --zv-cap: 15px;
+  display: inline-flex;
+  align-items: center;
+  gap: calc(var(--zv-cap) * 0.64);
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.zv-lockup__mark {
+  height: calc(var(--zv-cap) * 2.86);
+  width: auto;
+  display: block;
+}
+
+.zv-lockup__word {
+  height: var(--zv-cap);
+  width: auto;
+  display: block;
+}
+
+/* Le seuil de lisibilité. Sous 11px de capitale, le mot ne se lit plus :
+ * ce n'est plus une question de netteté mais de taille, et aucun fichier
+ * n'y changera rien. On montre la marque, seule — c'est elle qui identifie.
+ * Poser cette classe, ou masquer .zv-lockup__word sous un point de rupture
+ * quand la barre se resserre. */
+.zv-lockup--marque-seule {
+  gap: 0;
+}
+
+.zv-lockup--marque-seule .zv-lockup__word {
+  display: none;
+}

package/src/tokens.css

@@ -68,7 +68,7 @@
   --err-line: #efc9cd;
 
   /* Typo — Google Fonts : Outfit (display), Public Sans (texte), Space Grotesk (labels) */
-  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400, wordmarks 600 */
+  --font-display: "Outfit", "Helvetica Neue", Arial, sans-serif;   /* titres 200-400 */
   --font-text: "Public Sans", "Helvetica Neue", Arial, sans-serif; /* 400/600 */
   --font-mono: "Space Grotesk", "Menlo", monospace;                /* labels caps, 0.18-0.2em */
   /* Chasse fixe RÉELLE, pour le code seulement. --font-mono (Space Grotesk)