@oxy.so/bloom 2.10.0 → 2.11.0

package/src/tenancy/parts.tsx

@@ -3,8 +3,10 @@ import { Pressable, View, type StyleProp, type ViewStyle } from 'react-native';
 
 import { BUTTON_GEOMETRY, BUTTON_RADIUS, mixColor } from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
+import { Meter } from '../stat-bar';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import {
@@ -13,10 +15,10 @@ import {
   HOUSING_STYLE_ID,
   HOUSING_WEB_CSS,
   resolveHousingPalette,
-  webData,
   type HousingPalette,
 } from './shared';
 import type { HousingIcon } from './types';
+import { DISABLED_OPACITY } from '../styles/tokens';
 
 /**
  * Internal parts the housing cards are built from. Not published: each is a
@@ -177,13 +179,13 @@ export function HousingToggleButton({
     gap: 4,
     borderRadius: BUTTON_RADIUS,
     backgroundColor: background,
-    opacity: disabled ? 0.5 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-housing-ring': palette.ring,
   };
 
   return (
     <Pressable
-      {...webData({ bloomHousingFocus: '' })}
+      {...webDataSet({ bloomHousingFocus: '' })}
       accessibilityRole="button"
       accessibilityLabel={accessibilityLabel ?? label}
       aria-pressed={pressed}
@@ -205,7 +207,12 @@ export function HousingToggleButton({
   );
 }
 
-/** A 6px progress bar: neutral track, text-colour fill. */
+/**
+ * A 6px `Meter`: the shared neutral track, the accent fill.
+ *
+ * The fill was `palette.text` — a near-black bar — until the meters were folded
+ * onto one primitive. A lease's elapsed share is a measurement, not ink.
+ */
 export function ProgressTrack({
   value,
   accessibilityLabel,
@@ -218,24 +225,15 @@ export function ProgressTrack({
   valueText?: string;
   testID?: string;
 }) {
-  const palette = useHousingPalette();
-  const clamped = Math.min(1, Math.max(0, value));
-  const percent = Math.round(clamped * 100);
+  const percent = Math.round(Math.min(1, Math.max(0, value)) * 100);
   return (
-    <View
-      accessibilityRole="progressbar"
+    <Meter
+      value={percent}
+      max={100}
+      height={6}
       accessibilityLabel={accessibilityLabel}
-      aria-valuemin={0}
-      aria-valuemax={100}
-      aria-valuenow={percent}
-      aria-valuetext={valueText}
+      valueText={valueText}
       testID={testID}
-      style={{ height: 6, borderRadius: 3, overflow: 'hidden', backgroundColor: palette.track }}
-    >
-      <View
-        testID={testID ? `${testID}-fill` : undefined}
-        style={{ width: `${percent}%`, height: '100%', borderRadius: 3, backgroundColor: palette.text }}
-      />
-    </View>
+    />
   );
 }

package/src/tenancy/shared.ts

@@ -24,6 +24,7 @@ import { Platform } from 'react-native';
 import { resolveButtonRamps } from '../button/shared';
 import { resolveMenuPalette } from '../floating/menu-palette';
 import type { ImageResolver } from '../image-resolver/context';
+import { isImageUrl } from '../image-resolver/is-image-url';
 import type { Theme } from '../theme/types';
 
 export const IS_WEB = Platform.OS === 'web';
@@ -77,16 +78,6 @@ export const HOUSING_CARD_RADIUS = 20;
 export const HOUSING_CARD_PADDING = 20;
 export const HOUSING_TILE_RADIUS = 12;
 
-export function isImageUrl(value: string): boolean {
-  return (
-    value.startsWith('http://') ||
-    value.startsWith('https://') ||
-    value.startsWith('data:') ||
-    value.startsWith('blob:') ||
-    value.startsWith('file:')
-  );
-}
-
 /** A URL passes through; an id goes to the resolver; nothing resolves to `undefined`. */
 export function resolveImageUri(
   source: string | undefined,
@@ -97,11 +88,6 @@ export function resolveImageUri(
   return isImageUrl(source) ? source : resolver?.(source, variant) ?? undefined;
 }
 
-/** `dataSet` hooks for the adopted sheet; nothing on native. */
-export function webData(data: Record<string, string>): Record<string, unknown> {
-  return IS_WEB ? { dataSet: data } : {};
-}
-
 /** Joins the non-empty parts of an accessible name. */
 export function joinName(parts: ReadonlyArray<string | false | null | undefined>, separator = ', '): string {
   return parts.filter((part): part is string => typeof part === 'string' && part !== '').join(separator);

package/src/tenancy/types.ts

@@ -2,13 +2,15 @@ import type { ComponentType, ReactNode } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { AccentTone } from '../theme/accent-colors';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
  * An icon COMPONENT (`RiDropLine`, not `<RiDropLine />`). The part sizes and
  * colours it, so a caller cannot pass the wrong size or a colour that ignores
  * the theme.
  */
-export type HousingIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type HousingIcon = BloomIconComponent;
 
 /** A width-driven layout: `auto` measures the part's own width. */
 export type TenancyLayout = 'auto' | 'wide' | 'narrow';

package/src/text-field/TextField.tsx

@@ -41,7 +41,7 @@ import {
   resolveIconColor,
   resolvePlaceholderColor,
   resolveShellPaint,
-  resolveTextFieldPalette,
+  useTextFieldPalette,
   type TextFieldPalette,
   type TextFieldSize,
 } from './shared';
@@ -178,7 +178,7 @@ export function TextField({
   const [addonFocused, setAddonFocused] = useState(false);
   const hasAddon = leadingAddon !== undefined && leadingAddon !== null;
 
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
   const resolvedDisabled = disabled || inputDisabled;
 
   const context = useMemo(
@@ -661,7 +661,7 @@ export function TextFieldLabel({
   style,
 }: TextFieldLabelProps) {
   const theme = useTheme();
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
   return (
     <View
       style={[
@@ -702,7 +702,7 @@ export function TextFieldHint({
   style,
 }: TextFieldHintProps) {
   const theme = useTheme();
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
   return (
     <Text
       variant="caption-1-medium"
@@ -800,7 +800,7 @@ export function TextFieldGhost({
   value: string;
 }) {
   const theme = useTheme();
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
   // Aligned with the typed text after a leading icon: icon + gap + input inset.
   const textOffset = TEXT_FIELD_ICON_SIZE + TEXT_FIELD_LEADING_GAP + TEXT_FIELD_INPUT_INSET;
   return (

package/src/text-field/shared.ts

@@ -1,3 +1,4 @@
+import { useMemo } from 'react';
 import { Platform, type ViewStyle } from 'react-native';
 
 import type { WebCssStyle } from '../styles/web-view-style';
@@ -8,7 +9,9 @@ import {
   mixColor,
   resolveButtonRamps,
 } from '../button/shared';
+import { hairlineOn, surfaceFillOn, surfaceTextOn, useSurfaceFill } from '../styles/surface-levels';
 import type { Theme } from '../theme/types';
+import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography/scale';
 
 /**
@@ -136,61 +139,89 @@ const TRANSPARENT = 'rgba(0, 0, 0, 0)';
 export { TRANSPARENT as TEXT_FIELD_TRANSPARENT };
 
 /**
- * Resolve the input tokens against a Bloom theme, light (`:root`) or dark
- * (`.dark`). Pure, so it can be walked over every preset × mode without
- * rendering.
+ * Resolve the input tokens against a Bloom theme and the SURFACE the field sits
+ * on. Pure, so it can be walked over every preset × mode without rendering.
  *
- * The dark `color-mix(... N%, transparent)` tokens are composited over
- * the theme's page background, which is what they sit on there
- * (`background-full`).
+ * `surface` is what makes the field a field. As fixed ramp stops the dark fill
+ * was `neutral-800` — byte for byte the surface `floating/menu-palette` paints a
+ * menu, a popover, a select and a tooltip with, measured 1.000:1 against it. A
+ * field dropped into any of those had no shell at all, and one inside a `card`
+ * had 1.225:1. Every fill and every quiet text colour here is now a step off
+ * whatever it was given, so the field keeps a shell wherever it lands; on the
+ * page it lands within 0.04 of the colour it always had.
+ *
+ * The dark `color-mix(... N%, transparent)` tokens are composited over that same
+ * surface, which is what they sit on.
  */
-export function resolveTextFieldPalette(theme: Theme): TextFieldPalette {
+export function resolveTextFieldPalette(
+  theme: Theme,
+  surface: string = theme.colors.background,
+): TextFieldPalette {
   const c = theme.colors;
   const { neutral: n } = resolveButtonRamps(theme);
   const red = colorRamp(c.negative, DANGER_TABLE);
+  const background = surfaceFillOn(theme, surface);
+  // The value, the placeholder and the counter sit on the FILL; the hint and the
+  // label sit on the surface behind it. Both are floored on the right one.
+  const onField = surfaceTextOn(theme, background);
+  const onSurface = surfaceTextOn(theme, surface);
 
   if (theme.isDark) {
-    const backgroundDisabled = mixColor(c.background, n[800], 0.3);
+    const backgroundDisabled = mixColor(surface, background, 0.3);
     return {
-      background: n[800],
+      background,
       backgroundDisabled,
-      backgroundInvalid: mixColor(c.background, red[950], 0.6),
-      ringHover: n[500],
+      backgroundInvalid: mixColor(surface, red[950], 0.6),
+      ringHover: hairlineOn(theme, background),
       ringFocus: n[600],
       text: c.text,
       textDisabled: mixColor(backgroundDisabled, n[500], 0.4),
-      placeholder: n[600],
+      placeholder: onField.textTertiary,
       placeholderInvalid: red[400],
-      icon: n[600],
+      icon: onField.textTertiary,
       iconDisabled: n[600],
       iconInvalid: red[400],
-      hint: n[500],
+      hint: onSurface.textTertiary,
       error: red[400],
       infoIcon: n[700],
-      count: n[600],
+      count: onField.textTertiary,
     };
   }
 
   return {
-    background: n[200],
-    backgroundDisabled: n[100],
+    background,
+    backgroundDisabled: mixColor(surface, background, 0.5),
     backgroundInvalid: red[100],
-    ringHover: n[300],
+    ringHover: hairlineOn(theme, background),
     ringFocus: n[400],
     text: c.text,
     textDisabled: n[300],
-    placeholder: n[400],
+    placeholder: onField.textTertiary,
     placeholderInvalid: red[400],
-    icon: n[400],
+    icon: onField.textTertiary,
     iconDisabled: n[300],
     iconInvalid: red[600],
-    hint: n[500],
+    hint: onSurface.textTertiary,
     error: red[500],
     infoIcon: n[300],
-    count: n[400],
+    count: onField.textTertiary,
   };
 }
 
+/**
+ * The field palette for the surface this subtree is actually on.
+ *
+ * Every `TextField` / `Textarea` / `InputGroup` / `Label` / `Field` reads it
+ * through this hook rather than calling `resolveTextFieldPalette(theme)`, so a
+ * field inside a `SurfaceLevelProvider` steps off that container instead of off
+ * the page.
+ */
+export function useTextFieldPalette(): TextFieldPalette {
+  const theme = useTheme();
+  const surface = useSurfaceFill();
+  return useMemo(() => resolveTextFieldPalette(theme, surface), [theme, surface]);
+}
+
 export interface TextFieldState {
   hovered: boolean;
   focused: boolean;

package/src/textarea/Textarea.tsx

@@ -17,7 +17,7 @@ import {
   TEXT_FIELD_WEB_TRANSITION,
   resolvePlaceholderColor,
   resolveShellPaint,
-  resolveTextFieldPalette,
+  useTextFieldPalette,
 } from '../text-field/shared';
 import type { TextareaProps } from './types';
 
@@ -71,7 +71,7 @@ export function Textarea({
   ...rest
 }: TextareaProps) {
   const theme = useTheme();
-  const palette = useMemo(() => resolveTextFieldPalette(theme), [theme]);
+  const palette = useTextFieldPalette();
   const innerRef = useRef<TextInput>(null);
   const { state: hovered, onIn: onHoverIn, onOut: onHoverOut } = useInteractionState();
   const { state: focused, onIn: onFocusIn, onOut: onFocusOut } = useInteractionState();

package/src/theme/build-theme-from-seed.ts

@@ -65,7 +65,10 @@ export function buildColorsFromSeed(
 
     text: g('foreground'),
     textSecondary: g('muted-foreground'),
-    textTertiary: r.outline,
+    // The same ONE quiet-text colour `build-theme.ts` resolves — see the long
+    // note there. The parity suite walks every preset through both paths, so a
+    // change on one side that is not made on the other goes red.
+    textTertiary: g('muted-foreground'),
 
     border: g('border'),
     borderLight: g('input'),

package/src/theme/build-theme.ts

@@ -60,7 +60,22 @@ function buildColorsFromPreset(
 
     text: g('foreground'),
     textSecondary: g('muted-foreground'),
-    textTertiary: r.outline,
+    // ONE quiet-text colour, not two spellings of a role that disagreed.
+    //
+    // `--color-text-tertiary` has always aliased `--muted-foreground` in
+    // `design-tokens/theme.css`, so `className="text-tertiary"` rendered at
+    // 8.42:1 in light / 11.33:1 in dark, while this field read `r.outline` and
+    // rendered the SAME named role at 4.04:1 / 6.12:1 — below AA for body text
+    // in light. One name, two colours, and only the JS side failed.
+    //
+    // The tie is broken toward the token, because a fixed third grey cannot BE
+    // a third rung: it is measured against one surface and used on all of them.
+    // `neutral-400` is the same mistake one ramp over — it clears AA on the page
+    // and measures 2.42:1 on a chart card. A genuinely quieter rung has to be
+    // asked for against the fill it lands on, which is what
+    // `styles/surface-levels.ts` `surfaceTextOn()` returns and what every family
+    // that wants a caption grey now calls.
+    textTertiary: g('muted-foreground'),
 
     border: g('border'),
     borderLight: g('input'),

package/src/track-list/EpisodeRow.tsx

@@ -1,12 +1,12 @@
 import React, { memo, useMemo, useState } from 'react';
 import { Pressable, StyleSheet, View, useWindowDimensions } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { RiAddCircleLine } from '../icons/remix/RiAddCircleLine';
 import { RiArrowDownCircleFill } from '../icons/remix/RiArrowDownCircleFill';
 import { RiArrowDownCircleLine } from '../icons/remix/RiArrowDownCircleLine';
 import { RiCheckboxCircleFill } from '../icons/remix/RiCheckboxCircleFill';
 import { ExplicitBadge, PlayButton } from '../media-controls';
+import { Meter } from '../stat-bar';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TrackCover, TrackIconButton, TrackMenu } from './parts';
@@ -17,6 +17,7 @@ import {
   resolveTrackListPaint,
 } from './shared';
 import type { EpisodeRowProps } from './types';
+import { webDataSet } from '../styles/web-data';
 
 /** Below this the cover shrinks to 64 and the description is dropped. */
 const EPISODE_NARROW_WIDTH = 560;
@@ -38,7 +39,7 @@ const EPISODE_NARROW_WIDTH = 560;
  * Accessibility: the title is a `link` that opens the episode (a press
  * anywhere on the row does too); play is a button named "Play <title>"; save
  * and download are toggle buttons (`aria-pressed` + `accessibilityState`); the
- * progress bar is a `progressbar` named "Listened" whose value text is the time
+ * progress bar is a `Meter` named "Listened" whose value text is the time
  * left.
  */
 function EpisodeRowComponent({
@@ -132,29 +133,16 @@ function EpisodeRowComponent({
       ) : null}
       {inProgress ? (
         <View style={{ flexDirection: 'row', alignItems: 'center', marginLeft: 12, flexShrink: 1 }}>
-          <View
-            role="progressbar"
+          <Meter
+            value={Math.round(progress)}
+            max={Math.round(episode.duration)}
+            height={4}
+            width={narrow ? 56 : 80}
+            fill={paint.accent}
+            track={paint.rail}
             accessibilityLabel={labels?.progress ?? 'Listened'}
-            aria-valuemin={0}
-            aria-valuemax={Math.round(episode.duration)}
-            aria-valuenow={Math.round(progress)}
-            aria-valuetext={remaining}
-            style={{
-              width: narrow ? 56 : 80,
-              height: 4,
-              borderRadius: 2,
-              backgroundColor: paint.rail,
-              overflow: 'hidden',
-            }}
-          >
-            <View
-              style={{
-                width: `${Math.round((progress / episode.duration) * 100)}%`,
-                height: 4,
-                backgroundColor: paint.accent,
-              }}
-            />
-          </View>
+            valueText={remaining}
+          />
           <Text
             variant="caption-1-medium"
             numberOfLines={1}

package/src/track-list/SelectionBar.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react';
 import { View, useWindowDimensions } from 'react-native';
 
-import { Button } from '../button';
+import { Button, GlyphButton } from '../button';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { useTheme } from '../theme/use-theme';
@@ -19,7 +19,13 @@ const LABELS_MIN_WIDTH = 640;
  *   surface     the menu surface (card / neutral-800) with its hairline border
  *   radius      16 (a panel, not a pill); height 56; padding 8 / 16
  *   shadow      a soft drop shadow, light and dark
- *   actions     ghost buttons, small, with their icon; icon-only under 640
+ *   actions     `text` buttons, small, with their icon; icon-only under 640
+ *   clear       a neutral `GlyphButton`, never a tinted one
+ *
+ * The actions are DELIBERATELY not `ghost`: that variant paints an accent wash,
+ * so a destructive action in it drew a RED label on a BLUE fill. `text` is the
+ * transparent labelled button — a neutral hover wash under an accent label —
+ * and a destructive one paints its own icon and label from `error`.
  *
  * `placement="floating"` (default) positions it absolutely 16 above the bottom
  * of the nearest positioned parent, centred. `inline` leaves layout to the app.
@@ -76,22 +82,33 @@ export function SelectionBar({
         {countText}
       </Text>
       <View style={{ flexDirection: 'row', alignItems: 'center', gap: 4 }}>
-        {actions.map((action) => (
-          <Button
-            key={action.key}
-            variant="ghost"
-            size="small"
-            leadingIcon={action.icon}
-            iconOnly={iconOnly && action.icon !== undefined}
-            accessibilityLabel={action.label}
-            disabled={action.disabled}
-            onPress={action.onPress}
-            testID={testID ? `${testID}-${action.key}` : undefined}
-            textStyle={action.destructive ? { color: theme.colors.error } : undefined}
-          >
-            {action.label}
-          </Button>
-        ))}
+        {actions.map((action) => {
+          const Icon = action.icon;
+          // A destructive action paints BOTH its label and its glyph from
+          // `error`. `leadingIcon` is coloured by the button, so the glyph goes
+          // in as an `icon` ELEMENT, which the button renders as-is.
+          const destructiveIcon =
+            action.destructive === true && Icon ? (
+              <Icon width={18} height={18} fill={theme.colors.error} />
+            ) : undefined;
+          return (
+            <Button
+              key={action.key}
+              variant="text"
+              size="small"
+              icon={destructiveIcon}
+              leadingIcon={destructiveIcon ? undefined : Icon}
+              iconOnly={iconOnly && Icon !== undefined}
+              accessibilityLabel={action.label}
+              disabled={action.disabled}
+              onPress={action.onPress}
+              testID={testID ? `${testID}-${action.key}` : undefined}
+              textStyle={action.destructive ? { color: theme.colors.error } : undefined}
+            >
+              {action.label}
+            </Button>
+          );
+        })}
       </View>
       <View
         style={{
@@ -104,11 +121,13 @@ export function SelectionBar({
           backgroundColor: paint.panelBorder,
         }}
       />
-      <Button
-        variant="ghost"
-        size="small"
-        iconOnly
-        leadingIcon={RiCloseLine}
+      <GlyphButton
+        size={32}
+        icon={RiCloseLine}
+        glyphSize={20}
+        color={paint.textMuted}
+        hoverColor={paint.text}
+        ring={paint.ring}
         accessibilityLabel={clearLabel}
         onPress={onClear}
         testID={testID ? `${testID}-clear` : undefined}

package/src/track-list/TrackList.tsx

@@ -1,17 +1,16 @@
 import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react';
+import { dragShift, dragTarget } from '../hooks/list-reorder';
 import { View, useWindowDimensions, type LayoutChangeEvent } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { RiDiscLine } from '../icons/remix/RiDiscLine';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import {
-  dragShift,
   IS_WEB,
   isNarrow,
   nextSelection,
-  reorderTarget,
   resolveTrackListPaint,
   ROLE_GRIDCELL,
   resolveVisibleColumns,
@@ -174,11 +173,11 @@ export function TrackList({
     }
     setDrag(null);
     if (phase === 'end') {
-      const to = reorderTarget(index, dy, geo.height, tracks.length);
+      const to = dragTarget(index, dy, geo.height, tracks.length);
       if (to !== index) onReorder?.(index, to);
     }
   };
-  const dragTarget = drag ? reorderTarget(drag.from, drag.dy, geo.height, tracks.length) : -1;
+  const target = drag ? dragTarget(drag.from, drag.dy, geo.height, tracks.length) : -1;
 
   // --- layout --------------------------------------------------------------
   const onLayout = (event: LayoutChangeEvent) => {
@@ -223,7 +222,7 @@ export function TrackList({
         const groupRow = group ? ++rowNumber : 0;
         const trackRow = ++rowNumber;
         const dragged = drag?.from === index;
-        const shift = drag && !dragged ? dragShift(index, drag.from, dragTarget, geo.height) : 0;
+        const shift = drag && !dragged ? dragShift(index, drag.from, target, geo.height) : 0;
         const wrapperStyle: WebCssStyle | null = drag
           ? dragged
             ? {

package/src/track-list/TrackRow.tsx

@@ -15,7 +15,6 @@ import {
   type GestureResponderEvent,
 } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { mergeRefs } from '../hooks/merge-refs';
 import { RiArrowDownLine } from '../icons/remix/RiArrowDownLine';
 import { RiArrowDownCircleFill } from '../icons/remix/RiArrowDownCircleFill';
@@ -24,6 +23,7 @@ import { RiDraggable } from '../icons/remix/RiDraggable';
 import { ExplicitBadge, formatDuration, LikeButton, NowPlayingIndicator, PlayButton } from '../media-controls';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
+import { webDataSet } from '../styles/web-data';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TrackCover, TrackMenu } from './parts';

package/src/track-list/parts.tsx

@@ -1,7 +1,7 @@
 import React, { Fragment, memo, useMemo, useState } from 'react';
-import { Image, Pressable, View, type GestureResponderEvent } from 'react-native';
+import { Image, View, type GestureResponderEvent } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
+import { GlyphButton } from '../button';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -13,7 +13,7 @@ import { RiMore2Fill } from '../icons/remix/RiMore2Fill';
 import { RiMusic2Line } from '../icons/remix/RiMusic2Line';
 import { resolvePhoto } from '../listing-card/shared';
 import { useImageResolver } from '../image-resolver/context';
-import { borderRadius } from '../styles/tokens';
+import { DISABLED_OPACITY, borderRadius } from '../styles/tokens';
 import type { WebCssStyle } from '../styles/web-view-style';
 import type { WebAriaProps } from '../styles/styled-primitives';
 import { useTheme } from '../theme/use-theme';
@@ -40,6 +40,9 @@ interface TrackIconButtonProps {
  * A 32px round glyph button: muted at rest, the text colour under the pointer,
  * `activeColor` while pressed. Colour change only. Its press never reaches the
  * row behind it.
+ *
+ * `button/GlyphButton` with this family's 32 box, 20 glyph and 0.4 disabled dim
+ * — the only thing left here is the row-press guard.
  */
 export function TrackIconButton({
   icon: Icon,
@@ -68,33 +71,35 @@ export function TrackIconButton({
     borderRadius: borderRadius.full,
     alignItems: 'center',
     justifyContent: 'center',
-    opacity: disabled ? 0.4 : 1,
+    opacity: disabled ? DISABLED_OPACITY : 1,
     '--bloom-track-ring': paint.ring,
   };
   const toggle = pressed !== undefined;
   return (
-    <Pressable
-      {...webDataSet({ bloomTrackFocusable: '' })}
+    <GlyphButton
       {...aria}
-      role="button"
+      icon={Icon}
+      size={32}
+      glyphSize={glyph}
       accessibilityLabel={accessibilityLabel}
-      {...(toggle ? { 'aria-pressed': pressed } : null)}
-      accessibilityState={{ disabled, ...(toggle ? { selected: pressed } : null) }}
-      aria-disabled={disabled || undefined}
       disabled={disabled}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
+      pressed={pressed}
+      color={paint.textMuted}
+      hoverColor={paint.text}
+      // No `activeColor` means the toggle keeps the plain colours, which is what
+      // this drew before: `pressed && activeColor` was the whole condition.
+      activeColor={activeColor ?? paint.textMuted}
+      activeHoverColor={activeColor ?? paint.text}
+      fill="transparent"
+      hoverFill="transparent"
+      ring={paint.ring}
+      disabledOpacity={0.4}
       onPress={(event: GestureResponderEvent) => {
         if (IS_WEB) event.stopPropagation?.();
         onPress?.(event);
       }}
-      style={rootStyle}
       testID={testID}
-    >
-      <View pointerEvents="none" style={{ width: glyph, height: glyph }}>
-        <Icon width={glyph} height={glyph} fill={color} />
-      </View>
-    </Pressable>
+    />
   );
 }