@oxyhq/services 19.0.1 → 19.1.0

package/src/ui/components/RequireOxyAuth.tsx

@@ -28,7 +28,7 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import { Text } from '@oxyhq/bloom/typography';
 import { useOxy } from '../context/OxyContext';
 import { OxySignInButton } from './OxySignInButton';
-import OxyLogo from './OxyLogo';
+import { LogoIcon } from './logo/LogoIcon';
 
 /**
  * How `RequireOxyAuth` treats a signed-out (or still-resolving) session.
@@ -135,7 +135,7 @@ const SoftGate: React.FC<SoftGateProps> = ({ children, pending, message, actionL
     <View style={styles.softRoot}>
       {showBanner ? (
         <View style={[styles.banner, { backgroundColor: theme.colors.card, borderColor: theme.colors.border }]}>
-          <OxyLogo variant="icon" size={20} fillColor={theme.colors.primary} />
+          <LogoIcon height={20} color={theme.colors.primary} />
           <Text style={[styles.bannerText, { color: theme.colors.text }]} numberOfLines={2}>
             {message}
           </Text>
@@ -172,7 +172,7 @@ const HardWall: React.FC<{ title: string; subtitle: string }> = ({ title, subtit
   return (
     <View style={[styles.wallRoot, { backgroundColor: theme.colors.background }]}>
       <View style={[styles.logoBadge, { backgroundColor: theme.colors.primarySubtle }]}>
-        <OxyLogo variant="icon" size={44} fillColor={theme.colors.primary} />
+        <LogoIcon height={44} color={theme.colors.primary} />
       </View>
       <Text style={[styles.wallTitle, { color: theme.colors.text }]}>{title}</Text>
       <Text style={[styles.wallSubtitle, { color: theme.colors.textSecondary }]}>{subtitle}</Text>

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

@@ -12,9 +12,7 @@ import {
   type OxyConsentScreenProps,
 } from '../OxyConsentScreen';
 
-// OxyLogo renders through react-native-svg, which is not meaningful (and not
-// resolvable) under the jsdom RN stub — replace it with an inert node.
-jest.mock('../OxyLogo', () => ({ __esModule: true, default: () => null }));
+jest.mock('../logo/LogoIcon', () => ({ LogoIcon: () => null }));
 
 const baseApp: OxyConsentApplication = { name: 'Acme Notes' };
 

package/src/ui/components/fileManagement/FileDetailsModal.tsx

@@ -65,44 +65,44 @@ export const FileDetailsModal: React.FC<FileDetailsModalProps> = ({
                     />
                 </View>
 
-                <Text className="text-foreground" style={fileManagementStyles.fileDetailName}>
+                <Text className="text-text" style={fileManagementStyles.fileDetailName}>
                     {file.filename}
                 </Text>
 
                 <View style={fileManagementStyles.fileDetailInfo}>
                     <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
                             Size:
                         </Text>
-                        <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text" style={fileManagementStyles.detailValue}>
                             {formatFileSize(file.length)}
                         </Text>
                     </View>
 
                     <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
                             Type:
                         </Text>
-                        <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text" style={fileManagementStyles.detailValue}>
                             {file.contentType}
                         </Text>
                     </View>
 
                     <View style={fileManagementStyles.detailRow}>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
                             Uploaded:
                         </Text>
-                        <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                        <Text className="text-text" style={fileManagementStyles.detailValue}>
                             {new Date(file.uploadDate).toLocaleString()}
                         </Text>
                     </View>
 
                     {file.metadata?.description && (
                         <View style={fileManagementStyles.detailRow}>
-                            <Text className="text-muted-foreground" style={fileManagementStyles.detailLabel}>
+                            <Text className="text-text-secondary" style={fileManagementStyles.detailLabel}>
                                 Description:
                             </Text>
-                            <Text className="text-foreground" style={fileManagementStyles.detailValue}>
+                            <Text className="text-text" style={fileManagementStyles.detailValue}>
                                 {file.metadata.description}
                             </Text>
                         </View>

package/src/ui/components/fileManagement/FileViewer.tsx

@@ -7,7 +7,6 @@ import { useTheme } from '@oxyhq/bloom/theme';
 import type { FileMetadata } from '@oxyhq/core';
 import { formatFileSize } from '../../utils/fileManagement';
 import { fileManagementStyles } from './styles';
-import { Colors } from '../../constants/theme';
 import { SettingsListGroup, SettingsListItem } from '@oxyhq/bloom/settings-list';
 
 interface FileViewerProps {
@@ -33,8 +32,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
     onDelete,
     isOwner,
 }) => {
-    const { colors, isDark } = useTheme();
-    const constantColors = Colors[isDark ? 'dark' : 'light'];
+    const { colors } = useTheme();
     const isImage = file.contentType.startsWith('image/');
     const isText = file.contentType.startsWith('text/') ||
         file.contentType.includes('json') ||
@@ -106,28 +104,28 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             {
                 id: 'filename',
                 iconName: 'file-document',
-                iconColor: constantColors.iconSecurity,
+                iconColor: colors.info,
                 title: 'File Name',
                 description: file.filename,
             },
             {
                 id: 'size',
                 iconName: 'server',
-                iconColor: constantColors.iconStorage,
+                iconColor: colors.warning,
                 title: 'Size',
                 description: formatFileSize(file.length),
             },
             {
                 id: 'type',
                 iconName: 'code-tags',
-                iconColor: constantColors.iconData,
+                iconColor: colors.primary,
                 title: 'Type',
                 description: file.contentType,
             },
             {
                 id: 'uploaded',
                 iconName: 'clock',
-                iconColor: constantColors.iconPersonalInfo,
+                iconColor: colors.success,
                 title: 'Uploaded',
                 description: new Date(file.uploadDate).toLocaleString(),
             },
@@ -137,7 +135,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             items.push({
                 id: 'description',
                 iconName: 'text',
-                iconColor: constantColors.iconData,
+                iconColor: colors.primary,
                 title: 'Description',
                 description: file.metadata.description,
             });
@@ -146,17 +144,17 @@ export const FileViewer: React.FC<FileViewerProps> = ({
         items.push({
             id: 'fileId',
             iconName: 'key',
-            iconColor: constantColors.iconSecurity,
+            iconColor: colors.info,
             title: 'File ID',
             description: file.id,
         });
 
         return items;
-    }, [file, constantColors]);
+    }, [file, colors]);
 
     return (
         <View
-            className={isImage && fileContent ? undefined : 'bg-background'}
+            className={isImage && fileContent ? undefined : 'bg-bg'}
             style={[fileManagementStyles.fileViewerContainer, bgColor ? { backgroundColor: bgColor } : undefined]}
         >
             {/* Blurred Background Image - only for images */}
