@oxy.so/bloom 5.4.1 → 6.0.0

package/src/chat-composer/create-reaction-picker.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import { useSurfaceFill } from '../styles/surface-levels';
 import { useCardFill } from '../card/use-card-fill';
 import type { Surface as SurfaceComponent } from '../surface';
@@ -27,8 +28,8 @@ export function createReactionPicker({ Surface, Button }: {
   Button: typeof ButtonComponent;
 }) {
 
-  const BOX = { small: 30, medium: 36 } as const;
-  const GLYPH = { small: 'title-3-regular', medium: 'title-2-regular' } as const;
+  const BOX = { sm: 30, md: 36 } as const;
+  const GLYPH = { sm: 'title-3-regular', md: 'title-2-regular' } as const;
 
   function ReactionPicker({
     emojis = REACTION_PICKER_EMOJIS,
@@ -36,13 +37,16 @@ export function createReactionPicker({ Surface, Button }: {
     onSelectEmoji,
     onMorePress,
     moreLabel: moreLabelProp,
-    size = 'medium',
+    size: sizeProp,
     surface = true,
     style,
     testID,
     accessibilityLabel: accessibilityLabelProp,
     emojiLabel,
   }: ReactionPickerProps) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize === 'xs' || inheritedSize === 'sm' ? 'sm' : 'md';
+
     const theme = useTheme();
     const raisedFill = useCardFill(style);
     const parentFill = useSurfaceFill();

package/src/chat-composer/shared.ts

@@ -122,7 +122,7 @@ export function resolveChatComposerPalette(theme: Theme, backing?: string): Chat
     accentStrong: dark ? accent[400] : accent[600],
     onAccent: theme.colors.primaryForeground,
     destructive: colorRamp(theme.colors.negative, ACCENT_TABLE)[dark ? 400 : 500],
-    send: resolveButtonPalette('primary', theme),
+    send: resolveButtonPalette('solid', theme, 'accent'),
     shadow: dark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
     shadowPanel: dark ? MENU_SHADOW.dark : MENU_SHADOW.light,
     focusRing: accent[500],

package/src/chat-composer/types.ts

@@ -426,8 +426,8 @@ export interface ReactionPickerProps extends PartProps {
   /** The "+" that opens the full picker. Omit to hide it. */
   onMorePress?: () => void;
   moreLabel?: string;
-  /** Glyph box: `small` 30, `medium` 36. Default `medium`. */
-  size?: 'small' | 'medium';
+  /** Glyph box: `sm` 30, `md` 36. Default `md`. */
+  size?: 'sm' | 'md';
   /** `false` drops the bar's own surface — for use inside a menu panel. */
   surface?: boolean;
   accessibilityLabel?: string;

package/src/chat-list/NewChatButton.tsx

@@ -9,12 +9,8 @@ import { CHAT_LIST_MESSAGES } from './messages';
 /**
  * The round "New chat" action.
  *
- * It IS Bloom's `Fab` — placement, sizing, the minimize behaviour that follows a
- * tab bar and the web/native fork all come from there; this only fixes the glyph
- * and the name, so every messaging screen spells the same action the same way
- * instead of each one picking an icon. Every `Fab` prop passes through, so a
- * screen that wants it bottom-LEFT, small, or `static` inside its own container
- * says so exactly as it would to a `Fab`.
+ * Bloom Fab owns the action. Screen/BottomBar own its position and scroll behavior.
+ * This wrapper supplies the chat glyph and localized accessible name.
  *
  * `extended` promotes it to the pill, with `accessibilityLabel` as the text — the
  * one place the name is also the label, which is why it is not a separate prop.
@@ -31,7 +27,7 @@ function NewChatButtonComponent({
   return (
     <Fab
       {...rest}
-      icon={icon ?? <RiChatNewLine />}
+      icon={icon ?? RiChatNewLine}
       label={extended ? accessibilityLabel : undefined}
       accessibilityLabel={accessibilityLabel}
     />

package/src/chat-list/types.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode } from 'react';
+import type { ReactNode } from 'react';
 import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
 
 import type { Shape } from '../shapes';
@@ -531,9 +531,9 @@ export interface HighlightedTextProps {
 //  NewChatButton
 // ---------------------------------------------------------------------------
 
-export interface NewChatButtonProps extends Omit<FabProps, 'icon' | 'children' | 'label'> {
+export interface NewChatButtonProps extends Omit<FabProps, 'icon' | 'label'> {
   /** Replaces the default pencil-on-a-square glyph. */
-  icon?: ReactNode;
+  icon?: FabProps['icon'];
   /** `'New chat'` in English (localised) — the name, and the extended FAB's text when `extended`. */
   accessibilityLabel?: string;
   /** Draw the extended pill (icon + `accessibilityLabel`) instead of the circle. */

package/src/chat-people/ChannelPostCard.tsx

@@ -194,24 +194,24 @@ function ChannelPostCardComponent({
         <View style={{ flex: 1 }} />
         {comments === undefined ? null : (
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             leadingIcon={RiChat3Line}
             onPress={onComments}
-            testID={testID ? `${testID}-comments` : undefined}
+            testID={testID ? `${testID}-comments` : undefined} tone="accent" appearance="plain"
           >
             {comments}
           </Button>
         )}
         {onShare === undefined ? null : (
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             iconOnly
             leadingIcon={RiShareForwardLine}
             accessibilityLabel={shareLabel}
             onPress={onShare}
-            testID={testID ? `${testID}-share` : undefined}
+            testID={testID ? `${testID}-share` : undefined} tone="accent" appearance="plain"
           />
         )}
       </View>

package/src/chat-people/ContactRow.tsx

@@ -206,12 +206,12 @@ function ContactRowComponent(props: ContactRowProps) {
           </View>
         ) : (
           <Button
-            variant="secondary"
-            size="small"
+
+            size="sm"
             disabled={disabled}
             onPress={onAction}
             accessibilityLabel={messages.actionOn(actionLabel, name)}
-            testID={testID ? `${testID}-action` : undefined}
+            testID={testID ? `${testID}-action` : undefined} tone="neutral" appearance="outline"
           >
             {actionLabel}
           </Button>

package/src/chat-people/NewGroupForm.tsx

@@ -136,11 +136,11 @@ function NewGroupFormComponent({
           {onAddMembers === undefined ? null : (
             <View style={{ alignItems: 'flex-start' }}>
               <Button
-                variant="text"
-                size="small"
+
+                size="sm"
                 leadingIcon={RiUserAddLine}
                 onPress={onAddMembers}
-                testID={testID ? `${testID}-add` : undefined}
+                testID={testID ? `${testID}-add` : undefined} tone="accent" appearance="plain"
               >
                 {l.addMembers}
               </Button>

package/src/chat-screen/ChatHeader.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useMemo } from 'react';
 import { Pressable, useWindowDimensions, View } from 'react-native';
 
@@ -58,25 +59,27 @@ function HeaderIconButton({
   label,
   onPress,
   tint,
-  size = 'medium',
+  size: sizeProp,
   testID,
 }: {
   icon: ChatIconComponent;
   label: string;
   onPress: () => void;
   tint: string;
-  size?: 'small' | 'medium';
+  size?: 'sm' | 'md';
   testID?: string;
 }) {
+  const { size: inheritedSize } = useBloomAppearance({ size: sizeProp }, { size: 'md', tone: 'neutral' });
+  const size = inheritedSize;
   return (
     <Button
-      variant="text"
+
       size={size}
       iconOnly
-      icon={<Icon width={size === 'small' ? 18 : 20} height={size === 'small' ? 18 : 20} fill={tint} />}
+      icon={<Icon width={size === 'sm' ? 18 : 20} height={size === 'sm' ? 18 : 20} fill={tint} />}
       accessibilityLabel={label}
       onPress={onPress}
-      testID={testID}
+      testID={testID} tone="accent" appearance="plain"
     />
   );
 }

package/src/chat-screen/ChatInfoPanel.tsx

@@ -1,6 +1,7 @@
+import { SurfacePaint } from '../surface/SurfacePaint';
 import { StyleSheet } from 'react-native';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { SurfaceLevelProvider, surfaceFillVars, useSurfaceLevelValue } from '../styles/surface-levels';
 import React, { memo, useMemo, useState } from 'react';
 import { Image, Pressable, ScrollView, View } from 'react-native';
@@ -163,7 +164,8 @@ function ChatInfoPanelComponent(props: ChatInfoPanelProps) {
 
   const layer = useSurfaceLayer();
   const parentLevel = useSurfaceLevelValue();
-  const fill = resolveSurfaceFill(String(StyleSheet.flatten(style)?.backgroundColor ?? (variant === 'pane' ? layer.fill : layer.parentFill)), false, layer.parentFill);
+  const rawFill = String(StyleSheet.flatten(style)?.backgroundColor ?? (variant === 'pane' ? layer.fill : layer.parentFill));
+  const fill = resolveSurfaceMaterial({ fill: rawFill, parentFill: layer.parentFill, parentLevel: layer.parentLevel, paint: variant === 'pane' }).publishedFill;
 
   const coverImage = useResolvedImageSource(coverSource, 'large');
   const hasCover = Boolean(cover ?? coverImage);
@@ -424,8 +426,9 @@ function ChatInfoPanelComponent(props: ChatInfoPanelProps) {
   return (
     <View
       testID={testID}
-      style={[{ minHeight: 0 }, frame, style, { backgroundColor: variant === 'pane' || StyleSheet.flatten(style)?.backgroundColor != null ? fill : 'transparent', ...surfaceFillVars(fill) }]}
+      style={[{ minHeight: 0 }, frame, style, { backgroundColor: variant === 'pane' || StyleSheet.flatten(style)?.backgroundColor == null ? 'transparent' : fill, ...surfaceFillVars(fill) }]}
     >
+      {variant === 'pane' ? <SurfacePaint fill={rawFill} radius={StyleSheet.flatten(style)?.borderRadius ?? 0} /> : null}
       <SurfaceLevelProvider level={variant === 'pane' ? layer.level : parentLevel} fill={fill}>
       <View
         style={{
@@ -452,13 +455,13 @@ function ChatInfoPanelComponent(props: ChatInfoPanelProps) {
         {headerActions}
         {onClose ? (
           <Button
-            variant="text"
-            size="small"
+
+            size="sm"
             iconOnly
             icon={<RiCloseLine width={18} height={18} fill={paint.textSecondary} />}
             accessibilityLabel={closeLabel}
             onPress={onClose}
-            testID={testID ? `${testID}-close` : undefined}
+            testID={testID ? `${testID}-close` : undefined} tone="accent" appearance="plain"
           />
         ) : null}
       </View>

package/src/chat-screen/PinnedMessageBar.tsx

@@ -197,8 +197,8 @@ function PinnedMessageBarComponent({
 
       {onPressList ? (
         <Button
-          variant="text"
-          size="small"
+
+          size="sm"
           iconOnly
           // An ELEMENT: `variant="text"` paints a component icon in the ACCENT,
           // and two accent glyphs beside an accent title line is three things
@@ -206,13 +206,13 @@ function PinnedMessageBarComponent({
           icon={<RiListUnordered width={18} height={18} fill={paint.textSecondary} />}
           accessibilityLabel={listLabel}
           onPress={onPressList}
-          testID={testID ? `${testID}-list` : undefined}
+          testID={testID ? `${testID}-list` : undefined} tone="accent" appearance="plain"
         />
       ) : null}
       {onDismiss ? (
         <Button
-          variant="text"
-          size="small"
+
+          size="sm"
           iconOnly
           icon={
             dismissIcon === 'unpin' ? (
@@ -223,7 +223,7 @@ function PinnedMessageBarComponent({
           }
           accessibilityLabel={resolvedDismissLabel}
           onPress={onDismiss}
-          testID={testID ? `${testID}-dismiss` : undefined}
+          testID={testID ? `${testID}-dismiss` : undefined} tone="accent" appearance="plain"
         />
       ) : null}
     </View>

package/src/checkbox/Checkbox.tsx

@@ -1,4 +1,4 @@
-import { normalizeBloomSize } from '../appearance/legacy';
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
@@ -81,21 +81,24 @@ ${ROW}:focus-visible {
 }`,
 });
 
-const CheckboxComponent: React.FC<CheckboxProps> = ({
-  checked,
-  onCheckedChange,
-  label,
-  description,
-  size: sizeProp,
-  disabled = false,
-  indeterminate = false,
-  tone: toneProp,
-  style,
-  labelStyle,
-  accessibilityLabel,
-  nativeID,
-  testID,
-}) => {
+const CheckboxComponent: React.FC<CheckboxProps> = (props) => {
+  const {
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    label,
+    description,
+    size: sizeProp,
+    disabled = false,
+    indeterminate = false,
+    tone: toneProp,
+    style,
+    labelStyle,
+    accessibilityLabel,
+    nativeID,
+    testID,
+  } = props;
+  const [checked, setChecked] = useControllableState({ value: checkedProp ?? false, controlled: Object.prototype.hasOwnProperty.call(props, 'checked'), defaultValue: defaultChecked, onChange: onCheckedChange });
   const theme = useTheme();
   // The label is ADJACENT — the words beside the box ARE the control, so they
   // name it and a `Field` around it only supplies what is missing. `disabled`
@@ -108,7 +111,7 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
     nativeID,
   });
   const isDisabled = field.disabled;
-  const { size: scopedSize, tone } = useBloomAppearance({ size: normalizeBloomSize(sizeProp), tone: toneProp }, { size: 'md', tone: 'accent' });
+  const { size: scopedSize, tone } = useBloomAppearance({ size: sizeProp, tone: toneProp }, { size: 'md', tone: 'accent' });
   const size = scopedSize;
   const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(STYLE_ID, BLOOM_CHECKBOX_CSS);
@@ -123,9 +126,9 @@ const CheckboxComponent: React.FC<CheckboxProps> = ({
 
   const handlePress = useCallback(() => {
     if (!isDisabled) {
-      onCheckedChange(!checked);
+      setChecked(!checked);
     }
-  }, [checked, isDisabled, onCheckedChange]);
+  }, [checked, isDisabled, setChecked]);
 
   const hasText = Boolean(label || description);
 

package/src/checkbox/CheckboxCard.tsx

@@ -1,3 +1,5 @@
+import { useFieldMembership } from '../field/membership';
+import { useControllableState } from '../hooks/use-controllable-state';
 import { useBloomAppearance } from '../appearance';
 import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
@@ -58,18 +60,23 @@ ${CARD} {
 }
 }`;
 
-const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
-  checked,
-  onCheckedChange,
-  title,
-  description,
-  disabled = false,
-  indeterminate = false,
-  tone: toneProp,
-  style,
-  accessibilityLabel,
-  testID,
-}) => {
+const CheckboxCardComponent: React.FC<CheckboxCardProps> = (props) => {
+  const {
+    checked: checkedProp,
+    defaultChecked = false,
+    onCheckedChange,
+    title,
+    description,
+    disabled: disabledProp = false,
+    indeterminate = false,
+    tone: toneProp,
+    style,
+    accessibilityLabel,
+    testID,
+  } = props;
+  const [checked, setChecked] = useControllableState({ value: checkedProp ?? false, controlled: Object.prototype.hasOwnProperty.call(props, 'checked'), defaultValue: defaultChecked, onChange: onCheckedChange });
+  const field = useFieldMembership({ disabled: disabledProp, accessibilityLabel, label: title, labelPlacement: 'adjacent' });
+  const disabled = field.disabled;
   const theme = useTheme();
   const { tone } = useBloomAppearance({ tone: toneProp }, {size: 'md', tone: 'accent'});
   const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
@@ -81,8 +88,8 @@ const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
   const highlighted = !disabled && (hovered || pressed);
 
   const handlePress = useCallback(() => {
-    if (!disabled) onCheckedChange(!checked);
-  }, [checked, disabled, onCheckedChange]);
+    if (!disabled) setChecked(!checked);
+  }, [checked, disabled, setChecked]);
 
   const cardStyle: WebCssStyle = {
     flexDirection: 'row',
@@ -121,7 +128,10 @@ const CheckboxCardComponent: React.FC<CheckboxCardProps> = ({
       accessibilityRole="checkbox"
       // `aria-checked` is the one spelling both platforms honour — see `Checkbox`.
       aria-checked={indeterminate ? 'mixed' : checked}
-      accessibilityLabel={accessibilityLabel ?? title}
+      accessibilityLabel={field.accessibilityLabel}
+      nativeID={field.nativeID}
+      aria-describedby={field.describedBy}
+      aria-invalid={field.invalid || undefined}
       accessibilityHint={description}
       testID={testID}
     >

package/src/checkbox/shared.tsx

@@ -32,9 +32,6 @@ export const CHECKBOX_SIZE_CONFIG: Record<
   CheckboxSize,
   { box: number; gap: number; label: TypeScaleVariant; description: TypeScaleVariant }
 > = {
-  small: { box: 14, gap: 6, label: 'body-2-medium', description: 'body-2-regular' },
-  medium: { box: 16, gap: 8, label: 'body-medium', description: 'body-regular' },
-  large: { box: 20, gap: 8, label: 'headline-medium', description: 'body-regular' },
   xs: { box: 12, gap: 4, label: 'caption-1-medium', description: 'caption-1-regular' },
   sm: { box: 14, gap: 6, label: 'body-2-medium', description: 'body-2-regular' },
   md: { box: 16, gap: 8, label: 'body-medium', description: 'body-regular' },

package/src/checkbox/types.ts

@@ -2,13 +2,14 @@ import type { BloomSize } from '../appearance';
 import type { BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
-export type CheckboxSize = BloomSize | 'small' | 'medium' | 'large';
+export type CheckboxSize = BloomSize;
 
 export interface CheckboxProps {
   /** Whether the checkbox is checked. */
-  checked: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
   /** Called when the checked state changes. */
-  onCheckedChange: (checked: boolean) => void;
+  onCheckedChange?: (checked: boolean) => void;
   /** Optional label text. */
   label?: string;
   /** Optional description shown below the label. */
@@ -34,9 +35,10 @@ export interface CheckboxProps {
 
 export interface CheckboxCardProps {
   /** Whether the card's checkbox is checked. */
-  checked: boolean;
+  checked?: boolean;
+  defaultChecked?: boolean;
   /** Called when the checked state changes. A press anywhere on the card toggles it. */
-  onCheckedChange: (checked: boolean) => void;
+  onCheckedChange?: (checked: boolean) => void;
   /** The card's title (one line); also its accessible name. */
   title: string;
   /** Optional one-line description under the title. */

package/src/checkout-summary/CheckoutConfirm.tsx

@@ -80,8 +80,8 @@ function CheckoutConfirmComponent({
   return (
     <View testID={testID} style={style}>
       <Button
-        variant="primary"
-        size="large"
+
+        size="lg"
         fullWidth
         onPress={handlePress}
         disabled={disabled}
@@ -91,7 +91,7 @@ function CheckoutConfirmComponent({
         // being placed invites the press this component exists to refuse.
         accessibilityLabel={busy ? busyLabel : words}
         style={{ alignSelf: 'stretch' }}
-        testID={id('button')}
+        testID={id('button')} tone="accent" appearance="solid"
       >
         {words}
       </Button>

package/src/composer-panel/ComposerPanelBase.tsx

@@ -1,4 +1,5 @@
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill } from '../styles/surface-levels';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { SurfacePaint } from '../surface/SurfacePaint';
 import {
@@ -147,7 +148,9 @@ export function ComposerPanelBase({
 }: ComposerPanelProps) {
   useComposerWebCss();
   const theme = useTheme();
+  const parentFill = useSurfaceFill();
   const palette = useMemo(() => resolveComposerPalette(theme), [theme]);
+  const publishedFill = resolveSurfaceMaterial({ fill: palette.surface, parentFill: parentFill }).publishedFill;
   const { messages } = useMessages(COMPOSER_PANEL_MESSAGES);
   const common = useCommonMessages();
   const labels = useMemo<Required<ComposerPanelLabels>>(
@@ -252,8 +255,8 @@ export function ComposerPanelBase({
     <View testID={testID} style={[{ width: '100%', flexDirection: 'column' }, style]}>
       {status ?? null}
 
-      <SurfaceLevelProvider level={1} fill={palette.surface}>
-      <View style={[cardStyle, surfaceFillVars(palette.surface)]}>
+      <SurfaceLevelProvider level={1} fill={publishedFill}>
+      <View style={[cardStyle, surfaceFillVars(publishedFill)]}>
         <SurfacePaint fill={palette.surface} radius={CARD_RADIUS} />
         <Collapse open={hasAttachments}>
           <View style={{ paddingBottom: 4 }}>

package/src/composer-panel/ComposerPillBase.tsx

@@ -1,7 +1,7 @@
 import { useComposerButton } from './context';
 import { COMPOSER_BUTTON_LAYOUT } from './button-layout';
 import { SurfaceLevelProvider, surfaceFillVars, useSurfaceFill, useSurfaceLevelValue } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { parseRgba } from '../theme/color-utils';
 import { SurfacePaint } from '../surface/SurfacePaint';
@@ -73,7 +73,7 @@ function GlassChip({ shown, radius, dark }: { shown: boolean; radius: number; da
   const fade = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity]);
   if (!mounted) return null;
   return <Animated.View pointerEvents="none" style={[StyleSheet.absoluteFill, fade]}>
-    <SurfacePaint fill={`rgba(255, 255, 255, ${dark ? 0.06 : 0.12})`} radius={radius} glass />
+    <SurfacePaint fill={`rgba(255, 255, 255, ${dark ? 0.06 : 0.12})`} radius={radius} />
   </Animated.View>;
 }
 
@@ -587,7 +587,7 @@ export function ComposerPillBase({
   const paintsSurface = surface && typeof surfaceFill === 'string' && surfaceFill !== 'transparent' && parseRgba(surfaceFill)?.a !== 0;
   const ownFill = paintsSurface ? surfaceFill : customSurface?.backgroundColor;
   const publishedFill = typeof ownFill === 'string' && ownFill !== 'transparent' && parseRgba(ownFill)?.a !== 0
-    ? resolveSurfaceFill(ownFill, false, paintsSurface ? theme.colors.card : parentFill) : undefined;
+    ? resolveSurfaceMaterial({ fill: ownFill, parentFill, paint: paintsSurface }).publishedFill : undefined;
   const pillStyle: WebCssStyle = {
     width: '100%',
     height: pillHeight,

package/src/composer-panel/ComposerPopover.tsx

@@ -1,5 +1,5 @@
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 /**
  * The composer's anchored panel — NATIVE.
  *
@@ -66,10 +66,11 @@ export function ComposerPopover({
 }: ComposerPopoverProps) {
   const theme = useContext(BloomThemeContext)?.theme;
   const panelStyle = StyleSheet.flatten(style);
+  const parentFill = useOptionalSurfaceFill() ?? theme?.colors.background ?? 'transparent';
   const fill = panelStyle?.backgroundColor ?? theme?.colors.card;
   const paintsSurface = Boolean(theme) && typeof fill === 'string' && fill !== 'transparent' && parseRgba(fill)?.a !== 0;
 
-  const publishedFill = paintsSurface ? resolveSurfaceFill(fill as string, false, theme!.colors.card) : undefined;
+  const publishedFill = paintsSurface ? resolveSurfaceMaterial({ fill: fill as string, parentFill: parentFill }).publishedFill : undefined;
   const content = publishedFill ? <SurfaceLevelProvider level={1} fill={publishedFill}>{children}</SurfaceLevelProvider> : children;
   const common = useCommonMessages();
   const window = useWindowDimensions();

package/src/composer-panel/PermissionMenu.tsx

@@ -211,7 +211,7 @@ function PermissionRow({
 /** A secondary small `LinkButton`, a step lighter: tertiary, underline on hover. */
 function LearnMore({ label, onPress }: { label: string; onPress: () => void }) {
   const Button = useComposerButton();
-  return <Button variant="link" linkTone="text" underline="hover" size="sm"
+  return <Button appearance="plain" linkTone="text" underline="hover" size="sm"
     accessibilityRole="link" accessibilityLabel={label} onPress={onPress}
     style={COMPOSER_BUTTON_LAYOUT}>{label}</Button>;
 }

package/src/contact-card/ContactProfileCard.tsx

@@ -256,7 +256,7 @@ function ContactProfileCardComponent({
           <Button
             key={channel.kind + String(index)}
             appearance="solid" tone="neutral"
-            size="small"
+            size="sm"
             iconOnly={!labelled}
             leadingIcon={channel.icon ?? spec.icon}
             onPress={channel.onPress}

package/src/content-panel/ContentPanel.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Native variant of `ContentPanel` — the framed app-content surface.
  *
@@ -32,11 +33,11 @@
  */
 import React, { memo } from 'react';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { StyleSheet, useWindowDimensions, type StyleProp, type ViewStyle } from 'react-native';
+import { StyleSheet, useWindowDimensions } from 'react-native';
 
 import { useOptionalPanelChrome } from '../styles/panel-chrome';
 import { StyledView } from '../styles/styled-primitives';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import {
   ContentPanelNestingContext,
   useContentPanelNestingGuard,
@@ -92,10 +93,12 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   useContentPanelNestingGuard();
   const panelChrome = useOptionalPanelChrome();
   // What the panel tells its subtree it is painted in (`./shared.ts`).
-  const publishedFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
-  const defaultFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, undefined);
+  const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
+  const defaultFill = rawFill;
   const { width } = useWindowDimensions();
-  const paintsSurface = Boolean(defaultFill) && (framed ?? width >= framedFrom);
+  const parentFill = useOptionalSurfaceFill();
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
   const radius = StyleSheet.flatten(surfaceStyle)?.borderRadius ?? 28;
 
   // Tri-state: `undefined` → responsive (breakpoint-gated), `true` → always
@@ -137,6 +140,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
           surfaceFillVars(publishedFill),
           chromeStyle,
           surfaceStyle,
+          paintsSurface ? { backgroundColor: 'transparent' } : null,
         ]}
       >
         {paintsSurface ? <SurfacePaint fill={defaultFill!} radius={radius} /> : null}