Customizing Avatar
Variables
The following table lists the available variables for customization.
| Name | Type | Default value | Computed value |
|---|---|---|---|
| $kendo-avatar-border-width | Number | 1px | 1px |
Description
The border width of the Avatar. | |||
| $kendo-avatar-font-family | String | var( --kendo-font-family, inherit ) | var(--kendo-font-family, inherit) |
Description
The font family of the Avatar. | |||
| $kendo-avatar-font-size | String | var( --kendo-font-size, inherit ) | var(--kendo-font-size, inherit) |
Description
The font size of the Avatar. | |||
| $kendo-avatar-line-height | String | var( --kendo-line-height, inherit ) | var(--kendo-line-height, inherit) |
Description
The line height of the Avatar. | |||
| $kendo-avatar-sizes | Map | (
sm: k-spacing(4),
md: k-spacing(8),
lg: k-spacing(16)
) | (sm: var(--kendo-spacing-4, 1rem), md: var(--kendo-spacing-8, 2rem), lg: var(--kendo-spacing-16, 4rem)) |
Description
The sizes map of the Avatar. | |||
| $kendo-avatar-brand-colors | Map | (
primary: primary,
error: error,
success: success,
info: info,
secondary: if($kendo-enable-color-system, secondary, neutral),
tertiary: tertiary,
) | (primary: primary, error: error, success: success, info: info, secondary: secondary, tertiary: tertiary) |
Description
The theme variations for the Avatar. | |||
| $kendo-avatar-theme-colors | Map | () | (solid: (primary: (bg: var(--kendo-color-primary, #0078d4), text: var(--kendo-color-on-primary, #ffffff), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-error, #c2666b), text: var(--kendo-color-on-error, #ffffff), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-success, #55a554), text: var(--kendo-color-on-success, #ffffff), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-info, #0a7eff), text: var(--kendo-color-on-info, #ffffff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-secondary, #979593), text: var(--kendo-color-on-secondary, #ffffff), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-tertiary, #2b88d8), text: var(--kendo-color-on-tertiary, #ffffff), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-warning, #ffc80a), text: var(--kendo-color-on-warning, #323130), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-dark, #323130), text: var(--kendo-color-on-dark, #ffffff), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-light, #d2d0ce), text: var(--kendo-color-on-light, #323130), border: var(--kendo-color-light, #d2d0ce))), outline: (primary: (bg: var(--kendo-color-on-primary, #ffffff), text: var(--kendo-color-primary, #0078d4), border: var(--kendo-color-primary, #0078d4)), error: (bg: var(--kendo-color-on-error, #ffffff), text: var(--kendo-color-error, #c2666b), border: var(--kendo-color-error, #c2666b)), success: (bg: var(--kendo-color-on-success, #ffffff), text: var(--kendo-color-success, #55a554), border: var(--kendo-color-success, #55a554)), info: (bg: var(--kendo-color-on-info, #ffffff), text: var(--kendo-color-info, #0a7eff), border: var(--kendo-color-info, #0a7eff)), secondary: (bg: var(--kendo-color-on-secondary, #ffffff), text: var(--kendo-color-secondary, #979593), border: var(--kendo-color-secondary, #979593)), tertiary: (bg: var(--kendo-color-on-tertiary, #ffffff), text: var(--kendo-color-tertiary, #2b88d8), border: var(--kendo-color-tertiary, #2b88d8)), warning: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-warning, #ffc80a), border: var(--kendo-color-warning, #ffc80a)), dark: (bg: var(--kendo-color-on-dark, #ffffff), text: var(--kendo-color-dark, #323130), border: var(--kendo-color-dark, #323130)), light: (bg: var(--kendo-color-app-surface, #ffffff), text: var(--kendo-color-light, #d2d0ce), border: var(--kendo-color-light, #d2d0ce)))) |
Description
The theme colors map for the Avatar variations. | |||