@@ -200,7 +198,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                 {loadingFileContent ? (
                     <View style={fileManagementStyles.fileViewerLoading}>
                         <ActivityIndicator size="large" color={colors.primary} />
-                        <Text className="text-foreground" style={fileManagementStyles.fileViewerLoadingText}>
+                        <Text className="text-text" style={fileManagementStyles.fileViewerLoadingText}>
                             Loading file content...
                         </Text>
                     </View>
@@ -242,7 +240,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                 ) : isText && fileContent ? (
                     <View className="bg-card" style={fileManagementStyles.textContainer}>
                         <ScrollView style={{ flex: 1 }} nestedScrollEnabled>
-                            <Text className="text-foreground" style={fileManagementStyles.textContent}>
+                            <Text className="text-text" style={fileManagementStyles.textContent}>
                                 {fileContent}
                             </Text>
                         </ScrollView>
@@ -254,10 +252,10 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             size={64}
                             color={colors.textSecondary}
                         />
-                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
+                        <Text className="text-text" style={fileManagementStyles.unsupportedFileTitle}>
                             PDF Preview Not Available
                         </Text>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.unsupportedFileDescription}>
                             PDF files cannot be previewed in this viewer.{'\n'}
                             Download the file to view its contents.
                         </Text>
@@ -277,10 +275,10 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             size={64}
                             color={colors.textSecondary}
                         />
-                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
+                        <Text className="text-text" style={fileManagementStyles.unsupportedFileTitle}>
                             Video Playback Not Available
                         </Text>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.unsupportedFileDescription}>
                             Video playback is not supported in this viewer.{'\n'}
                             Download the file to view it.
                         </Text>
@@ -300,10 +298,10 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             size={64}
                             color={colors.textSecondary}
                         />
-                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
+                        <Text className="text-text" style={fileManagementStyles.unsupportedFileTitle}>
                             Audio Playback Not Available
                         </Text>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.unsupportedFileDescription}>
                             Audio playback is not supported in this viewer.{'\n'}
                             Download the file to listen to it.
                         </Text>
