Redesign: Update main navigation "New post" button & bg-highlight token (#40738)

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>

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;

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

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