refactor: converted sass colors for _avatar.scss

stylesheets/_avatar.scss

@@ -1,8 +1,4 @@
 // Module: Avatar
-$borderAvatarColor: unquote(
-  '#00000059'
-); // search for references on ts TODO: make this exposed on ts
-
 .module-avatar {
   position: relative;
   vertical-align: middle;
@@ -13,7 +9,7 @@ $borderAvatarColor: unquote(
   img {
     object-fit: cover;
     border-radius: 50%;
-    border: 1px solid $borderAvatarColor;
+    border: 1px solid var(--color-avatar-border-color);
   }
 }
 

ts/components/avatar/AvatarPlaceHolder/AvatarPlaceHolder.tsx

@@ -21,7 +21,6 @@ const sha512FromPubkey = async (pubkey: string): Promise<string> => {
 const cachedHashes = new Map<string, number>();
 
 const avatarPlaceholderColors = ['#5ff8b0', '#26cdb9', '#f3c615', '#fcac5a'];
-const avatarBorderColor = '#00000059';
 
 function useHashBasedOnPubkey(pubkey: string) {
   const [hash, setHash] = useState<number | undefined>(undefined);
@@ -89,7 +88,7 @@ export const AvatarPlaceHolder = (props: Props) => {
             r={rWithoutBorder}
             fill="#d2d2d3"
             shapeRendering="geometricPrecision"
-            stroke={avatarBorderColor}
+            stroke={'var(--color-avatar-border-color)'}
             strokeWidth="1"
           />
         </g>
@@ -114,7 +113,7 @@ export const AvatarPlaceHolder = (props: Props) => {
           r={rWithoutBorder}
           fill={bgColor}
           shapeRendering="geometricPrecision"
-          stroke={avatarBorderColor}
+          stroke={'var(--color-avatar-border-color)'}
           strokeWidth="1"
         />
         <text

ts/themes/SessionTheme.tsx

@@ -13,6 +13,7 @@ const borderDarkThemeColor = '#ffffff0F';
 
 // THEME INDEPEDENT COLORS
 const sessionBlack = '#282829';
+const avatarBorderColor = '#00000059';
 
 // DARK COLORS
 const darkColorAccent = accentDarkTheme;
@@ -81,6 +82,7 @@ export const switchHtmlToDarkTheme = () => {
     darkColorSentMessageBg
   );
   document.documentElement.style.setProperty('--color-sent-message-text', sessionBlack);
+  document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
   document.documentElement.style.setProperty(
     '--color-clickable-hovered',
     darkColorClickableHovered
@@ -229,6 +231,7 @@ export const switchHtmlToLightTheme = () => {
   );
   // TODO: This might be wrong. Didn't merge correctly.
   document.documentElement.style.setProperty('--color-sent-message-text', black);
+  document.documentElement.style.setProperty('--color-avatar-border-color', avatarBorderColor);
   document.documentElement.style.setProperty(
     '--color-clickable-hovered',
     lightColorClickableHovered