@oxy.so/bloom 5.4.1 → 6.1.0

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}

package/src/content-panel/ContentPanel.web.tsx

@@ -1,3 +1,4 @@
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 /**
  * Web variant of `ContentPanel` — the framed app-content surface.
  *
@@ -87,14 +88,14 @@
  */
 import React, { memo, useInsertionEffect } from 'react';
 import { useSurfaceMaterial } from '../surface/use-surface-material.web';
-import { type StyleProp, type ViewStyle } from 'react-native';
+import { useWindowDimensions, type ViewStyle } from 'react-native';
 
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { StyledView } from '../styles/styled-primitives';
 
 import { useOptionalPanelChrome } from '../styles/panel-chrome';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { SurfaceLevelProvider, surfaceFillVars, useOptionalSurfaceFill } from '../styles/surface-levels';
 import { useTheme } from '../theme/use-theme';
 import {
   ContentPanelNestingContext,
@@ -155,10 +156,6 @@ const RESPONSIVE_WEB: Record<
 // without reaching adjacent controls. CSS owns
 // responsive framing, including the sticky inset inherited by PageHeader.
 const PANEL_INSET_CSS = `
-@media (width < 500px) { [data-bloom-panel-material][data-bloom-panel-material="500"]::after { content: none; } }
-@media (width < 640px) { [data-bloom-panel-material][data-bloom-panel-material="640"]::after { content: none; } }
-@media (width < 768px) { [data-bloom-panel-material][data-bloom-panel-material="768"]::after { content: none; } }
-@media (width < 1024px) { [data-bloom-panel-material][data-bloom-panel-material="1024"]::after { content: none; } }
 
 [data-bloom-panel] { --bloom-panel-sticky-top: 0px; }
 [data-bloom-panel="framed"] { --bloom-panel-sticky-top: var(--bloom-panel-inset-top); }
@@ -202,9 +199,13 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   // outside a provider.
   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 materialStyle = useSurfaceMaterial('[data-bloom-panel-material]', 'bloom-content-panel-material');
+  const rawFill = usePanelSurfaceFill(surfaceClassName, surfaceStyle, surfaceColor);
+  const defaultFill = rawFill;
+  const { width } = useWindowDimensions();
+  const parentFill = useOptionalSurfaceFill();
+  const paintsSurface = Boolean(defaultFill) && parentFill !== undefined && (framed ?? width >= framedFrom);
+  const publishedFill = rawFill && paintsSurface ? resolveSurfaceMaterial({ fill: rawFill, parentFill: parentFill! }).publishedFill : rawFill;
+  const materialStyle = useSurfaceMaterial('[data-bloom-panel-material]', 'bloom-content-panel-material', defaultFill ?? 'transparent');
 
   // Tri-state: `undefined` → responsive (md:-gated), `true` → always framed,
   // `false` → never framed (full-bleed).
@@ -248,7 +249,7 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
   const gridStackClass = boundToPanel
     ? 'web:grid web:[grid-template-columns:minmax(0,1fr)] web:[grid-template-rows:minmax(0,1fr)]'
     : '';
-  const surfaceClass = [surfaceBase, fillSurface, gridStackClass, surfaceClassName ?? 'bg-card'].filter(Boolean).join(' ');
+  const surfaceClass = [surfaceBase, fillSurface, gridStackClass, surfaceClassName ?? (paintsSurface ? 'bg-transparent' : 'bg-card')].filter(Boolean).join(' ');
   const contentClass = [contentBase, fillContent, boundToPanel ? 'web:[grid-area:1/1]' : '', contentClassName]
     .filter(Boolean)
     .join(' ');
@@ -291,16 +292,16 @@ const ContentPanelComponent: React.FC<ContentPanelProps> = ({
     <ContentPanelNestingContext.Provider value={true}>
       <StyledView
         testID="content-panel-surface"
-        {...{ dataSet: { bloomPanelMaterial: defaultFill && framed !== false ? (framed === true ? 'framed' : String(framedFrom)) : undefined, bloomPanel: boundToPanel || framed === false ? 'none' : responsive ? String(framedFrom) : 'framed' } }}
+        {...{ dataSet: { bloomPanelMaterial: paintsSurface ? 'framed' : undefined, bloomPanel: boundToPanel || framed === false ? 'none' : responsive ? String(framedFrom) : 'framed' } }}
         className={surfaceClass}
         style={[
           // `--bloom-surface` rides the element that carries the fill, so CSS
-          // below the panel and `useSurfaceFill()` below the panel cannot
+          // below the panel and `useOptionalSurfaceFill()` below the panel cannot
           // disagree about what the panel painted.
           surfaceFillVars(publishedFill),
           insetVars,
-          materialStyle,
           surfaceStyle,
+          paintsSurface ? materialStyle : null,
         ]}
       >
         {/* (1) Bleed-mask overlay — gutter box-shadow ring, below chrome. Not

package/src/content-panel/shared.ts

@@ -14,7 +14,7 @@
  * WHICH colour is the honest answer for a given set of props.
  */
 import { useContext } from 'react';
-import type { StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, type StyleProp, type ViewStyle } from 'react-native';
 
 import { BloomThemeContext } from '../theme/BloomThemeProvider';
 
@@ -41,23 +41,11 @@ function repaintedByStyle(style: StyleProp<ViewStyle>): boolean {
 /**
  * The exact fill the panel publishes, or `undefined` when it cannot know it.
  *
- * Four cases, in order:
- *
- *  - `surfaceColor` given — the caller stated it; nothing beats that.
- *  - `surfaceClassName` given — the caller REPAINTED the surface with a utility
- *    Bloom cannot resolve to a colour (that is the whole point of the prop), so
- *    publishing `card` would be a confident lie. The panel falls back to
- *    publishing the rung alone, which is the weaker answer it had before —
- *    `surfaceColor` is how a caller in this case gets the exact one back.
- *  - `surfaceStyle` carrying a `backgroundColor` — the same repaint by the other
- *    door, and the panel has to stop claiming `card` for it too. The colour is
- *    right there, but WHICH of the two paints is a platform question the panel
- *    must not guess at: `styled()` appends the class descriptor AFTER the style
- *    prop, so on native the class wins the array, while on web the inline style
- *    wins the cascade. Publishing either one would be right on one platform and
- *    quietly wrong on the other, so the panel publishes neither and the caller
- *    names it with `surfaceColor`.
- *  - none of them — the panel paints `bg-card`, so it publishes `colors.card`.
+ * The explicit surfaceColor wins, followed by a string background in
+ * surfaceStyle. A class-only repaint is unknown unless its caller supplies
+ * surfaceColor. Otherwise the default card token is the raw fill.
+ * Framed hosts move this fill into translucent paint and publish its composite;
+ * unframed hosts retain the unmodified fill.
  *
  * Outside a `BloomThemeProvider` there is no palette to name, and the panel has
  * always rendered there on native, so this stays optional rather than throwing:
@@ -70,6 +58,8 @@ export function usePanelSurfaceFill(
 ): string | undefined {
   const ctx = useContext(BloomThemeContext);
   if (surfaceColor) return surfaceColor;
+  const background = StyleSheet.flatten(surfaceStyle)?.backgroundColor;
+  if (typeof background === 'string') return background;
   if (surfaceClassName) return undefined;
   if (repaintedByStyle(surfaceStyle)) return undefined;
   return ctx?.theme.colors.card;

package/src/creator-studio/ArtworkUploader.tsx

@@ -98,25 +98,25 @@ function ArtworkUploaderComponent({
             />
             <View style={styles.previewActions}>
               <Button
-                variant="secondary"
-                size="small"
+
+                size="sm"
                 leadingIcon={RiRefreshLine}
                 onPress={() => setReplacing(true)}
                 disabled={disabled}
-                testID={id('replace')}
+                testID={id('replace')} tone="neutral" appearance="outline"
               >
                 {labels.replace}
               </Button>
               {onRemove ? (
                 <Button
-                  variant="secondary"
-                  size="small"
+
+                  size="sm"
                   iconOnly
                   leadingIcon={RiDeleteBinLine}
                   accessibilityLabel={labels.remove}
                   onPress={onRemove}
                   disabled={disabled}
-                  testID={id('remove')}
+                  testID={id('remove')} tone="neutral" appearance="outline"
                 />
               ) : null}
             </View>
@@ -147,11 +147,11 @@ function ArtworkUploaderComponent({
 
       {replacing && uri ? (
         <Button
-          variant="secondary"
-          size="small"
+
+          size="sm"
           onPress={() => setReplacing(false)}
           style={styles.cancel}
-          testID={id('cancel')}
+          testID={id('cancel')} tone="neutral" appearance="outline"
         >
           {labels.cancel}
         </Button>

package/src/creator-studio/AudienceOverview.tsx

@@ -114,7 +114,7 @@ function AudienceOverviewComponent({
           ) : null}
         </View>
         <View testID={testID ? `${testID}-period` : undefined} style={stacked ? styles.periodStacked : null}>
-          <SegmentedControl label={periodLabel} type="radio" size="small" value={period} onChange={onPeriodChange}>
+          <SegmentedControl label={periodLabel} type="radio" size="sm" value={period} onChange={onPeriodChange}>
             {periods.map((option) => (
               <SegmentedControlItem
                 key={option.value}

package/src/creator-studio/CreditsEditor.tsx

@@ -129,14 +129,14 @@ function CreditsEditorComponent({
               />
             </View>
             <Button
-              variant="secondary"
-              size="medium"
+
+              size="md"
               iconOnly
               leadingIcon={RiDeleteBinLine}
               disabled={disabled}
               accessibilityLabel={labels.remove(index, credit.name)}
               onPress={() => remove(credit.id)}
-              testID={testID ? `${testID}-remove-${index}` : undefined}
+              testID={testID ? `${testID}-remove-${index}` : undefined} tone="neutral" appearance="outline"
             />
           </View>
         );
@@ -153,13 +153,13 @@ function CreditsEditorComponent({
       })}
 
       <Button
-        variant="secondary"
-        size="medium"
+
+        size="md"
         leadingIcon={RiAddLine}
         onPress={add}
         disabled={disabled}
         style={styles.add}
-        testID={testID ? `${testID}-add` : undefined}
+        testID={testID ? `${testID}-add` : undefined} tone="neutral" appearance="outline"
       >
         {labels.add}
       </Button>

package/src/creator-studio/MetadataFields.tsx

@@ -106,13 +106,13 @@ function ArtistChipsInputComponent({
           />
         </TextField>
         <Button
-          variant="secondary"
-          size="medium"
+
+          size="md"
           leadingIcon={RiAddLine}
           disabled={blocked || draft.trim() === ''}
           onPress={commit}
           accessibilityLabel={addName}
-          testID={testID ? `${testID}-add` : undefined}
+          testID={testID ? `${testID}-add` : undefined} tone="neutral" appearance="outline"
         >
           {addLabel}
         </Button>