Missing appeareances

[vytautas-pranskunas-]

Hi,

I have implemented password input but i need to change the hint styling according to our style guide. But i cannot find sample appereance like it is for textfield, checkbox and button. I have tried

`
[tuiAppearance][data-appearance='my-hint'] {
@include transition(all, var(--duration));

color: #fff;
background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
font-weight: bold;

}

tuiHintOptionsProvider({ appearance: 'my-hint' }),
`

but it has no effect.

In order to widly addapt this library i think appereance example should stick to each component because many companies does not follow "out of the box" styling, instead they are having company style guides and styling should not take days to implement.

for now any help with sample appereances for most common components would be appriciatet
hint, radiobutton and others

[waterplea]

You need to remove [tuiAppearance] selector as it is not appearance directive there, just the [data-appearance] attribute. Hints, dropdowns and dialogs are not using tuiAppearance directive because it is meant for interactive elements with hover/disabled/etc. states, while in hints it acts mostly like a custom class drilling, just using the same name for the uniformity sake.

[vytautas-pranskunas-]

Thank you

[vytautas-pranskunas-]

i have changed it to:

`
[data-appearance='parama-hint'] {
@include transition(all, var(--duration));

color: #fff;
background: linear-gradient(43deg, #4158d0 0%, #c850c0 46%, #ffcc70 100%);
font-weight: bold;

}
`

but does not seem that it has some effect...
would you mind also sharing default hint styling?

[waterplea]

Check this demo out:
https://stackblitz.com/edit/angular-m95psp
Probably your styles just have the same specificity, since it's an attribute selector, same as in built-in hint styles, and if your styles are processed earlier — the built-in hint styles are added to HEAD after so they take precedence.

[vytautas-pranskunas-]

ok .. it is interesting that you are using double attribute selector: [data-appearance='parama-hint'][data-appearance='parama-hint']
with this it is working. Thank you

[waterplea]

It's an easy way to bump specificity without !important. Also you can reply to comments instead of creating a new one ;)