nicolium: migrate avatar stack to scss

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/accounts/avatar-stack.tsx

@@ -1,4 +1,3 @@
-import clsx from 'clsx';
 import React from 'react';
 
 import Avatar from '@/components/ui/avatar';
@@ -10,19 +9,18 @@ interface IAvatarStack {
 }
 
 const AvatarStack: React.FC<IAvatarStack> = ({ accountIds, limit = 3 }) => {
-  const dedupAccountIds = React.useMemo(() => [...new Set(accountIds)], [accountIds]);
-  const { data: accounts } = useAccounts(dedupAccountIds.slice(0, limit));
+  const dedupAccountIds = React.useMemo(
+    () => [...new Set(accountIds)].slice(0, limit),
+    [accountIds],
+  );
+
+  const { data: accounts } = useAccounts(dedupAccountIds);
 
   return (
-    <div className='relative flex' aria-hidden>
+    <div className='⁂-avatar-stack' aria-hidden>
       {accounts.map((account, i) => (
-        <div
-          className={clsx('relative', { '-ml-3': i !== 0 })}
-          key={account.id}
-          style={{ zIndex: limit - i }}
-        >
+        <div key={account.id} style={{ zIndex: limit - i }}>
           <Avatar
-            className='!rounded-full ring-1 ring-white dark:ring-primary-900'
             src={account.avatar}
             alt={account.avatar_description}
             size={20}

packages/nicolium/src/styles/new/accounts.scss

@@ -286,3 +286,31 @@
     }
   }
 }
+
+.⁂-avatar-stack {
+  --avatar-stack-background: white;
+
+  position: relative;
+  display: flex;
+
+  .dark & {
+    --avatar-stack-background: rgb(var(--color-primary-900));
+  }
+
+  .black & {
+    --avatar-stack-background: black;
+  }
+
+  > div {
+    position: relative;
+
+    &:not(:first-child) {
+      margin-left: -0.75rem;
+    }
+
+    .⁂-avatar {
+      border-radius: 9999px !important;
+      outline: 2px solid var(--avatar-stack-background);
+    }
+  }
+}

packages/nicolium/src/styles/new/components.scss

@@ -542,10 +542,13 @@ a.⁂-list-item,
       @include mixins.text($theme: inherit, $size: sm);
     }
 
-    .⁂-avatar {
+    .⁂-avatar-stack .⁂-avatar {
+      --avatar-stack-background: rgb(var(--color-primary-600));
+
       width: 1.5rem !important;
       height: 1.5rem !important;
-      outline: 2px solid rgb(var(--color-primary-600));
+
+      /* outline: 2px solid rgb(var(--color-primary-600)); */
       box-shadow: none;
     }
   }