Redesign: Update main layout background colors (#40333)

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 {

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 */}

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 {

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

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>
 

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