# Дизайн-система Adeo Mozaic

## Предварительный просмотр интерфейса дизайн-системы Adeo Mozaic

Введите количество или измените его кнопками, проверьте допустимые значения и подготовьте локальный список материалов.

## Справочник по дизайну системы дизайн-система Adeo Mozaic

В документации Mozaic по SCSS/БЭМ на страницах с основами и установкой указана версия v1.85.0, а в справочнике по коду компонента выбора количества — v1.76.0. Это описанные контракты API, а не утверждение, что все страницы относятся к одной последней версии пакета.

### Справочник по магическим шагам

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| mu025 | 4px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu050 | 8px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu075 | 12px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu100 | 16px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu125 | 20px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu150 | 24px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu175 | 28px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu200 | 32px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu250 | 40px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu300 | 48px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu350 | 56px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu400 | 64px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu500 | 80px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu600 | 96px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
| mu700 | 112px | Справочник интервалов в rem; эквивалент в пикселях рассчитан исходя из документированной базовой величины 16 px. |
### Размеры кнопок

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| Small height | 32px / 2mu | Компактные элементы управления. |
| Medium height | 48px / 3mu | Используйте для мобильной композиции выбора количества. |
| Large height | 56px / 3.5mu | Крупное действие с высоким визуальным приоритетом. |
| Text + icon, small / medium | 24px icon | Сохраняйте равновесие между значком и подписью. |
| Text + icon, large | 32px icon | Крупная кнопка. |
| Icon-only, medium / large | 32px icon | Квадратный элемент управления. |
### Иерархия основного текста

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| mt-body-m | 16px regular | Основной размер. |
| Small body | 14px | Рекомендуемый минимум для многострочного основного текста. |
| Large body | 18px | Рекомендуемый максимум размера абзаца. |
### Структура компонента выбора количества

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| mc-quantity-selector | Wrapper | Содержит два элемента управления и поле ввода. |
| mc-quantity-selector__input | Input element | Также примените mc-text-input. |
| mc-quantity-selector__button-left | Decrement element | Также примените mc-button--square и --bordered. |
| mc-quantity-selector__button-right | Increment element | Также примените mc-button--square и --bordered. |
| Small composition | mc-text-input--s + mc-button--s | Изменяйте всю группу согласованно. |
| is-disabled | Visual state class | Для фактического поведения используйте вместе с нативным атрибутом disabled. |
### Сборка и настройка

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| postcssPluginConfig | @mozaic-ds/css-dev-tools/postcssPluginConfig | Список необходимых плагинов. |
| Parser | postcss-scss | Изучите исходный код SCSS. |
| Production environment | MOZAIC_ENV=production | Позволяет настраивать плагины для производственной среды. |
### Вспомогательные классы интервалов

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| mu-mb-100 | 16px bottom margin | Расстояние между компонентами. |
| mu-pl-050 | 8px left padding | Вспомогательный интервал. |
| make-space-util(m, t, 075) | Top margin at mu075 | Сгенерировать выбранный вспомогательный класс. |
## Полное руководство по дизайн-системе Adeo Mozaic

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система 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 и визуальный класс синхронизированы.

Пустое или дробное введённое значение не преобразуется молча в правдоподобный список материалов. При отправке отображается допустимый диапазон, а фокус перемещается в поле. Последующее редактирование сбрасывает предыдущий результат, поскольку он был рассчитан для иного количества. Расчёт для полки — вымышленные данные примера, а не структурная или закупочная рекомендация.

1. Считайте введённое значение, не принимая пустую строку за ноль.

2. Проверьте, что значение целое и попадает в диапазон, прежде чем рассчитывать примерные количества.

3. Обновите обе граничные кнопки и доступное для вспомогательных технологий сообщение об ошибке.

4. Создавайте локальный снимок только после успешной проверки.

Прочитать вспомогательную спецификацию

## Дизайн-система 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 и взаимодействие, ограниченное локальным запуском. В отдельном блоке кода приведены реальные классы библиотеки и связь со сборкой.

Прочитать вспомогательную спецификацию

## Примеры компонентов дизайн-системы Adeo Mozaic

### Полноценный автономный интерактивный пример

Сохраните весь документ как index.html и откройте его в браузере. Исходная автономная интерпретация магической единицы Mozaic и элемента управления количеством среднего размера для HTML/CSS; оригинальная иллюстрация и палитра приложения, а не CSS нативной библиотеки.

