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)
This commit is contained in:
João Ferreira
2025-08-08 16:12:56 +01:00
committed by GitHub
parent 560a791e03
commit 6a70082d31

View File

@ -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();
}