@zevra/ui 0.1.0 → 0.2.1

package/src/tokens.css

@@ -11,6 +11,11 @@
 :root {
   /* Neutres (charte Mémoire) */
   --ink: #0b1020;
+  /* Niveau intermédiaire, entre l'encre et le gris : titre de colonne,
+   * valeur de cellule, segment de fil d'Ariane. L'interface applicative en a
+   * besoin, la vitrine non — d'où son absence des premières planches.
+   * Contraste 7,05 sur papier : conforme AA sur texte normal. */
+  --ink-2: #4a5468;
   --muted: #5a637a;
   --label: #8a93a8;
   --line: #e3e6ef;
@@ -39,12 +44,22 @@
   --manifeste: linear-gradient(135deg, #06063a 0%, #0b0b5e 28%, #1e1b8c 55%, #3d36d6 80%, #2080f0 100%);
   --accent-on-dark: #a5b4fc;
 
-  /* États */
+  /* États — trois familles symétriques : le ton plein (texte, icône), le
+   * fond atténué (bandeau d'alerte) et le filet (bordure de carte).
+   * Relevés dans l'application Mémoire, où ils servent déjà en production. */
   --ok: #1c6b4a;
   --ok-soft: #e6f3ec;
   --ok-line: #bfdccb;
   --warn: #b98a1f;
+  --warn-soft: #faf3e2;
+  --warn-line: #ebdcb4;
+  /* L'ambre plein est trop clair pour du texte sur fond atténué : il lui
+   * faut une déclinaison sombre. --ok et --err, eux, sont déjà assez
+   * contrastés pour servir de couleur de texte — d'où l'asymétrie. */
+  --warn-ink: #8a6d1e;
   --err: #b5202c;
+  --err-soft: #fdece9;
+  --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 */
@@ -71,6 +86,47 @@
   --shadow-btn: 0 10px 28px rgba(30, 27, 140, 0.30);
   --shadow-glyph: drop-shadow(0 24px 32px rgba(88, 72, 248, 0.28));
 
+  /* ─── Couche applicative ──────────────────────────────────────────────
+   * Une interface est plus dense qu'une page vitrine : elle a besoin d'une
+   * échelle plus serrée que --body/--lead, et de mesures que la vitrine
+   * n'a jamais eu à nommer.
+   *
+   * Relevé dans l'application Mémoire, puis RATIONALISÉ : la production
+   * emploie huit paliers de texte répartis dans 5,5 px, avec des demi-pixels
+   * et des écarts d'un pixel. C'est de l'entropie d'utilitaires, pas une
+   * échelle. Les paliers ci-dessous les regroupent ; le détail des
+   * rabattements est dans DECISIONS.md. */
+
+  /* Texte applicatif */
+  --app-lg: 14px;   /* corps de message, lien de navigation */
+  --app: 13px;      /* texte courant : cellule, carte, champ de saisie */
+  --app-sm: 12px;   /* mention secondaire : statut, aide, note de contexte */
+
+  /* Titres applicatifs — au-dessus, --card-title (24px) fait le titre de page */
+  --app-h2: 20px;   /* titre de fiche, d'état vide, d'interstice */
+  --app-h3: 16px;   /* titre de panneau latéral, de feuille de source */
+
+  /* Labels capitales, échelle applicative */
+  --mono-lg: 11px;  /* compteur, fil d'Ariane, horodatage */
+  --mono: 10px;     /* métadonnée, label de colonne */
+  --mono-sm: 9px;   /* badge dense : niveau de log, statut de coque */
+
+  /* Mesures */
+  --tap: 40px;      /* cible tactile minimale, sous le point de rupture */
+  --topbar-h: 52px; /* hauteur de la barre supérieure applicative */
+
+  /* Ombre de menu déroulant — la seule surface qui flotte au-dessus du
+   * contenu sans être une carte ; ni --shadow-card ni --shadow-panel ne
+   * conviennent, l'une est trop plate, l'autre trop théâtrale. */
+  --shadow-menu: 0 8px 24px rgba(11, 16, 32, 0.1);
+
+  /* Couleurs de format de fichier. Elles ne viennent PAS de la charte : ce
+   * sont les couleurs que le monde associe à ces formats, et les détourner
+   * rendrait les vignettes illisibles au premier coup d'œil. Seul usage
+   * autorisé : la pastille de format. */
+  --fmt-pdf: #c4362b;
+  --fmt-docx: #2a5ba8;
+
   /* Signature */
   --spec-filet: 56px; /* filet de spectre 56×2px devant chaque kicker */
 }

package/tokens/index.js

@@ -13,6 +13,7 @@
 export const couleurs = {
   // Neutres
   ink: '#0b1020',
+  ink2: '#4a5468',
   muted: '#5a637a',
   label: '#8a93a8',
   line: '#e3e6ef',
@@ -42,7 +43,15 @@ export const couleurs = {
   okSoft: '#e6f3ec',
   okLine: '#bfdccb',
   warn: '#b98a1f',
+  warnSoft: '#faf3e2',
+  warnLine: '#ebdcb4',
+  warnInk: '#8a6d1e',
   err: '#b5202c',
+  errSoft: '#fdece9',
+  errLine: '#efc9cd',
+  // Couleurs de format de fichier — hors charte, voir tokens.css.
+  fmtPdf: '#c4362b',
+  fmtDocx: '#2a5ba8',
 }
 
 /** Dégradés. Ce sont des valeurs CSS complètes, pas des couleurs. */
@@ -72,6 +81,22 @@ export const tailles = {
   cardTitle: '24px',
   lead: '18px',
   body: '15px',
+  // Échelle applicative — plus serrée que la vitrine, voir tokens.css.
+  appLg: '14px',
+  app: '13px',
+  appSm: '12px',
+  appH2: '20px',
+  appH3: '16px',
+  monoLg: '11px',
+  mono: '10px',
+  monoSm: '9px',
+}
+
+/** Mesures d'interface qui ne sont ni des couleurs ni des tailles de texte. */
+export const mesures = {
+  tap: '40px',
+  topbarH: '52px',
+  specFilet: '56px',
 }
 
 export const rayons = {
@@ -82,10 +107,11 @@ export const rayons = {
 }
 
 export const ombres = {
+  menu: '0 8px 24px rgba(11, 16, 32, 0.1)',
   card: '0 2px 10px rgba(11, 16, 32, 0.05)',
   panel: '0 24px 60px rgba(30, 27, 140, 0.12)',
   btn: '0 10px 28px rgba(30, 27, 140, 0.30)',
   glyph: 'drop-shadow(0 24px 32px rgba(88, 72, 248, 0.28))',
 }
 
-export default { couleurs, degrades, serieGraphique, polices, tailles, rayons, ombres }
+export default { couleurs, degrades, serieGraphique, polices, tailles, mesures, rayons, ombres }