@oxy.so/bloom 5.4.0 → 6.0.0

package/src/tab-bar/shared.ts

@@ -12,7 +12,6 @@ import { useMemo, type ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import type { AnimatedStyle } from 'react-native-reanimated';
 
-import { withAlpha } from '../theme/color-utils';
 import type { ThemeColors } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import type { TabBarItem, TabBarTheme } from './types';
@@ -54,25 +53,6 @@ export const BLUR_BLEED = 44;
 export const LABEL_FONT_SIZE = 9.5;
 
 
-/**
- * Slide spring: interruptible by design — rapid tab-hopping retargets with
- * preserved velocity. Slight under-damping gives the pill a tiny settle, safe
- * here because it's transform-only (no layout involved).
- */
-export const SLIDE_SPRING = { duration: 420, dampingRatio: 0.82 };
-
-/**
- * Fade for the highlight coming and going when the selection does — an
- * `activeIndex` that names no tab (see `TabBarProps.activeIndex`).
- *
- * A timing, not a spring, and deliberately shorter than {@link SLIDE_SPRING}:
- * appearing and disappearing is a change of STATE, not a movement, so it must
- * not read as a second animation racing the slide. The capsule fades where it
- * stands — moving it out of view instead would drag it the length of the bar on
- * its way out and sweep the active tint across every tab it passed.
- */
-export const HIGHLIGHT_FADE = { duration: 160 };
-
 /**
  * How long a press must be held before `onIndexLongPress` fires.
  *
@@ -97,10 +77,7 @@ export const LONG_PRESS_MIN_DURATION = 500;
  *
  *   - the two tints are the standard foreground pair;
  *   - the highlight is `contrast50`, the token meant for a subtle raised fill;
- *   - the glass tint is a 55%-alpha page background, so the liquid-glass
- *     material behind it still refracts content;
- *   - the solid fallback is a 94%-alpha `backgroundSecondary` — near-opaque, so
- *     the bar reads as a distinct surface where there is no glass to lens.
+ *   - the card token is painted at 90% opacity; explicit tint alpha is preserved;
  *
  * Overrides are coalesced key by key (not spread) so an explicit `undefined` in
  * a partial can never punch a hole in the resolved theme.
@@ -113,8 +90,7 @@ export function resolveTabBarTheme(
     activeTint: overrides?.activeTint ?? colors.text,
     inactiveTint: overrides?.inactiveTint ?? colors.textSecondary,
     highlight: overrides?.highlight ?? colors.contrast50,
-    glassTint: overrides?.glassTint ?? withAlpha(colors.background, 0.55),
-    solidFallback: overrides?.solidFallback ?? withAlpha(colors.backgroundSecondary, 0.94),
+    glassTint: overrides?.glassTint ?? colors.card,
   };
 }
 
@@ -129,7 +105,7 @@ export function resolveTabBarTheme(
  */
 export function useTabBarTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
   const { colors } = useTheme();
-  const { activeTint, inactiveTint, highlight, glassTint, solidFallback } = overrides ?? {};
+  const { activeTint, inactiveTint, highlight, glassTint } = overrides ?? {};
 
   return useMemo(
     () =>
@@ -138,9 +114,8 @@ export function useTabBarTheme(overrides?: Partial<TabBarTheme>): TabBarTheme {
         inactiveTint,
         highlight,
         glassTint,
-        solidFallback,
       }),
-    [colors, activeTint, inactiveTint, highlight, glassTint, solidFallback],
+    [colors, activeTint, inactiveTint, highlight, glassTint],
   );
 }
 
