From 0e30fd435ced5559d73ca756209b3f65fd449534 Mon Sep 17 00:00:00 2001
From: Ky Lee <hello@kyhy.co>
Date: Mon, 5 Aug 2024 13:57:24 -0700
Subject: [PATCH] include dark theme

---
 src/styles/index.css         |  92 +++++++++++++++++++++++++++++
 src/styles/tailwind-base.css | 109 ++++++++++-------------------------
 src/styles/theme.ts          |  14 ++---
 tailwind.config.js           |  41 +------------
 4 files changed, 129 insertions(+), 127 deletions(-)

diff --git a/src/styles/index.css b/src/styles/index.css
index 32b754eca4..582029e1ee 100644
--- a/src/styles/index.css
+++ b/src/styles/index.css
@@ -1 +1,93 @@
 @import url("../token/components/TokenSelectDropdown.css");
+
+/* Fill */
+.fill-ock-default-reverse {
+  fill: var(--bg-ock-default-reverse);
+}
+
+/* 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);
+}
+.border-ock-default {
+  border-color: var(--bg-ock-default);
+}
diff --git a/src/styles/tailwind-base.css b/src/styles/tailwind-base.css
index 52d6f62f92..df34d5041d 100644
--- a/src/styles/tailwind-base.css
+++ b/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);
   }
 }
 
diff --git a/src/styles/theme.ts b/src/styles/theme.ts
index b02920b707..2d78618bdb 100644
--- a/src/styles/theme.ts
+++ b/src/styles/theme.ts
@@ -54,12 +54,10 @@ 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;
diff --git a/tailwind.config.js b/tailwind.config.js
index a7457e153c..3762c3625e 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -1,6 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
   content: ['./src/**/*.{ts,tsx}'],
+  safelist: ['dark'],
   theme: {
     fontFamily: {
       sans: ['Inter', 'sans-serif'],
@@ -9,46 +10,6 @@ export default {
       fontFamily: {
         display: 'DM Sans, sans-serif',
       },
-      fill: {
-        default: 'var(--bg-default)',
-        alternate: 'var(--bg-alternate)',
-        inverse: 'var(--bg-inverse)',
-        primary: 'var(--bg-primary)',
-        secondary: 'var(--bg-secondary)',
-        error: 'var(--bg-error)',
-        warning: 'var(--bg-warning)',
-        success: 'var(--bg-success)',
-      },
-      textColor: {
-        inverse: 'var(--text-inverse)',
-        foreground: 'var(--text-foreground)',
-        'foreground-muted': 'var(--text-foreground-muted)',
-        error: 'var(--text-error)',
-        primary: 'var(--text-primary)',
-        success: 'var(--text-success)',
-        warning: 'var(--text-warning)',
-        disabled: 'var(--text-disabled)',
-      },
-      backgroundColor: {
-        default: 'var(--bg-default)',
-        'default-hover': 'var(--bg-default-hover)',
-        'default-active': 'var(--bg-default-active)',
-        alternate: 'var(--bg-alternate)',
-        'alternate-hover': 'var(--bg-alternate-hover)',
-        'alternate-active': 'var(--bg-alternate-active)',
-        inverse: 'var(--bg-inverse)',
-        'inverse-hover': 'var(--bg-inverse-hover)',
-        'inverse-active': 'var(--bg-inverse-active)',
-        primary: 'var(--bg-primary)',
-        'primary-hover': 'var(--bg-primary-hover)',
-        'primary-active': 'var(--bg-primary-active)',
-        secondary: 'var(--bg-secondary)',
-        'secondary-hover': 'var(--bg-secondary-hover)',
-        'secondary-active': 'var(--bg-secondary-active)',
-        error: 'var(--bg-error)',
-        warning: 'var(--bg-warning)',
-        success: 'var(--bg-success)',
-      },
       keyframes: {
         fadeInRight: {
           '0%': {