Deprecate need for revert-layer CSS (#37632)

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}

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(

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
                 />
               )}
             </>

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>

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 {

app/javascript/styles/mastodon/components.scss

@@ -275,7 +275,7 @@
   height: 24px;
   aspect-ratio: 1;
 
-  path {
+  &:not(.icon--no-fill) path {
     fill: currentColor;
   }
 }