Boolean$avatar-disable-everything: false !default;Set to true to disable all the styles
Boolean$avatar-disable-icon: false !default;Set to true to disable updating the icon color within avatars to inherit the current color by default.
Boolean$avatar-disable-icon-size: false !default;Set to true to disable allowing the avatar to be sized as an icon.
Boolean$avatar-disable-image: false !default;Set to true to disable the img styling when src or imgProps are provided to the avatar.
Boolean$avatar-disable-auto-image: false !default;Set to true to disable automatically updating all img elements that appear in an avatar to be responsive.
Color $avatar-color: colors.$grey-100 !default;The default text color
Color $avatar-background-color: colors.$grey-700 !default;The default background color
Number$avatar-line-height: map.get(typography.$subtitle-1-styles, line-height) !default;The default line height
Color$avatar-border-color: transparent !default;The default border color
Number$avatar-border-radius: border-radius.get-var(full) !default;The default border radius. If you want to make avatars be more square-like, set this to something like 0.25rem.
Number$avatar-size: 2.5rem !default;The default height and width
Number$avatar-font-size: 1.5rem !default;The default font size
Number$avatar-icon-sized-size: icon.get-var(size) !default;The default height and width when sized as an icon
Number$avatar-icon-sized-font-size: 0.75rem !default;The default font size when sized as an avatar
Map$avatar-default-colors: (
red: colors.$red-a-700 colors.$red-50,
pink: colors.$pink-600 colors.$white,
purple: colors.$purple-700 colors.$purple-100,
deep-purple: colors.$deep-purple-900 colors.$deep-purple-100,
indigo: colors.$indigo-600 colors.$indigo-100,
blue: colors.$blue-a-700 colors.$white,
light-blue: colors.$light-blue-300 colors.$deep-purple-900,
cyan: colors.$cyan-400 colors.$teal-900,
teal: colors.$teal-a-400 colors.$teal-900,
green: colors.$green-800 colors.$green-50,
light-green: colors.$light-green-300 colors.$green-900,
lime: colors.$lime-400 colors.$teal-800,
yellow: colors.$yellow-a-200 colors.$brown-500,
amber: colors.$amber-400 colors.$brown-800,
orange: colors.$orange-600 colors.$grey-900,
deep-orange: colors.$deep-orange-a-400 colors.$grey-900,
brown: colors.$brown-500 colors.$brown-50,
grey: colors.$grey-700 colors.$grey-100,
blue-grey: colors.$blue-grey-700 colors.$blue-grey-50,
);Some reasonable defaults for the avatar colors that ensure contrast ratios are accessible between the background and foreground.
Map$avatar-custom-colors: () !default;Any custom colors to create. Each key is the class name suffix for the avatar and each value should be an ordered list of: background-color color.
This will automatically be merged with the $default-colors so you can set any value to null to remove it or provide the same key with different values to override.
Map$avatar-colors: map.merge($default-colors, $custom-colors) !default;The default colors that can be created for an avatar. This can be set to an empty Map to create no color styles, a completely custom map, or merge with the existing.
List$avatar-variables: (
background-color,
color,
border-color,
border-radius,
size,
font-size
);The available configurable css variables and mostly used internally for the
get-var, set-var, and use-var utils.
mixin@mixin set-var($name, $value) { … }| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$value | The value to set the variable to. Supports | any | — |
mixin@mixin use-var($property, $name: $property, $fallback: null) { … }mixin@mixin custom-color($name, $color, $background-color, $disable-prefix: false) { … }NOTE: You will need to enforce an acceptable color contrast yourself between the background and foreground colors.
mixin@mixin variables { … }Conditionally applies the css variables based on feature flags
mixin@mixin styles($disable-layer: false) { … }Generates all the styles for the Autocomplete components based on feature flags.
| Name | Description | Type | Default Value |
|---|---|---|---|
$disable-layer | Set this to | Boolean | false |
Unable to create an avatar color because the list of values is not of length 2. The first value should be the background-color and the second should be the text color.
function@function get-var($name, $fallback: null) { … }Stringa var() statement
| Name | Description | Type | Default Value |
|---|---|---|---|
$name | The supported variable name | String | — |
$fallback | An optional fallback value | any | null |