Дизайн-система Amsterdam.

Дизайн-система Amsterdam: компонент и тема оформления отдельно

Корректно используйте слой с открытым исходным кодом

Amsterdam публикует компонент CSS отдельно, поэтому его контракт классов можно реализовать вне React. Таблица стилей зависит от пользовательских свойств CSS; если подключить её без полной темы оформления, важные размеры и цвета останутся неопределёнными. Поэтому в этом примере таблица стилей нативного переключателя используется вместе с полной исходной нейтральной конфигурацией.

В репозитории пакеты с открытым исходным кодом отделены от фирменных ресурсов. У изученного пакета токенов 4.3.0 есть собственное лицензионное уведомление, исключающее его из лицензии открытого исходного кода. Для Amsterdam Sans, значков и логотипа города также действуют особые ограничения. В этом руководстве они упоминаются только для контекста: мы не распространяем эти ресурсы и не утверждаем, что общедоступная загрузка из npm даёт неограниченные права на использование фирменного оформления.

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

Дизайн-система Amsterdam: полная нейтральная конфигурация

Укажите все свойства, необходимые компоненту

В справочной таблице перечислены все переменные, используемые в выбранной таблице стилей переключателя. Для ширины, размеров бегунка, ширины границы, цветов, смещения контура, курсора и оформления при наведении заданы явные значения. Это исходные значения для данного примера, а не скопированные токены дизайн-системы Amsterdam. Благодаря этому пример можно воспроизвести, не подбирая недостающие параметры темы наугад.

Ширина дорожки — 50px, размер бегунка — 22px, ширина границы — 3px. Смещение бегунка во включённом состоянии рассчитывается на основе его ширины и ширины границы. Если изменить только ширину дорожки, бегунок может сместиться неправильно; изменяйте связанные размеры вместе и проверяйте оба состояния.

:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}

Справочник по коду

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

Дизайн-система Amsterdam: структура нативного переключателя

Подпись должна идти сразу после поля ввода

Реализация React создаёт обёртку, поле ввода и пустую связанную подпись. В таблице стилей CSS используются селекторы соседних элементов, чтобы оформлять подпись в зависимости от состояний фокуса, checked и disabled поля ввода. Сохраняйте такой порядок в обычной реализации на HTML: если вставить описание между полем ввода и подписью, эти селекторы перестанут работать.

Настоящее поле ввода — это флажок с role="switch". Оно сохраняет нативное свойство checked и поведение при работе с клавиатурой. Поскольку видимая подпись не содержит текста, укажите доступное имя с помощью aria-label или aria-labelledby. В этом примере используется видимый заголовок настройки, а её пояснение связывается с помощью aria-describedby.

<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>

Справочник по коду

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

Дизайн-система Amsterdam: настройки применяются сразу

Переключатель меняет текущее представление

В исходном коде компонента Switch задано поведение двоичной настройки с немедленным применением. Предварительный просмотр ему соответствует: увеличение текста меняет размер шрифта в статье, усиление контраста меняет цвет текста и обводку, а уменьшение анимации убирает короткий эффект появления метки. Здесь нет кнопки «Сохранить», которая создавала бы ложное впечатление, будто эти локальные настройки отправляются в сервис учётной записи.

Кнопка «Восстановить настройки по умолчанию» сбрасывает все три встроенных состояния checked и возвращает статье исходные классы. В сообщении о состоянии перечислены включённые настройки. После перехода на другую страницу или перезагрузки ничего не сохраняется. В производственном сервисе настроек можно реализовать сохранение, но нужно указать, на что влияет настройка: на эту страницу, устройство или учётную запись.

1. Включите «Увеличить текст» и проверьте размер абзаца в статье рядом.
2. Перейдите к пункту «Усилить контраст» и нажмите пробел, чтобы переключить его с клавиатуры.
3. Восстановите настройки по умолчанию и убедитесь, что все три переключателя и статья вернулись к исходному состоянию.

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

Дизайн-система Amsterdam: клавиатура, фокус и анимация

Сохраните доступ к встроенному полю ввода

Стили уменьшают визуальную ширину поля, но сохраняют сам элемент управления. Селектор фокуса задаёт обводку следующей метке. Если заменить поле декоративным div, будут утрачены встроенная семантика формы и доступность с клавиатуры, а поддержку клавиатуры придётся реализовать отдельно. Не применяйте к полю ввода display:none.

