From 1bb1aba44ddd5bed8a9c2e6e9982f64385d4f918 Mon Sep 17 00:00:00 2001
From: Echo <ChaosExAnima@users.noreply.github.com>
Date: Mon, 24 Aug 2026 15:04:35 +0000
Subject: [PATCH] Redesign: Add new tonal variant button (#40262)

---
 .../components/button/redesign.module.scss    | 81 +++++++++++++------
 .../components/button/redesign.stories.tsx    |  4 +-
 .../mastodon/components/button/redesign.tsx   |  8 +-
 .../mastodon/components/card/index.tsx        |  1 +
 .../mastodon/components/menu/card.tsx         | 13 ++-
 .../mastodon/components/menu/index.tsx        | 14 +---
 .../modal_shell/redesign.stories.tsx          |  2 +-
 .../features/compose/redesign/footer.tsx      |  2 +-
 .../compose/redesign/modal_cancel.tsx         |  4 +-
 .../compose/redesign/modal_rearrange.tsx      |  2 +-
 .../compose/redesign/modal_switch.tsx         |  2 +-
 .../features/compose/redesign/poll.tsx        |  2 +-
 .../features/compose/redesign/trigger.tsx     |  2 +-
 .../features/compose/redesign/upload.tsx      |  2 +-
 14 files changed, 82 insertions(+), 57 deletions(-)

diff --git a/app/javascript/mastodon/components/button/redesign.module.scss b/app/javascript/mastodon/components/button/redesign.module.scss
index b0b887732c5..857fca0f6a1 100644
--- a/app/javascript/mastodon/components/button/redesign.module.scss
+++ b/app/javascript/mastodon/components/button/redesign.module.scss
@@ -54,6 +54,14 @@ a.base {
   }
 }
 
