From cd3c54095704d4d8232c3b23fd09fdbf4b4e6264 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Mon, 31 Aug 2026 13:40:19 +0000
Subject: [PATCH] Redesign: Update main layout background colors (#40333)

---
 .../redesign/header.module.scss               | 17 ++++-------------
 .../redesign/index.stories.tsx                |  8 +++++++-
 .../redesign/styles.module.scss               | 13 ++++---------
 .../columns_area/redesign.module.scss         | 18 ++++++++++++++++++
 .../ui/components/columns_area/redesign.tsx   |  2 +-
 app/javascript/styles/mastodon/_mixins.scss   | 19 +++++++++++++++++++
 app/javascript/styles/mastodon/basics.scss    |  3 ++-
 .../styles/mastodon/tokens/theme/_dark.scss   | 11 ++++++++++-
 .../styles/mastodon/tokens/theme/_light.scss  | 11 ++++++++++-
 9 files changed, 75 insertions(+), 27 deletions(-)

diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
index 544c8137c74..cccd26aec20 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/header.module.scss
@@ -13,22 +13,13 @@
 
   padding: var(--space-xl) var(--space-lg) var(--half-bottom-spacing);
   margin-bottom: var(--half-bottom-spacing);
-  background: var(--color-bg-primary);
+  background: var(--color-bg-blend-solid);
 
   &::after {
-    content: '';
-    position: absolute;
-    top: 100%;
-    inset-inline: 0;
-    height: var(--space-2xl);
-    background: linear-gradient(
-      to bottom,
-      var(--color-bg-primary),
-      transparent
-    );
-    pointer-events: none;
+    @include mixins.scroll-gradient(top, var(--color-bg-blend-solid));
+
     opacity: 0;
-    transition: opacity linear 200ms;
+    transition: opacity ease 250ms;
   }
 
   &[data-stuck='true']::after {
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.stories.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.stories.tsx
index 2ce583b1f5c..c3f57e9767a 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/index.stories.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.stories.tsx
@@ -10,7 +10,13 @@ const meta = {
   component: RedesignNavigationPanel,
   render(args) {
     return (
-      <div style={{ width: 320 }}>
+      <div
+        style={{
+          width: 320,
+          height: 600,
+          backgroundColor: 'var(--color-bg-blend-solid)',
+        }}
+      >
         <RedesignNavigationPanel {...args} />
         <div inert aria-hidden='true' className='logo-resources'>
           {/* In our web app, this icon is embedded server-side */}
diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
index 1159ba26c4c..de4cedc9744 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
@@ -28,18 +28,13 @@
   margin-top: auto;
   padding: var(--space-xl);
   padding-top: var(--space-2xs);
-  background-color: var(--color-bg-primary);
+  background-color: var(--color-bg-blend-solid);
 
   &::before {
-    content: '';
-    position: absolute;
-    bottom: 100%;
-    inset-inline: 0;
-    height: var(--space-2xl);
-    background: linear-gradient(to top, var(--color-bg-primary), transparent);
-    pointer-events: none;
+    @include mixins.scroll-gradient(bottom, var(--color-bg-blend-solid));
+
     opacity: 0;
-    transition: opacity linear 200ms;
+    transition: opacity ease 250ms;
   }
 
   &[data-stuck='true']::before {
diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
index cc45dc1d430..108bb1010b9 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
+++ b/app/javascript/mastodon/features/ui/components/columns_area/redesign.module.scss
@@ -56,3 +56,21 @@
     border-inline: 1px solid var(--color-border-primary);
   }
 }
+
+.columnHeader {
+  background: var(--color-bg-blend-solid);
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  border-top: 0;
+
+  @media (width >= $no-gap-breakpoint) {
+    border-top: 10px solid var(--color-bg-blend-solid);
+  }
+
+  // Fix bg color for legacy column headers.
+  // Remove when new column headers are in.
+  & :global(.column-header) {
+    background: var(--color-bg-primary);
+  }
+}
diff --git a/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx b/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx
index 6bac9746e4a..d948e430e15 100644
--- a/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx
+++ b/app/javascript/mastodon/features/ui/components/columns_area/redesign.tsx
@@ -68,7 +68,7 @@ export const ColumnsAreaRedesign: React.FC<{
         {isMobile ? <RedesignMobileNavigation /> : <ComposeRedesignButton />}
 
         <main className={classes.main}>
-          <div className='tabs-bar__wrapper'>
+          <div className={classes.columnHeader}>
             <TabsBarPortal />
           </div>
 
diff --git a/app/javascript/styles/mastodon/_mixins.scss b/app/javascript/styles/mastodon/_mixins.scss
index bfa30273032..75b3a993bac 100644
--- a/app/javascript/styles/mastodon/_mixins.scss
+++ b/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
  */
diff --git a/app/javascript/styles/mastodon/basics.scss b/app/javascript/styles/mastodon/basics.scss
index 0e594d05401..b4990326a7c 100644
--- a/app/javascript/styles/mastodon/basics.scss
+++ b/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;
diff --git a/app/javascript/styles/mastodon/tokens/theme/_dark.scss b/app/javascript/styles/mastodon/tokens/theme/_dark.scss
index a794c400446..d594a779eb5 100644
--- a/app/javascript/styles/mastodon/tokens/theme/_dark.scss
+++ b/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
diff --git a/app/javascript/styles/mastodon/tokens/theme/_light.scss b/app/javascript/styles/mastodon/tokens/theme/_light.scss
index 21b821a8d49..ffe2226b7a6 100644
--- a/app/javascript/styles/mastodon/tokens/theme/_light.scss
+++ b/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