@oxy.so/bloom 5.4.1 → 6.1.0

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}

package/src/mail-compose/MailComposeSurface.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useMemo } from 'react';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
 import { StyleSheet, View } from 'react-native';
 
@@ -16,13 +16,7 @@ import { RiSubtractLine } from '../icons/remix/RiSubtractLine';
 import { useMessages } from '../locale/messages';
 import { resolveMailPaint } from '../mail-list/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
-import {
-  SurfaceLevelProvider,
-  hairlineOn,
-  surfaceFillVars,
-  useSurfaceLevelValue,
-  useSurfaceFill,
-} from '../styles/surface-levels';
+import { SurfaceLevelProvider, hairlineOn, useSurfaceLevelValue, useSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import {
@@ -96,7 +90,8 @@ export function MailComposeSurface({
   const customFrame = StyleSheet.flatten(style);
   const paintsSurface = docked;
   const customFill = customFrame?.backgroundColor;
-  const fill = resolveSurfaceFill(String(customFill ?? (docked ? layer.fill : parent)), false, parent);
+  const material = resolveSurfaceMaterial({ fill: String(customFill ?? (docked ? layer.fill : parent)), parentFill: parent, parentLevel: layer.parentLevel, paint: paintsSurface });
+  const { paintFill, publishedFill: fill } = material;
   const paint = useMemo(() => resolveMailPaint(theme, fill), [theme, fill]);
   const text = useMemo(() => mailComposeStrings(strings, messages), [strings, messages]);
 
@@ -196,12 +191,12 @@ export function MailComposeSurface({
       >
         {onSend === undefined ? null : (
           <Button
-            variant="primary"
-            size="small"
+
+            size="sm"
             icon={RiSendPlaneLine}
             disabled={sending || sendDisabled}
             onPress={onSend}
-            testID={testID ? `${testID}-send` : undefined}
+            testID={testID ? `${testID}-send` : undefined} tone="accent" appearance="solid"
           >
             {sending ? text.sending : text.send}
           </Button>
@@ -247,11 +242,11 @@ export function MailComposeSurface({
               }
             : { flex: 1, minHeight: 0 },
           style,
-          { backgroundColor: docked ? 'transparent' : customFill == null ? 'transparent' : fill, ...surfaceFillVars(fill) },
+          { backgroundColor: docked ? 'transparent' : customFill == null ? 'transparent' : fill, ...material.vars },
         ]}
         testID={testID}
       >
-        {paintsSurface ? <SurfacePaint fill={fill} radius={customFrame?.borderRadius ?? geo.radius} /> : null}
+        {paintsSurface ? <SurfacePaint fill={paintFill} radius={customFrame?.borderRadius ?? geo.radius} /> : null}
         {bar}
         {folded ? null : body}
       </View>

package/src/mail-list/MailRow.tsx

@@ -240,7 +240,7 @@ function MailRowComponent({
         <Checkbox
           checked={checked}
           onCheckedChange={onCheckedChange}
-          size={compact ? 'small' : 'medium'}
+          size={compact ? 'sm' : 'md'}
           accessibilityLabel={`${text.select}: ${sender.name}, ${subject}`}
           testID={testID ? `${testID}-checkbox` : undefined}
         />

package/src/mail-list/MailSelectionBar.tsx

@@ -90,7 +90,7 @@ export function MailSelectionBar({
             checked={all}
             indeterminate={!all}
             onCheckedChange={onSelectAll}
-            size={density === 'compact' ? 'small' : 'medium'}
+            size={density === 'compact' ? 'sm' : 'md'}
             accessibilityLabel={text.selectAll}
             testID={testID ? `${testID}-select-all` : undefined}
           />

package/src/mail-thread/MailAddressLine.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { resolveMailPaint } from '../mail-list/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
@@ -83,8 +83,8 @@ export function MailAddressLine({
         {shown.map(addressName).join(', ')}
       </Text>
       {overflow > 0 ? (
-        <Button
-          variant="link"
+        <LinkButton
+
           size="xs"
           linkTone="secondary"
           onPress={() => setOpen(true)}
@@ -92,7 +92,7 @@ export function MailAddressLine({
           testID={testID ? `${testID}-more` : undefined}
         >
           {`+${overflow}`}
-        </Button>
+        </LinkButton>
       ) : null}
     </View>
   );

package/src/mail-thread/MailThread.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useMemo, useState } from 'react';
-import { Pressable, View } from 'react-native';
+import { View } from 'react-native';
 
 import { Button } from '../button';
 import { Divider } from '../divider';
@@ -8,8 +8,8 @@ import { MailLabelChips, MailStar } from '../mail-list/parts';
 import { mailStrings, resolveMailPaint, visibleLabels } from '../mail-list/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { useSurfaceFill } from '../styles/surface-levels';
-import { webDataSet } from '../styles/web-data';
-import type { WebCssStyle } from '../styles/web-view-style';
+
+
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { useMessages } from '../locale/messages';
@@ -166,12 +166,12 @@ export function MailThread({
             // carried its own focus ring, its own fill and its own hover.
             <Button
               key="earlier"
-              variant="secondary"
-              size="small"
+
+              size="sm"
               onPress={() => setRevealed(true)}
               accessibilityLabel={text.earlierMessages(entry.count)}
               style={{ alignSelf: 'flex-start', marginLeft: MAIL_BODY_INSET }}
-              testID={testID ? `${testID}-earlier` : undefined}
+              testID={testID ? `${testID}-earlier` : undefined} tone="neutral" appearance="outline"
             >
               {text.earlierMessages(entry.count)}
             </Button>

package/src/map-attribution/MapAttribution.tsx

@@ -1,7 +1,7 @@
 import React, { memo, useMemo } from 'react';
 import { View } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import { useMessages } from '../locale/messages';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
@@ -81,8 +81,8 @@ function MapAttributionComponent({
         style={{ flexDirection: 'row', flexWrap: 'wrap', alignItems: 'center', gap: g.scaleGap }}
       >
         {onPressCredit ? (
-          <Button
-            variant="link"
+          <LinkButton
+
             linkTone="secondary"
             textVariant="caption-2-regular"
             underline="hover"
@@ -91,7 +91,7 @@ function MapAttributionComponent({
             testID={testID ? `${testID}-credit` : undefined}
           >
             {credit}
-          </Button>
+          </LinkButton>
         ) : (
           <Text
             variant="caption-2-regular"

package/src/map-controls/MapCompass.tsx

@@ -16,7 +16,7 @@ import type { MapCompassProps } from './types';
  * while the map turns under it, and a press that puts the map back.
  *
  *   island   `GlassIsland` — one translucent capsule over content Bloom does
- *            not own. It mounts the `ControlSurface` the item inside reads, so
+ *            not own. It mounts the `BloomScope` the item inside reads, so
  *            the button paints flush with no `variant` written on it.
  *   control  `ButtonGroupItem`, the island-aware control, at the 44 map rung.
  *   needle   `RiCompass3Line` turned by MINUS the heading. The map rotates

package/src/map-controls/MapControls.tsx

@@ -24,7 +24,7 @@ import type { MapControlsProps } from './types';
  *            written for.
  *   control  `ButtonGroupItem` at 44 square. It is Bloom's island-aware
  *            control: it reads the `material` the island publishes through
- *            `ControlSurface` and paints flush, with no `variant` written on
+ *            `BloomScope` and paints flush, with no `variant` written on
  *            it, and it carries a toggle's `aria-pressed` and native selected
  *            state in one prop.
  *   zoom     ONE island, two items, laid out in a column. The island's `style`

package/src/map-marker/MapListingPreview.tsx

@@ -186,13 +186,13 @@ function MapListingPreviewComponent({
 
   const closeButton = onClose ? (
     <Button
-      variant="secondary"
+
       size="xs"
       iconOnly
       leadingIcon={RiCloseLine}
       accessibilityLabel={closeLabel}
       onPress={onClose}
-      testID={testID ? `${testID}-close` : undefined}
+      testID={testID ? `${testID}-close` : undefined} tone="neutral" appearance="outline"
     />
   ) : null;
 

package/src/map-marker/MapSearchAreaButton.tsx

@@ -81,7 +81,7 @@ function MapSearchAreaButtonComponent(props: MapSearchAreaButtonProps) {
         style={[pillStyle, style]}
       >
         <CheckboxGlyph
-          size="medium"
+          size="md"
           checked={checked}
           indeterminate={false}
           disabled={false}

package/src/media-card/EpisodeCard.tsx

@@ -93,7 +93,7 @@ function EpisodeCardComponent({
     row || progressLine || actions ? (
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }} pointerEvents="box-none">
         {row && onPlay ? (
-          <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="small" testID={testID ? `${testID}-play` : undefined} />
+          <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="sm" testID={testID ? `${testID}-play` : undefined} />
         ) : null}
         {progressLine}
         <View style={{ flex: 1 }} pointerEvents="none" />

package/src/media-card/MediaCard.tsx

@@ -259,7 +259,7 @@ function MediaCardComponent(props: MediaCardProps) {
           loading={loading}
           onPress={onPlay}
           subject={title}
-          size={row || size === 'small' ? 'small' : 'medium'}
+          size={row || size === 'small' ? 'sm' : 'md'}
           variant={row ? 'inverse' : 'accent'}
         />
       </View>

package/src/media-card/QuickAccessTile.tsx

@@ -131,7 +131,7 @@ function QuickAccessTileComponent({
               style={{ position: 'absolute', top: 0, left: 0 }}
               testID={testID ? `${testID}-play` : undefined}
             >
-              <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="small" />
+              <PlayButton playing={playing} loading={loading} onPress={onPlay} subject={title} size="sm" />
             </View>
           ) : null}
         </View>

package/src/media-card/SongCard.tsx

@@ -88,7 +88,7 @@ function SongCardComponent({
     <>
       {onLikedChange ? (
         <View {...webDataSet(liked ? {} : { bloomMediaCardReveal: IS_WEB ? 'hover' : '' })}>
-          <LikeButton liked={liked} onLikedChange={onLikedChange} size="small" accessibilityLabel={controls.saveSubjectToLibrary(title)} />
+          <LikeButton liked={liked} onLikedChange={onLikedChange} size="sm" accessibilityLabel={controls.saveSubjectToLibrary(title)} />
         </View>
       ) : null}
       {duration ? (

package/src/media-controls/LikeButton.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Pressable, View, type GestureResponderEvent } from 'react-native';
 
@@ -39,21 +40,24 @@ import { MEDIA_CONTROLS_MESSAGES } from './messages';
  */
 
 const SIZE_CONFIG: Record<LikeButtonSize, { glyph: number; box: number }> = {
-  small: { glyph: 16, box: 32 },
-  medium: { glyph: 20, box: 32 },
-  large: { glyph: 24, box: 40 },
+  sm: { glyph: 16, box: 32 },
+  md: { glyph: 20, box: 32 },
+  lg: { glyph: 24, box: 40 },
 };
 
 function LikeButtonComponent({
   liked,
   onLikedChange,
-  size = 'medium',
+  size: sizeProp,
   activeColor,
   disabled = false,
   accessibilityLabel: accessibilityLabelProp,
   style,
   testID,
 }: LikeButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const { messages } = useMessages(MEDIA_CONTROLS_MESSAGES);
   const accessibilityLabel = accessibilityLabelProp ?? messages.saveToLibrary;
   const theme = useTheme();

package/src/media-controls/PlayButton.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
@@ -51,16 +52,16 @@ import { MEDIA_CONTROLS_MESSAGES } from './messages';
  */
 
 const SIZE_CONFIG: Record<PlayButtonSize, { box: number; glyph: number }> = {
-  small: { box: 32, glyph: 16 },
-  medium: { box: 48, glyph: 24 },
-  large: { box: 56, glyph: 28 },
+  sm: { box: 32, glyph: 16 },
+  md: { box: 48, glyph: 24 },
+  lg: { box: 56, glyph: 28 },
 };
 
 function PlayButtonComponent({
   playing,
   onPress,
   interactive = true,
-  size = 'medium',
+  size: sizeProp,
   variant = 'accent',
   loading = false,
   disabled = false,
@@ -71,6 +72,9 @@ function PlayButtonComponent({
   style,
   testID,
 }: PlayButtonProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' ? 'sm' : inheritedSize;
+
   const { messages } = useMessages(MEDIA_CONTROLS_MESSAGES);
   const theme = useTheme();
   useEffect(() => {