Corner Radius

Система скруглений в SDDS.

Система токенов Corner Radius определяет радиус скругления углов компонентов. Обеспечивает визуальную согласованность и передаёт характер бренда — от строгого (0) до мягкого (Rounded).

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

См. также: sizes.md — размерная шкала, theming.md — система тематизации на токенах.

1. Основные принципы

Система токенов скруглений решает две задачи:

• Единый язык — дизайнеры и разработчики используют одни и те же названия и значения, не придумывая числа вручную.
• Визуальная согласованность — компоненты одного размера выглядят согласованно. Например, в размере L у Button, TextField и Select (триггер и выпадающее меню) одинаковый радиус 14px.

2. CornerRadius Tokens — токены скруглений

Набор значений, определяющих радиус скругления углов у компонентов.

Raw Value  →  Base Token  →  Semantic Token    →  Component
14px          CR14           CRL                Button L
                                                  Chip XL
                                                  Notification M

3. Базовая шкала (Base Tokens)

Примитивы/базовые токены — это набор допустимых числовых значений. Все семантические токены ссылаются только на эти числа. Новые промежуточные значения не вводятся.

4. Семантические токены (Semantic Tokens)

Семантические токены связывают размер компонента с соответствующей ступенью шкалы скруглений.

Компоненты: TextField, Button, Select (триггер + меню), Autocomplete, DatePicker, Accordion, Range и т.д.

5. Вычисляемые значения

5.1 Компактные и вложенные элементы, малые оверлеи

Для небольших самостоятельных элементов, зависимых компонентов и миниатюрных оверлеев, где крупный радиус выглядит избыточным, используется правило «−2»:

• токен скругления внутренних плашек, ListItems, подсветки и хайлайтов внутри компонента вычисляется вычитанием из токена родительского компонента с шагом 2px;
• если значение есть в Semantic Token — используем его.

Компоненты: Tooltip, Chip, прямоугольный Avatar, ListItem (строки списков), EmbeddedChip и т.д.

Пример: компонент Chip

Исключения — индикаторные компоненты

Для Badge и аналогичных компонентов радиус ограничен их высотой — он равен ±¼ высоты и вписывается в значения семантических или вычисляемых токенов. Такое исключение нужно, чтобы форма компонента непреднамеренно не становилась «таблеткой».

Пример: Badge

S и L незначительно превышают ¼ — на 1px. Это не ошибка, а следствие того, что шкала Base Tokens имеет шаг 2px, а высоты компонентов дают нечётные значения (5 и 7px), которых в шкале нет.

5.2 Самостоятельные поверхности и оверлеи, элементы-«обёртки»

Для компонентов с собственным визуальным весом, которые не привязаны к конкретному триггеру как его прямая часть, а также для элементов-обёрток компонентов с токенами скругления из базовой сетки используется правило «+2»:

• значение токена вычисляется прибавлением значения с шагом 2px к Semantic Token;
• если значение есть в Semantic Token — используем его.

Компоненты: Card, Popover, Notification, Toast, Tour, Modal и т.д.

Пример: компонент Tour

Пример: компоненты Modal, Dropzone

6. Правила применения

• Используйте токены. Не вводите произвольные промежуточные значения (например, 11px или 13px). Используйте только значения из базовой шкалы Base tokens.
• Интерактивные пары. Триггер и его привязанная панель используют один и тот же токен в рамках размера. Нельзя задавать триггеру и панели разные значения. Например, пара «кнопка и дропдаун» в компоненте Select.
• Правило «−2». Токен скругления внутренних плашек, ListItems, подсветки и хайлайтов внутри компонента вычисляется вычитанием из токена родительского компонента с шагом 2px.
• Правило «+2». Если компонент с токеном скругления из базовой сетки оборачивается в другой элемент, то для согласования скруглений значение для обёртки вычисляется прибавлением с шагом 2px к токену родительского компонента.
• Индикаторные компоненты. Для Badge и аналогичных компонентов радиус ограничен высотой: значение не превышает ¼ высоты компонента. Используются нижние ступени шкалы Semantic Tokens. Это не нарушение системы — осознанное ограничение, продиктованное формой компонентов.
• Обрезка контента. Контейнеры со скроллом или подсветкой должны визуально обрезать содержимое по своей форме — контент не должен «выпирать» за скруглённые углы.
• Хвостики и стрелки. Хвостики (arrow) у Tooltip, Popover, Tour не имеют собственного скругления. Корпус компонента сохраняет свой токен без изменений.
• Тени и эффекты. Тени, обводки и внутренние эффекты не должны визуально «срезать» углы. Они должны повторять форму контейнера.