@oxy.so/bloom 3.5.0 → 4.0.0

package/src/price-breakdown/types.ts

@@ -0,0 +1,103 @@
+import type { ReactNode } from 'react';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * What a line is, as a colour decision rather than a domain one.
+ *
+ * `discount` paints the amount in the success tone — it is money coming back.
+ * `muted` draws the whole line at the secondary rung, for the charges a reader
+ * scans past (a tax line, a rounding line). `default` is everything else,
+ * including a fee: a fee is a line with a label and an amount, and giving it a
+ * tone of its own would be this component deciding what an app's fees mean.
+ */
+export type PriceLineTone = 'default' | 'discount' | 'muted';
+
+/**
+ * Whether the number is the answer yet. `estimated` is a real number that can
+ * still move (a distance-based delivery charge before the route is fixed);
+ * `pending` has no number at all yet.
+ */
+export type PriceLineState = 'final' | 'estimated' | 'pending';
+
+export interface PriceLine {
+  /** Stable key. Defaults to the index. */
+  id?: string;
+  /** "Subtotal", "Delivery", "Service fee". */
+  label: string;
+  /** A quieter second line under the label — "3 items", "4.2 km". */
+  sublabel?: string;
+  /**
+   * PRE-FORMATTED, sign and currency included: `"€12.40"`, `"−€3.00"`,
+   * `"$0.00"`. Nothing in this family parses, adds or formats a number — the
+   * app owns currency, locale and the minus sign. Omit it for a `pending` line.
+   */
+  amount?: string;
+  /** Default `default`. */
+  tone?: PriceLineTone;
+  /** Default `final`. */
+  state?: PriceLineState;
+  /**
+   * An explanation, shown in a `Popover` anchored to an info glyph after the
+   * label. Any node: a string, a `Text`, a short column.
+   */
+  info?: ReactNode;
+  /**
+   * Names the info affordance — it draws a glyph and no text. Defaults to
+   * `"About <label>"`.
+   */
+  infoAccessibilityLabel?: string;
+}
+
+/** The row that is the answer. */
+export interface PriceTotal {
+  /** "Total", "Total due", "You pay". */
+  label: string;
+  /** PRE-FORMATTED, like every other amount here. */
+  amount?: string;
+  /** A quieter line under the total — "Includes taxes". */
+  note?: string;
+  /** Default `final`. */
+  state?: PriceLineState;
+}
+
+/** The words drawn beside an amount that is not final. */
+export type PriceStateLabels = Partial<Record<Exclude<PriceLineState, 'final'>, string>>;
+
+export interface PriceSummaryLineProps extends Omit<PriceLine, 'id'> {
+  /** Defaults: `estimated` → "Estimated", `pending` → "Pending". */
+  stateLabels?: PriceStateLabels;
+  /** Drawn where the amount would be on a line that has none. Default `"—"`. */
+  pendingPlaceholder?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+export interface PriceSummaryProps {
+  /** The charges, in the order they should be read. */
+  lines: readonly PriceLine[];
+  /** The answer. Without it the component draws the lines and no rule. */
+  total?: PriceTotal;
+  /**
+   * Hide the lines behind a disclosure, leaving the total visible. The total is
+   * deliberately never what collapses: the number a reader came for stays on
+   * screen and the ITEMISATION is what folds away.
+   */
+  collapsible?: boolean;
+  /** Controlled disclosure. */
+  expanded?: boolean;
+  /** Uncontrolled initial disclosure. Default `false`. */
+  defaultExpanded?: boolean;
+  onExpandedChange?: (expanded: boolean) => void;
+  /** Default `"Show price details"`. */
+  expandLabel?: string;
+  /** Default `"Hide price details"`. */
+  collapseLabel?: string;
+  /** Defaults: `estimated` → "Estimated", `pending` → "Pending". */
+  stateLabels?: PriceStateLabels;
+  /** Drawn where the amount would be on a line that has none. Default `"—"`. */
+  pendingPlaceholder?: string;
+  /** Names the list of charges. Default `"Price breakdown"`. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/property-insights/shared.ts

@@ -5,7 +5,7 @@ import { resolveButtonRamps } from '../button/shared';
 import { oklchToSrgb, srgbToOklch, srgbToRgbString, type Oklch } from '../theme/color-space';
 import { parseRgba } from '../theme/color-utils';
 import { quietTextOver } from '../styles/color-contrast';
-import { AA_TEXT } from '../styles/surface-levels';
+import { AA_TEXT, resolveSurfaceLevel, surfaceFillOn, hairlineOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type { EnergyClass } from './types';
 import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
@@ -47,7 +47,7 @@ export interface InsightPalette {
 
 export function resolveInsightPalette(theme: Theme): InsightPalette {
   const c = theme.colors;
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
     text: c.text,
@@ -55,16 +55,16 @@ export function resolveInsightPalette(theme: Theme): InsightPalette {
     // `theme.colors.textTertiary` is the theme's ONE quiet-text token, which is
     // floored against the page — and this family paints quiet labels on `card`
     // too. Read the rung off the card so the harder of the two surfaces decides.
-    muted: quietTextOver([c.background, dark ? n[900] : c.card], c.text, AA_TEXT),
-    hairline: dark ? n[800] : n[200],
-    track: dark ? n[800] : n[100],
-    bar: dark ? n[700] : n[300],
+    muted: quietTextOver([c.background, resolveSurfaceLevel(theme, 1).background], c.text, AA_TEXT),
+    hairline: hairlineOn(theme, c.background),
+    track: surfaceFillOn(theme, c.background),
+    bar: c.textSecondary,
     accent: c.primary,
     band: dark ? accent[800] : accent[200],
     bandSoft: dark ? accent[900] : accent[100],
-    iconSurface: dark ? n[800] : n[100],
+    iconSurface: surfaceFillOn(theme, c.background),
     surface: c.background,
-    card: dark ? n[900] : c.card,
+    card: resolveSurfaceLevel(theme, 1).background,
     ring: accent[500],
   };
 }
@@ -132,7 +132,6 @@ export const ENERGY_LIGHTNESS_CHROMA: readonly (readonly [l: number, c: number])
  * The same in both modes: the scale is a standard, not a surface.
  */
 export function resolveEnergyTones(theme: Theme): EnergyTone[] {
-  const { neutral: n } = resolveButtonRamps(theme);
   const hue = (color: string, fallback: number) => toOklch(color)?.h ?? fallback;
   const green = hue(theme.colors.success, 150);
   const amber = hue(theme.colors.warning, 70);
@@ -143,7 +142,7 @@ export function resolveEnergyTones(theme: Theme): EnergyTone[] {
     const t = i < 4 ? i / 4 : (i - 4) / 2;
     return fitRgb(lerpOklch({ l, c, h: from }, { l, c, h: to }, t));
   });
-  const dark = n[950];
+  const dark = '#000000';
   return fills.map((fill) => ({
     fill,
     foreground: contrastRatio(fill, '#ffffff') >= contrastRatio(fill, dark) ? '#fff' : dark,

package/src/provider/BloomProvider.tsx

@@ -1,35 +1,5 @@
-/**
- * `BloomProvider` — the ONE Bloom root an app mounts.
- *
- * Bloom's app-wide state used to be a handful of separate providers that every
- * consumer wired by hand (theme, haptics, image resolution, scroll restoration,
- * tab-bar minimize progress). Mounting them separately means each one can end
- * up at a different depth, and a provider mounted too low fails in ways that
- * are hard to trace:
- *
- *   - `useScrollRestoration()` THROWS on web outside `ScrollRestorationProvider`,
- *     so any scrollable rendered beside the provider (a right rail, an overlay)
- *     crashes the screen.
- *   - `useMinimizeState()` silently hands each caller a private fallback, so a
- *     tab bar below the provider just never minimizes — no error anywhere.
- *
- * Mounting this single provider at the app root makes both classes of mistake
- * impossible: everything Bloom renders is under all of them, at the same depth.
- * Nesting extra contexts costs nothing at runtime — the win is that scope is no
- * longer a per-app decision.
- *
- * EXPO/EXPO-ROUTER APPS ONLY, and now for one narrow reason: it binds the
- * scroll store to the expo-router ADAPTER, which is the only module in the
- * scroll primitive that imports `expo-router`. The scroll core itself is
- * router-agnostic, so a Vite/SPA consumer can mount
- * `<ScrollRestorationProvider adapter={...}>` from `@oxy.so/bloom/scroll` with
- * an adapter for its own router — alongside `BloomThemeProvider` and whatever
- * else it needs — rather than going without.
- *
- * NOT included, on purpose — these are OUTLETS, not state, and their placement
- * in the tree is a real app decision (z-order, safe areas, and mounting a
- * second one duplicates every surface it renders):
- * `<ToastOutlet>`, `<PortalProvider>`/`<PortalOutlet>`, `<SurfaceHost>`.
+/** Universal application state. Supply scrollAdapter explicitly to enable router restoration.
+ * Visual outlets remain owned by the app's composition to avoid duplicate hosts.
  */
 import type { ReactNode } from 'react';
 
@@ -41,13 +11,21 @@ import { BloomHapticsProvider } from '../hooks/use-haptics';
 import { TabBarMinimizeProvider } from '../tab-bar/context';
 import { BloomThemeProvider, type BloomThemeProviderProps } from '../theme';
 import { ScrollRestorationProvider } from '../scroll/context';
-import { expoRouterScrollAdapter } from '../scroll/expo-router';
+import { useEffect } from 'react';
+import type { ScrollRouterAdapter } from '../scroll/types';
+
+// Stable inert adapter keeps root composition universal; routing is explicit.
+const noRouterAdapter: ScrollRouterAdapter = {
+  useScreenContentId: () => null,
+  useScreenFocusEffect: effect => useEffect(effect, [effect]),
+};
 import type { BloomProviderProps } from './types';
 
 export function BloomProvider({
   children,
   imageResolver,
   haptics = true,
+  scrollAdapter = noRouterAdapter,
   ...themeProps
 }: BloomProviderProps) {
   return (
@@ -55,7 +33,7 @@ export function BloomProvider({
     // never changes the tree shape and remounts everything below it.
     <ImageResolverProvider value={imageResolver ?? null}>
       <BloomThemeProvider {...themeProps}>
-        <ScrollRestorationProvider adapter={expoRouterScrollAdapter}>
+        <ScrollRestorationProvider adapter={scrollAdapter}>
           <BloomHapticsProvider enabled={haptics}>
             {/*
               A PROVIDER, not an outlet, and the distinction is the one this

package/src/provider/types.ts

@@ -1,9 +1,12 @@
 import type { ReactNode } from 'react';
+import type { ScrollRouterAdapter } from '../scroll/types';
 import { type ImageResolver } from '../image-resolver';
 import { type BloomThemeProviderProps } from '../theme';
 
 export interface BloomProviderProps extends Omit<BloomThemeProviderProps, 'children'> {
   children: ReactNode;
+  /** Stable router adapter; omitted means automatic restoration is inactive. */
+  scrollAdapter?: ScrollRouterAdapter;
   /**
    * Resolves bare media identifiers (Oxy file ids) to loadable URLs for every
    * Bloom surface that takes a `source` — `<Avatar>`, image galleries, cards.

package/src/questionnaire/Questionnaire.tsx

@@ -28,8 +28,13 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { Button, CloseButton } from '../button';
-import { mixColor, resolveButtonRamps } from '../button/shared';
-import { CHECKBOX_GLYPH_CSS, CHECKBOX_GLYPH_STYLE_ID, CheckboxGlyph, resolveCheckboxPaint, type CheckboxPaint } from '../checkbox/shared';
+import {
+  CHECKBOX_GLYPH_CSS,
+  CHECKBOX_GLYPH_STYLE_ID,
+  CheckboxGlyph,
+  resolveCheckboxPaint,
+  type CheckboxPaint,
+} from '../checkbox/shared';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -56,9 +61,9 @@ import type {
  *             (0 4px 2px 2% over 0 1px 0.5px 5%)
  *   prompt    body-medium text, inset 2px left, 28px right when dismissable;
  *             20px circular dismiss 12/12 from the corner
- *   rows      radius 16, 1px border neutral-200 (dark 700), padding 9/19/9/11
+ *   rows      radius 16, 1px borderLight, padding 9/19/9/11
  *             inside the border (a 60px row for title + description), gap 16,
- *             8 between rows; body-medium title over body-regular neutral-500
+ *             8 between rows; body-medium title over body-regular textSecondary
  *   multiple  Bloom's 16px `CheckboxGlyph` in a 4px vertical inset, hovering
  *             with its ROW; Next advances
  *   single    body-2-medium number key (radius 4, px 5 py 2) that steps one tone
@@ -106,26 +111,16 @@ interface QuestionnairePalette {
   checkbox: CheckboxPaint;
 }
 
-/** Semantic tokens onto Bloom's ramps. Pure, so a test can walk it. */
+/** Canonical role palette. Pure, so a test can walk it. */
 export function resolveQuestionnairePalette(theme: Theme): QuestionnairePalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const dark = theme.isDark;
-  const surface = dark ? n[800] : theme.colors.card;
+  const c = theme.colors;
   return {
-    surface,
-    text: theme.colors.text,
-    textSecondary: n[500],
-    textTertiary: dark ? n[600] : n[400],
-    rowBorder: dark ? n[700] : n[200],
-    rowBorderHover: dark ? n[500] : n[300],
-    rowHover: dark ? mixColor(surface, n[700], 0.6) : n[100],
-    rowActive: dark ? n[800] : n[200],
-    key: dark ? n[700] : n[100],
-    keyRaised: dark ? n[600] : n[200],
-    ring: accent[500],
-    pillSelected: dark ? mixColor(surface, accent[950], 0.6) : accent[50],
-    pillHover: dark ? n[800] : n[100],
-    pillLabelSelected: accent[500],
+    surface: c.card, text: c.text, textSecondary: c.textSecondary, textTertiary: c.textTertiary,
+    rowBorder: c.borderLight, rowBorderHover: c.border,
+    rowHover: c.backgroundSecondary, rowActive: c.backgroundTertiary,
+    key: c.backgroundSecondary, keyRaised: c.backgroundTertiary, ring: c.primary,
+    pillSelected: c.primarySubtle, pillHover: c.backgroundSecondary,
+    pillLabelSelected: c.primarySubtleForeground,
     checkbox: resolveCheckboxPaint(theme),
   };
 }
@@ -337,7 +332,7 @@ function CheckboxRow({
       <OptionText label={option.label} description={option.description} palette={palette} />
       <View style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', paddingTop: 4, paddingBottom: 4 }}>
         <CheckboxGlyph
-          size="medium"
+          size="md"
           checked={checked}
           indeterminate={false}
           disabled={false}
@@ -420,7 +415,7 @@ function OtherToggle({
       style={{ flexShrink: 0, flexDirection: 'row', alignItems: 'center', paddingTop: 4, paddingBottom: 4 }}
     >
       <CheckboxGlyph
-          size="medium"
+          size="md"
           checked={checked}
           indeterminate={false}
           disabled={false}
@@ -1180,21 +1175,10 @@ function QuestionnaireComponent({
           testID={testID ? `${testID}-step` : undefined}
         />
         <View style={{ flexDirection: 'row', flexShrink: 0, alignItems: 'center', justifyContent: 'flex-end', gap: 8 }}>
-          <Button
-            variant="secondary"
-            size="small"
-            disabled={step === 0}
-            onPress={() => goTo(step - 1)}
-            testID={testID ? `${testID}-previous` : undefined}
-          >
+          <Button size="sm" disabled={step === 0} onPress={() => goTo(step - 1)} testID={testID ? `${testID}-previous` : undefined} appearance="subtle" tone="neutral">
             {text.previous}
           </Button>
-          <Button
-            variant="primary"
-            size="small"
-            onPress={() => finish(answersRef.current)}
-            testID={testID ? `${testID}-next` : undefined}
-          >
+          <Button size="sm" onPress={() => finish(answersRef.current)} testID={testID ? `${testID}-next` : undefined} appearance="solid" tone="accent">
             {isLast ? text.complete : text.next}
           </Button>
         </View>

package/src/queue-panel/shared.ts

@@ -1,3 +1,4 @@
+import { surfaceFillOn, surfaceTextOn } from '../styles/surface-levels';
 import { Platform } from 'react-native';
 
 import { resolveButtonRamps } from '../button/shared';
@@ -64,19 +65,19 @@ export interface QueuePanelPaint {
 /** Every colour the family paints, from the theme. The panel is the menu surface family. */
 export function resolveQueuePanelPaint(theme: Theme): QueuePanelPaint {
   const menu = resolveMenuPalette(theme);
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
     surface: menu.surface,
     border: menu.border,
     rowHover: menu.rowHighlight,
-    buttonHover: dark ? n[600] : n[200],
-    dragSurface: dark ? n[700] : theme.colors.card,
+    buttonHover: surfaceFillOn(theme, menu.surface),
+    dragSurface: surfaceFillOn(theme, menu.surface),
     dragShadow: dark
       ? '0 8px 24px rgba(0, 0, 0, 0.45)'
       : '0 8px 24px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.06)',
-    placeholder: dark ? n[700] : n[100],
-    placeholderGlyph: dark ? n[400] : n[400],
+    placeholder: surfaceFillOn(theme, menu.surface),
+    placeholderGlyph: surfaceTextOn(theme, surfaceFillOn(theme, menu.surface)).textSecondary,
     text: theme.colors.text,
     textSecondary: menu.textSecondary,
     accent: dark ? accent[400] : accent[600],

package/src/radio/Radio.tsx

@@ -1,3 +1,6 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
 import { View, Platform, Pressable } from 'react-native';
 
@@ -32,9 +35,10 @@ const SIZE_CONFIG: Record<
   NonNullable<RadioProps['size']>,
   { indicator: number; label: TypeScaleVariant; description: TypeScaleVariant }
 > = {
-  small: { indicator: 14, label: 'body-2-medium', description: 'body-2-regular' },
-  medium: { indicator: 16, label: 'body-medium', description: 'body-regular' },
-  large: { indicator: 20, label: 'headline-medium', description: 'body-regular' },
+  xs: { indicator: 12, label: 'caption-1-medium', description: 'caption-1-regular' },
+  sm: { indicator: 14, label: 'body-2-medium', description: 'body-2-regular' },
+  md: { indicator: 16, label: 'body-medium', description: 'body-regular' },
+  lg: { indicator: 20, label: 'headline-medium', description: 'body-regular' },
 };
 
 /** The `gap-2` between the dot and its label, at every size. */
@@ -87,19 +91,23 @@ const IS_WEB = Platform.OS === 'web';
 
 const RadioComponent = function Radio<Value extends string = string>({
   value,
+  checked: checkedProp,
   selected,
+  onValueChange: onValueChangeProp,
   onSelect,
   label,
   description,
-  size = 'medium',
+  size: sizeProp,
   disabled = false,
-  color,
+  tone: toneProp,
   style,
   labelStyle,
   accessibilityLabel,
   nativeID,
   testID,
 }: RadioProps<Value>) {
+  const onValueChange = onValueChangeProp ?? onSelect;
+  const checked = checkedProp ?? selected ?? false;
   const theme = useTheme();
   // ADJACENT label (see `field/membership.ts`); the field's `disabled` is a
   // constraint, so a radio inside a disabled field cannot re-enable itself.
@@ -112,18 +120,21 @@ const RadioComponent = function Radio<Value extends string = string>({
   });
   const isDisabled = field.disabled;
   const ringOffset = useRingOffsetStyle();
+  const { size: scopedSize, tone } = useBloomAppearance({ size: normalizeBloomSize(sizeProp), tone: toneProp }, { size: 'md', tone: 'accent' });
+  const size = scopedSize;
+  const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(STYLE_ID, BLOOM_RADIO_CSS);
   const sizeConfig = SIZE_CONFIG[size];
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
+  const { accent } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const hasText = Boolean(label || description);
 
   const handlePress = useCallback(() => {
     // Re-choosing the chosen option is a no-op. A radio, unlike a checkbox, has
     // no "off" — firing here would make a group's `onValueChange` report a
     // change that did not happen.
-    if (isDisabled || selected) return;
-    onSelect(value);
-  }, [isDisabled, selected, onSelect, value]);
+    if (isDisabled || checked) return;
+    onValueChange?.(value);
+  }, [isDisabled, checked, onValueChange, value]);
 
   const rowStyle: WebCssStyle = {
     flexDirection: 'row',
@@ -150,7 +161,7 @@ const RadioComponent = function Radio<Value extends string = string>({
       // React Native folds `aria-checked` back into `accessibilityState`, so
       // this one prop is the spelling both platforms honour, and `disabled`
       // travels on the `disabled` prop, which both map.
-      aria-checked={selected}
+      aria-checked={checked}
       accessibilityLabel={field.accessibilityLabel}
       hitSlop={HIT_SLOP}
       testID={testID}
@@ -163,7 +174,7 @@ const RadioComponent = function Radio<Value extends string = string>({
           marginTop: hasText ? (TYPE_SCALE[sizeConfig.label].lineHeight - sizeConfig.indicator) / 2 : 0,
         }}
       >
-        <RadioIndicator selected={selected} size={sizeConfig.indicator} selectedColor={color} />
+        <RadioIndicator selected={checked} size={sizeConfig.indicator} selectedColor={color} selectedForeground={foreground} />
       </View>
 
       {hasText && (
@@ -176,7 +187,7 @@ const RadioComponent = function Radio<Value extends string = string>({
           {description && (
             <Text
               variant={sizeConfig.description}
-              style={{ color: neutral[500], marginTop: label ? DESCRIPTION_GAP : 0 }}
+              style={{ color: theme.colors.textSecondary, marginTop: label ? DESCRIPTION_GAP : 0 }}
             >
               {description}
             </Text>
@@ -200,16 +211,18 @@ export const Radio = memo(RadioComponent) as typeof RadioComponent;
 const RadioGroupComponent = function RadioGroup<Value extends string = string>({
   label,
   value,
-  onValueChange,
+  onValueChange: onValueChangeProp,
+  onSelect,
   options,
-  size = 'medium',
+  size: sizeProp,
   disabled = false,
-  color,
+  tone: toneProp,
   style,
   labelStyle,
   variant = 'default',
   testID,
 }: RadioGroupProps<Value>) {
+  const onValueChange = onValueChangeProp ?? onSelect;
   // The group is one control made of several, so a `Field` around it names the
   // GROUP and disables every option — `multiple` is the field's side of that
   // (`docs/field.mdx`), and each radio keeps its own id and its own name.
@@ -217,6 +230,8 @@ const RadioGroupComponent = function RadioGroup<Value extends string = string>({
   // own — so it goes in as the caller's name and outranks the field's.
   const field = useFieldMembership({ accessibilityLabel: label, disabled });
   const isDisabled = field.disabled;
+  const { size: scopedSize, tone } = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
+  const size = scopedSize;
   return (
     <View
       style={[{ gap: space.sm }, style]}
@@ -232,25 +247,25 @@ const RadioGroupComponent = function RadioGroup<Value extends string = string>({
           <RadioCard
             key={option.value}
             value={option.value}
-            selected={option.value === value}
-            onSelect={onValueChange}
+            checked={option.value === value}
+            onValueChange={onValueChange}
             title={option.label ?? option.value}
             description={option.description}
             disabled={isDisabled || option.disabled === true}
-            color={color}
+            tone={tone}
             testID={option.testID}
           />
         ) : (
         <Radio
           key={option.value}
           value={option.value}
-          selected={option.value === value}
-          onSelect={onValueChange}
+          checked={option.value === value}
+          onValueChange={onValueChange}
           label={option.label}
           description={option.description}
           size={size}
           disabled={isDisabled || option.disabled === true}
-          color={color}
+          tone={tone}
           labelStyle={labelStyle}
           testID={option.testID}
         />

package/src/radio/RadioCard.tsx

@@ -1,12 +1,14 @@
+import { useRingOffsetStyle } from '../styles/surface-levels';
+import { useBloomAppearance } from '../appearance';
+import { resolveBloomColors } from '../appearance/colors';
 import React, { memo, useCallback, useMemo } from 'react';
 import { Platform, Pressable, View } from 'react-native';
 
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { useInteractionState } from '../hooks/use-interaction-state';
-import { mixColor, resolveButtonRamps } from '../button/shared';
+import { resolveButtonRamps } from '../button/shared';
 import { focusRingShadow, useInteractiveWebCss } from '../styles/interactive-web-css';
-import { useRingOffsetStyle } from '../styles/surface-levels';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { webDataSet } from '../styles/web-data';
 import { RadioIndicator } from '../radio-indicator';
@@ -60,42 +62,46 @@ ${CARD} {
 
 const RadioCardComponent = function RadioCard<Value extends string = string>({
   value,
+  checked: checkedProp,
   selected,
+  onValueChange: onValueChangeProp,
   onSelect,
   title,
   description,
   disabled = false,
-  color,
+  tone: toneProp,
   style,
   accessibilityLabel,
   testID,
 }: RadioCardProps<Value>) {
+  const onValueChange = onValueChangeProp ?? onSelect;
+  const checked = checkedProp ?? selected ?? false;
   const theme = useTheme();
   const ringOffset = useRingOffsetStyle();
+  const { tone } = useBloomAppearance({ tone: toneProp }, {size: 'md', tone: 'accent'});
+  const { background: color, foreground } = resolveBloomColors(theme.colors, tone, 'solid');
   useInteractiveWebCss(STYLE_ID, CARD_CSS);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const highlighted = !disabled && (hovered || pressed);
 
   const paint = useMemo(() => {
-    const { accent, neutral: n } = resolveButtonRamps(theme);
-    const dark = theme.isDark;
+    const { accent } = resolveButtonRamps(theme);
     return {
-      border: dark ? n[700] : n[200],
-      background: dark ? n[800] : theme.colors.card,
-      // Dark `color-mix(in srgb, neutral-700 60%, transparent)` over the page.
-      backgroundHover: dark ? mixColor(theme.colors.background, n[700], 0.6) : n[100],
+      border: theme.colors.borderLight,
+      background: theme.colors.card,
+        backgroundHover: theme.colors.backgroundSecondary,
       title: theme.colors.text,
-      description: n[500],
+      description: theme.colors.textSecondary,
       ring: color ?? accent[500],
     };
   }, [theme, color]);
 
   const handlePress = useCallback(() => {
     // A radio has no "off": re-choosing the chosen card is a no-op.
-    if (disabled || selected) return;
-    onSelect(value);
-  }, [disabled, selected, onSelect, value]);
+    if (disabled || checked) return;
+    onValueChange?.(value);
+  }, [disabled, checked, onValueChange, value]);
 
   const cardStyle: WebCssStyle = {
     flexDirection: 'row',
@@ -135,7 +141,7 @@ const RadioCardComponent = function RadioCard<Value extends string = string>({
       disabled={disabled}
       accessibilityRole="radio"
       // `aria-checked` is the one spelling both platforms honour — see `Radio`.
-      aria-checked={selected}
+      aria-checked={checked}
       accessibilityLabel={accessibilityLabel ?? title}
       accessibilityHint={description}
       testID={testID}
@@ -155,7 +161,7 @@ const RadioCardComponent = function RadioCard<Value extends string = string>({
           {...webDataSet({ bloomRadioCardDot: '' })}
           style={{ borderRadius: DOT_SIZE / 2 }}
         >
-          <RadioIndicator selected={selected} size={DOT_SIZE} selectedColor={color} />
+          <RadioIndicator selected={checked} size={DOT_SIZE} selectedColor={color} selectedForeground={foreground} />
         </View>
       </View>
     </Pressable>