```
<!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 обеспечивает проверку целых чисел, отключение на границах диапазона и сводку, доступную только локально.

```
<!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 сохраняют своё значение, а пользовательская проверка обрабатывает пустые и дробные значения.

- Изменение количества делает предыдущий подготовленный снимок недействительным.

## Настройка 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';
```

### Запрос для вашего проекта

```
Создайте композицию SCSS для Mozaic, подключив settings-tools/all-settings перед text-input, button и quantity-selector. Обеспечьте элементы управления среднего размера высотой 48px на небольших экранах, отключайте граничные кнопки штатными средствами, проверяйте введённые целые числа и формируйте сводку только локально. Используйте документированный конвейер PostCSS и различайте тему Leroy Merlin по умолчанию и пресет ADEO.
```

## Источники и область применения дизайн-системы Adeo Mozaic

Независимый справочник по OpenDesign и Mozaic. Пример не является витриной ADEO или Leroy Merlin, реальным заказом или рекомендацией по конструкции. В снимках документации указаны разные версии.

- Установка Пакеты, Node и Dart Sass.

- Конфигурация PostCSS Обязательная последовательность плагинов.

- Импорты SCSS Зависимость настроек и порядок импорта.

- Магическая единица Фактические шаги интервалов.

- Стили основного текста Задокументированные размеры абзацев.

- Кнопки Размеры и иерархия действий.

- Использование количества Адаптивный размер и предполагаемое назначение.

- Код количества Структура BEM и импорты зависимостей.

- Настройка токенов Тема по умолчанию и переопределения.

- Вспомогательные классы интервалов Утилитарные классы и отступы компонентов.

## Дизайн-система Adeo Mozaic: связанные ресурсы

### Adobe Spectrum

Изучите Spectrum v3 от React на примере таблицы творческих ресурсов с возможностью выбора и панели настройки экспорта. Разберитесь в темах Provider и масштабе полей ввода, поддерживаемых стилевых свойствах, коллекциях с ключами и различиях между v3 и более новой реализацией Spectrum 2.

### Alaska Airlines Auro

Изучите тему Alaska от Auro на примере реальных семантических цветовых и типографических токенов, типографики на основе классов и встроенного компонента рейса. Две исходные записи о рейсах демонстрируют локальную фильтрацию и выбор, не изображая инвентарь авиакомпании или бронирование.

### Arco Design

Создайте селектор разделов отчёта с управляемым компонентом Transfer от Arco. Изучите реальные шкалы отступов и размеров, принципы именования переменных CSS, семантические поверхности и различие между выбором строк и их перемещением.


- [Справочник по реализации](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Источник](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [Источник](https://mozaic.adeo.cloud/components/buttons/)
- [Источник](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [Источник](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Источник](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [Источник](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/components/buttons/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [Прочитать вспомогательную спецификацию](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)
- [Справочник по коду](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Справочник по коду](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Установка Пакеты, Node и Dart Sass.](https://mozaic.adeo.cloud/get-started/developers/installation/)
- [Конфигурация PostCSS Обязательная последовательность плагинов.](https://mozaic.adeo.cloud/get-started/developers/installation/postcss/)
- [Импорты SCSS Зависимость настроек и порядок импорта.](https://mozaic.adeo.cloud/get-started/developers/installation/import/)
- [Магическая единица Фактические шаги интервалов.](https://mozaic.adeo.cloud/foundations/spacing/magic-unit/)
- [Стили основного текста Задокументированные размеры абзацев.](https://mozaic.adeo.cloud/foundations/typography/body-styles/)
- [Кнопки Размеры и иерархия действий.](https://mozaic.adeo.cloud/components/buttons/)
- [Использование количества Адаптивный размер и предполагаемое назначение.](https://mozaic.adeo.cloud/components/form/quantity-selector/)
- [Код количества Структура BEM и импорты зависимостей.](https://mozaic.adeo.cloud/components/form/quantity-selector/code/)
- [Настройка токенов Тема по умолчанию и переопределения.](https://mozaic.adeo.cloud/get-started/developers/customize-tokens/)
- [Вспомогательные классы интервалов Утилитарные классы и отступы компонентов.](https://mozaic.adeo.cloud/foundations/spacing/margin-and-paddings/code/)