[components] Improve avatar CSS

sanity-io · Oct 6, 2020 · 9dbff3f · 9dbff3f
1 parent 2b2ffb8
commit 9dbff3f
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
diff --git a/packages/@sanity/components/src/avatar/avatarCounter.css b/packages/@sanity/components/src/avatar/avatarCounter.css
@@ -14,7 +14,14 @@
   box-sizing: border-box;
   user-select: none;
   color: inherit;
-  box-shadow: inset 0 0 0 1.5px var(--gray);
+  box-shadow: inset 0 0 0 1.5px var(--gray-light);
+  color: var(--component-text-color);
+
+  @nest &[data-tone='navbar'] {
+    box-shadow: inset 0 0 0 1.5px
+      color(var(--main-navigation-color) blend(var(--main-navigation-color--inverted) 40%));
+    color: var(--main-navigation-color--inverted);
+  }
 
   @nest & > span {
     margin-top: -1px;

diff --git a/packages/@sanity/components/src/avatar/avatarStack.tsx b/packages/@sanity/components/src/avatar/avatarStack.tsx
@@ -34,13 +34,13 @@ export function AvatarStack(props: AvatarStackProps & React.HTMLProps<HTMLDivEle
       <div {...restProps} className={classNames(styles.root, className)} data-size={size}>
         {len === 0 && (
           <div>
-            <AvatarCounter count={len} />
+            <AvatarCounter count={len} tone={tone} />
           </div>
         )}
 
         {len !== 0 && extraCount > 1 && (
           <div>
-            <AvatarCounter count={extraCount} size={size} />
+            <AvatarCounter count={extraCount} size={size} tone={tone} />
           </div>
         )}