# Système de design Mozilla Protocol ## Aperçu de l’interface du système de design Mozilla Protocol Comparez la densité de lecture, développez les détails explicatifs et testez les états d’adresse e-mail valide et invalide sans vous abonner. ## Référence de conception du système de design Mozilla Protocol JSON des jetons publiés Mozilla Protocol 22.0.0 et CSS natif. Les noms précédés du signe dollar sont des jetons Sass. Le spécimen original utilise le thème typographique Mozilla ; les contrôles de densité et l’illustration circulaire relèvent des choix de l’application. ### Familles typographiques | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $font-stack-base | Inter, X-LocaleSpecific, sans-serif | Choisissez explicitement la famille de marque Mozilla ou Firefox ; n’utilisez pas une police de titre pour les longs textes courants. | | $font-stack-firefox | Metropolis, X-LocaleSpecific, sans-serif | Choisissez explicitement la famille de marque Mozilla ou Firefox ; n’utilisez pas une police de titre pour les longs textes courants. | | $font-stack-mozilla-headline | 'Mozilla Headline', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Choisissez explicitement la famille de marque Mozilla ou Firefox ; n’utilisez pas une police de titre pour les longs textes courants. | | $font-stack-mozilla-text | 'Mozilla Text', 'Helvetica Neue', Arial, X-LocaleSpecific, sans-serif | Choisissez explicitement la famille de marque Mozilla ou Firefox ; n’utilisez pas une police de titre pour les longs textes courants. | | $font-stack-mono | Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace | Choisissez explicitement la famille de marque Mozilla ou Firefox ; n’utilisez pas une police de titre pour les longs textes courants. | ### Espacement des composants | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $spacing-xs | 4px | Espacement à l’intérieur d’un composant ou entre des éléments étroitement liés. | | $spacing-sm | 8px | Espacement à l’intérieur d’un composant ou entre des éléments étroitement liés. | | $spacing-md | 16px | Espacement à l’intérieur d’un composant ou entre des éléments étroitement liés. | | $spacing-lg | 24px | Espacement à l’intérieur d’un composant ou entre des éléments étroitement liés. | | $spacing-xl | 32px | Espacement à l’intérieur d’un composant ou entre des éléments étroitement liés. | | $spacing-2xl | 48px | Espacement à l’intérieur d’un composant ou entre des éléments étroitement liés. | ### Rythme de mise en page à grande échelle | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $layout-2xs | 16px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | | $layout-xs | 24px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | | $layout-sm | 32px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | | $layout-md | 48px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | | $layout-lg | 64px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | | $layout-xl | 96px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | | $layout-2xl | 192px | Prévoyez des espacements plus importants entre les sections éditoriales ; ils sont distincts des espacements entre composants. | ### Largeurs de contenu | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $content-xs | 304px | Choisissez une largeur maximale adaptée au contenu réel plutôt que d’étirer chaque bloc de texte jusqu’à la largeur maximale du conteneur. | | $content-sm | 432px | Choisissez une largeur maximale adaptée au contenu réel plutôt que d’étirer chaque bloc de texte jusqu’à la largeur maximale du conteneur. | | $content-md | 688px | Choisissez une largeur maximale adaptée au contenu réel plutôt que d’étirer chaque bloc de texte jusqu’à la largeur maximale du conteneur. | | $content-lg | 928px | Choisissez une largeur maximale adaptée au contenu réel plutôt que d’étirer chaque bloc de texte jusqu’à la largeur maximale du conteneur. | | $content-xl | 1152px | Choisissez une largeur maximale adaptée au contenu réel plutôt que d’étirer chaque bloc de texte jusqu’à la largeur maximale du conteneur. | | $content-max | 1440px | Choisissez une largeur maximale adaptée au contenu réel plutôt que d’étirer chaque bloc de texte jusqu’à la largeur maximale du conteneur. | ### Points de rupture d’écran | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $screen-xs | 320px | Paliers de largeur d’affichage publiés. Les mixins de composants peuvent s’adapter à certains paliers. | | $screen-sm | 480px | Paliers de largeur d’affichage publiés. Les mixins de composants peuvent s’adapter à certains paliers. | | $screen-md | 768px | Paliers de largeur d’affichage publiés. Les mixins de composants peuvent s’adapter à certains paliers. | | $screen-lg | 1024px | Paliers de largeur d’affichage publiés. Les mixins de composants peuvent s’adapter à certains paliers. | | $screen-xl | 1312px | Paliers de largeur d’affichage publiés. Les mixins de composants peuvent s’adapter à certains paliers. | ### Rayon des angles | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $border-radius-xs | 2px | Utilisez le rayon adapté au composant ; distinguez l’illustration créée des formes de l’interface. | | $border-radius-sm | 4px | Utilisez le rayon adapté au composant ; distinguez l’illustration créée des formes de l’interface. | | $border-radius-md | 8px | Utilisez le rayon adapté au composant ; distinguez l’illustration créée des formes de l’interface. | | $border-radius-lg | 16px | Utilisez le rayon adapté au composant ; distinguez l’illustration créée des formes de l’interface. | ### Utilitaires typographiques et sélection du thème | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | $brand-theme: mozilla | Mozilla Headline + Mozilla Text | Contenu éditorial sur le thème Mozilla ; l’aperçu charge les polices depuis le package officiel. | | $brand-theme: firefox | Metropolis + Inter | La typographie sur le thème Firefox est un choix de marque distinct. | | mzp-u-title-lg | Responsive title utility | À utiliser pour le titre éditorial principal ; ne déduisez pas la sémantique du titre de sa taille visuelle. | | mzp-u-title-xs | Small title utility | Les deux sections complémentaires appliquent cette classe à des éléments h2 sémantiques. | | mzp-u-title-2xs | Compact title utility | Le court article applique cette classe à son h3. | | Comfortable / Compact sample | 16px / 1.6 and 14px / 1.4 | Préférence de lecture originale, et non deux thèmes officiels de Protocol. | ## Mozilla Protocol Guide complet du système de design 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. ## Mozilla Protocol Composition éditoriale du système de design ### Commencez par une hiérarchie éditoriale facile à parcourir > Protocol s’adapte aux contenus éditoriaux et marketing, ainsi qu’aux interfaces qui les accompagnent. La maquette s’ouvre sur un grand titre et une illustration circulaire originale, puis présente un aperçu d’article et un formulaire d’inscription à une lettre d’information. Cette composition laisse le message s’exprimer avant de demander au lecteur d’utiliser les commandes. Elle se distingue d’un tableau de bord administratif dense. ### Distinguez le thème de marque de l’application L’exemple utilise mzp-t-mozilla et la typographie native de Protocol. L’article, l’illustration et la préférence de densité sont des contenus originaux de l’application. Ni les noms de classes natifs ni les fichiers de polices n’en font un service officiel de Mozilla. Le pied de page précise le périmètre, et l’action de la lettre d’information affiche uniquement un aperçu de confirmation. ## Mozilla Protocol Polices et utilitaires de titre du système de design ### Choisissez la paire typographique propre à la marque Protocol 22 fournit les familles de polices Mozilla Headline et Mozilla Text pour Mozilla, ainsi que Metropolis et Inter pour Firefox. La maquette charge les polices fournies par le package. Distinguez les rôles des titres et du corps de texte : utiliser une police d’affichage pour chaque paragraphe efface le contraste qui rend la hiérarchie éditoriale efficace. ### Dissociez la sémantique des titres de leur taille visuelle Le titre principal est un h1 avec mzp-u-title-lg. Les sections qui l’accompagnent sont des h2 avec mzp-u-title-xs, et le titre de l’article est un h3 avec mzp-u-title-2xs. Les utilitaires adaptatifs peuvent modifier l’échelle visuelle sans changer cette structure. Le contrôle de densité de lecture ne modifie que les paragraphes de l’exemple ; il ne redimensionne ni toute la page ni ses commandes. - Le h1 présente la page. - Le h2 sépare l’aperçu de lecture du formulaire. - Le h3 désigne l’extrait d’article. ## Mozilla Protocol Couleurs et illustration du système de design ### Utilisez l’illustration comme contenu éditorial Le dégradé circulaire est une création originale de CSS, accompagnée d’une brève description accessible. Son dégradé chaud tirant vers le violet n’est présenté ni comme un nouveau logo officiel de Mozilla ni comme un jeton fourni par Protocol. Le reste de la page utilise des surfaces neutres et discrètes afin que l’illustration et l’action principale gardent un rôle distinct. ### Attribuez une signification distincte à l’état du formulaire L’erreur locale concernant l’adresse e-mail est expliquée par un texte et signalée par une bordure visible. La réussite apparaît dans un bloc de confirmation distinct, qui inclut l’adresse d’exemple saisie et précise qu’aucun e-mail n’a été envoyé. Une illustration colorée ne doit pas détourner l’attention de l’erreur ni rendre l’état de réussite ambigu. ## Mozilla Protocol Composants et échelles d’espacement du système de design ### Utilisez les deux échelles d’espacement à bon escient Les valeurs d’espacement des composants publiées sont 4, 8, 16, 24, 32 et 48px. Une échelle distincte pour la mise en page va jusqu’à 64, 96 et 192px. Utilisez la première dans les formulaires et les cartes, et la seconde pour rythmer les sections éditoriales. Remplacer chaque petit espacement par une valeur de mise en page affaiblirait le lien entre un libellé et son champ. ### Limitez la longueur des lignes avant d’ajouter des colonnes Protocol propose des largeurs de contenu allant de 304px à un maximum de 1440px. La maquette utilise un conteneur éditorial de 1152px, réparti en deux colonnes lorsque l’espace le permet. En dessous du point de rupture défini par l’application, l’article et le formulaire s’empilent. Le titre, l’article et le formulaire conservent chacun une largeur de ligne raisonnable au lieu de s’étendre sans limite. ## Mozilla Protocol Boutons, détails et formulaires du système de design ### Respectez la structure réelle du formulaire L’exemple de lettre d’information est un formulaire natif comportant un libellé visible, un champ d’adresse e-mail, une note explicative, un texte d’erreur et un bouton d’envoi. Protocol applique le style des composants ; l’application valide les données et affiche le résultat local. L’action principale est un lien, car elle mène à une section de la page, tandis que l’envoi se fait à l’aide d’un bouton. ### Utilisez un élément de divulgation simple pour les explications complémentaires L’élément de divulgation « Ce qui change » est une paire native details/summary. Il explique les valeurs personnalisées de paragraphe, confortable et compacte, sans interrompre l’article principal. Il ne s’agit ni d’un faux onglet de navigation ni d’un prérequis masqué : le formulaire et les contrôles de densité restent utilisables, que l’élément soit ouvert ou fermé. ## Mozilla Protocol États de lecture et de validation du système de design ### Ne modifiez qu’une préférence de lecture à la fois Les deux boutons de densité sont regroupés sous un libellé et exposent aria-pressed. Le mode Compact modifie uniquement la taille de police, la hauteur de ligne et l’espacement inférieur des paragraphes de l’article. Le texte, le titre et le champ du formulaire ne bougent pas. L’exemple distingue volontairement cette préférence du choix entre les thèmes de marque Mozilla et Firefox. ### Rendez la gestion des erreurs du formulaire prévisible Une adresse invalide affiche l’erreur et place le focus sur le champ. Lorsque l’utilisateur modifie l’adresse, l’erreur obsolète disparaît, de même que toute confirmation précédente. Une adresse valide affiche un résultat généré localement et place le focus sur ce résultat. Le bouton « Essayer une autre adresse » efface le formulaire, supprime l’état invalide et replace le focus dans le champ ; aucune inscription asynchrone n’est sous-entendue. 1. Envoyez une adresse vide ou mal formée et consultez l’erreur du champ. 2. Saisissez une adresse d’exemple pour afficher un aperçu de la confirmation locale. 3. Utilisez « Essayer une autre adresse » pour réinitialiser le formulaire et replacer le focus dans le champ. ## Mozilla Protocol Commandes éditoriales accessibles du système de design ### Attribuez des rôles distincts à l’illustration et aux commandes L’illustration est un élément de rôle image avec un texte alternatif concis. Les boutons de densité, l’élément de divulgation et le bouton d’envoi sont de véritables commandes. Le champ d’adresse e-mail référence sa note et son erreur via aria-describedby. Un indicateur de focus visible complète le style natif pour la navigation au clavier. ### Conservez un ordre cohérent lorsque la mise en page s’empile L’ordre du document est le titre, l’aperçu de lecture, l’explication, puis le formulaire. Sur mobile, cet ordre reste le même ; CSS ne fait pas passer le formulaire avant le contexte. L’illustration mobile de 180px accompagne le contenu éditorial sans créer d’obstacle à largeur fixe ni provoquer de défilement horizontal. ## Mozilla Protocol Intégration CSS du système de design ### Intégrez les ressources publiées à l’exemple L’entrée fournie importe un thème compilé, protocol.css et protocol-components.css, puis la feuille de style de l’application. Protocol 22 exige que les propriétés personnalisées du thème soient définies sur :root ; l’ajout d’une ancienne classe de marque ne suffit pas à définir la typographie. Compilez protocol-theme.scss avant de démarrer Vite. Un bundler compatible avec les modules suit les URL des polices et des images. Les blocs HTML, JavaScript et CSS ci-dessous constituent la source complète de l’exemple ; aucun backend de newsletter ni fournisseur d’état propre à un package n’est dissimulé. ### Ne prolongez le formulaire que si un véritable service d’abonnement existe Pour la production, remplacez le résultat local par une requête vérifiée et définissez, selon votre service, le comportement relatif au consentement, à l’attente, aux abonnements en double et aux erreurs serveur. Séparez la présentation de Protocol de ces exigences applicatives. Ne présentez pas la confirmation locale comme un abonnement réussi au seul motif que l’adresse e-mail respecte la syntaxe attendue. ## Exemples de composants du système de design Mozilla Protocol ### index.html — page éditoriale complète Article sémantique, commandes de densité, section dépliable et formulaire local de digest avec une illustration originale CSS. ``` Reading specimen
MOZILLA PROTOCOL · EDITORIAL SPECIMENOriginal example by OpenDesign

