refactor: update Avatar page to Aura theme

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,25 +7,69 @@ 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
+
+|===
+
+
 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
+|Avatar Group overlap border width
 |`--vaadin-avatar-group-overlap-border`
-|`2px`
+|Lumo
 
 |===