@oxy.so/bloom 3.6.0 → 4.1.0

package/src/theme-toggle/ThemeToggle.tsx

@@ -17,18 +17,24 @@ import Animated, {
 } from 'react-native-reanimated';
 import Svg, { Defs, LinearGradient, Rect, Stop } from 'react-native-svg';
 
-import { ACCENT_TABLE, BUTTON_SHADOW, SEGMENTED_THUMB_EASE_BEZIER, SEGMENTED_THUMB_MS, colorRamp, mixColor, resolveButtonRamps } from '../button/shared';
+import {
+  ACCENT_TABLE,
+  BUTTON_SHADOW,
+  SEGMENTED_THUMB_EASE_BEZIER,
+  SEGMENTED_THUMB_MS,
+  colorRamp,
+  mixColor,
+} from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiMoonLine } from '../icons/remix/RiMoonLine';
 import { RiSunLine } from '../icons/remix/RiSunLine';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { withAlpha } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import { useBloomTheme } from '../theme/use-theme';
 import { Text } from '../typography';
-import type { ThemeToggleAppearance, ThemeToggleProps } from './types';
+import type { ThemeToggleVariant, ThemeToggleProps } from './types';
 import { revealTheme, THEME_TRANSITION_DURATION, type RevealOrigin } from './view-transition';
 
 /**
@@ -44,17 +50,9 @@ import { revealTheme, THEME_TRANSITION_DURATION, type RevealOrigin } from './vie
  *                      icon 16; a 32px thumb with shadow-xs slides 36px (200ms)
  *   glass-segmented    no track; black / white literals (landing nav skin)
  *
- * Tokens:
- *
- *                                      light            dark
- *   background-secondary (segmented)   neutral-100      neutral-900
- *   background-primary   (its thumb)   card             neutral-800
- *   theme-toggle-sidebar-background    neutral-200      neutral-800
- *   theme-toggle-sidebar-selected      card             neutral-700
- *   background-secondary-hover         neutral-200      neutral-800
- *   foreground-icon-primary            text             text
- *   foreground-icon-secondary          neutral-500      neutral-500
- *   background-tertiary (switch off)   neutral-200      neutral-800
+ * Neutral tracks, thumbs and labels use canonical surface/text roles; the
+ * active switch keeps its accent gradient and the explicit glass landing skin
+ * keeps its backdrop-dependent material colours.
  *
  * On web the change is revealed as a growing circle from the pointer
  * (`view-transition.ts`); natively, and under reduced motion, it is immediate.
@@ -71,8 +69,8 @@ interface TogglePalette {
   text: string;
   hover: string;
   ring: string;
-  track: Record<Exclude<ThemeToggleAppearance, 'sidebar'>, string>;
-  thumb: Record<Exclude<ThemeToggleAppearance, 'sidebar'>, string>;
+  track: Record<Exclude<ThemeToggleVariant, 'sidebar'>, string>;
+  thumb: Record<Exclude<ThemeToggleVariant, 'sidebar'>, string>;
   thumbShadow: string;
   switchOff: string;
   switchOn: readonly [string, string];
@@ -91,35 +89,33 @@ function mix(a: string, b: string, weightOfA: number): string {
 }
 
 export function resolveThemeTogglePalette(theme: Theme): TogglePalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const c = theme.colors;
   const text = theme.colors.text;
   const dark = theme.isDark;
   const ramp = colorRamp(theme.colors.primary, ACCENT_TABLE);
   return {
-    icon: n[500],
+    icon: c.textSecondary,
     iconActive: text,
-    text: n[500],
-    hover: dark ? n[800] : n[200],
-    ring: accent[500],
+    text: c.textSecondary,
+    hover: c.backgroundTertiary,
+    ring: c.primary,
     track: {
-      segmented: dark ? n[900] : n[100],
-      'sidebar-segmented': dark ? n[800] : n[200],
+      segmented: c.backgroundSecondary,
+      'sidebar-segmented': c.backgroundTertiary,
       'glass-segmented': 'transparent',
     },
     thumb: {
-      segmented: dark ? n[800] : theme.colors.card,
-      'sidebar-segmented': dark ? n[700] : theme.colors.card,
+      segmented: c.card,
+      'sidebar-segmented': c.card,
       'glass-segmented': dark ? '#2e2e33' : '#ffffff',
     },
     thumbShadow: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
-    switchOff: dark ? n[800] : n[200],
+    switchOff: c.backgroundTertiary,
     switchOn: [ramp[500], ramp[600]],
     switchOnShadow: `inset 0 1px 0 0 rgba(255, 255, 255, 0.25), inset 0 0 0 0.5px ${ramp[500]}`,
-    // `control-indicator-background` → `-subtle`: white → neutral-100 in both modes.
-    switchThumb: ['#ffffff', n[100]],
-    chipOff: dark
-      ? { border: withAlpha(n[700], 0.5), from: n[800], to: n[800] }
-      : { border: withAlpha(n[200], 0.5), from: '#ffffff', to: n[100] },
+    // Adjacent surfaces retain the raised indicator's gentle gradient.
+    switchThumb: [c.card, c.backgroundSecondary],
+    chipOff: { border: c.borderLight, from: c.card, to: c.backgroundSecondary },
     chipOn: {
       border: ramp[600],
       from: mix(ramp[500], ramp[600], 0.63),
@@ -351,7 +347,7 @@ function SegmentButton({
 
 const ThemeToggleComponent: React.FC<ThemeToggleProps> = ({
   collapsed = false,
-  appearance = 'sidebar',
+  variant = 'sidebar',
   transitionDuration = THEME_TRANSITION_DURATION,
   style,
   testID,
@@ -376,10 +372,10 @@ const ThemeToggleComponent: React.FC<ThemeToggleProps> = ({
     [setMode, transitionDuration],
   );
 
-  if (appearance !== 'sidebar') {
+  if (variant !== 'sidebar') {
     return (
       <SegmentedToggle
-        appearance={appearance}
+        variant={variant}
         dark={dark}
         palette={palette}
         reducedMotion={reducedMotion}
@@ -415,7 +411,7 @@ const ThemeToggleComponent: React.FC<ThemeToggleProps> = ({
 };
 
 function SegmentedToggle({
-  appearance,
+  variant,
   dark,
   palette,
   reducedMotion,
@@ -423,7 +419,7 @@ function SegmentedToggle({
   style,
   testID,
 }: {
-  appearance: Exclude<ThemeToggleAppearance, 'sidebar'>;
+  variant: Exclude<ThemeToggleVariant, 'sidebar'>;
   dark: boolean;
   palette: TogglePalette;
   reducedMotion: boolean;
@@ -431,7 +427,7 @@ function SegmentedToggle({
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }) {
-  const glass = appearance === 'glass-segmented';
+  const glass = variant === 'glass-segmented';
   const progress = useSharedValue(dark ? 1 : 0);
   useEffect(() => {
     progress.value = reducedMotion ? (dark ? 1 : 0) : withTiming(dark ? 1 : 0, { duration: THUMB_MS, easing: EASE });
@@ -453,7 +449,7 @@ function SegmentedToggle({
           gap: 4,
           padding: 4,
           borderRadius: borderRadius.full,
-          backgroundColor: palette.track[appearance],
+          backgroundColor: palette.track[variant],
           zIndex: glass ? 10 : undefined,
         },
         style,
@@ -471,7 +467,7 @@ function SegmentedToggle({
             width: 32,
             height: 32,
             borderRadius: borderRadius.full,
-            backgroundColor: palette.thumb[appearance],
+            backgroundColor: palette.thumb[variant],
             boxShadow: palette.thumbShadow,
           },
           thumbStyle,

package/src/theme-toggle/index.ts

@@ -1,3 +1,3 @@
 export { ThemeToggle } from './ThemeToggle';
 
-export type { ThemeToggleAppearance, ThemeToggleProps } from './types';
+export type { ThemeToggleVariant, ThemeToggleProps } from './types';

package/src/theme-toggle/types.ts

@@ -7,16 +7,16 @@ import type { StyleProp, ViewStyle } from 'react-native';
  * - `glass-segmented`    literal black / white segments with no track, for a
  *                        host that supplies its own glass surface
  */
