update components to properly render in dark mode

src/internal/svg/baseNameSvg.tsx

@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const baseNameSvg = (
   <svg
     data-testid="ockbaseNameSvg"
@@ -12,11 +14,11 @@ export const baseNameSvg = (
   >
     <path
       d="M11.75 3.75C11.75 5.82107 10.0711 7.5 8 7.5C5.92893 7.5 4.25 5.82107 4.25 3.75C4.25 1.67893 5.92893 0 8 0C10.0711 0 11.75 1.67893 11.75 3.75Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
     <path
       d="M10.99 8.01001C12.21 8.04001 13.3 8.80001 13.73 9.95001L16 16H0L2.27 9.95001C2.7 8.80001 3.79 8.03001 5.01 8.01001C5.05 8.04001 6.37 9.00001 8 9.00001C9.63 9.00001 10.95 8.04001 10.99 8.01001Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
   </svg>
 );

src/internal/svg/closeSvg.tsx

@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const closeSvg = (
   <svg
     width="16"
@@ -9,7 +11,7 @@ export const closeSvg = (
     <title>Close SVG</title>
     <path
       d="M2.14921 1L1 2.1492L6.8508 8L1 13.8508L2.1492 15L8 9.1492L13.8508 15L15 13.8508L9.14921 8L15 2.1492L13.8508 1L8 6.8508L2.14921 1Z"
-      fill="#030712"
+      className={fill.defaultReverse}
     />
   </svg>
 );

src/internal/svg/defaultAvatarSVG.tsx

@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const defaultAvatarSVG = (
   <svg
     data-testid="ockAvatarDefaultSvg"
@@ -12,7 +14,7 @@ export const defaultAvatarSVG = (
   >
     <path
       d="M20 40C8.9543 40 0 31.0457 0 20C0 8.9543 8.9543 0 20 0C31.0457 0 40 8.9543 40 20C40 31.0457 31.0457 40 20 40ZM25.6641 13.9974C25.6641 10.8692 23.1282 8.33333 20.0001 8.33333C16.8719 8.33333 14.336 10.8692 14.336 13.9974C14.336 17.1256 16.8719 19.6615 20.0001 19.6615C23.1282 19.6615 25.6641 17.1256 25.6641 13.9974ZM11.3453 23.362L9.53476 28.1875C12.2141 30.8475 15.9019 32.493 19.974 32.5H20.026C24.0981 32.493 27.7859 30.8475 30.4653 28.1874L28.6547 23.362C28.0052 21.625 26.3589 20.4771 24.5162 20.4318C24.4557 20.4771 22.462 21.9271 20 21.9271C17.538 21.9271 15.5443 20.4771 15.4839 20.4318C13.6412 20.462 11.9948 21.625 11.3453 23.362Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
   </svg>
 );

src/internal/svg/disconnectSvg.tsx

@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const disconnectSvg = (
   <svg
     role="img"
@@ -10,11 +12,11 @@ export const disconnectSvg = (
   >
     <path
       d="M10.9735 2.69696L10.9735 4.52272L5.49622 4.52272L5.49622 15.4773L10.9735 15.4773L10.9735 17.303L3.67046 17.303L3.67046 2.69696L10.9735 2.69696Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
     <path
       d="M13.4614 13.5207L16.7804 10.0235L13.4783 6.34848L12.1202 7.56872L13.4931 9.09667L7.32216 9.09667L7.32216 10.9224L13.4102 10.9224L12.1371 12.2639L13.4614 13.5207Z"
-      fill="#0A0B0D"
+      className={fill.defaultReverse}
     />
   </svg>
 );

src/internal/svg/walletSvg.tsx

@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export const walletSvg = (
   <svg
     role="img"
@@ -12,7 +14,7 @@ export const walletSvg = (
       fillRule="evenodd"
       clipRule="evenodd"
       d="M0 10C0 15.5222 4.47778 20 10 20C15.5222 20 20 15.5222 20 10C20 4.47778 15.5222 0 10 0C4.47778 0 0 4.47778 0 10ZM7.44444 6.77778C7.075 6.77778 6.77778 7.075 6.77778 7.44444V12.5556C6.77778 12.925 7.075 13.2222 7.44444 13.2222H12.5556C12.925 13.2222 13.2222 12.925 13.2222 12.5556V7.44444C13.2222 7.075 12.925 6.77778 12.5556 6.77778H7.44444Z"
-      fill="#030712"
+      className={fill.defaultReverse}
     />
   </svg>
 );

src/swap/components/SwapAmountInput.tsx

@@ -74,7 +74,7 @@ export function SwapAmountInput({
       className={cn(
         background.alternate,
         'box-border flex w-full flex-col items-start',
-        'rounded-md border-b border-solid p-4',
+        'rounded-md p-4',
         className,
       )}
       data-testid="ockSwapAmountInput_Container"

src/swap/components/SwapToggleButton.tsx

@@ -1,4 +1,4 @@
-import { cn, pressable } from '../../styles/theme';
+import { border, cn, fill, pressable } from '../../styles/theme';
 import type { SwapToggleButtonReact } from '../types';
 import { useSwapContext } from './SwapProvider';
 
@@ -16,7 +16,7 @@ const toggleIcon = (
     <g clipPath="url(#clip0_2077_4627)">
       <path
         d="M14.5659 4.93434L13.4345 6.06571L11.8002 4.43139L11.8002 10.75L10.2002 10.75L10.2002 4.43139L8.56592 6.06571L7.43455 4.93434L11.0002 1.36865L14.5659 4.93434ZM8.56592 12.0657L5.00023 15.6314L1.43455 12.0657L2.56592 10.9343L4.20023 12.5687L4.20023 6.25002L5.80023 6.25002L5.80023 12.5687L7.43455 10.9343L8.56592 12.0657Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </g>
     <defs>
@@ -40,9 +40,10 @@ export function SwapToggleButton({ className }: SwapToggleButtonReact) {
       type="button"
       className={cn(
         pressable.alternate,
+        border.default,
         '-translate-x-2/4 -translate-y-2/4 absolute top-2/4 left-2/4',
         'flex h-12 w-12 items-center justify-center',
-        'rounded-lg border-4 border-gray-100 border-solid',
+        'rounded-lg border-4 border-solid',
         className,
       )}
       data-testid="SwapTokensButton"

src/token/components/SearchIcon.tsx

@@ -1,3 +1,5 @@
+import { fill } from '../../styles/theme';
+
 export function SearchIcon() {
   return (
     <svg
@@ -11,7 +13,7 @@ export function SearchIcon() {
     >
       <path
         d="M16 14.23L11.89 10.12C12.59 9.09 13 7.84 13 6.5C13 2.91 10.09 0 6.5 0C2.91 0 0 2.91 0 6.5C0 10.09 2.91 13 6.5 13C7.84 13 9.09 12.59 10.13 11.89L14.23 16L16 14.23ZM6.5 10.5C4.29 10.5 2.5 8.71 2.5 6.5C2.5 4.29 4.29 2.5 6.5 2.5C8.71 2.5 10.5 4.29 10.5 6.5C10.5 8.71 8.71 10.5 6.5 10.5Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </svg>
   );

src/token/components/TokenSelectButton.tsx

@@ -1,5 +1,5 @@
 import { type ForwardedRef, forwardRef } from 'react';
-import { cn, pressable, text } from '../../styles/theme';
+import { cn, fill, pressable, text } from '../../styles/theme';
 import type { TokenSelectButtonReact } from '../types';
 import { TokenImage } from './TokenImage';
 
@@ -17,7 +17,7 @@ function CaretUp() {
     >
       <path
         d="M3.05329 10.9866L7.99996 6.03997L12.9466 10.9866L14.1266 9.80663L7.99996 3.67997L1.87329 9.80663L3.05329 10.9866Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </svg>
   );
@@ -37,7 +37,7 @@ function CaretDown() {
     >
       <path
         d="M12.95 4.85999L8.00001 9.80999L3.05001 4.85999L1.64001 6.27999L8.00001 12.64L14.36 6.27999L12.95 4.85999Z"
-        fill="#0A0B0D"
+        className={fill.defaultReverse}
       />
     </svg>
   );

src/transaction/components/TransactionButton.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { Spinner } from '../../internal/components/Spinner';
 import { checkmarkSvg } from '../../internal/svg/checkmarkSvg';
-import { background, cn, pressable, text } from '../../styles/theme';
+import { background, cn, color, pressable, text } from '../../styles/theme';
 import type { TransactionButtonReact } from '../types';
 import { isSpinnerDisplayed } from '../utils';
 import { useTransactionContext } from './TransactionProvider';
@@ -72,7 +72,9 @@ export function TransactionButton({
       {displaySpinner ? (
         <Spinner />
       ) : (
-        <span className={cn(text.headline, 'flex justify-center text-inverse')}>
+        <span
+          className={cn(text.headline, color.inverse, 'flex justify-center')}
+        >
           {buttonContent}
         </span>
       )}