Fix text color (#13)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@authsignal/react",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "",
   "keywords": [
     "authsignal",

src/components/challenge/challenge.tsx

@@ -141,7 +141,7 @@ export function Challenge({
             <Drawer.Overlay className="as-fixed as-inset-0 as-z-50 as-bg-black/80" />
             <Drawer.Content
               aria-describedby={undefined}
-              className="as-fixed as-inset-x-0 as-bottom-0 as-z-50 as-mt-24 as-flex as-h-auto as-flex-col as-rounded-t-[10px] as-border as-bg-background as-px-4 as-pb-8"
+              className="as-fixed as-inset-x-0 as-bottom-0 as-z-50 as-mt-24 as-flex as-h-auto as-flex-col as-rounded-t-[10px] as-bg-background as-px-4 as-pb-8"
             >
               <div className="as-mx-auto as-mt-4 as-h-2 as-w-[100px] as-rounded-full as-bg-muted" />
               {content}

src/components/challenge/screens/authenticator-app-challenge.tsx

@@ -82,10 +82,10 @@ export function AuthenticatorAppChallenge() {
   return (
     <div className="as-flex as-flex-col as-space-y-6">
       <div className="as-space-y-2">
-        <TitleComponent className="as-text-center as-text-xl as-font-medium">
+        <TitleComponent className="as-text-center as-text-xl as-font-medium as-text-foreground">
           Confirm it&apos;s you
         </TitleComponent>
-        <p className="as-text-center as-text-sm">
+        <p className="as-text-center as-text-sm as-text-foreground">
           Enter the code from your authenticator app to proceed.
         </p>
       </div>

src/components/challenge/screens/email-otp-challenge.tsx

@@ -86,10 +86,10 @@ export function EmailOtpChallenge() {
   return (
     <div className="as-flex as-flex-col as-space-y-6">
       <div className="as-space-y-2">
-        <TitleComponent className="as-text-center as-text-xl as-font-medium">
+        <TitleComponent className="as-text-center as-text-xl as-font-medium as-text-foreground">
           Confirm it&apos;s you
         </TitleComponent>
-        <p className="as-text-center as-text-sm">
+        <p className="as-text-center as-text-sm as-text-foreground">
           Enter the code sent to {user?.email ?? ""} to proceed.
         </p>
       </div>

src/components/challenge/screens/passkey-challenge.tsx

@@ -57,31 +57,31 @@ export function PasskeyChallenge({ token }: PasskeyChallengeProps) {
       {state === State.AUTHENTICATING && (
         <>
           <div className="as-space-y-2">
-            <TitleComponent className="as-text-xl as-font-medium">
+            <TitleComponent className="as-text-xl as-font-medium as-text-foreground">
               Confirm it&apos;s you
             </TitleComponent>
-            <p className="as-text-sm">
+            <p className="as-text-sm as-text-foreground">
               You will receive a prompt from your browser to authenticate with
               your passkey.
             </p>
           </div>
-          <ReloadIcon className="as-mx-auto as-size-8 as-animate-spin" />
+          <ReloadIcon className="as-mx-auto as-size-8 as-animate-spin as-text-foreground" />
         </>
       )}
 
       {state === State.ERROR && (
         <>
           <div className="as-space-y-2">
-            <TitleComponent className="as-text-xl as-font-medium">
+            <TitleComponent className="as-text-xl as-font-medium as-text-foreground">
               Confirm it&apos;s you
             </TitleComponent>
-            <p className="as-text-sm">
+            <p className="as-text-sm as-text-foreground">
               There was a problem authenticating with your passkey.
             </p>
           </div>
 
           <button
-            className="as-inline-flex as-w-full as-items-center as-justify-center as-rounded-lg as-bg-primary as-px-3 as-py-2 as-text-sm as-font-medium as-text-white"
+            className="as-inline-flex as-w-full as-items-center as-justify-center as-rounded-lg as-bg-primary as-px-3 as-py-2 as-text-sm as-font-medium as-text-primary-foreground"
             type="button"
             onClick={handlePasskeyAuthentication}
           >

src/components/challenge/screens/sms-otp-challenge.tsx

@@ -86,10 +86,10 @@ export function SmsOtpChallenge() {
   return (
     <div className="as-flex as-flex-col as-space-y-6">
       <div className="as-space-y-2">
-        <TitleComponent className="as-text-center as-text-xl as-font-medium">
+        <TitleComponent className="as-text-center as-text-xl as-font-medium as-text-foreground">
           Confirm it&apos;s you
         </TitleComponent>
-        <p className="as-text-center as-text-sm">
+        <p className="as-text-center as-text-sm as-text-foreground">
           Enter the code sent to {user?.phoneNumber ?? ""} to proceed.
         </p>
       </div>

src/components/challenge/screens/verification-methods.tsx

@@ -17,7 +17,7 @@ export function VerificationMethods() {
 
   return (
     <div className="as-space-y-4">
-      <TitleComponent className="as-text-center as-text-xl as-font-medium">
+      <TitleComponent className="as-text-center as-text-xl as-font-medium as-text-foreground">
         Select an authentication method
       </TitleComponent>
       <ul className="as-space-y-3">
@@ -74,13 +74,13 @@ function VerificationMethodItem({
   return (
     <li>
       <button
-        className="as-flex as-w-full as-items-center as-rounded as-border as-p-2 as-shadow"
+        className="as-flex as-w-full as-items-center as-rounded as-border as-p-2 as-text-foreground as-shadow"
         onClick={() => setVerificationMethod(verificationMethod)}
         type="button"
       >
         <div className="as-flex as-items-center as-space-x-2">
           {icon}
-          <span className="as-text-sm as-font-medium">{label}</span>
+          <span className="as-text-sm as-font-medium ">{label}</span>
         </div>
         <ChevronRightIcon className="as-ml-auto as-size-4" />
       </button>

src/ui/dialog.tsx

@@ -38,13 +38,13 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "as-fixed as-left-1/2 as-top-1/2 as-z-50 as-grid as-w-full as-max-w-lg -as-translate-x-1/2 -as-translate-y-1/2 as-gap-4 as-border as-bg-background as-p-6 as-shadow-lg as-duration-200 data-[state=open]:as-animate-in data-[state=closed]:as-animate-out data-[state=closed]:as-fade-out-0 data-[state=open]:as-fade-in-0 data-[state=closed]:as-zoom-out-95 data-[state=open]:as-zoom-in-95 data-[state=closed]:as-slide-out-to-left-1/2 data-[state=closed]:as-slide-out-to-top-[48%] data-[state=open]:as-slide-in-from-left-1/2 data-[state=open]:as-slide-in-from-top-[48%] sm:as-rounded-lg",
+        "as-fixed as-left-1/2 as-top-1/2 as-z-50 as-grid as-w-full as-max-w-lg -as-translate-x-1/2 -as-translate-y-1/2 as-gap-4 as-bg-background as-p-6 as-shadow-lg as-duration-200 data-[state=open]:as-animate-in data-[state=closed]:as-animate-out data-[state=closed]:as-fade-out-0 data-[state=open]:as-fade-in-0 data-[state=closed]:as-zoom-out-95 data-[state=open]:as-zoom-in-95 data-[state=closed]:as-slide-out-to-left-1/2 data-[state=closed]:as-slide-out-to-top-[48%] data-[state=open]:as-slide-in-from-left-1/2 data-[state=open]:as-slide-in-from-top-[48%] sm:as-rounded-lg",
         className,
       )}
       {...props}
     >
       {children}
-      <DialogPrimitive.Close className="as-absolute as-right-4 as-top-4 as-rounded-sm as-opacity-70 as-ring-offset-background as-transition-opacity hover:as-opacity-100 focus:as-outline-none focus:as-ring-2 focus:as-ring-ring focus:as-ring-offset-2 disabled:as-pointer-events-none data-[state=open]:as-text-foreground">
+      <DialogPrimitive.Close className="as-absolute as-right-4 as-top-4 as-rounded-sm as-text-foreground as-opacity-70 as-ring-offset-background as-transition-opacity hover:as-opacity-100 focus:as-outline-none focus:as-ring-2 focus:as-ring-ring focus:as-ring-offset-2 disabled:as-pointer-events-none data-[state=open]:as-text-foreground">
         <Cross2Icon className="as-size-[1rem]" />
         <span className="as-sr-only">Close</span>
       </DialogPrimitive.Close>

src/ui/input-otp.tsx

@@ -43,7 +43,7 @@ const InputOTPSlot = React.forwardRef<
     <div
       ref={ref}
       className={cn(
-        "as-relative as-flex as-size-10 as-items-center as-justify-center as-rounded-lg as-border as-border-input-border as-text-sm as-shadow-sm as-transition-all xs:as-size-12",
+        "as-relative as-flex as-size-10 as-items-center as-justify-center as-rounded-lg as-border as-border-input-border as-text-sm as-text-foreground as-shadow-sm as-transition-all xs:as-size-12",
         isActive && "as-z-10 as-ring-1 as-ring-ring",
         className,
       )}