in 4.12.0 Icons behaviour is broken

[vytautas-pranskunas-]

Not sure what was changed in latest release but my icons started to work not as before.
it was added color and animations on ::after.. this way my icons became invisible. After i added color:inherit tehy started to inherit desired color from tui-icon

another thing is hover

• on the image you can see icon on the right with normal hover state - blue and on the left side you see when i hover idon with my mouse. First icon becomes blue as expected and after dissapears at all. I noticed that on nouse hover tui-icon gets data-state="hover"

how to fix that?

[waterplea]

Appearances were revamped, maybe it affected you. Could you please create a stackblitz and add a screenshot how it was supposed to work?

[vytautas-pranskunas-]

upps it seams that i forgot to add a screenshot.

with all my respect.. i just do not have time to create stackblitz too all issues.
This issue is not special i just have this styling in theme

[tuiAppearance][data-appearance='icon'] {
    --tui-duration: var(--duration-short);
    font-size: var(--h1-font-size);
    color: var(--color-neutral-white);
    cursor: pointer;

    &::after {
        color: inherit;
    }

    &.dark {
        color: var(--color-neutral-800);
    }
}

so i do not ovveride hover. Hover just works like that.. on mouse over it turns to hover color and then gone. p.s. if i do not override ::after it is gone from the begining because ::after color is color: var(--tui-text-tertiary); which is transparant. So i believe same color transparant color is applied when hover animation is finished

[waterplea]

Since you did not override hover — the built-in hover kicks in. If you want to completely override a built-in appearance, you should take care of all the states, here's how icon appearance looks like:

[tuiAppearance][data-appearance='icon'] {
    color: var(--tui-text-primary);

    &::before,
    &::after {
        .transition(color);

        color: var(--tui-text-tertiary);
    }

    .appearance-hover({
        &:before,
        &:after {
            color: var(--tui-text-secondary);
        }
    });

    .appearance-active({
        &:before,
        &:after {
            color: var(--tui-text-primary);
        }
    });
}

The .appearance-xxx mixins are available from taiga-ui-local in both LESS and SCSS. You can also probably just add !important to your color: inherit; if you do not want the color to change at all. Keep in mind hover and active stats are only triggered for interactive elements, such as buttons or links to encourage proper accessibility. If you are using an icons as tuiTooltip — hover state is manually enabled when bubble is visible.

[vytautas-pranskunas-]

ok i was able to override it like you said but i was expecting something simpler like local vhange of hover state like i was doing before for that only place

tui-icon:hover {
            color: colors.$color-primary-500;
        }

is does still possible? because it seems like appereances takes over. Is this correct?

&::before,
    &::after {
        color: inherit;
    }

    @include appearance-hover {
        &::before,
        &::after {
            color: inherit;
        }
    }

    @include appearance-active {
        &::before,
        &::after {
            color: inherit;
        }
    }

[waterplea]

After we revamped appearances some of them have text color different from icons, icons are in ::before and ::after so if you write:

tui-icon:hover::after {
  color: colors.$color-primary-500 !important;
}

it would work, but you would also need !important simply because appearance only applies :hover rule for specific cases like @media (hover: hover) and only interactive tags :is(a, button, select, textarea, input, label) so built-in styles just have higher specificity.

https://taiga-ui.dev/directives/appearance#bundled

To sum it up, appearance takes care of:

1. Background color
2. Foreground color
3. Icons color (through ::before/::after elements)

Previously foreground and icon always had the same color so it worked for you.

[vytautas-pranskunas-]

thanks