Встроенная таблица стилей ограничивает переходы условием prefers-reduced-motion:no-preference. Эффект в статье также учитывает настройку операционной системы независимо от локального переключателя. Пользователю, запросившему уменьшение анимации на системном уровне, не должно требоваться сначала искать дополнительный переключатель, чтобы интерфейс стал спокойнее.

• Считайте свойство checked единственным достоверным источником состояния и не придумывайте не связанную с ним визуальную индикацию включения.
• Задайте каждой настройке устойчивое имя и свяжите пояснение с полем ввода.
• После изменения геометрии или цветов темы проверьте состояния выключенного и включённого переключателя, фокусировки и блокировки.

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

Дизайн-система Amsterdam: компоновка предварительного просмотра настроек чтения

Покажите эффект рядом с элементом управления

В примере используется компоновка в два столбца: эффект каждой настройки виден в статье. При ширине менее 700px, заданной для этого приложения, элементы управления располагаются над предварительным просмотром. Максимальная ширина 900px и промежуток 32px — решения для этой компоновки, а не подтверждение наличия общегородского токена сетки.

Для нейтрального шрифта используется Arial. Основной текст набран размером 18px с межстрочным интервалом 1.5; режим увеличенного текста меняет только размер шрифта в статье — на 22px. Это пример настройки приложения, а не замена масштабированию браузера и не утверждение, что именно такие размеры предписаны системой Amsterdam. Длинные подписи переносятся, не уменьшая ширину встроенного переключателя.

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

Дизайн-система Amsterdam: интеграция с CSS или React

Выберите уровень реализации

В существующем приложении на React проверенный компонент Switch принимает стандартные атрибуты поля ввода и передаёт ref этому полю. Для контролируемого использования задайте checked и onChange; для неконтролируемого можно задать defaultChecked. Компонент не предоставляет хранилище данных приложения или API настроек учётной записи.

Для этого самостоятельного примера на HTML нужен только Switch из библиотеки с открытым исходным кодом CSS. Инструкции по настройке и полный код дополняют его необходимой конфигурацией темы и локальной логикой состояния. Установщик пакета может загрузить проприетарные ресурсы как зависимости; их наличие на диске не даёт права импортировать их или включать в поставку. В образце содержатся только выбранный CSS и его лицензия на открытый исходный код.

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

Дизайн-система Amsterdam: внедрение и ограничения

Не путайте визуальное сходство с принадлежностью к системе

Городская дизайн-система создана для единообразия и доступности муниципальных цифровых продуктов. Её код с открытым исходным кодом можно изучать и адаптировать в соответствии с лицензией, но к логотипу, проприетарному шрифту и иконкам применяются отдельные условия. В предварительном просмотре используются оригинальный брендинг и нейтральное содержимое, чтобы его не приняли за сервис Amsterdam.

Подтверждённая область применения — один встроенный компонент с полной пользовательской темой и содержательным локальным поведением. Это не полная переработка городской темы. Если реальный продукт использует более широкий пакет CSS, необходимо определить и протестировать все переменные, нужные дополнительным компонентам, а не распространять конфигурацию темы Switch на не связанные с ним элементы управления.

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

Дизайн-система Amsterdam: примеры компонентов

:root {
  --ams-switch-label-border-width:3px;
  --ams-switch-background-color:#666;
  --ams-switch-thumb-background-color:#fff;
  --ams-switch-thumb-inline-size:22px;
  --ams-switch-thumb-block-size:22px;
  --ams-switch-inline-size:50px;
  --ams-switch-checked-background-color:#286044;
  --ams-switch-disabled-background-color:#aaa;
  --ams-switch-disabled-cursor:not-allowed;
  --ams-switch-cursor:pointer;
  --ams-switch-outline-offset:4px;
  --ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;
}

<strong id="reading-label">Larger text</strong>
<p id="reading-hint">Increase the article text size immediately.</p>
<div class="ams-switch">
  <input class="ams-switch__input" id="reading" type="checkbox" role="switch"
    aria-labelledby="reading-label" aria-describedby="reading-hint">
  <label class="ams-switch__label" for="reading"></label>
</div>

