Redesign: Update main layout background colors (#40333)

app/javascript/styles/mastodon/_mixins.scss

@@ -119,6 +119,25 @@
   }
 }
 
+/**
+ * Scroll gradient
+ */
+
+@mixin scroll-gradient($position, $background-color: var(--color-bg-primary)) {
+  content: '';
+  position: absolute;
+  @if $position == 'top' {
+    top: 100%;
+  } @else {
+    bottom: 100%;
+  }
+
+  inset-inline: 0;
+  height: calc(var(--space-4xl) * 2);
+  background: linear-gradient(to $position, transparent, $background-color);
+  pointer-events: none;
+}
+
 /**
  * Search input styles
  */

app/javascript/styles/mastodon/basics.scss

@@ -14,6 +14,8 @@ html {
 
   &[data-redesign='true'] {
     --font-body: Inter, sans-serif;
+
+    background: var(--color-bg-blend-solid);
   }
 
   --outline-focus-default: 2px solid var(--color-border-brand);
@@ -54,7 +56,6 @@ html.has-modal {
 
 body {
   font-family: var(--font-body);
-  background: var(--color-bg-primary);
   font-size: 13px;
   line-height: 18px;
   font-weight: 400;

app/javascript/styles/mastodon/tokens/theme/_dark.scss

@@ -40,7 +40,16 @@
   --overlay-strength-secondary: 4%;
   --color-bg-secondary: var(--color-grey-900);
   --color-bg-tertiary: var(--color-grey-800); // legacy
-  --color-bg-blend: #{utils.css-alpha(var(--color-black), 30%)};
+  --color-bg-blend-strength: 30%;
+  --color-bg-blend: #{utils.css-alpha(
+      var(--color-black),
+      var(--color-bg-blend-strength)
+    )};
+  --color-bg-blend-solid: color-mix(
+    in srgb,
+    var(--color-bg-primary),
+    var(--color-black) var(--color-bg-blend-strength)
+  );
   --color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 5%)};
 
   // Utility

app/javascript/styles/mastodon/tokens/theme/_light.scss

@@ -36,7 +36,16 @@
   --overlay-strength-secondary: 4%;
   --color-bg-secondary: var(--color-grey-50);
   --color-bg-tertiary: var(--color-grey-100); // legacy
-  --color-bg-blend: #{utils.css-alpha(var(--color-text-primary), 4%)};
+  --color-bg-blend-strength: 4%;
+  --color-bg-blend: #{utils.css-alpha(
+      var(--color-grey-950),
+      var(--color-bg-blend-strength)
+    )};
+  --color-bg-blend-solid: color-mix(
+    in srgb,
+    var(--color-bg-primary),
+    var(--color-grey-950) var(--color-bg-blend-strength)
+  );
   --color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 4%)};
 
   // Utility