@oxy.so/bloom 3.6.0 → 4.0.0

package/src/lead-score/shared.ts

@@ -0,0 +1,138 @@
+/**
+ * The pure half of `LeadScoreCard`: which band a score falls in, how a signed
+ * contribution reads, and what the card's two panels are painted with.
+ *
+ * Pure so the suite can walk the boundaries without rendering — a band that
+ * flips one point early is invisible in a screenshot and obvious in a table.
+ */
+import { resolveMeterColors } from '../stat-bar/shared';
+import { mixColors } from '../styles/color-contrast';
+import {
+  hairlineOn,
+  surfaceFillOn,
+  surfaceTextOn,
+  type SurfaceTextPaint,
+} from '../styles/surface-levels';
+import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
+import { parseRgba } from '../theme/color-utils';
+import type { Theme } from '../theme/types';
+import { LEAD_SCORE_THRESHOLDS } from './constants';
+import type { LeadScoreBand } from './types';
+
+export interface LeadScorePaint {
+  /** The card's own fill — what both panels are stepped off. */
+  surface: string;
+  /**
+   * The TINTED header panel: the band tone's subtle member from
+   * `resolveAccentColors`, FLATTENED over the card behind it. Never the fill
+   * colour with an alpha appended to it — react-native-web reads that back as
+   * fully opaque (`docs/badge.mdx`).
+   */
+  header: string;
+  /** The neutral panel under it, one surface step off the card. */
+  panel: string;
+  /** The rule between two factor rows, read off the panel it divides. */
+  rowRule: string;
+  /**
+   * The ring's unearned arc. Read off the HEADER, not from `stat-bar`'s
+   * default rail: that rail is a neutral computed for the page, and on a tinted
+   * panel it reads as a foreign grey ring rather than as the empty part of this
+   * one.
+   */
+  track: string;
+  /**
+   * The earned arc, and a positive factor's mark: `stat-bar`'s own accent, so
+   * this card's measurement is the same object as every other measurement in
+   * the library. A status colour says something else — a green ring claims
+   * "healthy", which is not the claim "82 of 100" makes.
+   */
+  fill: string;
+  /**
+   * A negative factor's mark: the quiet graphical rung read off the PANEL it is
+   * drawn on, so it clears that fill at 3:1 rather than being a ramp stop
+   * picked by eye. `chart-cards`' `neutralSeries` is the obvious candidate and
+   * is the wrong one — it is `neutral-800` in dark, which is the panel's own
+   * neighbourhood, and the mark would disappear.
+   */
+  negativeMark: string;
+  /** Text rungs on the tinted header. */
+  headerText: SurfaceTextPaint;
+  /** Text rungs on the neutral panel. They are NOT the header's. */
+  panelText: SurfaceTextPaint;
+}
+
+/**
+ * A translucent token as it is actually PAINTED: composited over the fill
+ * behind it.
+ *
+ * The `*Subtle` members are `rgba()` on purpose — a tint IS an alpha of a fill
+ * — and painting one renders correctly. What does NOT work is DERIVING off it:
+ * every reader in `styles/color-contrast.ts` treats a colour as opaque, so a
+ * text rung or a hairline read from `rgba(16 185 129 / 0.24)` is computed
+ * against solid emerald and lands on a panel that is nothing like it. Measured
+ * on this card before it was flattened: the header's secondary label came back
+ * at 1.96:1 against its own panel in dark mode.
+ *
+ * So the tint is composited ONCE, here, and the flattened colour is what the
+ * panel paints and what every rung is read off — the two can then never
+ * disagree. This is parse-and-re-emit, not concatenation, and it is the same
+ * move `chip/hue-colors.ts` makes for a translucent hue.
+ */
+export function flattenOver(parent: string, translucent: string): string {
+  const top = parseRgba(translucent);
+  if (top === null) return translucent;
+  return mixColors(parent, `rgb(${top.r} ${top.g} ${top.b})`, top.a);
+}
+
+export function resolveLeadScorePaint(
+  theme: Theme,
+  surface: string,
+  tone: AccentTone,
+): LeadScorePaint {
+  const header = flattenOver(surface, resolveAccentColors(theme.colors, tone, 'subtle').background);
+  const panel = surfaceFillOn(theme, surface);
+  return {
+    surface,
+    header,
+    panel,
+    rowRule: hairlineOn(theme, panel),
+    track: hairlineOn(theme, header),
+    fill: resolveMeterColors(theme).fill,
+    negativeMark: surfaceTextOn(theme, panel).textGraphical,
+    headerText: surfaceTextOn(theme, header),
+    panelText: surfaceTextOn(theme, panel),
+  };
+}
+
+/**
+ * The band a score falls in, by FRACTION of the scale. The boundaries are
+ * inclusive upward: exactly 0.4 is warm and exactly 0.7 is hot, so a score
+ * sitting on a threshold reads as having reached it.
+ *
+ * A non-positive `max` has no scale to divide, so the score is `cold` rather
+ * than `NaN` — a card that renders is better than one that throws over data it
+ * did not choose.
+ */
+export function resolveLeadScoreBand(score: number, max: number): LeadScoreBand {
+  if (!(max > 0) || Number.isNaN(score)) return 'cold';
+  const fraction = Math.min(Math.max(score / max, 0), 1);
+  if (fraction >= LEAD_SCORE_THRESHOLDS.hot) return 'hot';
+  if (fraction >= LEAD_SCORE_THRESHOLDS.warm) return 'warm';
+  return 'cold';
+}
+
+/** A signed contribution as it is drawn and announced: `+12`, `-6`, `0`. */
+export function formatContribution(contribution: number): string {
+  return contribution > 0 ? `+${contribution}` : String(contribution);
+}
+
+/**
+ * The row's reading line: the label, and the detail after it when there is one.
+ *
+ * One string rather than two nodes, because the row truncates as a SENTENCE —
+ * two independently shrinking texts drop the label to "Fits the ide…" while the
+ * detail beside it still has room.
+ */
+export function factorLine(label: string, detail?: string): string {
+  return detail === undefined || detail === '' ? label : `${label}: ${detail}`;
+}

