docs: avatar Aura style variants and props (#4862)

Author: sissbruecker

articles/components/avatar/index.adoc

@@ -318,83 +318,33 @@ include::{root}/frontend/demo/component/avatar/react/avatar-group-internationali
 endif::[]
 --
 
-== Size Variants
 
-Avatar has four available size variants:
+== Use Cases
+
+Avatar can be paired with Popover to create a user account menu.
 
 [.example]
 --
 
-ifdef::lit[]
 [source,html]
 ----
-include::{root}/frontend/demo/component/avatar/avatar-sizes.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/popover/popover-user-menu.ts[render,tags=snippet,indent=0,group=Lit]
 ----
-endif::[]
 
-ifdef::flow[]
 [source,java]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarSizes.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/src/main/java/com/vaadin/demo/component/popover/PopoverUserMenu.java[render,tags=snippet,indent=0,group=Flow]
 ----
-endif::[]
 
-ifdef::react[]
 [source,tsx]
 ----
-include::{root}/frontend/demo/component/avatar/react/avatar-sizes.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
---
-
-|===
-| Variant | Theme name
-
-|Extra large
-|`xlarge`
-
-|Large
-|`large`
-
-|Small
-|`small`
-
-|Extra small
-|`xsmall`
-
-|===
-
-Size variants should be used only in special cases.
-See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to
-change the default Avatar size.
-
-== Use Cases
-
-Avatar can be paired with Menu Bar to create a user account menu.
-
-[.example]
---
-
-ifdef::lit[]
-[source,javascript]
-----
-include::{root}/frontend/demo/component/avatar/avatar-menu-bar.ts[render,tags=snippet,indent=0,group=Lit]
+include::{root}/frontend/demo/component/popover/react/popover-user-menu.tsx[render,tags=snippet,indent=0,group=React]
 ----
-endif::[]
 
-ifdef::flow[]
-[source,java]
+[source,css]
 ----
-include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarMenuBar.java[render,tags=snippet,indent=0,group=Flow]
+include::{root}/frontend/themes/docs/popover-user-menu.css[]
 ----
-endif::[]
-
-ifdef::react[]
-[source,tsx]
-----
-include::{root}/frontend/demo/component/avatar/react/avatar-menu-bar.tsx[render,tags=snippet,indent=0,group=React]
-----
-endif::[]
 --
 
 

articles/components/avatar/styling.adoc

@@ -7,61 +7,150 @@ order: 50
 ---
 = Avatar Styling
 
+
+== Style Variants
+
+Avatar and Avatar Group support the following style variants:
+
+[cols="1,3,1"]
+|===
+| Variant | Description | Supported by
+
+|`reverse`
+|Reverses the stacking order of avatars in Avatar Group
+|Aura, Lumo
+
+|`large`
+|Large avatar size
+|Lumo
+
+|`small`
+|Small avatar size
+|Lumo
+
+|`xlarge`
+|Extra large avatar size
+|Lumo
+
+|`xsmall`
+|Extra small avatar size
+|Lumo
+
+|===
+
+
+=== Size Variants
+
+Avatar has four available size variants:
+
+[.example]
+--
+
+ifdef::lit[]
+[source,html]
+----
+include::{root}/frontend/demo/component/avatar/avatar-sizes.ts[render,tags=snippet,indent=0,group=Lit]
+----
+endif::[]
+
+ifdef::flow[]
+[source,java]
+----
+include::{root}/src/main/java/com/vaadin/demo/component/avatar/AvatarSizes.java[render,tags=snippet,indent=0,group=Flow]
+----
+endif::[]
+
+ifdef::react[]
+[source,tsx]
+----
+include::{root}/frontend/demo/component/avatar/react/avatar-sizes.tsx[render,tags=snippet,indent=0,group=React]
+----
+endif::[]
+--
+
+Size variants should be used only in special cases.
+See <<{articles}/styling/lumo/lumo-style-properties/size-space#,Size and Space>> for details on how to
+change the default Avatar size.
+
 include::../_styling-section-theming-props.adoc[tag=style-properties]
 
 === Common Properties
 
 [cols="1,2,2"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
 
 |Avatar size
 |`--vaadin-avatar-size`
-|`var(--lumo-size-m)`
+|Aura, Lumo
+
+|Avatar background
+|`--vaadin-avatar-background`
+|Aura, Lumo
+
+|Avatar border width
+|`--vaadin-avatar-border-width`
+|Aura
+
+|Avatar border color
+|`--vaadin-avatar-border-color`
+|Aura
 
 |Avatar Group overlap
 |`--vaadin-avatar-group-overlap`
-|`8px`
+|Aura, Lumo
 
-|Avatar Group overlap border
-|`--vaadin-avatar-group-overlap-border`
-|`2px`
+|Avatar Group gap
+|`--vaadin-avatar-group-gap`
+|Aura, Lumo
 
 |===
 
 === User Color Properties
 
 [cols="1,2,2"]
 |===
-| Feature | Property | Default Value
+| Feature | Property | Supported by
 
 |User color 0
 |`--vaadin-user-color-0`
-|`#df0b92`
+|Aura, Lumo
 
 |User color 1
 |`--vaadin-user-color-1`
-|`#650acc`
+|Aura, Lumo
 
 |User color 2
 |`--vaadin-user-color-2`
-|`#097faa`
+|Aura, Lumo
 
 |User color 3
 |`--vaadin-user-color-3`
-|`#ad6200`
+|Aura, Lumo
 
 |User color 4
 |`--vaadin-user-color-4`
-|`#bf16f3`
+|Aura, Lumo
 
 |User color 5
 |`--vaadin-user-color-5`
-|`#084391`
+|Aura, Lumo
 
 |User color 6
 |`--vaadin-user-color-6`
-|`#078836`
+|Aura, Lumo
+
+|User color 7
+|`--vaadin-user-color-7`
+|Aura
+
+|User color 8
+|`--vaadin-user-color-8`
+|Aura
+
+|User color 9
+|`--vaadin-user-color-9`
+|Aura
 
 |===