Fix inversion of emoji colours based on dark/light mode (#37120)

app/javascript/styles/application.scss

@@ -1,2 +1 @@
-@use 'mastodon/variables';
 @use 'common';

app/javascript/styles/common.scss

@@ -1,3 +1,4 @@
+@use 'mastodon/variables';
 @use 'mastodon/mixins';
 @use 'fonts/roboto';
 @use 'fonts/roboto-mono';
@@ -21,5 +22,4 @@
 @use 'mastodon/admin';
 @use 'mastodon/dashboard';
 @use 'mastodon/rtl';
-@use 'mastodon/accessibility';
 @use 'mastodon/rich_text';

app/javascript/styles/contrast.scss

@@ -1,3 +1,2 @@
-@use 'mastodon/variables';
 @use 'common';
 @use 'mastodon/high-contrast';

app/javascript/styles/mastodon-light.scss

@@ -1,4 +1 @@
-@use 'mastodon/variables' with (
-  $emojis-requiring-inversion: 'chains'
-);
 @use 'common';

app/javascript/styles/mastodon/_variables.scss

@@ -20,8 +20,3 @@ $no-columns-breakpoint: 600px;
 $font-sans-serif: 'mastodon-font-sans-serif' !default;
 $font-display: 'mastodon-font-display' !default;
 $font-monospace: 'mastodon-font-monospace' !default;
-
-$emojis-requiring-inversion: 'back' 'copyright' 'curly_loop' 'currency_exchange'
-  'end' 'heavy_check_mark' 'heavy_division_sign' 'heavy_dollar_sign'
-  'heavy_minus_sign' 'heavy_multiplication_x' 'heavy_plus_sign' 'on'
-  'registered' 'soon' 'spider' 'telephone_receiver' 'tm' 'top' 'wavy_dash' !default;

app/javascript/styles/mastodon/accessibility.scss

@@ -1,13 +0,0 @@
-@use 'variables' as *;
-
-%emoji-color-inversion {
-  filter: invert(1);
-}
-
-.emojione {
-  @each $emoji in $emojis-requiring-inversion {
-    &[title=':#{$emoji}:'] {
-      @extend %emoji-color-inversion;
-    }
-  }
-}

app/javascript/styles/mastodon/theme/_utils.scss

@@ -1,3 +1,15 @@
 @function css-alpha($base-color, $amount) {
   @return #{rgb(from $base-color r g b / $amount)};
 }
+
+@mixin invert-on-light {
+  .invert-on-light {
+    filter: invert(1);
+  }
+}
+
+@mixin invert-on-dark {
+  .invert-on-dark {
+    filter: invert(1);
+  }
+}

app/javascript/styles/mastodon/theme/index.scss

@@ -1,6 +1,7 @@
 @use 'base';
 @use 'dark';
 @use 'light';
+@use 'utils';
 
 html {
   @include base.palette;
@@ -10,6 +11,7 @@ html {
 
     @media (prefers-color-scheme: dark) {
       @include dark.tokens;
+      @include utils.invert-on-dark;
 
       @media (prefers-contrast: more) {
         @include dark.contrast-overrides;
@@ -18,6 +20,7 @@ html {
 
     @media (prefers-color-scheme: light) {
       @include light.tokens;
+      @include utils.invert-on-light;
 
       @media (prefers-contrast: more) {
         @include light.contrast-overrides;
@@ -33,6 +36,7 @@ html:where(
   color-scheme: dark;
 
   @include dark.tokens;
+  @include utils.invert-on-dark;
 }
 
 html[data-user-theme='contrast'],
@@ -45,4 +49,5 @@ html:where([data-user-theme='mastodon-light']) {
   color-scheme: light;
 
   @include light.tokens;
+  @include utils.invert-on-light;
 }