@oxy.so/bloom 5.4.1 → 6.1.0

package/src/glass/GlassIsland.tsx

@@ -1,28 +1,25 @@
+import { resolveSurfaceGeometry } from '../surface/resolve-surface-geometry';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import React, { memo } from 'react';
 import { StyleSheet, View } from 'react-native';
 
 import { useDirectionProps, useIsRtl } from '../hooks/use-is-rtl';
-import { ControlSurface } from '../control-surface';
+import { BloomScope } from "../appearance";
 import { bloomShadowStyle } from '../design-tokens/shadows';
-import { SurfaceLevelProvider, surfaceFillVars, hairlineOn } from '../styles/surface-levels';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { borderRadius } from '../styles/tokens';
-import { withAlpha } from '../theme/color-utils';
-import { BORDER_WIDTH } from '../design-tokens/scales';
-import { useTheme } from '../theme/use-theme';
 import { SurfacePaint } from '../surface/SurfacePaint';
 import type { GlassIslandProps } from './types';
 
-/** Floating control container using shared material; glass is an explicit opt-in.
+/** Floating control container using the shared glass material.
  * Paint clips itself so the host can preserve its external shadow.
  */
 const GlassIslandComponent: React.FC<GlassIslandProps> = ({
   children,
-  material = 'solid',
-  radius = borderRadius.full,
+  radius,
   cornerCurve = SURFACE_SHAPES.glass.curve,
   role,
   accessibilityLabel,
@@ -30,19 +27,17 @@ const GlassIslandComponent: React.FC<GlassIslandProps> = ({
   style,
   testID,
 }) => {
-  const theme = useTheme();
   const directionProps = useDirectionProps();
   const direction = useIsRtl() ? 'rtl' : 'ltr';
   const layer = useSurfaceLayer();
   const customStyle = StyleSheet.flatten(style);
-  const glass = material === 'glass';
-  const tint = String(customStyle?.backgroundColor ?? (glass ? withAlpha(layer.fill, 0.25) : layer.fill));
-  const fill = resolveSurfaceFill(tint, glass, layer.parentFill);
-  const publishedFill = resolveSurfaceFill(fill, false, layer.parentFill);
-  const shape = { radius, curve: radius === borderRadius.full ? 'round' as const : cornerCurve };
+  const material = resolveSurfaceMaterial({ fill: String(customStyle?.backgroundColor ?? layer.fill), parentFill: layer.parentFill, parentLevel: layer.parentLevel });
+  const { paintFill: fill, publishedFill: publishedFill } = material;
+  const geometry = resolveSurfaceGeometry(radius, style, borderRadius.full, cornerCurve);
+  const shape = geometry.shape;
 
   return (
-    <ControlSurface material={material}>
+    <BloomScope>
       <View
         {...directionProps}
         role={role}
@@ -51,28 +46,24 @@ const GlassIslandComponent: React.FC<GlassIslandProps> = ({
         style={[
           styles.island,
           {
-            ...surfaceStyle(shape, direction),
-            borderWidth: BORDER_WIDTH.hairline,
-            borderColor: hairlineOn(theme, publishedFill),
+            ...geometry.style, ...surfaceStyle(shape, direction),
           },
           bloomShadowStyle('glass'),
           style,
-          { backgroundColor: 'transparent', ...surfaceFillVars(publishedFill), ...surfaceStyle(shape, direction), borderWidth: BORDER_WIDTH.hairline },
+          { backgroundColor: 'transparent', ...material.vars, ...geometry.style, ...surfaceStyle(shape, direction) },
         ]}
       >
         <SurfacePaint
           fill={fill}
-          backdrop={layer.parentFill}
-          glass={glass}
-          radius={radius}
+          radius={geometry.radius}
           shape={shape}
           direction={direction}
           sheen={sheen}
           testID={testID ? `${testID}-material` : undefined}
         />
-        <SurfaceLevelProvider level={layer.level} fill={publishedFill}>{children}</SurfaceLevelProvider>
+        <SurfaceLevelProvider level={material.level} fill={publishedFill}>{children}</SurfaceLevelProvider>
       </View>
-    </ControlSurface>
+    </BloomScope>
   );
 };
 

package/src/glass/types.ts

@@ -16,11 +16,9 @@ export interface GlassBlurWindowProps {
 }
 
 /** Geometry is controlled by radius and cornerCurve; material owns clipping. */
-type GlassStyle = Omit<ViewStyle, Extract<keyof ViewStyle, `border${string}Radius` | `border${string}Width` | 'borderCurve' | 'overflow'>>;
+type GlassStyle = Omit<ViewStyle, Extract<keyof ViewStyle, `border${string}Radius` | `border${string}Width` | 'borderCurve' | 'overflow'>> & Pick<ViewStyle, 'borderRadius'>;
 
 export interface GlassIslandProps {
-  /** Shared solid material by default; glass explicitly enables translucent optics. */
-  material?: 'solid' | 'glass';
   children?: ReactNode;
   /**
    * Corner radius. A full pill by default — an island is a capsule, and a

package/src/home-search/HomeSearchBar.tsx

@@ -289,14 +289,14 @@ export function HomeSearchBar<K extends string = string>({
                 )}
                 {isLast ? (
                   <Button
-                    variant="primary"
-                    size="large"
+
+                    size="lg"
                     icon={RiSearchLine}
                     iconOnly={!open || compact}
                     onPress={onSearch}
                     accessibilityLabel={searchLabel}
                     testID={testID ? `${testID}-search` : undefined}
-                    style={{ marginRight: STAY_SEARCH_BUTTON_INSET - 1, flexShrink: 0 }}
+                    style={{ marginRight: STAY_SEARCH_BUTTON_INSET - 1, flexShrink: 0 }} tone="accent" appearance="solid"
                   >
                     {open && !compact ? searchLabel : undefined}
                   </Button>

package/src/home-search/SavedSearchCard.tsx

@@ -193,24 +193,24 @@ function SavedSearchCardComponent({
         </Text>
         {onEdit ? (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             onPress={onEdit}
             accessibilityLabel={messages.actionOn(editLabel, title)}
-            testID={testID ? `${testID}-edit` : undefined}
+            testID={testID ? `${testID}-edit` : undefined} tone="neutral" appearance="outline"
           >
             {editLabel}
           </Button>
         ) : null}
         {onDelete ? (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             iconOnly
             icon={RiDeleteBinLine}
             onPress={onDelete}
             accessibilityLabel={messages.actionOn(deleteLabel, title)}
-            testID={testID ? `${testID}-delete` : undefined}
+            testID={testID ? `${testID}-delete` : undefined} tone="neutral" appearance="outline"
           />
         ) : null}
       </View>

package/src/home-search/SearchModeTabs.tsx

@@ -161,7 +161,7 @@ export function SearchModeTabs<K extends string = HomeSearchMode>({
       <SegmentedControl
         label={accessibilityLabel}
         type="tabs"
-        size="large"
+        size="lg"
         value={value}
         onChange={onValueChange}
         style={[{ alignSelf: 'stretch' }, style]}

package/src/hooks/use-controllable-state.ts

@@ -3,6 +3,8 @@ import { useCallback, useRef, useState } from 'react';
 export interface UseControllableStateOptions<T> {
   /** Controlled value. When defined, the hook does not own internal state. */
   value?: T;
+  /** Override detection when an explicitly undefined value is a controlled empty state. */
+  controlled?: boolean;
   /** Initial value used when uncontrolled. */
   defaultValue: T;
   /** Notified whenever the value changes, controlled or not. */
@@ -20,11 +22,12 @@ export interface UseControllableStateOptions<T> {
  */
 export function useControllableState<T>({
   value,
+  controlled,
   defaultValue,
   onChange,
 }: UseControllableStateOptions<T>): [T, (next: T) => void] {
   const [internal, setInternal] = useState<T>(defaultValue);
-  const isControlled = value !== undefined;
+  const isControlled = controlled ?? (value !== undefined);
   const current = isControlled ? (value as T) : internal;
 
   const onChangeRef = useRef(onChange);

package/src/index.ts

@@ -159,7 +159,6 @@ export * from './button';
 export { Surface } from './surface';
 export type { SurfaceProps } from './surface';
 export * from './button-group';
-export * from './control-surface';
 export {
   EDGE_GAP,
   windowEdgeGap,
@@ -178,7 +177,7 @@ export {
 } from './layout';
 export type { StickySectionProps } from './layout';
 export { Fab } from './fab';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './fab';
+export type { FabProps, FabSize } from './fab';
 export { FrostedIconButton } from './frosted-icon-button';
 export type { FrostedIconButtonProps, FrostedIconButtonSize } from './frosted-icon-button';
 export * from './divider';
@@ -290,8 +289,8 @@ export { SubtleHover } from './subtle-hover';
 export type { SubtleHoverProps } from './subtle-hover';
 
 // Motion presets (Reanimated enter/exit + directional screen transition)
-export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion';
-export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion';
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition, MOTION_RECIPES, animateMotion } from './motion';
+export type { ScreenTransitionProps, ScreenTransitionDirection, MotionIntent } from './motion';
 export { AnimatedCheck } from './animated-check';
 export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 
@@ -596,6 +595,8 @@ export type {
   VoiceMessageProps,
   VoicePlaybackRate,
 } from './message-media';
+export { Sticker, provideLottiePlayer, resetLottiePlayer } from './sticker';
+export type { LottiePlayerProps, StickerProps } from './sticker';
 export {
   BUBBLE_RADIUS,
   BUBBLE_TAIL_RADIUS,

package/src/index.web.ts

@@ -164,7 +164,6 @@ export * from './button/index.web';
 export { Surface } from './surface/index.web';
 export type { SurfaceProps } from './surface/index.web';
 export * from './button-group/index.web';
-export * from './control-surface';
 export {
   EDGE_GAP,
   windowEdgeGap,
@@ -183,7 +182,7 @@ export {
 } from './layout';
 export type { StickySectionProps } from './layout';
 export { Fab } from './fab/index.web';
-export type { FabProps, FabVariant, FabSize, FabPlacement, FabMinimizeBehavior } from './fab/index.web';
+export type { FabProps, FabSize } from './fab/index.web';
 export { FrostedIconButton } from './frosted-icon-button/index.web';
 export type { FrostedIconButtonProps, FrostedIconButtonSize } from './frosted-icon-button/index.web';
 export * from './divider';
@@ -295,8 +294,8 @@ export { SubtleHover } from './subtle-hover';
 export type { SubtleHoverProps } from './subtle-hover';
 
 // Motion presets (Reanimated enter/exit + directional screen transition)
-export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition } from './motion/index.web';
-export type { ScreenTransitionProps, ScreenTransitionDirection } from './motion/index.web';
+export { ScaleAndFadeIn, ScaleAndFadeOut, ShrinkAndPop, ScreenTransition, MOTION_RECIPES, animateMotion } from './motion/index.web';
+export type { ScreenTransitionProps, ScreenTransitionDirection, MotionIntent } from './motion/index.web';
 export { AnimatedCheck } from './animated-check';
 export type { AnimatedCheckProps, AnimatedCheckRef } from './animated-check';
 
@@ -601,6 +600,8 @@ export type {
   VoiceMessageProps,
   VoicePlaybackRate,
 } from './message-media';
+export { Sticker, provideLottiePlayer, resetLottiePlayer } from './sticker/index.web';
+export type { LottiePlayerProps, StickerProps } from './sticker/index.web';
 export {
   BUBBLE_RADIUS,
   BUBBLE_TAIL_RADIUS,

package/src/input-group/InputGroup.tsx

@@ -1,4 +1,3 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance, type BloomSize } from '../appearance';
 import React, {
   Children,
@@ -166,7 +165,7 @@ const InputGroupComponent = function InputGroup({
   // neither the field nor the text-field group. The group publishes no name — it
   // does not know which of its children is the control the label points at, so
   // that stays the field's `nativeID` and the input's to apply.
-  const { size } = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'md', tone: 'neutral'});
+  const { size } = useBloomAppearance({size: sizeProp}, {size: 'md', tone: 'neutral'});
   const member = useFieldMembership({ disabled: disabledProp, invalid: invalidNew ?? isInvalid });
   const disabled = member.disabled;
   const invalid = member.invalid;

package/src/input-group/types.ts

@@ -35,7 +35,7 @@ export interface InputGroupProps {
    * `sm` is the `small` input (32 tall), `md` the `medium` (36, the
    * default), `lg` extends the ramp (44).
    */
-  size?: BloomSize | 'small' | 'medium' | 'large' | 'default';
+  size?: BloomSize;
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }

package/src/job-board/JobBoard.tsx

@@ -250,11 +250,11 @@ function JobBoardComponent({
         {active > 0 ? (
           <View style={{ flexDirection: 'row' }}>
             <Button
-              variant="text"
-              size="small"
+
+              size="sm"
               onPress={clear}
               accessibilityLabel={labels.clearFilters}
-              testID={id('clear')}
+              testID={id('clear')} tone="accent" appearance="plain"
             >
               {labels.clearFilters}
             </Button>
@@ -296,8 +296,8 @@ function JobBoardComponent({
           >
             {filterRows.length > 0 ? (
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 leadingIcon={RiEqualizerLine}
                 onPress={() => setFiltersOpen(!filtersOpen)}
                 // `aria-expanded` on both spellings: react-native-web reads only
@@ -311,7 +311,7 @@ function JobBoardComponent({
                     ? `${labels.filtersToggle}, ${labels.filtersActive(active)}`
                     : labels.filtersToggle
                 }
-                testID={id('filters-toggle')}
+                testID={id('filters-toggle')} tone="neutral" appearance="outline"
               >
                 {labels.filtersToggle}
               </Button>
@@ -382,10 +382,10 @@ function JobBoardComponent({
         {Array.from({ length: Math.max(1, loadingCount) }, (_unused, index) => (
           <Card
             key={index}
-            variant="outlined"
+
             radius="radius-20"
             style={surfaceFillVars(theme.colors.card)}
-            testID={id(`placeholder-${index}`)}
+            testID={id(`placeholder-${index}`)} appearance="outline"
           >
             <View
               style={{
@@ -448,11 +448,11 @@ function JobBoardComponent({
         {emptyAction ??
           (active > 0 ? (
             <Button
-              variant="secondary"
-              size="medium"
+
+              size="md"
               onPress={clear}
               accessibilityLabel={labels.clearFilters}
-              testID={id('empty-clear')}
+              testID={id('empty-clear')} tone="neutral" appearance="outline"
             >
               {labels.clearFilters}
             </Button>

package/src/job-board/JobCard.tsx

@@ -373,15 +373,15 @@ function JobCardComponent({
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }} testID={id('actions')}>
         {onPass && !closed ? (
           <Button
-            variant="text"
-            size="medium"
+
+            size="md"
             iconOnly={!labelled}
             leadingIcon={RiCloseLine}
             onPress={() => onPass(job.id)}
             disabled={disabled}
             hitSlop={JOB_BOARD_GEOMETRY.actionHit}
             accessibilityLabel={`${labels.pass} ${job.load}`}
-            testID={id('pass')}
+            testID={id('pass')} tone="accent" appearance="plain"
           >
             {labelled ? labels.pass : undefined}
           </Button>
@@ -400,12 +400,12 @@ function JobCardComponent({
           />
         ) : onTake ? (
           <Button
-            variant="primary"
-            size="medium"
+
+            size="md"
             onPress={() => onTake(job.id)}
             disabled={disabled}
             accessibilityLabel={`${labels.take} ${job.load}, ${job.pay}`}
-            testID={id('take')}
+            testID={id('take')} tone="accent" appearance="solid"
           >
             {labels.take}
           </Button>
@@ -416,7 +416,7 @@ function JobCardComponent({
   return (
     <SurfaceLevelProvider level={1} fill={paint.surface}>
       <Card
-        variant="outlined"
+
         radius="radius-20"
         border={selected ? 'medium' : 'thin'}
         style={[
@@ -425,7 +425,7 @@ function JobCardComponent({
           inert ? { opacity: DISABLED_OPACITY } : null,
           style,
         ]}
-        testID={testID}
+        testID={testID} appearance="outline"
       >
         <View
           // The card measures ITSELF, not the window: this same card is 358

package/src/label/Label.tsx

@@ -1,6 +1,5 @@
-import { normalizeBloomSize } from '../appearance/legacy';
 import { useBloomAppearance } from '../appearance';
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { Platform } from 'react-native';
 
 import { Text } from '../typography';
@@ -43,7 +42,7 @@ const LabelComponent = function Label({
   style,
   testID,
 }: LabelProps) {
-  const {size: inheritedSize} = useBloomAppearance({size: normalizeBloomSize(sizeProp)}, {size: 'sm', tone: 'neutral'});
+  const {size: inheritedSize} = useBloomAppearance({size: sizeProp}, {size: 'sm', tone: 'neutral'});
   const size: NonNullable<LabelProps['size']> = inheritedSize === 'lg' ? 'md' : inheritedSize;
   const palette = useTextFieldPalette();
   const { messages } = useMessages(LABEL_MESSAGES);

package/src/layout/screen-scope.tsx

@@ -1,3 +1,4 @@
+import { ScreenContext, ScreenNavigationContext } from '../screen/context';
 /**
  * A surface that is its OWN screen, for the two contracts that are screen-scoped.
  *
@@ -43,12 +44,15 @@ import { TopEdgeProvider } from './top-edge';
 
 export function ScreenScope({ children }: PropsWithChildren) {
   return (
-    <TopEdgeProvider>
-      <BottomEdgeProvider>
-        {/* `null`, not a zero SharedValue: the two mean different things to the
-            chrome reading it (`scroll-offset.ts`). */}
-        <ScrollOffsetProvider value={null}>{children}</ScrollOffsetProvider>
-      </BottomEdgeProvider>
-    </TopEdgeProvider>
+    <ScreenContext.Provider value={null}>
+      <ScreenNavigationContext.Provider value={null}>
+        <TopEdgeProvider>
+          <BottomEdgeProvider>
+            {/* null means no scroller has claimed this scope yet. */}
+            <ScrollOffsetProvider value={null}>{children}</ScrollOffsetProvider>
+          </BottomEdgeProvider>
+        </TopEdgeProvider>
+      </ScreenNavigationContext.Provider>
+    </ScreenContext.Provider>
   );
 }

package/src/lead-score/LeadScoreCard.tsx

@@ -95,7 +95,7 @@ function LeadScoreCardComponent({
   return (
     <SurfaceLevelProvider level={1} fill={paint.surface}>
       <Card
-        variant="outlined"
+
         radius="radius-20"
         style={[
           {
@@ -108,7 +108,7 @@ function LeadScoreCardComponent({
           },
           style,
         ]}
-        testID={testID}
+        testID={testID} appearance="outline"
       >
         {/* The tinted panel is a SURFACE of its own: everything inside it reads
             its text rungs off the wash, not off the card. */}

package/src/listing-actions/ActionBar.tsx

@@ -113,22 +113,22 @@ export function ActionBarView({
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
         {secondaryIcon ? (
           <Button
-            variant="secondary"
-            size="large"
+
+            size="lg"
             iconOnly
             icon={secondaryIcon}
             accessibilityLabel={secondaryLabel}
             onPress={onSecondary}
-            testID={id('secondary')}
+            testID={id('secondary')} tone="neutral" appearance="outline"
           />
         ) : null}
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           onPress={onPrimary}
           disabled={primaryDisabled}
           loading={loading}
-          testID={id(ids.primary)}
+          testID={id(ids.primary)} tone="accent" appearance="solid"
         >
           {primaryLabel}
         </Button>

package/src/listing-actions/ApplicationChecklist.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useMemo } from 'react';
+import React, { memo } from 'react';
 import { View } from 'react-native';
 
 import { ActionCardShell } from '../booking/ActionCard';
@@ -160,8 +160,9 @@ function ApplicationChecklistComponent({
               </View>
               {actionLabel ? (
                 <Button
-                  variant={item.status === 'missing' || rejected ? 'primary' : 'secondary'}
-                  size="small"
+                  appearance={item.status === 'missing' || rejected ? 'solid' : 'outline'}
+                  tone={item.status === 'missing' || rejected ? 'accent' : 'neutral'}
+                  size="sm"
                   leadingIcon={item.status === 'missing' || rejected ? RiUploadLine : RiEyeLine}
                   onPress={onAction}
                   accessibilityLabel={messages.itemAction(actionLabel, item.title)}

package/src/listing-actions/ExchangeProposalCard.tsx

@@ -197,14 +197,14 @@ function ExchangeProposalCardComponent({
       ) : null}
 
       <Button
-        variant="primary"
-        size="large"
+
+        size="lg"
         fullWidth
         onPress={onPropose}
         disabled={proposeDisabled}
         loading={loading}
         style={{ marginTop: 16, alignSelf: 'stretch' }}
-        testID={id('propose')}
+        testID={id('propose')} tone="accent" appearance="solid"
       >
         {proposeLabel}
       </Button>

package/src/listing-actions/RentalActionCard.tsx

@@ -90,24 +90,24 @@ function RentalActionCardComponent({
 
       <View style={{ marginTop: 16, gap: 8 }}>
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           onPress={onRequestViewing}
           disabled={!available}
           loading={loading}
-          testID={id('request-viewing')}
+          testID={id('request-viewing')} tone="accent" appearance="solid"
         >
           {requestViewingLabel}
         </Button>
         {onApply ? (
           <Button
-            variant="secondary"
-            size="large"
+
+            size="lg"
             fullWidth
             onPress={onApply}
             disabled={!available}
-            testID={id('apply')}
+            testID={id('apply')} tone="neutral" appearance="outline"
           >
             {applyLabel}
           </Button>

package/src/listing-actions/SaleActionCard.tsx

@@ -107,24 +107,24 @@ function SaleActionCardComponent({
 
       <View style={{ marginTop: 16, gap: 8 }}>
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           onPress={onContact}
           disabled={!available}
           loading={loading}
-          testID={id('contact')}
+          testID={id('contact')} tone="accent" appearance="solid"
         >
           {contactLabel}
         </Button>
         {onRequestVisit ? (
           <Button
-            variant="secondary"
-            size="large"
+
+            size="lg"
             fullWidth
             onPress={onRequestVisit}
             disabled={!available}
-            testID={id('request-visit')}
+            testID={id('request-visit')} tone="neutral" appearance="outline"
           >
             {requestVisitLabel}
           </Button>

package/src/listing-actions/ViewingScheduler.tsx

@@ -202,7 +202,7 @@ function ViewingSchedulerComponent({
         <SegmentedControl<ViewingMode>
           label={messages.viewingType}
           type="radio"
-          size="large"
+          size="lg"
           value={mode}
           onChange={(value) => onModeChange?.(value)}
           style={{ marginTop: 20, alignSelf: 'stretch' }}
@@ -235,14 +235,14 @@ function ViewingSchedulerComponent({
       ) : null}
 
       <Button
-        variant="primary"
-        size="large"
+
+        size="lg"
         fullWidth
         onPress={onSubmit}
         disabled={disabled}
         loading={loading}
         style={{ marginTop: 20, alignSelf: 'stretch' }}
-        testID={id('submit')}
+        testID={id('submit')} tone="accent" appearance="solid"
       >
         {submitLabel}
       </Button>