From f7835b810fea95add19e8748be2d6e61cb32633d Mon Sep 17 00:00:00 2001
From: Joe Shen <joeshen123@gmail.com>
Date: Tue, 27 Jun 2023 22:12:28 -0700
Subject: [PATCH] add tailwind config and global css

---
 next/src/components/DottedGridBackground.tsx |   2 +-
 next/src/styles/globals.css                  | 278 +++++++++++++++----
 next/tailwind.config.cjs                     |  81 ++++--
 3 files changed, 288 insertions(+), 73 deletions(-)

diff --git a/next/src/components/DottedGridBackground.tsx b/next/src/components/DottedGridBackground.tsx
index f61521f86c..1d8cde6c1c 100644
--- a/next/src/components/DottedGridBackground.tsx
+++ b/next/src/components/DottedGridBackground.tsx
@@ -7,7 +7,7 @@ interface DottedGridBackgroundProps {
 }
 
 const DottedGridBackground = ({ children, className }: DottedGridBackgroundProps) => {
-  return <div className={clsx(className, "background")}>{children}</div>;
+  return <div className={clsx(className, "dark:background-dark background")}>{children}</div>;
 };
 
 export default DottedGridBackground;
diff --git a/next/src/styles/globals.css b/next/src/styles/globals.css
index 5dec29e1d4..faaee121b2 100644
--- a/next/src/styles/globals.css
+++ b/next/src/styles/globals.css
@@ -3,18 +3,7 @@
 @tailwind utilities;
 
 body {
-    background: black;
-}
-
-/* Used for the background effect in the landing page */
-.background {
-    background-image: radial-gradient(
-            circle,
-            rgba(58, 58, 58, 0.75) 2px,
-            transparent 0px
-    );
-    background-size: 30px 30px;
-    background-position: 0 0, 15px 15px;
+  background: black;
 }
 
 .radial-background-1 {
@@ -22,97 +11,278 @@ body {
 }
 
 .lower-gradient {
-    background-image: linear-gradient(
-            to top,
-            rgba(255, 255, 255, 0.03),
-            rgba(255, 255, 255, 0)
-    );
-    height: 20vh;
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    right: 0;
+  background-image: linear-gradient(
+    to top,
+    rgba(255, 255, 255, 0.03),
+    rgba(255, 255, 255, 0)
+  );
+  height: 20vh;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 .fading-hr {
-    position: relative;
-    height: 1px;
-    background: linear-gradient(
-            to right,
-            transparent,
-            rgba(255, 255, 255, 0.1),
-            rgba(255, 255, 255, 0.2),
-            rgba(255, 255, 255, 0.2),
-            rgba(255, 255, 255, 0.1),
-            transparent
-    );
+  position: relative;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    transparent,
+    hsla(240, 2%, 57%, 0.1),
+    hsla(240, 2%, 57%, 0.2),
+    hsla(240, 2%, 57%, 0.2),
+    hsla(240, 2%, 57%, 0.1),
+    transparent
+  );
+}
+
+.fading-hr-dark {
+  position: relative;
+  height: 1px;
+  background: linear-gradient(
+    to right,
+    transparent,
+    rgba(255, 255, 255, 0.1),
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.2),
+    rgba(255, 255, 255, 0.1),
+    transparent
+  );
 }
 
 /* Used for code / table formatting within messages */
 pre {
-    @apply overflow-auto rounded-lg;
+  @apply overflow-auto rounded-lg;
 }
 
 .window-heights {
-    @apply h-[14em] overflow-y-auto overflow-x-hidden sm-h:h-[17em] md-h:h-[22em] lg-h:h-[30em];
+  @apply h-[14em] overflow-y-auto overflow-x-hidden sm-h:h-[17em] md-h:h-[22em] lg-h:h-[30em];
 }
 
 .link {
-    @apply cursor-pointer text-sky-500 underline hover:text-sky-300;
+  @apply cursor-pointer text-sky-500 underline hover:text-sky-300;
 }
 
 table {
-    @apply w-full rounded-lg text-white;
-    background-color: #0d1117;
+  @apply w-full rounded-lg text-white;
+  background-color: #0d1117;
 }
 
 th,
 td {
-    @apply rounded-lg border border-gray-700 px-4 py-2;
+  @apply rounded-lg border border-gray-700 px-4 py-2;
 }
 
 th {
-    background-color: #161b22;
+  background-color: #161b22;
 }
 
 tr:nth-child(even) {
-    background-color: #1c2028;
+  background-color: #1c2028;
+}
+
+@layer base{
+  /* background styles */
+  /* Used for the background effect in the landing page */
+  .background {
+    background-image: radial-gradient(
+      circle,
+      hsla(240, 11%, 85%, 0.75) 2px,
+      transparent 0px
+    );
+    background-size: 30px 30px;
+    background-position: 0 0, 15px 15px;
+  }
+
+  .background-dark {
+    background-image: radial-gradient(
+      circle,
+      rgba(58, 58, 58, 0.75) 2px,
+      transparent 0px
+    );
+    background-size: 30px 30px;
+    background-position: 0 0, 15px 15px;
+  }
+
+  .background-color-1 {
+    @apply dark:bg-shade-800-dark bg-shade-800-light;
+  }
+
+  .background-color-2 {
+    @apply dark:bg-shade-700-dark bg-shade-700-light;
+  }
+
+  .background-color-3 {
+    @apply dark:bg-shade-600-dark bg-shade-600-light;
+  }
+
+  .background-color-4 {
+    @apply dark:bg-shade-500-dark bg-shade-700-light;
+  }
+
+  .background-color-5 {
+    @apply dark:bg-shade-500-dark bg-shade-800-light;
+  }
+
+  .background-color-6 {
+    @apply dark:bg-shade-800-dark bg-blue-base-light
+  }
+
+  /* border styles */
+  .border-color-1 {
+    @apply dark:border-shade-400-dark border-shade-600-light
+  }
+
+  .border-color-2 {
+    @apply dark:border-shade-400-dark border-blue-base-light
+  }
+
+  .border-color-success {
+    @apply dark:border-green-base-dark border-green-base-light
+  }
+
+  .border-color-warn {
+    @apply dark:border-amber-base-dark border-amber-base-light
+  }
+
+  .border-style-1 {
+    @apply border-color-1 rounded-xl border-2;
+  }
+
+  .border-hover-1 {
+    @apply hover:border-blue-hover-light dark:hover:border-blue-hover-dark focus:ring-0 border-2;
+  }
+
+  .border-hover-success {
+    @apply dark:hover:border-green-hover-dark hover:border-green-hover-light;
+  }
+
+  .border-hover-warn {
+    @apply dark:hover:border-amber-hover-dark hover:border-amber-hover-light;
+  }
+
+  .border-focusVisible-1 {
+    @apply focus-visible:border-blue-focusVisible-light dark:focus-visible:border-blue-focusVisible-dark focus:ring-0 border-2;
+  }
+
+  .border-focusVisible-1[type=range] {
+    @apply border;
+  }
+
+  /* text colors */
+  .text-color-primary {
+    @apply dark:text-shade-100-dark text-shade-100-light;
+  }
+
+  .text-color-secondary {
+    @apply dark:text-shade-200-dark text-shade-200-light;
+  }
+
+  .text-color-tertiary {
+    @apply dark:text-shade-300-dark text-shade-300-light;
+  }
+
+  .text-color-green {
+    @apply dark:text-green-base-dark text-green-base-light
+  }
+
+  .text-hover-green {
+    @apply dark:hover:text-green-hover-dark hover:text-green-hover-light
+  }
+
+  .text-color-error {
+    @apply dark:text-red-base-dark text-red-base-light
+  }
+  /* button styles */
+  .blue-button-primary {
+    @apply bg-blue-base-light dark:bg-blue-base-dark text-shade-100-dark hover:bg-blue-hover-light dark:hover:bg-blue-hover-dark focus-visible:outline-blue-focusVisible-light dark:focus-visible:outline-blue-focusVisible-dark;
+  }
+
+  .blue-button-secondary {
+    @apply bg-white dark:bg-white hover:bg-shade-500-light dark:hover:bg-shade-200-dark border-2 border-blue-base-light dark:border-blue-base-dark text-blue-base-light dark:text-blue-base-dark hover:text-blue-hover-light dark:hover:text-blue-hover-dark hover:border-blue-hover-light dark:hover:border-blue-hover-dark focus-visible:outline-blue-focusVisible-light dark:focus-visible:outline-blue-focusVisible-dark;
+  }
+
+  .red-button-primary {
+    @apply bg-red-base-light dark:bg-red-base-dark text-shade-100-dark hover:bg-red-hover-light focus-visible:outline-red-focusVisible-light dark:hover:bg-red-hover-dark dark:focus-visible:outline-red-focusVisible-dark;
+  }
+
+  .red-button-secondary {
+    @apply bg-white hover:bg-gray-300 border border-red-base-light dark:border-red-base-dark text-red-base-light dark:text-red-base-dark hover:text-red-hover-light dark:hover:text-red-hover-dark hover:border-red-hover-light dark:hover:border-red-hover-dark focus-visible:outline-red-focusVisible-light dark:focus-visible:outline-red-focusVisible-dark;
+  }
+
+  .neutral-button-primary {
+    @apply border border-shade-300-light dark:border-shade-300-dark text-color-primary background-color-2 hover:bg-shade-600-light dark:hover:bg-shade-300-dark;
+  }
+
+  .button-disabled {
+    @apply dark:bg-shade-800-dark bg-shade-400-light cursor-not-allowed text-color-tertiary text-white border-style-1;
+  }
+}
+
+
+/* range input track style */
+input[type=range] {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  background:transparent;
+}
+
+input[type=range]:focus {
+  outline: none;
+}
+
+input[type=range]::-ms-track {
+  width: 100%;
+  cursor: pointer;
+
+  /* Hides the slider so custom styles can be added */
+  background: transparent;
+  border-color: transparent;
+  color: transparent;
+}
+
+input[type=range] {
+  @apply background-color-4 rounded-md;
+  height: 0.5rem;
 }
 
 /* Customize website's scrollbar like Mac OS
 Not supports in Firefox and IE */
 /* total width */
 *::-webkit-scrollbar {
-    border-radius: 10px;
-    background-color: #464649;
-    width: 0.75em;
+  border-radius: 10px;
+  background-color: #464649;
+  width: 0.75em;
 }
 
 /* background of the scrollbar except button or resizer */
 *::-webkit-scrollbar-track {
-    border-radius: 10px;
-    background-color: #464649;
+  @apply bg-shade-300-light dark:bg-shade-500-dark;
+}
+
+#layout *::-webkit-scrollbar-track {
+  @apply rounded-xl
 }
 
 /* scrollbar itself */
 *::-webkit-scrollbar-thumb {
-    background-color: #babac0;
-    border-radius: 10px;
-    border: 2px solid #464649;
+  @apply rounded-lg bg-shade-600-light dark:bg-shade-200-dark;
 }
 
 /* set button(top and bottom of the scrollbar) */
 *::-webkit-scrollbar-button {
-    display: none;
+  display: none;
 }
 
 /*  disappearing animation */
 .animation-hide {
-    animation: hide 1s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 forwards;
+  animation: hide 1s cubic-bezier(0.4, 0, 0.2, 1) 0s 1 forwards;
 }
 
 @keyframes hide {
-    to {
-        opacity: 0;
-    }
+  to {
+    opacity: 0;
+  }
 }
