@oxy.so/services 9.2.0 → 11.0.0

package/plugins/withOxySharedPermissions.js

@@ -0,0 +1,89 @@
+/**
+ * Config plugin: withOxySharedPermissions (EVERY Oxy Android app).
+ *
+ * Oxy Android apps do not share a UID. They share the Oxy identity and the
+ * device session with Commons (and Accounts) through signature-protected
+ * ContentProvider `call()` IPC, the way apps use `AccountManager`. Crossing a UID
+ * needs two `signature`-level permissions:
+ *
+ *  - `so.oxy.permission.IDENTITY` — Commons' identity host
+ *    (`so.oxy.commons[.dev].identity`): public key, challenge proofs, scoped
+ *    derivations. Never the private key.
+ *  - `so.oxy.permission.DEVICE_SESSION` — the device-session hosts
+ *    (`so.oxy.commons[.dev].devicesession`, `so.oxy.accounts[.dev].devicesession`).
+ *
+ * This plugin makes the app both DECLARE and REQUEST both, and adds `<queries>`
+ * for every host authority:
+ *
+ *  - Declared by every app, not only by the hosts: a signature permission is
+ *    granted when the requesting app is installed, if the declaring app is
+ *    already there. With every app declaring it, install order never matters.
+ *    Android accepts the same declaration from several packages signed with one
+ *    certificate, and rejects it from a differently-signed one
+ *    (`INSTALL_FAILED_DUPLICATE_PERMISSION`), which is the protection we want.
+ *    Every declaration must be identical, which is why this ONE plugin owns
+ *    them; the provider plugins do not declare anything.
+ *  - `<queries>`: Android 11+ package visibility hides a provider the app has
+ *    not declared an interest in, and `ContentResolver.call` then silently finds
+ *    nothing.
+ *
+ * `signature` is the whole trust boundary at the manifest level; each provider
+ * also checks the calling package and its certificate itself.
+ */
+const { withAndroidManifest } = require('@expo/config-plugins');
+
+const IDENTITY_PERMISSION = 'so.oxy.permission.IDENTITY';
+const DEVICE_SESSION_PERMISSION = 'so.oxy.permission.DEVICE_SESSION';
+const PERMISSIONS = [IDENTITY_PERMISSION, DEVICE_SESSION_PERMISSION];
+
+/**
+ * Every host authority an Oxy app calls. Keep in step with `COMMONS_AUTHORITIES`
+ * in `OxyIdentityModule.kt` and `HOST_AUTHORITIES` in `OxyDeviceSessionModule.kt`
+ * (a test compares them).
+ */
+const HOST_AUTHORITIES = [
+  'so.oxy.commons.identity',
+  'so.oxy.commons.dev.identity',
+  'so.oxy.commons.devicesession',
+  'so.oxy.commons.dev.devicesession',
+  'so.oxy.accounts.devicesession',
+  'so.oxy.accounts.dev.devicesession',
+];
+
+function withOxySharedPermissions(config) {
+  return withAndroidManifest(config, (modConfig) => {
+    const manifest = modConfig.modResults.manifest;
+
+    manifest.permission = manifest.permission ?? [];
+    manifest['uses-permission'] = manifest['uses-permission'] ?? [];
+    for (const name of PERMISSIONS) {
+      if (!manifest.permission.some((p) => p.$['android:name'] === name)) {
+        manifest.permission.push({
+          $: { 'android:name': name, 'android:protectionLevel': 'signature' },
+        });
+      }
+      if (!manifest['uses-permission'].some((p) => p.$['android:name'] === name)) {
+        manifest['uses-permission'].push({ $: { 'android:name': name } });
+      }
+    }
+
+    manifest.queries = manifest.queries ?? [];
+    if (manifest.queries.length === 0) {
+      manifest.queries.push({});
+    }
+    const queries = manifest.queries[0];
+    queries.provider = queries.provider ?? [];
+    for (const authority of HOST_AUTHORITIES) {
+      if (!queries.provider.some((p) => p.$['android:authorities'] === authority)) {
+        queries.provider.push({ $: { 'android:authorities': authority } });
+      }
+    }
+
+    return modConfig;
+  });
+}
+
+module.exports = withOxySharedPermissions;
+module.exports.IDENTITY_PERMISSION = IDENTITY_PERMISSION;
+module.exports.DEVICE_SESSION_PERMISSION = DEVICE_SESSION_PERMISSION;
+module.exports.HOST_AUTHORITIES = HOST_AUTHORITIES;

