The default text color for the avatar. This will be used until the color prop is provided to the Avatar component.
$rmd-avatar-color: $rmd-grey-100 !default;The default background color for an avatar. This will be used until the color prop is provided to the Avatar component.
$rmd-avatar-background-color: $rmd-grey-700 !default;The border color to apply to the avatar.
$rmd-avatar-border-color: rgba(
if(
rmd-theme-tone($rmd-theme-background) == light,
$rmd-black-base,
$rmd-white-base
),
0.12
) !default;The border-radius for the avatar.
$rmd-avatar-border-radius: 50% !default;The size for the avatar.
$rmd-avatar-size: 2.5rem !default;The font size to apply to avatars. This is used when the avatar is a letter.
$rmd-avatar-font-size: 1.5rem !default;The line height to use for avatars. This is really only useful when the avatar is a letter.
$rmd-avatar-line-height: rmd-typography-value(subtitle-1, line-height) !default;A Map of all the available colors for the avatar. This map can be updated with new values if the defaults are not to your liking, but it is recommended to create your own themes instead.
$rmd-avatar-colors: (
red: $rmd-red-a-700 $rmd-red-50,
pink: $rmd-pink-600 $rmd-white-base,
purple: $rmd-purple-700 $rmd-purple-100,
deep-purple: $rmd-deep-purple-900 $rmd-deep-purple-100,
indigo: $rmd-indigo-600 $rmd-indigo-100,
blue: $rmd-blue-a-700 $rmd-white-base,
light-blue: $rmd-light-blue-300 $rmd-deep-purple-900,
cyan: $rmd-cyan-400 $rmd-teal-900,
teal: $rmd-teal-a-400 $rmd-teal-900,
green: $rmd-green-800 $rmd-green-50,
light-green: $rmd-light-green-300 $rmd-green-900,
lime: $rmd-lime-400 $rmd-teal-800,
yellow: $rmd-yellow-a-200 $rmd-brown-500,
amber: $rmd-amber-400 $rmd-brown-800,
orange: $rmd-orange-600 $rmd-grey-900,
deep-orange: $rmd-deep-orange-a-400 $rmd-grey-900,
brown: $rmd-brown-500 $rmd-brown-50,
grey: $rmd-grey-700 $rmd-grey-100,
blue-grey: $rmd-blue-grey-700 $rmd-blue-grey-50,
) !default;A Map of all the "themeable" parts of the avatar package. Every key in this map will be used to create a css variable to dynamically update the values of the icon as needed.
$rmd-avatar-theme-values: (
background-color: $rmd-avatar-background-color,
border-color: $rmd-avatar-border-color,
border-radius: $rmd-avatar-border-radius,
color: $rmd-avatar-color,
font-size: $rmd-avatar-font-size,
size: $rmd-avatar-size,
) !default;Creates the styles for one of the avatar's theme values. This is mostly going to be an internal helper mixin util.
| Name | Description | Type | Default Value |
|---|---|---|---|
$property | The property to set a | String | — |
$theme-style | One of the keys of | String | — |
$fallback | A fallback value to use if the css variable isn't set somehow. This will default to automatically retrieving the default value from the | Color|String|Number | null |
Updates one of the avatar's theme variables with the new value for the section of your app.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | The avatar theme style type to update. This should be one of the | String | — |
$value | The new value to use. | Color|String|Number | — |
A mixin for updating the avatar's theme colors.
| Name | Description | Type | Default Value |
|---|---|---|---|
$background-color | The background color to apply | Color | — |
$color | The text color to apply | Color | — |
@use 'react-md' as *;
.my-red-avatar {
@include rmd-avatar-color($rmd-red-500, $rmd-black-base);
}
.my-orange-avatar {
@include rmd-avatar-color($rmd-orange-500, $rmd-black-base);
}
A mixin for creating the avatar color suffix class names from a color map.
It is not recommended to use this mixin for creating additional colors.
Instead use the rmd-avatar-color mixin with custom class names instead.
| Name | Description | Type | Default Value |
|---|---|---|---|
$color-map | a map of color name suffixes and a list of the background-color and color to apply | Map | $rmd-avatar-colors |
Creates all the styles for the avatar package as well as the root css variable theme.
This function is used to quickly get one of the avatar's theme values. This is really just for the rmd-avatar-theme mixin to provide some validation that a correct style key is used, but might be useful in other cases.
Color|String|Numberone of the avatar's theme values.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
This function is used to get one of the avatar's theme variables as a CSS Variable to be applied as a style attribute. By default, the CSS Variable will have a fallback of the current $rmd-avatar-theme-values
This function is used to create a CSS Variable declaration with an optional fallback value if the CSS Variable has not been declared somehow.
Stringone of the avatar's theme values as a css variable.
| Name | Description | Type | Default Value |
|---|---|---|---|
$theme-style | One of the | String | — |
$fallback | An optional fallback color to apply. This is set to | Color|String|Number | null |