feat(v3-uplift): sort chevron, tertiary button, tooltip & toggle-group restyle

- lists: replace the sort-column CSS triangles with an up/down chevron
  (fg-icon token via currentColor)
- theme: add a `tertiary` Button variant (the secondary pill minus its
  ring/shadow) and point the dashboard Claim button at it
- tooltip: bg-5 surface (from bgp-4)
- toggle group: restyle the shell (bg-5 light / bg-2 dark, frameless in light,
  shadow-low frame in dark), concentric per-mode pill radius, fg-max labels with
  light-mode opacity states, and an animated hover
- toggles: label variant buttonM -> h5 across the type selectors
- refactor (simplify pass): export a shared `darkScheme` helper instead of
  re-declaring it; hoist activeFill/dimmedInactive toggle recipes; DRY the
  chevron paths

Author: abjt14

src/components/ContentWithTooltip.tsx

@@ -15,11 +15,11 @@ interface ContentWithTooltipProps {
 
 export const PopperComponent = styled(Popper)(({ theme }) =>
   theme.unstable_sx({
-    // Solid bgp-4 tooltip surface (bgp-4 = #f2f2f2 light / #1E1E20 dark), framed by an inset
-    // border-0 hairline + a soft shadow-medium drop. Padding lives here (not the inner Box).
+    // Solid bg-5 tooltip surface, framed by an inset border-0 hairline + a soft shadow-medium
+    // drop. Padding lives here (not the inner Box).
     '.MuiTooltip-tooltip': {
       color: 'fg-1',
-      backgroundColor: 'bgp-4',
+      backgroundColor: 'bg-5',
       borderRadius: '0.5rem',
       boxShadow: `0 1px 12px 0 ${figVars['shadow-medium']}, inset 0 0 0 1px ${figVars['border-0']}`,
       padding: '0.88rem',
@@ -32,7 +32,7 @@ export const PopperComponent = styled(Popper)(({ theme }) =>
       lineHeight: '135%',
     },
     '.MuiTooltip-arrow': {
-      color: 'bgp-4',
+      color: 'bg-5',
     },
   })
 );

src/components/StyledToggleButton.tsx

@@ -1,38 +1,53 @@
 import { styled, ToggleButton, ToggleButtonProps } from '@mui/material';
-import React from 'react';
 import { figVars } from 'src/utils/figmaColors';
+import { darkScheme } from 'src/utils/theme';
+
+// Dimmed inactive label: fg-max at 0.3 opacity in light, full opacity in dark. Shared by the
+// resting state and the disabled-not-selected state (which must re-assert it over MUI's default).
+const dimmedInactive = {
+  color: figVars['fg-max'],
+  opacity: 0.3,
+  ...darkScheme({ opacity: 1 }),
+};
+
+// Active pill: a bg-max fill with a border-1 ring in light; a bg-5 fill and no ring in dark, fg-max
+// label at full opacity. Shared by Mui-selected/focus and disabled-selected (some consumers disable
+// the active tab).
+const activeFill = {
+  opacity: 1,
+  color: figVars['fg-max'],
+  backgroundColor: figVars['bg-max'],
+  boxShadow: `inset 0 0 0 1px ${figVars['border-1']}`,
+  ...darkScheme({
+    backgroundColor: figVars['bg-5'],
+    boxShadow: 'none',
+  }),
+};
 
 const CustomTxModalToggleButton = styled(ToggleButton)<ToggleButtonProps>({
   border: 0,
   flex: 1,
   height: '100%',
-  color: figVars['fg-3'],
+  // Label typography (H5) is owned by each consumer's <Typography variant="h5">.
+  ...dimmedInactive,
 
-  // Inactive hover: brighten the label only (fg-3 → fg-2), never a background.
+  // Inactive hover: nudge the opacity up in light; unchanged in dark. Never a background.
   '&:hover': {
     backgroundColor: 'transparent',
-    color: figVars['fg-2'],
+    opacity: 0.5,
+    ...darkScheme({ opacity: 1 }),
   },
 
-  // Active — and keyboard focus (Mui-focusVisible): a solid fill one step darker than the
-  // `bg-1` track (no shadow; the group carries the only ring) with primary text.
-  '&.Mui-selected, &.Mui-selected:hover, &.Mui-focusVisible': {
-    backgroundColor: figVars['bg-4'],
-    color: figVars['fg-1'],
-  },
+  '&.Mui-selected, &.Mui-focusVisible': activeFill,
 
-  // Disabled but NOT selected: muted, still readable.
-  '&.Mui-disabled:not(.Mui-selected)': {
-    color: figVars['fg-3'],
-    opacity: 0.5,
+  // Active hover: step the fill one shade (bg-max → bg-1 light, bg-5 → bg-6 dark); the ring persists.
+  '&.Mui-selected:hover': {
+    backgroundColor: figVars['bg-1'],
+    ...darkScheme({ backgroundColor: figVars['bg-6'] }),
   },
 
-  // Disabled + selected: preserve the selected look (some consumers disable the active tab).
-  '&.Mui-disabled.Mui-selected': {
-    backgroundColor: figVars['bg-4'],
-    color: figVars['fg-1'],
-    opacity: 1,
-  },
+  '&.Mui-disabled:not(.Mui-selected)': dimmedInactive,
+  '&.Mui-disabled.Mui-selected': activeFill,
 }) as typeof ToggleButton;
 
 export function StyledTxModalToggleButton(props: ToggleButtonProps) {

src/components/StyledToggleButtonGroup.tsx

@@ -1,30 +1,38 @@
 import { styled, ToggleButtonGroup, ToggleButtonGroupProps } from '@mui/material';
-import { figVars } from 'src/utils/figmaColors';
+import { figSurfaceShadow, figVars } from 'src/utils/figmaColors';
+import { darkScheme } from 'src/utils/theme';
 
-// Segmented control framed like a medium outlined button: a `bg-5` fill with an inset 1px hairline
-// (shadow-stroke-2) as the ONLY frame — no border. 36px tall / 0.5rem radius to match the medium
-// button; the active pill stays concentric (0.375rem) inside the 2px inset.
+// Segmented-control shell: a bg-5 (light) / bg-2 (dark) fill. Light is frameless with a tight
+// 0.06rem inset; dark adds the shared surface shadow (shadow-low drop + 1px ring) and a 0.13rem
+// inset. 0.5625rem radius; the pill radius tracks the inset so the corners stay concentric.
 const CustomTxModalToggleGroup = styled(ToggleButtonGroup)<ToggleButtonGroupProps>({
   backgroundColor: figVars['bg-5'],
-  borderRadius: '0.5rem',
-  boxShadow: `inset 0 0 0 1px ${figVars['shadow-stroke-2']}`,
-  padding: '2px',
+  boxShadow: 'none',
+  padding: '0.06rem',
+  ...darkScheme({
+    backgroundColor: figVars['bg-2'],
+    boxShadow: figSurfaceShadow(),
+    padding: '0.13rem',
+  }),
+  borderRadius: '0.5625rem',
   height: '36px',
   width: '100%',
-  // Strip MUI's per-segment border (its ToggleButton root has a 1px divider border — the stray
-  // outline on the active pill), negative margins, and merged first/last corner radii so each
-  // segment is an independent borderless pill and the group carries the only ring.
+  // Strip MUI's per-segment border + overlap margins so each segment is an independent borderless
+  // pill (the group carries the only frame). Pill radius = shell radius − inset gap, per mode:
+  // 0.5025rem (0.5625 − 0.06) in light, 0.4325rem (0.5625 − 0.13) in dark.
   '& .MuiToggleButtonGroup-grouped': {
+    '--toggle-pill-radius': '0.5025rem',
+    ...darkScheme({ '--toggle-pill-radius': '0.4325rem' }),
     margin: 0,
     border: 0,
-    borderRadius: '0.375rem',
+    borderRadius: 'var(--toggle-pill-radius)',
     '&:not(:first-of-type)': {
       marginLeft: 0,
       borderLeft: 0,
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--toggle-pill-radius)',
     },
     '&:not(:last-of-type)': {
-      borderRadius: '0.375rem',
+      borderRadius: 'var(--toggle-pill-radius)',
     },
   },
 }) as typeof ToggleButtonGroup;

src/components/lists/ListHeaderTitle.tsx

@@ -1,7 +1,6 @@
 import { Box, Typography } from '@mui/material';
 import { ReactNode } from 'react';
 import { useRootStore } from 'src/store/root';
-import { figVars } from 'src/utils/figmaColors';
 
 import { MARKETS } from '../../utils/events';
 
@@ -54,32 +53,24 @@ export const ListHeaderTitle = ({
       {children}
 
       {!!sortKey && (
-        <Box sx={{ display: 'inline-flex', flexDirection: 'column', ml: 1 }}>
-          <Box
-            component="span"
-            sx={{
-              width: 0,
-              height: 0,
-              borderStyle: 'solid',
-              borderWidth: '0 4px 4px 4px',
-              borderColor: `transparent transparent ${
-                sortName === sortKey && sortDesc ? figVars['fg-2'] : figVars['border-2']
-              } transparent`,
-              mb: 0.5,
-            }}
-          />
-          <Box
-            component="span"
-            sx={{
-              width: 0,
-              height: 0,
-              borderStyle: 'solid',
-              borderWidth: '4px 4px 0 4px',
-              borderColor: `${
-                sortName === sortKey && !sortDesc ? figVars['fg-2'] : figVars['border-2']
-              } transparent transparent transparent`,
-            }}
-          />
+        <Box sx={{ display: 'inline-flex', flexShrink: 0, ml: 1, color: 'fg-icon' }}>
+          {/* Static sortable indicator: an up/down chevron. Color comes from the fg-icon token via
+              currentColor on the Box — the P3-safe way to tint an SVG, since var() doesn't resolve
+              in SVG presentation attributes. stroke/width/caps are inherited by both paths. */}
+          <svg
+            width="8"
+            height="10"
+            viewBox="0 0 8 10"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M1.59961 3L3.99961 1L6.39961 3" />
+            <path d="M1.59961 7L3.99961 9L6.39961 7" />
+          </svg>
         </Box>
       )}
     </Typography>

src/components/transactions/GovDelegation/DelegationTypeSelector.tsx

@@ -28,7 +28,7 @@ export const DelegationTypeSelector = ({
         value={DelegationType.ALL}
         disabled={delegationType === DelegationType.ALL}
       >
-        <Typography variant="buttonM">
+        <Typography variant="h5">
           <Trans>Both</Trans>
         </Typography>
       </StyledTxModalToggleButton>
@@ -37,7 +37,7 @@ export const DelegationTypeSelector = ({
         value={DelegationType.VOTING}
         disabled={delegationType === DelegationType.VOTING}
       >
-        <Typography variant="buttonM">
+        <Typography variant="h5">
           <Trans>Voting</Trans>
         </Typography>
       </StyledTxModalToggleButton>
@@ -46,7 +46,7 @@ export const DelegationTypeSelector = ({
         value={DelegationType.PROPOSITION}
         disabled={delegationType === DelegationType.PROPOSITION}
       >
-        <Typography variant="buttonM">
+        <Typography variant="h5">
           <Trans>Proposition</Trans>
         </Typography>
       </StyledTxModalToggleButton>

src/components/transactions/Repay/RepayTypeSelector.tsx

@@ -39,7 +39,7 @@ export function RepayTypeSelector({
           disabled={repayType === RepayType.BALANCE}
           onClick={() => trackEvent(REPAY_MODAL.SWITCH_REPAY_TYPE, { repayType: 'Wallet Balance' })}
         >
-          <Typography variant="buttonM">
+          <Typography variant="h5">
             <Trans>Wallet balance</Trans>
           </Typography>
         </StyledTxModalToggleButton>
@@ -49,7 +49,7 @@ export function RepayTypeSelector({
           disabled={repayType === RepayType.COLLATERAL}
           onClick={() => trackEvent(REPAY_MODAL.SWITCH_REPAY_TYPE, { repayType: 'Collateral' })}
         >
-          <Typography variant="buttonM">
+          <Typography variant="h5">
             <Trans>Collateral</Trans>
           </Typography>
         </StyledTxModalToggleButton>

src/components/transactions/Swap/shared/OrderTypeSelector.tsx

@@ -26,7 +26,7 @@ export function OrderTypeSelector({
           value={OrderType.MARKET}
           disabled={switchType === OrderType.MARKET}
         >
-          <Typography variant="buttonM">
+          <Typography variant="h5">
             <Trans>Market</Trans>
           </Typography>
         </StyledTxModalToggleButton>
@@ -35,7 +35,7 @@ export function OrderTypeSelector({
           value={OrderType.LIMIT}
           disabled={switchType === OrderType.LIMIT || limitsOrderButtonBlocked}
         >
-          <Typography variant="buttonM">
+          <Typography variant="h5">
             <Trans>Limit</Trans>
           </Typography>
         </StyledTxModalToggleButton>

src/components/transactions/Withdraw/WithdrawTypeSelector.tsx

@@ -37,7 +37,7 @@ export function WithdrawTypeSelector({
             trackEvent(WITHDRAW_MODAL.SWITCH_WITHDRAW_TYPE, { withdrawType: 'Withdraw' })
           }
         >
-          <Typography variant="buttonM">
+          <Typography variant="h5">
             <Trans>Withdraw</Trans>
           </Typography>
         </StyledTxModalToggleButton>
@@ -49,7 +49,7 @@ export function WithdrawTypeSelector({
             trackEvent(WITHDRAW_MODAL.SWITCH_WITHDRAW_TYPE, { withdrawType: 'Withdraw and Swap' })
           }
         >
-          <Typography variant="buttonM">
+          <Typography variant="h5">
             <Trans>Withdraw & Swap</Trans>
           </Typography>
         </StyledTxModalToggleButton>

src/modules/dashboard/DashboardTopPanel.tsx

@@ -257,7 +257,7 @@ export const DashboardTopPanel = () => {
               </Box>
 
               <Button
-                variant="outlined"
+                variant="tertiary"
                 size="small"
                 onClick={() => openClaimRewards()}
                 sx={{ minWidth: 'unset', ml: { xs: 0, xsm: 2 } }}

src/modules/dev/ComponentShowcase/components/TogglesBadgesSection/index.tsx

@@ -19,7 +19,7 @@ const ToggleDemo = ({ options, initial }: { options: ToggleOption[]; initial: st
     <StyledTxModalToggleGroup value={value} exclusive onChange={(_, v) => v && setValue(v)}>
       {options.map((o) => (
         <StyledTxModalToggleButton key={o.value} value={o.value} disabled={o.disabled}>
-          <Typography variant="buttonM">{o.label}</Typography>
+          <Typography variant="h5">{o.label}</Typography>
         </StyledTxModalToggleButton>
       ))}
     </StyledTxModalToggleGroup>