feat: dark mode

src/identity/components/Badge.test.tsx

@@ -21,7 +21,7 @@ describe('Badge Component', () => {
       expect(badge).toHaveStyle(badgeStyle);
       expect(badge).toHaveClass('bg-ock-primary');
       const ticker = screen.queryByTestId('ockBadgeTicker');
-      expect(ticker).toHaveClass('fill-inverse');
+      expect(ticker).toHaveClass('fill-ock-inverse');
     });
   });
 });

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/styles/index.css

@@ -1 +1,113 @@
-@import url("../token/components/TokenSelectDropdown.css");
+/* Border */
+.border-ock-default {
+  border-color: var(--bg-ock-default);
+}
+
+/* Fill */
+.fill-ock-default-reverse {
+  fill: var(--bg-ock-default-reverse);
+}
+
+/* Placeholder */
+.placeholder-ock-default::placeholder {
+  color: var(--text-ock-foreground-muted);
+}
+
+/* Scrollbar */
+.ock-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: #d1d5db #ffffff;
+}
+
+/* Shadow */
+.shadow-ock-default {
+  box-shadow: 0px 8px 12px 0px #5B616E1F;
+}
+
+.dark .shadow-ock-default {
+  box-shadow: 0px 8px 12px 0px #5B616E1F;
+}
+
+/* Text */
+.text-ock-inverse {
+  color: var(--text-ock-inverse);
+}
+.text-ock-foreground {
+  color: var(--text-ock-foreground);
+}
+.text-ock-foreground-muted {
+  color: var(--text-ock-foreground-muted);
+}
+.text-ock-error {
+  color: var(--text-ock-error);
+}
+.text-ock-primary {
+  color: var(--text-ock-primary);
+}
+.text-ock-success {
+  color: var(--text-ock-success);
+}
+.text-ock-warning {
+  color: var(--text-ock-warning);
+}
+.text-ock-disabled {
+  color: var(--text-ock-disabled);
+}
+/* Background */
+.bg-ock-default {
+  background-color: var(--bg-ock-default);
+}
+.bg-ock-default-hover {
+  background-color: var(--bg-ock-default-hover);
+}
+.bg-ock-default-active {
+  background-color: var(--bg-ock-default-active);
+}
+.bg-ock-alternate {
+  background-color: var(--bg-ock-alternate);
+}
+.bg-ock-alternate-hover {
+  background-color: var(--bg-ock-alternate-hover);
+}
+.bg-ock-alternate-active {
+  background-color: var(--bg-ock-alternate-active);
+}
+.bg-ock-inverse {
+  background-color: var(--bg-ock-inverse);
+}
+.bg-ock-inverse-hover {
+  background-color: var(--bg-ock-inverse-hover);
+}
+.bg-ock-inverse-active {
+  background-color: var(--bg-ock-inverse-active);
+}
+.bg-ock-primary {
+  background-color: var(--bg-ock-primary);
+}
+.bg-ock-primary-hover {
+  background-color: var(--bg-ock-primary-hover);
+}
+.bg-ock-primary-active {
+  background-color: var(--bg-ock-primary-active);
+}
+.bg-ock-secondary {
+  background-color: var(--bg-ock-secondary);
+}
+.bg-ock-secondary-hover {
+  background-color: var(--bg-ock-secondary-hover);
+}
+.bg-ock-secondary-active {
+  background-color: var(--bg-ock-secondary-active);
+}
+.bg-ock-error {
+  background-color: var(--bg-ock-error);
+}
+.bg-ock-warning {
+  background-color: var(--bg-ock-warning);
+}
+.bg-ock-success {
+  background-color: var(--bg-ock-success);
+}
+.bg-ock-default-reverse {
+  background-color: var(--bg-ock-default-reverse);
+}

src/styles/tailwind-base.css

@@ -29,86 +29,37 @@
     --bg-ock-error: theme(colors.rose.600);
     --bg-ock-warning: theme(colors.orange.600);
     --bg-ock-success: theme(colors.lime.300);
+    --bg-ock-default-reverse: theme(colors.gray.950);
   }
