From 6a70082d319e42d0524e7e9987f0243a742734b6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Ferreira?=
 <60441552+JoaoFerreira-FrontEnd@users.noreply.github.com>
Date: Fri, 8 Aug 2025 16:12:56 +0100
Subject: [PATCH] fix(avatar): update tokens and fix disable state (#30618)

Issue number: internal

---------

<!-- Please do not submit updates to dependencies unless it fixes an
issue. -->

<!-- Please try to limit your pull request to one type (bugfix, feature,
etc). Submit multiple pull requests if needed. -->

## What is the new behavior?
<!-- Please describe the behavior or changes that are being added by
this PR. -->
- improve tokens usage;
- now disable layer respects border-radius;

## Does this introduce a breaking change?

- [ ] Yes
- [x] No

<!--
  If this introduces a breaking change:
1. Describe the impact and migration path for existing applications
below.
  2. Update the BREAKING.md file with the breaking change.
3. Add "BREAKING CHANGE: [...]" to the commit description when merging.
See
https://github.com/ionic-team/ionic-framework/blob/main/docs/CONTRIBUTING.md#footer
for more information.
-->


## Other information

<!-- Any other information that is important to this PR such as
screenshots of how the component looks before and after the change. -->

[basic](https://ionic-framework-git-rou-12136-ionic1.vercel.app/src/components/avatar/test/basic?ionic:theme=ionic)

[shape](https://ionic-framework-git-rou-12136-ionic1.vercel.app/src/components/avatar/test/shape?ionic:theme=ionic)

[size](https://ionic-framework-git-rou-12136-ionic1.vercel.app/src/components/avatar/test/size?ionic:theme=ionic)

[states](https://ionic-framework-git-rou-12136-ionic1.vercel.app/src/components/avatar/test/states?ionic:theme=ionic)
---
 core/src/components/avatar/avatar.ionic.scss | 38 +++++++++++++++-----
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/core/src/components/avatar/avatar.ionic.scss b/core/src/components/avatar/avatar.ionic.scss
index 167e1a2b48..82a5a945d7 100644
--- a/core/src/components/avatar/avatar.ionic.scss
+++ b/core/src/components/avatar/avatar.ionic.scss
@@ -96,19 +96,40 @@
 :host(.avatar-xxsmall.avatar-soft),
 :host(.avatar-xsmall.avatar-soft),
 :host(.avatar-small.avatar-soft) {
-  --border-radius: #{globals.$ion-border-radius-100};
+  --border-radius: #{globals.$ion-soft-2xs};
+}
+:host(.avatar-medium.avatar-soft) {
+  --border-radius: #{globals.$ion-soft-xs};
+}
+:host(.avatar-large.avatar-soft),
+:host(.avatar-xlarge.avatar-soft) {
+  --border-radius: #{globals.$ion-soft-md};
 }
 
-:host(.avatar-soft) {
-  --border-radius: #{globals.$ion-border-radius-200};
+:host(.avatar-xxsmall.avatar-round),
+:host(.avatar-xsmall.avatar-round),
+:host(.avatar-small.avatar-round) {
+  --border-radius: #{globals.$ion-round-2xs};
+}
+:host(.avatar-medium.avatar-round) {
+  --border-radius: #{globals.$ion-round-xs};
+}
+:host(.avatar-large.avatar-round),
+:host(.avatar-xlarge.avatar-round) {
+  --border-radius: #{globals.$ion-round-md};
 }
 
-:host(.avatar-round) {
-  --border-radius: #{globals.$ion-border-radius-full};
+:host(.avatar-xxsmall.avatar-rectangular),
+:host(.avatar-xsmall.avatar-rectangular),
+:host(.avatar-small.avatar-rectangular) {
+  --border-radius: #{globals.$ion-rectangular-2xs};
 }
-
-:host(.avatar-rectangular) {
-  --border-radius: #{globals.$ion-border-radius-0};
+:host(.avatar-medium.avatar-rectangular) {
+  --border-radius: #{globals.$ion-rectangular-xs};
+}
+:host(.avatar-large.avatar-rectangular),
+:host(.avatar-xlarge.avatar-rectangular) {
+  --border-radius: #{globals.$ion-rectangular-md};
 }
 
 // Avatar Icon
@@ -224,5 +245,6 @@
 // Avatar Disabled
 // --------------------------------------------------
 :host(.avatar-disabled)::before {
+  @include globals.border-radius(var(--border-radius));
   @include globals.disabled-state();
 }