@oxy.so/bloom 5.4.0 → 6.0.0

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>

package/src/listing-card/ListingCard.tsx

@@ -35,30 +35,7 @@ import {
   ListingPriceLines,
   ListingStatusPill,
 } from './parts';
-import {
-  COMPACT_PHOTO_RADIUS,
-  COMPACT_PHOTO_SIZE,
-  describeFacts,
-  describePriceLine,
-  DOT_INACTIVE_OPACITY,
-  DOT_SIZE,
-  dotWindow,
-  HORIZONTAL_PHOTO_WIDTH,
-  IS_WEB,
-  LISTING_CARD_CSS,
-  LISTING_CARD_STYLE_ID,
-  PHOTO_ASPECT_RATIO,
-  PHOTO_RADIUS,
-  PHOTO_ZOOM_SCALE,
-  resolveListingCardPaint,
-  locationText,
-  resolvePhoto,
-  resolvePriceLines,
-  STATUS_WASH_OPACITY,
-  statusLabelFor,
-  uniqueOfferings,
-  type ListingCardPaint,
-} from './shared';
+import { COMPACT_PHOTO_RADIUS, COMPACT_PHOTO_SIZE, describeFacts, describePriceLine, DOT_INACTIVE_OPACITY, DOT_SIZE, dotWindow, HORIZONTAL_PHOTO_WIDTH, IS_WEB, LISTING_CARD_CSS, LISTING_CARD_STYLE_ID, PHOTO_ASPECT_RATIO, PHOTO_RADIUS, resolveListingCardPaint, locationText, resolvePhoto, resolvePriceLines, STATUS_WASH_OPACITY, statusLabelFor, uniqueOfferings, type ListingCardPaint } from './shared';
 import type { ListingCardLayout, ListingCardProps } from './types';
 import { useMessages } from '../locale/messages';
 import { LISTING_CARD_MESSAGES, type ListingCardMessages } from './messages';
@@ -900,13 +877,13 @@ function ListingCardComponent(props: ListingCardProps) {
                 style={{ position: 'absolute', left: 8, top: '50%', marginTop: -16 }}
               >
                 <Button
-                  variant="secondary"
-                  size="small"
+
+                  size="sm"
                   iconOnly
                   leadingIcon={RiArrowLeftSLine}
                   accessibilityLabel={previousPhotoLabel}
                   onPress={() => goTo(active - 1)}
-                  testID={testID ? `${testID}-previous` : undefined}
+                  testID={testID ? `${testID}-previous` : undefined} tone="neutral" appearance="outline"
                 />
               </View>
             ) : null}
@@ -916,13 +893,13 @@ function ListingCardComponent(props: ListingCardProps) {
                 style={{ position: 'absolute', right: 8, top: '50%', marginTop: -16 }}
               >
                 <Button
-                  variant="secondary"
-                  size="small"
+
+                  size="sm"
                   iconOnly
                   leadingIcon={RiArrowRightSLine}
                   accessibilityLabel={nextPhotoLabel}
                   onPress={() => goTo(active + 1)}
-                  testID={testID ? `${testID}-next` : undefined}
+                  testID={testID ? `${testID}-next` : undefined} tone="neutral" appearance="outline"
                 />
               </View>
             ) : null}

package/src/listing-details/AmenityList.tsx

