@oxy.so/bloom 3.5.0 → 4.0.0

package/src/swipe-row/shared.ts

@@ -0,0 +1,41 @@
+import { resolveAccentColors } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import type { SwipeRowAction, SwipeRowPaint } from './types';
+
+/**
+ * The pane colours read off the theme.
+ *
+ * Nothing here picks a ramp stop. `accent` and `negative` are the SOLID pairs a
+ * filled control already uses, so a delete pane is the same red as a
+ * destructive button; `neutral` is the SUBTLE default pair, which is the one
+ * fill in the palette that reads as "a surface behind the row" rather than as a
+ * second control competing with the one the reader dragged away.
+ */
+export function resolveSwipeRowPaint(theme: Theme): SwipeRowPaint {
+  const neutral = resolveAccentColors(theme.colors, 'default', 'subtle');
+  const accent = resolveAccentColors(theme.colors, 'primary', 'solid');
+  const negative = resolveAccentColors(theme.colors, 'error', 'solid');
+  return {
+    neutral: neutral.background,
+    onNeutral: neutral.foreground,
+    accent: accent.background,
+    onAccent: accent.foreground,
+    negative: negative.background,
+    onNegative: negative.foreground,
+  };
+}
+
+/** The pair one action's tone paints with. Pure. */
+export function swipeActionPaint(
+  action: SwipeRowAction,
+  paint: SwipeRowPaint,
+): { background: string; foreground: string } {
+  switch (action.tone) {
+    case 'negative':
+      return { background: paint.negative, foreground: paint.onNegative };
+    case 'accent':
+      return { background: paint.accent, foreground: paint.onAccent };
+    default:
+      return { background: paint.neutral, foreground: paint.onNeutral };
+  }
+}

package/src/swipe-row/types.ts

@@ -0,0 +1,79 @@
+import type { ReactNode } from 'react';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+
+/** How loudly a pane is painted. */
+export type SwipeRowActionTone = 'neutral' | 'accent' | 'negative';
+
+/** One action behind a row. */
+export interface SwipeRowAction {
+  /** Stable identity, and what `onAction` reports. */
+  key: string;
+  /** The caption under the glyph AND the action's accessible name. */
+  label: string;
+  icon: BloomIconComponent;
+  /** Default `'neutral'`. */
+  tone?: SwipeRowActionTone;
+  /** Called on its own, in addition to the row's `onAction`. */
+  onPress?: () => void;
+}
+
+/**
+ * The two panes. `left` is uncovered by dragging RIGHT (it enters from the left
+ * edge) and `right` by dragging left — the side names the EDGE the pane is
+ * anchored to, not the direction of the finger.
+ */
+export interface SwipeRowActions {
+  left?: readonly SwipeRowAction[];
+  right?: readonly SwipeRowAction[];
+}
+
+/**
+ * The three pane pairs, background and what is legible on it.
+ *
+ * A family with its own resolved palette (a chat row, a mail row) passes the
+ * pairs it already computed, so its panes match the rest of the row exactly;
+ * everything else lets {@link resolveSwipeRowPaint} read them off the theme.
+ */
+export interface SwipeRowPaint {
+  neutral: string;
+  onNeutral: string;
+  accent: string;
+  onAccent: string;
+  negative: string;
+  onNegative: string;
+}
+
+export interface SwipeRowProps {
+  /** What is behind the row on each side. A side with no actions cannot open. */
+  actions: SwipeRowActions;
+  /** Called with the action's `key` when one is pressed. */
+  onAction?: (key: string) => void;
+  /**
+   * An exact height for the container. Omit it for a row that sizes itself —
+   * the panes stretch to whatever the child turns out to be.
+   */
+  height?: number;
+  /** Defaults to {@link resolveSwipeRowPaint} of the active theme. */
+  paint?: SwipeRowPaint;
+  /**
+   * The fill the travelling row is painted on. Defaults to the theme's page
+   * colour.
+   *
+   * It is NOT decoration. The panes are laid UNDER the row, so a row with a
+   * transparent background lets them show straight through it as it moves —
+   * the delete pane reading through the subject line. A row that sits on a card
+   * passes that card's fill.
+   */
+  background?: string;
+  /** The radius the panes are clipped to. Default {@link SWIPE_ROW_RADIUS}. */
+  radius?: number;
+  /** How wide one action is. Default {@link SWIPE_ACTION_WIDTH}. */
+  actionWidth?: number;
+  /** Names the tap target that closes an open pane. Default `'Close actions'`. */
+  closeLabel?: string;
+  /** Fires whenever a pane settles open or closed. */
+  onOpenChange?: (side: 'left' | 'right' | null) => void;
+  children: ReactNode;
+  testID?: string;
+}

