custom themed components

tkhq · Dec 5, 2024 · e7455df · e7455df
1 parent f1b84df
commit e7455df
Show file tree

Hide file tree

Showing 17 changed files with 391 additions and 409 deletions.
diff --git a/examples/react-components/package.json b/examples/react-components/package.json
@@ -16,7 +16,7 @@
     "@mui/icons-material": "^6.1.5",
     "@mui/material": "^6.1.5",
     "@noble/hashes": "1.4.0",
-    "@solana/web3.js": "^1.95.4",
+    "@solana/web3.js": "^1.95.8",
     "@turnkey/sdk-browser": "^1.10.0",
     "@turnkey/sdk-react": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",

diff --git a/examples/react-components/src/app/dashboard/dashboard.css b/examples/react-components/src/app/dashboard/dashboard.css
@@ -19,7 +19,7 @@ body {
   margin: 0;
   padding: 0;
   width: 100vw;
-  height: 100vh; 
+  height: 100vh;
   background-image: url("../../../public/grid.svg");
   background-size: cover;
   background-repeat: no-repeat;
@@ -251,7 +251,7 @@ button {
   border: 1px solid var(--Greyscale-800, #3f464b);
   border-radius: 8px;
   cursor: pointer;
-  transition: opacity 0.3s ease;
+  transition: 0.3s ease;
 }
 
 button:disabled {

diff --git a/examples/react-components/src/app/dashboard/page.tsx b/examples/react-components/src/app/dashboard/page.tsx
@@ -41,8 +41,7 @@ import { Toaster, toast } from "sonner";
 
 export default function Dashboard() {
   const router = useRouter();
-  const { turnkey, getActiveClient, authIframeClient, passkeyClient } =
-    useTurnkey();
+  const { turnkey, authIframeClient, passkeyClient } = useTurnkey();
   const [loading, setLoading] = useState(true);
   const [accounts, setAccounts] = useState<any>([]);
   const [wallets, setWallets] = useState<any[]>([]);
@@ -341,7 +340,7 @@ export default function Dashboard() {
 
   const handleWalletSelect = async (walletId: string) => {
     setSelectedWallet(walletId);
-    setAnchorEl(null); 
+    setAnchorEl(null);
 
     // Fetch accounts for the selected wallet
     const accountsResponse = await authIframeClient!.getWalletAccounts({
@@ -641,7 +640,7 @@ export default function Dashboard() {
                     }
                     label=""
                     className="radioButton"
-                    style={{ pointerEvents: "none" }} 
+                    style={{ pointerEvents: "none" }}
                   />
                 </div>
               ))}

diff --git a/examples/react-components/src/app/page.tsx b/examples/react-components/src/app/page.tsx
@@ -104,8 +104,8 @@ export default function AuthPage() {
     };
     const configToCopy = {
       authConfig,
-      configOrder
-    }
+      configOrder,
+    };
     navigator.clipboard.writeText(JSON.stringify(configToCopy, null, 2));
     toast.success("Copied to clipboard!");
   };

diff --git a/examples/with-solana-passkeys/package.json b/examples/with-solana-passkeys/package.json
@@ -35,7 +35,7 @@
     "typescript": "5.1.3"
   },
   "devDependencies": {
-    "@solana/web3.js": "^1.95.1",
+    "@solana/web3.js": "^1.95.8",
     "@types/node": "20.3.1",
     "@types/react": "^18.2.25",
     "@types/react-dom": "^18.2.6"

diff --git a/examples/with-solana/package.json b/examples/with-solana/package.json
@@ -16,7 +16,7 @@
   "dependencies": {
     "@project-serum/anchor": "^0.26.0",
     "@solana/spl-token": "^0.4.8",
-    "@solana/web3.js": "^1.88.1",
+    "@solana/web3.js": "^1.95.8",
     "@turnkey/api-key-stamper": "workspace:*",
     "@turnkey/http": "workspace:*",
     "@turnkey/sdk-server": "workspace:*",

diff --git a/examples/with-wallet-stamper/package.json b/examples/with-wallet-stamper/package.json
@@ -25,7 +25,7 @@
     "@solana/wallet-adapter-react": "^0.15.35",
     "@solana/wallet-adapter-react-ui": "^0.9.35",
     "@solana/wallet-adapter-wallets": "^0.19.32",
-    "@solana/web3.js": "^1.88.1",
+    "@solana/web3.js": "^1.95.8",
     "@t3-oss/env-nextjs": "^0.11.0",
     "@turnkey/api-key-stamper": "workspace:*",
     "@turnkey/encoding": "workspace:*",

diff --git a/packages/sdk-react/src/components/auth/Auth.module.css b/packages/sdk-react/src/components/auth/Auth.module.css
@@ -36,11 +36,14 @@
 }
 
 .defaultLoader {
+  max-width: 450px;
+  min-width: 375px;
   position: relative;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
+  width: 100%;
 }
 
 .circularProgress {
@@ -215,7 +218,7 @@
   min-height: 16px;
   text-align: center;
   margin-top: 12px;
-  color: var(--text-error);
+  color: var(--error-color);
   font-size: 12px;
 }
 
@@ -286,3 +289,11 @@
   cursor: pointer;
   text-align: center;
 }
+
+.primaryText {
+  color: var(--text-primary);
+}
+
+.secondaryText {
+  color: var(--text-secondary);
+}
diff --git a/packages/sdk-react/src/components/auth/Auth.tsx b/packages/sdk-react/src/components/auth/Auth.tsx
@@ -10,12 +10,43 @@ import turnkeyIcon from "assets/turnkey.svg";
 import googleIcon from "assets/google.svg";
 import facebookIcon from "assets/facebook.svg";
 import appleIcon from "assets/apple.svg";
-import passkeyIcon from "assets/passkey.svg";
-import passkeyIconRed from "assets/passkey-red.svg";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import OtpVerification from "./OtpVerification";
 import { useTurnkey } from "../../hooks/use-turnkey";
 
+const passkeyIcon = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="43" height="48" fill="none">
+    <path
+      fill="var(--accent-color)"
+      fill-rule="evenodd"
+      d="M27.52 37.06a6.8 6.8 0 0 0-2.02-.31H12a6.75 6.75 0 0 0-6.75 6.75V48H.75v-4.5A11.25 11.25 0 0 1 12 32.25h13.5c.68 0 1.355.062 2.016.182zm4.698-23.74a13.5 13.5 0 1 0-8.503 13.484c-.057-.178-.131-.425-.167-.566a13 13 0 0 1-.229-1.134 12 12 0 0 1-.054-.448q-.02-.202-.013-1.064c.007-.82.01-.877.055-1.186.018-.121.046-.29.072-.438a9 9 0 1 1 4.315-6.714 13.83 13.83 0 0 1 .87-.564 14 14 0 0 1 1.08-.556c.102-.045.299-.128.44-.184.14-.056.384-.146.544-.202.16-.055.436-.141.615-.194.18-.05.467-.125.641-.165.092-.02.214-.046.334-.07"
+      clip-rule="evenodd"
+    />
+    <path
+      fill="var(--accent-color)"
+      fill-rule="evenodd"
+      d="M33.844 16.554a9.563 9.563 0 0 0-.975.134c-.125.022-.355.075-.51.114s-.418.12-.589.177a11 11 0 0 0-.553.21 12 12 0 0 0-.519.244 8.29 8.29 0 0 0-.961.573c-.114.08-.313.23-.445.334-.13.104-.358.31-.507.454a10 10 0 0 0-.466.495c-.107.127-.269.334-.362.46-.091.128-.232.34-.313.474-.079.133-.195.34-.256.46-.062.122-.15.308-.196.413a10 10 0 0 0-.152.387c-.04.107-.1.304-.14.44a9 9 0 0 0-.119.51c-.028.145-.065.374-.082.51a6 6 0 0 0-.032.773c-.002.327.007.598.021.712a8.924 8.924 0 0 0 .163.905c.03.116.09.322.134.457.046.136.125.35.178.475a8 8 0 0 0 .725 1.329 9.15 9.15 0 0 0 .622.772c.111.121.294.306.408.41.114.101.295.256.4.342.108.085.273.211.37.28.097.068.244.165.325.218l.299.179c.082.047.251.137.374.2.125.062.232.127.24.146.013.025.018 2.403.018 7.032 0 5.905.004 7.018.025 7.125.014.07.047.18.075.24.029.064.08.156.113.203.032.05.522.654 1.086 1.345.564.693 1.07 1.31 1.123 1.371.054.063.14.151.195.195.054.042.162.111.239.151s.204.092.281.115c.121.035.181.04.413.04.206 0 .3-.007.387-.03a2 2 0 0 0 .237-.09 1.8 1.8 0 0 0 .388-.25c.029-.029.547-.657 1.153-1.397a97 97 0 0 0 1.12-1.383.4.4 0 0 0 .019-.137c0-.053-.016-.178-.035-.276a5 5 0 0 0-.273-.876 24 24 0 0 0-.298-.73 32 32 0 0 0-.626-1.365.8.8 0 0 1-.069-.172q.001-.033.041-.043c.021-.003.134-.016.25-.026s.295-.032.395-.046c.102-.016.248-.044.325-.065a.9.9 0 0 0 .237-.102.8.8 0 0 0 .15-.133c.028-.037.073-.116.1-.174.026-.058.054-.16.065-.229a1.895 1.895 0 0 0-.042-.589 2 2 0 0 0-.074-.193c-.023-.053-.355-.542-.736-1.085-.38-.543-.693-1.005-.693-1.025 0-.028.037-.046.234-.105.128-.04.339-.113.469-.162.132-.047.293-.116.36-.15a1 1 0 0 0 .204-.144.8.8 0 0 0 .144-.212c.034-.072.072-.18.085-.238s.024-.2.024-.316c0-.123-.009-.25-.024-.308a1.4 1.4 0 0 0-.072-.202c-.032-.07-.275-.39-.737-.975-.378-.479-.687-.883-.687-.9s.018-.043.04-.055.197-.11.39-.215c.194-.103.431-.237.528-.295.096-.058.22-.15.274-.204a1.1 1.1 0 0 0 .257-.459c.026-.1.031-.247.04-1.283.005-.642.016-1.178.023-1.19s.105-.069.22-.125c.112-.058.284-.15.38-.204a10 10 0 0 0 .985-.668 6.762 6.762 0 0 0 .826-.767c.107-.117.267-.305.358-.418a8 8 0 0 0 .605-.891 8.9 8.9 0 0 0 .373-.756c.045-.105.12-.308.17-.448a8 8 0 0 0 .156-.536c.037-.155.088-.408.113-.563.023-.155.05-.381.061-.505a8 8 0 0 0-.007-1.139 8 8 0 0 0-.07-.527 8 8 0 0 0-.097-.466c-.028-.116-.08-.3-.116-.413a7 7 0 0 0-.83-1.714 10 10 0 0 0-.256-.37 9 9 0 0 0-.23-.29 9 9 0 0 0-.81-.82 9 9 0 0 0-.395-.32 9 9 0 0 0-.835-.556 13 13 0 0 0-.417-.221 11 11 0 0 0-.483-.223 8 8 0 0 0-.98-.343 11 11 0 0 0-.422-.108c-.106-.022-.288-.06-.404-.079a10 10 0 0 0-.51-.073 8 8 0 0 0-.852-.043c-.304-.001-.644.002-.756.011m.207 3.334-.058.006a4.6 4.6 0 0 0-1.283.341 4 4 0 0 0-.334.159 4.354 4.354 0 0 0-.668.452 5.5 5.5 0 0 0-.669.69 5 5 0 0 0-.207.308 4 4 0 0 0-.18.325c-.04.088-.101.234-.135.325a3.856 3.856 0 0 0-.177.66c-.016.087-.034.24-.04.342-.01.159-.008.19.017.215.028.03.25.031 4.175.031 3.663 0 4.15-.003 4.174-.026q.029-.027.028-.12a3 3 0 0 0-.072-.574 3.9 3.9 0 0 0-.297-.87 4 4 0 0 0-.21-.379 6 6 0 0 0-.23-.316 6 6 0 0 0-.346-.37 5 5 0 0 0-.365-.326 7 7 0 0 0-.246-.178 5 5 0 0 0-.264-.16 4.6 4.6 0 0 0-1.585-.52 5.681 5.681 0 0 0-.84-.035z"
+      clip-rule="evenodd"
+    />
+  </svg>
+);
+
+const passkeyIconError = (
+  <svg xmlns="http://www.w3.org/2000/svg" width="43" height="48" fill="none">
+    <path
+      fill="var(--error-color)"
+      fill-rule="evenodd"
+      d="M27.52 37.06a6.8 6.8 0 0 0-2.02-.31H12a6.75 6.75 0 0 0-6.75 6.75V48H.75v-4.5A11.25 11.25 0 0 1 12 32.25h13.5c.68 0 1.355.062 2.016.182zm4.698-23.74a13.5 13.5 0 1 0-8.503 13.484c-.057-.178-.131-.425-.167-.566a13 13 0 0 1-.229-1.134 12 12 0 0 1-.054-.448q-.02-.202-.013-1.064c.007-.82.01-.877.055-1.186.018-.121.046-.29.072-.438a9 9 0 1 1 4.315-6.714 13.83 13.83 0 0 1 .87-.564 14 14 0 0 1 1.08-.556c.102-.045.299-.128.44-.184.14-.056.384-.146.544-.202.16-.055.436-.141.615-.194.18-.05.467-.125.641-.165.092-.02.214-.046.334-.07"
+      clip-rule="evenodd"
+    />
+    <path
+      fill="var(--error-color)"
+      fill-rule="evenodd"
+      d="M33.844 16.554a9.563 9.563 0 0 0-.975.134c-.125.022-.355.075-.51.114s-.418.12-.589.177a11 11 0 0 0-.553.21 12 12 0 0 0-.519.244 8.29 8.29 0 0 0-.961.573c-.114.08-.313.23-.445.334-.13.104-.358.31-.507.454a10 10 0 0 0-.466.495c-.107.127-.269.334-.362.46-.091.128-.232.34-.313.474-.079.133-.195.34-.256.46-.062.122-.15.308-.196.413a10 10 0 0 0-.152.387c-.04.107-.1.304-.14.44a9 9 0 0 0-.119.51c-.028.145-.065.374-.082.51a6 6 0 0 0-.032.773c-.002.327.007.598.021.712a8.924 8.924 0 0 0 .163.905c.03.116.09.322.134.457.046.136.125.35.178.475a8 8 0 0 0 .725 1.329 9.15 9.15 0 0 0 .622.772c.111.121.294.306.408.41.114.101.295.256.4.342.108.085.273.211.37.28.097.068.244.165.325.218l.299.179c.082.047.251.137.374.2.125.062.232.127.24.146.013.025.018 2.403.018 7.032 0 5.905.004 7.018.025 7.125.014.07.047.18.075.24.029.064.08.156.113.203.032.05.522.654 1.086 1.345.564.693 1.07 1.31 1.123 1.371.054.063.14.151.195.195.054.042.162.111.239.151s.204.092.281.115c.121.035.181.04.413.04.206 0 .3-.007.387-.03a2 2 0 0 0 .237-.09 1.8 1.8 0 0 0 .388-.25c.029-.029.547-.657 1.153-1.397a97 97 0 0 0 1.12-1.383.4.4 0 0 0 .019-.137c0-.053-.016-.178-.035-.276a5 5 0 0 0-.273-.876 24 24 0 0 0-.298-.73 32 32 0 0 0-.626-1.365.8.8 0 0 1-.069-.172q.001-.033.041-.043c.021-.003.134-.016.25-.026s.295-.032.395-.046c.102-.016.248-.044.325-.065a.9.9 0 0 0 .237-.102.8.8 0 0 0 .15-.133c.028-.037.073-.116.1-.174.026-.058.054-.16.065-.229a1.895 1.895 0 0 0-.042-.589 2 2 0 0 0-.074-.193c-.023-.053-.355-.542-.736-1.085-.38-.543-.693-1.005-.693-1.025 0-.028.037-.046.234-.105.128-.04.339-.113.469-.162.132-.047.293-.116.36-.15a1 1 0 0 0 .204-.144.8.8 0 0 0 .144-.212c.034-.072.072-.18.085-.238s.024-.2.024-.316c0-.123-.009-.25-.024-.308a1.4 1.4 0 0 0-.072-.202c-.032-.07-.275-.39-.737-.975-.378-.479-.687-.883-.687-.9s.018-.043.04-.055.197-.11.39-.215c.194-.103.431-.237.528-.295.096-.058.22-.15.274-.204a1.1 1.1 0 0 0 .257-.459c.026-.1.031-.247.04-1.283.005-.642.016-1.178.023-1.19s.105-.069.22-.125c.112-.058.284-.15.38-.204a10 10 0 0 0 .985-.668 6.762 6.762 0 0 0 .826-.767c.107-.117.267-.305.358-.418a8 8 0 0 0 .605-.891 8.9 8.9 0 0 0 .373-.756c.045-.105.12-.308.17-.448a8 8 0 0 0 .156-.536c.037-.155.088-.408.113-.563.023-.155.05-.381.061-.505a8 8 0 0 0-.007-1.139 8 8 0 0 0-.07-.527 8 8 0 0 0-.097-.466c-.028-.116-.08-.3-.116-.413a7 7 0 0 0-.83-1.714 10 10 0 0 0-.256-.37 9 9 0 0 0-.23-.29 9 9 0 0 0-.81-.82 9 9 0 0 0-.395-.32 9 9 0 0 0-.835-.556 13 13 0 0 0-.417-.221 11 11 0 0 0-.483-.223 8 8 0 0 0-.98-.343 11 11 0 0 0-.422-.108c-.106-.022-.288-.06-.404-.079a10 10 0 0 0-.51-.073 8 8 0 0 0-.852-.043c-.304-.001-.644.002-.756.011m.207 3.334-.058.006a4.6 4.6 0 0 0-1.283.341 4 4 0 0 0-.334.159 4.354 4.354 0 0 0-.668.452 5.5 5.5 0 0 0-.669.69 5 5 0 0 0-.207.308 4 4 0 0 0-.18.325c-.04.088-.101.234-.135.325a3.856 3.856 0 0 0-.177.66c-.016.087-.034.24-.04.342-.01.159-.008.19.017.215.028.03.25.031 4.175.031 3.663 0 4.15-.003 4.174-.026q.029-.027.028-.12a3 3 0 0 0-.072-.574 3.9 3.9 0 0 0-.297-.87 4 4 0 0 0-.21-.379 6 6 0 0 0-.23-.316 6 6 0 0 0-.346-.37 5 5 0 0 0-.365-.326 7 7 0 0 0-.246-.178 5 5 0 0 0-.264-.16 4.6 4.6 0 0 0-1.585-.52 5.681 5.681 0 0 0-.84-.035z"
+      clip-rule="evenodd"
+    />
+  </svg>
+);
 interface AuthProps {
   onHandleAuthSuccess: () => Promise<void>;
   onError: (errorMessage: string) => void;
@@ -28,13 +59,15 @@ interface AuthProps {
     googleEnabled: boolean;
   };
   configOrder: string[];
+  theme?: Record<string, string>;
 }
 
 const Auth: React.FC<AuthProps> = ({
   onHandleAuthSuccess,
   onError,
   authConfig,
   configOrder,
+  theme,
 }) => {
   const { passkeyClient, authIframeClient } = useTurnkey();
   const [email, setEmail] = useState<string>("");
@@ -49,6 +82,15 @@ const Auth: React.FC<AuthProps> = ({
   const [loading, setLoading] = useState(true);
   const [passkeyCreated, setPasskeyCreated] = useState(false);
 
+  useEffect(() => {
+    if (theme) {
+      const root = document.documentElement.style;
+      Object.entries(theme).forEach(([key, value]) => {
+        root.setProperty(key, value);
+      });
+    }
+  }, [theme]);
+
   const handleResendCode = async () => {
     if (step === "otpEmail") {
       await handleOtpLogin("EMAIL", email, "OTP_TYPE_EMAIL");
@@ -241,9 +283,6 @@ const Auth: React.FC<AuthProps> = ({
         borderRadius: "50%",
         padding: "6px",
         transition: "background-color 0.3s ease",
-        "&:hover": {
-          backgroundColor: "var(--button-hover-bg)",
-        },
       }}
     />
   );
@@ -312,6 +351,7 @@ const Auth: React.FC<AuthProps> = ({
                 fullWidth
                 sx={{
                   "& .MuiOutlinedInput-root": {
+                    color: "var(--input-text)",
                     "& fieldset": {
                       borderColor: "var(--input-border)",
                     },
@@ -397,16 +437,16 @@ const Auth: React.FC<AuthProps> = ({
       {passkeySignupScreen ? (
         <div className={styles.authCard}>
           {renderBackButton()}
-          <div className={styles.passkeyIconContainer}>
-            <img src={passkeyIcon} />
-          </div>
+          <div className={styles.passkeyIconContainer}>{passkeyIcon}</div>
           <center>
-            <h3>Create a passkey</h3>
+            <h3 className={styles.primaryText}>Create a passkey</h3>
           </center>
           <div className={styles.rowsContainer}>
             <center>
-              Passkeys allow for easy biometric access to your wallet and can be
-              synced across devices.
+              <span className={styles.primaryText}>
+                Passkeys allow for easy biometric access to your wallet and can
+                be synced across devices.
+              </span>
             </center>
           </div>
           <button
@@ -422,22 +462,20 @@ const Auth: React.FC<AuthProps> = ({
           {renderBackButton()}
           <div className={styles.passkeyIconContainer}>
             {passkeySignupError ? (
-              <div className={styles.loadingWrapper}>
-                <img src={passkeyIconRed} />
-              </div>
+              <div className={styles.loadingWrapper}>{passkeyIconError}</div>
             ) : (
               <div className={styles.loadingWrapper}>
                 <CircularProgress
                   size={80}
                   thickness={1}
                   className={styles.circularProgress!}
                 />
-                <img src={passkeyIcon} />
+                {passkeyIcon}
               </div>
             )}
           </div>
           <center>
-            <h3>
+            <h3 className={styles.primaryText}>
               {passkeySignupError
                 ? "Authentication error"
                 : passkeyCreated
@@ -446,7 +484,9 @@ const Auth: React.FC<AuthProps> = ({
             </h3>
           </center>
           <div className={styles.rowsContainer}>
-            <center>{passkeySignupError ? passkeySignupError : ""}</center>
+            <span className={styles.primaryText}>
+              <center>{passkeySignupError ? passkeySignupError : ""}</center>
+            </span>
           </div>
           {passkeySignupError && (
             <button
@@ -489,7 +529,9 @@ const Auth: React.FC<AuthProps> = ({
           ) : (
             <div className={styles.authCard}>
               {otpId && renderBackButton()}
-              <h2>{!otpId && "Log in or sign up"}</h2>
+              <h2 className={styles.primaryText}>
+                {!otpId && "Log in or sign up"}
+              </h2>
               <div className={styles.authForm}>
                 {!otpId &&
                   configOrder

diff --git a/packages/sdk-react/src/components/auth/OtpVerification.module.css b/packages/sdk-react/src/components/auth/OtpVerification.module.css
@@ -55,6 +55,6 @@
   min-height: 16px;
   text-align: center;
   margin-top: 12px;
-  color: var(--text-error);
+  color: var(--error-color);
   font-size: 12px;
 }
diff --git a/packages/sdk-react/src/components/auth/OtpVerification.tsx b/packages/sdk-react/src/components/auth/OtpVerification.tsx
@@ -77,14 +77,14 @@ const OtpVerification: React.FC<OtpVerificationProps> = ({
           <EmailIcon
             sx={{
               fontSize: "86px",
-              color: "var(--text-primary)",
+              color: "var(--accent-color)",
             }}
           />
         ) : (
           <SmsIcon
             sx={{
               fontSize: "86px",
-              color: "var(--text-primary)",
+              color: "var(--accent-color)",
             }}
           />
         )}

diff --git a/packages/sdk-react/src/components/auth/PhoneInput.tsx b/packages/sdk-react/src/components/auth/PhoneInput.tsx
@@ -56,6 +56,7 @@ export const MuiPhone: React.FC<MUIPhoneProps> = ({
       fullWidth
       sx={{
         "& .MuiOutlinedInput-root": {
+          color: "var(--input-text)",
           "& fieldset": {
             borderColor: "var(--input-border)",
           },

diff --git a/packages/sdk-react/src/components/auth/otp.tsx b/packages/sdk-react/src/components/auth/otp.tsx
@@ -76,14 +76,18 @@ const OtpInput = forwardRef<unknown, OtpInputProps>(
                 textAlign: "center",
                 fontSize: "1.5rem",
                 width: "60px",
-                background: "white",
+                background: "var(--input-bg)",
               },
             }}
             variant="outlined"
             sx={{
               "& .MuiOutlinedInput-root": {
+                color: "var(--input-text)",
                 "& fieldset": {
-                  borderColor: hasError && !digit ? "red" : "var(--input-border)",
+                  borderColor:
+                    hasError && !digit
+                      ? "var(--error-color)"
+                      : "var(--input-border)",
                 },
                 "&:hover fieldset": {
                   borderColor: "var(--input-border-hover)",