Appearances

Most Taiga UI components rely on Appearance directive to represent their interactive state — you will find appearance input on many components, such as Button , Chip , Notification etc.

When you include Taiga UI theme what you do is define light and dark mode values for CSS variables and make built-in appearances, such as primary or outline , available to use in components.

You can easily create your own appearances with the help of mixins (both LESS and SCSS) to define style rules for particular states:

• .appearance-hover(@ruleset)
• .appearance-active(@ruleset)
• .appearance-disabled(@ruleset)
• .appearance-focus(@ruleset)

Don't forget to import @import '@taiga-ui/core/styles/taiga-ui-local';