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:

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

Imitate material

Input example

Checkbox example

    
      <tui-textfield>
    <label tuiLabel>Input example</label>
    <input
        minlength="5"
        tuiInput
        [(ngModel)]="value"
    />
</tui-textfield>
<label
    tuiLabel
    class="tui-space_vertical-4"
>
    <input
        size="s"
        tuiCheckbox
        type="checkbox"
        [(ngModel)]="checkbox"
    />
    <small>Checkbox example</small>
</label>
<button
    tuiButton
    type="button"
>
    Submit
</button>

    
      @import '@taiga-ui/styles/utils.less';

tui-wrapper-example-1 {
    --tui-background-accent-1: #6200ee;
    --tui-background-accent-1-hover: #6e14ef;
    --tui-background-accent-1-pressed: #6e14ef;
    --tui-text-primary-on-accent-1: #fff;
}

[tuiAppearance][data-appearance='material-textfield'] {
    .transition(~'background, box-shadow');

    background: #f5f5f5;
    outline: none;
    color: rgba(0, 0, 0, 0.87);
    border-radius: 0.25rem 0.25rem 0 0;
    box-shadow: inset 0 -1px #8e8e8e;

    .appearance-hover({
        background: #ececec;
        box-shadow: inset 0 -1px #1f1f1f;
    });

    .appearance-focus({
        background: #dcdcdc;
        box-shadow: inset 0 -2px var(--tui-background-accent-1) !important;

        ~ label {
            --tui-text-primary: var(--tui-background-accent-1);
        }
    });

    &:invalid {
        --tui-background-accent-1: #b00020;

        box-shadow: inset 0 -1px var(--tui-background-accent-1) !important;

        ~ label {
            --tui-text-primary: #b00020 !important;
        }
    }
}

[tuiButton][tuiAppearance][data-appearance='material-button'] {
    .transition(all);

    border-radius: 0.25rem;
    background: var(--tui-background-accent-1);
    color: var(--tui-text-primary-on-accent-1);
    outline: none;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow:
        0 0.1875rem 0.0625rem -0.125rem rgba(0, 0, 0, 0.2),
        0 0.125rem 0.125rem 0 rgba(0, 0, 0, 0.0014),
        0 0.0625rem 0.3125rem 0 rgba(0, 0, 0, 0.12);

    .appearance-hover({
        background: var(--tui-background-accent-1-hover);
        box-shadow: 0 0.125rem 0.25rem -0.0625rem rgba(0, 0, 0, 0.2), 0rem 0.25rem 0.3125rem 0rem rgba(0, 0, 0, 0.14),
        0rem 0.0625rem 0.625rem 0rem rgba(0, 0, 0, 0.12);
    });

    .appearance-active({
        background: var(--tui-background-accent-1-pressed);
        box-shadow: 0 0.3125rem 0.3125rem -0.1875rem rgba(0, 0, 0, 0.2),
        0rem 0.5rem 0.625rem 0.0625rem rgba(0, 0, 0, 0.14), 0rem 0.1875rem 0.875rem 0.125rem rgba(0, 0, 0, 0.12);
    });

    .appearance-focus({
        background: #883df2;
    });
}

[tuiAppearance][data-appearance='material-checkbox'] {
    color: var(--tui-text-primary-on-accent-1);
    border-radius: 0.125rem;
    border: 0.125rem solid rgba(0, 0, 0, 0.54);
    outline: none;

    &::after {
        .transition(all);

        content: '';
        position: absolute;
        inset: -0.625rem;
        border-radius: 100%;
        background: #000;
        opacity: 0;
        transform: scale(0);
    }

    .appearance-hover({
        &:after {
            opacity: 0.05;
            transform: none;
        }
    });

    .appearance-active({
        &:after {
            opacity: 0.1;
            transform: none;
        }
    });

    .appearance-focus({
        &:after {
            opacity: 0.1;
            transform: none;
        }
    });

    &:checked {
        background: var(--tui-background-accent-1);
        border-color: transparent;
    }
}

    
      class n{constructor(){this.value="";this.checkbox=!1}}

Taiga UI

GitHub StackBlitz