Bug fix(Avatar): Changed rounded border calculation for the "square" …

…Avatar to better align with existing border styles (#5077) * Bug fix, make the "square" rounded border match existing borders better. * Create large-plants-unite.md
primer · Oct 7, 2024 · 6490b27 · 6490b27
1 parent e4965ed
commit 6490b27
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 1 deletion.
diff --git a/.changeset/large-plants-unite.md b/.changeset/large-plants-unite.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Bug fix(Avatar): Changed rounded border calculation for the "square" Avatar to better align with existing border styles
diff --git a/packages/react/src/Avatar/Avatar.module.css b/packages/react/src/Avatar/Avatar.module.css
@@ -13,7 +13,8 @@
   box-shadow: 0 0 0 1px var(--avatar-borderColor);
 
   &:where([data-square]) {
-    border-radius: var(--borderRadius-medium);
+    /* stylelint-disable-next-line primer/borders */
+    border-radius: clamp(4px, calc(var(--avatarSize-regular) - 24px), var(--borderRadius-medium));
   }
 
   &:where([data-responsive]) {