Создайте практичный интерфейс управления количеством с шагом Mozaic в 16px, единообразными элементами управления высотой 48px, реальными SCSS-импортами и классами BEM. Планировщик материалов позволяет проверить ограничения, типизированные ошибки и локальную сводку материалов.
Авторская офлайн-интерпретация магического шага и элемента управления количеством среднего размера в Mozaic на основе HTML/CSS; оригинальная иллюстрация и палитра приложения, а не исходная библиотека CSS. · Справочник по реализации
02
Справочник по дизайну системы дизайн-система Adeo Mozaic
В документации Mozaic по SCSS/БЭМ на страницах с основами и установкой указана версия v1.85.0, а в справочнике по коду компонента выбора количества — v1.76.0. Это описанные контракты API, а не утверждение, что все страницы относятся к одной последней версии пакета.
Дизайн-система Adeo Mozaic: компоненты SCSS с настраиваемой айдентикой розничного магазина
ADEO — это организация, а не набор настроек по умолчанию
Mozaic распространяет стили и токены отдельно от шрифтов и значков SVG. В теме токенов по умолчанию используется Leroy Merlin; ADEO — отдельный явно задаваемый набор настроек. Поэтому зелёный цвет в авторском предварительном просмотре не свидетельствует об использовании официального корпоративного цвета ADEO.
Чтобы использовать набор настроек ADEO, создайте mozaic.config.js с параметрами preset: "adeo" и tokens.localTokensExportPath, затем выполните npx mozaic-tokens-build. Пользовательский каталог токенов объединяется с соответствующими путями JSON, не заменяя остальные значения. Генерация темы и стилизация компонентов — отдельные задачи сборки.
styles содержит SCSS-компоненты.
tokens содержит исходные и сгенерированные форматы токенов.
web-fonts и icons содержат отдельные ресурсы.
css-dev-tools содержит конфигурацию сборки и проверки кода.
Дизайн-система Adeo Mozaic: используйте магический шаг, не ограничивая контейнеры текста
Справочник на основе rem с базовым значением 16 px
В нижней части шкалы Mozaic использует шаг в четверть единицы, в средней — в половину, а для больших расстояний — целые единицы. В справочной таблице приведены реальные именованные шаги, поэтому создавать параллельную систему интервалов не нужно.
В планировщике используются интервалы 16 px, внутренние отступы 24 px и высота элементов управления 48 px. Эти значения поддерживают общий ритм компонентов, оставляя карточкам и тексту возможность расширяться. Для элемента управления лучше задать минимальную высоту, чем обрезать подпись, которая может измениться при переводе или увеличении размера шрифта.
Дизайн-система Adeo Mozaic: сохраняйте читаемость основного текста рядом с плотной группой элементов управления
Три практичных размера основного текста
В документированной шкале основного текста центральное место занимает обычное начертание размером 16 px. Для многострочного текста минимально рекомендуется 14 px, а для абзацев максимально — 18 px. В предварительном просмотре используется системный шрифт, и не утверждается, что в нём есть пакет веб-шрифтов Mozaic.
Используйте крупный заголовок для названия проекта, основной текст — для пояснения расчёта, а строку меньшего размера — для описания области применения примера. Значения материалов остаются настоящим текстом, а не частью иллюстрации полки.
Дизайн-система Adeo Mozaic: один компонент, три согласованных элемента
Обёртка не управляет состоянием приложения
Селектор количества состоит из квадратной кнопки уменьшения с рамкой, числового поля ввода и такой же кнопки увеличения. Импортируйте стили всех трёх компонентов, включая текстовое поле и кнопку: импорт только quantity-selector не соответствует описанной композиции.
В компактном варианте изменяйте размеры кнопки и поля ввода вместе. В рекомендациях по использованию для небольших точек останова требуется средний размер, поэтому уменьшать всё на телефоне — неудачное решение. В предварительном просмотре элементы управления высотой 48 px сохранены, а окружающая композиция перестроена в столбец.
Дизайн-система Adeo Mozaic: оформление границ должно соответствовать фактическому поведению
У ввода с клавиатуры состояний больше, чем у кнопок плюс и минус
В авторском примере разрешены целые числа от 1 до 12. При значении 1 кнопка уменьшения действительно отключена, а при значении 12 — кнопка увеличения. Один только класс is-disabled не блокирует нажатие клавиш. Нативный атрибут disabled и визуальный класс синхронизированы.
Пустое или дробное введённое значение не преобразуется молча в правдоподобный список материалов. При отправке отображается допустимый диапазон, а фокус перемещается в поле. Последующее редактирование сбрасывает предыдущий результат, поскольку он был рассчитан для иного количества. Расчёт для полки — вымышленные данные примера, а не структурная или закупочная рекомендация.
Считайте введённое значение, не принимая пустую строку за ноль.
Проверьте, что значение целое и попадает в диапазон, прежде чем рассчитывать примерные количества.
Обновите обе граничные кнопки и доступное для вспомогательных технологий сообщение об ошибке.
Создавайте локальный снимок только после успешной проверки.
Дизайн-система Adeo Mozaic: используйте одно заметное действие для результата проекта
Отделите изменение количества от подготовки списка
В пошаговом регуляторе используются сдержанные квадратные кнопки с рамкой, поскольку они изменяют значение в поле. Кнопка с заливкой «Подготовить список материалов» выполняет действие над всей формой. Если поставить рядом две заметные кнопки одного цвета, различие между действиями станет менее очевидным.
В итоговом сообщении явно сказано, что заказ не оформлен. Здесь нет имитации загрузки, платёжного сценария или отправки данных по сети. Достаточно конкретного сводного результата, чтобы показать связь между значениями и действиями.
Дизайн-система Adeo Mozaic: собирайте документированные импорты через конвейер Mozaic
Сначала настройки, затем вывод компонентов
Импорт all-settings предоставляет переменные, функции и примеси, но сам по себе не генерирует CSS компонентов. Следом за ним в предоставленном наборе подключаются text-input, button и quantity-selector. Конфигурация плагинов разрешает пути импорта Mozaic и запускает необходимые преобразования.
В настройке используется средство запуска PostCSS CLI, поскольку пакет плагина его не предоставляет. В производственной среде конфигурация плагина меняется в зависимости от MOZAIC_ENV. На странице установки теперь требуется Node 20+ и рекомендуется Dart Sass; на устаревшие рекомендации по Node Sass не следует опираться при установке снятого с поддержки компилятора.
Дизайн-система Adeo Mozaic: располагайте вспомогательные интервалы за пределами внутренней структуры компонентов
Используйте значения шкалы там, где компоновкой управляет сам компонент
Вспомогательные классы отступов Mozaic предназначены для задания расстояния между компонентами. Внутри нового компонента используйте переменные SCSS для магических шагов, чтобы компонент оставался самодостаточным. Чтобы сохранить нужный ритм, иногда приходится вычитать толщину рамки из целевого размера, например с помощью calc($mu025 - 1px).
Этот автономный пример не претендует на выполнение нативного CSS Mozaic. В нём по-своему интерпретированы документированные размеры и структура селектора количества: использованы оригинальные цвета, иллюстрация полки CSS и взаимодействие, ограниченное локальным запуском. В отдельном блоке кода приведены реальные классы библиотеки и связь со сборкой.
Сохраните весь документ как index.html и откройте его в браузере. Исходная автономная интерпретация магической единицы Mozaic и элемента управления количеством среднего размера для HTML/CSS; оригинальная иллюстрация и палитра приложения, а не CSS нативной библиотеки.
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>
Количество полок определяет список материалов, а не заказ. Для нативной разметки требуется документированный вывод Mozaic PostCSS; в этом автономном документе предусмотрены собственные стили интерпретации.
Ограниченное количество полок и рассчитанный список материалов
Классы Mozaic обрамляют стандартное числовое поле ввода. Оригинальный JavaScript обеспечивает проверку целых чисел, отключение на границах диапазона и сводку, доступную только локально.
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>
Для двух кнопок степпера задано type="button", поэтому они никогда не отправляют форму.
Встроенные атрибуты min/max/step сохраняют своё значение, а пользовательская проверка обрабатывает пустые и дробные значения.
Изменение количества делает предыдущий подготовленный снимок недействительным.
04
Настройка AI-агента дизайн-системы Adeo Mozaic
Отправная точка для реализации
Публичный рабочий процесс SCSS с задокументированной конфигурацией PostCSS. Сохраните пример HTML в файле public/index.html. Сборка нативного пакета здесь не выполнялась; офлайн-превью представляет собой независимую интерпретацию. В актуальных инструкциях по установке рекомендуется Dart Sass вместо Node Sass, упомянутого на более старой странице 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';
Запрос для вашего проекта
Промпт для AI-агента
Создайте композицию SCSS для Mozaic, подключив settings-tools/all-settings перед text-input, button и quantity-selector. Обеспечьте элементы управления среднего размера высотой 48px на небольших экранах, отключайте граничные кнопки штатными средствами, проверяйте введённые целые числа и формируйте сводку только локально. Используйте документированный конвейер PostCSS и различайте тему Leroy Merlin по умолчанию и пресет ADEO.
05
Источники и область применения дизайн-системы Adeo Mozaic
Независимый справочник по OpenDesign и Mozaic. Пример не является витриной ADEO или Leroy Merlin, реальным заказом или рекомендацией по конструкции. В снимках документации указаны разные версии.
