Créez une interface pratique de contrôle des quantités avec l’unité magique de 16 px de Mozaic, des commandes assorties de 48 px, de véritables imports SCSS et des classes BEM. Le planificateur de rayonnage permet d’observer les limites, les erreurs typées et un récapitulatif local des matériaux.
Interprétation hors ligne originale en HTML/CSS de l’unité magique de Mozaic et de son contrôle de quantité moyen ; illustration et palette d’application originales, sans CSS de la bibliothèque native. · Référence de mise en œuvre
02
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.
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.
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.
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.
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.
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.
Lire la valeur saisie sans interpréter une chaîne vide comme zéro.
Vérifier que la valeur est un entier compris dans la plage autorisée avant de calculer les quantités de l’exemple.
Mettre à jour les deux boutons de limite et l’état d’erreur accessible.
Créer un instantané local uniquement après validation.
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.
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.
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.
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.
html
<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Shelf materials planner</title><style>*{box-sizing:border-box}body{margin:0;background:#f6f5ef;color:#242920;font:16px/1.5 Arial,sans-serif}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible{outline:3px solid #23682c;outline-offset:4px}header{border-bottom:1px solid #d9ddd1;padding:16px 32px;display:flex;justify-content:space-between;gap:16px}header b{font-size:18px}header span,.note{font-size:14px;color:#5a6154}main{max-width:1056px;margin:auto;padding:32px}h1{font-size:36px;line-height:1.1;letter-spacing:-1px;margin:8px 0 16px}p{margin:0 0 16px}.eyebrow{font-size:12px;letter-spacing:2px;color:#23682c;font-weight:bold}.layout{display:grid;grid-template-columns:1.1fr 1fr;gap:32px}.art{background:#e5eadc;border-radius:4px;min-height:350px;display:grid;place-items:center;position:relative;overflow:hidden}.wall{width:78%;height:220px;background:linear-gradient(90deg,transparent 49.6%,#d8dfcf 50%,transparent 50.4%);position:relative}.board{position:absolute;left:0;right:0;top:130px;height:18px;background:repeating-linear-gradient(0deg,#bd9b6e 0 3px,#c6a477 3px 7px);box-shadow:0 10px 12px #26341b20;transform:skewY(-3deg)}.bracket{position:absolute;top:148px;width:12px;height:62px;background:#727867;transform:skewY(-3deg)}.bracket.a{left:15%}.bracket.b{right:15%}.pot{position:absolute;left:23%;top:58px;width:47px;height:72px;background:#c88462;border-radius:3px 3px 15px 15px}.leaf{position:absolute;width:52px;height:34px;background:#3d6e38;left:4px;top:-22px;border-radius:100% 0 100% 0;transform:rotate(-25deg)}.leaf:after{content:'';position:absolute;width:45px;height:30px;background:#638a47;left:20px;top:-15px;border-radius:0 100% 0 100%;transform:rotate(45deg)}.books{position:absolute;top:48px;right:20%;height:80px;display:flex;gap:4px;align-items:end}.books i{width:18px;height:76px;background:#f4efe4;display:block;border-top:6px solid #7f9673}.books i:nth-child(2){height:88px;background:#d3b795}.books i:nth-child(3){height:68px;background:#718268;transform:rotate(-10deg)}.art small{position:absolute;bottom:16px;left:24px;color:#526448}.panel{background:#fff;padding:24px;border:1px solid #d9ddd1;border-radius:4px}h2{font-size:24px;line-height:1.25;margin:0 0 8px}label{display:block;font-weight:bold;margin:24px 0 8px}.quantity{display:flex;max-width:240px;margin-bottom:8px}.quantity button,.quantity input{height:48px;border:1px solid #727a6a;background:#fff}.quantity button{width:48px;color:#23682c;font-size:24px;flex-shrink:0}.quantity button:first-child{border-radius:4px 0 0 4px}.quantity button:last-child{border-radius:0 4px 4px 0}.quantity input{width:96px;min-width:0;border-left:0;border-right:0;text-align:center;appearance:textfield}.quantity input::-webkit-inner-spin-button{appearance:none}button:disabled{color:#a2a69b;background:#f1f2ed;cursor:default}.materials{margin:24px 0;display:grid;grid-template-columns:repeat(3,1fr);border-block:1px solid #d9ddd1;padding:16px 0}.materials strong{font-size:24px;display:block}.materials span{font-size:14px;color:#62695c}.primary{min-height:48px;padding:12px 24px;background:#23682c;color:#fff;border:0;border-radius:4px;width:100%;font-weight:bold}.error{color:#ac2323;margin:8px 0;font-size:14px}.result{margin-top:16px;background:#eaf3e2;padding:16px;border-left:4px solid #23682c}.result:empty{display:none}footer{padding-top:24px;font-size:14px;color:#62695c}@media(max-width:650px){header{padding:16px}header span{max-width:140px}main{padding:24px 16px}h1{font-size:32px}.layout{grid-template-columns:1fr;gap:16px}.art{min-height:260px}.panel{padding:24px}.materials{gap:12px}}
</style><header><b>PROJECT WORKSHOP</b><span>Original Mozaic interpretation</span></header><main><p class="eyebrow">SMALL PROJECT · BIG DIFFERENCE</p><h1>Make room for what matters.</h1><p>Plan a simple shelf arrangement and prepare its sample materials list.</p><div class="layout"><div class="art" role="img" aria-label="Original illustration of a wooden shelf with books and a potted plant"><div class="wall"><div class="board"></div><div class="bracket a"></div><div class="bracket b"></div><div class="pot"><div class="leaf"></div></div><div class="books"><i></i><i></i><i></i></div></div><small>Original shelf illustration</small></div><form class="panel" id="planner" novalidate><h2>Your shelf project</h2><p class="note">Each sample shelf uses one board, two brackets and four screws.</p><label for="quantity">Number of shelves</label><div class="quantity"><button id="minus" type="button" aria-label="Remove one shelf" aria-controls="quantity">−</button><input id="quantity" type="number" min="1" max="12" step="1" required value="2" aria-describedby="hint error"><button id="plus" type="button" aria-label="Add one shelf" aria-controls="quantity">+</button></div><p class="note" id="hint">Choose a whole number from 1 to 12.</p><p class="error" id="error" role="alert"></p><div class="materials" aria-live="polite"><div><strong id="boards">2</strong><span>Boards</span></div><div><strong id="brackets">4</strong><span>Brackets</span></div><div><strong id="screws">8</strong><span>Screws</span></div></div><button type="submit" class="primary">Prepare materials list</button><div id="result" class="result" role="status"></div></form></div><footer>Local interaction example. No order is placed. Sample quantities are illustrative, not structural guidance.</footer></main><script>const input=document.querySelector('#quantity'),minus=document.querySelector('#minus'),plus=document.querySelector('#plus'),error=document.querySelector('#error'),result=document.querySelector('#result');function number(){return input.value.trim()===''?NaN:Number(input.value)}function valid(n){return Number.isInteger(n)&&n>=1&&n<=12}function update(show=false){const n=number(),ok=valid(n);result.textContent='';minus.disabled=ok&&n===1;plus.disabled=ok&&n===12;input.setAttribute('aria-invalid',String(!ok&&show));error.textContent=!ok&&show?'Enter a whole number from 1 to 12.':'';document.querySelector('#boards').textContent=ok?n:'—';document.querySelector('#brackets').textContent=ok?n*2:'—';document.querySelector('#screws').textContent=ok?n*4:'—';return ok}minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update()};plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update()};input.oninput=()=>update();document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`};update();</script></html>
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.
html
<!doctype html>
<html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="./mozaic.css"><title>Shelf materials</title>
<main><h1>Plan a shelf project</h1>
<form id="planner" novalidate>
<label for="quantity">Number of shelves</label>
<p id="hint">Choose 1 to 12. Each sample shelf needs two brackets and four screws.</p>
<div class="mc-quantity-selector">
<button type="button" id="minus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-left" aria-controls="quantity" aria-label="Remove one shelf">−</button>
<input id="quantity" name="quantity" class="mc-text-input mc-quantity-selector__input" type="number" min="1" max="12" step="1" value="2" required aria-describedby="hint error">
<button type="button" id="plus" class="mc-button mc-button--square mc-button--bordered mc-quantity-selector__button-right" aria-controls="quantity" aria-label="Add one shelf">+</button>
</div>
<p id="error" role="alert"></p><p id="counts" aria-live="polite"></p>
<button type="submit" class="mc-button">Prepare materials list</button>
<p id="result" role="status"></p></form></main>
<script>
const input=document.querySelector('#quantity'), minus=document.querySelector('#minus'), plus=document.querySelector('#plus');
const error=document.querySelector('#error'), counts=document.querySelector('#counts'), result=document.querySelector('#result');
function number(){return input.value.trim()===''?NaN:Number(input.value);}
function valid(n){return Number.isInteger(n)&&n>=1&&n<=12;}
function update(showError=false){
const n=number(),ok=valid(n); result.textContent='';
minus.disabled=ok&&n===1; plus.disabled=ok&&n===12;
minus.classList.toggle('is-disabled',minus.disabled);plus.classList.toggle('is-disabled',plus.disabled);
input.setAttribute('aria-invalid',String(!ok&&showError));
error.textContent=!ok&&showError?'Enter a whole number from 1 to 12.':'';
counts.textContent=ok?`${n} boards · ${n*2} brackets · ${n*4} screws`:'Enter a quantity to calculate materials.';
return ok;
}
minus.onclick=()=>{input.value=String(Math.max(1,(valid(number())?number():1)-1));update();};
plus.onclick=()=>{input.value=String(Math.min(12,(valid(number())?number():0)+1));update();};
input.oninput=()=>update();
document.querySelector('#planner').onsubmit=e=>{e.preventDefault();if(!update(true)){input.focus();return;}result.textContent=`Local list prepared: ${number()} boards, ${number()*2} brackets and ${number()*4} screws. Nothing was ordered.`;};
update();
</script></html>
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.
04
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.
texte
# 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
Prompt pour l’agent IA
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.
05
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.
