Основы

Визуальный язык как данные: 197 токенов, прочитанных из установленного пакета и сгруппированных так же, как в нём. Каждая страница отвечает на два вопроса — зачем эта шкала и что в ней сегодня.

Разделы

• Обзор

  Четыре слоя, и каждый из них — данные, а не решение, принятое внутри компонента. Примитивы задают шкалы, роли придают им смысл, производные следуют за ролями по формуле, а покомпонентные токены настраивают один компонент, не трогая остальные.

• Токены8 токенов

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

• Цвет96 токенов

  Цвет — то место, где дизайн-систему чаще всего принимают за палитру. Здесь нет цветов, здесь роли: поверхность, текст на ней, заливка, текст на заливке. Одна и та же роль несёт в каждой теме своё значение, и оба стоят в таблице.

• Типографика37 токенов

  Два семейства, одна шкала кеглей и отдельная шкала для контролов. Вторая существует потому, что у кнопки и абзаца нет общего ритма: текст читают, в контрол целятся, и размеры отвечают на разные вопросы.

• Отступы17 токенов

  Одна шкала на все зазоры, отступы и смещения системы. Шаг намеренно нелинейный: у нуля глаз различает два пикселя, у сорока — уже нет, и линейная шкала потратила бы половину значений там, где их никто не отличит.

• Скругления9 токенов

  Девять радиусов, и один из них — радиус контрола: значение, которым кнопка, поле и селект держатся одной семьёй. Меняется оно — меняется весь набор контролов сразу.

• Тени4 токенов

  Четыре уровня, и они семантические, а не декоративные: тень говорит, что над чем. Выпадающая панель выше карточки, модальное окно выше страницы — уровень следует за слоем, а не за настроением.

• Движение5 токенов

  Длительности и кривые, и одно правило, которое закрывает остальное: система уважает «уменьшить движение» целиком, одним блоком в базовом слое, а не покомпонентно.

• Иконки4 токенов

  Шкала размеров, а не набор иконок. Свои иконки — стрелку селекта, крестик очистки, галочку, спиннер — пакет компилирует в сборку; ваши приходят либо Vue-компонентом, либо классом, который порождает ваша сборка.

• Состояния18 токенов

  Hover, active, disabled, invalid. Ни одно из этих значений не записано: каждое — формула от роли, поэтому перекрашенная роль тянет свои состояния за собой. Таблица ниже показывает формулу и то, во что она превращается в обеих темах.

• Адаптивность10 токенов

  Точки останова и ширины контейнеров. Система не раскладывает ваши страницы — она даёт одни и те же числа всем компонентам, которым нужно знать, что стало узко, чтобы таблица и боковая панель понимали «узко» одинаково.

• Слои7 токенов

  Шкала слоёв с шагом пятьдесят. Шаг и есть смысл: между соседними слоями остаётся место чужому виджету, баннеру согласия или чату, которому нужно встать между ними, — и ничего не приходится перенумеровывать.

Значения приходят из @feugene/granularity 0.41.0, tokens/*.json. Ни одно из них не набрано руками.