Вращение оттенка элемента (filter-hue-rotate)link

https://dev.ru.simai.io/ru/ui/utility/filter/filter-hue-rotate.php

Данный модификатор позволяет управлять вращением оттенка (цветового тона) элемента.

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

Класс	Значение
.hue-rotate-0	filter: hue-rotate(0deg)
.hue-rotate-15	filter: hue-rotate(15deg)
.hue-rotate-30	filter: hue-rotate(30deg)
.hue-rotate-60	filter: hue-rotate(60deg)
.hue-rotate-90	filter: hue-rotate(90deg)
.hue-rotate-180	filter: hue-rotate(180deg)
.-hue-rotate-15	filter: hue-rotate(-15deg)
.-hue-rotate-30	filter: hue-rotate(-30deg)
.-hue-rotate-60	filter: hue-rotate(-60deg)
.-hue-rotate-90	filter: hue-rotate(-90deg)

Описаниеlink

Модификатор hue-rotate-{градусы} изменяет оттенок всего элемента на заданное количество градусов. Положительные значения вращают цветовой тон по часовой стрелке, отрицательные — против.

Можно использовать hover:hue-rotate-15 или любой другой класс, чтобы изменение оттенка происходило при наведении курсора.

Синтаксисlink

• hue-rotate-{число} — вращение оттенка на указанный угол в градусах.
• Можно использовать hover:hue-rotate-{число} для изменения оттенка при наведении.

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

<!-- Элемент без изменения оттенка -->
<div class="hue-rotate-0 p-4 bg-primary color-on-surface-inverse">Исходный цвет</div>

<!-- Изменение оттенка при наведении -->
<div class="hue-rotate-0 hover:hue-rotate-90 p-4 bg-secondary transition">
  Наведи, чтобы оттенок изменился
</div>

Замена старых классов на новыеlink

Старый класс	Новый класс
.hue-rotate-1	.hue-rotate-15
.hue-rotate-2	.hue-rotate-30
.hue-rotate-3	.hue-rotate-60
.hue-rotate-4	.hue-rotate-90
.hue-rotate-5	.hue-rotate-180