Акцентный цвет (accent-color)link

https://dev.ru.simai.io/ru/ui/utility/form/accent-color.php

Используя модификаторы акцентного цвета accent-color в SIMAI Framework, вы можете задавать цвет акцентирования для элементов управления формы, таких как чекбоксы и радиокнопки. Это позволяет легко стилизовать акцентные элементы, отражая выбранную цветовую палитру и улучшая визуальную согласованность интерфейса.

Классы и их значенияlink

Класс	Значение
.accent-transparent	accent-color: var(`--sf-transparent`);
.accent-current	accent-color: currentColor;
.accent-on-surface	accent-color: var(`--sf-on-surface`);
.accent-primary	accent-color: var(`--sf-primary`);
.accent-secondary	accent-color: var(`--sf-secondary`);
.accent-tertiary	accent-color: var(`--sf-tertiary`);
.accent-error	accent-color: var(`--sf-error`);
.accent-warning	accent-color: var(`--sf-warning`);
.accent-success	accent-color: var(`--sf-success`);

Описаниеlink

Эти модификаторы задают акцентный цвет для элементов управления формами, таких как чекбоксы или радиокнопки. С помощью варианта hover: вы можете изменять акцентный цвет при наведении курсора, создавая интерактивное пользовательское взаимодействие.

Синтаксисlink

accent-{color} – установить акцентный цвет.
hover:accent-{color} – установить акцентный цвет при наведении.

Пример использованияlink

<label>
    <input type="checkbox" class="accent-primary" checked> Акцент по умолчанию
</label>
<label>
    <input type="checkbox" class="hover:accent-error" checked> Акцент при наведении
</label>