Crie uma composição prática de controle de quantidade usando a unidade mágica de 16 px da Mozaic, controles correspondentes de 48 px, imports SCSS reais e classes BEM. O planejador de prateleiras permite observar limites, erros tipados e um resumo local de materiais.
Interpretação offline original de HTML/CSS da unidade mágica e do controle médio de quantidade da Mozaic; ilustração e paleta da aplicação originais, não são CSS nativos da biblioteca. · Referência de implementação
02
Referência de design do sistema sistema de design Adeo Mozaic
Documentação SCSS/BEM da Mozaic: as páginas de fundamentos e instalação indicam v1.85.0; a referência de código de quantidade indica v1.76.0. Estes são contratos de referência documentados, não uma afirmação de que todas as páginas correspondam à versão mais recente do pacote.
Adeo Mozaic: componentes SCSS do sistema de design com identidade de varejo configurável
ADEO é a organização, não a predefinição padrão
Mozaic fornece estilos-fonte e tokens separadamente das fontes e dos ícones SVG. O tema padrão dos tokens é Leroy Merlin; ADEO é uma predefinição explícita. Portanto, uma prévia original em verde não comprova que essa seja uma cor corporativa oficial da ADEO.
Para usar a predefinição ADEO, crie mozaic.config.js com preset: "adeo" e tokens.localTokensExportPath e, em seguida, execute npx mozaic-tokens-build. Um diretório personalizado de tokens mescla em profundidade os caminhos JSON correspondentes, em vez de substituir valores sem relação com eles. A geração do tema e a estilização dos componentes são etapas distintas do processo de build.
styles fornece os componentes SCSS.
tokens fornece os formatos de tokens de origem e gerados.
web-fonts e icons fornecem recursos separados.
css-dev-tools fornece a configuração de build e lint.
Adeo Mozaic: use a unidade mágica do sistema de design sem limitar a largura dos contêineres de texto
Uma referência baseada em rem de 16px
Na parte menor da escala de Mozaic, os incrementos são de um quarto de unidade; no meio, são de meia unidade; e, nas distâncias maiores, são de unidades inteiras. A tabela de referência apresenta os valores nomeados disponíveis, sem criar um segundo sistema de espaçamento.
O planejador usa espaçamentos de 16px, espaçamento interno de 24px e controles com 48px de altura. Essas escolhas mantêm o componente no mesmo ritmo visual, enquanto permitem que os cartões e textos ao redor cresçam. É melhor definir uma altura mínima para o controle do que cortar um rótulo traduzido ou ampliado dentro de uma caixa de conteúdo com altura fixa.
Adeo Mozaic: mantenha o texto corrido legível junto a controles compactos no sistema de design
Três tamanhos práticos para o texto corrido
A escala documentada de texto corrido tem como referência principal 16px regular. Para textos com várias linhas, a recomendação mínima é 14px; para parágrafos, a máxima é 18px. A prévia usa uma fonte substituta do sistema e não dá a entender que inclui o pacote de fontes da web de Mozaic.
Use o título maior para nomear o projeto, o texto corrido para explicar o cálculo e uma linha menor de apoio para delimitar o escopo do exemplo. Os valores dos materiais permanecem como texto real, em vez de serem desenhados na ilustração da estante.
Adeo Mozaic: um componente, três elementos coordenados no sistema de design
O wrapper não gerencia o estado da aplicação
O seletor de quantidade combina um botão quadrado contornado para diminuir, um campo numérico e um botão correspondente para aumentar. Importe os estilos dos três componentes, incluindo text input e button; importar apenas quantity-selector não corresponde à composição documentada.
Para uma variante compacta, altere juntos os tamanhos dos botões e do campo de entrada. As orientações de uso exigem o tamanho médio em breakpoints pequenos, portanto reduzir tudo em um celular é a otimização errada. A prévia mantém os controles de 48px e organiza em pilha os elementos ao redor.
Adeo Mozaic: a estilização das bordas deve corresponder ao comportamento real no sistema de design
A entrada digitada tem mais estados do que os botões de mais e menos
O exemplo original aceita números inteiros de 1 a 12. Em um, o botão para diminuir fica realmente desativado; em doze, o botão para aumentar fica desativado. A classe is-disabled, por si só, não impediria a ativação pelo teclado. O atributo disabled nativo e a classe visual são mantidos em sincronia.
Um valor vazio ou fracionário digitado não é convertido silenciosamente em uma lista plausível de materiais. Ao enviar, o sistema explica o intervalo aceito e coloca o foco no campo. Uma edição posterior limpa o resultado preparado anteriormente, pois ele correspondia à quantidade anterior. O cálculo da estante usa dados fictícios de exemplo, não é uma recomendação estrutural nem de compra.
Leia o valor digitado sem tratar uma string vazia como zero.
Valide se o valor é inteiro e está no intervalo antes de calcular as quantidades do exemplo.
Atualize os dois botões de limite e o estado acessível de erro.
Crie um resumo local somente após a validação ser aprovada.
Adeo Mozaic: use uma única ação sólida para o resultado do projeto no sistema de design
Separe o ajuste da quantidade da preparação
O seletor usa controles quadrados contornados e discretos, pois eles alteram um campo de entrada. O botão sólido Preparar lista de materiais age sobre o formulário completo. Dois botões de ação sólidos da mesma cor lado a lado dificultariam essa distinção.
A mensagem resultante deixa explícito que nada foi pedido. Não há estado de carregamento fictício, fluxo de pagamento ou envio pela rede. Um resumo concreto basta para demonstrar a relação entre valores e ações.
Sistema de design Adeo Mozaic: compile as importações documentadas pelo pipeline de Mozaic
Primeiro as configurações, depois a saída dos componentes
A importação all-settings fornece variáveis, funções e mixins, mas, por si só, não gera nenhum componente CSS. O bundle fornecido importa em seguida text-input, button e quantity-selector. A configuração de plugins fornecida resolve os caminhos de importação de Mozaic e executa as transformações esperadas.
A configuração inclui um executor de CLI do PostCSS, pois o pacote do plugin não fornece um. Em produção, MOZAIC_ENV altera a configuração do plugin. A página de instalação agora exige Node 20+ e recomenda Dart Sass; textos antigos que descrevem Node Sass não devem ser usados como justificativa para instalar o compilador obsoleto.
Adeo Mozaic: mantenha o espaçamento dos utilitários fora das partes internas dos componentes do sistema de design
Use valores da escala quando o layout for responsabilidade do componente
Os utilitários de margem e preenchimento de Mozaic foram criados para definir o espaçamento entre componentes. Dentro de um componente novo, use as variáveis SCSS da unidade mágica para mantê-lo autocontido. Pode ser necessário descontar a borda da dimensão desejada, como em calc($mu025 - 1px), para preservar o ritmo pretendido.
O exemplo offline não afirma executar CSS nativamente no Mozaic. Ele interpreta as dimensões documentadas e a estrutura do controle de quantidade com cores originais, uma ilustração original de prateleira e uma interação exclusivamente local. O bloco de código separado fornece as classes reais da biblioteca e a integração com o processo de build.
Exemplos de componentes do sistema de design Adeo Mozaic
Exemplo interativo completo e independente
Salve o documento completo como index.html e abra-o em um navegador. Interpretação offline original da unidade mágica HTML/CSS e do controle de quantidade médio do Mozaic; ilustração e paleta da aplicação originais, não CSS nativo da biblioteca.
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>
As quantidades de prateleiras geram uma lista de materiais, não um pedido. A marcação nativa requer a saída do PostCSS documentada do Mozaic; este documento independente inclui seus próprios estilos de interpretação.
Quantidade limitada de prateleiras e lista de materiais derivada
Classes reais do Mozaic envolvem um campo numérico nativo. O JavaScript original fornece validação de números inteiros, desativação nos limites e um resumo exclusivamente local.
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>
Os dois botões do controle incremental usam type="button" para nunca enviarem o formulário.
Os atributos nativos min/max/step continuam válidos, enquanto a validação personalizada trata entradas vazias e fracionárias.
Alterar uma quantidade invalida o resumo preparado anteriormente.
04
Configuração do agente de IA do sistema de design Adeo Mozaic
Ponto de partida para implementação
Fluxo de trabalho público de SCSS com a configuração documentada do PostCSS. Salve o exemplo HTML em public/index.html. O build do pacote nativo não foi executado aqui; a prévia offline é uma interpretação independente. As instruções atuais de instalação usam Dart Sass, substituindo a referência a Node Sass na página mais antiga do PostCSS.
texto
# 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';
Um prompt para seu projeto
Prompt para agente de IA
Crie uma composição SCSS do Mozaic usando settings-tools/all-settings antes de text-input, button e quantity-selector. Adapte os controles médios de 48 px para telas pequenas, desative nativamente os botões nos limites, valide números inteiros digitados e gere um resumo exclusivamente local. Use o pipeline documentado do PostCSS e diferencie o tema padrão do Leroy Merlin da predefinição ADEO.
05
Fontes e escopo do sistema de design Adeo Mozaic
Referência independente OpenDesign ao Mozaic. O exemplo não é uma loja do ADEO ou do Leroy Merlin, um pedido real nem uma orientação estrutural. Os registros da documentação apresentam rótulos de versão diferentes.