package/plugins/withSharedDeviceSessionProvider.js

@@ -1,86 +1,39 @@
 /**
- * Config plugin: withSharedDeviceSessionProvider (UID-member hub apps).
+ * Config plugin: withSharedDeviceSessionProvider (the device-session HOSTS:
+ * Commons and Accounts, prod and dev).
  *
- * The shared DeviceSession credential is how several official Oxy apps end up on
+ * The shared DeviceSession credential is how the official Oxy apps end up on
  * ONE `DeviceSession` — and therefore one globally active account context —
- * WITHOUT any of them reading Commons's private identity key. This plugin wires
- * the Android side of `@oxy.so/services`:
+ * without any of them touching the identity key. Oxy apps do not share a UID,
+ * so the credential lives in the hosts' own storage, and this plugin declares
+ * the provider every other app reads and writes it through:
+ * `OxyDeviceSessionProvider` at `${applicationId}.devicesession` (AGP
+ * substitutes `${applicationId}` at build), guarded by the `signature`-level
+ * `so.oxy.permission.DEVICE_SESSION`.
  *
- *  - Defines a `signature`-level permission
- *    `so.oxy.shared.permission.READ_DEVICE_SESSION`. `signature` means only apps
- *    signed with the SAME certificate (the shared Oxy release keystore) can hold
- *    it — the trust boundary is the signing key, not the deprecated `sharedUserId`.
- *  - Requests that same permission so this app can also read cross-authority.
- *  - Declares `OxyDeviceSessionProvider` at authority
- *    `${applicationId}.devicesession` (AGP substitutes `${applicationId}` at
- *    build), guarded by that permission. The provider is READ-only across the
- *    process boundary: a sibling may join the device session, never overwrite it.
- *  - Adds `<queries>` entries so Android 11+ package-visibility filtering never
- *    hides the sibling providers from the resolver.
+ * It declares NO permission itself: every Oxy app, host or not, declares and
+ * requests both Oxy permissions through `withOxySharedPermissions`, so the
+ * declarations stay identical. Apply that plugin too.
  *
- * WHICH APPS USE THIS PLUGIN: exactly the apps listed in `PROVIDER_AUTHORITIES`
- * below, which must be apps inside the `so.oxy.shared` UID. UID members share one
- * data directory, so they all serve the SAME file and the sweep in
- * `OxyDeviceSessionModule` is deterministic whichever one answers. An app that is
- * same-signature but outside that UID must use `withSharedDeviceSessionReader`
- * instead — hosting from there would publish a second, independent copy of "the
- * shared credential" and make the winner depend on list order.
- *
- * Keep this list identical to `PROVIDER_AUTHORITIES` in
- * `android/src/main/java/so/oxy/devicesession/OxyDeviceSessionModule.kt`.
- *
- * This is deliberately a SEPARATE permission and a SEPARATE provider from
- * `withSharedIdentityProvider`. Two secrets with different blast radii: the
- * identity key is self-custody and irreplaceable, the device credential is
- * server-revocable and re-publishable. An app that only needs a session gets only
- * the second one.
+ * WHICH APPS USE THIS PLUGIN: exactly the apps whose authorities are listed in
+ * `HOST_AUTHORITIES` of `OxyDeviceSessionModule.kt` (a test compares them).
  */
 const { withAndroidManifest } = require('@expo/config-plugins');
 
-const READ_DEVICE_SESSION_PERMISSION = 'so.oxy.shared.permission.READ_DEVICE_SESSION';
+const DEVICE_SESSION_PERMISSION = 'so.oxy.permission.DEVICE_SESSION';
 const PROVIDER_CLASS = 'so.oxy.devicesession.OxyDeviceSessionProvider';