-export type ThemeToggleAppearance = 'sidebar' | 'segmented' | 'sidebar-segmented' | 'glass-segmented';
+export type ThemeToggleVariant = 'sidebar' | 'segmented' | 'sidebar-segmented' | 'glass-segmented';
 
 export interface ThemeToggleProps {
   /**
    * Compact 36px icon button for a collapsed sidebar rail. Only applies to the
-   * `sidebar` appearance.
+   * `sidebar` variant.
    */
   collapsed?: boolean;
   /** Visual treatment. Defaults to `sidebar`. */
-  appearance?: ThemeToggleAppearance;
+  variant?: ThemeToggleVariant;
   /** Circular reveal duration on web, in ms. Defaults to 820. */
   transitionDuration?: number;
   /**

package/src/toast/ToastContent.tsx

@@ -11,8 +11,9 @@
  * 1px border/button/default, card surface, `shadow-dropdown`, padding 16, a 40px
  * tinted status disc with a 20px Remix glyph, body-medium title, body-regular
  * description, small `Button`s for the actions and an xs CloseButton at
- * top 12 / right 12. Two toast-only departures:
+ * top 12 / right 12. Toast-only adaptations:
  *
+ * - Title-only messages use 12px vertical padding and a 28px disc.
  * - The right padding is a 44px close-button lane ONLY when a close
  *   button renders. `closeButton` defaults to false for toasts, and a one-line
  *   `toast('Saved')` with a permanently empty 28px lane reads as misaligned.
@@ -116,6 +117,7 @@ export function ToastContent({
   // Only the built-in button is absolutely placed; a caller `close` node stays in the row.
   const showsClose = Boolean(dismissible && !close && closeButton);
   const titleOnly = !description && !action && !cancel;
+  const visualSize = titleOnly ? 28 : G.visual;
   const hasVisual = Boolean(variant || icon || isLoading);
 
   const surfaceStyle: WebCssStyle | undefined = unstyled
@@ -124,6 +126,8 @@ export function ToastContent({
         backgroundColor: colors.surface,
         borderColor: colors.border,
         boxShadow: colors.shadow,
+        paddingTop: titleOnly ? 12 : G.padding,
+        paddingBottom: titleOnly ? 12 : G.padding,
         paddingRight: showsClose ? G.paddingRight : G.padding,
       };
 
@@ -145,7 +149,7 @@ export function ToastContent({
       <View
         style={[
           unstyled ? undefined : styles.row,
-          // A title on its own centres against the 40px disc instead of hugging
+          // A title on its own centres against its compact disc instead of hugging
           // its top and leaving an empty band where a description would sit.
           !unstyled && titleOnly ? styles.rowCentered : undefined,
           backgroundComponent ? styles.aboveBackground : undefined,
@@ -157,6 +161,7 @@ export function ToastContent({
           icon={icon}
           icons={icons}
           isLoading={isLoading}
+          size={visualSize}
           colors={colors}
           unstyled={unstyled}
         />
@@ -232,7 +237,7 @@ export function ToastContent({
           onDismiss={onDismiss}
           // Title-only: the ✕ centres on the row like the title does.
           buttonStyle={[
-            titleOnly ? { top: hasVisual ? (G.visual - CLOSE_XS) / 2 : 0 } : undefined,
+            titleOnly ? { top: hasVisual ? (visualSize - CLOSE_XS) / 2 : 0 } : undefined,
             styleOverrides?.closeButton,
           ]}
         />
@@ -244,7 +249,7 @@ export function ToastContent({
 ToastContent.displayName = 'ToastContent';
 
 /**
- * The leading visual: a 40px status disc holding the variant glyph (or
+ * The leading visual: a content-sized status disc holding the variant glyph (or
  * the spinner). A per-toast `icon` or an outlet `icons` override replaces the
  * GLYPH and keeps the disc. A variant-less toast with no `icon` has no leading
  * visual at all — it must never fall back to `info`.
@@ -254,6 +259,7 @@ function ToastLeadingVisual({
   icon,
   icons,
   isLoading,
+  size,
   colors,
   unstyled,
 }: {
@@ -261,6 +267,7 @@ function ToastLeadingVisual({
   icon: ToastProps['icon'];
   icons: ToastIcons;
   isLoading: boolean;
+  size: number;
   colors: ToastColors;
   unstyled: boolean;
 }) {
@@ -280,7 +287,7 @@ function ToastLeadingVisual({
   if (unstyled) {
     return <>{glyph}</>;
   }
-  return <View style={[styles.disc, { backgroundColor: colors.iconBackground }]}>{glyph}</View>;
+  return <View style={[styles.disc, { width: size, height: size, borderRadius: size / 2, backgroundColor: colors.iconBackground }]}>{glyph}</View>;
 }
 
 function ToastActionButton({
@@ -295,13 +302,7 @@ function ToastActionButton({
   textStyle?: StyleProp<TextStyle>;
 }) {
   return (
-    <Button
-      size="small"
-      variant={variant}
-      onPress={action.onClick}
-      style={buttonStyle}
-      textStyle={textStyle}
-    >
+    <Button size="sm" appearance={variant === 'primary' ? 'solid' : 'subtle'} tone={variant === 'primary' ? 'accent' : 'neutral'} onPress={action.onClick} style={buttonStyle} textStyle={textStyle}>
       {action.label}
     </Button>
   );

package/src/toast/ToastRow.tsx

@@ -59,7 +59,9 @@ import {
   toastDefaults,
 } from './constants';
 import { useDynamicToastContext, useToastContext } from './context';
-import { calculateStackScaleX } from './row-geometry';
+import { calculateStackScaleX, calculateToastVisibleHeight } from './row-geometry';
+import { NOTIFICATION_GEOMETRY } from '../notification/shared';
+import { space } from '../styles/tokens';
 import { isStackHovered } from './use-stack-hover';
 import { useAnimatedTarget } from './use-animated-target';
 import { ToastContent } from './ToastContent';
@@ -242,6 +244,28 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
       { duration: STACKING_ANIMATION_DURATION, easing: easeOutQuartFn },
     );
 
+    // Keep the measured child intrinsic. Only its viewport changes height, so a
+    // tall description/custom row cannot protrude behind a shorter front card.
+    const visibleHeight = useAnimatedTarget(calculateToastVisibleHeight({
+      index, numberOfToasts, enableStacking, position,
+      allToastHeights: toastHeights, orderedToastIds, isExpanded,
+    }), { duration: STACKING_ANIMATION_DURATION, easing: easeOutQuartFn });
+    const naturalHeight = toastHeights[id];
+    const surfaceStyle = StyleSheet.flatten([mergedStyles.toast, style]);
+    const inset = jsx || unstyled ? 0 : space.lg;
+    const leftMargin = surfaceStyle?.marginLeft ?? surfaceStyle?.marginHorizontal ?? inset;
+    const insetLeft = typeof leftMargin === 'number' ? leftMargin : 0;
+    const rightMargin = surfaceStyle?.marginRight ?? surfaceStyle?.marginHorizontal ?? inset;
+    const insetRight = typeof rightMargin === 'number' ? rightMargin : 0;
+    const viewportStyle = useAnimatedStyle(() => {
+      const constrained = naturalHeight !== undefined && visibleHeight.value < naturalHeight - 0.5;
+      return {
+        // maxHeight (not a text transform) clips without squashing typography.
+        maxHeight: naturalHeight === undefined ? undefined : visibleHeight.value,
+        overflow: constrained ? 'hidden' : 'visible',
+      };
+    }, [visibleHeight, naturalHeight]);
+
     const stackTransformStyle = useAnimatedStyle(
       () => ({
         transform: [
@@ -413,16 +437,20 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
     const stackZIndex =
       position === 'top-center' ? -(index + 1) : -(numberOfToasts - index);
 
+    // Exit owns a separate anchor. Its keyframe resets transform, so placing
+    // stackTransformStyle on that node loses the departing row's offset/scale.
+    // Keeping the stack transform inside also preserves it in the web exit clone.
     return (
       <Animated.View
+        exiting={exiting}
         pointerEvents="box-none"
         style={[
           styles.anchor,
           anchorFor(position),
           { zIndex: stackZIndex },
-          stackTransformStyle,
         ]}
       >
+        <Animated.View style={stackTransformStyle}>
         <ToastSwipeHandler
           onRemove={onRemove}
           onBegin={onSwipeBegin}
@@ -437,10 +465,17 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
         >
           <Animated.View style={rowStyle}>
             <Animated.View
+              style={[{
+                marginLeft: insetLeft,
+                marginRight: insetRight,
+                borderRadius: surfaceStyle?.borderRadius ?? NOTIFICATION_GEOMETRY.radius,
+              }, viewportStyle]}
+            >
+            <Animated.View
+              style={{ flexShrink: 0, marginLeft: -Number(insetLeft), marginRight: -Number(insetRight) }}
               ref={measuredRef}
               onLayout={handleLayout}
               entering={entering}
-              exiting={exiting}
             >
               {jsx ?? (
                 <ToastContent
@@ -479,8 +514,10 @@ export const ToastRow = React.forwardRef<ToastRef, ToastRowProps>(
                 />
               )}
             </Animated.View>
+            </Animated.View>
           </Animated.View>
         </ToastSwipeHandler>
+        </Animated.View>
       </Animated.View>
     );
   },

package/src/toast/animations.ts

@@ -87,7 +87,7 @@ import type {
  * babel plugin too.
  */
 const EASE_OUT_QUART = Easing.bezier(0.165, 0.84, 0.44, 1);
-const EASE_IN_OUT_CUBIC = Easing.bezier(0.645, 0.045, 0.355, 1);
+
 
 export type ToastEnterDriver = 'imperative' | 'layoutAnimation';
 
@@ -111,8 +111,9 @@ const ENTER_TRANSLATE_Y: Record<ToastPosition, number> = {
   center: 50,
 };
 
-/** A lone row leaves the screen entirely; a stacked one only slides by `stackGap`. */
-const EXIT_TRANSLATE_Y_SINGLE = 150;
+/** Exit stays near its resting slot instead of throwing the card offscreen. */
+const EXIT_TRANSLATE_Y_SINGLE = 12;
+const EXIT_DURATION = 180;
 
 /**
  * Bounded so an animated `gap` cannot grow the cache without limit. The natural
@@ -190,21 +191,24 @@ export function getToastExitAnimation({
       if (isHiddenByLimit) {
         return new Keyframe({
           from: { opacity: 1 },
-          to: { opacity: 0, easing: EASE_IN_OUT_CUBIC },
-        }).duration(ENTERING_ANIMATION_DURATION);
+          50: { opacity: 0.35 },
+          to: { opacity: 0 },
+        }).duration(EXIT_DURATION);
       }
 
-      const distance = isSingle ? EXIT_TRANSLATE_Y_SINGLE : stackGap;
+      const distance = isSingle ? EXIT_TRANSLATE_Y_SINGLE : Math.min(EXIT_TRANSLATE_Y_SINGLE, Math.max(0, stackGap));
       const translateY = position === 'top-center' ? -distance : distance;
 
       return (
         new Keyframe({
           from: { opacity: 1, transform: [{ translateY: 0 }] },
-          to: { opacity: 0, transform: [{ translateY }], easing: EASE_IN_OUT_CUBIC },
+          // Explicit stops keep the deceleration on web too: custom bezier
+          // factories have no recognised CSS easing name without the plugin.
+          50: { opacity: 0.35, transform: [{ translateY: translateY * 0.75 }] },
+          to: { opacity: 0, transform: [{ translateY }] },
         })
-          // Matches the store's overlay teardown delay, which is also
-          // ENTERING_ANIMATION_DURATION — a longer exit would be cut off.
-          .duration(ENTERING_ANIMATION_DURATION)
+          // Finishes within the store's 300ms overlay teardown grace period.
+          .duration(EXIT_DURATION)
       );
     },
   );

package/src/toast/row-geometry.ts

@@ -83,6 +83,25 @@ const heightOf = (
   return allToastHeights[id] || ESTIMATED_TOAST_HEIGHT;
 };
 
+/** Visual row height while stacked; measurements always remain intrinsic. */
+export const calculateToastVisibleHeight = ({
+  index, numberOfToasts, enableStacking, position, allToastHeights,
+  orderedToastIds, isExpanded,
+}: {
+  index: number;
+  numberOfToasts: number;
+  enableStacking: boolean;
+  position: ToastPosition;
+  allToastHeights: Record<string | number, number>;
+  orderedToastIds: Array<string | number>;
+  isExpanded: boolean;
+}): number => {
+  const natural = heightOf(allToastHeights, orderedToastIds[index]);
+  if (!enableStacking || isExpanded) return natural;
+  const front = position === 'top-center' ? 0 : numberOfToasts - 1;
+  return Math.min(natural, heightOf(allToastHeights, orderedToastIds[front]));
+};
+
 export const calculateToastPosition = ({
   index,
   numberOfToasts,
@@ -114,7 +133,9 @@ export const calculateToastPosition = ({
       : 0;
 
   if (effectiveEnableStacking) {
-    const currentHeight = heightOf(allToastHeights, orderedToastIds[index]);
+    const currentHeight = calculateToastVisibleHeight({
+      index, numberOfToasts, enableStacking, position, allToastHeights, orderedToastIds, isExpanded,
+    });
 
     if (position === 'top-center') {
       const frontHeight = heightOf(allToastHeights, orderedToastIds[0]);

package/src/toast/use-toast-colors.ts

@@ -16,7 +16,7 @@
  * widens the glyph colour to the border and title as well. Exactly like sonner.
  *
  * NOTHING HERE MAY REACH FOR A BRAND TOKEN. `success` / `error` / `warning` /
- * `info` are STATUS colours; `primarySubtle` / `negativeSubtle` are BRAND pairs.
+ * `info` are STATUS colours; `primarySubtle` is the BRAND pair; `negativeSubtle` aliases error.
  * Mixing the families is what made `toast.success('Saved')` render as a
  * brand-purple card, and what made a success icon flip from green to purple when
  * `richColors` was switched on. `richColors` means "show the status colour more

package/src/track-list/TrackListEmpty.tsx

@@ -1,8 +1,8 @@
+import { surfaceFillOn } from '../styles/surface-levels';
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 
 import { Button } from '../button';
-import { resolveButtonRamps } from '../button/shared';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { borderRadius } from '../styles/tokens';
 import { useTheme } from '../theme/use-theme';
@@ -26,7 +26,6 @@ export function TrackListEmpty({
 }: TrackListEmptyProps) {
   const theme = useTheme();
   const paint = useMemo(() => resolveTrackListPaint(theme), [theme]);
-  const { neutral } = resolveButtonRamps(theme);
   return (
     <View
       style={[
@@ -48,7 +47,7 @@ export function TrackListEmpty({
           width: 64,
           height: 64,
           borderRadius: borderRadius.full,
-          backgroundColor: theme.isDark ? neutral[800] : neutral[200],
+          backgroundColor: surfaceFillOn(theme, theme.colors.background),
           alignItems: 'center',
           justifyContent: 'center',
           marginBottom: 16,

package/src/track-list/shared.ts

@@ -1,6 +1,7 @@
+import { surfaceFillOn, hairlineOn, surfaceTextOn } from '../styles/surface-levels';
 import { Platform, type ViewProps } from 'react-native';
 
-import { mixColor, resolveButtonRamps } from '../button/shared';
+import { resolveButtonRamps } from '../button/shared';
 import { resolveMenuPalette } from '../floating/menu-palette';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import type { Theme } from '../theme/types';
@@ -113,24 +114,24 @@ export interface TrackListPaint {
 }
 
 export function resolveTrackListPaint(theme: Theme): TrackListPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   const menu = resolveMenuPalette(theme);
   return {
     text: theme.colors.text,
-    textMuted: dark ? n[400] : n[500],
+    textMuted: surfaceTextOn(theme, theme.colors.background).textSecondary,
     accent: dark ? accent[400] : accent[600],
-    rowHover: dark ? n[800] : n[100],
-    rowSelected: dark ? n[700] : n[200],
-    rowSelectedHover: dark ? mixColor(n[700], n[600], 0.5) : mixColor(n[200], n[300], 0.5),
-    hairline: dark ? n[800] : n[200],
-    coverPlaceholder: dark ? n[800] : n[100],
+    rowHover: surfaceFillOn(theme, theme.colors.background),
+    rowSelected: theme.colors.contrast50,
+    rowSelectedHover: surfaceFillOn(theme, surfaceFillOn(theme, theme.colors.background)),
+    hairline: hairlineOn(theme, theme.colors.background),
+    coverPlaceholder: surfaceFillOn(theme, theme.colors.background),
     ring: accent[500],
     dragSurface: menu.surface,
     dragShadow: dark
       ? '0 8px 24px rgba(0, 0, 0, 0.45), 0 1px 2px rgba(0, 0, 0, 0.3)'
       : '0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06)',
-    rail: dark ? n[700] : n[200],
+    rail: theme.colors.contrast50,
     panel: menu.surface,
     panelBorder: menu.border,
     panelShadow: dark

package/src/user-hover-card/UserHoverCard.tsx

@@ -12,7 +12,7 @@ import {
 import { useReducedMotion } from 'react-native-reanimated';
 
 import { Avatar } from '../avatar';
-import { mixColor, resolveButtonRamps } from '../button/shared';
+import { resolveButtonRamps } from '../button/shared';
 import {
   MENU_MOTION_BLUR,
   MENU_MOTION_DURATION,
@@ -93,17 +93,16 @@ interface HoverCardPalette {
 
 export function resolveUserHoverCardPalette(theme: Theme): HoverCardPalette {
   const menu = resolveMenuPalette(theme);
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const dark = theme.isDark;
+  const { accent } = resolveButtonRamps(theme);
   return {
     surface: menu.surface,
     border: menu.border,
     shadow: menu.shadow,
     text: menu.text,
     textSecondary: menu.textSecondary,
-    tile: dark ? n[900] : n[100],
-    cover: dark ? n[700] : n[200],
-    skeleton: dark ? mixColor(n[800], n[700], 0.6) : n[100],
+    tile: theme.colors.backgroundSecondary,
+    cover: theme.colors.backgroundTertiary,
+    skeleton: theme.colors.backgroundTertiary,
     verified: accent[500],
   };
 }