@oxy.so/bloom 3.6.0 → 4.0.0

package/src/app-shell/AppShellHeader.tsx

@@ -52,16 +52,7 @@ const AppShellHeaderComponent: React.FC<AppShellHeaderProps> = ({
       >
         <View style={{ minWidth: 0, flexDirection: 'row', alignItems: 'center', gap: 6 }}>
           {showMenu ? (
-            <Button
-              variant="secondary"
-              size="medium"
-              iconOnly
-              leadingIcon={menuOpen ? RiCloseLine : RiMenuLine}
-              accessibilityLabel="Open navigation"
-              aria-expanded={menuOpen}
-              onPress={onMenuPress}
-              testID={testID ? `${testID}-menu` : undefined}
-            />
+            <Button size="md" icon={menuOpen ? RiCloseLine : RiMenuLine} accessibilityLabel="Open navigation" aria-expanded={menuOpen} onPress={onMenuPress} testID={testID ? `${testID}-menu` : undefined} appearance="plain" tone="neutral" />
           ) : null}
           {title != null ? (
             <Text

package/src/app-shell/NotificationBell.tsx

@@ -2,7 +2,6 @@ import React, { memo, useMemo, useState } from 'react';
 import { View } from 'react-native';
 
 import { Button } from '../button';
-import { colorRamp, DANGER_TABLE, resolveButtonRamps } from '../button/shared';
 import { useInteractionState } from '../hooks/use-interaction-state';
 import { RiNotificationLine } from '../icons/remix/RiNotificationLine';
 import { NotificationCenter } from '../notification-center';
@@ -38,11 +37,11 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
   const { state: hovered, onIn, onOut } = useInteractionState();
   const unread = unreadCount ?? notifications.filter((item) => item.unread).length;
   const palette = useMemo(() => {
-    const { neutral: n } = resolveButtonRamps(theme);
     return {
-      badge: colorRamp(theme.colors.negative, DANGER_TABLE)[600],
+      badge: theme.colors.error,
+      badgeForeground: theme.colors.errorForeground,
       // `border-background-primary-default`: the secondary button's own fill.
-      ring: theme.isDark ? n[800] : theme.colors.card,
+      ring: theme.colors.card,
     };
   }, [theme]);
 
@@ -54,14 +53,7 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
         {...({ onPointerEnter: onIn, onPointerLeave: onOut })}
       >
         <PopoverTrigger asChild label={accessibilityLabel}>
-          <Button
-            variant="secondary"
-            size="medium"
-            iconOnly
-            leadingIcon={RiNotificationLine}
-            accessibilityLabel={accessibilityLabel}
-            testID={testID}
-          />
+          <Button size="md" icon={RiNotificationLine} accessibilityLabel={accessibilityLabel} testID={testID} appearance="plain" tone="neutral" />
         </PopoverTrigger>
         {unread > 0 ? (
           <View
@@ -81,7 +73,7 @@ const NotificationBellComponent: React.FC<NotificationBellProps> = ({
               backgroundColor: palette.badge,
             }}
           >
-            <Text style={{ width: 16, textAlign: 'center', fontSize: 10, lineHeight: 16, fontWeight: '700', color: '#ffffff' }}>
+            <Text style={{ width: 16, textAlign: 'center', fontSize: 10, lineHeight: 16, fontWeight: '700', color: palette.badgeForeground }}>
               {unread}
             </Text>
           </View>

package/src/app-shell/ProOfferCard.tsx

@@ -13,7 +13,6 @@ import Animated, {
 import Svg, { Defs, LinearGradient, Mask, Rect, Stop } from 'react-native-svg';
 
 import { Button, CloseButton } from '../button';
-import { ACCENT_TABLE, colorRamp, resolveButtonRamps } from '../button/shared';
 import { BREAKPOINTS } from '../styles/breakpoints';
 import { WEB_POSITION_FIXED, type WebCssStyle } from '../styles/web-view-style';
 import { Z_INDEX } from '../styles/z-index';
@@ -28,7 +27,7 @@ import type { ProOfferCardProps } from './types';
  *   card       280 wide (full width minus 12 each side under `sm`), 12 from
  *              the bottom-left, radius 16, 1px border-button-white,
  *              background-secondary, p16, gap 12, shadow-waitlist
- *   backdrop   a light band across the top (default: accent-200 → accent-100 →
+ *   backdrop   a tonal band across the top (card → raised surface →
  *              clear, diagonal, 70%), masked from opaque at 38% to clear
  *   copy       mark, then title body-medium / description body-2-regular
  *              secondary, 4 apart
@@ -135,16 +134,14 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
   const reducedMotion = useReducedMotion();
   const [ctaWidth, setCtaWidth] = useState(0);
   const palette = useMemo(() => {
-    const { neutral: n } = resolveButtonRamps(theme);
-    const accent = colorRamp(theme.colors.primary, ACCENT_TABLE);
     return {
-      surface: theme.isDark ? n[900] : n[100],
-      border: theme.isDark ? n[800] : theme.colors.card,
+      surface: theme.colors.backgroundSecondary,
+      border: theme.colors.borderLight,
       shadow: theme.isDark ? WAITLIST_SHADOW.dark : WAITLIST_SHADOW.light,
-      from: accent[200],
-      via: accent[100],
+      from: theme.colors.card,
+      via: theme.colors.backgroundTertiary,
       text: theme.colors.text,
-      secondary: n[500],
+      secondary: theme.colors.textSecondary,
     };
   }, [theme]);
 
@@ -223,7 +220,7 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
         style={{ width: '100%' }}
         onLayout={(event: LayoutChangeEvent) => setCtaWidth(event.nativeEvent.layout.width)}
       >
-        <Button variant="primary" size="medium" fullWidth style={{ width: '100%' }} onPress={onCtaPress}>
+        <Button size="md" style={{ width: "100%" }} onPress={onCtaPress} appearance="solid" tone="accent">
           {ctaLabel}
         </Button>
         <View

package/src/app-shell/ResponsiveNavigation.tsx

@@ -0,0 +1,81 @@
+import React, { useEffect, useRef, useState, type ReactNode } from 'react';
+import { View, type LayoutChangeEvent, type StyleProp, type ViewStyle } from 'react-native';
+import Animated, { cancelAnimation, Easing, runOnJS, useAnimatedStyle, useReducedMotion, useSharedValue, withTiming } from 'react-native-reanimated';
+
+type Placement = 'rail' | 'sidebar';
+interface Props {
+  placement: Placement;
+  children: (placement: Placement) => ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+const EASE = Easing.bezier(0.4, 0, 0.2, 1);
+
+/** A single navigation tree: fade out, replace at zero opacity, resize and reveal. */
+export function ResponsiveNavigation({ placement, children, style, testID }: Props) {
+  const reducedMotion = useReducedMotion();
+  const [shown, setShown] = useState(placement);
+  const [transitioning, setTransitioning] = useState(false);
+  const shownRef = useRef(placement);
+  const naturalWidth = useRef(0);
+  const generation = useRef(0);
+  const moving = useRef(false);
+  const opacity = useSharedValue(1);
+  const width = useSharedValue(0);
+
+  const finish = (version: number) => {
+    if (version !== generation.current) return;
+    moving.current = false;
+    setTransitioning(false);
+  };
+  const commit = (next: Placement, version: number) => {
+    if (version !== generation.current) return;
+    shownRef.current = next;
+    setShown(next);
+    opacity.value = withTiming(1, { duration: 200, easing: EASE }, finished => {
+      if (finished) runOnJS(finish)(version);
+    });
+  };
+
+  useEffect(() => {
+    const version = ++generation.current;
+    cancelAnimation(opacity);
+    cancelAnimation(width);
+    if (reducedMotion || naturalWidth.current === 0) {
+      shownRef.current = placement;
+      setShown(placement);
+      moving.current = false;
+      setTransitioning(false);
+      opacity.value = 1;
+      return;
+    }
+    if (placement === shownRef.current && !moving.current) return;
+    if (!moving.current) width.value = naturalWidth.current;
+    moving.current = true;
+    setTransitioning(true);
+    if (placement === shownRef.current) {
+      width.value = withTiming(naturalWidth.current, { duration: 200, easing: EASE });
+      opacity.value = withTiming(1, { duration: 200, easing: EASE }, finished => {
+        if (finished) runOnJS(finish)(version);
+      });
+    } else {
+      opacity.value = withTiming(0, { duration: 90, easing: EASE }, finished => {
+        if (finished) runOnJS(commit)(placement, version);
+      });
+    }
+    return () => { cancelAnimation(opacity); cancelAnimation(width); };
+  }, [placement, reducedMotion, opacity, width]);
+
+  const measure = (event: LayoutChangeEvent) => {
+    const nextWidth = event.nativeEvent.layout.width;
+    naturalWidth.current = nextWidth;
+    if (moving.current) width.value = withTiming(nextWidth, { duration: 160, easing: EASE });
+  };
+  const frameStyle = useAnimatedStyle(() => ({ width: transitioning ? width.value : 'auto' }), [transitioning, width]);
+  const contentStyle = useAnimatedStyle(() => ({ opacity: opacity.value }), [opacity]);
+  return <Animated.View testID={testID ? `${testID}-frame` : undefined} style={[{ flexShrink: 0, minHeight: 0 }, frameStyle]}>
+    <Animated.View style={[{ flex: 1, minHeight: 0, alignSelf: 'flex-start' }, contentStyle]}>
+      <View testID={testID} onLayout={measure} style={[{ flex: 1, minHeight: 0, alignSelf: 'flex-start' }, style]}>{children(shown)}</View>
+    </Animated.View>
+  </Animated.View>;
+}

package/src/app-shell/index.ts

@@ -1,4 +1,7 @@
-export { AppShell } from './AppShell';
+import { createAppShell } from './AppShell';
+import { BottomBar } from '../bottom-bar';
+import { Fab } from '../fab';
+export const AppShell = createAppShell(BottomBar, Fab);
 export { AppShellHeader } from './AppShellHeader';
 export { AppShellMenuButton } from './AppShellMenuButton';
 export { APP_SHELL_DEFAULTS } from './constants';
@@ -8,6 +11,8 @@ export { NotificationBell } from './NotificationBell';
 export { ProOfferCard } from './ProOfferCard';
 
 export type {
+  AppShellNavigationPlacement,
+  AppShellNavigationItem,
   AppShellBarVisibility,
   AppShellBreakpoint,
   AppShellDrawer,

package/src/app-shell/index.web.ts

@@ -0,0 +1,32 @@
+// AUTO-GENERATED by scripts/generate-platform-exports.mjs — DO NOT EDIT.
+// Source of truth: src/app-shell/index.ts.
+// Re-run `bun run generate:exports` (or any `bun run build`) after
+// changing that barrel or the set of web-forked subpaths.
+
+import { createAppShell } from './AppShell';
+import { BottomBar } from '../bottom-bar/index.web';
+import { Fab } from '../fab/index.web';
+export const AppShell = createAppShell(BottomBar, Fab);
+export { AppShellHeader } from './AppShellHeader';
+export { AppShellMenuButton } from './AppShellMenuButton';
+export { APP_SHELL_DEFAULTS } from './constants';
+export { useAppShell } from './context';
+export type { AppShellContextValue } from './context';
+export { NotificationBell } from './NotificationBell';
+export { ProOfferCard } from './ProOfferCard';
+
+export type {
+  AppShellNavigationPlacement,
+  AppShellNavigationItem,
+  AppShellBarVisibility,
+  AppShellBreakpoint,
+  AppShellDrawer,
+  AppShellPane,
+  AppShellScroll,
+  AppShellVariant,
+  AppShellHeaderProps,
+  AppShellMenuButtonProps,
+  AppShellProps,
+  NotificationBellProps,
+  ProOfferCardProps,
+} from './types';

package/src/app-shell/types.ts

@@ -64,7 +64,7 @@ export type AppShellScroll = 'document' | 'container' | 'fixed';
  */
 export type AppShellBarVisibility = 'compact' | 'always';
 
-export interface AppShellProps {
+export interface AppShellEngineProps {
   /**
    * The layout shape. Defaults to `dashboard` — the behaviour this component
    * had before variants existed, down to the pixel.
@@ -313,3 +313,40 @@ export interface ProOfferCardProps {
   style?: StyleProp<ViewStyle>;
   testID?: string;
 }
+
+export type AppShellNavigationPlacement = 'auto' | 'bottom' | 'rail' | 'sidebar';
+export interface AppShellNavigationItem {
+  value: string;
+  label: string;
+  icon: ReactNode;
+}
+export interface AppShellNavigationProps {
+  active?: boolean;
+  navigation?: AppShellNavigationItem[];
+  value?: string;
+  onValueChange?: (value: string) => void;
+  navigationPlacement?: AppShellNavigationPlacement;
+  navigationMaterial?: 'solid' | 'translucent';
+  /** Bottom action follows scroll collapse by hiding (default), or remains visible. */
+  bottomActionBehavior?: 'hide' | 'visible';
+  /** external: the child list owns scrolling; avoids nested virtualized lists. */
+  scroll?: AppShellScroll | 'auto' | 'external';
+  /** Sidebar configuration, including card (detached, default) or docked surface. Also applies with navigation. */
+  sidebar?: Omit<SidebarProps, 'mobile' | 'onClose'>;
+  primaryAction?: import('../fab/types').FabProps;
+  title?: string;
+  breadcrumb?: ReactNode;
+  actions?: ReactNode;
+  header?: ReactNode;
+  children?: ReactNode;
+  contentMaxWidth?: number;
+  overlay?: ReactNode;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+
+/** Additive entry point: legacy layout variants and adaptive navigation share the same chrome. */
+export type AppShellProps = Omit<AppShellEngineProps, 'scroll'> & AppShellNavigationProps & {
+  scroll?: AppShellScroll | 'auto' | 'external';
+};

package/src/appearance/BloomScope.tsx

@@ -0,0 +1,10 @@
+import React, { useContext, useMemo } from 'react';
+import { BloomAppearanceContext } from './context';
+import type { BloomScopeProps } from './types';
+
+/** A visual environment only: never inherits actions, selection or disabled state. */
+export function BloomScope({ children, size, tone }: BloomScopeProps) {
+  const parent = useContext(BloomAppearanceContext);
+  const value = useMemo(() => ({ size: size ?? parent.size, tone: tone ?? parent.tone }), [size, tone, parent]);
+  return <BloomAppearanceContext.Provider value={value}>{children}</BloomAppearanceContext.Provider>;
+}

package/src/appearance/colors.ts

@@ -0,0 +1,14 @@
+import { resolveAccentColors, type AccentColors, type AccentTone } from '../theme/accent-colors';
+import type { ThemeColors } from '../theme/types';
+import type { BloomAppearance, BloomTone } from './types';
+
+const PALETTE: Record<BloomTone, AccentTone> = {
+  neutral: 'default', accent: 'primary', support: 'secondary', action: 'tertiary', success: 'success', warning: 'warning', danger: 'error', info: 'info',
+};
+
+/** Uses paired semantic colors; never manufactures alpha from a token. */
+export function resolveBloomColors(colors: ThemeColors, tone: BloomTone, appearance: BloomAppearance): AccentColors {
+  const fill = appearance === 'outline' || appearance === 'plain' ? 'outlined' : appearance;
+  const resolved = resolveAccentColors(colors, PALETTE[tone], fill);
+  return appearance === 'plain' ? { ...resolved, border: 'transparent' } : resolved;
+}

package/src/appearance/context.ts

@@ -0,0 +1,13 @@
+import { createContext, useContext } from 'react';
+import type { BloomAppearanceProps } from './types';
+
+export const BloomAppearanceContext = createContext<BloomAppearanceProps>({});
+
+/** Explicit props override the nearest scope, then the family's defaults. */
+export function useBloomAppearance(
+  props: BloomAppearanceProps,
+  defaults: Required<BloomAppearanceProps>,
+): Required<BloomAppearanceProps> {
+  const scope = useContext(BloomAppearanceContext);
+  return { size: props.size ?? scope.size ?? defaults.size, tone: props.tone ?? scope.tone ?? defaults.tone };
+}

package/src/appearance/index.ts

@@ -0,0 +1,4 @@
+export { BloomScope } from './BloomScope';
+export { useBloomAppearance } from './context';
+export { resolveBloomColors } from './colors';
+export type { BloomSize, BloomTone, BloomAppearance, BloomAppearanceProps, BloomScopeProps } from './types';

package/src/appearance/legacy.ts

@@ -0,0 +1,10 @@
+import type { BloomSize } from './types';
+
+/** Normalize v3 size spellings at public boundaries; contexts use shared sizes. */
+export function normalizeBloomSize(size: string | undefined): BloomSize | undefined {
+  if (size === 'small') return 'sm';
+  if (size === 'medium' || size === 'default' || size === 'icon') return 'md';
+  if (size === 'large') return 'lg';
+  return size === 'xs' || size === 'sm' || size === 'md' || size === 'lg' ? size : undefined;
+}
+export type BloomSizeInput = BloomSize | 'small' | 'medium' | 'large' | 'default';

package/src/appearance/types.ts

@@ -0,0 +1,11 @@
+import type { PropsWithChildren } from 'react';
+
+/** Shared vocabulary. Families expose the meaningful subset of each axis. */
+export type BloomSize = 'xs' | 'sm' | 'md' | 'lg';
+export type BloomTone = 'neutral' | 'accent' | 'support' | 'action' | 'success' | 'warning' | 'danger' | 'info';
+export type BloomAppearance = 'solid' | 'subtle' | 'outline' | 'plain';
+export interface BloomAppearanceProps {
+  size?: BloomSize;
+  tone?: BloomTone;
+}
+export type BloomScopeProps = PropsWithChildren<BloomAppearanceProps>;

package/src/auth-card/AuthCard.tsx

@@ -10,7 +10,7 @@ import {
 } from 'react-native';
 
 import { Button } from '../button';
-import { BUTTON_SHADOW, resolveButtonRamps } from '../button/shared';
+import { BUTTON_SHADOW } from '../button/shared';
 import { Checkbox } from '../checkbox';
 import { Divider } from '../divider';
 import { useInteractionStates } from '../hooks/use-interaction-state';
@@ -122,45 +122,22 @@ interface AuthPalette {
   ring: string;
 }
 
-/**
- * Palette tokens, mapped onto Bloom's ramps:
- *
- *                               light         dark
- *   card surface                card          neutral-900 (background-secondary)
- *   border-button-default       neutral-200   neutral-700
- *   media panel                 neutral-100   neutral-900
- *   text-secondary              neutral-500   neutral-500
- *   text-tertiary               neutral-400   neutral-600
- *   foreground-icon-primary     text          text
- *   link / pressed              accent-600 / accent-800
- */
+/** Canonical surface, text and link roles; provider branding stays separate. */
 function resolveAuthPalette(theme: Theme): AuthPalette {
-  const { accent, neutral: n } = resolveButtonRamps(theme);
-  const shared = {
-    text: theme.colors.text,
-    textSecondary: n[500],
-    icon: theme.colors.text,
-    link: accent[600],
-    linkPressed: accent[800],
-    ring: accent[500],
+  const c = theme.colors;
+  return {
+    surface: c.card,
+    border: c.borderLight,
+    mediaSurface: c.backgroundSecondary,
+    shadow: theme.isDark ? BUTTON_SHADOW.dark : BUTTON_SHADOW.light,
+    text: c.text,
+    textSecondary: c.textSecondary,
+    textTertiary: c.textTertiary,
+    icon: c.text,
+    link: c.primarySubtleForeground,
+    linkPressed: c.primarySubtleForeground,
+    ring: c.primary,
   };
-  return theme.isDark
-    ? {
-        ...shared,
-        surface: n[900],
-        border: n[700],
-        mediaSurface: n[900],
-        shadow: BUTTON_SHADOW.dark,
-        textTertiary: n[600],
-      }
-    : {
-        ...shared,
-        surface: theme.colors.card,
-        border: n[200],
-        mediaSurface: n[100],
-        shadow: BUTTON_SHADOW.light,
-        textTertiary: n[400],
-      };
 }
 
 // ---------------------------------------------------------------------------
@@ -260,7 +237,7 @@ function AuthField({
           testID={testID}
           label={label}
           value={value}
-          onChangeText={onChangeText}
+          onValueChange={onChangeText}
           placeholder={placeholder}
           secureTextEntry={secure}
           autoComplete={autoComplete}
@@ -495,7 +472,7 @@ function AuthCardComponent({
           <View
             style={{ flexDirection: 'row', alignItems: 'center', justifyContent: 'space-between' }}>
             <Checkbox
-              size="small"
+              size="sm"
               label="Remember me"
               checked={remember}
               onCheckedChange={setRemember}
@@ -510,13 +487,7 @@ function AuthCardComponent({
           </View>
         )}
 
-        <Button
-          testID={testID ? `${testID}-submit` : undefined}
-          variant="primary"
-          size="medium"
-          fullWidth
-          style={{ alignSelf: 'stretch' }}
-          onPress={submit}>
+        <Button testID={testID ? `${testID}-submit` : undefined} size="md" style={{ width: "100%" }} onPress={submit} appearance="solid" tone="action">
           {copy.cta}
         </Button>
 

package/src/avatar/Avatar.tsx

@@ -1,3 +1,5 @@
+import { useContext } from 'react';
+import { BloomAppearanceContext } from '../appearance/context';
 import React, { memo, useMemo, useRef, useState } from 'react';
 import { View, Image, StyleSheet, Pressable, Platform } from 'react-native';
 import type { TextStyle } from 'react-native';
@@ -193,7 +195,8 @@ const AvatarComponent: React.FC<AvatarProps> = ({
   const { state: pressed, onIn: onPressIn, onOut: onPressOut } = useInteractionState();
   const theme = useTheme();
   const placeholderConfig = useAvatarPlaceholder();
-  const size = resolveAvatarSize(sizeProp);
+  const scope = useContext(BloomAppearanceContext);
+  const size = resolveAvatarSize(sizeProp ?? scope.size);
   const radius = size / 2;
   // `null` means "a circle", which is drawn with borderRadius and never reaches
   // the SVG renderer. Memoised so an inline `shape={{ d: … }}` object literal

package/src/avatar/initials.ts

@@ -3,7 +3,6 @@ import type { TextStyle } from 'react-native';
 import {
   ACCENT_TABLE,
   colorRamp,
-  resolveButtonRamps,
   type Ramp,
   type RampStop,
   type RampTable,
@@ -154,9 +153,7 @@ export function resolveAvatarTint(theme: Theme, color: AvatarColor): AvatarTint
     }
     case 'neutral':
     default: {
-      const { neutral: n } = resolveButtonRamps(theme);
-      const background = theme.isDark ? n[800] : n[300];
-      return { background, foreground: legibleStop(n, background, 500) };
+      return { background: theme.colors.backgroundTertiary, foreground: theme.colors.textSecondary };
     }
   }
 }

package/src/badge/Badge.tsx

@@ -1,3 +1,5 @@
+import { useBloomAppearance } from '../appearance';
+import { normalizeTagTone } from './shared';
 import React, { memo, useMemo } from 'react';
 import { View, type ViewStyle, type TextStyle } from 'react-native';
 
@@ -47,9 +49,11 @@ const PLACEMENT_CONFIG = {
 
 const BadgeComponent: React.FC<BadgeProps> = ({
   content,
-  variant = 'solid',
-  color = 'error',
-  size = 'medium',
+  variant: variantProp = 'solid',
+  appearance,
+  tone: toneProp,
+  color,
+  size: sizeProp,
   icon: Icon,
   dot = false,
   max,
@@ -61,16 +65,21 @@ const BadgeComponent: React.FC<BadgeProps> = ({
   testID,
 }) => {
   const theme = useTheme();
+  const scoped = useBloomAppearance({ size: ['xs','sm','md','lg'].includes(sizeProp ?? '') ? sizeProp as import('../appearance').BloomSize : undefined, tone: toneProp ?? (color ? normalizeTagTone(color) : undefined) }, {size: 'md', tone: 'danger'});
+  const size = sizeProp ?? scoped.size;
+  const tone = scoped.tone;
+  const variant = appearance ?? variantProp;
+
   // A dot has no label to make legible, so it always paints the tone's FILL. It
   // used to follow the variant, which made `dot variant="outlined"` a fully
   // transparent circle — visually absent, with markup that looks correct.
   const paint = useMemo(
-    () => resolveBadgePaint(theme, color, dot ? 'solid' : variant),
-    [theme, color, dot, variant],
+    () => resolveBadgePaint(theme, tone, dot ? 'solid' : variant),
+    [theme, tone, dot, variant],
   );
   // The status dot's halo is the same tone's tint — the recipe's `subtle` pair,
   // so it follows the preset and mode exactly as a subtle badge does.
-  const halo = useMemo(() => resolveBadgePaint(theme, color, 'subtle').background, [theme, color]);
+  const halo = useMemo(() => resolveBadgePaint(theme, tone, 'subtle').background, [theme, tone]);
   const geometry = BADGE_GEOMETRY[size];
   const attached = Boolean(children);
 

package/src/badge/shared.ts

@@ -1,3 +1,5 @@
+import { resolveBloomColors } from '../appearance/colors';
+import type { BloomAppearance, BloomTone } from '../appearance';
 import { resolveButtonRamps } from '../button/shared';
 import { resolveAccentColors, type AccentTone } from '../theme/accent-colors';
 import type { Theme } from '../theme/types';
@@ -51,6 +53,10 @@ export interface BadgeGeometry {
 }
 
 export const BADGE_GEOMETRY: Readonly<Record<BadgeSize, BadgeGeometry>> = {
+  xs: { height: 14, type: 'caption-2-semibold', paddingHorizontal: 3, icon: 9, gap: 2, dotSize: 4, halo: 6, core: 3, word: false },
+  sm: { height: 17, type: 'caption-2-semibold', paddingHorizontal: 4, icon: 10, gap: 2, dotSize: 6, halo: 8, core: 4, word: false },
+  md: { height: 18, type: 'caption-1-semibold', paddingHorizontal: 4, icon: 11, gap: 2, dotSize: 8, halo: 12, core: 6, word: false },
+  lg: { height: 24, type: 'body-semibold', paddingHorizontal: 6, icon: 14, gap: 4, dotSize: 10, halo: 16, core: 8, word: false },
   small: { height: 17, type: 'caption-2-semibold', paddingHorizontal: 4, icon: 10, gap: 2, dotSize: 6, halo: 8, core: 4, word: false },
   medium: { height: 18, type: 'caption-1-semibold', paddingHorizontal: 4, icon: 11, gap: 2, dotSize: 8, halo: 12, core: 6, word: false },
   large: { height: 24, type: 'body-semibold', paddingHorizontal: 6, icon: 14, gap: 4, dotSize: 10, halo: 16, core: 8, word: false },
@@ -78,11 +84,13 @@ export interface BadgePaint {
  *                           theme, so a badge that followed the mode would go
  *                           dark-on-dark over half the images in the library
  */
-export function resolveBadgePaint(theme: Theme, tone: AccentTone, variant: BadgeVariant): BadgePaint {
+export function resolveBadgePaint(theme: Theme, tone: AccentTone | BloomTone, variant: BadgeVariant | BloomAppearance): BadgePaint {
   if (variant === 'onMedia') {
     const { neutral } = resolveButtonRamps(theme);
     return { background: neutral[50], foreground: neutral[900], border: 'transparent', shadow: 's' };
   }
-  const pair = resolveAccentColors(theme.colors, tone, variant);
+  const pair = resolveBloomColors(theme.colors, normalizeTagTone(tone), variant === 'outlined' ? 'outline' : variant);
   return { ...pair, shadow: null };
 }
+
+export function normalizeTagTone(tone: AccentTone | BloomTone): BloomTone { return tone === 'primary' ? 'accent' : tone === 'error' ? 'danger' : tone === 'default' ? 'neutral' : tone as BloomTone; }

package/src/badge/types.ts

@@ -1,3 +1,4 @@
+import type { BloomAppearance, BloomSize, BloomTone } from '../appearance';
 import type { StyleProp, ViewStyle, TextStyle } from 'react-native';
 
 import type { BloomIconComponent } from '../icons/icon-component';
@@ -9,7 +10,7 @@ import type { AccentFill, AccentTone } from '../theme/accent-colors';
  * carrying an optional leading icon). `shared.ts` has the table and why the two
  * families differ in more than height.
  */
-export type BadgeSize = 'small' | 'medium' | 'large' | 'label-small' | 'label-medium';
+export type BadgeSize = BloomSize | 'small' | 'medium' | 'large' | 'label-small' | 'label-medium';
 
 /**
  * The three accent fills, plus `onMedia`: a light pill with a shadow that reads
@@ -24,6 +25,9 @@ export type BadgeIcon = BloomIconComponent;
 export type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
 
 export interface BadgeProps {
+  appearance?: BloomAppearance;
+  tone?: BloomTone;
+
   /** Text or number to display in the badge. */
   content?: string | number;
   /** How loudly the badge is painted. */

package/src/booking/shared.ts

@@ -39,20 +39,20 @@ export interface BookingPalette {
 
 export function resolveBookingPalette(theme: Theme): BookingPalette {
   const menu = resolveMenuPalette(theme);
-  const { accent, neutral: n } = resolveButtonRamps(theme);
+  const { accent } = resolveButtonRamps(theme);
   const dark = theme.isDark;
   return {
     surface: menu.surface,
     page: theme.colors.background,
     border: menu.border,
-    fieldBorder: dark ? n[600] : n[300],
+    fieldBorder: theme.colors.border,
     highlight: menu.rowHighlight,
     active: theme.colors.text,
     ring: accent[500],
     text: theme.colors.text,
     textSecondary: theme.colors.textSecondary,
     discount: resolveAccentColors(theme.colors, 'success', 'outlined').foreground,
-    tile: dark ? n[900] : n[100],
+    tile: theme.colors.backgroundSecondary,
   };
 }
 

package/src/bottom-bar/BottomBar.tsx

@@ -0,0 +1,11 @@
+import { createTabBar, createTabBarButton } from '../tab-bar/TabBarBase';
+import { SolidTabBarSurface } from '../tab-bar/surface-solid';
+import { ProgressiveBlur } from '../progressive-blur';
+import { BottomBarGlyph } from './glyph';
+import { BottomBarBase } from './BottomBarBase';
+import type { BottomBarProps } from './types';
+const Navigation = createTabBar(SolidTabBarSurface, ProgressiveBlur);
+const Item = createTabBarButton(BottomBarGlyph);
+export function BottomBar(props: BottomBarProps) {
+  return <BottomBarBase {...props} Navigation={Navigation} Item={Item} Blur={ProgressiveBlur} />;
+}