# Système de design Codex ## Aperçu de l’interface du système de design Codex Recherchez parmi trois exemples originaux, consultez un résultat, fermez-le ou essayez une requête sans résultat. ## Référence de conception du système de design Codex @wikimedia/codex 2.7.0 natif : CSS et référence officielle à jour des jetons et composants. L’aperçu autonome utilise la route documentée, exclusivement CSS ; la largeur du contenu et la disposition du panneau de résultats relèvent de choix propres à l’application. ### Rôles typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | font-family-base | sans-serif | Rôle de base pour le document et les contrôles. | | font-family-heading-main | Linux Libertine, Georgia, Times, Source Serif 4, serif | Rôle particulier pour le premier titre, avec des polices de remplacement locales. | | font-size-small / medium / large | 0.875rem / 1rem / 1.125rem | Texte d’accompagnement, texte par défaut et texte de grande taille. | | line-height-medium | 1.625rem | Jeton de hauteur de ligne pour les composants et fonctionnalités. | | line-height-content | 1.625 | Rôle sans unité destiné au contenu généré par les utilisateurs. | ### Espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | spacing-25 / 50 / 75 | 4px / 8px / 12px | Espacements rapprochés. | | spacing-100 / 150 / 200 | 16px / 24px / 32px | Rythme de mise en page standard. | | spacing-30 | 5px | Exception documentée pour le remplissage vertical des contrôles par défaut. | | spacing-horizontal-button | 12px − 1px | Tient compte de la bordure du bouton. | ### Fenêtre d’affichage et contrôles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Mobile / tablet minima | 320px / 640px | Limites de la fenêtre d’affichage. | | Desktop / desktop-wide minima | 1120px / 1680px | Limites pour les fenêtres d’affichage plus larges. | | Button small / medium / large | 24px / 32px / 44px minimum | Utilisez la taille large lorsque le contexte tactile le justifie ; les tailles sont tirées de la documentation de Button. | ### Couleurs de remplacement par défaut après compilation | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | color-base | #202122 | Texte lisible par défaut. | | color-progressive | #36c | Couleur d’action progressive ; ne représente pas un statut applicable à chaque enregistrement. | ## Guide complet du système de design Codex Un guide pratique pour choisir, appliquer et évaluer ce système dans une interface réelle. Des conseils complets, un point de départ pour la mise en œuvre et des liens vers les sources. ## Routes du système de design Codex, exclusivement CSS et Vue ### Choisissez l’implémentation dont vous avez besoin > Codex fournit des composants Vue et documente des structures de composants exclusivement CSS. L’exemple interactif opte pour cette dernière approche : son champ de recherche utilise exactement les classes de conteneur, de champ texte et de bouton final documentées par Codex, tandis qu’un script local de l’application filtre trois résumés d’articles originaux. L’exemple Vue distinct présente les importations de packages équivalentes. Une recherche exclusivement CSS ne devient pas une combobox prédictive simplement parce qu’elle lui ressemble. Cet exemple soumet une requête et affiche une liste de résultats. Il n’utilise pas le modèle ARIA listbox et ne prétend pas implémenter TypeaheadSearch. Consultez la spécification associée ## Système de design Codex : typographie adaptée à la lecture ### Distinguez les rôles du contenu de ceux des contrôles Le jeton font-family-base correspond à sans-serif ; la pile de polices sans empattement du système relève d’un rôle distinct. Codex propose également le rôle serif heading-main, fondé sur Linux Libertine, avec Georgia, Times et d’autres polices de remplacement. L’aperçu utilise une police à empattement pour le titre de l’article et des polices sans empattement pour les contrôles, sans télécharger de polices. La référence ci-dessous distingue font-size-medium, à 1rem, de line-height-medium, à 1.625rem. La valeur sans unité line-height-content est destinée au contenu généré par les utilisateurs ; elle ne signifie pas qu’il faut remplacer systématiquement la hauteur de ligne interne de chaque composant. Laissez aux éléments natifs input et button de CSS leurs propres métriques de contrôle. Consultez la spécification associée ## Système de design Codex : espacements et points de rupture ### Utilisez l’échelle nommée et respectez ses exceptions Dans Codex, spacing-100 vaut 16px, spacing-150 vaut 24px et spacing-200 vaut 32px. L’échelle comprend aussi des exceptions explicites : spacing-30 vaut 5px et permet le remplissage vertical des contrôles pour atteindre la hauteur par défaut de 32px. Arrondir chaque espacement au multiple de 8px effacerait une décision documentée concernant les composants. Dans l’exemple, la liste de résultats occupe toute la largeur sous 640px, conformément au point de rupture documenté pour les tablettes. Sa largeur maximale de lecture, fixée à 56rem, est un choix propre à l’application. Le point de rupture pour les ordinateurs de bureau est de 1120px et celui pour les grands écrans de bureau, de 1680px ; ces seuils définissent des catégories de fenêtres d’affichage et ne correspondent pas à une grille fournie automatiquement à chaque application. Consultez la spécification associée ## Système de design Codex : rôles des couleurs et des actions ### La couleur progressive n’est pas une simple décoration bleue Codex distingue le type d’action du poids du bouton. Une action progressive fait avancer un processus, tandis que le poids principal désigne l’action dominante dans sa vue. Un bouton neutre de poids normal convient à la recherche dans cet index local ; un contrôle discret permet de l’effacer sans détourner l’attention des résultats. Le fichier CSS compilé contient des couleurs de remplacement pour ses propriétés personnalisées, notamment la couleur du texte de base #202122 et la couleur progressive #36c. Pour ces états, l’aperçu utilise le CSS natif du composant. L’arrière-plan pâle du panneau de résultats relève de la mise en page de l’application et ne constitue pas un nouveau jeton de statut de Codex. Consultez la spécification associée ## Système de design Codex : structure de SearchInput ### Associez soigneusement le champ et le bouton La structure exclusivement CSS exige .cdx-search-input--has-end-button sur l’élément racine, un .cdx-search-input__input-wrapper, un .cdx-text-input avec son modificateur start-icon et un bouton doté de .cdx-search-input__end-button. Sans ces conteneurs, la géométrie de l’ensemble et l’alignement de l’icône sont perdus. Le libellé visible précise le périmètre de la recherche. Le span de l’icône est décoratif et masqué aux API d’accessibilité. Le formulaire gère la touche Entrée et l’activation du bouton avec un seul écouteur de soumission ; après la mise à jour des résultats, le nombre est annoncé dans une zone de statut polie. Un champ vide rétablit tous les exemples locaux. - Utilisez SearchInput pour rechercher du contenu sur une page. - Utilisez TypeaheadSearch lorsque des suggestions de navigation prédictives sont nécessaires. - Utilisez Lookup pour choisir une option comme valeur d’un formulaire. Consultez la spécification associée ## Système de design Codex : lecture des résultats et des détails ### Permettez aux lecteurs de reprendre là où ils en étaient Chaque résultat comporte un titre explicite, une brève description originale et un bouton qui ouvre le panneau de lecture local. Ce panneau est une composition propre à l’application, et non un Dialog de Codex : il reste dans le flux normal du document, n’a pas de fond modal et ne bloque pas le déplacement du focus. L’ouverture d’un exemple place le focus sur le titre du panneau. Sa fermeture renvoie le focus au bouton qui l’a ouvert. Une nouvelle recherche ferme le détail précédent et recalcule le nombre de résultats, afin qu’un ancien article ne semble pas faire partie de la nouvelle requête. En l’absence de résultat, un texte explicatif s’affiche avec une action explicite pour effacer la recherche. Consultez la spécification associée ## Orientation et comportement des entrées du système de conception Codex ### Prévoir les langues autres que l’anglais La documentation des composants présente des exemples de gauche à droite et de droite à gauche. Codex s’inscrit dans un écosystème de connaissances multilingue. La mise en page de l’application doit donc utiliser des espacements logiques inline/block, plutôt que de supposer que chaque icône et chaque action de lecture se trouvent à gauche. La mise en page personnalisée de l’exemple utilise margin-inline et padding-inline lorsque le sens dépend de la direction. Ici, la recherche ne se lance qu’à la validation. Cela évite de traiter le texte intermédiaire composé par un IME comme une requête terminée. Une autocomplétion destinée à la production nécessiterait une gestion des entrées compatible avec la composition, l’annulation des requêtes asynchrones et un modèle d’interaction de menu adapté. L’exemple local utilisant uniquement CSS ne prétend délibérément offrir aucune de ces fonctionnalités. Consultez la spécification associée ## Intégrer et étendre le système de conception Codex ### Épingler la bibliothèque et gérer la logique des résultats Le package vérifié est @wikimedia/codex 2.7.0, dont la feuille de style est dist/codex.style.css. La démo utilisant uniquement CSS n’a pas besoin du runtime Vue : ses commandes sont toutes des HTML natifs, et un petit script local gère le filtrage et l’état du panneau de lecture. La variante Vue importe CdxSearchInput et CdxButton lorsque la gestion de l’état par le framework est utile. Le code fourni est sous licence GPL-2.0-or-later, qui accompagne les ressources locales. Les exemples ne reprennent ni l’identité de Wikipedia ni le contenu de ses articles. Avant de connecter un véritable point de terminaison de recherche, prévoyez un traitement distinct des erreurs réseau, du chargement et des réponses obsolètes, plutôt que de réutiliser l’état local sans résultat sous un autre nom. 1. Installez le package épinglé ou copiez sa feuille de style avec la licence. 2. Reproduisez la structure documentée utilisant uniquement CSS ou utilisez les composants Vue exportés. 3. Ajoutez la logique des requêtes et des résultats dans l’application, tout en préservant le comportement de recherche. 4. Vérifiez le focus clavier et les mises en page étroites avec du contenu réellement traduit. Consultez la spécification associée ## Exemples de composants du système de conception Codex ### Recherche utilisant uniquement CSS avec libellé visible Structure de conteneurs documentée et soumission native du formulaire. ```

