Comercio minorista y comercio electrónico · Nuevo recurso
Sistema de diseño Adeo Mozaic.
Crea una composición práctica para controlar cantidades con la unidad base de 16 px de Mozaic, controles uniformes de 48 px, importaciones SCSS reales y clases BEM. El planificador de estanterías permite observar los límites, los errores tipados y un resumen local de materiales.
Interpretación original sin conexión de HTML/CSS de la unidad mágica de Mozaic y el control de cantidad mediana; ilustración y paleta de aplicación originales, no es un CSS nativo de la biblioteca. · Referencia de implementación
02
Referencia de diseño del sistema sistema de diseño Adeo Mozaic
Documentación SCSS/BEM de Mozaic: las páginas de fundamentos e instalación indican v1.85.0; la referencia del código de cantidad indica v1.76.0. Son contratos de referencia documentados, no una afirmación de que todas las páginas correspondan a una única versión más reciente del paquete.
Componentes SCSS del sistema de diseño Adeo Mozaic con una identidad comercial configurable
ADEO es la organización, no el ajuste preestablecido predeterminado
Mozaic distribuye los estilos fuente y los tokens por separado de las fuentes y los iconos SVG. El tema de tokens predeterminado es Leroy Merlin; ADEO es un ajuste preestablecido explícito. Por tanto, una vista previa original en verde no demuestra que ese sea un color corporativo oficial de ADEO.
Para usar el ajuste preestablecido de ADEO, crea mozaic.config.js con preset: "adeo" y tokens.localTokensExportPath; después, ejecuta npx mozaic-tokens-build. Un directorio de tokens personalizado combina en profundidad las rutas JSON correspondientes, en lugar de reemplazar valores no relacionados. La generación de temas y los estilos de componentes son aspectos de compilación independientes.
styles proporciona los componentes SCSS.
tokens proporciona los formatos de tokens fuente y generados.
web-fonts e icons proporcionan recursos independientes.
css-dev-tools proporciona la configuración de compilación y lint.
Sistema de diseño Adeo Mozaic: usa la unidad mágica sin fijar los contenedores de texto
Una referencia de 16 px basada en rem
En el extremo inferior de la escala de Mozaic hay incrementos de un cuarto de unidad; en el tramo medio, de media unidad, y en las distancias mayores, de unidades enteras. La tabla de referencia muestra los pasos con nombre reales, sin inventar un segundo sistema de espaciado.
El planificador usa espacios de 16 px, espaciado interior de 24 px y una altura de control de 48 px. Estas opciones mantienen el componente dentro del mismo ritmo visual y permiten que las tarjetas y el texto circundantes crezcan. Es preferible establecer una altura mínima para el control que recortar una etiqueta traducida o ampliada dentro de un cuadro de contenido de altura fija.
Sistema de diseño Adeo Mozaic: mantén el texto del cuerpo legible junto a controles densos
Tres tamaños prácticos para el texto del cuerpo
La escala documentada del texto del cuerpo se centra en 16 px de peso normal. Para texto de varias líneas, se recomiendan como mínimo 14 px; para párrafos, como máximo 18 px. La vista previa usa una fuente de sistema alternativa y no finge incluir el paquete de fuentes web de Mozaic.
Usa el título más grande para nombrar el proyecto, el texto del cuerpo para explicar el cálculo y una línea de apoyo más pequeña para indicar el alcance del ejemplo. Los valores de los materiales siguen siendo texto real, no texto dibujado dentro de la ilustración de la estantería.
Sistema de diseño Adeo Mozaic: un componente, tres elementos coordinados
El contenedor no proporciona el estado de la aplicación
El selector de cantidad combina un botón cuadrado con borde para reducir, un campo de entrada numérico y un botón equivalente para aumentar. Importa los estilos de los tres componentes, incluidos los de text input y button; importar solo quantity-selector no constituye la composición documentada.
Para una variante compacta, cambia a la vez el tamaño de los botones y del campo de entrada. Las pautas de uso exigen el tamaño mediano en los puntos de ruptura pequeños, así que reducirlo todo en un teléfono es una optimización equivocada. La vista previa mantiene controles de 48 px y apila los elementos que los rodean.
Sistema de diseño Adeo Mozaic: el estilo de los límites debe corresponderse con el comportamiento real
La entrada de texto tiene más estados que los botones de más y menos
El ejemplo original valida enteros del 1 al 12. Al llegar a uno, el botón para reducir queda realmente desactivado; al llegar a doce, se desactiva el botón para aumentar. La clase is-disabled por sí sola no impediría la activación con el teclado. El atributo disabled nativo y la clase visual se mantienen sincronizados.
Un valor vacío o fraccionario introducido manualmente no se convierte en silencio en una lista de materiales verosímil. Al enviar el formulario, se explica el intervalo aceptado y se enfoca el campo. Una edición posterior borra el resultado preparado anterior, ya que correspondía a la cantidad previa. El cálculo de la estantería es un ejemplo ficticio, no una recomendación estructural ni de compra.
Lee el valor introducido sin interpretar una cadena vacía como cero.
Valida que sea un entero y esté dentro del intervalo antes de calcular las cantidades de ejemplo.
Actualiza los dos botones de límite y el estado de error accesible.
Crea una instantánea local solo después de que la validación se complete correctamente.
Sistema de diseño Adeo Mozaic: usa una sola acción sólida para el resultado del proyecto
Separa los pasos de la preparación
El selector usa controles cuadrados discretos con borde porque modifica un campo de entrada. El botón sólido Preparar lista de materiales actúa sobre el formulario completo. Colocar dos acciones sólidas del mismo color una junto a otra ocultaría esta diferencia.
El mensaje resultante indica explícitamente que no se ha pedido nada. No hay un estado de carga ficticio, un flujo de pago ni un envío por red. Un resumen concreto basta para demostrar la relación entre los valores y las acciones.
Sistema de diseño Adeo Mozaic: compila las importaciones documentadas mediante el flujo de Mozaic
Primero la configuración; después, la salida de los componentes
La importación de todos los ajustes proporciona variables, funciones y mixins, pero por sí sola no genera ningún CSS de componente. El paquete suministrado añade después text-input, button y quantity-selector. La configuración de plugins incluida resuelve las rutas de importación de Mozaic y ejecuta las transformaciones previstas.
La configuración incluye un ejecutor de PostCSS CLI porque el paquete de plugins no proporciona uno. En producción, MOZAIC_ENV modifica la configuración de los plugins. La página de instalación ahora requiere Node 20+ y recomienda Dart Sass; no se debe usar el texto anterior sobre Node Sass como motivo para instalar el compilador obsoleto.
Sistema de diseño Adeo Mozaic: mantén el espaciado con utilidades fuera del interior de los componentes
Usa los valores de la escala cuando el componente gestione su propio diseño
Las utilidades de margen y relleno de Mozaic están pensadas para el espaciado entre componentes. Dentro de un componente nuevo, usa las variables SCSS de la unidad mágica para que el componente siga siendo autónomo. Puede ser necesario restar un borde de la dimensión objetivo, como en calc($mu025 - 1px), para conservar el ritmo previsto.
La muestra sin conexión no afirma ejecutar Mozaic CSS de forma nativa. Interpreta las dimensiones documentadas y la estructura del control de cantidad con colores originales, una ilustración de estantería CSS y una interacción solo local. El bloque de código independiente incluye las clases reales de la biblioteca y la conexión de compilación.
Ejemplos de componentes del sistema de diseño Adeo Mozaic
Muestra interactiva independiente completa
Guarda el documento completo como index.html y ábrelo en un navegador. Interpretación original sin conexión de la unidad mágica de Mozaic y del control de cantidad medio HTML/CSS; ilustración y paleta de aplicación originales, no CSS de la biblioteca 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>
Las cantidades de estanterías generan una lista de materiales, no un pedido. El marcado nativo requiere la salida PostCSS documentada; este documento independiente incluye sus propios estilos interpretativos.
Una cantidad de estanterías limitada y una lista de materiales derivada
Las clases reales de Mozaic envuelven una entrada numérica nativa. JavaScript implementa la validación de enteros, la desactivación de los límites y un resumen solo 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>
Los dos botones del control incremental usan type="button" para que nunca envíen el formulario.
Los atributos nativos min/max/step siguen teniendo efecto, mientras que la validación personalizada contempla las entradas vacías y fraccionarias.
Al cambiar una cantidad, se invalida la instantánea preparada anteriormente.
04
Configuración del agente del sistema de diseño Adeo Mozaic
Punto de partida para la implementación
Flujo de trabajo SCSS público con la configuración PostCSS documentada. Guarda el ejemplo HTML en public/index.html. La compilación del paquete nativo no se ejecutó aquí; la vista previa sin conexión es una interpretación independiente. Las instrucciones de instalación actuales usan Dart Sass, en sustitución de la referencia anterior a Node Sass en la página de 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';
Una instrucción para tu proyecto
Instrucción para el agente
Crea una composición SCSS de Mozaic que importe settings-tools/all-settings antes de text-input, button y quantity-selector. Usa controles medianos de 48 px en pantallas pequeñas, desactiva de forma nativa los botones en los límites, valida los enteros introducidos y genera un resumen solo local. Usa la canalización PostCSS documentada y distingue el tema predeterminado de Leroy Merlin del preajuste de ADEO.
05
Fuentes y alcance del sistema de diseño Adeo Mozaic
Referencia independiente de OpenDesign a Mozaic. La muestra no es una tienda de ADEO o Leroy Merlin, un pedido activo ni una recomendación estructural. Las instantáneas de la documentación muestran etiquetas de versión distintas.
