# Sistema de diseño Adeo Mozaic ## Vista previa de la interfaz del sistema de diseño Adeo Mozaic Escribe o ajusta una cantidad, prueba sus límites y prepara una lista local de materiales. ## 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. ### Referencias de la unidad mágica | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | mu025 | 4px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu050 | 8px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu075 | 12px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu100 | 16px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu125 | 20px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu150 | 24px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu175 | 28px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu200 | 32px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu250 | 40px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu300 | 48px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu350 | 56px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu400 | 64px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu500 | 80px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu600 | 96px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | | mu700 | 112px | Referencia de espaciado basada en rem; el equivalente en píxeles presupone la base documentada de 16px. | ### Dimensiones de los botones | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | Small height | 32px / 2mu | Controles compactos. | | Medium height | 48px / 3mu | Úsalo para la composición de cantidad en móviles. | | Large height | 56px / 3.5mu | Acción grande de alto énfasis. | | Text + icon, small / medium | 24px icon | Mantén el equilibrio entre el icono y la etiqueta. | | Text + icon, large | 32px icon | Botón grande. | | Icon-only, medium / large | 32px icon | Control cuadrado. | ### Jerarquía del cuerpo de texto | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | mt-body-m | 16px regular | Texto del cuerpo predeterminado. | | Small body | 14px | Tamaño mínimo recomendado para texto de varias líneas. | | Large body | 18px | Tamaño máximo recomendado para párrafos. | ### Anatomía del componente de cantidad | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | mc-quantity-selector | Wrapper | Contiene dos controles y el campo de entrada. | | mc-quantity-selector__input | Input element | Aplica también mc-text-input. | | mc-quantity-selector__button-left | Decrement element | Aplica también mc-button--square y --bordered. | | mc-quantity-selector__button-right | Increment element | Aplica también mc-button--square y --bordered. | | Small composition | mc-text-input--s + mc-button--s | Cambia el grupo completo a la vez. | | is-disabled | Visual state class | Combínalo con disabled nativo para que el comportamiento sea real. | ### Compilación y personalización | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | Lista de plugins necesarios. | | Parser | postcss-scss | Consulta el código fuente SCSS. | | Production environment | MOZAIC_ENV=production | Activa la configuración de plugins para producción. | ### Utilidades de espaciado | Nombre / Regla | Valor / Configuración | Uso | | --- | --- | --- | | mu-mb-100 | 16px bottom margin | Espacio entre componentes. | | mu-pl-050 | 8px left padding | Espaciado mediante utilidades. | | make-space-util(m, t, 075) | Top margin at mu075 | Genera una utilidad seleccionada. | ## Guía completa del sistema de diseño Adeo Mozaic Una guía práctica para elegir, aplicar y revisar este sistema en una interfaz real. Orientación completa, un punto de partida para la implementación y enlaces al código fuente. ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. 1. Lee el valor introducido sin interpretar una cadena vacía como cero. 2. Valida que sea un entero y esté dentro del intervalo antes de calcular las cantidades de ejemplo. 3. Actualiza los dos botones de límite y el estado de error accesible. 4. Crea una instantánea local solo después de que la validación se complete correctamente. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. Consulta la especificación complementaria ## 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. ``` 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
``` Referencia de código - 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. ``` Shelf materials

Plan a shelf project

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

``` Referencia de código - 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. ## 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. ``` # 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 ``` 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. ``` ## 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. - Instalación Paquetes, Node y Dart Sass. - Configuración de PostCSS Canalización de complementos requerida. - Importaciones SCSS Dependencia de configuración y orden de importación. - Unidad mágica Incrementos de espaciado reales. - Estilos de texto Tamaños de párrafo documentados. - Botones Dimensiones y jerarquía de acciones. - Uso del control de cantidad Tamaño adaptable e uso previsto. - Código del control de cantidad Estructura BEM e importaciones de dependencias. - Personalización de tokens Tema predeterminado y modificaciones. - Utilidades de espaciado Clases de utilidad y espaciado entre componentes. ## Recursos relacionados con el sistema de diseño Adeo Mozaic ### Adobe Spectrum Explora Spectrum v3 de React mediante una tabla de recursos creativos seleccionables y un inspector de ajustes preestablecidos de exportación. Conoce los temas de Provider y la escala de entrada, las propiedades de estilo compatibles, las colecciones con claves y las diferencias entre la versión 3 y la implementación más reciente de Spectrum 2. ### Alaska Airlines Auro Explora el tema Alaska de Auro con tokens semánticos reales para color y tipografía, tipografía basada en clases y el componente de vuelo nativo. Dos registros de vuelo originales muestran el filtrado y la selección locales, sin representar inventario de aerolíneas ni permitir reservas. ### Arco Design Crea un selector de secciones de informes con el componente Transfer controlado de Arco. Explora sus escalas reales de espaciado y tamaño, las convenciones de variables de CSS, las superficies semánticas y la diferencia entre seleccionar filas y moverlas. - [Referencia de implementación](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Fuente](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Fuente](https://mozaic.adeo.cloud/components/buttons/) - [Fuente](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Fuente](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Fuente](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/) - [Fuente](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/components/buttons/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/get-started/developers/installation/import/) - [Consulta la especificación complementaria](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/) - [Referencia de código](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Referencia de código](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Instalación Paquetes, Node y Dart Sass.](https://mozaic.adeo.cloud/get-started/developers/installation/) - [Configuración de PostCSS Canalización de complementos requerida.](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/) - [Importaciones SCSS Dependencia de configuración y orden de importación.](https://mozaic.adeo.cloud/get-started/developers/installation/import/) - [Unidad mágica Incrementos de espaciado reales.](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/) - [Estilos de texto Tamaños de párrafo documentados.](https://mozaic.adeo.cloud/foundations/typography/body-styles/) - [Botones Dimensiones y jerarquía de acciones.](https://mozaic.adeo.cloud/components/buttons/) - [Uso del control de cantidad Tamaño adaptable e uso previsto.](https://mozaic.adeo.cloud/components/form/quantity-selector/) - [Código del control de cantidad Estructura BEM e importaciones de dependencias.](https://mozaic.adeo.cloud/components/form/quantity-selector/code/) - [Personalización de tokens Tema predeterminado y modificaciones.](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/) - [Utilidades de espaciado Clases de utilidad y espaciado entre componentes.](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)