package/src/swipe-row/use-swipe-available.ts

@@ -0,0 +1,49 @@
+import { useEffect, useState } from 'react';
+import { Platform } from 'react-native';
+
+const COARSE_POINTER = '(pointer: coarse)';
+
+/** `undefined` wherever there is no `matchMedia` — SSR, a test renderer, an old browser. */
+function coarsePointerQuery(): MediaQueryList | undefined {
+  if (typeof window === 'undefined' || typeof window.matchMedia !== 'function') return undefined;
+  try {
+    return window.matchMedia(COARSE_POINTER);
+  } catch {
+    return undefined;
+  }
+}
+
+/**
+ * Whether a drag is the right affordance for THIS pointer.
+ *
+ * Native is always yes. Web is yes only where the pointer is COARSE: a web
+ * build runs on a phone as readily as on a desktop, and the answer is a
+ * property of the input device, not of the platform the bundle was built for.
+ * A mouse gets the hover affordance its family draws instead — a drag is
+ * undiscoverable with a pointer, and a `pointerdown`-driven pan fights text
+ * selection.
+ *
+ * It is a HOOK rather than a constant because the answer changes without a
+ * reload: a tablet with a keyboard folio attached and detached is the same
+ * document, and a desktop window dragged to a touchscreen is too.
+ */
+export function useSwipeAvailable(): boolean {
+  const [coarse, setCoarse] = useState<boolean>(() => coarsePointerQuery()?.matches ?? false);
+
+  useEffect(() => {
+    const query = coarsePointerQuery();
+    if (query === undefined) return undefined;
+    setCoarse(query.matches);
+    const listener = (event: MediaQueryListEvent) => setCoarse(event.matches);
+    // `addListener` is the deprecated spelling, and the only one Safari below
+    // 14 has. Losing the subscription is silent, so both are tried.
+    if (typeof query.addEventListener === 'function') {
+      query.addEventListener('change', listener);
+      return () => query.removeEventListener('change', listener);
+    }
+    query.addListener(listener);
+    return () => query.removeListener(listener);
+  }, []);
+
+  return Platform.OS === 'web' ? coarse : true;
+}

package/src/switch/Switch.tsx

@@ -1,3 +1,6 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useRef } from 'react';
 import { Pressable, Animated, StyleSheet } from 'react-native';
 
@@ -8,34 +11,31 @@ import { useAccessibleNameWarning } from '../hooks/use-accessible-name-warning';
 import { useFieldMembership } from '../field/membership';
 import type { SwitchProps } from './types';
 
