From 76ab866d93e632ff565104c845faea6bf50dfec6 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Tue, 27 Jan 2026 15:45:35 +0100
Subject: [PATCH] Deprecate need for revert-layer CSS (#37632)

---
 app/javascript/mastodon/components/icon.tsx            |  9 ++++++++-
 .../features/account_timeline/components/badges.tsx    |  7 ++++++-
 .../features/account_timeline/components/fields.tsx    |  1 +
 .../account_timeline/components/fields_modal.tsx       |  1 +
 .../account_timeline/components/redesign.module.scss   | 10 ----------
 app/javascript/styles/mastodon/components.scss         |  2 +-
 6 files changed, 17 insertions(+), 13 deletions(-)

diff --git a/app/javascript/mastodon/components/icon.tsx b/app/javascript/mastodon/components/icon.tsx
index 165c214c108..f93e3757a38 100644
--- a/app/javascript/mastodon/components/icon.tsx
+++ b/app/javascript/mastodon/components/icon.tsx
@@ -13,6 +13,7 @@ interface Props extends React.SVGProps<SVGSVGElement> {
   children?: never;
   id: string;
   icon: IconProp;
+  noFill?: boolean;
 }
 
 export const Icon: React.FC<Props> = ({
@@ -20,6 +21,7 @@ export const Icon: React.FC<Props> = ({
   icon: IconComponent,
   className,
   'aria-label': ariaLabel,
+  noFill = false,
   ...other
 }) => {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -42,7 +44,12 @@ export const Icon: React.FC<Props> = ({
 
   return (
     <IconComponent
-      className={classNames('icon', `icon-${id}`, className)}
+      className={classNames(
+        'icon',
+        `icon-${id}`,
+        noFill && 'icon--no-fill',
+        className,
+      )}
       title={title}
       aria-hidden={ariaHidden}
       aria-label={ariaLabel}
diff --git a/app/javascript/mastodon/features/account_timeline/components/badges.tsx b/app/javascript/mastodon/features/account_timeline/components/badges.tsx
index 1c5942d90d3..1c7dca1ef53 100644
--- a/app/javascript/mastodon/features/account_timeline/components/badges.tsx
+++ b/app/javascript/mastodon/features/account_timeline/components/badges.tsx
@@ -37,7 +37,12 @@ export const AccountBadges: FC<{ accountId: string }> = ({ accountId }) => {
     let icon: ReactNode = undefined;
     if (isAdminBadge(role)) {
       icon = (
-        <Icon icon={IconAdmin} id='badge-admin' className={classes.badgeIcon} />
+        <Icon
+          icon={IconAdmin}
+          id='badge-admin'
+          className={classes.badgeIcon}
+          noFill
+        />
       );
     }
     badges.push(
diff --git a/app/javascript/mastodon/features/account_timeline/components/fields.tsx b/app/javascript/mastodon/features/account_timeline/components/fields.tsx
index ab29a8299e4..d407c5010fa 100644
--- a/app/javascript/mastodon/features/account_timeline/components/fields.tsx
+++ b/app/javascript/mastodon/features/account_timeline/components/fields.tsx
@@ -76,6 +76,7 @@ const RedesignAccountHeaderFields: FC<{ account: Account }> = ({ account }) => {
                   id='verified'
                   icon={IconVerified}
                   className={classes.fieldIconVerified}
+                  noFill
                 />
               )}
             </>
diff --git a/app/javascript/mastodon/features/account_timeline/components/fields_modal.tsx b/app/javascript/mastodon/features/account_timeline/components/fields_modal.tsx
index 103fffca505..5c29e77c110 100644
--- a/app/javascript/mastodon/features/account_timeline/components/fields_modal.tsx
+++ b/app/javascript/mastodon/features/account_timeline/components/fields_modal.tsx
@@ -81,6 +81,7 @@ export const AccountFieldsModal: FC<{
                       id='verified'
                       icon={IconVerified}
                       className={classes.fieldIconVerified}
+                      noFill
                     />
                   )}
                 </dd>
diff --git a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
index 4bc64d05a98..0f46fdfbfdd 100644
--- a/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
+++ b/app/javascript/mastodon/features/account_timeline/components/redesign.module.scss
@@ -53,11 +53,6 @@ h1.name > small {
 
 svg.badgeIcon {
   opacity: 1;
-  fill: revert-layer;
-
-  path {
-    fill: revert-layer;
-  }
 }
 
 .fieldList {
@@ -90,11 +85,6 @@ svg.badgeIcon {
 .fieldIconVerified {
   width: 1rem;
   height: 1rem;
-
-  // Need to override .icon path.
-  path {
-    fill: revert-layer;
-  }
 }
 
 .fieldNumbersWrapper {
diff --git a/app/javascript/styles/mastodon/components.scss b/app/javascript/styles/mastodon/components.scss
index 6526b380df3..b30509813f3 100644
--- a/app/javascript/styles/mastodon/components.scss
+++ b/app/javascript/styles/mastodon/components.scss
@@ -275,7 +275,7 @@
   height: 24px;
   aspect-ratio: 1;
 
-  path {
+  &:not(.icon--no-fill) path {
     fill: currentColor;
   }
 }