Crea una composizione pratica per il controllo delle quantità usando l’unità magica da 16px di Mozaic, controlli coordinati da 48px, import SCSS reali e classi BEM. Il pianificatore di scaffali rende visibili i limiti, gli errori tipizzati e un riepilogo locale dei materiali.
Interpretazione offline originale di HTML/CSS dell’unità magica di Mozaic e del controllo quantità medio; illustrazione e palette applicativa originali, non CSS della libreria nativa. · Riferimento per l’implementazione
02
Riferimento di progettazione del sistema di design Adeo Mozaic
La documentazione SCSS/BEM di Mozaic: le pagine relative alle basi e all’installazione indicano v1.85.0; il riferimento al codice delle quantità indica v1.76.0. Si tratta dei riferimenti documentati, non dell’affermazione che tutte le pagine corrispondano alla versione più recente di un unico pacchetto.
Componenti SCSS del sistema di design Adeo Mozaic con identità retail configurabile
ADEO è l’organizzazione, non il preset predefinito
Mozaic fornisce gli stili sorgente e i token separatamente dai font e dalle icone SVG. Il tema predefinito dei token è Leroy Merlin; ADEO è un preset esplicito. Un’anteprima originale verde non è quindi la prova di un colore aziendale ufficiale di ADEO.
Per il preset ADEO, crea mozaic.config.js con preset: "adeo" e tokens.localTokensExportPath, quindi esegui npx mozaic-tokens-build. Una directory di token personalizzata fonde in profondità i percorsi JSON corrispondenti, invece di sostituire i valori non correlati. La generazione del tema e lo stile dei componenti sono aspetti distinti della build.
styles fornisce i componenti SCSS.
tokens fornisce i formati dei token sorgente e generati.
web-fonts e icons forniscono risorse separate.
css-dev-tools fornisce la configurazione di build e lint.
Sistema di design Adeo Mozaic: usa l’unità magica senza imporre larghezze fisse ai contenitori di testo
Riferimento in rem basato su 16px
Nella scala di Mozaic, gli incrementi più piccoli sono di un quarto di unità, quelli intermedi di mezza unità e quelli più grandi di un’unità intera. La tabella di riferimento riporta i passaggi effettivamente denominati, senza introdurre un secondo sistema di spaziatura.
Il pianificatore usa spaziature di 16px, spazio interno di 24px e un’altezza dei controlli di 48px. Queste scelte allineano il componente allo stesso ritmo, lasciando però spazio alla crescita delle schede circostanti e del testo. È preferibile impostare un’altezza minima per i controlli, invece di ritagliare un’etichetta tradotta o ingrandita dentro un contenitore di altezza fissa.
Sistema di design Adeo Mozaic: mantieni leggibile il testo del corpo accanto ai controlli densi
Tre dimensioni pratiche per il testo del corpo
La scala documentata per il testo del corpo ha come riferimento centrale il formato regolare da 16px. Quattordici pixel è la dimensione minima consigliata per il testo su più righe, mentre 18px è quella massima consigliata per i paragrafi. L’anteprima usa un font di sistema come alternativa e non finge di includere il pacchetto di font web di Mozaic.
Usa il titolo più grande per dare un nome al progetto, il testo del corpo per spiegare il calcolo e una riga di supporto più piccola per indicare l’ambito dell’esempio. I valori dei materiali restano testo reale, non testo inserito nell’illustrazione dello scaffale.
Sistema di design Adeo Mozaic: un componente, tre elementi coordinati
Il wrapper non gestisce lo stato dell’applicazione
Il selettore di quantità combina un pulsante quadrato con bordo per diminuire, un campo numerico e un pulsante corrispondente per aumentare. Importa gli stili di tutti e tre i componenti, inclusi text input e button; importare solo quantity-selector non costituisce la composizione documentata.
Per una variante compatta, modifica insieme le dimensioni del pulsante e del campo di input. Le indicazioni d’uso richiedono la dimensione media nei breakpoint piccoli, quindi ridurre tutto su un telefono è la scelta sbagliata. L’anteprima mantiene controlli da 48px e dispone verticalmente il resto della composizione.
Sistema di design Adeo Mozaic: lo stile dei bordi deve corrispondere al comportamento effettivo
L’input digitato ha più stati dei pulsanti più e meno
L’esempio originale convalida numeri interi da 1 a 12. A uno, il pulsante per diminuire è effettivamente disabilitato; a dodici, è disabilitato quello per aumentare. La sola classe is-disabled non impedirebbe l’attivazione da tastiera. L’attributo nativo disabled e la classe visiva sono sincronizzati.
Un valore digitato vuoto o frazionario non viene convertito silenziosamente in un elenco di materiali plausibile. Al momento dell’invio, viene spiegato l’intervallo accettato e il focus viene spostato sul campo. Una modifica successiva elimina il risultato preparato in precedenza, perché quel risultato si riferiva alla quantità precedente. Il calcolo dello scaffale è un esempio fittizio, non un consiglio strutturale o di acquisto.
Leggi il valore digitato senza considerare zero una stringa vuota.
Convalida il numero intero e l’intervallo prima di calcolare le quantità di esempio.
Aggiorna entrambi i pulsanti di limite e lo stato di errore accessibile.
Crea un’istantanea locale solo dopo aver superato la convalida.
Sistema di design Adeo Mozaic: usa un’unica azione piena per il risultato del progetto
Distingui la modifica della quantità dalla preparazione
Il selettore usa controlli quadrati con bordo e stile discreto, perché modifica un input. Il pulsante pieno Prepara l’elenco dei materiali agisce invece sull’intero modulo. Due azioni piene dello stesso colore affiancate renderebbero meno chiara questa distinzione.
Il messaggio risultante specifica chiaramente che non è stato effettuato alcun ordine. Non ci sono caricamenti fittizi, flussi di pagamento o invii in rete. Un riepilogo concreto basta a mostrare la relazione tra valori e azioni.
Sistema di design Adeo Mozaic: compila gli import documentati tramite la pipeline di Mozaic
Prima le impostazioni, poi l’output dei componenti
L’import di tutte le impostazioni fornisce variabili, funzioni e mixin, ma da solo non genera alcun componente CSS. Il bundle fornito include poi text-input, button e quantity-selector. La configurazione dei plugin fornita risolve i percorsi di import di Mozaic ed esegue le trasformazioni previste.
La configurazione include un esecutore CLI PostCSS, perché il pacchetto del plugin non ne fornisce uno. Per la produzione, MOZAIC_ENV modifica la configurazione dei plugin. La pagina di installazione ora richiede Node 20+ e consiglia Dart Sass; le indicazioni precedenti che descrivono Node Sass non devono essere usate come motivo per installare il compilatore deprecato.
Sistema di design Adeo Mozaic: mantieni la spaziatura delle utility all’esterno degli interni dei componenti
Usa i valori della scala quando il componente gestisce il proprio layout
Le utility di margine e padding di Mozaic sono pensate per regolare la spaziatura tra i componenti. All’interno di un nuovo componente, usa le variabili SCSS dell’unità magica per mantenerlo autonomo. Potrebbe essere necessario sottrarre un bordo dalla dimensione desiderata, come in calc($mu025 - 1px), per conservare il ritmo previsto.
L’esempio offline non dichiara di eseguire il CSS nativo di Mozaic. Interpreta le dimensioni documentate e l’anatomia del selettore di quantità con colori originali, un’illustrazione originale di uno scaffale CSS e un’interazione solo locale. Il blocco di codice separato fornisce le classi effettive della libreria e il collegamento alla build.
Esempi di componenti del sistema di design Adeo Mozaic
Esempio interattivo completo e autonomo
Salva l’intero documento come index.html e aprilo in un browser. Interpretazione originale e offline di HTML/CSS dell’unità magica e del controllo quantità media di Mozaic; illustrazione e tavolozza dell’applicazione originali, non CSS della libreria nativa.
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>
Le quantità per lo scaffale generano un elenco di materiali, non un ordine. Il markup nativo richiede l’output documentato di Mozaic PostCSS; questo documento autonomo include i propri stili interpretativi.
Quantità limitata per lo scaffale ed elenco dei materiali derivato
Le classi Mozaic reali racchiudono un input numerico nativo. JavaScript originale fornisce la convalida degli interi, la disattivazione ai limiti e un riepilogo solo locale.
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>
I due pulsanti dello stepper usano type="button", così non inviano mai il modulo.
Gli attributi nativi min/max/step restano significativi, mentre la convalida personalizzata gestisce gli input vuoti e frazionari.
La modifica di una quantità invalida l’istantanea preparata in precedenza.
04
Configurazione dell’agente del sistema di design Adeo Mozaic
Punto di partenza per l’implementazione
Flusso di lavoro SCSS pubblico con la configurazione PostCSS documentata. Salva l’esempio HTML in public/index.html. La compilazione del pacchetto nativo non è stata eseguita qui; l’anteprima offline è un’interpretazione indipendente. Le istruzioni di installazione attuali usano Dart Sass, che sostituisce il riferimento a Node Sass nella precedente pagina PostCSS.
testo
# 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 per il tuo progetto
Prompt per l’agente
Crea una composizione SCSS Mozaic usando settings-tools/all-settings prima di text-input, button e quantity-selector. Usa controlli medi da 48px sugli schermi piccoli, disattiva i pulsanti di limite in modo nativo, convalida gli interi inseriti e crea un riepilogo solo locale. Usa la pipeline PostCSS documentata e distingui il tema predefinito Leroy Merlin dal preset ADEO.
05
Fonti e ambito del sistema di design Adeo Mozaic
Riferimento indipendente a Mozaic OpenDesign. L’esempio non è un negozio ADEO o Leroy Merlin, un ordine reale né una guida strutturale. Le istantanee della documentazione riportano etichette di versione diverse.