-const TRACK = { default: { w: 44, h: 26 }, sm: { w: 36, h: 22 } } as const;
-const THUMB = { default: 22, sm: 18 } as const;
+const TRACK = { xs: { w: 30, h: 18 }, sm: { w: 36, h: 22 }, md: { w: 44, h: 26 }, lg: { w: 52, h: 30 } } as const;
+const THUMB = { xs: 14, sm: 18, md: 22, lg: 26 } as const;
 const PADDING = 2;
 const SQUEEZE_RATIO = 0.75; // thumb height shrinks to 75% when pressed
 
 const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, SwitchProps>(
-  (
-    { value, onValueChange, disabled, style, size = 'default', accessibilityLabel, nativeID, testID },
-    ref,
-  ) => {
+  ({ checked: checkedProp, value, onCheckedChange: onCheckedChangeProp, onValueChange, disabled, style, size: sizeProp, tone: toneProp, accessibilityLabel, nativeID, testID }, ref) => {
+    const checked = checkedProp ?? value ?? false;
+    const onCheckedChange = onCheckedChangeProp ?? onValueChange;
     const theme = useTheme();
-    // A switch draws no text, so a `Field` is often the only thing that names
-    // it — and the warning has to see the RESOLVED name, or a correctly
-    // labelled switch inside a field warns anyway and the warning stops
-    // meaning anything.
+    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const paint = resolveBloomColors(theme.colors, tone, 'solid');
     const field = useFieldMembership({ accessibilityLabel, disabled, nativeID });
     const isDisabled = field.disabled;
     useAccessibleNameWarning('Switch', field.accessibilityLabel);
-    const anim = useRef(new Animated.Value(value ? 1 : 0)).current;
+    const anim = useRef(new Animated.Value(checked ? 1 : 0)).current;
     const pressAnim = useRef(new Animated.Value(0)).current;
 
-    // Track last value to detect external changes and animate accordingly.
-    // This avoids useEffect while still handling controlled value changes.
-    const prevValueRef = useRef(value);
-    if (prevValueRef.current !== value) {
-      prevValueRef.current = value;
+    // Track last checked to detect external changes and animate accordingly.
+    // This avoids useEffect while still handling controlled checked changes.
+    const prevValueRef = useRef(checked);
+    if (prevValueRef.current !== checked) {
+      prevValueRef.current = checked;
       Animated.spring(anim, {
-        toValue: value ? 1 : 0,
+        toValue: checked ? 1 : 0,
         useNativeDriver: false,
         ...animation.spring.gentle,
       }).start();
@@ -43,8 +43,8 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 
     const handlePress = useCallback(() => {
       if (isDisabled) return;
-      onValueChange(!value);
-    }, [isDisabled, value, onValueChange]);
+      onCheckedChange?.(!checked);
+    }, [isDisabled, checked, onCheckedChange]);
 
     const onPressIn = useCallback(() => {
       if (isDisabled) return;
@@ -69,7 +69,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
 
     const trackBg = anim.interpolate({
       inputRange: [0, 1],
-      outputRange: [theme.colors.border, theme.colors.primary],
+      outputRange: [theme.colors.border, paint.background],
     });
 
     const thumbX = anim.interpolate({
@@ -93,7 +93,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
       <Pressable
         ref={ref}
         role="switch"
-        aria-checked={value}
+        aria-checked={checked}
         // The NAME. A switch renders a track and a thumb, so there is no text
         // for the name to be computed from and no sibling caption either
         // platform will adopt — without this the control announces "switch, on"
@@ -133,6 +133,7 @@ const SwitchComponent = React.forwardRef<React.ElementRef<typeof Pressable>, Swi
             style={[
               styles.thumb,
               {
+                backgroundColor: anim.interpolate({ inputRange: [0, 1], outputRange: [theme.colors.text, paint.foreground] }),
                 width: thumb,
                 height: thumbHeight,
                 borderRadius: thumbRadius,
@@ -157,7 +158,6 @@ const styles = StyleSheet.create({
     opacity: 0.4,
   },
   thumb: {
-    backgroundColor: '#fff',
     // Subtle raise (`shadow-s`) — `boxShadow` on web (RN-Web deprecated `shadow*`),
     // RN elevation/shadow on native.
     ...bloomShadowStyle('s'),

package/src/switch/types.ts

@@ -1,16 +1,20 @@
+import type { BloomSize, BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 export interface SwitchProps {
   /** Current on/off state */
-  value: boolean;
+  checked?: boolean;
+  value?: boolean;
   /** Called when the user toggles the switch */
-  onValueChange: (value: boolean) => void;
+  onCheckedChange?: (checked: boolean) => void;
+  onValueChange?: (value: boolean) => void;
   /** Whether the switch is disabled */
   disabled?: boolean;
   /** Container style */
   style?: StyleProp<ViewStyle>;
   /** Size variant */
-  size?: 'default' | 'sm';
+  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
+  tone?: BloomTone;
   /**
    * The switch's accessible NAME, and the only way to give it one.
    *

package/src/tab-bar/TabBarBase.tsx

@@ -15,18 +15,20 @@
  */
 import {
   Children,
+  Fragment,
   createContext,
   useCallback,
   useContext,
   useEffect,
   useMemo,
+  useState,
   type ComponentType,
+  type ComponentProps,
 } from 'react';
 import {
   Platform,
   Pressable,
   StyleSheet,
-  useWindowDimensions,
   View,
   type ViewStyle,
 } from 'react-native';
@@ -49,6 +51,8 @@ import { useHaptics } from '../hooks/use-haptics';
 import { useClaimBottomEdge } from '../layout/bottom-edge';
 import { windowEdgeGap } from '../layout/edge';
 import type { ProgressiveBlurProps } from '../progressive-blur/types';
+import { useTheme } from '../theme/use-theme';
+import { SolidTabBarSurface } from './surface-solid';
 import { setMinimized, useMinimizeState } from './context';
 import {
   BAR_MARGIN,
@@ -79,7 +83,9 @@ import type { TabBarButtonProps, TabBarProps, TabBarTheme } from './types';
  * its own `isFocused` for tinting and has no highlight to drive).
  */
 type BarContextValue = {
+  scrollable: boolean;
   /** Live highlight position, in tab units. Fractional while scrubbing. */
+  progress: SharedValue<number>;
   slideIndex: SharedValue<number>;
   /**
    * Highlight visibility, 0–1. Below 1 only when the bar has NO selection (an
@@ -105,6 +111,11 @@ type BarContextValue = {
 
 const BarContext = createContext<BarContextValue | null>(null);
 
+function OptionalGesture({ enabled, children, ...props }: ComponentProps<typeof GestureDetector> & { enabled: boolean }) {
+  return enabled ? <GestureDetector {...props}>{children}</GestureDetector> : <Fragment>{children}</Fragment>;
+}
+
+
 interface TabBarBodyProps extends TabBarProps {
   Surface: ComponentType<TabBarSurfaceProps>;
   Blur: ComponentType<ProgressiveBlurProps>;
@@ -126,13 +137,18 @@ function TabBarBody({
   haptics = true,
   blur = true,
   maxWidth,
+  embedded = false,
+  scrollable = false,
+  material = 'translucent',
+  minimizeProgress,
+  onLayout,
   style,
   ...viewProps
 }: TabBarBodyProps) {
   const insets = useSafeAreaInsets();
-  const { width: windowWidth } = useWindowDimensions();
+  const [containerWidth, setContainerWidth] = useState(0);
   const minimized = useMinimizeState();
-  const progress = minimized.progress;
+  const progress = minimizeProgress ?? minimized.progress;
   const tabCount = Math.max(Children.count(children), 1);
 
   // Is a tab selected at all?
@@ -161,7 +177,8 @@ function TabBarBody({
   const highlightOpacity = useSharedValue(hasSelection ? 1 : 0);
   const isDragging = useSharedValue(false);
   const lastTicked = useSharedValue(-1);
-  const theme = useTabBarTheme(themeOverrides);
+  const { colors } = useTheme();
+  const theme = useTabBarTheme(material === 'solid' ? { ...themeOverrides, solidFallback: themeOverrides?.solidFallback ?? colors.backgroundSecondary } : themeOverrides);
   const impact = useHaptics();
 
   // The pill's OUTER width (the box the animated minimize inset is applied
@@ -175,7 +192,8 @@ function TabBarBody({
   // the whole window. Each expanded slot gets at most a comfortable 88pt; more
   // tabs naturally grow the pill until it reaches the available width. An
   // explicit `maxWidth` remains an additional ceiling, never a width request.
-  const availableWidth = windowWidth - BAR_MARGIN * 2;
+  const availableWidth = Math.max(0, containerWidth - (embedded ? 0 : BAR_MARGIN * 2));
+  const minimizeInset = embedded ? 0 : Math.min(MINIMIZED_INSET, Math.max(0, (availableWidth - tabCount * 44 - ROW_PAD_H * 2) / 2));
   const contentWidth = tabCount * MAX_EXPANDED_ITEM_WIDTH + ROW_PAD_H * 2;
   const barOuterWidth = Math.min(availableWidth, contentWidth, maxWidth ?? Infinity);
 
@@ -281,7 +299,7 @@ function TabBarBody({
       const sideInset = interpolate(
         minimizedValue,
         [0, 1],
-        [0, MINIMIZED_INSET],
+        [0, minimizeInset],
         Extrapolation.CLAMP,
       );
       // `event.x` is measured from the left edge of the view the detector is
@@ -382,6 +400,7 @@ function TabBarBody({
     return Gesture.Race(pan, tap, longPress);
   }, [
     barOuterWidth,
+    minimizeInset,
     tabCount,
     selectIndex,
     hasLongPress,
@@ -426,9 +445,9 @@ function TabBarBody({
     // leaving the highlight narrower than the tab it sits under. Static styles
     // are unaffected — they take RNW's own StyleSheet path, which does handle
     // the shorthand — so this only bites inside a mapper.
-    const inset = interpolate(progress.value, [0, 1], [0, MINIMIZED_INSET], Extrapolation.CLAMP);
+    const inset = interpolate(progress.value, [0, 1], [0, minimizeInset], Extrapolation.CLAMP);
     return { height, marginLeft: inset, marginRight: inset };
-  }, [progress]);
+  }, [progress, minimizeInset]);
 
   // The capsule shape lives on the surface itself: iOS 26 glass renders its own
   // native corner configuration (true squircle + rim lighting). Clipping a
@@ -441,7 +460,7 @@ function TabBarBody({
       Extrapolation.CLAMP,
     );
     return { borderRadius: height / 2 };
-  }, [progress]);
+  }, [progress, minimizeInset]);
 
   // One shared highlight that slides between tabs (transform-only → GPU). All
   // geometry derives from shared values, never from layout callbacks.
@@ -461,7 +480,7 @@ function TabBarBody({
     const sideInset = interpolate(
       progress.value,
       [0, 1],
-      [0, MINIMIZED_INSET],
+      [0, minimizeInset],
       Extrapolation.CLAMP,
     );
     // Same `barOuterWidth` the scrub worklet resolves an index from — see the
@@ -480,11 +499,11 @@ function TabBarBody({
       opacity: highlightOpacity.value,
       transform: [{ translateX: ROW_PAD_H + itemWidth * slideIndex.value }],
     };
-  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount]);
+  }, [progress, slideIndex, highlightOpacity, barOuterWidth, tabCount, minimizeInset]);
 
   // Shared with `useTabBarFootprint`, so a consumer accounting for the bar in
   // its own layout can never drift from where the bar actually sits.
-  const bottomOffset = windowEdgeGap(insets.bottom);
+  const bottomOffset = embedded ? 0 : windowEdgeGap(insets.bottom);
 
   // Publish what the bar occupies so anything else at this edge stacks above it
   // rather than behind it. Same number `useTabBarFootprint` reports, derived from
@@ -492,7 +511,7 @@ function TabBarBody({
   // where the bar actually sits. The EXPANDED height on purpose: the bar
   // minimizes on scroll and re-expands, so claiming the minimized height would
   // drop a FAB onto the pill the moment the user scrolled back up.
-  useClaimBottomEdge(bottomOffset + EXPANDED_HEIGHT);
+  useClaimBottomEdge(embedded ? 0 : bottomOffset + EXPANDED_HEIGHT);
 
   // How centring and the animated inset compose: centring is STATIC and belongs
   // to the wrap, the inset stays ANIMATED on the pill inside it. The wrap is
@@ -509,12 +528,13 @@ function TabBarBody({
   const constrainedWrapStyle: ViewStyle | null =
     barOuterWidth === availableWidth ? null : { width: barOuterWidth, alignSelf: 'center' };
   const barContext = useMemo(
-    () => ({ slideIndex, highlightOpacity, isDragging, theme, activeIndex, driven, selectIndex }),
-    [slideIndex, highlightOpacity, isDragging, theme, activeIndex, driven, selectIndex],
+    () => ({ scrollable, progress, slideIndex, highlightOpacity, isDragging, theme, activeIndex, driven, selectIndex }),
+    [scrollable, progress, slideIndex, highlightOpacity, isDragging, theme, activeIndex, driven, selectIndex],
   );
 
+  const ResolvedSurface = material === 'solid' ? SolidTabBarSurface : Surface;
   return (
-    <View {...viewProps} pointerEvents="box-none" style={[styles.root, style]}>
+    <View {...viewProps} onLayout={(event) => { setContainerWidth(event.nativeEvent.layout.width); onLayout?.(event); }} pointerEvents="box-none" style={[embedded ? { width: '100%' } : styles.root, style]}>
       {/* Progressive blur rising from the screen's bottom edge behind the pill.
           Rendered CONDITIONALLY, and as nothing at all when off: the band is
           full-bleed and 114pt tall at a zero bottom inset, so it blurs whatever
@@ -523,7 +543,7 @@ function TabBarBody({
           rect — that exists to do nothing. Stays full-bleed under `maxWidth`:
           it is the screen-edge scrim content dissolves into, not part of the
           pill. */}
-      {blur !== false && (
+      {!embedded && blur !== false && (
         <Blur
           direction="bottom"
           intensity={typeof blur === 'object' ? blur.intensity : undefined}
@@ -536,10 +556,10 @@ function TabBarBody({
           }}
         />
       )}
-      <View pointerEvents="box-none" style={[styles.barWrap, { marginBottom: bottomOffset }, constrainedWrapStyle]}>
-        <GestureDetector gesture={gesture}>
+      <View pointerEvents="box-none" style={[embedded ? undefined : styles.barWrap, { marginBottom: bottomOffset }, constrainedWrapStyle]}>
+        <OptionalGesture enabled={!scrollable} gesture={gesture}>
           <Animated.View style={barStyle}>
-            <Surface theme={theme} style={shapeStyle} />
+            <ResolvedSurface theme={theme} style={shapeStyle} />
             <Animated.View
               style={[styles.highlight, { backgroundColor: theme.highlight }, highlightStyle]}
             />
@@ -547,7 +567,7 @@ function TabBarBody({
               <BarContext.Provider value={barContext}>{children}</BarContext.Provider>
             </View>
           </Animated.View>
-        </GestureDetector>
+        </OptionalGesture>
       </View>
     </View>
   );
@@ -571,8 +591,8 @@ function TabBarButtonBody({
   ...pressableProps
 }: TabBarButtonBodyProps) {
   const minimized = useMinimizeState();
-  const progress = minimized.progress;
   const bar = useContext(BarContext);
+  const progress = bar?.progress ?? minimized.progress;
   // Resolved outside the bar too, so a standalone button still themes itself.
   const standaloneTheme = useTabBarTheme();
   const theme = bar?.theme ?? standaloneTheme;
@@ -692,7 +712,7 @@ function TabBarButtonBody({
         // one tap produced `PRESSABLE selectIndex(1)` AND `GESTURE tap
         // selectIndex(1)` ~600ms apart on a busy JS thread — so there, and only
         // there, this press stands down.
-        if (isFocused === undefined && Platform.OS !== 'android') bar?.selectIndex(index);
+        if (isFocused === undefined && (bar?.scrollable || Platform.OS !== 'android')) bar?.selectIndex(index);
         onPress?.(event);
       }}
       // `Pressable`'s `style` also accepts a function of the press state; both

package/src/tab-bar/types.ts

@@ -80,6 +80,13 @@ export type TabBarTheme = {
 };
 
 export type TabBarProps = ViewProps & {
+  /** Inline layout for coordinated navigation compositions. */
+  embedded?: boolean;
+  /** Prefer horizontal scrolling over scrub gestures when targets overflow. */
+  scrollable?: boolean;
+  material?: 'solid' | 'translucent';
+  /** One motion signal shared with screen chrome. */
+  minimizeProgress?: SharedValue<number>;
   /**
    * CONTROLLED path — the index of the focused tab. The bar owns the sliding
    * highlight and springs it here whenever this changes. Use this when there is

package/src/table/Table.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, {
   Children,
   createContext,
@@ -9,7 +10,6 @@ import React, {
 import { Platform, Pressable, ScrollView, View, type TextStyle, type ViewStyle } from 'react-native';
 import Svg, { Path } from 'react-native-svg';
 
-import { resolveButtonRamps } from '../button/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
@@ -40,16 +40,8 @@ import type {
  * No radius, no outer border — the table sits inside a surface that owns
  * those (a data table wraps it in a `rounded-2xl border` card).
  *
- * Colours are semantic tokens resolved through the ramps `Button`
- * derives from Bloom's theme (`button/shared.ts`):
- *
- *                     light        dark
- *   header surface    neutral-100  neutral-900   background-secondary-default
- *   hairlines         neutral-200  neutral-800   separator-border
- *   header text       neutral-400  neutral-600   text-tertiary
- *   cell text         text         text          text-primary
- *   sorted chevron    neutral-500  neutral-500   text-secondary
- *   selected row      neutral-100  neutral-900   background-secondary-default
+ * Headers, selections and separators read the shared tonal surface roles.
+ * Header labels retain the theme's readable secondary foreground.
  *
  * React Native has no table layout, so the auto column sizing of an HTML table
  * cannot be ported: every row is a flex row, and a column takes a fixed `width`
@@ -74,26 +66,16 @@ interface TablePalette {
 }
 
 function resolveTablePalette(theme: Theme): TablePalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  return theme.isDark
-    ? {
-        headerBackground: n[900],
-        hairline: n[800],
-        headerText: n[600],
-        text: theme.colors.text,
-        sortActive: n[500],
-        selectedRow: n[900],
-        ring: accent[500],
-      }
-    : {
-        headerBackground: n[100],
-        hairline: n[200],
-        headerText: n[400],
-        text: theme.colors.text,
-        sortActive: n[500],
-        selectedRow: n[100],
-        ring: accent[500],
-      };
+  const c = theme.colors;
+  return {
+    headerBackground: c.backgroundSecondary,
+    hairline: c.borderLight,
+    headerText: c.textSecondary,
+    text: c.text,
+    sortActive: c.textSecondary,
+    selectedRow: c.backgroundSecondary,
+    ring: c.primary,
+  };
 }
 
 const GEOMETRY = {
@@ -248,7 +230,7 @@ function indexChildren(children: React.ReactNode): React.ReactNode {
 }
 
 export function Table({
-  size = 'md',
+  size: sizeProp,
   children,
   accessibilityLabel,
   minWidth,
@@ -256,6 +238,8 @@ export function Table({
   containerStyle,
   testID,
 }: TableProps) {
+  const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
+  const size: NonNullable<TableProps['size']> = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const theme = useTheme();
   const palette = useMemo(() => resolveTablePalette(theme), [theme]);
   const columns = readColumns(children);