<!doctype html><html lang="en"><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Reading preferences</title><link rel="stylesheet" href="vendor/amsterdam-switch-4.4.0/switch.css"><style>:root{--ams-switch-label-border-width:3px;--ams-switch-background-color:#666;--ams-switch-thumb-background-color:#fff;--ams-switch-thumb-inline-size:22px;--ams-switch-thumb-block-size:22px;--ams-switch-inline-size:50px;--ams-switch-checked-background-color:#286044;--ams-switch-disabled-background-color:#aaa;--ams-switch-disabled-cursor:not-allowed;--ams-switch-cursor:pointer;--ams-switch-outline-offset:4px;--ams-switch-thumb-hover-box-shadow:0 0 0 2px #fff;}*{box-sizing:border-box}body{margin:0;padding:32px 24px;font:18px/1.5 Arial,sans-serif;color:#242b28;background:#fafbf9}main{max-width:900px;margin:auto}h1{font-size:36px;line-height:1.2;margin:8px 0 16px}h2{font-size:24px;line-height:1.3}.layout{display:grid;grid-template-columns:1fr 1fr;gap:32px}.setting{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #d5ddd7;padding:20px 0}.setting p{margin:4px 0;font-size:16px}.ams-switch{flex-shrink:0}.sample{background:white;border:1px solid #d5ddd7;padding:24px}.sample.large{font-size:22px}.sample.high{color:#000;border:3px solid #000}.sample .meta{font-size:.85em;color:inherit}.badge{display:inline-block;background:#e7eee8;padding:4px 8px}.sample:not(.quiet) .badge{animation:appear .3s ease}@keyframes appear{from{opacity:.2}to{opacity:1}}button{font:inherit;border:1px solid #286044;background:#fff;color:#286044;padding:10px 16px;cursor:pointer}button:focus-visible{outline:3px solid #286044;outline-offset:3px}footer{font-size:14px;margin-top:32px;border-top:1px solid #d5ddd7;padding-top:20px}#status{min-height:1.5em}@media(max-width:700px){body{padding:24px 16px}.layout{grid-template-columns:1fr}h1{font-size:30px}}@media(prefers-reduced-motion:reduce){.sample .badge{animation:none!important}}</style><main><small>PERSONAL READING VIEW</small><h1>Make this page easier to read</h1><p>Settings apply immediately to the preview. They are not saved after you leave.</p><div class="layout"><section aria-label="Reading preferences"><div class="setting"><div><strong id="large-label">Larger text</strong><p id="large-hint">Increase the article text size.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="large" aria-labelledby="large-label" aria-describedby="large-hint"><label class="ams-switch__label" for="large"></label></div></div><div class="setting"><div><strong id="high-label">Stronger contrast</strong><p id="high-hint">Use black text and a stronger outline.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="high" aria-labelledby="high-label" aria-describedby="high-hint"><label class="ams-switch__label" for="high"></label></div></div><div class="setting"><div><strong id="quiet-label">Reduce preview motion</strong><p id="quiet-hint">Remove the short badge appearance effect.</p></div><div class="ams-switch"><input class="ams-switch__input" type="checkbox" role="switch" id="quiet" aria-labelledby="quiet-label" aria-describedby="quiet-hint"><label class="ams-switch__label" for="quiet"></label></div></div><button id="reset">Restore defaults</button><p id="status" role="status">Default reading settings.</p></section><article class="sample" id="sample"><span class="badge">Reading preview</span><h2>A quieter place to read</h2><p>A community reading room offers shared tables, individual seats and a small collection of reference books.</p><p>Before visiting, check opening hours and ask about any facilities you need.</p><p class="meta">Original example content · no external service</p></article></div><footer>Native Amsterdam Switch CSS 4.4.0 with an original neutral token configuration. No proprietary Amsterdam fonts, icons, logos or theme tokens. Original local preference behavior.</footer></main><script>const ids=['large','high','quiet'];function apply(){const enabled=[];ids.forEach(id=>{const on=document.getElementById(id).checked;document.querySelector('#sample').classList.toggle(id,on);if(on)enabled.push(document.querySelector('#'+id+'-label').textContent)});document.querySelector('#status').textContent=enabled.length?enabled.join(', ')+'.':'Default reading settings.'}ids.forEach(id=>document.getElementById(id).onchange=apply);document.querySelector('#reset').onclick=()=>{ids.forEach(id=>document.getElementById(id).checked=false);apply()};</script></html>