diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.sass b/packages/vuetify/src/components/VAvatar/VAvatar.sass index 2ed652aab23..54f59eedf4b 100644 --- a/packages/vuetify/src/components/VAvatar/VAvatar.sass +++ b/packages/vuetify/src/components/VAvatar/VAvatar.sass @@ -19,6 +19,7 @@ @include avatar-sizes($avatar-sizes) @include avatar-density(('height', 'width'), $avatar-density) + @include tools.border($avatar-border...) @include tools.rounded($avatar-border-radius) @include tools.variant($avatar-variants...) diff --git a/packages/vuetify/src/components/VAvatar/VAvatar.tsx b/packages/vuetify/src/components/VAvatar/VAvatar.tsx index 7c0a0ebf9e3..245b205ebfb 100644 --- a/packages/vuetify/src/components/VAvatar/VAvatar.tsx +++ b/packages/vuetify/src/components/VAvatar/VAvatar.tsx @@ -7,6 +7,7 @@ import { VIcon } from '@/components/VIcon' import { VImg } from '@/components/VImg' // Composables +import { makeBorderProps, useBorder } from '@/composables/border' import { makeComponentProps } from '@/composables/component' import { makeDensityProps, useDensity } from '@/composables/density' import { IconValue } from '@/composables/icons' @@ -26,6 +27,7 @@ export const makeVAvatarProps = propsFactory({ image: String, text: String, + ...makeBorderProps(), ...makeComponentProps(), ...makeDensityProps(), ...makeRoundedProps(), @@ -42,6 +44,7 @@ export const VAvatar = genericComponent()({ setup (props, { slots }) { const { themeClasses } = provideTheme(props) + const { borderClasses } = useBorder(props) const { colorClasses, colorStyles, variantClasses } = useVariant(props) const { densityClasses } = useDensity(props) const { roundedClasses } = useRounded(props) @@ -56,6 +59,7 @@ export const VAvatar = genericComponent()({ 'v-avatar--end': props.end, }, themeClasses.value, + borderClasses.value, colorClasses.value, densityClasses.value, roundedClasses.value, diff --git a/packages/vuetify/src/components/VAvatar/_variables.scss b/packages/vuetify/src/components/VAvatar/_variables.scss index e3c5924d197..16d57130f51 100644 --- a/packages/vuetify/src/components/VAvatar/_variables.scss +++ b/packages/vuetify/src/components/VAvatar/_variables.scss @@ -1,10 +1,16 @@ @use "sass:map"; +@use '../../styles/settings'; @use "../../styles/settings/variables"; @use "../../styles/tools/functions"; // Defaults $avatar-background: var(--v-theme-surface) !default; $avatar-border-radius: map.get(variables.$rounded, 'circle') !default; +$avatar-border-color: settings.$border-color-root !default; +$avatar-border-radius: map.get(settings.$rounded, 0) !default; +$avatar-border-style: settings.$border-style-root !default; +$avatar-border-thin-width: thin !default; +$avatar-border-width: thin !default; $avatar-color: rgba(var(--v-theme-on-surface), var(--v-medium-emphasis-opacity)) !default; $avatar-density: ('default': 0, 'comfortable': -1, 'compact': -2) !default; $avatar-elevation: 1 !default; @@ -26,6 +32,13 @@ $avatar-sizes: functions.map-deep-merge( $avatar-sizes ); +$avatar-border: ( + $avatar-border-color, + $avatar-border-style, + $avatar-border-width, + $avatar-border-thin-width +) !default; + $avatar-variants: ( $avatar-background, $avatar-color,