@@ -323,10 +321,10 @@ export const FileViewer: React.FC<FileViewerProps> = ({
                             size={64}
                             color={colors.textSecondary}
                         />
-                        <Text className="text-foreground" style={fileManagementStyles.unsupportedFileTitle}>
+                        <Text className="text-text" style={fileManagementStyles.unsupportedFileTitle}>
                             Preview Not Available
                         </Text>
-                        <Text className="text-muted-foreground" style={fileManagementStyles.unsupportedFileDescription}>
+                        <Text className="text-text-secondary" style={fileManagementStyles.unsupportedFileDescription}>
                             This file type cannot be previewed.{'\n'}
                             Download the file to view its contents.
                         </Text>
@@ -345,7 +343,7 @@ export const FileViewer: React.FC<FileViewerProps> = ({
             {/* File Details Section - at bottom */}
             <View className="bg-card" style={fileManagementStyles.fileDetailsSection}>
                 <View style={fileManagementStyles.fileDetailsSectionHeader}>
-                    <Text className="text-foreground" style={fileManagementStyles.fileDetailsSectionTitle}>
+                    <Text className="text-text" style={fileManagementStyles.fileDetailsSectionTitle}>
                         File Details
                     </Text>
                     <TouchableOpacity

package/src/ui/components/fileManagement/UploadPreview.tsx

@@ -44,7 +44,7 @@ const UploadPreviewContent: React.FC<{
     return (
         <View style={[fileManagementStyles.uploadPreviewContainer, { backgroundColor: colors.background }]}>
             <View className="border-b border-border" style={fileManagementStyles.uploadPreviewHeader}>
-                <Text className="text-foreground" style={fileManagementStyles.uploadPreviewTitle}>
+                <Text className="text-text" style={fileManagementStyles.uploadPreviewTitle}>
                     Review Files ({pendingFiles.length})
                 </Text>
                 <TouchableOpacity onPress={onCancel}>
@@ -77,10 +77,10 @@ const UploadPreviewContent: React.FC<{
                                 </View>
                             )}
                             <View style={fileManagementStyles.uploadPreviewInfo}>
-                                <Text className="text-foreground" style={fileManagementStyles.uploadPreviewName} numberOfLines={1}>
+                                <Text className="text-text" style={fileManagementStyles.uploadPreviewName} numberOfLines={1}>
                                     {pendingFile.name}
                                 </Text>
-                                <Text className="text-muted-foreground" style={fileManagementStyles.uploadPreviewMeta}>
+                                <Text className="text-text-secondary" style={fileManagementStyles.uploadPreviewMeta}>
                                     {formatFileSize(pendingFile.size)} • {pendingFile.type}
                                 </Text>
                             </View>
@@ -97,10 +97,10 @@ const UploadPreviewContent: React.FC<{
 
             <View className="border-t border-border" style={fileManagementStyles.uploadPreviewFooter}>
                 <View style={fileManagementStyles.uploadPreviewStats}>
-                    <Text className="text-foreground" style={fileManagementStyles.uploadPreviewStatsText}>
+                    <Text className="text-text" style={fileManagementStyles.uploadPreviewStatsText}>
                         {pendingFiles.length} file{pendingFiles.length !== 1 ? 's' : ''}
                     </Text>
-                    <Text className="text-foreground" style={fileManagementStyles.uploadPreviewStatsText}>
+                    <Text className="text-text" style={fileManagementStyles.uploadPreviewStatsText}>
                         {formatFileSize(totalSize)}
                     </Text>
                 </View>
@@ -114,7 +114,7 @@ const UploadPreviewContent: React.FC<{
                             ]}
                             onPress={onCancel}
                         >
-                            <Text className="text-foreground" style={fileManagementStyles.uploadPreviewCancelText}>
+                            <Text className="text-text" style={fileManagementStyles.uploadPreviewCancelText}>
                                 Cancel
                             </Text>
                         </TouchableOpacity>

package/src/ui/components/modals/DeleteAccountModal.tsx

@@ -1,8 +1,8 @@
 import type React from 'react';
 import { useState, useCallback } from 'react';
 import { View, Text, TextInput } from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
 import { Dialog, type DialogControlProps } from '@oxyhq/bloom';
-import OxyIcon from '../icon/OxyIcon';
 import { useTheme } from '@oxyhq/bloom/theme';
 
 interface DeleteAccountModalProps {
@@ -64,13 +64,13 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
             ]}
         >
             <View className="flex-row items-center mb-4 gap-3">
-                <OxyIcon name="alert" size={32} color={theme.colors.error} />
-                <Text className="text-destructive text-xl font-bold">
+                <Ionicons name="alert-circle" size={32} color={theme.colors.error} />
+                <Text className="text-text text-xl font-bold" style={{ color: theme.colors.error }}>
                     {t('deleteAccount.title') || 'Delete Account'}
                 </Text>
             </View>
 
-            <Text className="text-foreground text-sm leading-5 mb-5">
+            <Text className="text-text text-sm leading-5 mb-5">
                 {t('deleteAccount.warning') || 'This action cannot be undone. Your account and all associated data will be permanently deleted.'}
             </Text>
 
@@ -79,18 +79,18 @@ const DeleteAccountModal: React.FC<DeleteAccountModalProps> = ({
                     className="p-3 rounded-lg mb-4"
                     style={{ backgroundColor: `${theme.colors.error}20` }}
                 >
-                    <Text className="text-destructive text-sm text-center">
+                    <Text className="text-text text-sm text-center" style={{ color: theme.colors.error }}>
                         {error}
                     </Text>
                 </View>
             )}
 
             <View className="mb-4">
-                <Text className="text-muted-foreground text-[13px] mb-2">
+                <Text className="text-text-secondary text-[13px] mb-2">
                     {t('deleteAccount.confirmLabel', { username }) || `Type "${username}" to confirm`}
                 </Text>
                 <TextInput
-                    className="text-foreground bg-background text-base py-3 px-4 border rounded-lg"
+                    className="text-text bg-bg text-base py-3 px-4 border rounded-lg"
                     style={{
                         borderColor: confirmUsername === username ? theme.colors.success : theme.colors.border,
                     }}

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

@@ -3,7 +3,7 @@ import { useMemo } from 'react';
 import { View, Text, Animated, TouchableOpacity, Clipboard, Linking } from 'react-native';
 import { Ionicons } from '@expo/vector-icons';
 import { Button } from '@oxyhq/bloom/button';
-import TextField from '../TextField';
+import { TextField, TextFieldInput } from '@oxyhq/bloom/text-field';
 import FAIRWalletIcon from '../icon/FAIRWalletIcon';
 import { createPaymentStyles } from './paymentStyles';
 import { toast } from '@oxyhq/bloom';
@@ -87,48 +87,58 @@ const PaymentDetailsStep: React.FC<PaymentDetailsStepProps> = ({
                                     <Ionicons name="card-outline" size={24} color={colors.primary} style={styles.cardRowIcon} />
                                     <Text style={styles.cardRowText}>{t('payment.details.acceptedCards')}</Text>
                                 </View>
-                                <TextField
-                                    value={cardDetails.number}
-                                    onChangeText={text => {
-                                        const formatted = text.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
-                                        onCardDetailsChange({ ...cardDetails, number: formatted });
-                                    }}
-                                    placeholder="1234 5678 9012 3456"
-                                    keyboardType="numeric"
-                                    maxLength={19}
-                                    style={styles.cardFieldContainer}
-                                    left={<Ionicons name="card-outline" size={18} color={colors.primary} />}
-                                    accessibilityLabel="Card number"
-                                    accessibilityHint="Enter your 16-digit card number"
-                                />
-                                <View style={styles.cardFieldRow}>
-                                    <TextField
-                                        value={cardDetails.expiry}
-                                        onChangeText={text => {
-                                            const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
-                                            onCardDetailsChange({ ...cardDetails, expiry: formatted });
-                                        }}
-                                        placeholder="MM/YY"
-                                        maxLength={5}
-                                        style={styles.cardFieldHalfLeft}
-                                        left={<Ionicons name="calendar-outline" size={16} color={colors.primary} />}
-                                        accessibilityLabel="Expiry date"
-                                        accessibilityHint="Enter expiry date in MM/YY format"
-                                    />
-                                    <TextField
-                                        value={cardDetails.cvv}
+                                <TextField>
+                                    <TextFieldInput
+                                        floatingLabel
+                                        label={t('payment.details.cardNumber') || 'Card number'}
+                                        value={cardDetails.number}
                                         onChangeText={text => {
-                                            const formatted = text.replace(/\D/g, '');
-                                            onCardDetailsChange({ ...cardDetails, cvv: formatted });
+                                            const formatted = text.replace(/\s/g, '').replace(/(\d{4})/g, '$1 ').trim();
+                                            onCardDetailsChange({ ...cardDetails, number: formatted });
                                         }}
-                                        placeholder="123"
+                                        placeholder="1234 5678 9012 3456"
                                         keyboardType="numeric"
-                                        maxLength={4}
-                                        style={styles.cardFieldHalfRight}
-                                        left={<Ionicons name="lock-closed-outline" size={16} color={colors.primary} />}
-                                        accessibilityLabel="CVV"
-                                        accessibilityHint="Enter 3 or 4 digit security code"
+                                        maxLength={19}
+                                        accessibilityLabel="Card number"
+                                        accessibilityHint="Enter your 16-digit card number"
                                     />
+                                </TextField>
+                                <View style={styles.cardFieldRow}>
+                                    <View style={styles.cardFieldHalfLeft}>
+                                        <TextField>
+                                            <TextFieldInput
+                                                floatingLabel
+                                                label={t('payment.details.expiry') || 'Expiry'}
+                                                value={cardDetails.expiry}
+                                                onChangeText={text => {
+                                                    const formatted = text.replace(/\D/g, '').replace(/(\d{2})(\d)/, '$1/$2');
+                                                    onCardDetailsChange({ ...cardDetails, expiry: formatted });
+                                                }}
+                                                placeholder="MM/YY"
+                                                maxLength={5}
+                                                accessibilityLabel="Expiry date"
+                                                accessibilityHint="Enter expiry date in MM/YY format"
+                                            />
+                                        </TextField>
+                                    </View>
+                                    <View style={styles.cardFieldHalfRight}>
+                                        <TextField>
+                                            <TextFieldInput
+                                                floatingLabel
+                                                label="CVV"
+                                                value={cardDetails.cvv}
+                                                onChangeText={text => {
+                                                    const formatted = text.replace(/\D/g, '');
+                                                    onCardDetailsChange({ ...cardDetails, cvv: formatted });
+                                                }}
+                                                placeholder="123"
+                                                keyboardType="numeric"
+                                                maxLength={4}
+                                                accessibilityLabel="CVV"
+                                                accessibilityHint="Enter 3 or 4 digit security code"
+                                            />
+                                        </TextField>
+                                    </View>
                                 </View>
                             </View>
 

package/src/ui/components/payment/paymentStyles.ts

@@ -1,4 +1,4 @@
-import { StyleSheet, Platform } from 'react-native';
+import { StyleSheet } from 'react-native';
 import type { PaymentColors } from './types';
 
 export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create({
@@ -61,7 +61,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     summaryCardSubtitle: {
         fontSize: 16,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 24,
         width: '100%',
@@ -82,7 +82,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     summaryCardAmountLabel: {
         fontSize: 16,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },
@@ -95,7 +95,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     summaryCardAmountDescription: {
         fontSize: 14,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         lineHeight: 20,
     },
@@ -117,7 +117,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     summaryCardTotalLabel: {
         fontSize: 16,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         fontWeight: '500',
     },
     summaryCardTotalValue: {
@@ -151,7 +151,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     cardPaymentSubtitle: {
         fontSize: 16,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 24,
         width: '100%',
@@ -162,7 +162,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     cardPaymentWaiting: {
         fontSize: 14,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },
@@ -176,7 +176,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     cardRowText: {
         fontSize: 15,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
     },
     cardFieldContainer: {
         marginBottom: 16,
@@ -219,7 +219,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     oxyPaySubtitle: {
         fontSize: 16,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },
@@ -235,7 +235,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     oxyPayWaiting: {
         fontSize: 14,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },
@@ -316,7 +316,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
         textAlign: 'center',
     },
     faircoinAddress: {
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         fontSize: 13,
         textAlign: 'center',
         marginTop: 6,
@@ -340,13 +340,13 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     faircoinWaiting: {
         fontSize: 14,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },
     faircoinPlaceholder: {
         fontSize: 13,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
     },
     // Success styles
@@ -382,7 +382,7 @@ export const createPaymentStyles = (colors: PaymentColors) => StyleSheet.create(
     },
     successMessage: {
         fontSize: 14,
-        color: colors.secondaryText,
+        color: colors.textSecondary,
         textAlign: 'center',
         marginBottom: 8,
     },

package/src/ui/components/payment/types.ts

@@ -1,6 +1,7 @@
 import type React from 'react';
 import type { Animated } from 'react-native';
 import type { Ionicons } from '@expo/vector-icons';
+import type { ThemeColors } from '@oxyhq/bloom/theme';
 
 export type PaymentItem = {
     type: 'product' | 'subscription' | 'service' | 'fee' | string;
@@ -37,13 +38,8 @@ export interface PaymentStepAnimations {
     scaleAnim: Animated.Value;
 }
 
-export interface PaymentColors {
-    primary: string;
-    text: string;
-    secondaryText: string;
-    border: string;
-    success?: string;
-    error?: string;
-    background?: string;
-    card?: string;
-}
+/**
+ * Payment wizard steps consume bloom's ThemeColors directly (no adapter).
+ * Screen shells pass `useTheme().colors` straight through.
+ */
+export type PaymentColors = ThemeColors;