Change text color for filters

app/javascript/mastodon/components/filter_warning.tsx

@@ -15,8 +15,11 @@ export const FilterWarning: React.FC<{
     <p>
       <FormattedMessage
         id='filter_warning.matches_filter'
-        defaultMessage='Matches filter “{title}”'
-        values={{ title }}
+        defaultMessage='Matches filter “<span>{title}</span>”'
+        values={{
+          title,
+          span: (chunks) => <span className='filter-name'>{chunks}</span>,
+        }}
       />
     </p>
   </StatusBanner>

app/javascript/mastodon/locales/en.json

@@ -305,7 +305,7 @@
   "filter_modal.select_filter.subtitle": "Use an existing category or create a new one",
   "filter_modal.select_filter.title": "Filter this post",
   "filter_modal.title.status": "Filter a post",
-  "filter_warning.matches_filter": "Matches filter “{title}”",
+  "filter_warning.matches_filter": "Matches filter “<span>{title}</span>”",
   "filtered_notifications_banner.pending_requests": "From {count, plural, =0 {no one} one {one person} other {# people}} you may know",
   "filtered_notifications_banner.title": "Filtered notifications",
   "firehose.all": "All",

app/javascript/styles/mastodon/components.scss

@@ -11123,6 +11123,7 @@ noscript {
 
   p {
     margin-bottom: 8px;
+    font-weight: 500;
   }
 
   .link-button {
@@ -11130,4 +11131,17 @@ noscript {
     line-height: inherit;
     font-weight: 500;
   }
+
+  &--filter {
+    color: $darker-text-color;
+
+    p {
+      font-weight: normal;
+    }
+
+    .filter-name {
+      font-weight: 500;
+      color: $secondary-text-color;
+    }
+  }
 }