@oxy.so/bloom 3.6.0 → 4.0.0

package/src/contact-card/shared.ts

@@ -0,0 +1,128 @@
+/**
+ * What `ContactProfileCard` paints, and the pure helpers the card and its tests
+ * both read.
+ *
+ * The paint is RELATIVE: every colour is computed from the fill the card's
+ * content actually lands on (`styles/surface-levels.ts`), because the same
+ * component is a `Card` at comfortable density and a bare row on whatever a
+ * list is painted at compact — two different parents, one component. A ramp
+ * stop picked here would be right for one of them and invisible on the other.
+ */
+import { interactiveWebCss } from '../styles/interactive-web-css';
+import { hairlineOn, surfaceFillOn, surfaceTextOn } from '../styles/surface-levels';
+import type { SurfaceTextPaint } from '../styles/surface-levels';
+import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
+import type { Theme } from '../theme/types';
+import { CONTACT_NARROW_WIDTH } from './constants';
+import type { ContactProfileCardProps } from './types';
+
+export interface ContactPaint {
+  /** The fill the content lands on — a card's, or the ambient one at compact. */
+  surface: string;
+  /** The rule between the meta row and the footer. */
+  hairline: string;
+  /**
+   * The next fill UP: a stat tile, the neutral band behind a coverless card,
+   * the wash a bare press target takes under a pointer. One step, read off the
+   * real parent.
+   */
+  tile: string;
+  text: string;
+  textSecondary: string;
+  textTertiary: string;
+  /** The text rungs that clear AA on a TILE, which is not the card's fill. */
+  tileText: SurfaceTextPaint;
+  ring: string;
+}
+
+export function resolveContactPaint(theme: Theme, surface: string): ContactPaint {
+  const text = surfaceTextOn(theme, surface);
+  const tile = surfaceFillOn(theme, surface);
+  return {
+    surface,
+    hairline: hairlineOn(theme, surface),
+    tile,
+    text: text.text,
+    textSecondary: text.textSecondary,
+    textTertiary: text.textTertiary,
+    tileText: surfaceTextOn(theme, tile),
+    ring: theme.colors.primary,
+  };
+}
+
+/**
+ * The cover band's wash when the caller gave no image.
+ *
+ * It is the tone's SUBTLE member through `resolveAccentColors` — the tint the
+ * palette already ships, sized to carry that tone's own text — never the fill
+ * colour with an alpha appended to it, which is the failure `docs/badge.mdx`
+ * describes and which reads as fully opaque through react-native-web.
+ */
+export function contactCoverWash(theme: Theme, tone: AccentTone = 'primary'): string {
+  return resolveAccentColors(theme.colors, tone, 'subtle').background;
+}
+
+/**
+ * Whether the channel controls carry their LABELS at this card width.
+ *
+ * A pure function of the measured width so the decision can be walked at its
+ * boundary without a layout pass — `onLayout` never fires in jsdom, and a
+ * threshold that is only exercised in a browser is a threshold nothing pins.
+ * Before the first layout the width is `null` and the labels are ON: a card
+ * that has not been measured is being rendered by a caller who has not
+ * constrained it, and the label is the better of the two guesses.
+ */
+export function contactActionsAreLabelled(width: number | null): boolean {
+  return width === null || width >= CONTACT_NARROW_WIDTH;
+}
+
+/**
+ * The meta line under the name: a person reads "Head of Ops · Northwind", a
+ * company reads its industry alone — a company has no company.
+ */
+export function contactMetaLine(
+  props: Pick<ContactProfileCardProps, 'kind' | 'role' | 'company'>,
+): string {
+  const parts = [props.role, props.kind === 'company' ? undefined : props.company];
+  return parts.filter((part): part is string => typeof part === 'string' && part !== '').join(' · ');
+}
+
+/** Joins the non-empty parts of an accessible name. */
+export function joinContactName(
+  parts: ReadonlyArray<string | false | null | undefined>,
+  separator = ', ',
+): string {
+  return parts.filter((part): part is string => typeof part === 'string' && part !== '').join(separator);
+}
+
+/**
+ * The tiles, laid out: one row of every tile when the card is wide, and two
+ * columns of pairs when it is not. An odd tile keeps its half of the grid
+ * rather than stretching across it.
+ */
+export function contactStatRows(count: number, labelled: boolean): number[][] {
+  const all = Array.from({ length: count }, (_, index) => index);
+  if (labelled) return count > 0 ? [all] : [];
+  const rows: number[][] = [];
+  for (let i = 0; i < count; i += 2) rows.push(i + 1 < count ? [i, i + 1] : [i]);
+  return rows;
+}
+
+// ---------------------------------------------------------------------------
+//  Keyboard focus on web
+//
+//  The identity block is a react-native-web `Pressable`: focusable, with the
+//  outline reset, so without a `:focus-visible` rule a keyboard user tabs
+//  through an invisible stop. Inline styles carry no pseudo-classes, so the rule
+//  lives in an adopted sheet hanging off a `dataSet` attribute, and the ring
+//  colour is a per-instance custom property because it is a resolved token.
+// ---------------------------------------------------------------------------
+
+export const CONTACT_STYLE_ID = 'bloom-contact-card-web-css';
+
+export const CONTACT_WEB_CSS = interactiveWebCss({
+  selector: '[data-bloom-contact-subject]',
+  varPrefix: 'bloom-contact',
+  reset: 'none',
+  transition: 'background-color 150ms ease',
+});