A little more room to read.

Make space for useful ideas, quieter pages, and a reading rhythm that feels like yours.

Explore the reading preview

Choose your reading rhythm

Compare two application-defined densities using the same short article.

The open page

A useful page gives an idea enough room to breathe. Its headings show the path, its paragraphs keep a readable measure, and its controls remain easy to find.

Changing density should preserve the story. This preview adjusts paragraph size and spacing without replacing the article or changing your place in the task.

What changes in this example?

Comfortable uses 16px text with 1.6 line height. Compact uses 14px with 1.4. These are example reading preferences, not separate official Protocol themes.

``` Référence du code - Enregistrez le fichier sous index.html à la racine du projet. Les deux blocs suivants correspondent à src/main.js et src/protocol.css. ### main.js — ressources natives et comportement local Importe les feuilles de style officielles et gère la sélection de densité, la validation, le focus et la réinitialisation sans envoyer de données. ``` import "./protocol-theme.css"; import "@mozilla-protocol/core/protocol/css/protocol.css"; import "@mozilla-protocol/core/protocol/css/protocol-components.css"; import "./protocol.css"; const form = document.querySelector("#reading-form"), error = document.querySelector("#email-error"), input = document.querySelector("#email"), result = document.querySelector("#confirmation"); form.addEventListener("submit", (event) => { event.preventDefault(); const value = input.value.trim(); if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value)) { error.hidden = false; input.setAttribute("aria-invalid", "true"); input.focus(); return; } error.hidden = true; input.removeAttribute("aria-invalid"); result.hidden = false; result.querySelector("strong").textContent = value; result.focus(); }); input.addEventListener("input", () => { error.hidden = true; input.removeAttribute("aria-invalid"); result.hidden = true; }); document.querySelector("#reset").addEventListener("click", () => { form.reset(); result.hidden = true; error.hidden = true; input.removeAttribute("aria-invalid"); input.focus(); }); document.querySelectorAll("[data-density]").forEach((button) => button.addEventListener("click", () => { document .querySelectorAll("[data-density]") .forEach((b) => b.setAttribute("aria-pressed", String(b === button))); document .querySelector("#article-sample") .classList.toggle("compact", button.dataset.density === "compact"); }), ); ``` Référence du code - Ce comportement relève de l’application JavaScript, et non d’un service de newsletter Protocol. ### protocol.css — composition originale Mise en page adaptative, préférences de lecture et illustration circulaire originale. ``` [hidden] { display: none !important; } body { margin: 0; } .reading-example { background: #fff; color: #000; } .reading-top { padding: 24px; border-bottom: 1px solid #cdcdd4; display: flex; justify-content: space-between; gap: 16px; font-size: 12px; } .reading-hero { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(200px, 0.7fr); gap: 48px; align-items: center; padding: 48px; max-width: 1152px; margin: auto; } .reading-hero h1 { max-width: 680px; } .reading-hero p { max-width: 580px; } .orb { aspect-ratio: 1; background: radial-gradient( circle at 33% 32%, #ffea80 0 10%, #ff8a50 30%, #ff298a 55%, #7542e5 82% ); border-radius: 50%; position: relative; box-shadow: 16px 24px 0 #f0f0f4; } .orb:after { content: ""; position: absolute; inset: 23%; border-radius: 50%; background: white; } .reading-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr); gap: 48px; max-width: 1152px; margin: auto; padding: 0 48px 48px; } .density-options { display: flex; gap: 8px; margin: 16px 0; } .density-options button { font-size: 12px; padding: 8px 12px; } .density-options button[aria-pressed="true"] { box-shadow: 0 0 0 2px #0060df; } #article-sample { padding: 24px; border: 1px solid #cdcdd4; border-radius: 8px; background: #f9f9fb; } #article-sample p { font-size: 16px; line-height: 1.6; margin: 0 0 16px; } #article-sample.compact p { font-size: 14px; line-height: 1.4; margin-bottom: 8px; } .signup { padding: 24px; background: #e7dfff; border-radius: 8px; } .signup input { width: 100%; margin-bottom: 8px; } .signup label { display: block; font-weight: 700; margin-bottom: 8px; } .signup .note { font-size: 12px; line-height: 1.5; } .signup .error { color: #a4000f; font-size: 14px; font-weight: 700; } .signup input[aria-invalid="true"] { border-color: #a4000f; box-shadow: 0 0 0 2px #a4000f; } .signup .mzp-c-button { width: 100%; margin: 8px 0; } #confirmation { padding: 16px; background: #e3fff3; margin-top: 16px; border-left: 4px solid #008a46; overflow-wrap: anywhere; } .reading-footer { padding: 24px; border-top: 1px solid #cdcdd4; font-size: 12px; } .reading-example details { margin-top: 24px; } .reading-example summary { cursor: pointer; font-weight: 700; } .reading-example details p { font-size: 14px; margin-top: 12px; } button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid #0060df; outline-offset: 4px; } @media (max-width: 760px) { .reading-hero { grid-template-columns: 1fr; padding: 32px 24px; gap: 24px; } .orb { width: 180px; justify-self: center; box-shadow: 8px 12px 0 #f0f0f4; } .reading-main { grid-template-columns: 1fr; padding: 0 24px 32px; gap: 32px; } .reading-top { flex-wrap: wrap; } .reading-hero h1 { font-size: 36px; } .density-options { flex-wrap: wrap; } } ``` Référence du code - Les choix de densité et de mise en page de l’application sont distingués des jetons Sass publiés. ### protocol-theme.scss — thème racine Mozilla requis Compilez ce fichier en src/protocol-theme.css avant de démarrer l’application. ``` @use '@mozilla-protocol/core/protocol/css/includes/config' with ($brand-theme: 'mozilla'); @use '@mozilla-protocol/core/protocol/css/includes/themes'; ``` Référence du code - La configuration Sass sélectionne la marque ; il ne s’agit pas d’un changement de classe à l’exécution. ## Configuration de l’agent du système de design Mozilla Protocol ### Point de départ de l’implémentation Les polices natives de CSS/fonts et le script original ont été intégrés à l’aperçu local. Utilisez une version de Node.js prise en charge par votre version de Vite. Si vous redistribuez une version compilée, conservez la licence du package et les attributions des ressources. ``` npm create vite@latest protocol-reading -- --template vanilla cd protocol-reading npm install npm install @mozilla-protocol/core@22.0.0 npm install --save-dev sass npx sass --load-path=node_modules src/protocol-theme.scss src/protocol-theme.css # Replace index.html; add src/main.js and src/protocol.css from the full examples. npm run dev ``` ### Un prompt pour votre projet ``` Créez une page éditoriale avec Mozilla Protocol 22.0.0. Consultez les références réelles des polices, des espacements et des conteneurs. Utilisez la composition complète fournie en HTML/CSS/JS comme point de départ, conservez des titres sémantiques et des libellés de formulaire visibles, et distinguez les choix originaux d’illustration et de densité des jetons officiels. Soyez transparent sur la validation locale ; n’intégrez un véritable abonnement qu’après avoir défini les exigences du service et du consentement. ``` ## Sources et périmètre du système de design Mozilla Protocol Guide d’application OpenDesign de Mozilla Protocol 22.0.0. L’exemple utilise le CSS publié et les polices intégrées, avec un texte, une illustration et un comportement de formulaire local originaux. Il ne s’agit ni d’un produit Mozilla, ni d’une newsletter, ni d’un service d’abonnement ; les droits sur la marque et les ressources restent la propriété de leurs détenteurs respectifs. - Typographie de Protocol Associations typographiques de la marque et utilitaires de titre. - Export des jetons publiés Espacements, mise en page, largeurs de contenu et piles de polices. - Utilisation de Protocol CSS Intégration de la feuille de style. - Code source de Protocol Implémentation, ressources et licence MPL. ## Ressources associées au système de design Mozilla Protocol ### Nord système de design Examinez les tokens du thème Therapy de Nord et les contrats des Web Components au moyen d’un brouillon de demande de salle : rôles de couleur réels, dimensions adaptatives des champs, validation explicite et résultats préparés localement. ### Oracle Redwood Découvrez la palette réelle d’Oracle JET 19 Redwood, ses rôles sémantiques et ses limites d’espacement et de densité grâce à une fiche de travail originale et complète pour l’analyse des stocks, entièrement modifiable. ### Orange OUDS Web Examinez les tokens sémantiques réels d’Orange OUDS 1.4, ses packages de thème et le comportement natif d’Offcanvas grâce à une étude comparative complète et adaptative. - [Référence de mise en œuvre](https://protocol.mozilla.org/docs/usage/framework) - [Source](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Source](https://protocol.mozilla.org/docs/fundamentals/typography) - [Référence du code](https://protocol.mozilla.org/components/detail/example-form) - [Référence du code](https://protocol.mozilla.org/docs/usage/framework) - [Référence du code](https://protocol.mozilla.org/docs/fundamentals/design-tokens) - [Typographie de Protocol Associations typographiques de la marque et utilitaires de titre.](https://protocol.mozilla.org/docs/fundamentals/typography) - [Export des jetons publiés Espacements, mise en page, largeurs de contenu et piles de polices.](https://cdn.jsdelivr.net/npm/@mozilla-protocol/core@22.0.0/protocol/css/includes/tokens/dist/index.json) - [Utilisation de Protocol CSS Intégration de la feuille de style.](https://protocol.mozilla.org/docs/usage/framework) - [Code source de Protocol Implémentation, ressources et licence MPL.](https://github.com/mozilla/protocol)