package/src/lead-score/types.ts

@@ -0,0 +1,61 @@
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * How good the lead is, as a BAND rather than a colour. The tone each band
+ * draws in lives in `constants.ts`, so a card never names a red or a blue and
+ * the band survives every preset and both modes.
+ */
+export type LeadScoreBand = 'cold' | 'warm' | 'hot';
+
+/** One thing the score is made of, positive or negative. */
+export interface LeadScoreFactor {
+  /** Stable key. Defaults to the label. */
+  id?: string;
+  label: string;
+  /**
+   * SIGNED points. A positive factor pushes the score up and draws in the
+   * positive tone; a negative one pulls it down and draws in the negative tone.
+   * Zero is drawn as an empty bar rather than hidden — "this counted for
+   * nothing" is a fact about the lead.
+   */
+  contribution: number;
+  /** A quiet line under the label — "Opened 4 of 5 emails". */
+  detail?: string;
+}
+
+/** Which way the score moved against the period before this one. */
+export interface LeadScoreTrend {
+  /** PRE-FORMATTED ("+8 vs last week"). The card does no arithmetic. */
+  label: string;
+  direction: 'up' | 'down' | 'flat';
+}
+
+export interface LeadScoreCardProps {
+  score: number;
+  /** The full scale. Default 100. */
+  max?: number;
+  /** Overrides the band the score falls in — for an app with its own thresholds. */
+  band?: LeadScoreBand;
+  /** Overrides the band's own word. */
+  bandLabel?: string;
+  /**
+   * REQUIRED. The ring draws a number and names no subject, and no amount of
+   * content names a `progressbar` — so without this the card announces
+   * "progress bar, 72%" and never says whose lead it is.
+   */
+  accessibilityLabel: string;
+  /**
+   * `aria-valuetext` — the reading a screen reader says instead of the raw
+   * number ("72 of 100, hot"), which is otherwise announced as a percentage.
+   */
+  valueText?: string;
+  /** The heading over the ring. Default `"Lead score"`. */
+  title?: string;
+  /** What the score is made of. */
+  factors?: readonly LeadScoreFactor[];
+  /** The heading over the factors. Default `"What it is made of"`. */
+  factorsLabel?: string;
+  trend?: LeadScoreTrend;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/link-preview/LinkPreviewCard.tsx

@@ -99,7 +99,7 @@ const LinkPreviewCardComponent: React.FC<LinkPreviewCardProps> = ({
 
   return (
     <Card
-      variant="outlined"
+      appearance="outline"
       radius="radius-20"
       className={className}
       style={style}

package/src/list/VirtualList.tsx

@@ -19,7 +19,9 @@
  * an identical, generic, strongly-typed surface.
  */
 import * as React from 'react';
-import { FlatList, type ListRenderItemInfo } from 'react-native';
+import Animated from 'react-native-reanimated';
+import { useScreenScroll } from '../screen/use-screen-scroll';
+import { FlatList, StyleSheet, type ListRenderItemInfo } from 'react-native';
 
 import type {
   VirtualListHandle,
@@ -27,13 +29,15 @@ import type {
   VirtualListSlot,
 } from './types';
 
+const AnimatedFlatList = Animated.createAnimatedComponent(FlatList) as unknown as typeof FlatList;
+
 function renderSlot(slot: VirtualListSlot): React.ReactElement | null {
   if (!slot) return null;
   return typeof slot === 'function' ? slot() : slot;
 }
 
 function VirtualListNativeInner<T>(
-  props: VirtualListProps<T>,
+  props: VirtualListProps<T> & { screenBinding?: ReturnType<typeof useScreenScroll> },
   ref: React.ForwardedRef<VirtualListHandle>,
 ) {
   const {
@@ -82,7 +86,7 @@ function VirtualListNativeInner<T>(
   );
 
   return (
-    <FlatList<T>
+    <AnimatedFlatList<T>
       ref={listRef}
       data={data ?? undefined}
       renderItem={renderFlatItem}
@@ -91,6 +95,8 @@ function VirtualListNativeInner<T>(
       ListEmptyComponent={renderSlot(ListEmptyComponent)}
       ListFooterComponent={renderSlot(ListFooterComponent)}
       style={style}
+      onScroll={props.screenBinding?.onScroll}
+      scrollEventThrottle={16}
       contentContainerStyle={contentContainerStyle}
       onEndReached={onEndReached ? () => onEndReached() : undefined}
       onEndReachedThreshold={onEndReachedThreshold}
@@ -105,10 +111,14 @@ function VirtualListNativeInner<T>(
   );
 }
 
-const VirtualList = React.forwardRef(VirtualListNativeInner) as <T>(
-  props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> },
-) => React.ReactElement;
-
+const PlainVirtualList = React.forwardRef(VirtualListNativeInner) as <T>(props: VirtualListProps<T> & { screenBinding?: ReturnType<typeof useScreenScroll>; ref?: React.Ref<VirtualListHandle> }) => React.ReactElement;
+function ScreenVirtualList<T>({ forwardedRef, ...props }: VirtualListProps<T> & { forwardedRef: React.ForwardedRef<VirtualListHandle> }) {
+  const binding = useScreenScroll(props.screen);
+  const padding = StyleSheet.flatten(props.contentContainerStyle);
+  return <PlainVirtualList {...props} ref={forwardedRef} screenBinding={binding} style={[props.style, props.screen?.restoration?.restorePending ? { opacity: 0 } : null]} contentContainerStyle={[props.contentContainerStyle, { paddingTop: binding.contentInsets.top + Number(padding?.paddingTop ?? padding?.padding ?? 0), paddingBottom: binding.contentInsets.bottom + Number(padding?.paddingBottom ?? padding?.padding ?? 0) }]} />;
+}
+const VirtualList = React.forwardRef(function VirtualList<T>(props: VirtualListProps<T>, ref: React.ForwardedRef<VirtualListHandle>) {
+  return props.screen ? <ScreenVirtualList {...props} forwardedRef={ref} /> : <PlainVirtualList {...props} ref={ref} />;
+}) as <T>(props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> }) => React.ReactElement;
 export default VirtualList;
-
 export { VirtualList };

package/src/list/VirtualList.web.tsx

@@ -35,6 +35,7 @@
  * this file via the `"browser"` export condition in `package.json`.
  */
 import * as React from 'react';
+import { useScreenWindowScroll } from '../screen/use-screen-window-scroll';
 import { type CSSProperties } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { useWindowVirtualizer } from '@tanstack/react-virtual';
@@ -245,10 +246,14 @@ function VirtualListWebInner<T>(
   );
 }
 
-const VirtualList = React.forwardRef(VirtualListWebInner) as <T>(
-  props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> },
-) => React.ReactElement;
-
+const PlainVirtualList = React.forwardRef(VirtualListWebInner) as <T>(props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> }) => React.ReactElement;
+function ScreenVirtualList<T>({ forwardedRef, ...props }: VirtualListProps<T> & { forwardedRef: React.ForwardedRef<VirtualListHandle> }) {
+  const binding = useScreenWindowScroll(props.screen);
+  const padding = StyleSheet.flatten(props.contentContainerStyle);
+  return <PlainVirtualList {...props} ref={forwardedRef} style={[props.style, props.screen?.restoration?.restorePending ? { opacity: 0 } : null]} contentContainerStyle={[props.contentContainerStyle, { paddingTop: binding.contentInsets.top + Number(padding?.paddingTop ?? padding?.padding ?? 0), paddingBottom: binding.contentInsets.bottom + Number(padding?.paddingBottom ?? padding?.padding ?? 0) }]} />;
+}
+const VirtualList = React.forwardRef(function VirtualList<T>(props: VirtualListProps<T>, ref: React.ForwardedRef<VirtualListHandle>) {
+  return props.screen ? <ScreenVirtualList {...props} forwardedRef={ref} /> : <PlainVirtualList {...props} ref={ref} />;
+}) as <T>(props: VirtualListProps<T> & { ref?: React.Ref<VirtualListHandle> }) => React.ReactElement;
 export default VirtualList;
-
 export { VirtualList };

package/src/list/types.ts

@@ -30,6 +30,8 @@ export type VirtualListSlot =
  * explicitly (no index signature, no `any`).
  */
 export interface VirtualListProps<T> {
+  /** Opt into the nearest Screen geometry/motion without wrapping this list in a ScrollView. */
+  screen?: import('../screen/types').ScreenScrollOptions;
   /** Row data. */
   data?: readonly T[] | null;
   /** Renders one row. */

package/src/listing-actions/parts.tsx

@@ -106,7 +106,6 @@ export function StatusMessage({
   testID?: string;
 }) {
   const palette = useActionPalette();
-  const { neutral } = useMemo(() => resolveButtonRamps(palette.theme), [palette.theme]);
   return (
     <View
       testID={testID}
@@ -120,7 +119,7 @@ export function StatusMessage({
           paddingLeft: 12,
           paddingRight: 12,
           borderRadius: BOOKING_FIELD_RADIUS,
-          backgroundColor: palette.theme.isDark ? neutral[700] : neutral[100],
+          backgroundColor: palette.theme.colors.backgroundSecondary,
         },
         style,
       ]}
@@ -319,8 +318,7 @@ export function PrincipalDonut({
 }) {
   const palette = useActionPalette();
   const tones = useMemo(() => resolveDonutTones(palette.theme), [palette.theme]);
-  const { neutral } = useMemo(() => resolveButtonRamps(palette.theme), [palette.theme]);
-  const track = palette.theme.isDark ? neutral[700] : mixColor(neutral[100], neutral[200], 0.5);
+  const track = palette.theme.colors.backgroundTertiary;
   const c = size / 2;
   const outer = c;
   const inner = c - DONUT_THICKNESS;

package/src/listing-card/shared.ts

@@ -82,7 +82,7 @@ export function resolveListingCardPaint(theme: Theme): ListingCardPaint {
   const red = colorRamp(theme.colors.error, DANGER_TABLE);
   const menu = resolveMenuPalette(theme);
   return {
-    photoPlaceholder: theme.isDark ? mixColor(n[800], n[700], 0.6) : n[100],
+    photoPlaceholder: theme.colors.backgroundTertiary,
     onMedia: n[50],
     scrim: n[950],
     favorite: red[500],

package/src/listing-details/FloorPlan.tsx

@@ -65,7 +65,7 @@ function PlanTile({ plan, uri, name, aspectRatio, onPress, testID }: PlanTilePro
     aspectRatio,
     borderRadius: 16,
     borderWidth: 1,
-    borderColor: onPress && hovered ? n[400] : palette.cardBorder,
+    borderColor: onPress && hovered ? theme.colors.border : palette.cardBorder,
     backgroundColor: n[50],
     overflow: 'hidden',
     '--bloom-listing-ring': palette.ring,

package/src/listing-details/shared.ts

@@ -46,17 +46,17 @@ export function resolveListingPalette(theme: Theme): ListingPalette {
     text: c.text,
     textSecondary: c.textSecondary,
     muted: c.textTertiary,
-    hairline: dark ? n[800] : n[200],
-    card: dark ? n[900] : c.card,
-    cardBorder: dark ? n[800] : n[200],
-    tile: dark ? n[800] : n[100],
-    hover: dark ? n[800] : n[100],
+    hairline: theme.colors.border,
+    card: c.card,
+    cardBorder: theme.colors.border,
+    tile: theme.colors.backgroundSecondary,
+    hover: theme.colors.backgroundSecondary,
     scrim: n[950],
-    starEmpty: dark ? n[700] : n[300],
+    starEmpty: c.textTertiary,
     ring: accent[500],
     badge: c.primary,
     badgeForeground: c.primaryForeground,
-    responseSurface: dark ? n[900] : n[50],
+    responseSurface: theme.colors.backgroundSecondary,
   };
 }
 

package/src/listing-editor/AddressPrecisionPicker.tsx

@@ -64,13 +64,13 @@ interface MapPaint {
 }
 
 function resolveMapPaint(theme: Theme): MapPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
-  const ground = dark ? n[800] : n[100];
+  const ground = theme.colors.backgroundSecondary;
   return {
     ground,
-    block: dark ? mixColor(n[800], n[700], 0.5) : n[200],
-    road: dark ? n[900] : n[50],
+    block: theme.colors.backgroundTertiary,
+    road: theme.colors.background,
     accent: accent[500],
     accentWash: mixColor(ground, accent[500], 0.2),
     pin: theme.colors.text,

package/src/listing-editor/ListingPreviewPane.tsx

@@ -47,7 +47,6 @@ function ListingPreviewPaneComponent({
   testID,
 }: ListingPreviewPaneProps) {
   const theme = useTheme();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const [mode, setMode] = useControllableState<ListingPreviewMode>({
     value: modeProp,
     defaultValue: defaultMode,
@@ -65,7 +64,7 @@ function ListingPreviewPaneComponent({
           paddingLeft: 20,
           paddingRight: 20,
           borderRadius: 20,
-          backgroundColor: theme.isDark ? neutral[900] : neutral[50],
+          backgroundColor: theme.colors.backgroundSecondary,
         },
         style,
       ]}
@@ -115,9 +114,8 @@ function ListingPreviewPaneComponent({
 function PagePreview({ listing }: { listing: ListingPreviewData }) {
   const theme = useTheme();
   const resolver = useImageResolver();
-  const { neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const cover = listing.photos[0] ? resolvePhoto(listing.photos[0], resolver, listing.photoVariant) : undefined;
-  const hairline = theme.isDark ? neutral[700] : neutral[200];
+  const hairline = theme.colors.border;
 
   return (
     <View
@@ -131,7 +129,7 @@ function PagePreview({ listing }: { listing: ListingPreviewData }) {
         overflow: 'hidden',
       }}
     >
-      <View style={{ width: '100%', aspectRatio: 4 / 3, backgroundColor: theme.isDark ? neutral[800] : neutral[100] }}>
+      <View style={{ width: '100%', aspectRatio: 4 / 3, backgroundColor: theme.colors.backgroundSecondary }}>
         {cover ? (
           <Image source={{ uri: cover }} resizeMode="cover" style={{ width: '100%', height: '100%' }} />
         ) : null}

package/src/listing-editor/ListingQualityMeter.tsx

@@ -81,14 +81,14 @@ interface QualityPaint {
 }
 
 function resolveQualityPaint(theme: Theme): QualityPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
     text: theme.colors.text,
     textSecondary: theme.colors.textSecondary,
-    done: theme.colors.success,
-    todo: n[400],
-    wash: dark ? n[900] : n[50],
+    done: theme.colors.successSubtleForeground,
+    todo: theme.colors.textSecondary,
+    wash: theme.colors.backgroundSecondary,
     ring: accent[500],
   };
 }

package/src/listing-editor/SelectionCard.tsx

@@ -78,23 +78,23 @@ export interface SelectionPaint {
 }
 
 export function resolveSelectionPaint(theme: Theme): SelectionPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
     fill: dark ? 'transparent' : theme.colors.card,
-    border: dark ? n[700] : n[200],
-    borderHover: dark ? n[500] : n[400],
+    border: theme.colors.border,
+    borderHover: theme.colors.border,
     borderSelected: theme.colors.text,
-    wash: dark ? n[900] : n[50],
-    iconTile: dark ? n[800] : n[100],
+    wash: theme.colors.backgroundSecondary,
+    iconTile: theme.colors.backgroundSecondary,
     icon: theme.colors.text,
     text: theme.colors.text,
     textSecondary: theme.colors.textSecondary,
-    indicatorRing: dark ? n[600] : n[300],
+    indicatorRing: theme.colors.border,
     page: theme.colors.background,
-    hairline: dark ? n[800] : n[200],
+    hairline: theme.colors.border,
     ring: accent[500],
-    error: theme.colors.error,
+    error: theme.colors.errorSubtleForeground,
   };
 }
 

package/src/loading/Loading.tsx

@@ -1,3 +1,6 @@
+import { normalizeBloomSize } from '../appearance/legacy';
+import { resolveBloomColors } from '../appearance/colors';
+import { useBloomAppearance } from '../appearance';
 import React, { memo, useEffect, useMemo } from 'react';
 import { View, Text, StyleSheet, type DimensionValue } from 'react-native';
 import Animated, {
@@ -18,14 +21,16 @@ import type {
 } from './types';
 
 const SIZE_CONFIG = {
-  small: { spinner: 20, text: 13 },
-  medium: { spinner: 24, text: 15 },
-  large: { spinner: 44, text: 16 },
+  xs: { spinner: 16, text: 12 },
+  sm: { spinner: 20, text: 13 },
+  md: { spinner: 24, text: 15 },
+  lg: { spinner: 44, text: 16 },
 } as const;
 
 const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
-  size = 'medium',
+  size: sizeProp,
   color,
+  tone: toneProp,
   className,
   text,
   textStyle,
@@ -36,9 +41,10 @@ const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
   const sizeConfig = SIZE_CONFIG[size];
   const effectiveIconSize = iconSize ?? sizeConfig.spinner;
-  const spinnerColor = className ? 'currentColor' : (color ?? theme.colors.primary);
+  const spinnerColor = className ? 'currentColor' : (color ?? resolveBloomColors(theme.colors, tone, 'solid').background);
   const textColor = color ?? theme.colors.textSecondary;
 
   return (
@@ -60,8 +66,9 @@ const SpinnerLoading: React.FC<SpinnerLoadingProps> = ({
 };
 
 const TopLoading: React.FC<TopLoadingProps> = ({
-  size = 'medium',
+  size: sizeProp,
   color,
+  tone: toneProp,
   style,
   showLoading = true,
   iconSize,
@@ -70,10 +77,11 @@ const TopLoading: React.FC<TopLoadingProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
   const sizeConfig = SIZE_CONFIG[size];
   const effectiveIconSize = iconSize ?? sizeConfig.spinner;
   const targetHeight = Math.max(0, effectiveIconSize + sizeConfig.spinner + heightOffset);
-  const spinnerColor = color ?? theme.colors.primary;
+  const spinnerColor = color ?? resolveBloomColors(theme.colors, tone, 'solid').background;
 
   const height = useSharedValue(showLoading ? targetHeight : 0);
   const opacity = useSharedValue(showLoading ? 1 : 0);
@@ -111,8 +119,9 @@ const TopLoading: React.FC<TopLoadingProps> = ({
 };
 
 const InlineLoading: React.FC<InlineLoadingProps> = ({
-  size = 'small',
+  size: sizeProp,
   color,
+  tone: toneProp,
   text,
   style,
   textStyle,
@@ -120,13 +129,14 @@ const InlineLoading: React.FC<InlineLoadingProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  const {size, tone} = useBloomAppearance({size: normalizeBloomSize(sizeProp), tone: toneProp}, {size: 'md', tone: 'accent'});
   const sizeConfig = SIZE_CONFIG[size];
-  const spinnerColor = color ?? theme.colors.primary;
+  const spinnerColor = color ?? resolveBloomColors(theme.colors, tone, 'solid').background;
   const textColor = theme.colors.textSecondary;
 
   return (
     <View style={[styles.inlineContainer, style]} testID={testID}>
-      {spinnerIcon ?? <SpinnerIcon size={SIZE_CONFIG.small.spinner} color={spinnerColor} />}
+      {spinnerIcon ?? <SpinnerIcon size={sizeConfig.spinner} color={spinnerColor} />}
       {text && (
         <Text
           style={[