-  /* Text */
-  .text-ock-inverse {
-    color: var(--text-ock-inverse);
-  }
-  .text-ock-foreground {
-    color: var(--text-ock-foreground);
-  }
-  .text-ock-foreground-muted {
-    color: var(--text-ock-foreground-muted);
-  }
-  .text-ock-error {
-    color: var(--text-ock-error);
-  }
-  .text-ock-primary {
-    color: var(--text-ock-primary);
-  }
-  .text-ock-success {
-    color: var(--text-ock-success);
-  }
-  .text-ock-warning {
-    color: var(--text-ock-warning);
-  }
-  .text-ock-disabled {
-    color: var(--text-ock-disabled);
-  }
-  /* Background */
-  .bg-ock-default {
-    background-color: var(--bg-ock-default);
-  }
-  .bg-ock-default-hover {
-    background-color: var(--bg-ock-default-hover);
-  }
-  .bg-ock-default-active {
-    background-color: var(--bg-ock-default-active);
-  }
-  .bg-ock-alternate {
-    background-color: var(--bg-ock-alternate);
-  }
-  .bg-ock-alternate-hover {
-    background-color: var(--bg-ock-alternate-hover);
-  }
-  .bg-ock-alternate-active {
-    background-color: var(--bg-ock-alternate-active);
-  }
-  .bg-ock-inverse {
-    background-color: var(--bg-ock-inverse);
-  }
-  .bg-ock-inverse-hover {
-    background-color: var(--bg-ock-inverse-hover);
-  }
-  .bg-ock-inverse-active {
-    background-color: var(--bg-ock-inverse-active);
-  }
-  .bg-ock-primary {
-    background-color: var(--bg-ock-primary);
-  }
-  .bg-ock-primary-hover {
-    background-color: var(--bg-ock-primary-hover);
-  }
-  .bg-ock-primary-active {
-    background-color: var(--bg-ock-primary-active);
-  }
-  .bg-ock-secondary {
-    background-color: var(--bg-ock-secondary);
-  }
-  .bg-ock-secondary-hover {
-    background-color: var(--bg-ock-secondary-hover);
-  }
-  .bg-ock-secondary-active {
-    background-color: var(--bg-ock-secondary-active);
-  }
-  .bg-ock-error {
-    background-color: var(--bg-ock-error);
-  }
-  .bg-ock-warning {
-    background-color: var(--bg-ock-warning);
-  }
-  .bg-ock-success {
-    background-color: var(--bg-ock-success);
+
+  .dark {
+    --text-ock-inverse: theme(colors.gray.950);
+    --text-ock-foreground: theme(colors.gray.50);
+    --text-ock-foreground-muted: theme(colors.gray.400);
+    --text-ock-error: theme(colors.rose.400);
+    --text-ock-primary: theme(colors.indigo.400);
+    --text-ock-success: theme(colors.lime.400);
+    --text-ock-warning: theme(colors.orange.400);
+    --text-ock-disabled: theme(colors.gray.600);
+    --bg-ock-default: theme(colors.gray.950);
+    --bg-ock-default-hover: theme(colors.gray.800);
+    --bg-ock-default-active: theme(colors.gray.700);
+    --bg-ock-alternate: theme(colors.gray.800);
+    --bg-ock-alternate-hover: theme(colors.gray.700);
+    --bg-ock-alternate-active: theme(colors.gray.600);
+    --bg-ock-inverse: theme(colors.gray.900);
+    --bg-ock-inverse-hover: theme(colors.gray.800);
+    --bg-ock-inverse-active: theme(colors.gray.700);
+    --bg-ock-primary: theme(colors.indigo.400);
+    --bg-ock-primary-hover: theme(colors.indigo.300);
+    --bg-ock-primary-active: theme(colors.indigo.200);
+    --bg-ock-secondary: theme(colors.slate.800);
+    --bg-ock-secondary-hover: theme(colors.slate.700);
+    --bg-ock-secondary-active: theme(colors.slate.600);
+    --bg-ock-error: theme(colors.rose.400);
+    --bg-ock-warning: theme(colors.orange.400);
+    --bg-ock-success: theme(colors.lime.700);
+    --bg-ock-default-reverse: theme(colors.gray.50);
   }
 }
 

src/styles/theme.ts

@@ -27,7 +27,7 @@ export const pressable = {
     'cursor-pointer bg-ock-primary active:bg-ock-primary-active hover:bg-ock-primary-hover',
   secondary:
     'cursor-pointer bg-ock-secondary active:bg-ock-secondary-active hover:bg-ock-secondary-hover',
-  shadow: 'shadow-[0px_8px_12px_0px_#5B616E1F]',
+  shadow: 'shadow-ock-default',
   disabled: 'opacity-[0.38]',
 } as const;
 
@@ -54,12 +54,14 @@ export const color = {
 } as const;
 
 export const fill = {
-  inverse: 'fill-inverse',
-  foreground: 'fill-foreground',
-  foregroundMuted: 'fill-foreground-muted',
-  error: 'fill-error',
-  primary: 'fill-primary',
-  success: 'fill-success',
-  warning: 'fill-warning',
-  disabled: 'fill-disabled',
+  defaultReverse: 'fill-ock-default-reverse',
+  inverse: 'fill-ock-inverse',
+} as const;
+
+export const border = {
+  default: 'border-ock-default',
+} as const;
+
+export const placeholder = {
+  default: 'placeholder-ock-default',
 } as const;

src/swap/components/SwapAmountInput.tsx

@@ -74,15 +74,13 @@ 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"
     >
       <div className="flex w-full items-center justify-between">
-        <span className={cn(text.label2, 'text-foreground-muted')}>
-          {label}
-        </span>
+        <span className={cn(text.label2, color.foregroundMuted)}>{label}</span>
       </div>
       <div className="flex w-full items-center justify-between">
         <TextInput
@@ -112,11 +110,11 @@ export function SwapAmountInput({
         )}
       </div>
       <div className="mt-4 flex w-full justify-between">
-        <span className={cn(text.label2, 'text-foregroune-muted')}>{''}</span>
+        <span className={cn(text.label2, color.foregroundMuted)}>{''}</span>
         <div className="flex items-center">
           {source.balance && (
             <span
-              className={cn(text.label2, 'text-foreground-muted')}
+              className={cn(text.label2, color.foregroundMuted)}
             >{`Balance: ${getRoundedAmount(source.balance, 8)}`}</span>
           )}
           {type === 'from' && (

src/swap/components/SwapButton.tsx

@@ -30,7 +30,7 @@ export function SwapButton({
       className={cn(
         background.primary,
         'w-full rounded-xl',
-        'mt-4 px-4 py-3 font-medium text-base text-white leading-6',
+        'mt-4 px-4 py-3',
         isDisabled && pressable.disabled,
         text.headline,
         className,