/* ========================================================================== Ziridis CheckList — design tokens ========================================================================== La source de vérité unique pour la couleur, la typographie et les espacements. Aucun autre fichier ne redéfinit un token. Un écran qui a besoin de quelque chose de particulier le dit dans son propre fichier, il ne réécrit pas une valeur d'ici. D'OÙ VIENT L'IDENTITÉ. Une checklist a existé sur papier bien avant d'exister sur un téléphone, et le papier avait deux vertus que l'écran perd facilement : un contraste maximal entre la marque et le fond, et rien sur la page qui ne soit la liste. La palette est donc celle d'une liste annotée à la main, et elle tient en trois encres : - l'encre noire, celle du texte imprimé — le contenu ; - l'encre bleue, celle du stylo — la marque que l'utilisateur fait lui-même, donc la coche, l'action principale, l'anneau de focus ; - l'encre rouge, celle de la correction — le blocage, et rien d'autre. L'INVERSION QUI COMPTE. La plupart des outils de checklist célèbrent l'achèvement : le fait devient vert et sonore. Or on n'ouvre pas une checklist pour regarder ce qui est fait, on l'ouvre pour voir ce qui reste. Ici, une tâche terminée RECULE — texte en gris secondaire, coche discrète — et une tâche ouverte AVANCE, en pleine encre. Le regard tombe sur le travail restant sans avoir à le chercher. LE CONTRASTE N'EST PAS NÉGOCIABLE. L'outil est utilisé sur un écran de six pouces, souvent dans une lumière quelconque, parfois d'une seule main. Les teintes sont des surfaces et des accents ; le texte n'est jamais sur une teinte. Tous les rapports ci-dessous sont mesurés, pas estimés — voir README.md pour le tableau complet. ========================================================================== */ :root { /* --- Fond et surfaces --------------------------------------------- */ /* Papier. Le fond de page — un blanc chaud, jamais un blanc pur : le blanc pur sur un écran de téléphone tenu à trente centimètres fatigue. */ --zc-papier: #faf8f4; /* La carte, une demi-marche plus claire que le fond. C'est ce qui donne au groupe sa matérialité de feuillet posé sur la table. */ --zc-carte: #fffdfa; /* Le filet entre deux lignes de la liste. Réglé à 1.50:1 sur le papier : assez pour séparer, trop peu pour concurrencer le texte. */ --zc-filet: #d5ccbe; /* --- Encre noire : le contenu ------------------------------------- */ /* Titres et chiffres. 14.75:1 sur le papier. */ --zc-encre: #26231f; /* Texte courant, y compris le libellé d'une tâche ouverte. 10.93:1. */ --zc-encre-texte: #3d3833; /* Texte secondaire : libellés, dates, unités — et le libellé d'une tâche TERMINÉE. 5.32:1, donc parfaitement lisible : une tâche faite recule, elle ne disparaît pas. */ --zc-encre-clair: #6e665c; /* --- Encre bleue : la marque de l'utilisateur --------------------- */ /* La seule couleur saturée de l'écran, dépensée sur une chose à la fois : la coche, l'action principale, l'anneau de focus. 7.36:1 sur le papier, donc utilisable pour du texte de lien, contrairement à la plupart des bleus d'accent. */ --zc-bleu: #34508f; --zc-bleu-fonce: #263c6e; /* Le texte POSÉ SUR l'encre bleue — libellé de bouton, coche remplie, puce active. Il ne peut pas être un blanc figé : en thème sombre l'accent est remonté en luminosité, et du blanc dessus tombe à 2.41:1, soit un échec net. Ce token bascule avec le thème et tient 7.81:1 en clair, 7.28:1 en sombre. */ --zc-sur-bleu: #ffffff; /* Fond d'un élément sélectionné ou survolé. Surface uniquement. */ --zc-bleu-voile: #e4e9f4; /* --- Encre rouge : la correction ---------------------------------- */ /* Le blocage, et strictement rien d'autre. Une seule tâche bloquée doit sauter aux yeux dans une liste de quarante ; c'est impossible si cette couleur sert aussi aux erreurs de formulaire ou aux boutons de suppression. Ceux-là utilisent l'encre noire et un libellé explicite. */ --zc-rouge: #a8452f; --zc-rouge-voile: #f6e6e1; /* --- Typographie --------------------------------------------------- */ /* Pile système : sur iPhone c'est San Francisco, dessiné pour être lu petit sur un écran tenu à bout de bras. Aucune police distante n'est chargée — une checklist ne doit pas attendre un fichier de police pour s'afficher. */ --zc-police: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --zc-police-chiffres: ui-monospace, SFMono-Regular, Menlo, monospace; /* Échelle. Le corps est à 17px et non 16 : c'est la valeur par défaut d'iOS pour le texte de lecture, et c'est aussi le seuil sous lequel Safari zoome automatiquement à la mise au point d'un champ de saisie. */ --zc-t-titre: 1.5rem; /* 24px — titre d'écran */ --zc-t-section: 1.125rem; /* 18px — nom de groupe */ --zc-t-corps: 1.0625rem; /* 17px — libellé de tâche */ --zc-t-detail: 0.875rem; /* 14px — dates, compteurs */ --zc-t-micro: 0.75rem; /* 12px — pastille de statut */ --zc-g-normal: 400; --zc-g-appuye: 600; --zc-interligne: 1.45; /* --- Espacements ---------------------------------------------------- */ --zc-e-1: 0.25rem; --zc-e-2: 0.5rem; --zc-e-3: 0.75rem; --zc-e-4: 1rem; --zc-e-5: 1.5rem; --zc-e-6: 2rem; /* Cible tactile minimale. 44px est le minimum d'Apple, et il n'est pas indicatif : une case à cocher plus petite se manque une fois sur cinq, et manquer une case dans une checklist coche la mauvaise ligne. */ --zc-cible: 44px; --zc-rayon: 10px; --zc-rayon-petit: 6px; /* --- Élévation ------------------------------------------------------ */ /* Une seule ombre, très basse. Un feuillet posé sur une table ne lévite pas ; l'ombre sert à décoller la carte du fond, pas à la faire flotter. */ --zc-ombre: 0 1px 2px rgba(38, 35, 31, 0.06), 0 1px 1px rgba(38, 35, 31, 0.04); /* Anneau de focus. Toujours visible, jamais supprimé : c'est la seule indication dont dispose la navigation au clavier. */ --zc-focus: 0 0 0 3px rgba(52, 80, 143, 0.35); } /* ========================================================================== Thème sombre ========================================================================== Ce n'est pas une inversion. Inverser cette palette donnerait un fond crème sale et une encre laiteuse. Les valeurs sombres sont reprises du même sujet — la même liste, lue le soir sous une lampe — et les deux encres colorées sont remontées en luminosité pour continuer à porter sur un fond sombre. Trois états, un seul jeu de valeurs : :root → le thème clair, toujours défini en dur ; @media (prefers-color-scheme) → suit la machine, sauf choix explicite ; :root[data-theme="dark"] → le choix de l'utilisateur gagne. ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --zc-papier: #1b1917; --zc-carte: #252220; --zc-filet: #443e37; --zc-encre: #f2ede4; --zc-encre-texte: #ded7cb; --zc-encre-clair: #a0988b; --zc-bleu: #8ca7e0; --zc-bleu-fonce: #a8bde9; --zc-sur-bleu: #1b1917; --zc-bleu-voile: #2a3350; --zc-rouge: #e28e74; --zc-rouge-voile: #4a2e26; --zc-ombre: 0 1px 2px rgba(0, 0, 0, 0.4); --zc-focus: 0 0 0 3px rgba(140, 167, 224, 0.4); } } :root[data-theme="dark"] { --zc-papier: #1b1917; --zc-carte: #252220; --zc-filet: #443e37; --zc-encre: #f2ede4; --zc-encre-texte: #ded7cb; --zc-encre-clair: #a0988b; --zc-bleu: #8ca7e0; --zc-bleu-fonce: #a8bde9; --zc-sur-bleu: #1b1917; --zc-bleu-voile: #2a3350; --zc-rouge: #e28e74; --zc-rouge-voile: #4a2e26; --zc-ombre: 0 1px 2px rgba(0, 0, 0, 0.4); --zc-focus: 0 0 0 3px rgba(140, 167, 224, 0.4); }