``` Référence du code ### Composition de recherche avec Vue Véritables imports Codex et état Vue ; le résultat local de la requête validée illustre la limite de l’intégration. ``` ``` Référence du code ### Exemple autonome complet Le document complet comprend sa mise en page, ses contrôles et son initialisation. Extrayez l’archive d’exemple liée pour obtenir les ressources de fournisseur avec leurs chemins relatifs exacts, puis servez le contenu via HTTP. ``` Codex knowledge search

Independent knowledge index · Codex CSS-only

Explore the example collection

Find an original topic summary and open its reading panel. This small index runs entirely in your browser.

Original example content. Wikimedia Codex 2.7.0 controls; application-owned results and inline panel. No external search request.
``` Référence du code - Téléchargez l’exemple complet depuis les sources. Son fichier README indique la commande exacte pour le lancer localement. - Conservez des chemins relatifs pour les ressources de fournisseur par rapport à ce document ; l’archive contient toutes les ressources utilisées par cet aperçu. ## Configuration de l’agent du système de conception Codex ### Point de départ de l’implémentation La feuille de style native a été vérifiée localement dans l’aperçu autonome. Le code Vue est un exemple d’intégration distinct, et non le runtime de cet aperçu. Le ZIP d’exemple complet et fonctionnel, dans Sources, fournit aussi les dépendances exactes de l’aperçu et le document complet. Extrayez-le, exécutez python3 -m http.server 8080 dans ce répertoire, puis ouvrez http://localhost:8080/wikimedia-codex.html. N’ouvrez pas les exemples fondés sur des modules avec file://. ``` npm install @wikimedia/codex@2.7.0 # CSS-aware entry for CSS-only HTML: # import '@wikimedia/codex/dist/codex.style.css'; # For the Vue example, add Vue to the existing Vue application: # import { CdxSearchInput, CdxButton } from '@wikimedia/codex'; ``` ### Un prompt pour votre projet ``` Créez un index de connaissances local avec SearchInput et des boutons utilisant uniquement CSS, issus de Codex 2.7.0. Conservez les conteneurs de bouton de fin documentés, un libellé de recherche explicite et la soumission native du formulaire. Affichez le nombre de résultats, un message en cas d’absence de résultat et une action pour effacer la recherche. Ouvrez les détails des résultats dans la page, placez le focus sur leur titre et renvoyez-le au bouton de déclenchement à la fermeture. Ne revendiquez ni TypeaheadSearch ni des comportements de fenêtre modale. Utilisez les rôles officiels de police et d’espacement, en précisant que la largeur du contenu relève d’un choix de l’application. ``` ## Sources et périmètre du système de conception Codex Exemple indépendant de OpenDesign avec des résumés originaux. Aucun contenu ni élément d’identité de Wikipédia n’est repris. Les contrôles réservés à CSS sont des éléments Codex natifs ; le filtrage de la recherche et le panneau de lecture intégré sont du code applicatif. - Présentation de Codex Entrée officielle du système de conception Wikimedia. - Accéder à Codex Ressources de conception et de développement disponibles. - Guide de style Conseils visuels, éditoriaux et d’interaction. - Télécharger l’exemple complet fonctionnel Archive ZIP comprenant le HTML complet, les dépendances locales CSS/JavaScript, les licences fournies et les instructions de lancement exactes. Aucune étape de build n’est nécessaire. ## Ressources connexes du système de conception Codex ### Agriculture système de design Créez des parcours de service plus longs avec l’espacement concret d’AgDS, ses propriétés adaptatives et le modèle d’état de TaskList. Essayez un processus de préparation dont l’étape de révision ne se déverrouille que lorsque les prérequis sont remplis. ### Alberta système de design Utilisez les composants Web natifs d’Alberta et ses jetons de design publiés pour créer une liste de préparation complète, avec des choix accessibles, une progression calculée et des commentaires de révision transparents. ### Amsterdam Utilisez le contrat réel et open source de Switch de Amsterdam, avec un thème neutre complet, des libellés accessibles et des préférences de lecture appliquées immédiatement. - [Référence de mise en œuvre](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html) - [Source](https://doc.wikimedia.org/codex/latest/design-tokens/font.html) - [Source](https://doc.wikimedia.org/codex/latest/design-tokens/spacing.html) - [Source](https://doc.wikimedia.org/codex/latest/design-tokens/breakpoint.html) - [Source](https://doc.wikimedia.org/codex/latest/design-tokens/color.html) - [Consultez la spécification associée](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html) - [Consultez la spécification associée](https://doc.wikimedia.org/codex/latest/design-tokens/font.html) - [Consultez la spécification associée](https://doc.wikimedia.org/codex/latest/design-tokens/spacing/) - [Consultez la spécification associée](https://doc.wikimedia.org/codex/latest/components/demos/button.html) - [Consultez la spécification associée](https://doc.wikimedia.org/codex/latest/components/overview.html) - [Consultez la spécification associée](https://doc.wikimedia.org/codex/latest/using-codex/) - [Référence du code](https://doc.wikimedia.org/codex/latest/components/demos/search-input.html) - [Présentation de Codex Entrée officielle du système de conception Wikimedia.](https://doc.wikimedia.org/codex/latest/) - [Accéder à Codex Ressources de conception et de développement disponibles.](https://doc.wikimedia.org/codex/latest/using-codex/accessing-codex.html) - [Guide de style Conseils visuels, éditoriaux et d’interaction.](https://doc.wikimedia.org/codex/latest/style-guide/overview.html)