# système de design Adeo Mozaic ## Aperçu de l’interface du système de design Adeo Mozaic Saisissez une quantité ou modifiez-la par incréments, testez ses limites et préparez une liste locale de matériaux. ## Référence de conception du système de design Adeo Mozaic Documentation SCSS/BEM de Mozaic : les pages sur les fondations et l’installation indiquent la version v1.85.0 ; la référence du code de quantité indique la version v1.76.0. Il s’agit de versions documentées, et non d’une affirmation selon laquelle toutes les pages correspondent à la dernière version du package. ### Références de l’unité magique | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | mu025 | 4px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu050 | 8px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu075 | 12px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu100 | 16px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu125 | 20px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu150 | 24px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu175 | 28px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu200 | 32px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu250 | 40px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu300 | 48px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu350 | 56px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu400 | 64px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu500 | 80px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu600 | 96px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | | mu700 | 112px | Référence d’espacement en rem ; l’équivalent en pixels suppose une base documentée de 16 px. | ### Dimensions des boutons | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | Small height | 32px / 2mu | Commandes compactes. | | Medium height | 48px / 3mu | À utiliser pour l’interface de quantité mobile. | | Large height | 56px / 3.5mu | Action principale de grande taille. | | Text + icon, small / medium | 24px icon | Veillez à l’équilibre entre l’icône et le libellé. | | Text + icon, large | 32px icon | Grand bouton. | | Icon-only, medium / large | 32px icon | Commande carrée. | ### Hiérarchie du texte courant | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | mt-body-m | 16px regular | Texte courant par défaut. | | Small body | 14px | Taille minimale recommandée pour le texte courant multiligne. | | Large body | 18px | Taille maximale recommandée pour un paragraphe. | ### Anatomie du composant de quantité | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | mc-quantity-selector | Wrapper | Contient deux commandes et le champ de saisie. | | mc-quantity-selector__input | Input element | Appliquez également mc-text-input. | | mc-quantity-selector__button-left | Decrement element | Aussi mc-button--square et --bordered. | | mc-quantity-selector__button-right | Increment element | Aussi mc-button--square et --bordered. | | Small composition | mc-text-input--s + mc-button--s | Modifiez tout le groupe en même temps. | | is-disabled | Visual state class | Associez-le à l’attribut natif disabled pour désactiver réellement le contrôle. | ### Compilation et personnalisation | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | Liste des plug-ins requis. | | Parser | postcss-scss | Consultez le code source SCSS. | | Production environment | MOZAIC_ENV=production | Permet de configurer les plug-ins de production. | ### Utilitaires d’espacement | Nom / règle | Valeur / configuration | Utilisation | | --- | --- | --- | | mu-mb-100 | 16px bottom margin | Espacement entre les composants. | | mu-pl-050 | 8px left padding | Espacement utilitaire. | | make-space-util(m, t, 075) | Top margin at mu075 | Générer une classe utilitaire au choix. | ## Système de design Adeo Mozaic : 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. ## Système de design Adeo Mozaic : composants SCSS du système de design avec une identité configurable pour le commerce de détail ### ADEO désigne l’organisation, et non le préréglage par défaut > Mozaic fournit les styles sources et les jetons de design séparément des polices et des icônes SVG. Le thème de jetons par défaut est Leroy Merlin ; ADEO est un préréglage explicite. Un aperçu initial vert ne prouve donc pas que cette couleur est celle de l’identité visuelle officielle d’ADEO. Pour utiliser le préréglage ADEO, créez mozaic.config.js avec preset: "adeo" et tokens.localTokensExportPath, puis exécutez npx mozaic-tokens-build. Un répertoire de jetons personnalisé fusionne en profondeur les chemins JSON correspondants, sans remplacer les valeurs sans rapport. La génération du thème et le style des composants relèvent de deux étapes distinctes de la compilation. - styles fournit les composants SCSS. - tokens fournit les formats sources et générés des jetons de design. - web-fonts et icons fournissent des ressources distinctes. - css-dev-tools fournit la configuration de compilation et de lint. Consultez la spécification associée ## Système de design Adeo Mozaic : utiliser l’unité magique du système de design sans figer les conteneurs de texte ### Une référence en rem basée sur 16 px La partie basse de l’échelle de Mozaic progresse par quarts d’unité, la partie médiane par demi-unités et les espacements plus importants par unités entières. Le tableau de référence présente les valeurs nommées réelles, sans inventer un deuxième système d’espacement. Le planificateur utilise des espacements de 16 px, un espace intérieur de 24 px et une hauteur de commande de 48 px. Ces choix s’inscrivent dans le même rythme tout en laissant les cartes et les textes environnants s’agrandir. Il vaut mieux définir une hauteur minimale pour la commande que de couper un libellé traduit ou agrandi dans un conteneur de contenu à hauteur fixe. Consultez la spécification associée ## Système de design Adeo Mozaic : préserver la lisibilité du texte courant à côté de commandes denses ### Trois tailles pratiques pour le texte courant L’échelle de texte courant documentée privilégie le corps normal de 16 px. La recommandation minimale pour le texte sur plusieurs lignes est de 14 px, et la taille maximale conseillée pour les paragraphes est de 18 px. L’aperçu utilise une police système de remplacement et ne prétend pas intégrer le package de polices web de Mozaic. Utilisez le titre le plus grand pour nommer le projet, le texte courant pour expliquer le calcul et une ligne d’accompagnement plus petite pour préciser la portée de l’exemple. Les valeurs des matériaux restent du vrai texte, et ne sont pas intégrées à l’illustration de l’étagère. Consultez la spécification associée ## Système de design Adeo Mozaic : un composant et trois éléments coordonnés du système de design ### Le composant enveloppe ne fournit pas l’état de l’application Le sélecteur de quantité associe un bouton carré bordé pour diminuer la valeur, un champ numérique et un bouton assorti pour l’augmenter. Importez les styles des trois composants, y compris ceux du champ de texte et du bouton ; importer uniquement quantity-selector ne correspond pas à la composition documentée. Pour une variante compacte, réduisez ensemble la taille des boutons et des champs. Les consignes d’utilisation imposent la taille moyenne aux petits points de rupture : tout réduire sur un téléphone n’est donc pas la bonne optimisation. L’aperçu conserve des commandes de 48px et réorganise plutôt les éléments qui les entourent en les empilant. Consultez la spécification associée ## Le style des états limites du système de design Adeo Mozaic doit correspondre au comportement réel ### La saisie au clavier ne se résume pas aux boutons plus et moins L’exemple d’origine valide les entiers de 1 à 12. À un, la décrémentation est réellement désactivée ; à douze, l’incrémentation l’est aussi. La classe is-disabled, à elle seule, n’empêche pas l’activation au clavier. L’attribut natif disabled et la classe visuelle sont synchronisés. Une valeur saisie vide ou fractionnaire n’est pas convertie silencieusement en une liste de matériaux plausible. La soumission explique la plage acceptée et place le focus sur le champ. Une modification ultérieure efface le résultat préparé, car celui-ci correspondait à la quantité précédente. Le calcul d’étagère est une donnée fictive fournie à titre d’exemple, et non un conseil de construction ou d’achat. 1. Lire la valeur saisie sans interpréter une chaîne vide comme zéro. 2. Vérifier que la valeur est un entier compris dans la plage autorisée avant de calculer les quantités de l’exemple. 3. Mettre à jour les deux boutons de limite et l’état d’erreur accessible. 4. Créer un instantané local uniquement après validation. Consultez la spécification associée ## Utiliser une seule action pleine pour réaliser l’objectif du projet dans le système de design Adeo Mozaic ### Distinguer le réglage de la préparation Le sélecteur numérique utilise des commandes carrées discrètes avec bordure, car il modifie une valeur de saisie. Le bouton plein Préparer la liste des matériaux agit sur l’ensemble du formulaire. Placer côte à côte deux actions pleines de la même couleur brouillerait cette distinction. Le message qui en résulte précise explicitement qu’aucune commande n’a été passée. Il n’y a ni faux état de chargement, ni parcours de paiement, ni envoi réseau. Un récapitulatif concret suffit à montrer le lien entre les valeurs et les actions. Consultez la spécification associée ## Compiler les imports documentés avec le pipeline de Mozaic dans le système de design Adeo Mozaic ### Les paramètres d’abord, le code du composant ensuite L’import de tous les paramètres fournit des variables, des fonctions et des mixins, mais ne génère pas à lui seul de CSS pour les composants. Le bundle fourni ajoute ensuite text-input, button et quantity-selector. La configuration du plugin fournie résout les chemins d’import de Mozaic et applique les transformations attendues. La configuration fournit un exécuteur CLI PostCSS, car le package du plugin n’en propose pas. En production, MOZAIC_ENV modifie la configuration du plugin. La page d’installation exige désormais Node 20+ et recommande Dart Sass ; les anciens textes qui mentionnent Node Sass ne doivent pas servir de raison pour installer le compilateur obsolète. Consultez la spécification associée ## Garder l’espacement utilitaire en dehors des composants dans le système de design Adeo Mozaic ### Utiliser les valeurs de l’échelle lorsque le composant gère sa propre mise en page Les utilitaires de marge et de remplissage de Mozaic sont conçus pour gérer l’espacement entre les composants. À l’intérieur d’un nouveau composant, utilisez les variables SCSS d’unité magique afin qu’il reste autonome. Il peut être nécessaire de soustraire une bordure à la dimension cible, comme dans calc($mu025 - 1px), pour préserver le rythme souhaité. L’exemple hors ligne ne prétend pas exécuter nativement Mozaic CSS. Il interprète les dimensions documentées et la structure du sélecteur de quantité à l’aide de couleurs originales, d’une illustration d’étagère CSS et d’une interaction locale. Le bloc de code distinct fournit les classes réelles de la bibliothèque et la configuration de compilation. Consultez la spécification associée ## Exemples de composants du système de design Adeo Mozaic ### Exemple interactif autonome complet Enregistrez le document complet sous le nom index.html et ouvrez-le dans un navigateur. Interprétation originale hors ligne de l’unité magique et du sélecteur de quantité moyen de Mozaic, par HTML/CSS ; illustration et palette d’application originales, et non CSS natif de la bibliothèque. ``` Shelf materials planner
PROJECT WORKSHOPOriginal Mozaic interpretation