@@ -161,7 +136,7 @@ export type TabBarSurfaceComponent = ComponentType<TabBarSurfaceProps> & {
 };
 
 export interface TabBarSurfaceProps {
-  /** Resolved theme — the surface picks `glassTint` or `solidFallback`. */
+  /** Resolved theme — the surface picks `glassTint`. */
   theme: TabBarTheme;
   /**
    * Animated capsule shape (a `borderRadius` tracking the animated height).

package/src/tab-bar/surface-paint.tsx

@@ -0,0 +1,16 @@
+/** Adapted from expo-glass-tabs v0.1.1 (MIT © 2026 David Mokos). */
+import { StyleSheet } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { SurfacePaint } from '../surface/SurfacePaint';
+import type { TabBarSurfaceProps } from './shared';
+
+/** Universal body and edge material: shared web optics and native tint, sheen and rim. */
+export function SharedTabBarSurface({ theme, style }: TabBarSurfaceProps) {
+  return (
+    <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, style]}>
+      <SurfacePaint fill={theme.glassTint} radius={999} />
+    </Animated.View>
+  );
+}
+SharedTabBarSurface.displayName = 'SharedTabBarSurface';
+SharedTabBarSurface.resolveFill = (theme: TabBarSurfaceProps['theme']) => theme.glassTint;

package/src/tab-bar/surface.native.tsx

@@ -1,9 +1,10 @@
+import { resolveSurfaceTint } from '../surface/shared';
 /**
  * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
  * (MIT © 2026 David Mokos).
  *
  * NATIVE variant of the tab bar's capsule surface — real liquid glass, degrading
- * to the solid surface whenever the glass is not actually usable.
+ * to the shared surface whenever the glass is not actually usable.
  *
  * `expo-glass-effect` is imported STATICALLY and this file is the only place it
  * appears: Metro selects `.native` on iOS/Android, so the import never reaches
@@ -15,7 +16,7 @@
  *
  * `isLiquidGlassAvailable()` is false on Android and pre-iOS-26, where the
  * package's `GlassView` has no material to render; those platforms get the same
- * opaque fallback the neutral variant paints. "Installed" is not "usable"
+ * tinted fallback the neutral variant paints. "Installed" is not "usable"
  * though, and BOTH remaining hazards sit at MODULE scope, which is why neither
  * can be handled by a branch inside the component:
  *
@@ -42,7 +43,7 @@
  * anyway. A missing probe therefore means "not applicable", never "unavailable";
  * reading it the other way would delete the glass look from every working device.
  *
- * Everything that fails routes to the SAME solid surface Android already paints —
+ * Everything that fails routes to the SAME shared surface Android already paints —
  * the intended fallback path, not a new one.
  */
 import { GlassView, isGlassEffectAPIAvailable, isLiquidGlassAvailable } from 'expo-glass-effect';
@@ -50,7 +51,7 @@ import { StyleSheet } from 'react-native';
 import Animated from 'react-native-reanimated';
 
 import type { TabBarSurfaceProps } from './shared';