+@mixin active {
+  &:active,
+  &[aria-pressed='true'],
+  &[aria-expanded='true'] {
+    @content;
+  }
+}
+
 // Sizes
 
 .xs {
@@ -85,33 +93,64 @@ a.base {
 
   &.accent {
     --bg: var(--color-bg-brand-base);
-    --bg-hover: var(--color-bg-brand-base-hover);
-  }
-
-  .neutral {
-    // This technically is a duplicate, but it's added so TS realizes this class is an option.
-    --bg: var(--color-bg-inverted);
-    --fg: var(--color-text-inverted);
-  }
-
-  &.tonal:not(:active, [aria-pressed='true'], [aria-expanded='true']) {
-    --bg: var(--color-bg-highlight);
-    --fg: var(--color-text-primary);
+    --fg: var(--color-text-on-brand-base);
   }
 
   &.destructive {
     --bg: var(--color-bg-error-base);
-    --bg-hover: var(--color-bg-error-base-hover);
     --fg: var(--color-text-on-error-base);
   }
 }
 
+// Tonal
+
+.tonal {
+  --bg-color: var(--color-text-primary);
+  --bg-opacity: 4%;
+  --bg: rgb(from var(--bg-color) r g b / var(--bg-opacity));
+  --bg-hover-opacity: 10%;
+  --bg-hover: rgb(from var(--bg-color) r g b / var(--bg-hover-opacity));
+
+  &.neutral {
+    @include active {
+      --bg: var(--color-bg-inverted);
+      --fg: var(--color-text-inverted);
+    }
+  }
+
+  &.accent,
+  &.destructive {
+    --bg-opacity: 10%;
+    --bg-hover-opacity: 20%;
+
+    @include active {
+      --bg-opacity: 100%;
+    }
+  }
+
+  &.accent {
+    --bg-color: var(--color-bg-brand-base);
+    --fg: var(--color-text-brand);
+
+    @include active {
+      --fg: var(--color-text-on-brand-base);
+    }
+  }
+
+  &.destructive {
+    --bg-color: var(--color-bg-error-base);
+    --fg: var(--color-text-error);
+
+    @include active {
+      --fg: var(--color-text-on-error-base);
+    }
+  }
+}
+
 // Ghost
 
 .ghost {
-  &:active,
-  &[aria-pressed='true'],
-  &[aria-expanded='true'] {
+  @include active {
     --bg: var(--color-bg-inverted);
     --fg: var(--color-text-inverted);
   }
@@ -119,9 +158,7 @@ a.base {
   &.accent {
     --fg: var(--color-text-brand);
 
-    &:active,
-    &[aria-pressed='true'],
-    &[aria-expanded='true'] {
+    @include active {
       --bg: var(--color-bg-brand-base);
       --fg: var(--color-text-on-brand-base);
     }
@@ -130,11 +167,9 @@ a.base {
   &.destructive {
     --fg: var(--color-text-error);
 
-    &:active,
-    &[aria-pressed='true'],
-    &[aria-expanded='true'] {
-      --fg: var(--color-text-on-error-base);
+    @include active {
       --bg: var(--color-bg-error-base);
+      --fg: var(--color-text-on-error-base);
     }
   }
 }
diff --git a/app/javascript/mastodon/components/button/redesign.stories.tsx b/app/javascript/mastodon/components/button/redesign.stories.tsx
index 4c53745e7ab..1175b759d41 100644
--- a/app/javascript/mastodon/components/button/redesign.stories.tsx
+++ b/app/javascript/mastodon/components/button/redesign.stories.tsx
@@ -44,11 +44,11 @@ const meta = {
     },
     variant: {
       control: 'inline-radio',
-      options: ['solid', 'ghost'],
+      options: ['solid', 'tonal', 'ghost'],
     },
     color: {
       control: 'inline-radio',
-      options: ['neutral', 'accent', 'tonal', 'destructive'],
+      options: ['neutral', 'accent', 'destructive'],
     },
     leadingIcon: iconArgType,
     trailingIcon: iconArgType,
diff --git a/app/javascript/mastodon/components/button/redesign.tsx b/app/javascript/mastodon/components/button/redesign.tsx
index 887fb24f2f8..d9fc4caec69 100644
--- a/app/javascript/mastodon/components/button/redesign.tsx
+++ b/app/javascript/mastodon/components/button/redesign.tsx
@@ -16,8 +16,8 @@ export const buttonClasses = classes;
 
 interface ButtonPropsBase<As extends 'a' | 'button'> {
   size?: 'lg' | 'md' | 'sm' | 'xs';
-  variant?: 'solid' | 'ghost';
-  color?: 'accent' | 'neutral' | 'tonal' | 'destructive';
+  variant?: 'solid' | 'tonal' | 'ghost';
+  color?: 'accent' | 'neutral' | 'destructive';
   onClick?: React.MouseEventHandler<
     As extends 'button' ? HTMLButtonElement : HTMLAnchorElement
   >;
@@ -36,8 +36,8 @@ type ButtonProps = ButtonButtonProps | ButtonAnchorProps | ButtonLinkProps;
 
 const BaseButton: React.FC<ButtonProps> = ({
   size = 'md',
-  variant = 'solid',
-  color = 'tonal',
+  variant = 'tonal',
+  color = 'neutral',
   as: asComp = 'button',
   children,
   className,
diff --git a/app/javascript/mastodon/components/card/index.tsx b/app/javascript/mastodon/components/card/index.tsx
index ea93334cfc6..0219c3860c9 100644
--- a/app/javascript/mastodon/components/card/index.tsx
+++ b/app/javascript/mastodon/components/card/index.tsx
@@ -54,6 +54,7 @@ export const Card = <As extends React.ElementType>({
 
       {!hideButton && (
         <IconButton
+          variant='solid'
           icon={TrashIcon}
           onClick={onDelete}
           color='destructive'
diff --git a/app/javascript/mastodon/components/menu/card.tsx b/app/javascript/mastodon/components/menu/card.tsx
index 2f827f790b0..39a2b2e521a 100644
--- a/app/javascript/mastodon/components/menu/card.tsx
+++ b/app/javascript/mastodon/components/menu/card.tsx
@@ -1,24 +1,21 @@
-import type { CSSProperties } from 'react';
-
 import classNames from 'classnames';
 
-import type { Merge } from 'type-fest';
+import type { PolymorphicProps } from '@/types/polymorphic';
 
 import { Popover } from '../popover';
 import type { PopoverProps } from '../popover';
 
 import classes from './styles.module.scss';
 
-export type MenuCardProps<As extends React.ElementType> = Merge<
+export type MenuCardProps<As extends React.ElementType> = PolymorphicProps<
   {
-    as?: As;
     children: React.ReactNode;
     className?: string;
     elevation?: 1 | 2;
     maxWidth?: number | string;
     style?: React.CSSProperties;
   },
-  React.ComponentProps<As>
+  As
 >;
 
 export const MenuCard = <As extends React.ElementType>({
@@ -41,7 +38,7 @@ export const MenuCard = <As extends React.ElementType>({
           '--_max-card-width':
             typeof maxWidth === 'number' ? `${maxWidth}px` : maxWidth,
           ...style,
-        } as CSSProperties
+        } as React.CSSProperties
       }
     >
       {children}
@@ -85,7 +82,7 @@ export const PopoverMenuCard = <As extends React.ElementType>({
       {({ props: popoverChildProps }) => (
         <MenuCard
           {...popoverChildProps}
-          {...props}
+          {...(props as React.ComponentPropsWithoutRef<As>)}
           className={classNames(
             className,
             props.maxWidth && classes.popoverCard,
diff --git a/app/javascript/mastodon/components/menu/index.tsx b/app/javascript/mastodon/components/menu/index.tsx
index 37cc77f91cc..6295254067d 100644
--- a/app/javascript/mastodon/components/menu/index.tsx
+++ b/app/javascript/mastodon/components/menu/index.tsx
@@ -1,4 +1,3 @@
-import type React from 'react';
 import {
   createContext,
   use,
@@ -8,7 +7,7 @@ import {
   useState,
 } from 'react';
 
-import type { Merge } from 'type-fest';
+import type { PolymorphicProps } from '@/types/polymorphic';
 
 import { Button } from '../button/redesign';
 
@@ -243,18 +242,11 @@ export const Menu: React.FC<MenuProps> = ({ type = 'actions', children }) => {
   return <MenuContext value={contextValue}>{children}</MenuContext>;
 };
 
-export type MenuTriggerProps<As extends React.ElementType> = Merge<
-  React.ComponentProps<As>,
-  {
-    as?: As;
-  }
->;
-
 export const MenuTrigger = <As extends React.ElementType>({
   as: asComp,
   children,
   ...props
-}: MenuTriggerProps<As>) => {
+}: PolymorphicProps<object, As>) => {
   const Component = asComp ?? Button;
   const { menuTriggerProps } = useMenuContext();
   return (
@@ -282,7 +274,7 @@ export const MenuList = <As extends React.ElementType>({
       reference={popover.reference}
       popoverElement={popover.popover}
       container={null}
-      {...props}
+      {...(props as React.ComponentPropsWithoutRef<As>)}
       {...menuListProps}
     >
       {type === 'navigation' ? <ul>{children}</ul> : children}
diff --git a/app/javascript/mastodon/components/modal_shell/redesign.stories.tsx b/app/javascript/mastodon/components/modal_shell/redesign.stories.tsx
index ee17187fb1c..ee278c393c3 100644
--- a/app/javascript/mastodon/components/modal_shell/redesign.stories.tsx
+++ b/app/javascript/mastodon/components/modal_shell/redesign.stories.tsx
@@ -38,7 +38,7 @@ const meta = {
         <ModalActions align={actionAlign}>
           <Button>Cancel</Button>
 
-          <Button color='neutral'>Save</Button>
+          <Button variant='solid'>Save</Button>
         </ModalActions>
       </ModalShell>
     );
diff --git a/app/javascript/mastodon/features/compose/redesign/footer.tsx b/app/javascript/mastodon/features/compose/redesign/footer.tsx
index 5037ae3ee50..035bec8ce56 100644
--- a/app/javascript/mastodon/features/compose/redesign/footer.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/footer.tsx
@@ -83,7 +83,7 @@ export const ComposeFooter: React.FC<{ onEmojiPick: OnEmojiPick }> = ({
         </span>
 
         <Button
-          color='neutral'
+          variant='solid'
           type='submit'
           disabled={!canSubmit}
           loading={isSubmitting}
diff --git a/app/javascript/mastodon/features/compose/redesign/modal_cancel.tsx b/app/javascript/mastodon/features/compose/redesign/modal_cancel.tsx
index 8d65f75223f..ee5d18f2079 100644
--- a/app/javascript/mastodon/features/compose/redesign/modal_cancel.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/modal_cancel.tsx
@@ -52,13 +52,13 @@ const ComposerModalCancelConfirm: React.FC<{ openNew?: boolean }> = ({
       />
 
       <ModalActions>
-        <Button color='destructive' onClick={handleDelete}>
+        <Button variant='solid' color='destructive' onClick={handleDelete}>
           <FormattedMessage
             id='compose.cancel_modal.delete'
             defaultMessage='Delete draft'
           />
         </Button>
-        <Button color='neutral' onClick={handleContinue}>
+        <Button variant='solid' onClick={handleContinue}>
           <FormattedMessage
             id='compose.cancel_modal.continue'
             defaultMessage='Continue draft'
diff --git a/app/javascript/mastodon/features/compose/redesign/modal_rearrange.tsx b/app/javascript/mastodon/features/compose/redesign/modal_rearrange.tsx
index 4a3e88a915b..2d4b089b22d 100644
--- a/app/javascript/mastodon/features/compose/redesign/modal_rearrange.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/modal_rearrange.tsx
@@ -127,7 +127,7 @@ const ComposerModalRearrange: React.FC<{ onClose: () => void }> = ({
           />
         </Button>
 
-        <Button color='neutral' onClick={handleSave}>
+        <Button variant='solid' onClick={handleSave}>
           <FormattedMessage
             id='compose.rearrange_modal.save'
             defaultMessage='Save'
diff --git a/app/javascript/mastodon/features/compose/redesign/modal_switch.tsx b/app/javascript/mastodon/features/compose/redesign/modal_switch.tsx
index 77d71e7ca67..1e3d87a8c00 100644
--- a/app/javascript/mastodon/features/compose/redesign/modal_switch.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/modal_switch.tsx
@@ -55,7 +55,7 @@ const ComposerModalSwitch: React.FC = () => {
           />
         </Button>
 
-        <Button size='sm' color='neutral' onClick={handleContinue}>
+        <Button size='sm' variant='solid' onClick={handleContinue}>
           <FormattedMessage
             id='compose.switch_modal.continue'
             defaultMessage='Continue'
diff --git a/app/javascript/mastodon/features/compose/redesign/poll.tsx b/app/javascript/mastodon/features/compose/redesign/poll.tsx
index cd0c41777b3..6c6163ac3ec 100644
--- a/app/javascript/mastodon/features/compose/redesign/poll.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/poll.tsx
@@ -181,8 +181,8 @@ export const ComposePoll: React.FC = () => {
             className={classNames(
               classes.pollDurationSelect,
               buttonClasses.base,
-              buttonClasses.solid,
               buttonClasses.tonal,
+              buttonClasses.neutral,
               buttonClasses.xs,
             )}
           >
diff --git a/app/javascript/mastodon/features/compose/redesign/trigger.tsx b/app/javascript/mastodon/features/compose/redesign/trigger.tsx
index fcbdfd0f732..5666a80f6c7 100644
--- a/app/javascript/mastodon/features/compose/redesign/trigger.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/trigger.tsx
@@ -74,7 +74,7 @@ export const ComposeRedesignButton: React.FC = () => {
       <MenuTrigger
         as={IconButton}
         icon={PenNibIcon}
-        color='neutral'
+        variant='solid'
         className={classes.button}
         size='lg'
       >
diff --git a/app/javascript/mastodon/features/compose/redesign/upload.tsx b/app/javascript/mastodon/features/compose/redesign/upload.tsx
index 16838ef6e00..77d8c4e9032 100644
--- a/app/javascript/mastodon/features/compose/redesign/upload.tsx
+++ b/app/javascript/mastodon/features/compose/redesign/upload.tsx
@@ -76,7 +76,7 @@ export const ComposeUpload: React.FC<{
           as={IconButton}
           icon={DotsThreeIcon}
           size='sm'
-          color='neutral'
+          variant='solid'
           className={classes.mediaMenuButton}
         >
           <FormattedMessage