From 1e839a3787109b4a688a417fc842f4d4b3164ff8 Mon Sep 17 00:00:00 2001
From: onlyexeption <ibarakov@infragistics.com>
Date: Mon, 1 Jun 2026 11:17:00 +0300
Subject: [PATCH] fix(avatar): set background through correct css var

---
 docs/angular/src/content/en/components/avatar.mdx       | 4 ++--
 docs/angular/src/content/jp/components/avatar.mdx       | 4 ++--
 docs/xplat/src/content/en/components/layouts/avatar.mdx | 5 ++++-
 docs/xplat/src/content/jp/components/layouts/avatar.mdx | 5 ++++-
 4 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/docs/angular/src/content/en/components/avatar.mdx b/docs/angular/src/content/en/components/avatar.mdx
index 046e32b8c0..bcbda96a9f 100644
--- a/docs/angular/src/content/en/components/avatar.mdx
+++ b/docs/angular/src/content/en/components/avatar.mdx
@@ -96,13 +96,13 @@ Let's enhance our avatar by making it circular and bigger in size.
 <igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
 ```
 
-We can also change the background through the `background` property or set a color on the initials through the `color` property.
+We can also change the background using the `--ig-avatar-background` CSS variable or set a color on the initials through the `color` property.
 
 ```scss
 // avatar.component.scss
 
 igx-avatar {
-  background: #e41c77;
+  --ig-avatar-background: #e41c77;
   color: #000000;
 }
 
diff --git a/docs/angular/src/content/jp/components/avatar.mdx b/docs/angular/src/content/jp/components/avatar.mdx
index 584ee9abad..3f7c4936e7 100644
--- a/docs/angular/src/content/jp/components/avatar.mdx
+++ b/docs/angular/src/content/jp/components/avatar.mdx
@@ -97,13 +97,13 @@ Ignite UI for Angular Avatar コンポーネントには、3 つの形状 (正
 <igx-avatar size="medium" initials="JS" shape="circle"></igx-avatar>
 ```
 
-`background` プロパティを使用して背景の色を変更できます。また、`color` プロパティを使用してイニシャルの色を設定します。
+`--ig-avatar-background` CSS 変数を使用して背景の色を変更できます。また、`color` プロパティを使用してイニシャルの色を設定します。
 
 ```scss
 // avatar.component.scss
 
 igx-avatar {
-  background: #e41c77;
+  --ig-avatar-background: #e41c77;
   color: #000000;
 }
 
diff --git a/docs/xplat/src/content/en/components/layouts/avatar.mdx b/docs/xplat/src/content/en/components/layouts/avatar.mdx
index 73f15eba6f..9ad3ca011f 100644
--- a/docs/xplat/src/content/en/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/en/components/layouts/avatar.mdx
@@ -279,10 +279,13 @@ The <ApiLink type="Avatar" /> component exposes several CSS parts, giving you fu
 | `icon` | The icon wrapper of the avatar. |
 
 ```css
+igc-avatar {
+  --ig-avatar-background: var(--ig-success-500);
+}
+
 igc-avatar::part(base) {
   --size: 60px;
   color: var(--ig-success-500-contrast);
-  background: var(--ig-success-500);;
   border-radius: 20px;
 }
 ```
diff --git a/docs/xplat/src/content/jp/components/layouts/avatar.mdx b/docs/xplat/src/content/jp/components/layouts/avatar.mdx
index 18fe7cd344..cdf3560a4e 100644
--- a/docs/xplat/src/content/jp/components/layouts/avatar.mdx
+++ b/docs/xplat/src/content/jp/components/layouts/avatar.mdx
@@ -255,10 +255,13 @@ igc-avatar {
 | `icon` | アバターのアイコン ラッパー。 |
 
 ```css
+igc-avatar {
+  --ig-avatar-background: var(--ig-success-500);
+}
+
 igc-avatar::part(base) {
   --size: 60px;
   color: var(--ig-success-500-contrast);
-  background: var(--ig-success-500);;
   border-radius: 20px;
 }
 ```