fix: dark input focus rings (#114)

Author: barvian

app/internal-explorer/page.tsx

@@ -81,7 +81,7 @@ function SearchBar({ chain, onError }: { chain: ExplorerChain; onError: (error:
         spellCheck={false}
         autoComplete="off"
         className={cn(
-          'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40',
+          'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40',
           searchHash.trim() ? 'pr-24' : 'pr-3.5',
         )}
       />
@@ -499,7 +499,7 @@ function RejectedTransactionsTab({ chain }: { chain: ExplorerChain }) {
   });
 
   const inputClass =
-    'rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-1.5 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40';
+    'rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-1.5 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40';
 
   return (
     <section className="flex flex-col gap-4">

app/upgrades/changelog/ChangelogClient.tsx

@@ -190,7 +190,7 @@ export function ChangelogClient() {
           onChange={handleQueryChange}
           placeholder="Search by title, EIP, or summary keyword"
           aria-label="Search changes"
-          className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none placeholder:text-bds-gray-50"
+          className="h-[34px] min-w-[min(100%,14rem)] flex-1 rounded-full border border-bds-gray-10 bg-background px-4 text-[14px] text-foreground outline-none transition-colors placeholder:text-bds-gray-50 focus:border-foreground dark:border-white/10 dark:focus:border-white/40"
         />
       </div>
 

app/vibenet/components/ExplorerSearch.tsx

@@ -93,7 +93,7 @@ export function ExplorerSearch() {
           spellCheck={false}
           autoComplete="off"
           className={cn(
-            'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40',
+            'w-full rounded-full border border-bds-gray-10 bg-bds-gray-0 py-3 pl-9 text-sm text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40',
             hasQuery ? 'pr-20' : 'pr-3.5',
           )}
         />

app/vibenet/demos/account/components/CreateAccountModal.tsx

@@ -251,7 +251,7 @@ export function CreateAccountModal({ open, onClose }: CreateAccountModalProps) {
               submit();
             }
           }}
-          className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40"
+          className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
         />
       </label>
 

app/vibenet/demos/account/components/SessionKeyEditor.tsx

@@ -30,7 +30,7 @@ import { useAccountEngine } from '../useAccountEngine';
 
 const ADDR_RE = /^0x[0-9a-fA-F]{40}$/;
 const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
+  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 const CHIP_CLS =
   'rounded-full border border-bds-gray-10 px-2.5 py-1 text-[12px] text-bds-gray-60 transition-colors hover:border-bds-gray-15 dark:border-white/10 dark:text-bds-gray-40';
 const CHIP_ON = 'border-base-blue bg-bds-blue-0 text-base-blue';

app/vibenet/demos/account/components/TransactionModal.tsx

@@ -58,7 +58,7 @@ import { formatTokenAmount, KIND_LABEL, short, type WalletSigner } from '../shar
 import { conciseError, EstimateRevertedError, isSeqMismatch, TxPendingError, useAccountEngine } from '../useAccountEngine';
 
 const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
+  'w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3 py-2 text-[13px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 
 export type TransactPreset = { calls: CallRow[]; gasMode?: 'eth' | 'free' | 'usdv'; metadata?: string };
 /** Apply the staged owner change, or a specific session key's change. */
@@ -812,7 +812,7 @@ export function TransactionModal({ onClose, preset, applyTarget }: TransactionMo
               spellCheck={false}
               placeholder="Optional note / app data — e.g. invoice #4242"
               onChange={(e) => setMetaField(e.target.value)}
-              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40"
+              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40"
             />
             {metadataHex ? (
               <p className="text-[12px] text-bds-gray-60 dark:text-bds-gray-40">

app/vibenet/explorer/address/[addr]/OwnedAccountView.tsx

@@ -41,7 +41,7 @@ import { ActivityTable } from './ActivityTable';
 import { AssetsCard } from './AssetsCard';
 
 const INPUT_CLS =
-  'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-bds-blue-40';
+  'w-full rounded-lg border border-bds-gray-10 bg-background px-3.5 py-2.5 text-[14px] outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:focus:border-white/40';
 
 const SECTIONS: ShellSection[] = [
   { id: 'overview', label: 'Overview' },

app/vibenet/faucet/page.tsx

@@ -235,7 +235,7 @@ export default function FaucetPage() {
               placeholder="0x…"
               spellCheck={false}
               autoComplete="off"
-              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-bds-blue-40"
+              className="w-full rounded-lg border border-bds-gray-10 bg-bds-gray-0 px-3.5 py-2.5 text-[14px] font-normal text-foreground outline-none transition-colors placeholder:text-bds-gray-40 focus:border-foreground dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:border-white/40"
             />
           </label>
           <div className="flex flex-wrap gap-3">