@oxy.so/bloom 2.10.0 → 2.11.0

package/src/music-library/LibraryPanel.tsx

@@ -1,8 +1,9 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, ScrollView, TextInput, View, type TextStyle } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
-import { Chip } from '../chip';
+import { GlyphButton } from '../button';
+import { Chip, ChipRow } from '../chip';
+import { webDataSet } from '../styles/web-data';
 import {
   DropdownMenu,
   DropdownMenuContent,
@@ -28,7 +29,6 @@ import { SANS_FONT_FAMILY } from '../text-field/shared';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography';
 import { TYPE_SCALE } from '../typography/scale';
-import { GlyphButton } from './GlyphButton';
 import { LibraryItem } from './LibraryItem';
 import {
   DEFAULT_LIBRARY_LABELS,
@@ -57,7 +57,8 @@ import type {
  *   header    16/8 padding · the library glyph + "Your Library" (headline-bold;
  *             a rail toggle when `onCollapsedChange` is set) · + · expand toggle
  *   chips     × (clear, while a filter is on) · Playlists · Artists · Albums ·
- *             Podcasts · Audiobooks · Downloaded — `Chip`s, scrolling sideways
+ *             Podcasts · Audiobooks · Downloaded — `Chip`s (`xl`, 32 tall) in a
+ *             `ChipRow`, scrolling sideways with an edge fade
  *   toolbar   search glyph (opens a 32 field in place) · "Recents" + the view
  *             glyph, opening one menu of sort and view radio rows
  *   list      `LibraryItem`s in the chosen view; grid columns from the width
@@ -219,28 +220,32 @@ function LibraryPanelComponent({
       >
         <View style={{ alignItems: 'center', gap: 4, paddingTop: 12, paddingBottom: 8 }}>
           <GlyphButton
-            label={labels.expandRail}
+            accessibilityLabel={labels.expandRail}
             size={40}
+            icon={RiBookShelfLine}
+            glyphSize={24}
+            color={paint.textMuted}
+            hoverColor={paint.textMuted}
             fill="transparent"
             hoverFill={paint.hover}
             ring={paint.ring}
             onPress={onCollapsedChange ? () => onCollapsedChange(false) : undefined}
             testID={pid('rail-toggle')}
-          >
-            <RiBookShelfLine width={24} height={24} fill={paint.textMuted} />
-          </GlyphButton>
+          />
           {onCreatePress ? (
             <GlyphButton
-              label={labels.create}
+              accessibilityLabel={labels.create}
               size={40}
+              icon={RiAddLine}
+              glyphSize={22}
+              color={paint.text}
+              hoverColor={paint.text}
               fill={paint.hover}
               hoverFill={paint.selected}
               ring={paint.ring}
               onPress={onCreatePress}
               testID={pid('create')}
-            >
-              <RiAddLine width={22} height={22} fill={paint.text} />
-            </GlyphButton>
+            />
           ) : null}
         </View>
         <ScrollView
@@ -309,56 +314,51 @@ function LibraryPanelComponent({
         <View style={{ flexGrow: 1 }} />
         {onCreatePress ? (
           <GlyphButton
-            label={labels.create}
+            accessibilityLabel={labels.create}
             size={32}
+            icon={RiAddLine}
+            glyphSize={20}
+            color={paint.text}
+            hoverColor={paint.text}
             fill={paint.hover}
             hoverFill={paint.selected}
             ring={paint.ring}
             onPress={onCreatePress}
             testID={pid('create')}
-          >
-            <RiAddLine width={20} height={20} fill={paint.text} />
-          </GlyphButton>
+          />
         ) : null}
         {onExpandedChange ? (
           <GlyphButton
-            label={expanded ? labels.collapse : labels.expand}
+            accessibilityLabel={expanded ? labels.collapse : labels.expand}
             size={32}
+            icon={expanded ? RiContractLeftRightLine : RiExpandLeftRightLine}
+            glyphSize={20}
+            color={paint.textMuted}
+            hoverColor={paint.textMuted}
             fill="transparent"
             hoverFill={paint.hover}
             ring={paint.ring}
             onPress={() => onExpandedChange(!expanded)}
             testID={pid('expand')}
-          >
-            {expanded ? (
-              <RiContractLeftRightLine width={20} height={20} fill={paint.textMuted} />
-            ) : (
-              <RiExpandLeftRightLine width={20} height={20} fill={paint.textMuted} />
-            )}
-          </GlyphButton>
+          />
         ) : null}
       </View>
 
-      {/* Filter chips */}
-      <ScrollView
-        {...webDataSet({ bloomMusicScrollX: '' })}
-        horizontal
-        showsHorizontalScrollIndicator={false}
-        style={{ flexGrow: 0 }}
-        contentContainerStyle={{
-          gap: 8,
-          alignItems: 'center',
-          paddingTop: 8,
-          paddingBottom: 8,
-          paddingLeft: 16,
-          paddingRight: 16,
-        }}
+      {/* Filter chips. The pills used to carry `{ paddingLeft: 12, paddingRight:
+          12 }` over a base spelling it `paddingHorizontal` — inert on web, 12 on
+          native. The `xl` rung is that padding, on both. */}
+      <ChipRow
+        contentInset={16 - 4}
+        ringInset={4}
+        // The row sits on the PANEL, not the page, and the row cannot know that.
+        fadeColor={paint.surface}
         accessibilityLabel={labels.filters}
+        style={{ marginTop: 8, marginBottom: 8 }}
         testID={pid('filters')}
       >
         {anyFilter ? (
           <Chip
-            size="large"
+            size="xl"
             onPress={() => {
               setFilter(null);
               setDownloadedOnly(false);
@@ -371,11 +371,10 @@ function LibraryPanelComponent({
         {filters.map((key) => (
           <Chip
             key={key}
-            size="large"
+            size="xl"
             selected={filter === key}
             onPress={() => setFilter(filter === key ? null : key)}
             accessibilityLabel={labels.filter[key]}
-            style={{ paddingLeft: 12, paddingRight: 12 }}
             testID={pid(`filter-${key}`)}
           >
             {labels.filter[key]}
@@ -383,17 +382,16 @@ function LibraryPanelComponent({
         ))}
         {hideDownloadedFilter ? null : (
           <Chip
-            size="large"
+            size="xl"
             selected={downloadedOnly}
             onPress={() => setDownloadedOnly(!downloadedOnly)}
             accessibilityLabel={labels.downloaded}
-            style={{ paddingLeft: 12, paddingRight: 12 }}
             testID={pid('filter-downloaded')}
           >
             {labels.downloaded}
           </Chip>
         )}
-      </ScrollView>
+      </ChipRow>
 
       {/* Toolbar */}
       <View
@@ -454,8 +452,12 @@ function LibraryPanelComponent({
             />
             {query.length > 0 ? (
               <GlyphButton
-                label={labels.clearSearch}
+                accessibilityLabel={labels.clearSearch}
                 size={28}
+                icon={RiCloseLine}
+                glyphSize={16}
+                color={paint.textMuted}
+                hoverColor={paint.textMuted}
                 fill="transparent"
                 hoverFill={paint.selected}
                 ring={paint.ring}
@@ -464,24 +466,24 @@ function LibraryPanelComponent({
                   searchRef.current?.focus();
                 }}
                 testID={pid('search-clear')}
-              >
-                <RiCloseLine width={16} height={16} fill={paint.textMuted} />
-              </GlyphButton>
+              />
             ) : null}
           </View>
         ) : (
           <>
             <GlyphButton
-              label={labels.search}
+              accessibilityLabel={labels.search}
               size={32}
+              icon={RiSearchLine}
+              glyphSize={18}
+              color={paint.textMuted}
+              hoverColor={paint.textMuted}
               fill="transparent"
               hoverFill={paint.hover}
               ring={paint.ring}
               onPress={() => setSearchOpen(true)}
               testID={pid('search')}
-            >
-              <RiSearchLine width={18} height={18} fill={paint.textMuted} />
-            </GlyphButton>
+            />
             <View style={{ flexGrow: 1 }} />
           </>
         )}

package/src/music-library/RecentSearches.tsx

@@ -2,11 +2,11 @@ import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
 import { Button } from '../button';
-import { webDataSet } from '../checkbox/shared';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 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 { Cover } from './Cover';

package/src/music-library/SearchField.tsx

@@ -1,7 +1,8 @@
 import React, { memo, useEffect, useMemo, useRef, useState } from 'react';
 import { Pressable, TextInput, View, type TextStyle } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
+import { GlyphButton } from '../button';
+import { webDataSet } from '../styles/web-data';
 import { RiCloseLine } from '../icons/remix/RiCloseLine';
 import { RiCompass3Line } from '../icons/remix/RiCompass3Line';
 import { RiSearchLine } from '../icons/remix/RiSearchLine';
@@ -11,7 +12,6 @@ import type { WebCssStyle } from '../styles/web-view-style';
 import { SANS_FONT_FAMILY } from '../text-field/shared';
 import { useTheme } from '../theme/use-theme';
 import { TYPE_SCALE } from '../typography/scale';
-import { GlyphButton } from './GlyphButton';
 import { IS_WEB, MUSIC_LIBRARY_CSS, MUSIC_LIBRARY_STYLE_ID, resolveMusicLibraryPaint } from './shared';
 import type { SearchFieldProps } from './types';
 
@@ -134,8 +134,12 @@ function SearchFieldComponent({
       />
       {hasText ? (
         <GlyphButton
-          label={clearLabel}
+          accessibilityLabel={clearLabel}
           size={32}
+          icon={RiCloseLine}
+          glyphSize={20}
+          color={paint.textMuted}
+          hoverColor={paint.textMuted}
           fill="transparent"
           hoverFill={paint.hover}
           ring={paint.ring}
@@ -144,25 +148,27 @@ function SearchFieldComponent({
             inputRef.current?.focus();
           }}
           testID={testID ? `${testID}-clear` : undefined}
-        >
-          <RiCloseLine width={20} height={20} fill={paint.textMuted} />
-        </GlyphButton>
+        />
       ) : null}
       {onBrowsePress ? (
         <>
           <View style={{ width: 1, height: 24, backgroundColor: paint.divider }} />
           <GlyphButton
-            label={browseLabel}
+            accessibilityLabel={browseLabel}
             size={40}
+            icon={RiCompass3Line}
+            glyphSize={22}
+            color={paint.textMuted}
+            hoverColor={paint.textMuted}
+            activeColor={paint.text}
+            activeHoverColor={paint.text}
+            pressed={browseActive}
             fill={browseActive ? paint.selected : 'transparent'}
             hoverFill={browseActive ? paint.selected : paint.fieldHover}
-            pressedState={browseActive}
             ring={paint.ring}
             onPress={onBrowsePress}
             testID={testID ? `${testID}-browse` : undefined}
-          >
-            <RiCompass3Line width={22} height={22} fill={browseActive ? paint.text : paint.textMuted} />
-          </GlyphButton>
+          />
         </>
       ) : null}
     </Pressable>

package/src/music-library/SearchResultTabs.tsx

@@ -1,92 +1,31 @@
-import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { Pressable, ScrollView, View } from 'react-native';
+import React, { memo, useCallback, useEffect, useRef } from 'react';
+import { Platform, View } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
+import { Chip, ChipRow } from '../chip';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
-import { borderRadius } from '../styles/tokens';
-import type { WebCssStyle } from '../styles/web-view-style';
-import { resolveAccentColors } from '../theme/accent-colors';
-import { pressedSurface } from '../theme/press-colors';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import { IS_WEB, MUSIC_LIBRARY_CSS, MUSIC_LIBRARY_STYLE_ID, resolveMusicLibraryPaint } from './shared';
-import type { SearchResultTab, SearchResultTabsProps } from './types';
+import { MUSIC_LIBRARY_CSS, MUSIC_LIBRARY_STYLE_ID } from './shared';
+import type { SearchResultTabsProps } from './types';
 
 /**
  * The result-type pills under the search field: "All, Songs, Artists, …".
  *
- *   pill      32 tall, full pill, 12 side padding, 8 apart, body-medium
- *   rest      the neutral subtle pair (`resolveAccentColors(default, subtle)`),
- *             the same paint an unselected `Chip` takes
- *   selected  the primary subtle pair, as a selected `Chip`
- *   hover     the pressed surface of the rest pair (colour only)
+ * Each pill is a `Chip` on the `xl` rung (32 tall, full pill, 12 side padding,
+ * body-medium) — the rung this row used to draw by hand, with its own copy of
+ * the accent recipe, its own hover fill and its own focus-ring variable. Rest
+ * is the neutral subtle pair and selected the brand one, which is what
+ * `Chip`'s `selected` already means.
  *
- * The row scrolls sideways (hidden scrollbar on web) when it does not fit.
+ * The row is a `ChipRow`, so it scrolls sideways with an edge fade rather than
+ * a pill stopping mid-glyph at the edge.
  *
- * Semantics: `role="tablist"`, each pill a `tab` with `aria-selected`. On web
- * the row is one tab stop (the selected pill); ArrowLeft / ArrowRight / Home /
- * End move focus, Enter and Space select.
+ * Semantics: `role="tablist"`, each pill a `tab` with `aria-selected` —
+ * `Chip`'s `role="tab"`, which picks `aria-selected` over `aria-pressed`
+ * because `aria-pressed` on a tab is invalid. On web the row is one tab stop
+ * (the selected pill); ArrowLeft / ArrowRight / Home / End move focus, Enter
+ * and Space select.
  */
 
-const PILL_HEIGHT = 32;
-
-interface PillProps {
-  tab: SearchResultTab;
-  selected: boolean;
-  tabbable: boolean;
-  onSelect: (value: string) => void;
-  onKey: (value: string, event: { key: string; preventDefault: () => void }) => void;
-  register: (value: string, node: View | null) => void;
-  testID?: string;
-}
-
-function Pill({ tab, selected, tabbable, onSelect, onKey, register, testID }: PillProps) {
-  const theme = useTheme();
-  const paint = useMemo(() => resolveMusicLibraryPaint(theme), [theme]);
-  const [hovered, setHovered] = useState(false);
-  const colors = useMemo(
-    () => resolveAccentColors(theme.colors, selected ? 'primary' : 'default', 'subtle'),
-    [theme.colors, selected],
-  );
-  const hoverFill = useMemo(
-    () => pressedSurface(theme.colors, colors.background, colors.foreground),
-    [theme.colors, colors],
-  );
-  const style: WebCssStyle = {
-    height: PILL_HEIGHT,
-    borderRadius: borderRadius.full,
-    paddingLeft: 12,
-    paddingRight: 12,
-    justifyContent: 'center',
-    backgroundColor: hovered ? hoverFill : colors.background,
-    flexShrink: 0,
-    '--bloom-music-ring': paint.ring,
-  };
-  return (
-    <Pressable
-      ref={(node) => register(tab.value, node)}
-      {...webDataSet({ bloomMusicFocusable: '' })}
-      {...(IS_WEB
-        ? {
-            tabIndex: tabbable ? 0 : -1,
-            onKeyDown: (event: { key: string; preventDefault: () => void }) => onKey(tab.value, event),
-          }
-        : null)}
-      role="tab"
-      accessibilityLabel={tab.label}
-      aria-selected={selected}
-      onPress={() => onSelect(tab.value)}
-      onHoverIn={() => setHovered(true)}
-      onHoverOut={() => setHovered(false)}
-      style={style}
-      testID={testID}
-    >
-      <Text variant="body-medium" numberOfLines={1} style={{ color: colors.foreground }}>
-        {tab.label}
-      </Text>
-    </Pressable>
-  );
-}
+const IS_WEB = Platform.OS === 'web';
 
 function SearchResultTabsComponent({
   tabs,
@@ -140,29 +79,29 @@ function SearchResultTabsComponent({
   const hasSelection = tabs.some((tab) => tab.value === value);
 
   return (
-    <ScrollView
-      {...webDataSet({ bloomMusicScrollX: '' })}
-      horizontal
-      showsHorizontalScrollIndicator={false}
-      role="tablist"
-      accessibilityLabel={accessibilityLabel}
-      style={[{ flexGrow: 0 }, style]}
-      contentContainerStyle={{ gap: 8, paddingTop: 2, paddingBottom: 2 }}
-      testID={testID}
-    >
-      {tabs.map((tab, index) => (
-        <Pill
-          key={tab.value}
-          tab={tab}
-          selected={tab.value === value}
-          tabbable={hasSelection ? tab.value === value : index === 0}
-          onSelect={onValueChange}
-          onKey={onKey}
-          register={register}
-          testID={testID ? `${testID}-${tab.value}` : undefined}
-        />
-      ))}
-    </ScrollView>
+    <ChipRow role="tablist" accessibilityLabel={accessibilityLabel} style={style} testID={testID}>
+      {tabs.map((tab, index) => {
+        const selected = tab.value === value;
+        const tabbable = hasSelection ? selected : index === 0;
+        return (
+          <Chip
+            key={tab.value}
+            ref={(node: View | null) => register(tab.value, node)}
+            size="xl"
+            role="tab"
+            selected={selected}
+            accessibilityLabel={tab.label}
+            onPress={() => onValueChange(tab.value)}
+            {...(IS_WEB
+              ? { tabIndex: tabbable ? 0 : -1, onKeyDown: (event: { key: string; preventDefault: () => void }) => onKey(tab.value, event) }
+              : null)}
+            testID={testID ? `${testID}-${tab.value}` : undefined}
+          >
+            {tab.label}
+          </Chip>
+        );
+      })}
+    </ChipRow>
   );
 }
 

package/src/music-library/TopResultCard.tsx

@@ -1,11 +1,11 @@
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Pressable, View } from 'react-native';
 
-import { webDataSet } from '../checkbox/shared';
 import { PlayButton } from '../media-controls';
 import { adoptStyleSheet } from '../styles/adopt-style-sheet';
 import { borderRadius } from '../styles/tokens';
 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 { Cover } from './Cover';

package/src/music-library/shared.ts

@@ -12,7 +12,12 @@ import type {
   LibraryPanelLabels,
   LibrarySort,
 } from './types';
-import { contrastRatio, relativeLuminance } from '../styles/color-contrast';
+import {
+  AA_TEXT_CONTRAST,
+  contrastRatio,
+  darkenUntilContrast,
+  relativeLuminance,
+} from '../styles/color-contrast';
 
 export const IS_WEB = Platform.OS === 'web';
 
@@ -178,7 +183,7 @@ export const TILE_LIGHT_TEXT = '#ffffff';
 export const TILE_DARK_TEXT = '#141414';
 
 /**
- * A browse tile's fill and title colour, always at least 4.5:1.
+ * A browse tile's fill and title colour, always at least AA.
  *
  * White when it clears 4.5:1 on the colour; otherwise near-black when THAT
  * does. A mid-grey clears neither (`#777777` is 4.48 against white), so the
@@ -191,13 +196,11 @@ export function browseTilePaint(
   fallback: { background: string; text: string },
 ): { background: string; text: string } {
   if (relativeLuminance(color) === null) return fallback;
-  if (contrastRatio(color, TILE_LIGHT_TEXT) >= 4.5) return { background: color, text: TILE_LIGHT_TEXT };
-  if (contrastRatio(color, TILE_DARK_TEXT) >= 4.5) return { background: color, text: TILE_DARK_TEXT };
-  for (let alpha = 0.05; alpha <= 1; alpha += 0.05) {
-    const darker = mixColor(color, '#000000', alpha);
-    if (contrastRatio(darker, TILE_LIGHT_TEXT) >= 4.5) return { background: darker, text: TILE_LIGHT_TEXT };
+  for (const text of [TILE_LIGHT_TEXT, TILE_DARK_TEXT]) {
+    if (contrastRatio(color, text) >= AA_TEXT_CONTRAST) return { background: color, text };
   }
-  return { background: '#000000', text: TILE_LIGHT_TEXT };
+  const darker = darkenUntilContrast(color, TILE_LIGHT_TEXT, AA_TEXT_CONTRAST);
+  return { background: darker?.color ?? '#000000', text: TILE_LIGHT_TEXT };
 }
 
 // ---------------------------------------------------------------------------

package/src/notification/types.ts

@@ -3,6 +3,7 @@ import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { AvatarProps } from '../avatar';
 import type { ButtonVariant } from '../button';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 /**
  * `warning` is Bloom's addition to `neutral | information | success | error`,
@@ -13,11 +14,8 @@ export type NotificationStatus = 'neutral' | 'information' | 'success' | 'warnin
 export type NotificationPresence = 'online' | 'busy' | 'offline';
 
 /** A leading glyph component — pass the component (`RiMailFill`), not an element. */
-export type NotificationIconComponent = React.ComponentType<{
-  width?: number;
-  height?: number;
-  fill?: string;
-}>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type NotificationIconComponent = BloomIconComponent;
 
 /** Avatar leading visual. `size` is fixed at 40 by the card. */
 export type NotificationAvatar = Omit<AvatarProps, 'size'> & {

package/src/notification-center/types.ts

@@ -2,13 +2,15 @@ import type { ComponentType } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { ButtonVariant } from '../button/types';
+import type { BloomIconComponent } from '../icons/icon-component';
 
 export type NotificationCenterTab = 'all' | 'mentions' | 'system';
 export type NotificationCenterCategory = Exclude<NotificationCenterTab, 'all'> | 'activity';
 export type NotificationCenterStatus = 'neutral' | 'information' | 'success' | 'error';
 
 /** A Remix-style icon: `width` / `height` / `fill`. */
-export type NotificationCenterIcon = ComponentType<{ width?: number; height?: number; fill?: string }>;
+/** @deprecated Use `BloomIconComponent` from `@oxy.so/bloom/icons`; this is an alias of it. */
+export type NotificationCenterIcon = BloomIconComponent;
 
 /**
  * Avatar tints for initials (`neutral`, `blue`, `lime`, `pink`),

package/src/offering-badge/OfferingBadge.tsx

@@ -1,31 +1,18 @@
-import React, { memo, useMemo } from 'react';
-import { View, type ViewStyle } from 'react-native';
+import React, { memo } from 'react';
 
-import { bloomShadowStyle } from '../design-tokens/shadows';
-import { borderRadius } from '../styles/tokens';
-import { useTheme } from '../theme/use-theme';
-import { Text } from '../typography';
-import {
-  OFFERING_BADGE_GEOMETRY,
-  OFFERING_ICONS,
-  OFFERING_LABELS,
-  resolveOfferingBadgePaint,
-} from './shared';
+import { Badge } from '../badge';
+import { OFFERING_BADGE_RUNG, OFFERING_ICONS, OFFERING_LABELS, OFFERING_TONES } from './shared';
 import type { OfferingBadgeProps } from './types';
 
 /**
  * A small pill naming how a home is offered: for rent, for sale, as a vacation
  * rental, or for a swap.
  *
- *             height  padding-x  icon  text
- *   small     20      8          12    caption-1-semibold
- *   medium    24      10         14    body-2-semibold
- *
- * Full pill radius; 4 between the icon and the label; one line, truncated.
- *
- *   tinted    the offering's fixed tone (rent info, sale success, vacation
- *             rental warning, swap neutral), its `subtle` pair
- *   onMedia   a light pill with shadow-s, for over a photo
+ * It is a PRESET over `Badge`'s label rungs, not a badge of its own: the
+ * geometry, the paint, the icon slot and the over-a-photo fill are all
+ * `Badge`'s (`label-small` = 20 tall, `label-medium` = 24). What lives here is
+ * the housing vocabulary — which word, which glyph and which FIXED tone each
+ * offering takes (`shared.ts`).
  *
  * It is text, not a control: no role, and the icon is hidden from assistive
  * technology, so it reads as its label.
@@ -39,41 +26,18 @@ function OfferingBadgeComponent({
   style,
   testID,
 }: OfferingBadgeProps) {
-  const theme = useTheme();
-  const paint = useMemo(() => resolveOfferingBadgePaint(theme, offering, variant), [theme, offering, variant]);
-  const geometry = OFFERING_BADGE_GEOMETRY[size];
-  const Icon = icon === true ? OFFERING_ICONS[offering] : icon === false ? null : icon;
-
-  const pillStyle: ViewStyle = {
-    flexDirection: 'row',
-    alignItems: 'center',
-    alignSelf: 'flex-start',
-    flexShrink: 1,
-    minWidth: 0,
-    gap: geometry.gap,
-    height: geometry.height,
-    paddingLeft: Icon ? geometry.paddingHorizontal - 2 : geometry.paddingHorizontal,
-    paddingRight: geometry.paddingHorizontal,
-    borderRadius: borderRadius.full,
-    backgroundColor: paint.background,
-    ...(paint.shadow ? bloomShadowStyle(paint.shadow) : null),
-  };
+  const Icon = icon === true ? OFFERING_ICONS[offering] : icon === false ? undefined : icon;
 
   return (
-    <View style={[pillStyle, style]} testID={testID}>
-      {Icon ? (
-        <View aria-hidden importantForAccessibility="no-hide-descendants" testID={testID ? `${testID}-icon` : undefined}>
-          <Icon width={geometry.icon} height={geometry.icon} fill={paint.icon} />
-        </View>
-      ) : null}
-      <Text
-        variant={geometry.type}
-        numberOfLines={1}
-        style={{ flexShrink: 1, minWidth: 0, color: paint.foreground }}
-      >
-        {label ?? OFFERING_LABELS[offering]}
-      </Text>
-    </View>
+    <Badge
+      content={label ?? OFFERING_LABELS[offering]}
+      icon={Icon}
+      size={OFFERING_BADGE_RUNG[size]}
+      color={OFFERING_TONES[offering]}
+      variant={variant === 'onMedia' ? 'onMedia' : 'subtle'}
+      style={style}
+      testID={testID}
+    />
   );
 }