-import { SolidTabBarSurface } from './surface-solid';
+import { SharedTabBarSurface } from './surface-paint';
 
 /**
  * The animated glass view, or `null` when the package did not deliver the two
@@ -86,7 +87,7 @@ function glassIsUsable(): boolean {
     // eslint-disable-next-line no-console
     console.warn(
       '[Bloom] TabBar: expo-glass-effect could not report liquid-glass availability, ' +
-        'so the bar is painting its solid surface. Install expo-glass-effect and ' +
+        'so the bar is painting its shared surface. Install expo-glass-effect and ' +
         'rebuild the native app to get the glass capsule.',
       error,
     );
@@ -103,14 +104,14 @@ export function TabBarSurface({ theme, style }: TabBarSurfaceProps) {
         style={[
           StyleSheet.absoluteFill,
           styles.surface,
-          { backgroundColor: theme.glassTint },
+          { backgroundColor: resolveSurfaceTint(theme.glassTint) },
           style,
         ]}
       />
     );
   }
 
-  return <SolidTabBarSurface theme={theme} style={style} />;
+  return <SharedTabBarSurface theme={theme} style={style} />;
 }
 
 TabBarSurface.displayName = 'TabBarSurface';
@@ -122,4 +123,4 @@ const styles = StyleSheet.create({
 });
 
 TabBarSurface.resolveFill = (theme: TabBarSurfaceProps['theme']) =>
-  AnimatedGlassView !== null && glassIsUsable() ? theme.glassTint : theme.solidFallback;
+  AnimatedGlassView !== null && glassIsUsable() ? theme.glassTint : theme.glassTint;

package/src/tab-bar/surface.tsx

@@ -1,28 +1,2 @@
-/**
- * Ported from expo-glass-tabs v0.1.1 — src/glass-tab-bar.tsx
- * (MIT © 2026 David Mokos).
- *
- * NEUTRAL default variant of the tab bar's capsule surface: the non-glass one.
- *
- * This is the file resolved by everything that does NOT do React Native's
- * platform-extension resolution — a consumer's `tsc` (which follows Bloom's
- * `"react-native"` source export condition) and any non-Metro bundler reading
- * the published `lib/`. It therefore imports NOTHING platform-specific:
- * `expo-glass-effect` is native-only, and a static import of it from a file a
- * web bundler or a consumer's type-checker resolves would break module
- * resolution outright. Same three-way split, for the same reason, as
- * `theme/native-root-vars{,.native,.web}.ts`.
- *
- * The surface itself lives in `surface-solid.tsx`, because `surface.native.tsx`
- * renders it as its own fallback and cannot import this file to get it — Metro
- * resolves `./surface` back to `surface.native.tsx`, i.e. to itself. This module's
- * job is to give that one implementation the name every entry module imports.
- *
- * The variants — all three implement `TabBarSurfaceProps` exactly, so the entry
- * modules can swap them freely:
- *   - `surface.native.tsx` — iOS/Android (Metro), real `UIGlassEffect` glass, with
- *     the solid surface as its fallback;
- *   - `surface.web.tsx`    — web, a CSS `backdrop-filter`;
- *   - this file            — everywhere else, the opaque fallback alone.
- */
-export { SolidTabBarSurface as TabBarSurface } from './surface-solid';
+/** Universal capsule material; native OS glass is isolated in surface.native.tsx. */
+export { SharedTabBarSurface as TabBarSurface } from './surface-paint';

package/src/tab-bar/surface.web.tsx

@@ -1 +1,2 @@
-export { TranslucentTabBarSurface as TabBarSurface } from './surface-translucent';
+/** Universal capsule material; native OS glass is isolated in surface.native.tsx. */
+export { SharedTabBarSurface as TabBarSurface } from './surface-paint';

package/src/tab-bar/types.ts

