Merge commit '1ae3b4672bffbc4aaf26f60c7063d6901239de5d' into glitch-soc/merge-upstream

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/basics.scss

@@ -10,6 +10,8 @@ html {
 
   --outline-focus-default: 2px solid var(--color-text-brand);
   --avatar-border-radius: 8px;
+  --max-media-height-small: 460px;
+  --max-media-height-large: 566px;
 
   // Variable for easily inverting directional UI elements,
   --text-x-direction: 1;

app/javascript/styles/mastodon/components.scss

@@ -7165,7 +7165,18 @@ a.status-card {
     // The size of single images is determined by their
     // aspect-ratio, applied via inline style attribute
     width: initial;
-    max-height: 460px;
+
+    // Prevent extremely tall images from essentially becoming invisible
+    min-width: 120px;
+    max-height: var(--max-media-height-small);
+
+    @container (width > 500px) {
+      max-height: var(--max-media-height-large);
+    }
+
+    .detailed-status & {
+      max-height: calc(2 * var(--max-media-height-large));
+    }
   }
 
   &--layout-2 {
@@ -7500,7 +7511,7 @@ a.status-card {
   position: relative;
   color: var(--color-text-on-media);
   background: var(--color-bg-media);
-  max-height: 460px;
+  max-height: var(--max-media-height-small);
   border-radius: 8px;
   box-sizing: border-box;
   display: flex;
@@ -7508,6 +7519,10 @@ a.status-card {
   outline-offset: -1px;
   z-index: 2;
 
+  @container (width > 500px) {
+    max-height: var(--max-media-height-large);
+  }
+
   video {
     display: block;
     z-index: -2;

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;
 }