Variables

Taiga UI uses CSS custom properties for many of its visual aspects. You can see colors for the full list of color variables.

Besides colors there are also following variables that can be adjusted at any level of DOM structure:

• --tui-disabled-opacity — amount of transparency for disabled elements
• --tui-height-l — large elements height (i.e. inputs, buttons)
• --tui-height-m — default elements height (i.e. inputs, buttons)
• --tui-height-s — small elements height (i.e. small inputs)
• --tui-height-xs — smallest elements height (i.e. small button, badges)
• --tui-padding-l — padding for inputs with size "l"
• --tui-padding-m — padding for inputs with size "m"
• --tui-padding-s — padding for inputs with size "s"
• --tui-radius-l — border radius for containers (i.e. island, accordion)
• --tui-radius-m — default border radius
• --tui-radius-s — border radius for small elements (i.e. tags)
• --tui-radius-xs — border radius for smallest items (i.e. small checkbox)
• --tui-typography-family-display — font for headings
• --tui-typography-family-text — font for text

    
      
    

      
        Copy
      
      
    
  

    
      <div
    appearance="floating"
    tuiCardLarge
>
    <tui-textfield>
        <input
            tuiInput
            [(ngModel)]="value"
        />
        <label tuiLabel>Input example</label>
    </tui-textfield>

    <label tuiLabel>
        <input
            tuiCheckbox
            type="checkbox"
            [(ngModel)]="checkbox"
        />
        Checkbox example
    </label>
</div>

    

      
        Copy
      
      
    
  

    
      :host {
    --tui-typography-family-text: 'Comic Sans MS', cursive;
    --tui-typography-body-m: bold 1rem/1.5rem var(--tui-typography-family-text);
    --tui-typography-body-s: normal 0.5rem/1.25rem var(--tui-typography-family-text);
    --tui-background-accent-1: #c86dd7;
    --tui-background-accent-1-hover: #a456b1;
    --tui-background-accent-1-pressed: #7f3b8a;
    --tui-text-primary-on-accent-1: #fff;
    --tui-radius-s: 0;
    --tui-radius-m: 0.25rem;
    --tui-height-l: 4.375rem;
}

    

      
        Copy