@oxy.so/bloom 5.4.1 → 6.1.0

package/src/rating/types.ts

@@ -62,8 +62,8 @@ export interface RatingProps {
   testID?: string;
 }
 
-/** `small` is a 24px star, `medium` (default) 32, `large` 40. */
-export type RatingInputSize = 'small' | 'medium' | 'large';
+/** `sm` is a 24px star, `md` (default) 32, `lg` 40. */
+export type RatingInputSize = 'sm' | 'md' | 'lg';
 
 export interface RatingInputProps {
   /**
@@ -75,7 +75,7 @@ export interface RatingInputProps {
   onChange: (value: number) => void;
   /** How many stars. Default `5`. */
   max?: number;
-  /** Default `medium`. */
+  /** Default `md`. */
   size?: RatingInputSize;
   /** Disables the whole group: no press, no keyboard, dimmed. */
   disabled?: boolean;

package/src/route-stops/RouteStops.tsx

@@ -249,12 +249,12 @@ function RouteStopsComponent({
       {onAddStop ? (
         <View style={{ alignItems: 'flex-start', paddingLeft: 8, paddingTop: 4 }}>
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             leadingIcon={addIcon}
             onPress={onAddStop}
             disabled={!canAddStop}
-            testID={testID ? `${testID}-add` : undefined}
+            testID={testID ? `${testID}-add` : undefined} tone="accent" appearance="plain"
           >
             {labels?.addStop ?? messages.addStop}
           </Button>

package/src/screen/Screen.tsx

@@ -27,7 +27,7 @@ export function Screen({ header, bottomBar, primaryAction, active: requestedActi
   const [measuredBottom, setBottom] = useState<number | null>(null);
   const top = measuredTop ?? headerHeight ?? (56 + (Platform.OS === 'web' ? 0 : insets?.top ?? 0));
   const bottom = measuredBottom ?? bottomBarHeight ?? (58 + windowEdgeGap(insets?.bottom ?? 0));
-  const [keyboardVisible, setKeyboardVisible] = useState(false);
+  const [keyboardVisible, setKeyboardVisible] = useState(() => Platform.OS !== 'web' && (Keyboard.isVisible?.() ?? false));
   useEffect(() => {
     if (Platform.OS === 'web') return;
     const show = Keyboard.addListener('keyboardDidShow', () => setKeyboardVisible(true));
@@ -37,8 +37,8 @@ export function Screen({ header, bottomBar, primaryAction, active: requestedActi
   const hasBottom = !keyboardVisible && Boolean(bottomBar || primaryAction);
   const document = documentScroll && Platform.OS === 'web';
   const value = useMemo(() => ({ active, scrollY, collapseProgress, collapseTarget, activeScrollerId,
-    contentInsetsHandled: document, topInset: header ? top : 0, bottomInset: hasBottom ? bottom + contentClearance : navigationScope === 'inherit' ? inheritedNavigation?.bottomInset ?? contentClearance : contentClearance,
-  }), [active, scrollY, collapseProgress, collapseTarget, activeScrollerId, header, hasBottom, top, bottom, contentClearance, navigationScope, inheritedNavigation?.bottomInset, document]);
+    contentInsetsHandled: document, topInset: header ? top : 0, bottomInset: keyboardVisible ? contentClearance : hasBottom ? bottom + contentClearance : navigationScope === 'inherit' ? inheritedNavigation?.bottomInset ?? contentClearance : contentClearance,
+  }), [active, scrollY, collapseProgress, collapseTarget, activeScrollerId, header, hasBottom, top, bottom, contentClearance, navigationScope, inheritedNavigation?.bottomInset, document, keyboardVisible]);
   useScreenWindowBinding(value, { active: document });
   const headerNode = header ? <View testID={testID ? `${testID}-header` : undefined} pointerEvents="box-none" onLayout={event => setTop(event.nativeEvent.layout.height)} style={document ? { position: WEB_POSITION_STICKY, top: 0, zIndex: Z_INDEX.floating, marginBottom: -top } : { position: 'absolute', top: 0, left: 0, right: 0 }}>{header}</View> : null;
   const bottomNode = hasBottom ? <View testID={testID ? `${testID}-bottom` : undefined} pointerEvents="box-none" onLayout={event => setBottom(event.nativeEvent.layout.height)} style={document ? { position: WEB_POSITION_STICKY, bottom: 0, zIndex: Z_INDEX.floating, marginTop: -bottom } : { position: 'absolute', bottom: 0, left: 0, right: 0 }}>{bottomBar ?? <View pointerEvents="box-none" style={{ alignItems: 'flex-end', paddingHorizontal: 16, paddingBottom: windowEdgeGap(insets?.bottom ?? 0), minHeight: bottom }}>{primaryAction}</View>}</View> : null;

package/src/screen/use-screen-scroll.ts

@@ -1,6 +1,7 @@
+import { animateMotion } from '../motion/recipes';
 import type { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { useCallback, useEffect, useId } from 'react';
-import { runOnJS, useAnimatedScrollHandler, useComposedEventHandler, useReducedMotion, useSharedValue, withSpring } from 'react-native-reanimated';
+import { runOnJS, useAnimatedScrollHandler, useComposedEventHandler, useReducedMotion, useSharedValue } from 'react-native-reanimated';
 import { useScreen } from './context';
 import type { ScreenScrollOptions } from './types';
 
@@ -30,7 +31,7 @@ export function useScreenScroll({ active: requestedActive = true, handler = null
     const target = y < 24 ? 0 : delta > 3 ? 1 : delta < -3 ? 0 : screen.collapseTarget.value;
     if (target !== screen.collapseTarget.value) {
       screen.collapseTarget.value = target;
-      screen.collapseProgress.value = reducedMotion ? target : withSpring(target, { duration: 380, dampingRatio: 1 });
+      animateMotion(screen.collapseProgress, target, 'expand', reducedMotion);
     }
   } }, [screen, active, id, previousY, reducedMotion, hasRestoration, record, restoring]);
   const onScroll = useComposedEventHandler([ownHandler, handler]);

package/src/screen/use-screen-window-scroll.ts

@@ -1,5 +1,6 @@
+import { animateMotion } from '../motion/recipes';
 import { useEffect } from 'react';
-import { useReducedMotion, withSpring } from 'react-native-reanimated';
+import { useReducedMotion } from 'react-native-reanimated';
 import { useScreen, type ScreenContextValue } from './context';
 import { useScreenScroll } from './use-screen-scroll';
 import type { ScreenScrollOptions } from './types';
@@ -28,7 +29,7 @@ export function useScreenWindowBinding(screen: ScreenContextValue, options: Scre
       const target = y < 24 ? 0 : delta > 3 ? 1 : delta < -3 ? 0 : screen.collapseTarget.value;
       if (target !== screen.collapseTarget.value) {
         screen.collapseTarget.value = target;
-        screen.collapseProgress.value = reducedMotion ? target : withSpring(target, { duration: 380, dampingRatio: 1 });
+        animateMotion(screen.collapseProgress, target, 'expand', reducedMotion);
       }
     };
     if (screen.activeScrollerId.value === owner) screen.scrollY.value = previous;

package/src/segmented-control/SegmentedControl.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance, type BloomSize } from '../appearance';
 import {
   createContext,
@@ -30,7 +29,7 @@ import { useInteractionState } from '../hooks/use-interaction-state';
 import { borderRadius, DISABLED_OPACITY } from '../styles/tokens';
 import { NOT_DISABLED, interactiveWebCss, useInteractiveWebCss } from '../styles/interactive-web-css';
 import type { WebCssStyle } from '../styles/web-view-style';
-import { mixColor, resolveButtonRamps } from '../button/shared';
+
 import { useFieldMembership } from '../field/membership';
 import { handleRovingKeyDown, useRovingTabIndex } from '../hooks/roving-focus';
 import { webDataSet } from '../styles/web-data';
@@ -58,7 +57,7 @@ import { webDataSet } from '../styles/web-data';
  * segment reads through its text weight and colour alone.
  */
 
-type SegmentedControlSize = BloomSize | 'small' | 'medium' | 'large';
+type SegmentedControlSize = BloomSize;
 type SegmentedControlVariant = 'solid' | 'plain';
 
 const GEOMETRY = {
@@ -219,7 +218,7 @@ export function SegmentedControl<T extends string>({
 }) {
   const onValueChange = onValueChangeProp ?? onChange ?? (() => {});
   const theme = useTheme();
-  const {size} = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
+  const {size} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   useInteractiveWebCss(STYLE_ID, SEGMENTED_CSS);
   // The group is ONE control made of several segments, so a `Field` names the
   // group and disables all of it. `label` is the group's name rather than

package/src/select/Select.tsx

@@ -1,3 +1,4 @@
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
@@ -14,26 +15,14 @@ import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { useDialogContext, useDialogControl } from '../dialog/context';
 import { SheetShell } from '../dialog/SheetShell';
-import {
-  ROW_ICON_SIZE,
-  ROW_INDICATOR_END_CLASS,
-  SELECT_CHEVRON_SIZE,
-  SELECT_ITEM_CLASS,
-  SELECT_ITEM_SIZE_CLASS,
-  SELECT_ITEM_TEXT_CLASS,
-  SELECT_SEPARATOR_CLASS,
-  SELECT_TRIGGER_CLASS,
-  SELECT_TRIGGER_POPUP,
-  SELECT_TRIGGER_SIZE_CLASS,
-  SELECT_VALUE_CLASS,
-} from '../floating/constants';
+import { SELECT_CHEVRON_SIZE, SELECT_ITEM_CLASS, SELECT_ITEM_SIZE_CLASS, SELECT_TRIGGER_CLASS, SELECT_TRIGGER_POPUP, SELECT_TRIGGER_SIZE_CLASS, SELECT_VALUE_CLASS } from '../floating/constants';
 import { useMenuPalette } from '../floating/menu-palette';
 import { menuType, menuTypeClass } from '../floating/menu-type';
 import { cx } from '../floating/shared';
 import { TriggerSlot } from '../floating/TriggerSlot';
 import type { DialogControlProps } from '../dialog/types';
 import { useInteractionState } from '../hooks/use-interaction-state';
-import { RiCheckLine as CheckIcon } from '../icons/remix/RiCheckLine';
+
 import {
   StyledPressable,
   StyledText,
@@ -50,17 +39,7 @@ import {
   useSelectItemContext,
   VALUE_TYPE,
 } from './shared';
-import type {
-  SelectContentProps,
-  SelectIconProps,
-  SelectItemIndicatorProps,
-  SelectItemProps,
-  SelectItemTextProps,
-  SelectProps,
-  SelectItemContextValue,
-  SelectTriggerProps,
-  SelectValueProps,
-} from './types';
+import type { SelectContentProps, SelectIconProps, SelectItemProps, SelectProps, SelectItemContextValue, SelectTriggerProps, SelectValueProps } from './types';
 import { useFieldMembership } from '../field/membership';
 import { useMessages } from '../locale/messages';
 import { SELECT_MESSAGES } from './messages';
@@ -94,7 +73,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+export function Select(props: SelectProps) {
+  const { children, value: valueProp, defaultValue, onValueChange: onValueChangeProp, disabled, size: sizeProp } = props;
+  const [value, onValueChange] = useControllableState<string | undefined>({ value: valueProp, defaultValue, controlled: Object.prototype.hasOwnProperty.call(props, 'value'), onChange: next => { if (next !== undefined) onValueChangeProp?.(next); } });
   const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const control = useDialogControl();

package/src/select/Select.web.tsx

@@ -1,3 +1,4 @@
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useRequiredDescription } from './use-required-description';
 import { useBloomAppearance } from '../appearance';
 import React, {
@@ -12,21 +13,7 @@ import React, {
 } from 'react';
 import { ScrollView, StyleSheet, View } from 'react-native';
 
-import {
-  MENU_WIDTH,
-  ROW_ICON_SIZE,
-  ROW_INDICATOR_END_CLASS,
-  SELECT_CHEVRON_SIZE,
-  SELECT_ITEM_CLASS,
-  SELECT_ITEM_SIZE_CLASS,
-  SELECT_ITEM_TEXT_CLASS,
-  SELECT_MAX_HEIGHT,
-  SELECT_SEPARATOR_CLASS,
-  SELECT_TRIGGER_CLASS,
-  SELECT_TRIGGER_POPUP,
-  SELECT_TRIGGER_SIZE_CLASS,
-  SELECT_VALUE_CLASS,
-} from '../floating/constants';
+import { MENU_WIDTH, SELECT_CHEVRON_SIZE, SELECT_ITEM_CLASS, SELECT_ITEM_SIZE_CLASS, SELECT_MAX_HEIGHT, SELECT_TRIGGER_CLASS, SELECT_TRIGGER_POPUP, SELECT_TRIGGER_SIZE_CLASS, SELECT_VALUE_CLASS } from '../floating/constants';
 import { FloatingPanel } from '../floating/FloatingPanel';
 import { useMenuPalette } from '../floating/menu-palette';
 import { menuType, menuTypeClass } from '../floating/menu-type';
@@ -39,7 +26,7 @@ import {
   StyledText,
   StyledView,
 } from '../styles/styled-primitives';
-import { RiCheckLine as CheckIcon } from '../icons/remix/RiCheckLine';
+
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -53,17 +40,7 @@ import {
   useSelectItemContext,
   VALUE_TYPE,
 } from './shared';
-import type {
-  SelectContentProps,
-  SelectIconProps,
-  SelectItemIndicatorProps,
-  SelectItemProps,
-  SelectItemTextProps,
-  SelectProps,
-  SelectItemContextValue,
-  SelectTriggerProps,
-  SelectValueProps,
-} from './types';
+import type { SelectContentProps, SelectIconProps, SelectItemProps, SelectProps, SelectItemContextValue, SelectTriggerProps, SelectValueProps } from './types';
 import { useFieldMembership } from '../field/membership';
 import { useMessages } from '../locale/messages';
 import { SELECT_MESSAGES } from './messages';
@@ -182,7 +159,9 @@ function useSelectContext(): SelectContextValue {
 // Select
 // ---------------------------------------------------------------------------
 
-export function Select({ children, value, onValueChange, disabled, size: sizeProp }: SelectProps) {
+export function Select(props: SelectProps) {
+  const { children, value: valueProp, defaultValue, onValueChange: onValueChangeProp, disabled, size: sizeProp } = props;
+  const [value, onValueChange] = useControllableState<string | undefined>({ value: valueProp, defaultValue, controlled: Object.prototype.hasOwnProperty.call(props, 'value'), onChange: next => { if (next !== undefined) onValueChangeProp?.(next); } });
   const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const [isOpen, setIsOpen] = useState(false);

package/src/select/types.ts

@@ -13,6 +13,8 @@ export type SelectProps = {
    */
   size?: SelectSize;
   value?: string;
+  /** Initial selection when value is uncontrolled. */
+  defaultValue?: string;
   onValueChange?: (value: string) => void;
   disabled?: boolean;
 };

package/src/settings-list/SettingsList.tsx

@@ -177,7 +177,8 @@ export const SettingsListGroup = memo<SettingsListGroupProps>(function SettingsL
       */}
       <Card
         clipContent
-        variant={variant ?? 'plain'}
+        appearance={variant === 'filled' ? 'subtle' : 'solid'}
+        elevation="none"
         radius="radius-16"
         style={{ backgroundColor }}
         testID={SETTINGS_LIST_GROUP_TEST_ID}

package/src/settings-list/surface.ts

@@ -67,6 +67,7 @@
  * component must not lose.
  */
 import { surfaceFillOn } from '../styles/surface-levels';
+import { parseRgba } from '../theme/color-utils';
 import type { Theme } from '../theme/types';
 import type { SettingsListGroupVariant } from './types';
 
@@ -99,14 +100,13 @@ export function settingsGroupSurface(
 ): string {
   if (variant === 'filled') return theme.colors.backgroundSecondary;
   if (variant === 'plain') return theme.colors.card;
-  // A string equality, and deliberately: every Bloom surface publishes a colour
-  // read off the SAME theme object — level 0 resolves to `colors.background`,
-  // `Dialog` and the sheet shell publish it verbatim, a panel repainted as the
-  // page publishes it through `surfaceColor` — so the two are identical by
-  // construction, not by luck. A consumer publishing an equal-but-differently-
-  // spelled colour falls through to the step, which is a legible surface on the
-  // page too — just not the one the palette names. Wrong-but-legible, never
-  // invisible, which is the direction this failure has to fall.
-  if (ambientFill === theme.colors.background) return theme.colors.card;
+  // Composition may re-emit the same colour in another CSS syntax. Compare
+  // resolved channels so an unchanged page backing stays on the page branch.
+  const actual = parseRgba(ambientFill);
+  const page = parseRgba(theme.colors.background);
+  if (ambientFill === theme.colors.background || (actual && page &&
+      actual.r === page.r && actual.g === page.g && actual.b === page.b && actual.a === page.a)) {
+    return theme.colors.card;
+  }
   return surfaceFillOn(theme, ambientFill);
 }

package/src/settings-modal/SettingsModal.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import React, {
   useCallback,
   useEffect,
@@ -30,7 +31,7 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { Text } from '../typography';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import {
   SettingsModalContext,
   settingsLayoutFor,
@@ -144,7 +145,9 @@ export function SettingsModal({
   const common = useCommonMessages();
   const { messages } = useMessages(SETTINGS_MODAL_MESSAGES);
   useSettingsWebCss();
+  const parentFill = useSurfaceFill();
   const palette = useSettingsPalette();
+  const publishedFill = resolveSurfaceMaterial({ fill: palette.full, parentFill: parentFill }).publishedFill;
   const reducedMotion = useReducedMotion();
   const isControlled = controlledOpen !== undefined;
 
@@ -397,15 +400,15 @@ export function SettingsModal({
                           height: Math.min(PANEL_HEIGHT, vh - VIEWPORT_GUTTER * 2),
                         },
                     {
-                      backgroundColor: palette.full,
-                      ...surfaceFillVars(palette.full),
+                      backgroundColor: 'transparent',
+                      ...surfaceFillVars(publishedFill),
                       boxShadow: palette.shadowXs,
                     },
                     ringVars(palette),
                   ]}
                 >
-                  <SurfacePaint radius={layout === 'compact' ? 0 : 24} />
-                  <SurfaceLevelProvider level={1} fill={palette.full}>
+                  <SurfacePaint fill={palette.full} radius={layout === 'compact' ? 0 : 24} />
+                  <SurfaceLevelProvider level={1} fill={publishedFill}>
                   {layout === 'compact' ? (
                     compactPageOpen && pageConfig ? (
                       <View style={styles.content}>

package/src/shipment-request/ShipmentLoadPicker.tsx

@@ -193,7 +193,7 @@ function ShipmentLoadPickerComponent({
             min={1}
             max={maxQuantity}
             formatValue={labels.quantityValue}
-            size="small"
+            size="sm"
             disabled={disabled}
             style={{ paddingTop: 0, paddingBottom: 0 }}
             testID={id('quantity')}

package/src/sidebar/Sidebar.tsx

@@ -1,8 +1,7 @@
 import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill, useSurfaceLevelValue } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
-import { useTheme } from '../theme/use-theme';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { parseRgba, withAlpha } from '../theme/color-utils';
+import { parseRgba } from '../theme/color-utils';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import { useBloomAppearance } from '../appearance';
@@ -213,14 +212,13 @@ const SidebarPanel: React.FC<SidebarProps> = ({
   const noResultsLabel = noResultsLabelProp ?? messages.noResults;
   const modesLabel = modesLabelProp ?? messages.mode;
   const palette = useSidebarPalette();
-  const theme = useTheme();
   const parentFill = useSurfaceFill();
   const parentLevel = useSurfaceLevelValue();
   const customSurface = StyleSheet.flatten(style);
-  const surfaceFill = customSurface?.backgroundColor ?? (surface === 'plain' ? undefined : withAlpha(palette.panel, 0.25));
+  const surfaceFill = customSurface?.backgroundColor ?? (surface === 'plain' ? undefined : (palette.panel));
   const hasFill = typeof surfaceFill === 'string' && surfaceFill !== 'transparent' && parseRgba(surfaceFill)?.a !== 0;
   const paintsSurface = surface !== 'plain' && hasFill;
-  const publishedFill = hasFill ? resolveSurfaceFill(surfaceFill, false, paintsSurface ? theme.colors.card : parentFill) : undefined;
+  const publishedFill = hasFill ? resolveSurfaceMaterial({ fill: surfaceFill, parentFill, paint: paintsSurface }).publishedFill : undefined;
   const canonicalSize = sizeProp === 'small' ? 'sm' : sizeProp === 'medium' ? 'md' : sizeProp === 'large' ? 'lg' : sizeProp;
   const {size: scopedSize} = useBloomAppearance({size: canonicalSize}, {size: 'md', tone: 'neutral'});
   const size = scopedSize === 'xs' ? 'sm' : scopedSize;

package/src/sortable-media/SortablePhotoGrid.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef,
 import { Image, Platform, Pressable, View } from 'react-native';
 
 import { Button } from '../button';
-import { mixColor, resolveButtonRamps } from '../button/shared';
+import { resolveButtonRamps } from '../button/shared';
 import { webDataSet } from '../styles/web-data';
 import { resolveMenuPalette } from '../floating/menu-palette';
 import { useInteractionState } from '../hooks/use-interaction-state';
@@ -572,13 +572,13 @@ const PhotoTile = memo(function PhotoTile({
               {onRemove ? (
                 <View style={{ position: 'absolute', top: 6, right: 6 }}>
                   <Button
-                    variant="secondary"
-                    size="small"
+
+                    size="sm"
                     iconOnly
                     leadingIcon={RiCloseLine}
                     accessibilityLabel={labels.remove(position)}
                     onPress={() => onRemove(photo.id)}
-                    testID={testID ? `${testID}-remove` : undefined}
+                    testID={testID ? `${testID}-remove` : undefined} tone="neutral" appearance="outline"
                   />
                 </View>
               ) : null}
@@ -589,14 +589,14 @@ const PhotoTile = memo(function PhotoTile({
                     style={{ position: 'absolute', bottom: 6, left: 6 }}
                   >
                     <Button
-                      variant="secondary"
-                      size="small"
+
+                      size="sm"
                       iconOnly
                       leadingIcon={RiArrowLeftSLine}
                       accessibilityLabel={labels.moveEarlier(position)}
                       disabled={position === 1}
                       onPress={() => onMove(photo.id, 'earlier')}
-                      testID={testID ? `${testID}-earlier` : undefined}
+                      testID={testID ? `${testID}-earlier` : undefined} tone="neutral" appearance="outline"
                     />
                   </View>
                   <View
@@ -604,14 +604,14 @@ const PhotoTile = memo(function PhotoTile({
                     style={{ position: 'absolute', bottom: 6, right: 6 }}
                   >
                     <Button
-                      variant="secondary"
-                      size="small"
+
+                      size="sm"
                       iconOnly
                       leadingIcon={RiArrowRightSLine}
                       accessibilityLabel={labels.moveLater(position)}
                       disabled={position === total}
                       onPress={() => onMove(photo.id, 'later')}
-                      testID={testID ? `${testID}-later` : undefined}
+                      testID={testID ? `${testID}-later` : undefined} tone="neutral" appearance="outline"
                     />
                   </View>
                 </>
@@ -664,7 +664,7 @@ function UploadOverlay({
         style={{ width: '60%', alignItems: 'center', gap: 6 }}
       >
         {progress === undefined ? (
-          <Loading variant="spinner" size="small" color={paint.onMedia} />
+          <Loading variant="spinner" size="sm" color={paint.onMedia} />
         ) : (
           <>
             <Text variant="caption-1-semibold" style={{ color: paint.onMedia, fontVariant: ['tabular-nums'] }}>
@@ -727,11 +727,11 @@ function ErrorOverlay({
       )}
       {onRetry ? (
         <Button
-          variant="secondary"
+
           size="xs"
           onPress={onRetry}
           accessibilityLabel={labels.retry(position)}
-          testID={testID ? `${testID}-retry` : undefined}
+          testID={testID ? `${testID}-retry` : undefined} tone="neutral" appearance="outline"
         >
           {labels.retryAction}
         </Button>

package/src/stay-filters/AmenityFilter.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { ToggleChipGroup } from './ToggleChipGroup';
 import type { AmenityFilterProps } from './types';
 import { useCommonMessages } from '../locale/common-messages';
@@ -47,11 +47,11 @@ export function AmenityFilter<T extends string = string>({
       />
       {foldable ? (
         <View style={{ alignItems: 'flex-start' }}>
-          <Button
-            variant="link"
+          <LinkButton
+
             linkTone="text"
             underline="rest"
-            size="small"
+            size="sm"
             textVariant="body-semibold"
             style={{ paddingTop: 6, paddingBottom: 6, marginTop: -6, marginBottom: -6 }}
             aria-expanded={expanded}
@@ -59,7 +59,7 @@ export function AmenityFilter<T extends string = string>({
             testID={testID ? `${testID}-toggle` : undefined}
           >
             {expanded ? showLessLabel : showMoreLabel}
-          </Button>
+          </LinkButton>
         </View>
       ) : null}
     </View>

package/src/stay-filters/FilterFooter.tsx

@@ -1,8 +1,8 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
-import { resolveButtonRamps } from '../button/shared';
+import { Button , LinkButton } from '../button';
+
 import { useTheme } from '../theme/use-theme';
 import { useMessages } from '../locale/messages';
 import { STAY_FILTERS_MESSAGES } from './messages';
@@ -56,11 +56,11 @@ function FilterFooterComponent({
         style,
       ]}
     >
-      <Button
-        variant="link"
+      <LinkButton
+
         linkTone="text"
         underline="rest"
-        size="small"
+        size="sm"
         textVariant="body-semibold"
         style={{ paddingTop: 6, paddingBottom: 6, marginTop: -6, marginBottom: -6 }}
         onPress={onClear}
@@ -68,15 +68,15 @@ function FilterFooterComponent({
         testID={testID ? `${testID}-clear` : undefined}
       >
         {clearLabel}
-      </Button>
+      </LinkButton>
       <Button
-        variant="primary"
-        size="large"
+
+        size="lg"
         onPress={onApply}
         loading={loading}
         disabled={applyDisabled}
         accessibilityLabel={resultsLabel}
-        testID={testID ? `${testID}-apply` : undefined}
+        testID={testID ? `${testID}-apply` : undefined} tone="accent" appearance="solid"
       >
         {resultsLabel}
       </Button>

package/src/stay-filters/FilterTriggerButton.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo } from 'react';
 import { View } from 'react-native';
 
@@ -21,11 +22,14 @@ function FilterTriggerButtonComponent({
   onPress,
   label: labelProp,
   accessibilityLabel,
-  size = 'medium',
+  size: sizeProp,
   disabled,
   style,
   testID,
 }: FilterTriggerButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize;
+
   const { messages } = useMessages(STAY_FILTERS_MESSAGES);
   const label = labelProp ?? messages.filters;
   const applied = count > 0;
@@ -33,13 +37,13 @@ function FilterTriggerButtonComponent({
 
   const button = (
     <Button
-      variant="outline"
+
       size={size}
       leadingIcon={RiEqualizerLine}
       onPress={onPress}
       disabled={disabled}
       accessibilityLabel={name}
-      testID={testID}
+      testID={testID} tone="neutral" appearance="outline"
     >
       {label}
     </Button>

package/src/stay-filters/SegmentedFilter.tsx

@@ -21,7 +21,7 @@ export function SegmentedFilter<T extends string = string>({
     <SegmentedControl
       label={accessibilityLabel}
       type="radio"
-      size="large"
+      size="lg"
       value={value}
       onChange={onValueChange}
       style={[{ alignSelf: 'stretch' }, style]}

package/src/stay-filters/SwitchFilterRow.tsx

@@ -46,8 +46,8 @@ function SwitchFilterRowComponent({
         )}
       </View>
       <Switch
-        value={value}
-        onValueChange={onValueChange}
+        checked={value}
+        onCheckedChange={onValueChange}
         disabled={disabled}
         accessibilityLabel={name}
         testID={testID}

package/src/stay-filters/types.ts

@@ -197,8 +197,8 @@ export interface FilterTriggerButtonProps {
    * (the badge is a drawn number, so the name has to say it).
    */
   accessibilityLabel?: string;
-  /** `Button` size. Default `medium`. */
-  size?: 'small' | 'medium' | 'large';
+  /** `Button` size. Default `md`. */
+  size?: 'sm' | 'md' | 'lg';
   disabled?: boolean;
   style?: StyleProp<ViewStyle>;
   testID?: string;