[components] Refactor Avatar component

packages/@sanity/components/sanity.json

@@ -1140,6 +1140,14 @@
     {
       "implements": "part:@sanity/base/component",
       "path": "menuButton/story"
+    },
+    {
+      "implements": "part:@sanity/components/avatar",
+      "path": "avatar"
+    },
+    {
+      "implements": "part:@sanity/base/component",
+      "path": "avatar/story"
     }
   ]
 }

packages/@sanity/components/src/avatar/Avatar.css

@@ -1,162 +1,143 @@
 @import 'part:@sanity/base/theme/variables-style';
 
+:root {
+  --avatar-size-small: 23px;
+  --avatar-size-medium: 35px;
+  --avatar-size-large: 55px;
+}
+
+@keyframes avatarEditingSpin {
+  to {
+    stroke-dashoffset: 6;
+  }
+}
+
 .root {
   position: relative;
-  border-radius: 50%;
   box-sizing: border-box;
-  fill: currentColor;
-  pointer-events: auto;
-  display: flex;
   user-select: none;
   box-shadow: 0 0 0 1px var(--component-bg);
-  align-self: center;
 
-  &[data-tone='navbar'] {
+  @nest &[data-tone='navbar'] {
     box-shadow: 0 0 0 1px var(--main-navigation-color);
-
-    @nest & .avatarInitials {
-      color: var(--main-navigation-color);
-    }
   }
-}
 
-.avatar {
-  position: relative;
-  border-radius: 50%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
+  @nest &[data-status='inactive'] {
+    opacity: 0.5;
+  }
 
-  @nest & svg {
-    height: 100%;
-    width: 100%;
-    display: flex;
-    z-index: 1;
+  @nest &[data-size='small'] {
+    width: var(--avatar-size-small);
+    height: var(--avatar-size-small);
+    border-radius: calc(var(--avatar-size-small) / 2);
+    font-size: var(--font-size-xsmall);
+    line-height: var(--line-height-xsmall);
   }
 
-  @nest & .border {
-    stroke-width: 2;
-    stroke-linecap: round;
-    stroke-dasharray: 0;
+  @nest &[data-size='medium'] {
+    width: var(--avatar-size-medium);
+    height: var(--avatar-size-medium);
+    border-radius: calc(var(--avatar-size-medium) / 2);
+    font-size: var(--font-size-base);
+    line-height: var(--line-height-base);
   }
 
-  @nest & .isAnimating {
-    transform-origin: center;
-    animation: spinning 16s infinite linear;
+  @nest &[data-size='large'] {
+    width: var(--avatar-size-large);
+    height: var(--avatar-size-large);
+    border-radius: calc(var(--avatar-size-large) / 2);
+    font-size: var(--font-size-huge);
+    line-height: var(--line-height-huge);
   }
 }
 
-.avatar[data-status='inactive'] {
-  opacity: 0.6;
-}
+.arrow {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  z-index: 0;
+  opacity: 0;
+  transition: all 0.2s linear;
+  transform: rotate(-90deg) translate3d(0, 6px, 0);
 
-.avatar[data-status='editing'] {
-  @nest & .border {
-    stroke-dasharray: 12%;
+  @nest & > svg {
+    display: block;
+    width: 11px;
+    height: 7px;
+    position: absolute;
+    top: -5px;
+    left: calc(50% - 6px);
   }
-}
 
-.avatar[data-size='xsmall'] {
-  font-size: calc(var(--avatar-height) * 0.8);
-  width: calc(var(--avatar-height) * 0.8);
-  height: calc(var(--avatar-height) * 0.8);
-}
+  @nest .root[data-arrow-position='inside'] & {
+    transform: rotate(-90deg) translate3d(0, 6px, 0);
+    opacity: 0;
+  }
 
-.avatar[data-size='small'] {
-  font-size: var(--avatar-height);
-  width: var(--avatar-height);
-  height: var(--avatar-height);
-}
+  @nest .root[data-arrow-position='top'] & {
+    opacity: 1;
+    transform: rotate(0deg);
+  }
 
-.avatar[data-size='medium'] {
-  font-size: calc(var(--avatar-height) * 1.3);
-  width: calc(var(--avatar-height) * 1.3);
-  height: calc(var(--avatar-height) * 1.3);
+  @nest .root[data-arrow-position='bottom'] & {
+    opacity: 1;
+    transform: rotate(-180deg);
+  }
 }
 
-.avatarInner {
+.inner {
   position: relative;
   width: 100%;
   height: 100%;
 
-  @nest & .avatarInitials {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    color: var(--white);
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.35em;
-    font-weight: 600;
-    line-height: 0;
-    text-transform: uppercase;
-    text-align: center;
+  @nest & > svg {
+    display: block;
+    height: 100%;
+    width: 100%;
     border-radius: 50%;
   }
 }
 
-.border {
-  fill: var(--component-bg);
+.stroke {
+  stroke-width: 3px;
+  vector-effect: non-scaling-stroke;
 
-  @nest .root[data-tone='navbar'] & {
-    fill: var(--main-navigation-color);
+  @nest .root[data-status='editing'] & {
+    stroke-dasharray: 2 4;
+    stroke-linecap: round;
+    animation: avatarEditingSpin 250ms infinite linear;
   }
 }
 
-.backgroundFill {
-  stroke-width: 1;
+.bgStroke {
+  stroke-width: 4px;
+  vector-effect: non-scaling-stroke;
   stroke: var(--component-bg);
 
   @nest .root[data-tone='navbar'] & {
     stroke: var(--main-navigation-color);
   }
 }
 
-.arrow {
-  position: absolute;
+.initials {
   width: 100%;
   height: 100%;
-  box-sizing: border-box;
-  fill: currentColor;
-  z-index: 0;
-  opacity: 0;
-  transition: all 0.2s linear;
-  transform: rotate(-90deg) translate3d(0, 5px, 0);
-
-  @nest & > svg {
-    width: 11px;
-    height: 7px;
-    position: absolute;
-    top: -4px;
-    left: calc(50% - 5.5px);
-    transform-origin: 0 0;
-  }
-}
-
-.arrow[data-dock='inside'] {
-  transform: rotate(-90deg) translate3d(0, 5px, 0);
-  opacity: 0;
-}
-
-.arrow[data-dock='top'] {
-  opacity: 1;
-  transform: rotate(0deg);
-}
-
-.arrow[data-dock='bottom'] {
-  opacity: 1;
-  transform: rotate(-180deg);
-}
+  color: var(--white);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  text-transform: uppercase;
+  text-align: center;
+  border-radius: 50%;
 
-@keyframes spinning {
-  0% {
-    transform: rotate(0deg);
+  @nest & > span {
+    display: block;
+    margin-top: -1px;
   }
 
-  100% {
-    transform: rotate(360deg);
+  @nest .root[data-tone='navbar'] & {
+    color: var(--main-navigation-color);
   }
 }