search
Особенности использования
Для роли Disable применяются полупрозрачные цвета, что позволяет использовать их поверх различных фонов с разным уровнем контрастности, сохраняя при этом читаемость и чёткое восприятие.
Пример логики перехода от активных к неактивным состояниям:
- Primary → Disable
- On Primary → On Disable
- Primary Container → Disable
- On Primary Container → On Disable
- Outline Primary → Outline Disable
Такой подход сохраняет визуальную связность: если активный элемент имеет окраску Primary, его неактивное состояние будет соответствовать Disable, а для текста на Primary автоматически используется On Disable.
Для работы с ролью Disable используются следующие переменные:
| Переменная | Значение (light) | Значение (dark) |
|---|---|---|
--sf-disable |
--sf-neutral-50--alfa-12 |
--sf-neutral-90--alfa-12 |
--sf-on-disable |
--sf-neutral-50--alfa-24 |
--sf-neutral-90--alfa-24 |
--sf-outline-disable |
--sf-neutral-50--alfa-24 |
--sf-neutral-90--alfa-24 |