Implement CSS theme tokens behind feature flag (#36861)

app/javascript/mastodon/components/status.jsx

@@ -553,7 +553,6 @@ class Status extends ImmutablePureComponent {
     }
 
     const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-
     return (
       <Hotkeys handlers={handlers} focusable={!unfocusable}>
         <div className={classNames('status__wrapper', `status__wrapper-${status.get('visibility')}`, { 'status__wrapper-reply': !!status.get('in_reply_to_id'), unread, focusable: !this.props.muted })} tabIndex={this.props.muted || unfocusable ? null : 0} data-featured={featured ? 'true' : null} aria-label={textForScreenReader({intl, status, rebloggedByText, isQuote: isQuotedPost})} ref={this.handleRef} data-nosnippet={status.getIn(['account', 'noindex'], true) || undefined}>

app/javascript/mastodon/components/status/boost_button.tsx

@@ -64,6 +64,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
       title={intl.formatMessage(meta ?? title)}
       icon='retweet'
       iconComponent={iconComponent}
+      className='status__action-bar__button'
       onClick={!disabled ? handleClick : undefined}
       counter={
         counters
@@ -195,6 +196,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
           isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
         )}
         icon='retweet'
+        className='status__action-bar__button'
         iconComponent={boostIcon}
         counter={
           counters

app/javascript/mastodon/components/status_action_bar/index.jsx

@@ -406,15 +406,19 @@ class StatusActionBar extends ImmutablePureComponent {
               status={status}
               needsStatusRefresh={quickBoosting && status.get('quote_approval') === null}
               items={menu}
-              icon='ellipsis-h'
-              iconComponent={MoreHorizIcon}
               direction='right'
-              title={intl.formatMessage(messages.more)}
               onOpen={() => {
                 dismissQuoteHint();
                 return true;
               }}
-            />
+            >
+              <IconButton
+                className='status__action-bar__button'
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                title={intl.formatMessage(messages.more)}
+              />
+            </Dropdown>
           )}
         </RemoveQuoteHint>
       </div>