@oxy.so/bloom 5.4.0 → 6.0.0

package/src/media-player/types.ts

@@ -4,8 +4,8 @@ import type { StyleProp, ViewStyle } from 'react-native';
 /** `off` → `all` → `one` → `off`. */
 export type RepeatMode = 'off' | 'all' | 'one';
 
-/** `compact` (play 32, glyphs 16), `regular` (play 48, glyphs 20, default), `large` (play 56, glyphs 24). */
-export type TransportControlsSize = 'compact' | 'regular' | 'large';
+/** `sm` (play 32, glyphs 16), `md` (play 48, glyphs 20, default), `lg` (play 56, glyphs 24). */
+export type TransportControlsSize = 'sm' | 'md' | 'lg';
 
 /** `music`: shuffle · previous · play · next · repeat. `podcast`: speed · back N · play · forward N · trailing. */
 export type TransportControlsVariant = 'music' | 'podcast';

package/src/media-shelf/Shelf.tsx

@@ -205,24 +205,24 @@ function ShelfComponent({
           {showArrows ? (
             <View {...webDataSet({ bloomShelfArrows: '' })} style={{ flexDirection: 'row', gap: 8 }}>
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 iconOnly
                 leadingIcon={RiArrowLeftSLine}
                 accessibilityLabel={`${previousLabel}: ${title}`}
                 disabled={!overflow.previous}
                 onPress={() => page(-1)}
-                testID={testID ? `${testID}-previous` : undefined}
+                testID={testID ? `${testID}-previous` : undefined} tone="neutral" appearance="outline"
               />
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 iconOnly
                 leadingIcon={RiArrowRightSLine}
                 accessibilityLabel={`${nextLabel}: ${title}`}
                 disabled={!overflow.next}
                 onPress={() => page(1)}
-                testID={testID ? `${testID}-next` : undefined}
+                testID={testID ? `${testID}-next` : undefined} tone="neutral" appearance="outline"
               />
             </View>
           ) : null}

package/src/menu-item/MenuItemOptions.tsx

@@ -203,12 +203,12 @@ function MenuItemOptionsComponent({
 
       {onSubmit ? (
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           disabled={disabled || submitDisabled}
           onPress={onSubmit}
-          testID={testID ? `${testID}-submit` : undefined}
+          testID={testID ? `${testID}-submit` : undefined} tone="accent" appearance="solid"
         >
           {total ? `${submitLabel} · ${total}` : submitLabel}
         </Button>

package/src/menu-item/MenuItemRow.tsx

@@ -89,7 +89,7 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
 
   const control = unavailable ? null : stepper ? (
     <Stepper
-      size="small"
+      size="sm"
       value={quantity}
       min={0}
       onValueChange={onQuantityChange!}
@@ -98,13 +98,13 @@ function MenuItemRowComponent(props: MenuItemRowProps) {
     />
   ) : onAdd ? (
     <Button
-      variant="secondary"
-      size="small"
+
+      size="sm"
       iconOnly
       leadingIcon={RiAddLine}
       accessibilityLabel={addLabel ?? messages.addItem(name)}
       onPress={onAdd}
-      testID={testID ? `${testID}-add` : undefined}
+      testID={testID ? `${testID}-add` : undefined} tone="neutral" appearance="outline"
     />
   ) : null;
 

package/src/message-media/VideoMessage.tsx

@@ -96,7 +96,7 @@ function PlayGlyph({ playing }: { playing: boolean }) {
       accessibilityElementsHidden
       importantForAccessibility="no-hide-descendants"
     >
-      <PlayButton playing={playing} size="medium" variant="inverse" interactive={false} />
+      <PlayButton playing={playing} size="md" variant="inverse" interactive={false} />
     </View>
   );
 }

package/src/message-media/VoiceMessage.tsx

@@ -372,7 +372,7 @@ function VoiceMessageComponent({
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: space.md }}>
         <PlayButton
           playing={playing}
-          size="small"
+          size="sm"
           variant={tone === 'outgoing' ? 'inverse' : 'accent'}
           accessibilityLabel={playing ? messages.pauseVoiceMessage : messages.playVoiceMessage}
           onPress={onPlayPress}

package/src/motion/ScreenTransition.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
-import { Platform, type StyleProp, type ViewStyle } from 'react-native';
+import { Platform } from 'react-native';
 import Animated, {
   Easing,
   FadeIn,
+  useReducedMotion,
   FadeOut,
   SlideInLeft,
   SlideInRight,
 } from 'react-native-reanimated';
-import type { ScreenTransitionDirection, ScreenTransitionProps } from './types';
+import type { ScreenTransitionProps } from './types';
 
 /** CSS-smooth deceleration for the native slide. */
 const SLIDE_EASING = Easing.out(Easing.exp);
@@ -30,6 +31,7 @@ export function ScreenTransition({
   children,
 }: ScreenTransitionProps) {
   const isWeb = Platform.OS === 'web';
+  const reducedMotion = useReducedMotion();
 
   const entering = isWeb
     ? enabledWeb
@@ -44,7 +46,7 @@ export function ScreenTransition({
     : FadeOut.duration(WEB_FADE_DURATION);
 
   return (
-    <Animated.View entering={entering} exiting={exiting} style={style}>
+    <Animated.View entering={reducedMotion ? undefined : entering} exiting={reducedMotion ? undefined : exiting} style={style}>
       {children}
     </Animated.View>
   );

package/src/motion/index.ts

@@ -1,3 +1,5 @@
 export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion';
 export { ScreenTransition } from './ScreenTransition';
 export type { ScreenTransitionProps, ScreenTransitionDirection } from './types';
+export { MOTION_RECIPES, animateMotion } from './recipes';
+export type { MotionIntent } from './recipes';

package/src/motion/index.web.ts

@@ -6,3 +6,5 @@
 export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop } from './motion.web';
 export { ScreenTransition } from './ScreenTransition';
 export type { ScreenTransitionProps, ScreenTransitionDirection } from './types';
+export { MOTION_RECIPES, animateMotion } from './recipes';
+export type { MotionIntent } from './recipes';

package/src/motion/recipes.ts

@@ -0,0 +1,23 @@
+import { ReduceMotion, withSpring, withTiming, type SharedValue } from 'react-native-reanimated';
+
+/** Intent owns timing; geometry and gesture velocity remain with the component. */
+export const MOTION_RECIPES = {
+  press: { duration: 120, reduceMotion: ReduceMotion.System },
+  select: { duration: 420, dampingRatio: 0.82, reduceMotion: ReduceMotion.System },
+  expand: { duration: 380, dampingRatio: 1, reduceMotion: ReduceMotion.System },
+  present: { duration: 220, reduceMotion: ReduceMotion.System },
+  dismiss: { duration: 150, reduceMotion: ReduceMotion.System },
+} as const;
+export type MotionIntent = keyof typeof MOTION_RECIPES;
+
+/** Retarget the existing value: no reset, timer, or second animation owner. */
+export function animateMotion(value: SharedValue<number>, target: number, intent: MotionIntent, reducedMotion = false): void {
+  'worklet';
+  if (reducedMotion) {
+    value.value = target;
+  } else if (intent === 'select' || intent === 'expand') {
+    value.value = withSpring(target, MOTION_RECIPES[intent]);
+  } else {
+    value.value = withTiming(target, MOTION_RECIPES[intent]);
+  }
+}

package/src/motion/selection-motion.ts

@@ -0,0 +1,32 @@
+import { MOTION_RECIPES } from './recipes';
+import { ReduceMotion, withSpring, withTiming, type SharedValue } from 'react-native-reanimated';
+
+/** Interruptible capsule movement, shared by navigation and grouped controls. */
+export const SELECTION_SPRING = MOTION_RECIPES.select;
+export const SELECTION_FADE = { duration: 160, reduceMotion: ReduceMotion.System };
+
+/**
+ * A missing selection fades in place; a fully hidden capsule appears at its
+ * next target. A visible capsule springs from its current position, including
+ * during an interrupted fade. A pager/gesture driver can retain position
+ * ownership while using the same visibility transition.
+ *
+ * Safe inside gesture/reaction worklets. Scheduling onto the UI thread belongs
+ * to the caller, so direct manipulation never gains a second position writer.
+ */
+export function moveSelection(
+  position: SharedValue<number>,
+  opacity: SharedValue<number>,
+  target: number | null,
+  driven = false,
+): void {
+  'worklet';
+  if (target === null) {
+    opacity.value = withTiming(0, SELECTION_FADE);
+    return;
+  }
+  if (!driven) {
+    position.value = opacity.value === 0 ? target : withSpring(target, SELECTION_SPRING);
+  }
+  opacity.value = withTiming(1, SELECTION_FADE);
+}

package/src/music-library/RecentSearches.tsx

@@ -170,11 +170,11 @@ function RecentSearchesComponent({
       </View>
       {onClearAll && items.length > 0 ? (
         <Button
-          variant="secondary"
-          size="small"
+
+          size="sm"
           onPress={onClearAll}
           style={{ alignSelf: 'flex-start', marginTop: 8 }}
-          testID={testID ? `${testID}-clear-all` : undefined}
+          testID={testID ? `${testID}-clear-all` : undefined} tone="neutral" appearance="outline"
         >
           {clearAllLabel}
         </Button>

package/src/navigation-banner/ArrivalBar.tsx

@@ -147,11 +147,11 @@ function ArrivalBarComponent({
         {action ??
           (onEnd ? (
             <Button
-              variant="destructive"
+
               size="lg"
               icon={RiCloseLine}
               onPress={onEnd}
-              testID={testID ? `${testID}-end` : undefined}
+              testID={testID ? `${testID}-end` : undefined} tone="danger" appearance="solid"
             >
               {endWord}
             </Button>

package/src/note-card/NoteCard.tsx

@@ -227,7 +227,7 @@ const NoteCardComponent: React.FC<NoteCardProps> = ({
       testID={testID ? `${testID}-checkbox` : undefined}
     >
       <CheckboxGlyph
-        size="medium"
+        size="md"
         checked={selected}
         indeterminate={false}
         disabled={false}
@@ -262,7 +262,7 @@ const NoteCardComponent: React.FC<NoteCardProps> = ({
             style={{ flexDirection: 'row', alignItems: 'flex-start', minWidth: 0 }}
           >
             <CheckboxGlyph
-              size="small"
+              size="sm"
               checked={item.done === true}
               indeterminate={false}
               disabled={false}
@@ -359,7 +359,7 @@ const NoteCardComponent: React.FC<NoteCardProps> = ({
     ) : null;
 
   const body = (
-    <Card variant="outlined" radius={geo.radius} border={selected ? 'medium' : 'thin'} style={cardStyle}>
+    <Card  radius={geo.radius} border={selected ? 'medium' : 'thin'} style={cardStyle} appearance="outline">
       <SurfaceLevelProvider level={1} fill={background}>
         {checkbox}
         <View style={{ flex: 1, minWidth: 0 }}>

package/src/note-card/NoteCardSkeleton.tsx

@@ -21,10 +21,10 @@ export function NoteCardSkeleton({ density = 'grid', lines, style, testID }: Not
 
   return (
     <Card
-      variant="outlined"
+
       radius={geo.radius}
       style={{ padding: geo.padding, minHeight: geo.minHeight }}
-      testID={testID}
+      testID={testID} appearance="outline"
     >
       <View
         aria-hidden

package/src/note-editor/NoteEditorToolbar.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { useMemo } from 'react';
 import { View } from 'react-native';
 
@@ -47,13 +48,15 @@ import type { NoteEditorToolbarProps } from './types';
 
 export function NoteEditorToolbar({
   actions,
-  size = 'medium',
+  size: sizeProp,
   disabled = false,
   accessibilityLabel,
   labels: labelsProp,
   style,
   testID,
 }: NoteEditorToolbarProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
   const { messages } = useMessages(NOTE_EDITOR_MESSAGES);
   const { width, onLayout } = useContainerWidth();
   const labels = { ...messages.toolbar, ...labelsProp };

package/src/note-editor/constants.ts

@@ -11,8 +11,8 @@ import type { NoteEditorToolbarProps } from './types';
  * and the fix is to export the table rather than to edit these.
  */
 export const TOOLBAR_ITEM_SIZE: Record<NonNullable<NoteEditorToolbarProps['size']>, number> = {
-  medium: 34,
-  small: 30,
+  md: 34,
+  sm: 30,
 };
 
 /** The group's own 1px border, both sides. */

package/src/note-editor/shared.ts

@@ -20,7 +20,7 @@ import type { NoteEditorAction, NoteEditorToolbarProps, NoteSaveState } from './
  */
 export function toolbarCapacity(
   width: number,
-  size: NonNullable<NoteEditorToolbarProps['size']> = 'medium',
+  size: NonNullable<NoteEditorToolbarProps['size']> = 'md',
 ): number {
   const item = TOOLBAR_ITEM_SIZE[size];
   const usable = width - TOOLBAR_GROUP_BORDER + TOOLBAR_DIVIDER;

package/src/note-editor/types.ts

@@ -100,8 +100,8 @@ export interface NoteEditorToolbarLabels {
 export interface NoteEditorToolbarProps {
   /** The actions, in the order they are drawn. */
   actions: ReadonlyArray<NoteEditorAction>;
-  /** The `ButtonGroup` rung. Default `medium` (34px items); `small` is 30. */
-  size?: 'medium' | 'small';
+  /** The `ButtonGroup` rung. Default `md` (34px items); `sm` is 30. */
+  size?: 'md' | 'sm';
   /** Disables every action and the overflow, without each caller writing it per action. */
   disabled?: boolean;
   /** Names the toolbar. Required in substance — a row of glyphs has no name of its own. */

package/src/overlay/Overlay.tsx

@@ -1,3 +1,4 @@
+import { ScreenScope } from '../layout/screen-scope';
 /**
  * The shared plumbing every portaled surface needs: an interactive ROOT and a
  * press-to-dismiss BACKDROP. Dialog, BottomSheet, the image gallery, menus and
@@ -39,7 +40,7 @@
  * Use `<OverlayRoot>` for the surface's outermost node and `<Backdrop>` for its
  * dimming layer; do not re-implement either with raw `View`s.
  */
-import { createContext, memo, useContext, useMemo, type ReactNode } from 'react';
+import { createContext, memo, useContext, useMemo } from 'react';
 import { BlurView } from 'expo-blur';
 
 import { useWindowedBlurTarget } from '../glass/blur-target';
@@ -225,15 +226,10 @@ function OverlayRootView({
             `bottom-sheet/…Base`       level 0, fill `theme.colors.background`
             `floating/FloatingPanel`   level 1 — the menu/popover surface
 
-          Two portaled surfaces still paint something they do not publish:
-          `SettingsModal` paints `resolveSettingsPalette(theme).full` and
-          `Tooltip` the menu palette, so content inside either reads the page
-          rung rather than their real fill. That is an approximation inherited
-          from before the ladder existed, not a claim made here — and the fix is
-          for each of them to publish its own `fill`, not for this root to guess
-          one on their behalf.
         */}
-        <SurfaceLevelProvider level={0}>{children}</SurfaceLevelProvider>
+        <ScreenScope>
+            <SurfaceLevelProvider level={0}>{children}</SurfaceLevelProvider>
+          </ScreenScope>
       </StyledView>
     </OverlayLayerContext.Provider>
   );

package/src/page-header/PageHeader.tsx

@@ -21,7 +21,7 @@ import { useSurfaceFill } from '../styles/surface-levels';
 import { useScreenContext } from '../screen/context';
 import { Button } from '../button';
 import { BUTTON_SHADOW } from '../button/shared';
-import { ControlSurface } from '../control-surface';
+import { BloomScope } from "../appearance";
 import { GlassIsland } from '../glass';
 import { RiArrowLeftLine } from '../icons/remix/RiArrowLeftLine';
 import { useClaimTopEdge, useScrollOffset } from '../layout';
@@ -59,7 +59,7 @@ import { useCommonMessages } from '../locale/common-messages';
  * ── THE ISLANDS ARE THE CONSUMER'S GROUPING ─────────────────────────────────
  *
  * The header never infers grouping by reading its children's types. The
- * `actions` slot is wrapped in a `ControlSurface` with `material: 'glass'`, so
+ * `actions` slot is wrapped in a `BloomScope` with shared control defaults, so
  * a `ButtonGroup` placed there becomes one island with no prop written on it,
  * and two `ButtonGroup`s become two islands. That is a declaration the consumer
  * makes, which is the only way the header can be right about which actions
@@ -408,7 +408,7 @@ function PageHeaderComponent({
       pointerEvents={floating ? 'box-none' : undefined}
       testID={testID ? `${testID}-actions` : undefined}
     >
-      {floating ? <ControlSurface material="glass">{actions}</ControlSurface> : actions}
+      {floating ? <BloomScope>{actions}</BloomScope> : actions}
     </View>
   ) : null;
 
@@ -447,7 +447,7 @@ function PageHeaderComponent({
         >
           {backButton}
           {floating && leading ? (
-            <ControlSurface material="glass">{leading}</ControlSurface>
+            <BloomScope>{leading}</BloomScope>
           ) : (
             leading
           )}

package/src/page-header/types.ts

@@ -103,7 +103,7 @@ export interface PageHeaderProps {
   leading?: ReactNode;
   /**
    * Rendered at the end of the bar. In the floating presentation this slot is
-   * wrapped in a `ControlSurface` with `material: 'glass'`, so a `ButtonGroup`
+   * wrapped in a `BloomScope` with shared control defaults, so a `ButtonGroup`
    * inside it becomes one island with no prop written on it. Declare the
    * grouping yourself — the header never infers it by reading children.
    */

package/src/pipeline/DealCard.tsx

@@ -120,13 +120,13 @@ function DealCardComponent({
   return (
     <SurfaceLevelProvider level={2} fill={paint.surface}>
       <Card
-        variant="outlined"
+
         radius="radius-12"
         style={[
           { padding: DEAL_CARD_PADDING, gap: 8, ...surfaceFillVars(paint.surface) },
           style,
         ]}
-        testID={testID}
+        testID={testID} appearance="outline"
       >
         <View style={{ flexDirection: 'row', alignItems: 'flex-start', gap: 4 }}>
           {subject}

package/src/pipeline/PipelineColumn.tsx

@@ -144,7 +144,7 @@ function PipelineColumnComponent({
         )}
 
         {onLoadMore && !loading ? (
-          <Button variant="text" size="small" onPress={onLoadMore} testID={id('load-more')}>
+          <Button  size="sm" onPress={onLoadMore} testID={id('load-more')} tone="accent" appearance="plain">
             {loadMoreLabel}
           </Button>
         ) : null}

package/src/place-card/PlaceActions.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo } from 'react';
 import { View } from 'react-native';
 
@@ -29,11 +30,14 @@ import type { PlaceActionsProps } from './types';
  */
 function PlaceActionsComponent({
   actions,
-  size = 'small',
+  size: sizeProp,
   accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: PlaceActionsProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'sm', tone: 'neutral' });
+  const size = inheritedSize;
+
   const { messages } = useMessages(PLACE_CARD_MESSAGES);
   const accessibilityLabel = accessibilityLabelProp ?? messages.actions;
   if (actions.length === 0) return null;
@@ -56,14 +60,14 @@ function PlaceActionsComponent({
       {actions.map((action) => (
         <Button
           key={action.id}
-          variant="secondary"
+
           size={size}
           leadingIcon={action.icon}
           href={action.href}
           onPress={action.onPress}
           disabled={action.disabled}
           accessibilityLabel={action.accessibilityLabel ?? action.label}
-          testID={testID ? `${testID}-${action.id}` : undefined}
+          testID={testID ? `${testID}-${action.id}` : undefined} tone="neutral" appearance="outline"
         >
           {action.label}
         </Button>

package/src/place-card/types.ts

@@ -65,7 +65,7 @@ export interface PlaceAction {
 export interface PlaceActionsProps {
   actions: readonly PlaceAction[];
   /** Default `small` — the rung `ai-profile-card` draws its header actions at. */
-  size?: 'small' | 'medium';
+  size?: 'sm' | 'md';
   /** Names the row, which is a `group`. `"Actions"` in English. */
   accessibilityLabel?: string;
   style?: StyleProp<ViewStyle>;

package/src/place-details/PlaceAmenities.tsx

@@ -124,7 +124,7 @@ function PlaceAmenitiesComponent({
         </View>
       ))}
       {onShowAll && fullCount > shown.length ? (
-        <Button variant="secondary" onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined}>
+        <Button  onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined} tone="neutral" appearance="outline">
           {showAllLabel ? showAllLabel(fullCount) : listingMessages.showAllAmenities(fullCount)}
         </Button>
       ) : null}

package/src/place-details/PlacePopularTimes.tsx

@@ -125,7 +125,7 @@ function PlacePopularTimesComponent({
       {days.length > 1 ? (
         <SegmentedControl
           type="radio"
-          size="small"
+          size="sm"
           label={daysLabel}
           value={current?.id ?? ''}
           onValueChange={setSelected}

package/src/place-reviews/PlaceReviewCard.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useState } from 'react';
 import { Pressable, View, type LayoutChangeEvent } from 'react-native';
 
 import { Avatar } from '../avatar';
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { Chip } from '../chip';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { RiCheckLine } from '../icons/remix/RiCheckLine';
@@ -262,16 +262,16 @@ function PlaceReviewCardComponent({
               <View />
             )}
             {onReport ? (
-              <Button
-                variant="link"
+              <LinkButton
+
                 linkTone="secondary"
-                size="small"
+                size="sm"
                 leadingIcon={RiFlagLine}
                 onPress={onReport}
                 testID={id('report')}
               >
                 {reportLabel}
-              </Button>
+              </LinkButton>
             ) : null}
           </View>
         ) : null}

package/src/place-reviews/WriteReviewPrompt.tsx

@@ -74,20 +74,20 @@ function WriteReviewPromptComponent({
             </Text>
           </View>
         </View>
-        <Button variant="primary" size="small" leadingIcon={RiQuillPenLine} onPress={onStart} testID={id('start')}>
+        <Button  size="sm" leadingIcon={RiQuillPenLine} onPress={onStart} testID={id('start')} tone="accent" appearance="solid">
           {actionLabel}
         </Button>
       </View>
       {onDismiss ? (
         <View style={{ position: 'absolute', top: 12, right: 12 }}>
           <Button
-            variant="secondary"
+
             size="xs"
             iconOnly
             leadingIcon={RiCloseLine}
             accessibilityLabel={dismissLabel}
             onPress={onDismiss}
-            testID={id('dismiss')}
+            testID={id('dismiss')} tone="neutral" appearance="outline"
           />
         </View>
       ) : null}

package/src/price-breakdown/PriceSummary.tsx

@@ -102,12 +102,12 @@ function PriceSummaryComponent({
       {collapsible ? (
         <View style={{ alignItems: 'flex-start', paddingTop: showLines ? PRICE_LINE_GAP : 0 }}>
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             trailingIcon={open ? RiArrowUpSLine : RiArrowDownSLine}
             onPress={toggle}
             aria-expanded={open}
-            testID={testID ? `${testID}-disclosure` : undefined}
+            testID={testID ? `${testID}-disclosure` : undefined} tone="accent" appearance="plain"
           >
             {open ? collapseLabel : expandLabel}
           </Button>

package/src/proof-of-delivery/ProofOfDelivery.tsx

@@ -296,8 +296,8 @@ function ProofOfDeliveryComponent({
         <InteractionBoundary disabled={disabled || submitting}>{actions}</InteractionBoundary>
       ) : (
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           onPress={submit}
           // `submitting` is the ONE thing that stops the press: a second
@@ -305,7 +305,7 @@ function ProofOfDeliveryComponent({
           // does not stop it — it answers it.
           disabled={disabled || submitting}
           accessibilityLabel={labels.submit}
-          testID={id('submit')}
+          testID={id('submit')} tone="accent" appearance="solid"
         >
           {labels.submit}
         </Button>

package/src/proof-of-delivery/SignaturePad.tsx

@@ -252,13 +252,13 @@ function SignaturePadComponent({
         </Text>
         {hasInk ? (
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             leadingIcon={RiDeleteBinLine}
             onPress={clear}
             disabled={disabled}
             accessibilityLabel={labels.clear}
-            testID={id('clear')}
+            testID={id('clear')} tone="accent" appearance="plain"
           >
             {labels.clear}
           </Button>