SMALL PROJECT · BIG DIFFERENCE

Make room for what matters.

Plan a simple shelf arrangement and prepare its sample materials list.

Your shelf project

Each sample shelf uses one board, two brackets and four screws.

Choose a whole number from 1 to 12.

2Boards
4Brackets
8Screws
``` Référence du code - Les quantités d’étagère produisent une liste de matériaux, pas une commande. Le balisage natif nécessite la sortie PostCSS documentée de Mozaic ; ce document autonome inclut ses propres styles d’interprétation. ### Une quantité d’étagère limitée et une liste de matériaux calculée Des classes Mozaic réelles encadrent un champ de saisie numérique natif. JavaScript ajoute la validation des nombres entiers, le blocage aux limites et un récapitulatif local uniquement. ``` Shelf materials

Plan a shelf project

Choose 1 to 12. Each sample shelf needs two brackets and four screws.

``` Référence du code - Les deux boutons d’incrémentation et de décrémentation utilisent type="button" afin de ne jamais envoyer le formulaire. - Les attributs natifs min/max/step restent pertinents, tandis qu’une validation personnalisée gère les valeurs vides et décimales. - Toute modification d’une quantité invalide l’instantané préparé précédemment. ## Configuration d’un agent IA pour le système de design Adeo Mozaic ### Point de départ de l’implémentation Workflow SCSS public utilisant la configuration PostCSS documentée. Enregistrez l’exemple HTML sous public/index.html. La compilation du package natif n’a pas été exécutée ici ; l’aperçu hors ligne est une interprétation indépendante. Les instructions d’installation actuelles utilisent Dart Sass, qui remplace la mention de Node Sass dans l’ancienne page consacrée à PostCSS. ``` # Node 20+. Use a CommonJS project for this configuration. npm install @mozaic-ds/styles sass npm install --save-dev @mozaic-ds/css-dev-tools postcss postcss-cli postcss-scss # Save the configuration and SCSS below, then build: npx postcss src/bundle.scss --output public/mozaic.css # Production build on a POSIX shell: MOZAIC_ENV=production npx postcss src/bundle.scss --output public/mozaic.css // postcss.config.js module.exports = { syntax: require('postcss-scss'), plugins: require('@mozaic-ds/css-dev-tools/postcssPluginConfig') }; // src/bundle.scss — settings must precede components. @import 'settings-tools/all-settings'; @import 'components/c.text-input'; @import 'components/c.button'; @import 'components/c.quantity-selector'; ``` ### Un prompt pour votre projet ``` Créez une composition SCSS Mozaic en chargeant settings-tools/all-settings avant text-input, button et quantity-selector. Utilisez des commandes moyennes de 48px sur les petits écrans, désactivez nativement les boutons aux limites, validez les nombres entiers saisis et générez un récapitulatif local uniquement. Utilisez le pipeline PostCSS documenté et distinguez le thème Leroy Merlin par défaut du preset ADEO. ``` ## Sources et périmètre du système de design Adeo Mozaic Référence indépendante de OpenDesign à Mozaic. Cet exemple n’est ni une vitrine ADEO ou Leroy Merlin, ni une commande en cours, ni une recommandation structurelle. Les instantanés de la documentation indiquent des versions différentes. - Installation Packages, Node et Dart Sass. - Configuration PostCSS Pipeline de plugins requis. - Imports SCSS Dépendances des paramètres et ordre des imports. - Unité magique Valeurs réelles des espacements. - Styles de corps de texte Tailles de paragraphe documentées. - Boutons Dimensions et hiérarchie des actions. - Utilisation des quantités Tailles adaptatives et usages prévus. - Code des quantités Structure BEM et imports des dépendances. - Personnalisation des jetons Thème par défaut et substitutions. - Utilitaires d’espacement Classes utilitaires et espacement des composants. ## Ressources associées au système de design Adeo Mozaic ### Adobe Spectrum Étudiez React Spectrum v3 à l’aide d’un tableau de ressources créatives sélectionnables et d’un inspecteur de préréglages d’exportation. Découvrez les thèmes Provider, l’échelle des champs de saisie, les propriétés de style prises en charge, les collections indexées et les différences entre v3 et la nouvelle implémentation Spectrum 2. ### Alaska Airlines Auro Explorez le thème Alaska d’Auro à travers de véritables jetons sémantiques de couleur et de typographie, une typographie fondée sur des classes et le composant de vol natif. Deux vols fictifs d’origine illustrent le filtrage et la sélection locaux sans représenter l’inventaire ni les réservations d’une compagnie aérienne. ### Arco Design Créez un sélecteur de sections de rapport avec le composant Transfer contrôlé d’Arco. Découvrez ses véritables échelles d’espacement et de taille, ses conventions de variables CSS, ses surfaces sémantiques et la différence entre sélectionner des lignes et les déplacer. - [Référence de mise en œuvre](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Source](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Source](https://mozaic.adeo.cloud/components/buttons/) - [Source](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Source](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Source](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/) - [Source](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/components/buttons/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/get-started/developers/installation/import/) - [Consultez la spécification associée](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/) - [Référence du code](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Référence du code](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Installation Packages, Node et Dart Sass.](https://mozaic.adeo.cloud/get-started/developers/installation/) - [Configuration PostCSS Pipeline de plugins requis.](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/) - [Imports SCSS Dépendances des paramètres et ordre des imports.](https://mozaic.adeo.cloud/get-started/developers/installation/import/) - [Unité magique Valeurs réelles des espacements.](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Styles de corps de texte Tailles de paragraphe documentées.](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Boutons Dimensions et hiérarchie des actions.](https://mozaic.adeo.cloud/components/buttons/) - [Utilisation des quantités Tailles adaptatives et usages prévus.](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Code des quantités Structure BEM et imports des dépendances.](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Personnalisation des jetons Thème par défaut et substitutions.](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/) - [Utilitaires d’espacement Classes utilitaires et espacement des composants.](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)