@oxy.so/bloom 5.4.1 → 6.0.0

package/src/activity-feed/ActivityFeed.tsx

@@ -152,11 +152,11 @@ function ActivityFeedComponent({
               </Text>
               {long ? (
                 <Button
-                  variant="text"
+
                   size="xs"
                   onPress={() => toggle(entry.id)}
                   accessibilityLabel={`${open ? lessLabel : moreLabel}: ${entry.title}`}
-                  testID={eid('reveal')}
+                  testID={eid('reveal')} tone="accent" appearance="plain"
                 >
                   {open ? lessLabel : moreLabel}
                 </Button>

package/src/agent-progress/AgentProgress.tsx

@@ -1,7 +1,7 @@
 import { SurfacePaint } from '../surface/SurfacePaint';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 import { Platform, Pressable, StyleSheet, View, type ViewStyle } from 'react-native';
 import Animated, {
@@ -834,7 +834,8 @@ function AgentProgressComponent({
   const theme = useTheme();
   const surfaceLayer = useSurfaceLayer();
   const customSurface = StyleSheet.flatten(style);
-  const surfaceFill = resolveSurfaceFill(String(customSurface?.backgroundColor ?? surfaceLayer.fill), false, surfaceLayer.parentFill);
+  const material = resolveSurfaceMaterial({ fill: String(customSurface?.backgroundColor ?? surfaceLayer.fill), parentFill: surfaceLayer.parentFill, parentLevel: surfaceLayer.parentLevel });
+  const { paintFill: paintFill, publishedFill: surfaceFill } = material;
   const palette = resolvePalette(theme);
   const reducedMotion = useReducedMotion();
 
@@ -1002,10 +1003,10 @@ function AgentProgressComponent({
     <Animated.View
       aria-live="polite"
       testID={testID}
-      style={[styles.card, cardStatic, style, cardStyle, { backgroundColor: 'transparent', ...surfaceFillVars(surfaceFill) }]}
+      style={[styles.card, cardStatic, style, cardStyle, { backgroundColor: 'transparent', ...material.vars }]}
     >
-      <SurfacePaint fill={surfaceFill} radius={customSurface?.borderRadius ?? CARD_RADIUS} />
-      <SurfaceLevelProvider level={surfaceLayer.level} fill={surfaceFill}>
+      <SurfacePaint fill={paintFill} radius={customSurface?.borderRadius ?? CARD_RADIUS} />
+      <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
       <Presence
         show={minimized}
         initial={false}

package/src/app-shell/AppShellMenuButton.tsx

@@ -25,15 +25,15 @@ const AppShellMenuButtonComponent: React.FC<AppShellMenuButtonProps> = ({
   if (!shell.drawerAvailable) return null;
   return (
     <Button
-      variant="secondary"
-      size="medium"
+
+      size="md"
       iconOnly
       leadingIcon={shell.drawerOpen ? RiCloseLine : RiMenuLine}
       accessibilityLabel={accessibilityLabel}
       aria-expanded={shell.drawerOpen}
       onPress={shell.toggleDrawer}
       style={style}
-      testID={testID}
+      testID={testID} tone="neutral" appearance="outline"
     />
   );
 };

package/src/app-shell/ProOfferCard.tsx

@@ -1,7 +1,7 @@
 import { SurfacePaint } from '../surface/SurfacePaint';
 import { useSurfaceLayer } from '../surface/use-surface-layer';
-import { resolveSurfaceFill } from '../surface/shared';
-import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
+import { SurfaceLevelProvider } from '../styles/surface-levels';
 import React, { memo, useEffect, useMemo, useState } from 'react';
 import { Platform, StyleSheet, View, useWindowDimensions, type LayoutChangeEvent, type ViewStyle } from 'react-native';
 import Animated, {
@@ -164,7 +164,8 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
 
   const surfaceLayer = useSurfaceLayer();
   const customSurface = StyleSheet.flatten(style);
-  const surfaceFill = resolveSurfaceFill(String(customSurface?.backgroundColor ?? surfaceLayer.fill), false, surfaceLayer.parentFill);
+  const material = resolveSurfaceMaterial({ fill: String(customSurface?.backgroundColor ?? surfaceLayer.fill), parentFill: surfaceLayer.parentFill, parentLevel: surfaceLayer.parentLevel });
+  const { paintFill: paintFill, publishedFill: surfaceFill } = material;
   const enter = useSharedValue(reducedMotion ? 1 : 0);
   useEffect(() => {
     enter.value = reducedMotion ? 1 : withDelay(enterDelay, withTiming(1, { duration: 300, easing: EASE_OUT }));
@@ -221,11 +222,11 @@ const ProOfferCardComponent: React.FC<ProOfferCardProps> = ({
         },
         enterStyle,
         style,
-        { backgroundColor: 'transparent', ...surfaceFillVars(surfaceFill) },
+        { backgroundColor: 'transparent', ...material.vars },
       ]}
     >
-      <SurfacePaint fill={surfaceFill} radius={customSurface?.borderRadius ?? 16} />
-      <SurfaceLevelProvider level={surfaceLayer.level} fill={surfaceFill}>
+      <SurfacePaint fill={paintFill} radius={customSurface?.borderRadius ?? 16} />
+      <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
       <View aria-hidden pointerEvents="none" style={backdropStyle}>
         {backdrop ?? <DefaultBackdrop from={palette.from} via={palette.via} />}
       </View>

package/src/booking/BookingCard.tsx

@@ -188,14 +188,14 @@ function BookingCardComponent({
       </View>
 
       <Button
-        variant="primary"
-        size="large"
+
+        size="lg"
         fullWidth
         onPress={onReserve}
         disabled={reserveDisabled}
         loading={loading}
         style={{ marginTop: 16, alignSelf: 'stretch' }}
-        testID={id('reserve')}
+        testID={id('reserve')} tone="accent" appearance="solid"
       >
         {buttonLabel}
       </Button>

package/src/booking/BookingLink.tsx

@@ -1,14 +1,14 @@
 import React from 'react';
 import type { GestureResponderEvent, StyleProp, TextStyle, ViewStyle } from 'react-native';
 
-import { Button } from '../button';
+import { LinkButton } from '../button';
 import type { TypeScaleVariant } from '../typography/scale';
 
 /**
  * INTERNAL — the family's underlined text button: a price row's label, the
  * guests panel's "Close", the bar's dates.
  *
- * It is `Button variant="link"` with the READING tone and the underline at rest
+ * It composes `LinkButton` with the READING tone and the underline at rest
  * (`linkTone="text"`, `underline="rest"`), which is exactly what it hand-rolled
  * before those two props existed: text-primary and underlined at rest,
  * text-secondary under a pointer or a press (colour only, no scale), a focus
@@ -48,12 +48,12 @@ export function BookingLink({
   ...handle
 }: BookingLinkProps) {
   return (
-    <Button
+    <LinkButton
       {...handle}
-      variant="link"
+
       linkTone="text"
       underline="rest"
-      size="small"
+      size="sm"
       textVariant={variant}
       onPress={onPress}
       disabled={disabled}
@@ -64,6 +64,6 @@ export function BookingLink({
       testID={testID}
     >
       {children}
-    </Button>
+    </LinkButton>
   );
 }

package/src/bottom-bar/BottomBar.tsx

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

package/src/bottom-bar/BottomBar.web.tsx

@@ -1,10 +1,10 @@
 import { createTabBar, createTabBarButton } from '../tab-bar/TabBarBase';
-import { TranslucentTabBarSurface } from '../tab-bar/surface-translucent';
+import { SharedTabBarSurface } from '../tab-bar/surface-paint';
 import { ProgressiveBlur } from '../progressive-blur/index.web';
 import { BottomBarGlyph } from './glyph';
 import { BottomBarBase } from './BottomBarBase';
 import type { BottomBarProps } from './types';
-const Navigation = createTabBar(TranslucentTabBarSurface, ProgressiveBlur);
+const Navigation = createTabBar(SharedTabBarSurface, ProgressiveBlur);
 const Item = createTabBarButton(BottomBarGlyph);
 export function BottomBar(props: BottomBarProps) {
   return <BottomBarBase {...props} Navigation={Navigation} Item={Item} Blur={ProgressiveBlur} />;

package/src/bottom-bar/BottomBarBase.tsx

@@ -80,7 +80,7 @@ export function BottomBarBase({ Navigation, Item, Blur, items, value, onValueCha
   return <View {...dirProps} testID={testID} pointerEvents="box-none" style={[{ height: bottom + footprint, justifyContent: 'flex-end' }, style]}>
     {blur && <Blur direction="bottom" style={{ position: 'absolute', left: 0, right: 0, bottom: 0, height: bottom + footprint + BLUR_BLEED }} />}
     <Animated.View testID={testID ? `${testID}-row` : undefined} onLayout={event => setRowWidth(event.nativeEvent.layout.width)} pointerEvents="box-none" style={[{ justifyContent: items.length ? 'center' : 'flex-end', alignSelf: 'center', width: '100%', maxWidth, paddingLeft: 12, paddingRight: 12, marginBottom: bottom, flexDirection: 'row', alignItems: 'center' }, rowStyle]}>
-      {items.length > 0 && <View testID={testID ? `${testID}-navigation` : undefined} style={{ width: navigationWidth, minWidth: 0 }}><ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ minWidth: '100%' }}><View style={{ width: Math.max(navigationWidth, items.length * 44 + 8) }}><Navigation scrollable={navigationWidth > 0 && navigationWidth < items.length * 44 + 8} embedded blur={false} material="translucent" minimizeProgress={progress}
+      {items.length > 0 && <View testID={testID ? `${testID}-navigation` : undefined} style={{ width: navigationWidth, minWidth: 0 }}><ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ minWidth: '100%' }}><View style={{ width: Math.max(navigationWidth, items.length * 44 + 8) }}><Navigation scrollable={navigationWidth > 0 && navigationWidth < items.length * 44 + 8} embedded blur={false} minimizeProgress={progress}
         activeProgress={activeProgress} onIndexLongPress={onValueLongPress ? index => { if (items[index]) onValueLongPress(items[index].name); } : undefined}
         activeIndex={items.findIndex(item => item.name === value)} onIndexChange={index => { if (items[index]) onValueChange(items[index].name); }}>
         {items.map((item, index) => <Item key={item.name} item={item} index={index} />)}

package/src/bottom-sheet/BottomSheetBase.tsx

@@ -1,45 +1,25 @@
+import { MOTION_RECIPES } from '../motion/recipes';
 import { surfaceStyle } from '../shapes/surface-style';
 import { SURFACE_SHAPES } from '../design-tokens/shapes';
 import type React from 'react';
 import { forwardRef, useImperativeHandle, useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import {
-    View,
-    StyleSheet,
-    Pressable,
-    Dimensions,
-    Platform,
-    type LayoutChangeEvent,
-    type ViewStyle,
-    type StyleProp,
-} from 'react-native';
+import { View, StyleSheet, Dimensions, Platform, type ViewStyle, type StyleProp } from 'react-native';
 import { Gesture, GestureDetector, type GestureType } from 'react-native-gesture-handler';
 import { adoptStyleSheet, dropStyleSheet } from '../styles/adopt-style-sheet';
 import type { WebCssStyle } from '../styles/web-view-style';
 import { SurfacePaint } from '../surface/SurfacePaint';
-import { resolveSurfaceFill } from '../surface/shared';
+import { resolveSurfaceMaterial } from '../surface/resolve-surface-material';
 import { SurfaceLevelProvider, surfaceFillVars } from '../styles/surface-levels';
 import { ScreenScope } from '../layout';
 import { Z_INDEX } from '../styles/z-index';
-import Animated, {
-    type AnimatedStyle,
-    interpolate,
-    runOnJS,
-    type SharedValue,
-    useAnimatedScrollHandler,
-    useAnimatedReaction,
-    useAnimatedStyle,
-    useDerivedValue,
-    useSharedValue,
-    withSpring,
-    withTiming,
-} from 'react-native-reanimated';
+import Animated, { interpolate, runOnJS, useAnimatedScrollHandler, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useSharedValue, withSpring, withTiming } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import { EDGE_GAP, windowEdgeGap } from '../layout/edge';
 import { Backdrop, BACKDROP_DIM_OPACITY } from '../overlay';
 import { ModalKeyboard } from '../overlay/ModalKeyboard';
 import { useTheme } from '../theme/use-theme';
 import { SheetKeyboardProvider } from './context';
-import type { BottomSheetRef, BottomSheetProps, BottomSheetShellProps, BottomSheetBaseProps } from './types';
+import type { BottomSheetRef, BottomSheetBaseProps } from './types';
 
 /** Hook that returns current screen dimensions and updates on rotation/resize. */
 function useScreenDimensions() {
@@ -56,6 +36,7 @@ function useScreenDimensions() {
 }
 
 const SPRING_CONFIG = {
+    reduceMotion: MOTION_RECIPES.expand.reduceMotion,
     damping: 25,
     stiffness: 300,
     mass: 0.8,
@@ -210,14 +191,14 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
             // it eventually fires, because its captured generation is stale.
             closeGenerationRef.current += 1;
             closeGeneration.value = closeGenerationRef.current;
-            opacity.value = withTiming(1, { duration: 250 });
+            opacity.value = withTiming(1, { ...MOTION_RECIPES.present, duration: 250 });
             translateY.value = withSpring(0, SPRING_CONFIG);
         } else if (rendered) {
             // Capture the generation for THIS close cycle so the animation
             // callback (running on the UI thread, scheduled back to JS) and
             // the fallback timer agree on which cycle they belong to.
             const generation = closeGenerationRef.current;
-            opacity.value = withTiming(0, { duration: 250 }, (finished) => {
+            opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
                 if (finished) {
                     runOnJS(finishClose)(generation);
                 }
@@ -361,7 +342,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                         // bumped the generation in between.
                         const generation = closeGeneration.value;
                         translateY.value = withSpring(screenHeightSV.value, { ...SPRING_CONFIG, velocity });
-                        opacity.value = withTiming(0, { duration: 250 }, (finished) => {
+                        opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
                             if (finished) runOnJS(finishClose)(generation);
                         });
                     } else {
@@ -420,7 +401,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                         ...SPRING_CONFIG,
                         velocity: velocity,
                     });
-                    opacity.value = withTiming(0, { duration: 250 }, (finished) => {
+                    opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
                         if (finished) {
                             runOnJS(finishClose)(generation);
                         }
@@ -477,7 +458,7 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                 if (shouldClose) {
                     const generation = closeGeneration.value;
                     translateY.value = withSpring(screenHeightSV.value, { ...SPRING_CONFIG, velocity });
-                    opacity.value = withTiming(0, { duration: 250 }, (finished) => {
+                    opacity.value = withTiming(0, { ...MOTION_RECIPES.dismiss, duration: 250 }, (finished) => {
                         if (finished) runOnJS(finishClose)(generation);
                     });
                 } else {
@@ -615,7 +596,9 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
 
     // The paint is absolute: gestures, measurements and layout stay on the existing sheet.
     const flatSurfaceStyle = StyleSheet.flatten(style as StyleProp<ViewStyle>);
-    const surfaceFill = resolveSurfaceFill(String(backgroundFill ?? flatSurfaceStyle?.backgroundColor ?? colors.background), false, colors.background);
+    const backingFill = String(backgroundFill ?? flatSurfaceStyle?.backgroundColor ?? colors.background);
+    const material = resolveSurfaceMaterial({ fill: backingFill, parentFill: colors.background, paint: !backgroundComponent, level: 0 });
+    const { paintFill, publishedFill: surfaceFill } = material;
     const surfaceRadius = flatSurfaceStyle?.borderRadius ?? flatSurfaceStyle?.borderTopLeftRadius ?? 24;
     const surfaceCorners: ViewStyle = {
         ...surfaceStyle({ curve: SURFACE_SHAPES.panel.curve }),
@@ -766,12 +749,12 @@ export const BottomSheetBase = forwardRef((props: BottomSheetBaseProps, ref: Rea
                         {backgroundComponent ? backgroundComponent({ style: styles.background }) : (
                             <View pointerEvents="none" style={[StyleSheet.absoluteFill, surfaceCorners, { overflow: 'hidden' }]}>
                                 <View pointerEvents="none" style={[StyleSheet.absoluteFill, { bottom: detached ? 0 : -(typeof surfaceRadius === 'number' ? surfaceRadius : 24) }]}>
-                                    <SurfacePaint fill={surfaceFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={surfaceRadius} />
+                                    <SurfacePaint fill={paintFill} shape={{ curve: SURFACE_SHAPES.panel.curve }} radius={surfaceRadius} />
                                 </View>
                             </View>
                         )}
 
-                        <SurfaceLevelProvider level={0} fill={surfaceFill}>
+                        <SurfaceLevelProvider level={material.level} fill={surfaceFill}>
                         {handleSlot}
 
                         {bodyContent}

package/src/button/Button.tsx

@@ -1,3 +1,4 @@
+import { useSurfaceLayer } from '../surface/use-surface-layer';
 import type { LinkButtonProps } from './types';
 import React, { forwardRef, useMemo, useRef, useEffect, memo, type ComponentType } from 'react';
 import { resolveIconSlot } from '../icons/render-icon';
@@ -20,20 +21,7 @@ import { useBloomAppearance } from '../appearance/context';
 import { useTheme } from '../theme/use-theme';
 import { Text } from '../typography/Typography';
 import { useInteractionState } from '../hooks/use-interaction-state';
-import {
-  BUTTON_GEOMETRY,
-  BUTTON_RADIUS,
-  BUTTON_SHADOW,
-  ICON_BUTTON_ICON_SIZE,
-  LINK_BUTTON_GAP,
-  isIconComponent,
-  resolveButtonRecipe,
-  BUTTON_SIZE_ALIAS,
-  resolveButtonGeometry,
-  resolveButtonPalette,
-  resolveButtonUnderline,
-  type ButtonResolvedSize,
-} from './shared';
+import { BUTTON_RADIUS, BUTTON_SHADOW, ICON_BUTTON_ICON_SIZE, LINK_BUTTON_GAP, isIconComponent, resolveLinkButtonPalette, resolveButtonGeometry, resolveButtonPalette, resolveButtonUnderline, type ButtonResolvedSize } from './shared';
 import type { ButtonProps } from './types';
 
 /** Raw text descendants need a native Text host; layout content stays unwrapped. */
@@ -82,9 +70,6 @@ export type {
  * Native fork of the button. Geometry and every state's colours come
  * from `./shared`, the same table `Button.web.tsx` reads.
  *
- * The web fork's `outline | link | destructive` are real variants here too:
- * `outline` and `link` share `secondary`/`text`'s palette, `destructive` paints
- * the negative gradient.
  */
 
 /**
@@ -206,7 +191,6 @@ const ButtonComponent = forwardRef<View, ButtonProps>(function ButtonComponent({
   pressed: togglePressed,
   stopPropagation = false,
   appearance: appearanceProp,
-  variant: variantProp,
   tone: toneProp,
   size: sizeProp,
   style,
@@ -220,7 +204,7 @@ const ButtonComponent = forwardRef<View, ButtonProps>(function ButtonComponent({
   renderLeadingIcon,
   renderTrailingIcon,
   iconOnly = false,
-  linkTone = 'primary',
+  linkTone,
   underline,
   textVariant,
   numberOfLines,
@@ -237,20 +221,20 @@ const ButtonComponent = forwardRef<View, ButtonProps>(function ButtonComponent({
   'aria-haspopup': ariaHasPopup,
 }, ref) {
   const theme = useTheme();
-  const recipe = resolveButtonRecipe(variantProp);
-  const appearance = appearanceProp ?? recipe.appearance;
-  const { size, tone } = useBloomAppearance({ size: sizeProp ? BUTTON_SIZE_ALIAS[sizeProp] : undefined, tone: toneProp ?? (variantProp ? recipe.tone : undefined) }, { size: 'md', tone: 'accent' });
+  const layer = useSurfaceLayer();
+  const appearance = appearanceProp ?? 'solid';
+  const { size, tone } = useBloomAppearance({ size: sizeProp, tone: toneProp }, { size: 'md', tone: 'accent' });
   const geometry = resolveButtonGeometry(size, textVariant);
-  const isSquare = iconOnly || variantProp === 'icon' || sizeProp === 'icon' || (icon != null && children == null);
+  const isSquare = iconOnly || (icon != null && children == null);
   const isIconVariant = isSquare;
-  const isLink = appearance === 'plain' && (href != null || variantProp === 'link');
+  const isLink = appearance === 'plain' && (href != null || linkTone != null);
   const isInteractionBlocked = disabled || loading;
   const iconSize = typeof iconSizeProp === 'number' && Number.isFinite(iconSizeProp) && iconSizeProp > 0 ? iconSizeProp : isIconVariant ? ICON_BUTTON_ICON_SIZE[size] : geometry.iconSize;
   const palette = useMemo(
-    () => variantProp === 'link' && appearanceProp == null && toneProp == null ? resolveButtonPalette('link', theme, linkTone) : variantProp === 'inverse' && appearanceProp == null && toneProp == null ? resolveButtonPalette('inverse', theme) : resolveButtonPalette(appearance, theme, tone, colors),
-    [appearance, theme, tone, variantProp, appearanceProp, toneProp, linkTone, colors],
+    () => isLink && linkTone != null && toneProp == null ? resolveLinkButtonPalette(theme, linkTone) : resolveButtonPalette(appearance, theme, tone, colors, layer.fill),
+    [appearance, theme, tone, toneProp, isLink, linkTone, colors, layer.fill],
   );
-  const underlineMode = resolveButtonUnderline(isLink ? 'link' : 'primary', underline);
+  const underlineMode = resolveButtonUnderline(isLink, underline);
 
   // Pressed state drives the ACTIVE palette. Tracked through state rather than
   // Pressable's function-form `style`, which NativeWind's css-interop swallows
@@ -468,55 +452,54 @@ const styles = StyleSheet.create({
 export const Button = memo(ButtonComponent);
 Button.displayName = 'Button';
 
-export const PrimaryButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="primary" />
+export const PrimaryButton = memo((props: ButtonProps) => (
+  <Button appearance="solid" tone="accent" {...props} />
 ));
 PrimaryButton.displayName = 'PrimaryButton';
 
-export const SecondaryButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="secondary" />
+export const SecondaryButton = memo((props: ButtonProps) => (
+  <Button appearance="outline" tone="neutral" {...props} />
 ));
 SecondaryButton.displayName = 'SecondaryButton';
 
-export const IconButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="icon" />
+export const IconButton = memo((props: ButtonProps) => (
+  <Button appearance="outline" tone="neutral" {...props} iconOnly />
 ));
 IconButton.displayName = 'IconButton';
 
-export const GhostButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="ghost" />
+export const GhostButton = memo((props: ButtonProps) => (
+  <Button appearance="subtle" tone="accent" {...props} />
 ));
 GhostButton.displayName = 'GhostButton';
 
-export const InverseButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="inverse" />
-));
+export const InverseButton = memo((props: ButtonProps) => {
+  const theme = useTheme();
+  return <Button appearance="solid" tone="neutral" colors={props.appearance == null && props.tone == null ? { background: theme.colors.text, foreground: theme.colors.background } : undefined} {...props} />;
+});
 InverseButton.displayName = 'InverseButton';
 
-export const TextButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="text" />
+export const TextButton = memo((props: ButtonProps) => (
+  <Button appearance="plain" tone="accent" {...props} />
 ));
 TextButton.displayName = 'TextButton';
 
-// Web/shadcn-aligned variants. On native they normalize to existing primitives
-// (`outline → secondary`, `link → text`, `destructive → primary` tinted with the
-// negative token) inside `Button`, so these stay API-parallel with the web fork.
-export const OutlineButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="outline" />
+// Named compositions share the canonical appearance and tone axes.
+export const OutlineButton = memo((props: ButtonProps) => (
+  <Button appearance="outline" tone="neutral" {...props} />
 ));
 OutlineButton.displayName = 'OutlineButton';
 
 /**
  * `LinkButton`: an inline text action — no fill, no border, the label
- * (plus icons) in the accent or secondary colour. `variant` is its colour; pass
+ * (plus icons) in the accent or secondary colour. `linkTone` is its colour; pass
  * `href` to open a URL.
  */
-export const LinkButton = memo(({ variant = 'primary', ...props }: LinkButtonProps) => (
-  <Button {...props} variant="link" linkTone={variant} />
+export const LinkButton = memo(({ linkTone = 'primary', ...props }: LinkButtonProps) => (
+  <Button appearance="plain" {...props} linkTone={linkTone} />
 ));
 LinkButton.displayName = 'LinkButton';
 
-export const DestructiveButton = memo((props: Omit<ButtonProps, 'variant'>) => (
-  <Button {...props} variant="destructive" />
+export const DestructiveButton = memo((props: ButtonProps) => (
+  <Button appearance="solid" tone="danger" {...props} />
 ));
 DestructiveButton.displayName = 'DestructiveButton';