-const PROVIDER_AUTHORITIES = [
-  'so.oxy.accounts.devicesession',
-  'so.oxy.accounts.dev.devicesession',
+
+/** The authorities this plugin can end up hosting, one per host app. */
+const HOST_AUTHORITIES = [
   'so.oxy.commons.devicesession',
   'so.oxy.commons.dev.devicesession',
+  'so.oxy.accounts.devicesession',
+  'so.oxy.accounts.dev.devicesession',
 ];
 
-module.exports = function withSharedDeviceSessionProvider(config) {
+function withSharedDeviceSessionProvider(config) {
   return withAndroidManifest(config, (modConfig) => {
     const manifest = modConfig.modResults.manifest;
-
-    // 1. Define the signature-level permission.
-    manifest['permission'] = manifest['permission'] ?? [];
-    if (!manifest['permission'].some((p) => p.$['android:name'] === READ_DEVICE_SESSION_PERMISSION)) {
-      manifest['permission'].push({
-        $: {
-          'android:name': READ_DEVICE_SESSION_PERMISSION,
-          'android:protectionLevel': 'signature',
-        },
-      });
-    }
-
-    // 2. Request it (a hub app reads its siblings too — prod ⇆ dev variant).
-    manifest['uses-permission'] = manifest['uses-permission'] ?? [];
-    if (!manifest['uses-permission'].some((p) => p.$['android:name'] === READ_DEVICE_SESSION_PERMISSION)) {
-      manifest['uses-permission'].push({ $: { 'android:name': READ_DEVICE_SESSION_PERMISSION } });
-    }
-
-    // 3. Make the sibling provider authorities visible under package filtering.
-    manifest['queries'] = manifest['queries'] ?? [];
-    if (manifest['queries'].length === 0) {
-      manifest['queries'].push({});
-    }
-    const queries = manifest['queries'][0];
-    queries.provider = queries.provider ?? [];
-    for (const authority of PROVIDER_AUTHORITIES) {
-      if (!queries.provider.some((p) => p.$['android:authorities'] === authority)) {
-        queries.provider.push({ $: { 'android:authorities': authority } });
-      }
-    }
-
-    // 4. Host the provider.
     const app = manifest.application?.[0];
     if (!app) {
       throw new Error('withSharedDeviceSessionProvider: AndroidManifest has no <application>');
@@ -92,11 +45,13 @@ module.exports = function withSharedDeviceSessionProvider(config) {
           'android:name': PROVIDER_CLASS,
           'android:authorities': '${applicationId}.devicesession',
           'android:exported': 'true',
-          'android:permission': READ_DEVICE_SESSION_PERMISSION,
+          'android:permission': DEVICE_SESSION_PERMISSION,
         },
       });
     }
-
     return modConfig;
   });
-};
+}
+
+module.exports = withSharedDeviceSessionProvider;
+module.exports.HOST_AUTHORITIES = HOST_AUTHORITIES;

package/src/ui/boot/runProviderColdBoot.ts

