From bb52c51b2f47faeb7ba232c8720500361808a410 Mon Sep 17 00:00:00 2001
From: diondiondion <mail@diondiondion.com>
Date: Tue, 29 Sep 2026 10:56:02 +0000
Subject: [PATCH] Redesign: Update main navigation "New post" button &
 bg-highlight token (#40738)

---
 .../navigation_panel/redesign/index.tsx       | 27 +++++++++++--------
 .../redesign/styles.module.scss               |  4 +++
 .../styles/mastodon/tokens/theme/_dark.scss   |  2 +-
 .../styles/mastodon/tokens/theme/_light.scss  |  2 +-
 4 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
index 7928a2f59ed..4184c0c408f 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/index.tsx
@@ -20,6 +20,7 @@ import { fetchFollowRequests } from '@/mastodon/actions/accounts';
 import { fetchLists } from '@/mastodon/actions/lists';
 import { closeNavigation } from '@/mastodon/actions/navigation';
 import { fetchFollowedHashtags } from '@/mastodon/actions/tags_typed';
+import { Button } from '@/mastodon/components/button/redesign';
 import { Callout } from '@/mastodon/components/callout/redesign';
 import { FOCUS_TARGET } from '@/mastodon/components/navigation_focus_target';
 import { useScrollSensor } from '@/mastodon/hooks/useScrollSensor';
@@ -170,17 +171,21 @@ export const RedesignNavigationPanel: React.FC<{
         <>
           {transientSingleColumn && <TransientSingleColumnCallout />}
           <ul className={classes.list}>
-            <NavigationLink
-              withSpaceAfter
-              as='button'
-              onClick={openComposer}
-              iconComponent={PenNibIcon}
-            >
-              <FormattedMessage
-                id='tabs_bar.publish'
-                defaultMessage='New Post'
-              />
-            </NavigationLink>
+            <li>
+              <Button
+                leadingIcon={PenNibIcon}
+                onClick={openComposer}
+                variant='solid'
+                color='accent'
+                size='md'
+                className={classes.newPostButton}
+              >
+                <FormattedMessage
+                  id='tabs_bar.publish'
+                  defaultMessage='New Post'
+                />
+              </Button>
+            </li>
             <NavigationLink to='/home' iconComponent={HouseIcon}>
               <FormattedMessage id='tabs_bar.home' defaultMessage='Home' />
             </NavigationLink>
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 2e30383c0a8..69d91158a81 100644
--- a/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
+++ b/app/javascript/mastodon/features/navigation_panel/redesign/styles.module.scss
@@ -28,6 +28,10 @@
   margin-inline: var(--space-4);
 }
 
+.newPostButton {
+  margin-bottom: var(--space-4);
+}
+
 .footer {
   position: sticky;
   bottom: 0;
diff --git a/app/javascript/styles/mastodon/tokens/theme/_dark.scss b/app/javascript/styles/mastodon/tokens/theme/_dark.scss
index be9dee9ed67..f6f9789f646 100644
--- a/app/javascript/styles/mastodon/tokens/theme/_dark.scss
+++ b/app/javascript/styles/mastodon/tokens/theme/_dark.scss
@@ -45,7 +45,7 @@
     var(--color-bg-primary),
     var(--color-black) 30%
   );
-  --color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 5%)};
+  --color-bg-highlight: #{utils.css-alpha(var(--color-text-brand), 8%)};
 
   // Utility
   --color-bg-inverted: var(--color-grey-50);
diff --git a/app/javascript/styles/mastodon/tokens/theme/_light.scss b/app/javascript/styles/mastodon/tokens/theme/_light.scss
index 17172f9f168..af32064d697 100644
--- a/app/javascript/styles/mastodon/tokens/theme/_light.scss
+++ b/app/javascript/styles/mastodon/tokens/theme/_light.scss
@@ -41,7 +41,7 @@
     var(--color-bg-primary),
     var(--color-grey-950) 4%
   );
-  --color-bg-highlight: #{utils.css-alpha(var(--color-text-primary), 4%)};
+  --color-bg-highlight: #{utils.css-alpha(var(--color-text-brand), 8%)};
 
   // Utility
   --color-bg-inverted: var(--color-grey-950);