From 7169dfe61a60595bcd11b9cbdb84506ff6e90801 Mon Sep 17 00:00:00 2001
From: Board <26598490+BoardTM@users.noreply.github.com>
Date: Wed, 15 May 2024 01:07:33 +0200
Subject: [PATCH] ThemeAttributes: add larger avatar url variables to avatars
 (#2449)

Co-authored-by: vee <vendicated@riseup.net>
---
 src/plugins/themeAttributes/README.md | 10 ++++++++-
 src/plugins/themeAttributes/index.ts  | 30 ++++++++++++++++++++++++++-
 src/utils/constants.ts                |  4 ++++
 3 files changed, 42 insertions(+), 2 deletions(-)

diff --git a/src/plugins/themeAttributes/README.md b/src/plugins/themeAttributes/README.md
index 87cb803c5..89001aae4 100644
--- a/src/plugins/themeAttributes/README.md
+++ b/src/plugins/themeAttributes/README.md
@@ -1,6 +1,6 @@
 # ThemeAttributes
 
-This plugin adds data attributes to various elements inside Discord
+This plugin adds data attributes and CSS variables to various elements inside Discord
 
 This allows themes to more easily theme those elements or even do things that otherwise wouldn't be possible
 
@@ -19,3 +19,11 @@ This allows themes to more easily theme those elements or even do things that ot
 - `data-is-self` is a boolean indicating whether this is the current user's message
 
 ![image](https://github.com/Vendicated/Vencord/assets/45497981/34bd5053-3381-402f-82b2-9c812cc7e122)
+
+## CSS Variables
+
+### Avatars
+
+`--avatar-url-<resolution>` contains a URL for the users avatar with the size attribute adjusted for the resolutions `128, 256, 512, 1024, 2048, 4096`.
+
+![image](https://github.com/Vendicated/Vencord/assets/26598490/192ddac0-c827-472f-9933-fa99ff36f723)
diff --git a/src/plugins/themeAttributes/index.ts b/src/plugins/themeAttributes/index.ts
index b8ceac621..b80844546 100644
--- a/src/plugins/themeAttributes/index.ts
+++ b/src/plugins/themeAttributes/index.ts
@@ -9,10 +9,11 @@ import definePlugin from "@utils/types";
 import { UserStore } from "@webpack/common";
 import { Message } from "discord-types/general";
 
+
 export default definePlugin({
     name: "ThemeAttributes",
     description: "Adds data attributes to various elements for theming purposes",
-    authors: [Devs.Ven],
+    authors: [Devs.Ven, Devs.Board],
 
     patches: [
         // Add data-tab-id to all tab bar items
@@ -32,9 +33,36 @@ export default definePlugin({
                 match: /\.messageListItem(?=,"aria)/,
                 replace: "$&,...$self.getMessageProps(arguments[0])"
             }
+        },
+
+        // add --avatar-url-<resolution> css variable to avatar img elements
+        // popout profiles
+        {
+            find: ".LABEL_WITH_ONLINE_STATUS",
+            replacement: {
+                match: /src:null!=\i\?(\i).{1,50}"aria-hidden":!0/,
+                replace: "$&,style:$self.getAvatarStyles($1)"
+            }
+        },
+        // chat avatars
+        {
+            find: "showCommunicationDisabledStyles",
+            replacement: {
+                match: /src:(\i),"aria-hidden":!0/,
+                replace: "$&,style:$self.getAvatarStyles($1)"
+            }
         }
     ],
 
+    getAvatarStyles(src: string) {
+        return Object.fromEntries(
+            [128, 256, 512, 1024, 2048, 4096].map(size => [
+                `--avatar-url-${size}`,
+                `url(${src.replace(/\d+$/, String(size))})`
+            ])
+        );
+    },
+
     getMessageProps(props: { message: Message; }) {
         const author = props.message?.author;
         const authorId = author?.id;
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index e446a27b6..69c18cd56 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -382,6 +382,10 @@ export const Devs = /* #__PURE__*/ Object.freeze({
         name: "ant0n",
         id: 145224646868860928n
     },
+    Board: {
+        name: "BoardTM",
+        id: 285475344817848320n,
+    },
     philipbry: {
         name: "philipbry",
         id: 554994003318276106n