@@ -75,8 +75,6 @@ export type TabBarTheme = {
   highlight: string;
   /** Tint layered over the liquid glass (iOS 26) surface. */
   glassTint: string;
-  /** Near-opaque background used when liquid glass is unavailable. */
-  solidFallback: string;
 };
 
 export type TabBarProps = ViewProps & {
@@ -84,8 +82,6 @@ export type TabBarProps = ViewProps & {
   embedded?: boolean;
   /** Prefer horizontal scrolling over scrub gestures when targets overflow. */
   scrollable?: boolean;
-  /** Translucent platform material by default; solid uses the shared opaque Surface. */
-  material?: 'solid' | 'translucent';
   /** One motion signal shared with screen chrome. */
   minimizeProgress?: SharedValue<number>;
   /**

package/src/tag-field/TagField.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import React, { useCallback, useId, useMemo, useRef, useState } from 'react';
 import {
   Platform,
@@ -11,7 +10,7 @@ import {
 } from 'react-native';
 
 import { Chip } from '../chip';
-import { useInheritedControl } from '../control-surface';
+import { useBloomAppearance } from '../appearance';
 import { useFieldMembership } from '../field/membership';
 import { DEFAULT_SIDE_OFFSET } from '../floating/constants';
 import { useMenuPalette } from '../floating/menu-palette';
@@ -147,10 +146,10 @@ export function TagField({
   style,
   testID,
 }: TagFieldProps) {
-  // The size vocabulary IS the density pair, so a `ControlSurface density="small"`
+  // The size vocabulary IS the density pair, so a `BloomScope size="sm"`
   // around a filter row reaches this field exactly as it reaches the text fields
   // beside it — `docs/composition.mdx` §Control presentation.
-  const size = useInheritedControl('density', normalizeBloomSize(sizeProp), 'md');
+  const { size } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
   const palette = useTextFieldPalette();
   const menu = useMenuPalette();
   const { messages } = useMessages(TAG_FIELD_MESSAGES);

package/src/tag-field/constants.ts

@@ -36,8 +36,6 @@ export const TAG_FIELD_INPUT_MIN_WIDTH = 120;
  * `mail-compose`'s recipient chips do inside their own row.
  */
 export const TAG_CHIP_RUNG: Readonly<Record<TagFieldSize, ChipSize>> = {
-  medium: 'large',
-  small: 'medium',
   xs: 'small',
   sm: 'medium',
   md: 'large',

package/src/tag-field/types.ts

@@ -66,7 +66,7 @@ export interface TagFieldProps {
   tone?: AccentTone;
   /**
    * Default `medium` (36 tall); `small` is 32. Omitted, it is INHERITED from
-   * the nearest `ControlSurface` — the same vocabulary `TextField` and
+   * the nearest `BloomScope` — the same vocabulary `TextField` and
    * `Textarea` take — so a filter row asks for `small` once instead of writing
    * it on five controls.
    */

package/src/tenancy/DocumentList.tsx

@@ -121,12 +121,12 @@ function DocumentListComponent({
                     {document.onSign ? (
                       <View style={{ marginRight: 6 }}>
                         <Button
-                          variant="primary"
-                          size="small"
+
+                          size="sm"
                           leadingIcon={wide ? RiQuillPenLine : undefined}
                           accessibilityLabel={signName(document.name)}
                           onPress={document.onSign}
-                          testID={id(`sign-${index}`)}
+                          testID={id(`sign-${index}`)} tone="accent" appearance="solid"
                         >
                           {signLabel}
                         </Button>
@@ -134,24 +134,24 @@ function DocumentListComponent({
                     ) : null}
                     {document.onView ? (
                       <Button
-                        variant="secondary"
-                        size="small"
+
+                        size="sm"
                         iconOnly
                         leadingIcon={RiEyeLine}
                         accessibilityLabel={viewLabel(document)}
                         onPress={document.onView}
-                        testID={id(`view-${index}`)}
+                        testID={id(`view-${index}`)} tone="neutral" appearance="outline"
                       />
                     ) : null}
                     {document.onDownload ? (
                       <Button
-                        variant="secondary"
-                        size="small"
+
+                        size="sm"
                         iconOnly
                         leadingIcon={RiDownload2Line}
                         accessibilityLabel={downloadLabel(document)}
                         onPress={document.onDownload}
-                        testID={id(`download-${index}`)}
+                        testID={id(`download-${index}`)} tone="neutral" appearance="outline"
                       />
                     ) : null}
                   </View>

package/src/tenancy/RentPaymentList.tsx

@@ -77,13 +77,13 @@ function RentPaymentListComponent({
   const receipt = (payment: RentPayment, index: number) =>
     payment.onDownloadReceipt ? (
       <Button
-        variant="secondary"
-        size="small"
+
+        size="sm"
         iconOnly
         leadingIcon={RiDownload2Line}
         accessibilityLabel={receiptLabel(payment)}
         onPress={payment.onDownloadReceipt}
-        testID={id(`receipt-${index}`)}
+        testID={id(`receipt-${index}`)} tone="neutral" appearance="outline"
       />
     ) : hasReceipts ? (
       <View style={{ width: RECEIPT_WIDTH }} />

package/src/tenancy/parts.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { useEffect, useMemo, type ReactNode } from 'react';
 import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 
@@ -134,7 +135,7 @@ export function HousingToggleButton({
   onPress,
   icon: Icon,
   pressedIcon: PressedIcon,
-  size = 'small',
+  size: sizeProp,
   disabled = false,
   testID,
 }: {
@@ -144,7 +145,7 @@ export function HousingToggleButton({
   onPress?: () => void;
   icon?: HousingIcon;
   pressedIcon?: HousingIcon;
-  size?: 'small' | 'medium';
+  size?: 'sm' | 'md';
   disabled?: boolean;
   testID?: string;
 }) {
@@ -152,6 +153,7 @@ export function HousingToggleButton({
   const palette = useHousingPalette();
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
   const { state: down, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
+  const { size } = useBloomAppearance({ size: sizeProp }, { size: 'sm', tone: 'neutral' });
   const g = BUTTON_GEOMETRY[size];
   const active = (hovered || down) && !disabled;
   const background = pressed

package/src/text-field/TextField.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance } from '../appearance';
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import {
@@ -61,7 +60,7 @@ import type {
   TextFieldProps,
   TextFieldRevealLabels,
 } from './types';
-import { useInheritedControl } from '../control-surface';
+
 import { useFieldMembership } from '../field/membership';
 
 interface TextFieldContextValue {
@@ -181,11 +180,11 @@ export function TextField({
   const invalid = member.invalid || (group?.invalid ?? false);
   const disabled = member.disabled || (group?.disabled ?? false);
   // An `InputGroup` outranks everything: its members have to be one height. Then
-  // the caller's own prop, then the container's density (`ControlSurface`), then
+  // the caller's own prop, then the container's density (`BloomScope`), then
   // `medium` — the precedence rule in `docs/composition.mdx`, with the group's
   // geometry first because it is a constraint rather than a default.
-  const { size: scopedSize } = useBloomAppearance({ size: normalizeBloomSize(sizeProp) }, { size: 'md', tone: 'neutral' });
-  const inheritedSize = useInheritedControl('density', normalizeBloomSize(sizeProp), scopedSize);
+  const { size: scopedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const inheritedSize = scopedSize;
   const size = group?.size ?? inheritedSize;
   const inputRef = useRef<TextInput>(null);
   const [inputDisabled, setInputDisabled] = useState(false);

package/src/text-field/shared.ts

@@ -4,13 +4,8 @@ import { Platform, type ViewStyle } from 'react-native';
 
 import type { WebCssStyle } from '../styles/web-view-style';
 
-import {
-  DANGER_TABLE,
-  colorRamp,
-  mixColor,
-  resolveButtonRamps,
-} from '../button/shared';
-import { hairlineOn, surfaceFillOn, surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
+
+import { surfaceFillOn, surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography/scale';
@@ -35,7 +30,7 @@ import { TYPE_SCALE } from '../typography/scale';
  * NEUTRAL, not the accent; the accent ring belongs to the OTP boxes.
  */
 
-export type TextFieldSize = BloomSize | 'small' | 'medium';
+export type TextFieldSize = BloomSize;
 
 export interface TextFieldGeometry {
   height: number;
@@ -43,8 +38,6 @@ export interface TextFieldGeometry {
 }
 
 export const TEXT_FIELD_GEOMETRY: Record<TextFieldSize, TextFieldGeometry> = {
-  small: {height: 32, paddingHorizontal: 6},
-  medium: {height: 36, paddingHorizontal: 8},
   xs: { height: 28, paddingHorizontal: 4 },
   lg: { height: 44, paddingHorizontal: 10 },
   md: { height: 36, paddingHorizontal: 8 },
@@ -60,8 +53,6 @@ export const TEXT_FIELD_ADDON_PADDING: Record<
   TextFieldSize,
   { paddingLeft: number; paddingRight: number }
 > = {
-  small: {paddingLeft: 4, paddingRight: 6},
-  medium: {paddingLeft: 4, paddingRight: 8},
   xs: { paddingLeft: 4, paddingRight: 4 },
   lg: { paddingLeft: 4, paddingRight: 10 },
   md: { paddingLeft: 4, paddingRight: 8 },

package/src/textarea/Textarea.tsx

@@ -1,6 +1,5 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance } from '../appearance';
-import React, { useMemo, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { Platform, StyleSheet, TextInput, type TextStyle, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
@@ -21,7 +20,7 @@ import {
   resolveShellPaint,
   useTextFieldPalette,
 } from '../text-field/shared';
-import { useInheritedControl } from '../control-surface';
+
 import { useFieldMembership } from '../field/membership';
 import type { TextareaProps } from './types';
 
@@ -81,12 +80,12 @@ export function Textarea({
   const onValueChange = onValueChangeProp ?? onChangeText;
   const theme = useTheme();
   // The two contracts a textarea sits inside: a container's density
-  // (`ControlSurface`) and an enclosing `Field`'s association. The label is
+  // (`BloomScope`) and an enclosing `Field`'s association. The label is
   // STACKED here, as it is on `TextField`, so the field's label wins — they are
   // two spellings of one thing and rendering both is the mistake `docs/field.mdx`
   // names.
-  const { size: scopedSize } = useBloomAppearance({ size: normalizeBloomSize(sizeProp) }, { size: 'md', tone: 'neutral' });
-  const size = useInheritedControl('density', normalizeBloomSize(sizeProp), scopedSize);
+  const { size: scopedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = scopedSize;
   const field = useFieldMembership({
     accessibilityLabel,
     label: label ?? placeholder,

package/src/toast/ToastContent.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Derived from sonner-native v0.26.4 — src/toast.tsx:440-689
  * (MIT © Gunnar Torfi Steinarsson), restyled with
@@ -26,9 +27,7 @@
  * `shadowOpacity`/`shadowRadius` values, so its toast has no shadow on web.
  */
 import * as React from 'react';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
-import { useTheme } from '../theme/use-theme';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import {
   Platform,
   StyleSheet,
@@ -119,7 +118,6 @@ export function ToastContent({
   backgroundComponent,
 }: ToastContentProps) {
   const colors = useToastColors({ variant, richColors });
-  const theme = useTheme();
   const isLoading = Boolean(promiseOptions) || variant === 'loading';
   // Only the built-in button is absolutely placed; a caller `close` node stays in the row.
   const showsClose = Boolean(dismissible && !close && closeButton);
@@ -139,9 +137,10 @@ export function ToastContent({
       };
 
   const customSurface = StyleSheet.flatten([styleOverrides?.toast, style]);
+  const parentFill = useSurfaceFill();
   const fill = customSurface?.backgroundColor ?? colors.surface;
   const paintsSurface = !unstyled && !backgroundComponent && typeof fill === 'string' && fill !== 'transparent' && parseRgba(fill)?.a !== 0;
-  const publishedFill = paintsSurface ? resolveSurfaceFill(fill, false, theme.colors.card) : undefined;
+  const publishedFill = paintsSurface ? resolveSurfaceMaterial({ fill: fill, parentFill: parentFill }).publishedFill : undefined;
   const textProps = { allowFontScaling, maxFontSizeMultiplier };
 
   const content = (

package/src/tooltip/Tooltip.tsx

@@ -1,4 +1,5 @@
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import {
   createContext,
   useCallback,
@@ -195,7 +196,9 @@ function Bubble({
   requestClose: () => void;
   targetMeasurements: TargetMeasurements;
 }) {
+  const parentFill = useSurfaceFill();
   const palette = useMenuPalette();
+  const publishedFill = resolveSurfaceMaterial({ fill: palette.surface, parentFill: parentFill }).publishedFill;
   const insets = useSafeAreaInsets();
   const dimensions = useWindowDimensions();
   const [bubbleMeasurements, setBubbleMeasurements] = useState<
@@ -337,8 +340,8 @@ function Bubble({
               borderRadius: TOOLTIP_SIZES[size].borderRadius,
               borderWidth: 1,
               borderColor: palette.border,
-              backgroundColor: palette.surface,
-              ...surfaceFillVars(palette.surface),
+              backgroundColor: 'transparent',
+              ...surfaceFillVars(publishedFill),
               boxShadow: palette.shadow,
             }}
             onLayout={(e) => {
@@ -347,8 +350,8 @@ function Bubble({
                 height: e.nativeEvent.layout.height,
               });
             }}>
-            <SurfacePaint radius={TOOLTIP_SIZES[size].borderRadius} />
-            <SurfaceLevelProvider level={1} fill={palette.surface}>{children}</SurfaceLevelProvider>
+            <SurfacePaint fill={palette.surface} radius={TOOLTIP_SIZES[size].borderRadius} />
+            <SurfaceLevelProvider level={1} fill={publishedFill}>{children}</SurfaceLevelProvider>
           </View>
           {/* After the bubble, so it paints over the border it overlaps. */}
           <TooltipCaret

package/src/tooltip/Tooltip.web.tsx

@@ -1,4 +1,5 @@
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { StyleSheet, View, type LayoutChangeEvent } from 'react-native';
 
@@ -142,8 +143,10 @@ export function TooltipContent({
   label: string;
   size?: TooltipSize;
 }) {
-  const materialStyle = useSurfaceMaterial('[data-bloom-tooltip]', 'bloom-tooltip-surface-css');
+  const parentFill = useSurfaceFill();
   const palette = useMenuPalette();
+  const publishedFill = resolveSurfaceMaterial({ fill: palette.surface, parentFill: parentFill }).publishedFill;
+  const materialStyle = useSurfaceMaterial('[data-bloom-tooltip]', 'bloom-tooltip-surface-css', palette.surface);
   const { position, visible, triggerRef } = useContext(TooltipContext);
 
   // `visible` drives an `open` → `closing` → unmounted cycle, so the exit has
@@ -184,14 +187,14 @@ export function TooltipContent({
   const box = TOOLTIP_SIZES[size];
   const bubbleStyle: WebCssStyle = {
     ...materialStyle,
-    ...surfaceFillVars(palette.surface),
+    ...surfaceFillVars(publishedFill),
     maxWidth: BUBBLE_MAX_WIDTH,
     paddingHorizontal: box.paddingHorizontal,
     paddingVertical: box.paddingVertical,
     borderRadius: box.borderRadius,
     borderWidth: 1,
     borderColor: palette.border,
-    backgroundColor: palette.surface,
+    backgroundColor: 'transparent',
     boxShadow: palette.shadow,
   };
 
@@ -235,7 +238,7 @@ export function TooltipContent({
               dataSet: { bloomTooltip: '', state: visible ? 'open' : 'closed' },
             } as Record<string, unknown>)}
             style={[bubbleStyle, { transformOrigin: `${caretLeft + ARROW_HALF_SIZE}px ${position === 'top' ? '100%' : '0%'}` } as WebCssStyle]}>
-            <SurfaceLevelProvider level={1} fill={palette.surface}>{children}</SurfaceLevelProvider>
+            <SurfaceLevelProvider level={1} fill={publishedFill}>{children}</SurfaceLevelProvider>
             {/* Outside the padding box, overlapping the border by its 1px. */}
             <TooltipCaret
               position={position}

package/src/track-list/EpisodeRow.tsx

@@ -128,7 +128,7 @@ function EpisodeRowComponent({
     <View style={{ flexDirection: 'row', alignItems: 'center', marginTop: 12 }}>
       {onPlay ? (
         <PlayButton
-          size="small"
+          size="sm"
           variant="inverse"
           playing={current && playing}
           subject={episode.title}

package/src/track-list/SelectionBar.tsx

@@ -98,8 +98,8 @@ export function SelectionBar({
           return (
             <Button
               key={action.key}
-              variant="text"
-              size="small"
+
+              size="sm"
               icon={destructiveIcon}
               leadingIcon={destructiveIcon ? undefined : Icon}
               iconOnly={iconOnly && Icon !== undefined}
@@ -107,7 +107,7 @@ export function SelectionBar({
               disabled={action.disabled}
               onPress={action.onPress}
               testID={testID ? `${testID}-${action.key}` : undefined}
-              textStyle={action.destructive ? { color: theme.colors.error } : undefined}
+              textStyle={action.destructive ? { color: theme.colors.error } : undefined} tone="accent" appearance="plain"
             >
               {action.label}
             </Button>

package/src/track-list/TrackListEmpty.tsx

@@ -72,7 +72,7 @@ export function TrackListEmpty({
         </Text>
       ) : null}
       {actionLabel && onAction ? (
-        <Button variant="primary" size="medium" onPress={onAction} style={{ marginTop: 20 }}>
+        <Button  size="md" onPress={onAction} style={{ marginTop: 20 }} tone="accent" appearance="solid">
           {actionLabel}
         </Button>
       ) : null}