@@ -95,7 +95,7 @@ function AmenityListComponent({
       </View>
       {onShowAll && hasMore ? (
         <View style={{ flexDirection: 'row' }}>
-          <Button variant="secondary" onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined}>
+          <Button  onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined} tone="neutral" appearance="outline">
             {buttonLabel}
           </Button>
         </View>

package/src/listing-details/ContactCard.tsx

@@ -287,7 +287,7 @@ function ContactCardComponent({
       <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: 8 }} testID={testID ? `${testID}-actions` : undefined}>
         {onMessage ? (
           <Button
-            variant={role === 'host' ? 'secondary' : 'primary'}
+            appearance={role === 'host' ? 'outline' : 'solid'} tone={role === 'host' ? 'neutral' : 'accent'}
             onPress={onMessage}
             testID={testID ? `${testID}-message` : undefined}
           >
@@ -295,7 +295,7 @@ function ContactCardComponent({
           </Button>
         ) : null}
         {onCall ? (
-          <Button variant="secondary" leadingIcon={RiPhoneLine} onPress={onCall} testID={testID ? `${testID}-call` : undefined}>
+          <Button  leadingIcon={RiPhoneLine} onPress={onCall} testID={testID ? `${testID}-call` : undefined} tone="neutral" appearance="outline">
             {callLabel}
           </Button>
         ) : null}
@@ -316,11 +316,11 @@ function ContactCardComponent({
               </View>
             ) : (
               <Button
-                variant="secondary"
+
                 leadingIcon={RiPhoneLine}
                 onPress={revealPhone}
                 textStyle={phoneRevealed ? { fontVariant: ['tabular-nums'] } : undefined}
-                testID={testID ? `${testID}-phone` : undefined}
+                testID={testID ? `${testID}-phone` : undefined} tone="neutral" appearance="outline"
               >
                 {phoneRevealed ? phone : showPhoneLabel}
               </Button>

package/src/listing-details/ListingHeader.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { Pressable, View } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { Rating } from '../rating';
 import { useInteractiveWebCss } from '../styles/interactive-web-css';
@@ -66,11 +66,11 @@ function InlineLink({
     );
   }
   return (
-    <Button
-      variant="link"
+    <LinkButton
+
       linkTone="text"
       underline="rest"
-      size="small"
+      size="sm"
       textVariant="body-medium"
       accessibilityRole={IS_WEB ? 'link' : 'button'}
       accessibilityLabel={label}
@@ -78,7 +78,7 @@ function InlineLink({
       testID={testID}
     >
       {label}
-    </Button>
+    </LinkButton>
   );
 }
 

package/src/listing-details/ListingPhotoGrid.tsx

@@ -286,11 +286,11 @@ function ListingPhotoGridComponent({
         {onShowAll ? (
           <View style={{ position: 'absolute', right: 24, bottom: 24 }}>
             <Button
-              variant="secondary"
-              size="small"
+
+              size="sm"
               leadingIcon={RiLayoutGridLine}
               onPress={onShowAll}
-              testID={testID ? `${testID}-show-all` : undefined}
+              testID={testID ? `${testID}-show-all` : undefined} tone="neutral" appearance="outline"
             >
               {showAllLabel}
             </Button>

package/src/listing-details/PropertyFacts.tsx

@@ -96,7 +96,7 @@ function PropertyFactsComponent({
       </View>
       {onShowAll && hasMore ? (
         <View style={{ flexDirection: 'row' }}>
-          <Button variant="secondary" onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined}>
+          <Button  onPress={onShowAll} testID={testID ? `${testID}-show-all` : undefined} tone="neutral" appearance="outline">
             {buttonLabel}
           </Button>
         </View>

package/src/listing-editor/OfferingEditor.tsx

@@ -158,7 +158,7 @@ function OfferingEditorComponent({
             min={1}
             max={60}
             formatValue={labels.months}
-            size="small"
+            size="sm"
             disabled={disabled}
             style={{ paddingTop: 0, paddingBottom: 0 }}
             testID={tid('rent-minimum')}
@@ -236,7 +236,7 @@ function OfferingEditorComponent({
             min={1}
             max={90}
             formatValue={labels.nights}
-            size="small"
+            size="sm"
             disabled={disabled}
             style={{ paddingTop: 0, paddingBottom: 0 }}
             testID={tid('stay-minimum')}

package/src/loading/Loading.tsx

@@ -13,7 +13,6 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { normalizeBloomSize } from '../appearance/legacy';
 import { resolveBloomColors } from '../appearance/colors';
 import { useBloomAppearance } from '../appearance';
 import { animation } from '../styles/tokens';
@@ -35,7 +34,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   testID,
 }) => {
   const theme = useTheme();
-  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+  const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
   const sizeConfig = SIZE_CONFIG[size];
   const effectiveIconSize = iconSize ?? sizeConfig.spinner;
   const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);

package/src/loading/Loading.web.tsx

@@ -10,7 +10,6 @@
 import React from 'react';
 import { View } from 'react-native';
 
-import { normalizeBloomSize } from '../appearance/legacy';
 import { resolveBloomColors } from '../appearance/colors';
 import { useBloomAppearance } from '../appearance';
 import { animation } from '../styles/tokens';
@@ -45,7 +44,7 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   testID,
 }) => {
   const theme = useTheme();
-  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+  const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
   const sizeConfig = SIZE_CONFIG[size];
   const effectiveIconSize = iconSize ?? sizeConfig.spinner;
   const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);

package/src/loading/LoadingBase.tsx

@@ -19,7 +19,6 @@
  * resolves no platform extensions at all, so logic that moved into a
  * `.native.*` file would lose its coverage in silence.)
  */
-import { normalizeBloomSize } from '../appearance/legacy';
 import { resolveBloomColors } from '../appearance/colors';
 import { useBloomAppearance } from '../appearance';
 import React, { memo } from 'react';
@@ -113,7 +112,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
     testID,
   }) => {
     const theme = useTheme();
-    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
     const sizeConfig = SIZE_CONFIG[size];
     const effectiveIconSize = iconSize ?? sizeConfig.spinner;
     const spinnerColor = className ? 'currentColor' : (color ?? resolveBloomColors(theme.colors, tone, 'solid').background);
@@ -149,7 +148,7 @@ export function bindLoading({ SpinnerIcon, TopLoading }: LoadingPlatform) {
     testID,
   }) => {
     const theme = useTheme();
-    const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+    const {size, tone} = useBloomAppearance({size: sizeProp, tone: toneProp}, {size: 'md', tone: 'accent'});
     const sizeConfig = SIZE_CONFIG[size];
     const spinnerColor = color ?? resolveBloomColors(theme.colors, tone, 'solid').background;
     const textColor = theme.colors.textSecondary;

package/src/loading/types.ts

@@ -1,10 +1,9 @@
-import type { BloomTone } from '../appearance';
-import type { BloomSizeInput } from '../appearance/legacy';
+import type { BloomTone, BloomSize } from '../appearance';
 import type { ReactNode } from 'react';
 import type { ViewStyle, TextStyle } from 'react-native';
 
 export type LoadingVariant = 'spinner' | 'top' | 'inline';
-export type LoadingSize = BloomSizeInput;
+export type LoadingSize = BloomSize;
 
 interface BaseLoadingProps {
   /** Variant type */

package/src/mail-compose/MailComposeHeader.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { TextInput, View, type TextStyle } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { useMessages } from '../locale/messages';
 import { resolveMailPaint } from '../mail-list/shared';
@@ -109,8 +109,8 @@ export function MailComposeHeader({
           strings={strings}
           trailing={
             copies ? undefined : (
-              <Button
-                variant="link"
+              <LinkButton
+
                 size="xs"
                 linkTone="secondary"
                 onPress={() => setRevealed(true)}
@@ -118,7 +118,7 @@ export function MailComposeHeader({
                 testID={testID ? `${testID}-copies` : undefined}
               >
                 {text.showCopies}
-              </Button>
+              </LinkButton>
             )
           }
           testID={testID ? `${testID}-to` : undefined}