diff --git a/next/tailwind.config.cjs b/next/tailwind.config.cjs
index 312a27beb2..0aa872026b 100644
--- a/next/tailwind.config.cjs
+++ b/next/tailwind.config.cjs
@@ -18,49 +18,94 @@ module.exports = {
         "3xl": "0 40px 70px -15px rgba(0, 0, 0, 0.40)" // Customize the shadow value according to your preferences.
       },
       colors: {
-        primary: {
-          main: {
-            dark: "#409CFF",
+        blue: {
+          base: {
+            dark: "hsl(210, 100%, 52%)",
+            light: "hsl(210, 100%, 50%)",
           },
-          active: {
-            dark: "#267BD5",
+          hover: {
+            dark: "hsl(210, 70%, 45%)",
+            light: "hsl(210, 100%, 38%)",
           },
           focusVisible: {
-            dark: "#6BB3FF",
+            dark: "hsl(210, 70%, 40%)",
+            light: "hsl(210, 70%, 38%)",
+          },
+        },
+        amber: {
+          base: {
+            dark: "hsl(39, 100%, 50%)",
+            light: "hsl(45, 100%, 50%)",
           },
           hover: {
-            dark: "#5c95D1",
+            dark: "hsl(39, 100%, 40%)",
+            light: "hsl(45, 100%, 45%)",
           },
+          focusVisible: {
+            dark: "hsl(39, 85%, 30%)",
+            light: "hsl(45, 85%, 35%)",
+          }
         },
-        secondary: {
-          main: {
-            dark: "#ff9f0a",
+        red: {
+          base: {
+            dark: "hsl(3, 100%, 61%)",
+            light: "hsl(3, 100%, 59%)",
+          },
+          hover: {
+            dark: "hsl(3, 100% 45%)",
+            light: "hsl(3, 100%, 40%)",
           },
+          focusVisible: {
+            dark: "hsl(3, 85%, 40%)",
+            light: "hsl(3, 85%, 35%)",
+          }
+        },
+        green: {
+          base: {
+            dark: "hsl(143, 71%, 45%)",
+            light: "hsl(143, 71%, 40%)",
+          },
+          hover: {
+            dark: "hsl(143, 65%, 40%)",
+            light: "hsl(143, 71%, 33%)",
+          },
+          focusVisible: {
+            dark: "hsl(143, 65%, 35%)",
+            light: "hsl(143, 71%, 30%)",
+          }
         },
         shade: {
           100: {
-            dark: "#FFFFFF",
+            dark: "hsl(0, 0%, 100%)",
+            light: "hsl(0, 0%, 0%)",
           },
           200: {
-            dark: "#AEAEB2",
+            dark: "hsl(240, 3%, 69%)",
+            light: "hsl(240, 2%, 30%)",
           },
           300: {
-            dark: "#7C7C80",
+            dark: "hsl(240, 2%, 49%)",
+            light: "hsl(240, 2%, 57%)",
           },
           400: {
-            dark: "#545456",
+            dark: "hsl(240, 1%, 33%)",
+            light: "hsl(240, 3%, 69%)",
           },
           500: {
-            dark: "#444446",
+            dark: "hsl(240, 1%, 27%)",
+            light: "hsl(240, 5%, 79%)",
           },
           600: {
-            dark: "#363638",
+            dark: "hsl(240, 2%, 22%)",
+            light: "hsl(240, 6%, 83%)",
           },
           700: {
-            dark: "#242426",
+            dark: "hsl(240, 3%, 15%)",
+            light: "hsl(240, 11%, 91%)",
           },
           800: {
-            dark: "#18181B",
+            dark: "hsl(240, 6%, 10%)",
+            light: "hsl(240, 24%, 96%)",
           }
         }
       },