package/src/contact-card/types.ts

@@ -0,0 +1,163 @@
+import type { ReactNode } from 'react';
+import type { ImageSourcePropType, StyleProp, ViewStyle } from 'react-native';
+
+import type { BloomIconComponent } from '../icons/icon-component';
+import type { AccentTone } from '../theme/accent-colors';
+
+/**
+ * WHO the card is about. It is data rather than a second component: a company
+ * card is the same card with a logo instead of a photo, an industry instead of a
+ * job title, and the people at it instead of the account it belongs to.
+ */
+export type ContactSubjectKind = 'person' | 'company';
+
+/**
+ * `comfortable` is the card — a cover band, a 72 mark, the figure, the tiles,
+ * the chips, the people and the owner. `compact` is the ROW form for a list: no
+ * surface and no cover (the list owns both), one line of identity, one meta
+ * line, and the channel actions as glyphs beside them.
+ */
+export type ContactProfileDensity = 'comfortable' | 'compact';
+
+/** The ways a sales team reaches a customer. Each is an ACTION, never a string of text. */
+export type ContactChannelKind = 'email' | 'phone' | 'chat' | 'meeting' | 'video' | 'website';
+
+export interface ContactChannel {
+  kind: ContactChannelKind;
+  /**
+   * What the action's name ends with — "Email {this}". Defaults to the card's
+   * `name`, which is the usual reading ("Call Nora Vance").
+   */
+  label?: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  /** Overrides the kind's glyph. The kind still decides the verb in the name. */
+  icon?: BloomIconComponent;
+  testID?: string;
+}
+
+/** Who on the team owns the relationship. */
+export interface ContactOwner {
+  name: string;
+  /** A URL or an `ImageResolver` id. Without it the avatar draws initials. */
+  avatar?: string;
+  /** The word before the name. Default `"Owner"`. */
+  label?: string;
+}
+
+/** One of the people at a company, or a colleague of a person. */
+export interface ContactProfilePerson {
+  id?: string;
+  name: string;
+  /** A URL or an `ImageResolver` id. */
+  avatar?: string;
+}
+
+/**
+ * One tile of the stat row: the pre-formatted figure over what it counts.
+ *
+ * `value` first and `label` under it, because the row is SCANNED for numbers —
+ * the label is what you read once the number has stopped you.
+ */
+export interface ContactProfileStat {
+  /** Pre-formatted ("12", "€248,000", "6 days ago"). The app owns the arithmetic. */
+  value: string;
+  /** What it counts ("Open deals", "Pipeline", "Last touch"). */
+  label: string;
+}
+
+/**
+ * The one figure the record is opened for, over the tiles: a quiet label, the
+ * number at title size, and an optional tinted delta beside it.
+ */
+export interface ContactProfileHeadline {
+  /** The quiet label over the figure ("Open pipeline"). */
+  label: string;
+  /** Pre-formatted ("€248,000"). */
+  value: string;
+  /** The pill beside it ("+2 deals this month"). No pill when omitted. */
+  delta?: string;
+  /** The delta's tone. Default `success`. */
+  deltaTone?: AccentTone;
+}
+
+/** A short status word beside the name — "Customer", "Do not contact", "New". */
+export interface ContactStatus {
+  label: string;
+  /** Default `default`, the neutral pill. */
+  tone?: AccentTone;
+}
+
+export interface ContactProfileCardProps {
+  /** Default `person`. */
+  kind?: ContactSubjectKind;
+  /** The person's name, or the company's. */
+  name: string;
+  /** A person's job title, or a company's industry. */
+  role?: string;
+  /** The account a person belongs to. Ignored when `kind` is `company`. */
+  company?: string;
+  /** Photo or logo: a URL or an `ImageResolver` id. Without it the avatar draws a monogram. */
+  avatar?: string;
+  /**
+   * The image across the cover band. Without one the band is an accent wash in
+   * `coverTone` — a record always has a cover, because the mark overlaps it and
+   * a mark hanging off nothing is the one arrangement that reads as a mistake.
+   * `compact` draws no band at all.
+   */
+  coverSource?: string | ImageSourcePropType | null;
+  /** The wash behind the cover when there is no image. Default `primary`. */
+  coverTone?: AccentTone;
+  status?: ContactStatus;
+  /** Reachable channels, drawn as glyph actions in the order given. */
+  channels?: readonly ContactChannel[];
+  owner?: ContactOwner;
+  /**
+   * The figure over the tiles. `comfortable` only.
+   */
+  headline?: ContactProfileHeadline;
+  /**
+   * The numbers a CRM record is read for — open deals, pipeline, last touch,
+   * reply time. One row of tiles from {@link CONTACT_NARROW_WIDTH} up, two
+   * columns below it. `comfortable` only.
+   */
+  stats?: readonly ContactProfileStat[];
+  /**
+   * Read-only attribute pills, in the chip row UNDER the tiles. The INPUT for
+   * these is `tag-field`, a family of its own — this card never edits a tag.
+   */
+  tags?: readonly string[];
+  /**
+   * Pre-formatted ("Last contacted 6 days ago"). The app owns the arithmetic.
+   * The first chip of the row on a card; a quiet third line in a row.
+   */
+  lastTouch?: string;
+  /** Colours `lastTouch` through the accent pair. Omitted, it is quiet text. */
+  lastTouchTone?: AccentTone;
+  /**
+   * Short unlabelled facts — "48 people", "Madrid", "Customer since 2024". They
+   * join the chip row after the last touch. A fact with a LABEL is a `stats`
+   * tile instead, and a number a record is read for belongs there.
+   */
+  facts?: readonly string[];
+  /** The people at the company, or the colleagues of a person. `comfortable` only. */
+  people?: readonly ContactProfilePerson[];
+  /** The caption beside the facepile ("12 people"). */
+  peopleLabel?: string;
+  /** Real total, when `people` is a sample. Drives the `+N` chip. */
+  peopleTotal?: number;
+  /** Default `comfortable`. */
+  density?: ContactProfileDensity;
+  /**
+   * Opens the record. It is bound to the IDENTITY BLOCK, not to the whole card —
+   * see `docs/contact-card.mdx`; the channel actions sit outside it so nothing
+   * nests a control inside a control.
+   */
+  onPress?: () => void;
+  /** Trailing slot, outside the press target: a menu trigger, an assign button. */
+  actions?: ReactNode;
+  /** Names the press target. Defaults to the name, the role and the company. */
+  accessibilityLabel?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/control-surface/ControlSurface.tsx

@@ -18,7 +18,7 @@ import type { ControlSurfaceProps } from './types';
  * ```
  *
  * A field left `undefined` INHERITS rather than resetting, so a nested
- * `<ControlSurface density="small">` inside a glass island stays glass. The
+ * `<ControlSurface density="sm">` inside a glass island stays glass. The
  * full precedence rule is in `control-surface/context.ts`.
  */
 const ControlSurfaceComponent: React.FC<ControlSurfaceProps> = ({
@@ -30,7 +30,7 @@ const ControlSurfaceComponent: React.FC<ControlSurfaceProps> = ({
   const value = useMemo(
     () => ({
       material: material ?? inherited?.material ?? 'solid',
-      density: density ?? inherited?.density ?? 'medium',
+      density: (density === 'small' ? 'sm' : density === 'medium' ? 'md' : density) ?? inherited?.density ?? 'md',
     }),
     [material, density, inherited?.material, inherited?.density],
   );

package/src/control-surface/types.ts

@@ -14,7 +14,7 @@ import type { ReactNode } from 'react';
 export type ControlMaterial = 'solid' | 'glass';
 
 /** The size a container asks the controls inside it for. */
-export type ControlDensity = 'medium' | 'small';
+export type ControlDensity = 'xs' | 'sm' | 'md' | 'lg';
 
 /**
  * What a container tells the controls inside it about presentation — and
@@ -35,6 +35,6 @@ export interface ControlSurfaceProps {
   /** The material controls inside should default to. Inherited when omitted. */
   material?: ControlMaterial;
   /** The density controls inside should default to. Inherited when omitted. */
-  density?: ControlDensity;
+  density?: ControlDensity | 'small' | 'medium';
   children?: ReactNode;
 }

package/src/creator-studio/ReleaseCard.tsx

@@ -1,7 +1,7 @@
+import { surfaceFillOn } from '../styles/surface-levels';
 import React, { memo, useMemo } from 'react';
 import { Image, Pressable, StyleSheet, View } from 'react-native';
 
-import { mixColor, resolveButtonRamps } from '../button/shared';
 import { Badge } from '../badge';
 import { GlyphButton } from '../button';
 import { Chip } from '../chip';
@@ -96,8 +96,7 @@ function ReleaseCardComponent({
   useInteractiveWebCss(CREATOR_STUDIO_STYLE_ID, CREATOR_STUDIO_CSS);
   const paint = useMemo(() => resolveCreatorStudioPaint(theme), [theme]);
   const hoverSurface = useMemo(() => {
-    const { neutral: n } = resolveButtonRamps(theme);
-    return theme.isDark ? n[800] : mixColor(paint.surface, n[200], 0.5);
+    return surfaceFillOn(theme, paint.surface);
   }, [theme, paint.surface]);
   const labels = { ...RELEASE_CARD_LABELS, ...labelOverrides };
   const { state: hovered, onIn, onOut } = useInteractionState();

package/src/creator-studio/shared.ts

@@ -2,7 +2,7 @@ import { Platform } from 'react-native';
 
 import { ACCENT_TABLE, colorRamp, DANGER_TABLE, mixColor, resolveButtonRamps } from '../button/shared';
 import type { AccentTone } from '../theme/accent-colors';
-import { surfaceTextOn } from '../styles/surface-levels';
+import { surfaceTextOn, resolveSurfaceLevel, surfaceFillOn, hairlineOn } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
 import type {
   CreatorOption,
@@ -55,27 +55,27 @@ export interface CreatorStudioPaint {
  *   error        danger ramp on `error` 600 / dark 400; surface 50 / 950 at 50%
  */
 export function resolveCreatorStudioPaint(theme: Theme): CreatorStudioPaint {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   const red = colorRamp(theme.colors.error, DANGER_TABLE);
   const rose = colorRamp(theme.colors.negative, DANGER_TABLE);
   const green = colorRamp(theme.colors.success, ACCENT_TABLE);
-  const surface = dark ? n[900] : n[100];
+  const surface = resolveSurfaceLevel(theme, 1).background;
   const quiet = surfaceTextOn(theme, surface);
   return {
     surface,
-    inner: dark ? mixColor(surface, n[800], 0.6) : theme.colors.card,
-    border: dark ? n[800] : n[200],
+    inner: surfaceFillOn(theme, surface),
+    border: hairlineOn(theme, surface),
     text: theme.colors.text,
     // Read off THIS card's fill, not off a ramp stop chosen against the page —
     // the same copy of `neutral-400`/`neutral-500` that put chart-card captions
     // at 2.42:1. `surfaceTextOn` floors them on `surface`.
     textSecondary: quiet.textSecondary,
     textTertiary: quiet.textTertiary,
-    track: dark ? n[800] : n[200],
-    ring: dark ? n[700] : n[300],
-    placeholder: dark ? n[800] : n[200],
-    placeholderIcon: dark ? n[500] : n[400],
+    track: surfaceFillOn(theme, surface),
+    ring: theme.colors.primary,
+    placeholder: surfaceFillOn(theme, surface),
+    placeholderIcon: surfaceTextOn(theme, surfaceFillOn(theme, surface)).textSecondary,
     accent: dark ? accent[400] : accent[500],
     onAccent: theme.colors.primaryForeground,
     positive: dark ? green[400] : green[700],

package/src/data-table/DataTable.tsx

@@ -1,3 +1,4 @@
+import { useBloomAppearance } from '../appearance';
 import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import {
   Platform,
@@ -11,7 +12,7 @@ import {
 import Svg, { Path } from 'react-native-svg';
 
 import { Button } from '../button';
-import { resolveButtonPalette, resolveButtonRamps } from '../button/shared';
+import { resolveButtonPalette } from '../button/shared';
 import { Checkbox } from '../checkbox';
 import { useControllableState } from '../hooks/use-controllable-state';
 import { Pagination } from '../pagination';
@@ -77,10 +78,8 @@ interface DataTablePalette {
 }
 
 function resolveDataTablePalette(theme: Theme): DataTablePalette {
-  const { neutral: n } = resolveButtonRamps(theme);
-  return theme.isDark
-    ? { border: n[800], separator: n[800], textTertiary: n[600], text: theme.colors.text }
-    : { border: n[200], separator: n[200], textTertiary: n[400], text: theme.colors.text };
+  const c = theme.colors;
+  return { border: c.borderLight, separator: c.borderLight, textTertiary: c.textSecondary, text: c.text };
 }
 
 /** `inset`: the rows' `pl-3` gutter. */
@@ -140,7 +139,7 @@ export function DataTable<T>({
   defaultPage = 1,
   onPageChange,
   size: sizeProp,
-  defaultSize = 'md',
+  defaultSize,
   onSizeChange,
   showSizeToggle = false,
   sizeToggleLabels = DEFAULT_SIZE_LABELS,
@@ -151,12 +150,13 @@ export function DataTable<T>({
   style,
   testID,
 }: DataTableProps<T>) {
+  const {size: scopedSize} = useBloomAppearance({size: defaultSize}, {size: 'md', tone: 'neutral'});
   const theme = useTheme();
   const palette = useMemo(() => resolveDataTablePalette(theme), [theme]);
 
   const [size, setSize] = useControllableState<DataTableSize>({
     value: sizeProp,
-    defaultValue: defaultSize,
+    defaultValue: scopedSize === 'xs' || scopedSize === 'sm' ? 'sm' : 'md',
     onChange: onSizeChange,
   });
   const [sort, setSort] = useControllableState<DataTableSort | null>({
@@ -477,7 +477,7 @@ export function DataTable<T>({
             label={sizeToggleAccessibilityLabel}
             type="radio"
             value={size}
-            onChange={setSize}
+            onValueChange={setSize}
           >
             <SegmentedControlItem value="md">
               <SegmentedControlItemText>{sizeToggleLabels.md}</SegmentedControlItemText>
@@ -531,14 +531,13 @@ function SortButton({
   onPress: () => void;
 }) {
   const theme = useTheme();
-  const { accent, neutral } = useMemo(() => resolveButtonRamps(theme), [theme]);
   const hook: WebDataSet = IS_WEB ? { dataSet: { bloomTableSort: '' } } : {};
   const sortProps: WebSortProps = { 'aria-sort': direction };
   const ring: WebCssStyle = {
     flexDirection: 'row',
     alignItems: 'center',
     gap: 2,
-    '--bloom-table-ring': accent[500],
+    '--bloom-table-ring': theme.colors.primary,
   };
   return (
     <Pressable
@@ -556,7 +555,7 @@ function SortButton({
       ) : (
         label
       )}
-      <SortGlyph direction={direction} color={direction === 'none' ? color : neutral[500]} />
+      <SortGlyph direction={direction} color={direction === 'none' ? color : theme.colors.textSecondary} />
     </Pressable>
   );
 }
@@ -602,7 +601,7 @@ export function DataTableRowAction({
 
   const activeStyle = useMemo((): WebCssStyle | ViewStyle | undefined => {
     if (!active) return undefined;
-    const paint = resolveButtonPalette('secondary', theme).active;
+    const paint = resolveButtonPalette('plain', theme, 'neutral').active;
     return IS_WEB
       ? {
           '--bloom-btn-bg': paint.background,
@@ -618,15 +617,7 @@ export function DataTableRowAction({
   const fill = IS_WEB ? 'currentColor' : theme.colors.text;
 
   const button = (
-    <Button
-      {...buttonProps}
-      variant="secondary"
-      size="small"
-      iconOnly
-      accessibilityLabel={accessibilityLabel ?? label}
-      icon={<Icon width={ROW_ACTION_ICON_SIZE} height={ROW_ACTION_ICON_SIZE} fill={fill} />}
-      style={[activeStyle, style]}
-    />
+    <Button {...buttonProps} size="sm" accessibilityLabel={accessibilityLabel ?? label} leading={<Icon width={ROW_ACTION_ICON_SIZE} height={ROW_ACTION_ICON_SIZE} fill={fill} />} style={[activeStyle, style]} appearance="plain" tone="neutral" />
   );
 
   if (!tooltip || !IS_WEB) return button;

package/src/data-table/DataTableRowActions.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react';
 import { View } from 'react-native';
 
-import { resolveButtonRamps } from '../button/shared';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -40,7 +39,6 @@ export function DataTableRowActions({
 }: DataTableRowActionsProps) {
   const theme = useTheme();
   const [open, setOpen] = useState(false);
-  const { neutral } = resolveButtonRamps(theme);
   const menuName = `${menuLabel} for ${name}`;
 
   return (
@@ -64,7 +62,7 @@ export function DataTableRowActions({
                   accessibilityLabel={label}
                   className="px-2 py-1.5"
                   onPress={onPress}
-                  leading={<Icon width={MENU_ICON_SIZE} height={MENU_ICON_SIZE} fill={neutral[500]} />}
+                  leading={<Icon width={MENU_ICON_SIZE} height={MENU_ICON_SIZE} fill={theme.colors.textSecondary} />}
                 >
                   {label}
                 </DropdownMenuItem>

package/src/data-table/DataTableSearch.tsx

@@ -19,7 +19,7 @@ const SEARCH_WIDTH = 153;
 export function DataTableSearch({
   label,
   value,
-  onChangeText,
+  onValueChange,
   placeholder = 'Search',
   testID,
 }: DataTableSearchProps) {
@@ -35,7 +35,7 @@ export function DataTableSearch({
         label={label}
         placeholder={placeholder}
         value={value}
-        onChangeText={onChangeText}
+        onValueChange={onValueChange}
         style={TYPE_SCALE['body-medium']}
         testID={testID}
       />

package/src/data-table/DataTableSelect.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Platform, View } from 'react-native';
 
 import { Badge } from '../badge';
-import { resolveButtonRamps } from '../button/shared';
 import { useControllableState } from '../hooks/use-controllable-state';
 import {
   Select,
@@ -39,7 +38,7 @@ function OptionMark({ option, color }: { option: DataTableSelectOption; color: s
     const Icon = option.icon;
     return <Icon width={OPTION_ICON_SIZE} height={OPTION_ICON_SIZE} fill={color} />;
   }
-  if (option.dot) return <Badge dot color={option.dot} />;
+  if (option.dot) return <Badge dot tone={option.dot} />;
   return null;
 }
 
@@ -61,7 +60,6 @@ export function DataTableSelect({
   testID,
 }: DataTableSelectProps) {
   const theme = useTheme();
-  const { neutral } = resolveButtonRamps(theme);
   const [value, setValue] = useControllableState<string | undefined>({
     value: valueProp,
     defaultValue,
@@ -80,14 +78,14 @@ export function DataTableSelect({
           className={current?.icon ? 'pl-2' : undefined}
           style={[{ width }, SHRINK_TO_CONTENT]}
         >
-          <SelectValue leading={current ? <OptionMark option={current} color={neutral[500]} /> : null} />
+          <SelectValue leading={current ? <OptionMark option={current} color={theme.colors.textSecondary} /> : null} />
           <SelectIcon />
         </SelectTrigger>
         <SelectContent<DataTableSelectOption>
           label={label}
           items={[...options]}
           renderItem={(item) => (
-            <SelectItem value={item.value} label={item.label} leading={<OptionMark option={item} color={neutral[500]} />}>
+            <SelectItem value={item.value} label={item.label} leading={<OptionMark option={item} color={theme.colors.textSecondary} />}>
               <SelectItemText>{item.label}</SelectItemText>
             </SelectItem>
           )}

package/src/data-table/types.ts

@@ -2,7 +2,7 @@ import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { ButtonProps } from '../button/types';
-import type { AccentTone } from '../theme/accent-colors';
+import type { BloomTone } from '../appearance';
 import type { TableColumnLayout, TableSize } from '../table/types';
 import type { BloomIconComponent } from '../icons/icon-component';
 
@@ -208,7 +208,7 @@ export interface DataTableSearchProps {
   /** Accessible name, e.g. `"Search customers"`. */
   label: string;
   value?: string;
-  onChangeText?: (text: string) => void;
+  onValueChange?: (text: string) => void;
   /** Default `"Search"`. */
   placeholder?: string;
   testID?: string;
@@ -223,7 +223,7 @@ export interface DataTableSelectOption extends DataTableOption {
    * A status dot (`Badge dot`): `green` is `success`, `yellow` is `warning`,
    * `indigo` is `info`.
    */
-  dot?: AccentTone;
+  dot?: BloomTone;
   /** An 18px icon in `foreground-icon-secondary`. */
   icon?: DataTableIconComponent;
 }

package/src/date-picker/MeetingScheduler.tsx

@@ -509,16 +509,12 @@ export function MeetingScheduler({
             </>
           ) : null}
         </View>
-        <Button
-          onPress={() => {
+        <Button onPress={() => {
             // Guarded here too, not only by `disabled`: a booking needs a time.
             if (!pending?.time) return;
             setCommitted(pending);
             setOpenState(false);
-          }}
-          disabled={!pending?.time}
-          testID={testID ? `${testID}-send` : undefined}
-        >
+          }} disabled={!pending?.time} testID={testID ? `${testID}-send` : undefined}>
           {sendLabel}
         </Button>
       </View>

package/src/date-picker/PickerShell.tsx

@@ -77,16 +77,7 @@ export function PickerShell({
   return (
     <Popover open={open} onOpenChange={disabled ? undefined : onOpenChange}>
       <PopoverTrigger asChild disabled={disabled}>
-        <Button
-          variant="secondary"
-          size="medium"
-          leadingIcon={CalendarIcon}
-          trailingIcon={trailingIcon}
-          disabled={disabled}
-          accessibilityLabel={`${accessibilityLabel}, ${triggerText}`}
-          style={[{ height: TRIGGER_HEIGHT }, style]}
-          testID={testID}
-        >
+        <Button size="md" leadingIcon={CalendarIcon} trailingIcon={trailingIcon} disabled={disabled} accessibilityLabel={`${accessibilityLabel}, ${triggerText}`} style={[{ height: TRIGGER_HEIGHT }, style]} testID={testID} appearance="outline" tone="neutral">
           {triggerText}
         </Button>
       </PopoverTrigger>
@@ -117,7 +108,7 @@ export function PickerActions({
 }) {
   return (
     <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
-      <Button variant="secondary" onPress={onCancel} testID={testID ? `${testID}-cancel` : undefined}>
+      <Button onPress={onCancel} testID={testID ? `${testID}-cancel` : undefined} appearance="subtle" tone="neutral">
         Cancel
       </Button>
       <Button onPress={onApply} disabled={applyDisabled} testID={testID ? `${testID}-apply` : undefined}>