@@ -91,8 +91,8 @@ export interface RunProviderColdBootOptions {
  *
  * Ordered pipeline:
  * 1. Complete an OAuth authorization-code return already on the URL (web)
- * 2. `runSessionColdBoot` — device-secret mint (+ native shared-key, or the
- *    primary-identity-key lane in `sessionMode: 'identity'`)
+ * 2. `runSessionColdBoot` — device-secret mint (+ the native Commons-proof lane,
+ *    or the primary-identity-key lane in `sessionMode: 'identity'`)
  *
  * Step 1 is ACCOUNT-MODE ONLY: it commits whichever account the IdP resolves,
  * which for an identity-bound client is somebody else's account by construction.

package/src/ui/components/BenefitList.tsx

@@ -98,13 +98,12 @@ export const BenefitList: React.FC<BenefitListProps> = ({
     style,
 }) => (
     <Card
-        variant="outlined"
         radius="radius-20"
         border="hairline"
         elevation="s"
         className={className}
         style={[{ padding: SPACING['space-16'], gap: SPACING['space-16'] }, style]}
-        accessibilityLabel={accessibilityLabel}
+        accessibilityLabel={accessibilityLabel} appearance="outline"
     >
         {children}
     </Card>

package/src/ui/components/FollowButton.tsx

@@ -19,7 +19,7 @@ const DEFAULT_FOLLOWED_ALL_LABEL = 'Following';
 
 /** Props shared by both single- and multi-user follow modes. */
 interface FollowButtonBaseProps {
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   style?: StyleProp<ViewStyle>;
   textStyle?: StyleProp<TextStyle>;
   disabled?: boolean;
@@ -67,7 +67,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
   oxyServices,
   initiallyFollowing,
   username,
-  size = 'medium',
+  size = 'md',
   onFollowChange,
   style,
   textStyle,
@@ -140,7 +140,7 @@ const FollowButtonInner = memo(function FollowButtonInner({
 const FollowButtonMultiInner = memo(function FollowButtonMultiInner({
   userIds,
   initiallyAllFollowing = false,
-  size = 'medium',
+  size = 'md',
   followAllLabel = DEFAULT_FOLLOW_ALL_LABEL,
   followedAllLabel = DEFAULT_FOLLOWED_ALL_LABEL,
   onFollowChange,

package/src/ui/components/FollowTargetButton.tsx

@@ -108,7 +108,7 @@ export interface FollowTargetButtonProps {
   verb?: FollowVerb;
   /** Full override, for a verb the vocabulary above does not carry. */
   labels?: Partial<FollowLabels>;
-  size?: 'small' | 'medium' | 'large';
+  size?: 'sm' | 'md' | 'lg';
   style?: StyleProp<ViewStyle>;
   disabled?: boolean;
   /**
@@ -152,7 +152,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
   targetId,
   verb = 'follow',
   labels,
-  size = 'medium',
+  size = 'md',
   style,
   disabled = false,
   showOptions = true,
@@ -309,7 +309,7 @@ export const FollowTargetButton = memo(function FollowTargetButton({
         <DropdownMenuTrigger asChild disabled={disabled || isUnknown}>
           <Button
             appearance="subtle" tone="support"
-            size={size === 'large' ? 'large' : 'small'}
+            size={size === 'lg' ? 'lg' : 'sm'}
             icon={<ChevronDown width={16} />}
             disabled={disabled || isUnknown}
             accessibilityLabel={`${label} options`}

package/src/ui/components/PeableButton.tsx

@@ -1,7 +1,7 @@
 import type React from 'react';
 import type { ViewStyle, TextStyle, StyleProp } from 'react-native';
 import { useTheme } from '@oxy.so/bloom/theme';
-import { Button } from '@oxy.so/bloom/button';
+import { InverseButton } from '@oxy.so/bloom/button';
 import type { PaymentItem, PaymentGatewayResult } from '../screens/PaymentGatewayScreen';
 import { LogoIcon } from './logo/LogoIcon';
 
@@ -46,8 +46,7 @@ const PeableButton: React.FC<PeableButtonProps> = ({
     const textColor = variant === 'black' || (color && isColorDark(color)) ? theme.colors.background : '#1b1f0a';
 
     return (
-        <Button
-            variant="inverse"
+        <InverseButton
             onPress={handlePress}
             disabled={disabled}
             style={[{ backgroundColor, borderColor: textColor, borderWidth: 1 }, style]}
@@ -55,7 +54,7 @@ const PeableButton: React.FC<PeableButtonProps> = ({
             icon={<LogoIcon height={16} color={textColor} style={{ marginRight: 6 }} />}
         >
             {text}
-        </Button>
+        </InverseButton>
     );
 };
 

package/src/ui/components/SurfaceHeaderAction.tsx

@@ -12,7 +12,7 @@ export interface SurfaceHeaderActionProps {
 
 /** Header actions share Bloom's sizing, surface, disabled and loading behavior. */
 export const SurfaceHeaderAction: React.FC<SurfaceHeaderActionProps> = ({ label, onPress, loading, disabled }) => (
-  <Button size="medium" onPress={onPress} loading={loading} disabled={disabled}>
+  <Button size="md" onPress={onPress} loading={loading} disabled={disabled}>
     {label}
   </Button>
 );

package/src/ui/components/SurfaceScreen.tsx

@@ -88,7 +88,7 @@ const errorStyles = StyleSheet.create({
 function ScreenPending() {
   return (
     <View style={errorStyles.container}>
-      <Loading variant="spinner" size="large" />
+      <Loading variant="spinner" size="lg" />
     </View>
   );
 }

package/src/ui/components/__tests__/followButtonAccessibility.test.tsx

@@ -16,6 +16,7 @@ import {
 } from '../followButtonAccessibility';
 
 interface BloomFollowProps {
+  size?: 'sm' | 'md' | 'lg';
   following: boolean;
   label?: string;
   followingLabel?: string;
@@ -189,3 +190,11 @@ describe('FollowTargetButton names the state it shows', () => {
     expect(lastBloomProps()?.accessibilityLabel).toBe(label);
   });
 });
+
+
+it.each(['sm', 'md', 'lg'] as const)('forwards canonical %s geometry in both follow modes', size => {
+  render(<FollowButton userId="nate-id" size={size} />);
+  expect(lastBloomProps()?.size).toBe(size);
+  render(<FollowButton userIds={['a', 'b']} size={size} />);
+  expect(lastBloomProps()?.size).toBe(size);
+});

package/src/ui/components/authChooser/AccountsMenuView.tsx

@@ -385,7 +385,7 @@ const AccountsMenuView: React.FC<AccountsMenuViewProps> = ({
             spanning the surface. */}
         <Button
           appearance="subtle" tone="neutral"
-          size="small"
+          size="sm"
           onPress={handlers.onManage}
           accessibilityLabel={manageLabel}
         >

package/src/ui/components/authChooser/primitives.tsx

@@ -27,7 +27,7 @@ export const SubtleLink: React.FC<{
   testID?: string;
 }> = ({ label, onPress, disabled, testID }) => (
   <LinkButton
-    variant="secondary"
+    linkTone="secondary"
     size="sm"
     onPress={onPress}
     disabled={disabled}

package/src/ui/components/authChooser/requestSurfaces.tsx

@@ -40,7 +40,7 @@ const ROUTE_GLYPH_SIZE = 44;
  */
 export const PreparingSurface: React.FC = () => {
   const { t } = useI18n();
-  return <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />;
+  return <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} />;
 };
 
 /** The leading glyph for a route whose surface is elsewhere (the phone, Commons). */

package/src/ui/components/payment/PaymentDetailsStep.tsx

@@ -214,13 +214,13 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
                 <Button
                     appearance="solid" tone="accent"
                     onPress={onNext}
-                    size="small"
+                    size="sm"
                     icon={<Ionicons name="arrow-forward" size={16} />}
                     iconPosition="right"
                     disabled={paymentMethod === 'card' && !isCardValid}

package/src/ui/components/payment/PaymentMethodStep.tsx

@@ -77,10 +77,10 @@ const PaymentMethodStep: React.FC<PaymentMethodStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
-                <Button appearance="solid" tone="accent" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                <Button appearance="solid" tone="accent" onPress={onNext} size="sm" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
                     {t('payment.actions.continue')}
                 </Button>
             </View>

package/src/ui/components/payment/PaymentReviewStep.tsx

@@ -105,13 +105,13 @@ const PaymentReviewStep: React.FC<PaymentReviewStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onBack} size="small" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onBack} size="sm" disabled={isPaying} icon={<Ionicons name="arrow-back" size={16} />}>
                     {t('payment.actions.back')}
                 </Button>
                 <Button
                     appearance="solid" tone="accent"
                     onPress={onPay}
-                    size="small"
+                    size="sm"
                     disabled={isPaying}
                     icon={isPaying ? <ActivityIndicator size="small" color="#FFFFFF" /> : <Ionicons name="checkmark" size={16} />}
                     iconPosition="right"

package/src/ui/components/payment/PaymentSuccessStep.tsx

@@ -57,7 +57,7 @@ const PaymentSuccessStep: React.FC<PaymentSuccessStepProps> = ({
                 </View>
             </View>
 
-            <Button appearance="solid" tone="accent" onPress={onDone} size="small" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
+            <Button appearance="solid" tone="accent" onPress={onDone} size="sm" icon={<Ionicons name="checkmark" size={16} />} iconPosition="right">
                 {t('payment.actions.done')}
             </Button>
         </Animated.View>

package/src/ui/components/payment/PaymentSummaryStep.tsx

@@ -145,10 +145,10 @@ const PaymentSummaryStep: React.FC<PaymentSummaryStepProps> = ({
             </View>
 
             <View style={{ flexDirection: 'row', gap: 8, justifyContent: 'flex-end' }}>
-                <Button appearance="subtle" tone="neutral" onPress={onClose} size="small" icon={<Ionicons name="close" size={16} />}>
+                <Button appearance="subtle" tone="neutral" onPress={onClose} size="sm" icon={<Ionicons name="close" size={16} />}>
                     {t('payment.actions.close')}
                 </Button>
-                <Button appearance="solid" tone="accent" onPress={onNext} size="small" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
+                <Button appearance="solid" tone="accent" onPress={onNext} size="sm" icon={<Ionicons name="arrow-forward" size={16} />} iconPosition="right">
                     {t('payment.actions.continue')}
                 </Button>
             </View>

package/src/ui/components/signIn/OxyAuthScreen.tsx

@@ -103,7 +103,7 @@ export const OxyAuthLoading: React.FC = () => {
   const { t } = useI18n();
   return (
     <View className="min-h-[300px] items-center justify-center">
-      <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} testID="oxy-auth-loading" />
+      <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} testID="oxy-auth-loading" />
     </View>
   );
 };

package/src/ui/components/signIn/OxyLinkCommonsPanel.tsx

@@ -204,7 +204,7 @@ export const OxyLinkCommonsPanel: React.FC<OxyLinkCommonsPanelProps> = ({ onLink
         <OxyAuthScreen>
           <OxyAuthScreenHeader title={t('linkCommons.title')} description={t('linkCommons.subtitle')} />
           <View style={styles.plateRow}>
-            <Loading variant="spinner" size="large" accessibilityLabel={t('common.status.loading')} />
+            <Loading variant="spinner" size="lg" accessibilityLabel={t('common.status.loading')} />
           </View>
         </OxyAuthScreen>
       );

package/src/ui/components/signIn/OxyPasswordPanel.tsx

@@ -95,7 +95,7 @@ export const OxyPasswordPanel: React.FC<OxyPasswordPanelProps> = ({ onDone, onCa
       {/* The field names the switch ("Sign out everywhere else, switch, off")
           and, on web, its label toggles it. One row: label, then the switch. */}
       <Field label={t('signInSecurity.password.signOutOthers')} style={styles.row}>
-        <Switch value={signOutOthers} onValueChange={setSignOutOthers} testID="password-sign-out-others" />
+        <Switch checked={signOutOthers} onCheckedChange={setSignOutOthers} testID="password-sign-out-others" />
       </Field>
     </ReauthStep>
   );

package/src/ui/components/surfaces/ActionSheetSurface.tsx

@@ -72,7 +72,8 @@ export function ActionSheetSurface<T extends string>({
                 {options.map((option) => (
                     <Button
                         key={option.value}
-                        variant={option.destructive ? 'destructive' : 'primary'}
+                        appearance="solid"
+                        tone={option.destructive ? 'danger' : 'accent'}
                         onPress={() => surface.dismiss(option.value)}
                     >
                         {option.label}

package/src/ui/screens/AccountMembersScreen.tsx

@@ -291,7 +291,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
               <Text className="text-caption font-caption text-text-secondary px-space-4">
                 {t('accounts.members.invite.roleLabel') || 'Role'}
               </Text>
-              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="small">
+              <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'} value={inviteRole} onValueChange={setInviteRole} size="sm">
                 {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
                   <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
                 </SegmentedControlItem>)}
@@ -372,7 +372,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                           {/* Role chips (editable) or static role label */}
                           {canEditThisRole ? (
                             <SegmentedControl type="radio" label={t('accounts.members.invite.roleLabel') || 'Role'}
-                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="small">
+                              value={member.role} onValueChange={role => handleChangeRole(member, role)} disabled={updateMutation.isPending} size="sm">
                               {ASSIGNABLE_ROLES.map(role => <SegmentedControlItem key={role} value={role}>
                                 <SegmentedControlItemText>{roleLabel(role)}</SegmentedControlItemText>
                               </SegmentedControlItem>)}
@@ -387,7 +387,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                           {(canTransferToThis || canRemoveThisMember) ? (
                             <View className="flex-row gap-space-16 pt-space-4">
                               {canTransferToThis ? (
-                                <Button appearance="plain" tone="neutral" size="small"
+                                <Button appearance="plain" tone="neutral" size="sm"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.transfer') || 'Transfer ownership'}
                                   onPress={() => confirmTransfer(member)}
@@ -400,7 +400,7 @@ const AccountMembersScreen: React.FC<BaseScreenProps> = ({ onClose, goBack, acco
                                 </Button>
                               ) : null}
                               {canRemoveThisMember ? (
-                                <Button appearance="plain" tone="neutral" size="small"
+                                <Button appearance="plain" tone="neutral" size="sm"
                                   accessibilityRole="button"
                                   accessibilityLabel={t('accounts.members.actions.remove') || 'Remove member'}
                                   onPress={() => confirmRemove(member)}

package/src/ui/screens/AccountVerificationScreen.tsx

@@ -156,7 +156,7 @@ const AccountVerificationScreen: React.FC<BaseScreenProps> = ({
 
                 <Button
                     appearance="solid" tone="accent"
-                    size="large"
+                    size="lg"
                     fullWidth
                     className="mt-space-24"
                     onPress={handleSubmit}

package/src/ui/screens/ConnectedAppsScreen.tsx

@@ -146,7 +146,7 @@ const ConnectedAppsScreen: React.FC<BaseScreenProps> = ({ onClose, goBack }) =>
     return (
         <View className="flex-1 bg-bg">
             {isLoading && !apps ? (
-                <Loading size="large" color={bloomTheme.colors.primary} />
+                <Loading size="lg" color={bloomTheme.colors.primary} />
             ) : (
                 <FlatList
                     data={apps ?? []}

package/src/ui/screens/DomainsScreen.tsx

@@ -94,7 +94,7 @@ const DomainsScreen: React.FC<BaseScreenProps> = () => {
     };
 
     if (domains.isPending && isAuthenticated) {
-        return <Loading size="large" color={bloomTheme.colors.primary} />;
+        return <Loading size="lg" color={bloomTheme.colors.primary} />;
     }
 
     return (

package/src/ui/screens/EditProfileFieldScreen.tsx

@@ -704,11 +704,10 @@ const EditProfileFieldScreen: React.FC<EditProfileFieldScreenProps> = ({
                         </TextField>
                     </View>
                     <Button
-                        variant="icon"
                         onPress={handleAddItem}
                         disabled={!newItemValue.trim()}
                         accessibilityLabel={addLabel}
-                        icon={<Ionicons name="add" size={20} color={bloomTheme.colors.primaryForeground} />}
+                        icon={<Ionicons name="add" size={20} color={bloomTheme.colors.primaryForeground} />} iconOnly tone="neutral" appearance="outline"
                     />
                 </View>
 

package/src/ui/screens/FileManagementScreen.tsx

@@ -776,13 +776,13 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                 // Hide action buttons when selecting (in selectMode or bulk operations mode)
                 rightElement: (!selectMode && selectedIds.size === 0) ? (
                     <View className="flex-row items-center gap-1.5 ml-3">
-                        {(isImage || isVideo || file.contentType.includes('pdf')) ? <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                        {(isImage || isVideo || file.contentType.includes('pdf')) ? <Button appearance="subtle" tone="neutral" size="sm" iconOnly stopPropagation
                             accessibilityLabel={`Preview ${file.filename}`} onPress={() => handleFileOpen(file)}
                             icon={<Ionicons name="eye" size={18} color={colors.text} />} /> : null}
-                        <Button appearance="subtle" tone="neutral" size="small" iconOnly stopPropagation
+                        <Button appearance="subtle" tone="neutral" size="sm" iconOnly stopPropagation
                             accessibilityLabel={`Download ${file.filename}`} onPress={() => handleFileDownload(file.id, file.filename)}
                             icon={<Ionicons name="download" size={18} color={colors.text} />} />
-                        <Button appearance="subtle" tone="danger" size="small" iconOnly stopPropagation loading={deletingId === file.id}
+                        <Button appearance="subtle" tone="danger" size="sm" iconOnly stopPropagation loading={deletingId === file.id}
                             accessibilityLabel={`Delete ${file.filename}`} onPress={() => confirmFileDelete(file.id, file.filename)}
                             icon={<Ionicons name="trash" size={18} color={colors.error} />} />
                     </View>
@@ -1144,7 +1144,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                     style={{ maxWidth: '80%' }}
                 >
                     <SegmentedControl type="radio" label={t('fileManagement.viewMode') || 'File type'}
-                        value={viewMode} onValueChange={setViewMode} size="small">
+                        value={viewMode} onValueChange={setViewMode} size="sm">
                         {(['all', 'photos', 'videos', 'documents', 'audio'] as const).map(mode => (
                             <SegmentedControlItem key={mode} value={mode} accessibilityLabel={mode}>
                                 <MaterialCommunityIcons
@@ -1154,7 +1154,7 @@ const FileManagementScreen: React.FC<FileManagementScreenProps> = ({
                         ))}
                     </SegmentedControl>
                 </ScrollView>
-                <Button appearance="subtle" tone="neutral" size="small"
+                <Button appearance="subtle" tone="neutral" size="sm"
                     accessibilityRole="button"
                     accessibilityLabel={t('fileManagement.a11y.sortBy', {
                         field: sortBy,