@oxy.so/bloom 5.4.0 → 6.0.0

package/src/carrier-quote/CarrierQuoteList.tsx

@@ -167,10 +167,10 @@ function CarrierQuoteListComponent({
         {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={{

package/src/cart-panel/CartLine.tsx

@@ -166,7 +166,7 @@ function CartLineComponent(props: CartLineProps) {
         <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8, marginTop: 6 }}>
           {onQuantityChange ? (
             <Stepper
-              size="small"
+              size="sm"
               value={quantity}
               min={1}
               disabled={unavailable}

package/src/cart-panel/CartPanel.tsx

@@ -303,12 +303,12 @@ function CartPanelComponent({
 
       {hasLines && onCheckout ? (
         <Button
-          variant="primary"
-          size="large"
+
+          size="lg"
           fullWidth
           disabled={checkoutDisabled}
           onPress={onCheckout}
-          testID={testID ? `${testID}-checkout` : undefined}
+          testID={testID ? `${testID}-checkout` : undefined} tone="accent" appearance="solid"
         >
           {checkoutLabel}
         </Button>

package/src/cart-panel/CartPromoField.tsx

@@ -99,11 +99,11 @@ function CartPromoFieldComponent({
         />
         <InputGroupAddon divider noPadding>
           <Button
-            variant="ghost"
-            size="small"
+
+            size="sm"
             onPress={onApply}
             disabled={disabled || value.trim() === ''}
-            testID={testID ? `${testID}-apply` : undefined}
+            testID={testID ? `${testID}-apply` : undefined} tone="accent" appearance="subtle"
           >
             {applyLabel}
           </Button>

package/src/cart-panel/CartTipPicker.tsx

@@ -56,7 +56,7 @@ function CartTipPickerComponent({
       <SegmentedControl
         label={label}
         type="radio"
-        size="large"
+        size="lg"
         value={value ?? ''}
         onChange={onValueChange}
         disabled={disabled}

package/src/category-bar/CategoryBar.tsx

@@ -479,28 +479,28 @@ function CategoryBarComponent({
         {IS_WEB && overflow.previous ? (
           <View pointerEvents="box-none" style={edgeStyle('left')}>
             <Button
-              variant="secondary"
-              size="small"
+
+              size="sm"
               iconOnly
               leadingIcon={RiArrowLeftSLine}
               accessibilityLabel={previousLabel}
               tabIndex={-1}
               onPress={() => page(-1)}
-              testID={testID ? `${testID}-previous` : undefined}
+              testID={testID ? `${testID}-previous` : undefined} tone="neutral" appearance="outline"
             />
           </View>
         ) : null}
         {IS_WEB && overflow.next ? (
           <View pointerEvents="box-none" style={edgeStyle('right')}>
             <Button
-              variant="secondary"
-              size="small"
+
+              size="sm"
               iconOnly
               leadingIcon={RiArrowRightSLine}
               accessibilityLabel={nextLabel}
               tabIndex={-1}
               onPress={() => page(1)}
-              testID={testID ? `${testID}-next` : undefined}
+              testID={testID ? `${testID}-next` : undefined} tone="neutral" appearance="outline"
             />
           </View>
         ) : null}

package/src/chart-cards/primitives/use-chart-palette.ts

@@ -1,8 +1,8 @@
+import { resolveSurfaceMaterial } from '../../surface/resolve-surface-material';
 import { useMemo } from 'react';
 import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 import { useSurfaceFill } from '../../styles/surface-levels';
 import { useSurfaceLayer } from '../../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../../surface/shared';
 
 import { useTheme } from '../../theme/use-theme';
 import {
@@ -39,6 +39,6 @@ export function useChartCardSurfacePalette(style?: StyleProp<ViewStyle>): ChartC
   const theme = useTheme();
   const layer = useSurfaceLayer();
   const fill = StyleSheet.flatten(style)?.backgroundColor;
-  const surface = resolveSurfaceFill(typeof fill === 'string' ? fill : layer.fill, false, layer.parentFill);
+  const surface = resolveSurfaceMaterial({ fill: typeof fill === 'string' ? fill : layer.fill, parentFill: layer.parentFill }).publishedFill;
   return useMemo(() => resolveChartCardPalette(theme, surface), [theme, surface]);
 }

package/src/chat-composer/create-message-context-menu.tsx

@@ -73,7 +73,7 @@ export function createMessageContextMenu({ DropdownMenu, DropdownMenuContent, Dr
                 selected={selectedReaction}
                 onSelectEmoji={onSelectReaction}
                 onMorePress={onMoreReactions}
-                size="small"
+                size="sm"
                 surface={false}
                 style={[{ alignSelf: 'stretch', justifyContent: 'space-between' }, reactionBarStyle]}
                 testID={testID ? `${testID}-reactions` : undefined}

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 }}>