Скругления
Девять радиусов, и один из них — радиус контрола: значение, которым кнопка, поле и селект держатся одной семьёй. Меняется оно — меняется весь набор контролов сразу.
На этой странице
Формы: радиусы и совместимые алиасы
| Токен | Значение | Роль |
|---|---|---|
--radius--radius | 0.5rem | Совместимый alias базового радиуса для интеграций, ожидающих shadcn-style token contract. |
--gr-radius-none--gr-radius-none | 0px | Радиус скругления none для углов компонентов и поверхностей. |
--gr-radius-xs--gr-radius-xs | 3px | Радиус скругления xs — микроэлементы: подсветка совпадения в поиске, кнопка очистки внутри контрола. |
--gr-radius-sm--gr-radius-sm | 4px | Радиус скругления sm для углов компонентов и поверхностей. |
--gr-radius-control--gr-radius-control | 6px | Радиус контрола и мелкой интерактивной детали внутри него: оболочка поля, чип, кнопка-крестик, фокус-кольцо ссылки, тултип слайдера. |
--gr-radius-control-xs--gr-radius-control-xs | var(--gr-radius-control) | Скругление поля-коробки на ступени xs: GrInput, GrSelect, GrTextarea и остальные поля. Тема без лестницы ставит var(--gr-radius-control). |
--gr-radius-control-sm--gr-radius-control-sm | var(--gr-radius-control) | Скругление поля-коробки на ступени sm: GrInput, GrSelect, GrTextarea и остальные поля. Тема без лестницы ставит var(--gr-radius-control). |
--gr-radius-control-md--gr-radius-control-md | var(--gr-radius-control) | Скругление поля-коробки на ступени md: GrInput, GrSelect, GrTextarea и остальные поля. Тема без лестницы ставит var(--gr-radius-control). |
--gr-radius-control-lg--gr-radius-control-lg | var(--gr-radius-control) | Скругление поля-коробки на ступени lg: GrInput, GrSelect, GrTextarea и остальные поля. Тема без лестницы ставит var(--gr-radius-control). |
--gr-input-focus-ring-width--gr-input-focus-ring-width | 2px | Толщина кольца фокуса вокруг поля ввода и выбора. Цвет — --gr-ring, у ошибки — --gr-invalid-ring. |
--gr-radius-md--gr-radius-md | 8px | Радиус скругления md для углов компонентов и поверхностей. |
--gr-radius-lg--gr-radius-lg | 12px | Радиус скругления lg для углов компонентов и поверхностей. |
--gr-radius-xl--gr-radius-xl | 16px | Радиус скругления xl для углов компонентов и поверхностей. |
--gr-radius-overlay--gr-radius-overlay | var(--gr-radius-xl) | Скругление всплывающей панели у поля: список GrSelect, GrTreeSelect, GrAutocomplete, панель GrPopover. Окно и палитра команд скругляются своими токенами. |
--gr-radius-full--gr-radius-full | 9999px | Радиус скругления full для углов компонентов и поверхностей. |