@zevra/ui 0.1.0 → 0.2.1

package/src/icons.css

@@ -0,0 +1,81 @@
+/* Zevra UI — icônes
+ * Dépend de tokens.css. Le jeu lui-même vit dans icons/ (index + sprite).
+ *
+ * Les icônes sont TRACÉES, jamais pleines : trait à l'épaisseur 2, bouts et
+ * jonctions arrondis, sur une grille de 24. Elles héritent de la couleur du
+ * texte — c'est ce qui leur permet de fonctionner sur papier comme sur la
+ * bande manifeste sans qu'on ait à les décliner.
+ *
+ * Deux façons de les poser :
+ *
+ *   <svg class="zv-icon"><use href="…/icons/sprite.svg#zv-recherche"/></svg>
+ *
+ * ou, là où les ressources distantes sont interdites — un canvas Claude
+ * Design —, en collant le corps de l'icône depuis icons/index.json.
+ */
+
+.zv-icon {
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  /* `flex: none` évite l'écrasement quand l'icône est posée à côté d'un
+   * libellé long dans un conteneur flex — le cas le plus fréquent, et la
+   * déformation la plus visible. */
+  flex: none;
+  vertical-align: middle;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+/* Accolée à du texte dense : métadonnée, puce de source, cellule. */
+.zv-icon--sm {
+  width: 13px;
+  height: 13px;
+  /* Le trait s'épaissit optiquement quand l'icône rétrécit : on le compense,
+   * sinon une rangée d'icônes de tailles mêlées paraît déséquilibrée. */
+  stroke-width: 1.75;
+}
+
+/* Entrée de navigation, bouton de chrome. */
+.zv-icon--lg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Illustration d'un état vide, en tête de panneau. */
+.zv-icon--xl {
+  width: 28px;
+  height: 28px;
+  stroke-width: 1.5;
+}
+
+/* Une icône seule dans un bouton n'a pas de libellé pour la nommer : elle
+ * doit porter un titre accessible. Cette classe ne fait que réserver la
+ * cible tactile ; le nom, lui, se pose en aria-label côté balisage. */
+.zv-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--tap);
+  height: var(--tap);
+  padding: 0;
+  border: 0;
+  border-radius: var(--r-panel);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.zv-icon-btn:hover {
+  background: var(--panel);
+  color: var(--ink);
+}
+
+/* Icône décorative posée à côté d'un libellé qui la nomme déjà : elle est
+ * atténuée pour que le mot reste le point d'entrée du regard. */
+.zv-icon--quiet {
+  color: var(--label);
+}

package/src/index.css

@@ -9,3 +9,8 @@
 @import "./layout.css";
 @import "./surfaces.css";
 @import "./motion.css";
+@import "./icons.css";
+@import "./forms.css";
+@import "./feedback.css";
+@import "./navigation.css";
+@import "./data.css";