fix(Avatar): 25% border radius for square Avatars (#140)

whopio · Apr 25, 2024 · e296609 · e296609
1 parent 447b4ff
commit e296609
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/packages/frosted-ui/src/components/avatar.css b/packages/frosted-ui/src/components/avatar.css
@@ -70,58 +70,58 @@
       --avatar-size: var(--space-5);
       --avatar-fallback-one-letter-font-size: var(--font-size-2);
       --avatar-fallback-two-letters-font-size: var(--font-size-1);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-1);
     }
     &:where(.fui-r-size-2) {
       --avatar-size: var(--space-6);
       --avatar-fallback-one-letter-font-size: var(--font-size-3);
       --avatar-fallback-two-letters-font-size: var(--font-size-2);
-      border-radius: max(var(--radius-2), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-2);
     }
     &:where(.fui-r-size-3) {
       --avatar-size: var(--space-7);
       --avatar-fallback-one-letter-font-size: var(--font-size-4);
       --avatar-fallback-two-letters-font-size: var(--font-size-3);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-3);
     }
     &:where(.fui-r-size-4) {
       --avatar-size: var(--space-8);
       --avatar-fallback-one-letter-font-size: var(--font-size-5);
       --avatar-fallback-two-letters-font-size: var(--font-size-4);
-      border-radius: max(var(--radius-3), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-4);
     }
     &:where(.fui-r-size-5) {
       --avatar-size: var(--space-9);
       --avatar-fallback-one-letter-font-size: var(--font-size-6);
-      border-radius: max(var(--radius-4), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-6);
     }
     &:where(.fui-r-size-6) {
       --avatar-size: 80px;
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
-      border-radius: max(var(--radius-5), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-7);
     }
     &:where(.fui-r-size-7) {
       --avatar-size: 96px;
       --avatar-fallback-one-letter-font-size: var(--font-size-7);
-      border-radius: max(var(--radius-5), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-7);
     }
     &:where(.fui-r-size-8) {
       --avatar-size: 128px;
       --avatar-fallback-one-letter-font-size: var(--font-size-8);
-      border-radius: max(var(--radius-6), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-8);
     }
     &:where(.fui-r-size-9) {
       --avatar-size: 160px;
       --avatar-fallback-one-letter-font-size: var(--font-size-9);
-      border-radius: max(var(--radius-6), var(--radius-full));
+      border-radius: max(25%, var(--radius-full));
       letter-spacing: var(--letter-spacing-9);
     }
   }