Радиус скругления

Радиус скругления для различных контролов можно переопределить. Для этого используются следующие переменные:

  • --g-border-radius-xs: 3px;
  • --g-border-radius-s: 5px;
  • --g-border-radius-m: 6px;
  • --g-border-radius-l: 8px;
  • --g-border-radius-xl: 10px;
  • --g-border-radius-2xl: 16px.

Corner radius

Переопределить значения можно в переменных.

Переменные используются в контролах соответствующих размеров. При изменении значения переменной поменяется радиус скругления у всех контролов того же размера. Контролы, на которые влияет эта переменная, перечислены в Figma-библиотеке на странице Branding. У разных контролов разный диапазон размеров, из-за чего наборы контролов могут не совпадать. Например, у лейблов нет размеров начиная с L и крупнее, поэтому переменные начиная с --g-border-radius-l в этом компоненте не используются и на его внешний вид никак не влияют.

Corner radius

Для check-button радиусы скругления вложенного элемента зависят от токенов и вычисляются по формуле «значение токена – 3» , где 3 — расстояние между внутренним и внешним элементом. В текущей версии вычисления необходимо выполнять своими силами, после чего вносить результаты в токены:

Corner radius

Corner radius

НазадТипографика
ДалееБрендирование