fix(ai-credits): theme token and text contrast fixes

packages/ai-credits-widget/src/AiCreditsWidget.tsx

@@ -75,7 +75,7 @@ function SetupConnectPrompt({
 }) {
   return (
     <YStack gap="$5" alignItems="center" paddingVertical="$6" width="100%">
-      <Text secondary center>
+      <Text tone="soft" center>
         Connect your wallet to get started
       </Text>
       <CircularActionButton
@@ -115,7 +115,7 @@ function SetupTabPanel({
         gBalance={state.gBalance}
         isGoodIdVerified={state.isGoodIdVerified}
       />
-      <Text secondary fontSize="$2">
+      <Text tone="soft" fontSize="$2">
         One-time setup — optional for now. Take the steps in any order, or skip ahead and come
         back when you are ready to buy.
       </Text>
@@ -170,7 +170,7 @@ function SwitchChainNotice({
           Wrong Network
         </Text>
       </XStack>
-      <Text secondary>Please switch to the Celo network to continue.</Text>
+      <Text tone="soft">Please switch to the Celo network to continue.</Text>
       <Button
         disabled={switching}
         onPress={() => {
@@ -191,7 +191,7 @@ function SwitchChainNotice({
           <Text color="$error" fontSize="$2">
             {shownError}
           </Text>
-          <Text secondary fontSize="$2">
+          <Text tone="soft" fontSize="$2">
             Some wallets cannot switch networks from a website. Change the network to Celo in your
             wallet app, then return here.
           </Text>
@@ -220,7 +220,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
           <Text color="$error" fontWeight="700">
             Payment Failed
           </Text>
-          {state.error && <Text secondary>{state.error}</Text>}
+          {state.error && <Text tone="soft">{state.error}</Text>}
         </AiCreditsStatusNotice>
         <AiCreditsPurchaseFlow
           state={state}
@@ -236,7 +236,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
         <Text color="$warning" fontWeight="700">
           Service Unavailable
         </Text>
-        <Text secondary>
+        <Text tone="soft">
           The AI credits service is temporarily unavailable. Your wallet has not been charged.
         </Text>
         <Button
@@ -259,7 +259,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
           <Text color="$warning" fontWeight="700">
             Insufficient G$ Balance
           </Text>
-          <Text secondary>
+          <Text tone="soft">
             You need at least 1 G$ to purchase AI credits. Top up your wallet and try again.
           </Text>
         </AiCreditsStatusNotice>
@@ -275,7 +275,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
       <Card>
         <YStack gap="$4" alignItems="center" padding="$4">
           <Spinner size="lg" />
-          <Text center secondary>
+          <Text center tone="soft">
             {message}
           </Text>
         </YStack>
@@ -289,7 +289,7 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
             <Text color="$error" fontWeight="700">
               Deep link unavailable
             </Text>
-            <Text secondary>{state.error}</Text>
+            <Text tone="soft">{state.error}</Text>
           </AiCreditsStatusNotice>
         )}
 
@@ -305,13 +305,13 @@ function BuyCreditsPanel({ state, actions, isPending, onPay }: BuyPanelProps) {
             <Text color="$error" fontWeight="700">
               Request Failed
             </Text>
-            <Text secondary>{state.error}</Text>
+            <Text tone="soft">{state.error}</Text>
           </AiCreditsStatusNotice>
         )}
 
         {state.gBalance !== null && Number.parseFloat(state.gBalance) <= 0 && (
           <AiCreditsStatusNotice>
-            <Text secondary>You need G$ before you can buy AI credits.</Text>
+            <Text tone="soft">You need G$ before you can buy AI credits.</Text>
           </AiCreditsStatusNotice>
         )}
 
@@ -618,7 +618,7 @@ export function AiCreditsWidget({
       themeOverrides={themeOverrides}
       defaultTheme={defaultTheme}
     >
-      <YStack backgroundColor="$background" width="100%" data-testid={testId}>
+      <YStack backgroundColor="$backgroundSurface" width="100%" data-testid={testId}>
         <AiCreditsInner
           environment={environment}
           backendUrl={backendUrl}

packages/ai-credits-widget/src/components/buy/AiCreditsHero.tsx

@@ -14,7 +14,7 @@ export function AiCreditsHero({ gBalance, isGoodIdVerified }: HeroCardProps) {
     <Card gap="$4" backgroundColor="$backgroundHover">
       <XStack justifyContent="space-between" alignItems="flex-start" gap="$2">
         <YStack gap="$1" flexShrink={1}>
-          <Text variant="label" secondary>
+          <Text variant="label" tone="soft">
             Your G$ Balance
           </Text>
           {gBalance !== null ? (

packages/ai-credits-widget/src/components/buy/AmountPicker.tsx

@@ -256,14 +256,14 @@ export function AmountPicker({
       <XStack justifyContent="space-between" alignItems="center" gap="$2">
         <Heading level={5}>Buy Credits</Heading>
         {usd1ToGLabel && (
-          <Text fontSize="$2" secondary flexShrink={1} textAlign="right">
+          <Text fontSize="$2" tone="soft" flexShrink={1} textAlign="right">
             US$1 ≈ {usd1ToGLabel} G$
           </Text>
         )}
       </XStack>
 
       <XStack justifyContent="space-between" alignItems="center">
-        <Text variant="label" secondary>
+        <Text variant="label" tone="soft">
           Your G$ Balance
         </Text>
         {gBalance !== null ? (
@@ -286,15 +286,15 @@ export function AmountPicker({
         />
         <XStack justifyContent="space-between" alignItems="center" gap="$2">
           {depositG > 0 && depositEstUsd ? (
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               ≈ {depositEstUsd}
             </Text>
           ) : depositG > 0 && quotePending ? (
             <Spinner size="sm" />
           ) : (
             <YStack />
           )}
-          <Text fontSize="$1" secondary textAlign="right" flexShrink={0}>
+          <Text fontSize="$1" tone="soft" textAlign="right" flexShrink={0}>
             {depositMinUsdLabel}
           </Text>
         </XStack>
@@ -315,15 +315,15 @@ export function AmountPicker({
         />
         <XStack justifyContent="space-between" alignItems="center" gap="$2">
           {streamG > 0 && streamEstUsd ? (
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               ≈ {streamEstUsd}/month
             </Text>
           ) : streamG > 0 && quotePending ? (
             <Spinner size="sm" />
           ) : (
             <YStack />
           )}
-          <Text fontSize="$1" secondary textAlign="right" flexShrink={0}>
+          <Text fontSize="$1" tone="soft" textAlign="right" flexShrink={0}>
             {streamMinUsdLabel}
           </Text>
         </XStack>

packages/ai-credits-widget/src/components/buy/BuyerKeyPanel.tsx

@@ -58,11 +58,11 @@ export function BuyerKeyPanel({
 
         {buyerPubKey && (
           <YStack gap="$2">
-            <Text variant="label" secondary>
+            <Text variant="label" tone="soft">
               Address (registered on-chain)
             </Text>
             <XStack
-              backgroundColor="$backgroundMuted"
+              backgroundColor="$backgroundSurface"
               borderRadius="$2"
               padding="$3"
               justifyContent="space-between"
@@ -89,7 +89,7 @@ export function BuyerKeyPanel({
                   </Text>
                 </AiCreditsStatusNotice>
                 <XStack justifyContent="space-between" alignItems="center">
-                  <Text variant="label" secondary>
+                  <Text variant="label" tone="soft">
                     Private Key — save this securely
                   </Text>
                   <Button
@@ -109,7 +109,7 @@ export function BuyerKeyPanel({
                   </Text>
                 </AiCreditsStatusNotice>
                 <XStack
-                  backgroundColor="$backgroundMuted"
+                  backgroundColor="$backgroundSurface"
                   borderRadius="$2"
                   padding="$3"
                   justifyContent="space-between"
@@ -134,7 +134,7 @@ export function BuyerKeyPanel({
                   </Button>
                 </XStack>
                 <AntseedSignerRow mode="generate" />
-                <Text fontSize="$2" secondary>
+                <Text fontSize="$2" tone="soft">
                   The public address above is the signer identity used for AI credits.
                 </Text>
               </>

packages/ai-credits-widget/src/components/buy/OperatorConsentStep.tsx

@@ -12,7 +12,7 @@ import {
   XStack,
   YStack,
 } from '@goodwidget/ui'
-import { truncateAddress, compactButtonProps } from '../shared/styles'
+import { truncateAddress, compactButtonProps, monospaceSingleLineStyle } from '../shared/styles'
 
 interface OperatorConsentStepProps {
   buyerPubKey: string | null
@@ -31,10 +31,10 @@ interface OperatorConsentStepProps {
 function ConsentBullet({ children }: { children: React.ReactNode }) {
   return (
     <XStack gap="$2" alignItems="flex-start">
-      <Text fontSize="$2" secondary lineHeight="$3">
+      <Text fontSize="$2" tone="soft" lineHeight="$3">
         •
       </Text>
-      <Text fontSize="$2" secondary lineHeight="$3" flex={1}>
+      <Text fontSize="$2" tone="soft" lineHeight="$3" flex={1}>
         {children}
       </Text>
     </XStack>
@@ -110,7 +110,7 @@ export function OperatorConsentStep({
       {buyerPubKey && (
         <Text fontSize="$2" lineHeight="$2">
           Buyer address:{' '}
-          <Text fontFamily="$mono" fontSize="$2">
+          <Text fontSize="$2" style={monospaceSingleLineStyle}>
             {truncateAddress(buyerPubKey)}
           </Text>
         </Text>
@@ -128,7 +128,7 @@ export function OperatorConsentStep({
         </Text>
       ) : canRestoreKey ? (
         <>
-          <Text fontSize="$2" secondary lineHeight="$3">
+          <Text fontSize="$2" tone="soft" lineHeight="$3">
             This browser does not hold your signer key. Restore it from your wallet to continue —
             the same wallet always produces the same key.
           </Text>

packages/ai-credits-widget/src/components/history/HistoryTab.tsx

@@ -119,7 +119,7 @@ function entryDetailRows(entry: GdCreditEntry): { label: string; value: string }
 function EntryDetailRow({ label, value }: { label: string; value: string }) {
   return (
     <XStack gap="$2" alignItems="flex-start" width="100%">
-      <Text fontSize="$1" fontWeight="600" secondary minWidth={72} flexShrink={0}>
+      <Text fontSize="$1" fontWeight="600" tone="soft" minWidth={72} flexShrink={0}>
         {label}
       </Text>
       <Text
@@ -314,7 +314,7 @@ function CreditHistoryEntryRow({
               {amounts.secondary}
             </Text>
           ) : null}
-          <Text fontSize="$1" secondary>
+          <Text fontSize="$1" tone="soft">
             {formatEntryDate(entry.createdAt)}
           </Text>
         </YStack>
@@ -353,7 +353,7 @@ function SourceFilterChip({
       borderRadius="$full"
       borderWidth={1}
       borderColor={selected ? '$primary' : '$borderColor'}
-      backgroundColor={selected ? '$infoMuted' : '$backgroundDark'}
+      backgroundColor={selected ? '$infoMuted' : '$background'}
       hoverStyle={{
         opacity: 0.9,
       }}
@@ -398,7 +398,7 @@ function StatusFilterSelect({
         borderRadius="$3"
         borderWidth={1}
         borderColor="$borderColor"
-        backgroundColor="$backgroundDark"
+        backgroundColor="$background"
         cursor="pointer"
         onPress={() => setOpen((current) => !current)}
       >
@@ -418,7 +418,7 @@ function StatusFilterSelect({
           borderRadius="$3"
           borderWidth={1}
           borderColor="$borderColor"
-          backgroundColor="$backgroundDark"
+          backgroundColor="$background"
           overflow="hidden"
           zIndex={30}
         >
@@ -490,7 +490,7 @@ function BuyerFilterSelect({
         borderRadius="$3"
         borderWidth={1}
         borderColor="$borderColor"
-        backgroundColor="$backgroundDark"
+        backgroundColor="$background"
         cursor="pointer"
         onPress={() => setOpen((current) => !current)}
       >
@@ -510,7 +510,7 @@ function BuyerFilterSelect({
           borderRadius="$3"
           borderWidth={1}
           borderColor="$borderColor"
-          backgroundColor="$backgroundDark"
+          backgroundColor="$background"
           overflow="hidden"
           zIndex={35}
         >
@@ -575,14 +575,14 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
         <XStack alignItems="flex-start" justifyContent="space-between" gap="$2" width="100%">
           <YStack flex={1} gap="$0.5" minWidth={0}>
             <Heading level={4}>AI Credit History</Heading>
-            <Text fontSize="$1" secondary>
+            <Text fontSize="$1" tone="soft">
               {rangeSummary}
             </Text>
           </YStack>
         </XStack>
 
         <YStack gap="$1">
-          <Text fontSize="$1" fontWeight="600" secondary letterSpacing={0.6}>
+          <Text fontSize="$1" fontWeight="600" tone="soft" letterSpacing={0.6}>
             TOTAL ACCUMULATED
           </Text>
           <Text fontSize="$7" fontWeight="700" color="$color">
@@ -638,7 +638,7 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
       </XStack>
 
       <XStack alignItems="center" justifyContent="space-between" gap="$2" width="100%">
-        <Text fontSize="$1" fontWeight="700" secondary letterSpacing={0.6}>
+        <Text fontSize="$1" fontWeight="700" tone="soft" letterSpacing={0.6}>
           CREDIT HISTORY
         </Text>
         <XStack
@@ -665,7 +665,7 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
         <Card gap="$2">
           <YStack alignItems="center" paddingVertical="$4" gap="$2">
             <Spinner size="sm" />
-            <Text fontSize="$2" secondary>
+            <Text fontSize="$2" tone="soft">
               Loading credit history…
             </Text>
           </YStack>
@@ -691,13 +691,13 @@ export function HistoryTab({ state, actions, knownBuyers = [] }: HistoryTabProps
         </Card>
       ) : activeSources.length === 0 ? (
         <Card>
-          <Text fontSize="$2" secondary>
+          <Text fontSize="$2" tone="soft">
             Select at least one source to view history.
           </Text>
         </Card>
       ) : entries.length === 0 ? (
         <Card>
-          <Text fontSize="$2" secondary>
+          <Text fontSize="$2" tone="soft">
             No credit history matches these filters.
           </Text>
         </Card>