web: Replace default tailwind colors

web/components/AceEditor/ace-editor.css

@@ -29,12 +29,12 @@
 
 .ace-github-dark .ace_marker-layer .ace_selection {
   @screen lg {
-    @apply bg-gray-600;
+    @apply bg-stone-500;
   }
 }
 
 .ace-github-dark .ace_gutter-active-line {
-  @apply bg-gray-600;
+  @apply bg-stone-500;
 }
 
 .ace-github-dark .ace_entity.ace_name.ace_tag,

web/components/DataTable/Table/index.module.css

@@ -131,7 +131,7 @@
     @apply min-w-[20rem];
   }
   &:hover {
-    @apply bg-gray-100;
+    @apply bg-stone-50;
   }
 }
 

web/components/Page404/index.module.css

@@ -15,7 +15,7 @@
 }
 
 .code {
-  @apply bg-gray-600 mx-auto font-mono pb-3 rounded-xl text-white tracking-tighter w-[350px] text-[0.3rem];
+  @apply bg-stone-500 mx-auto font-mono pb-3 rounded-xl text-white tracking-tighter w-[350px] text-[0.3rem];
 
   code {
     @apply text-center;

web/components/SqlEditor/index.module.css

@@ -31,7 +31,7 @@
 }
 
 .tooltip {
-  @apply text-black;
+  @apply text-primary;
 }
 
 .code {
@@ -47,10 +47,10 @@
 }
 
 .question {
-  @apply text-sm text-blue-400 absolute flex bottom-1 left-4 opacity-80;
+  @apply text-sm text-sky-400 absolute flex bottom-1 left-4 opacity-80;
 
   p {
-    @apply text-sm text-blue-400 mr-6 tracking-wide;
+    @apply text-sm text-sky-400 mr-6 tracking-wide;
   }
 }
 

web/components/UserNameWithIcon/index.module.css

@@ -9,13 +9,13 @@
 .A,
 .B,
 .C {
-  @apply bg-red-200;
+  @apply bg-red-50;
 }
 
 .D,
 .E,
 .F {
-  @apply bg-orange-200;
+  @apply bg-orange-50;
 }
 
 .G,
@@ -27,25 +27,25 @@
 .J,
 .K,
 .L {
-  @apply bg-green-200;
+  @apply bg-green-100;
 }
 
 .M,
 .N,
 .O {
-  @apply bg-blue-200;
+  @apply bg-sky-100;
 }
 
 .P,
 .Q,
 .R {
-  @apply bg-purple-200;
+  @apply bg-purple-100;
 }
 
 .S,
 .T,
 .U {
-  @apply bg-pink-200;
+  @apply bg-pink-50;
 }
 
 .V,
@@ -56,5 +56,5 @@
 
 .Y,
 .Z {
-  @apply bg-teal-200;
+  @apply bg-mint-50;
 }

web/components/pageComponents/DatabasePage/ForEmpty/EmptyDB/index.module.css

@@ -32,5 +32,5 @@
 }
 
 .blueBox {
-  @apply text-sm leading-5 p-4 bg-blue-100;
+  @apply text-sm leading-5 p-4 bg-sky-50;
 }

web/components/pageComponents/DatabasePage/ForPulls/PullActions/DeleteBranch/index.module.css

@@ -7,7 +7,7 @@
 }
 
 .mergedContainer {
-  @apply border-red-200;
+  @apply border-red-300;
 }
 
 .deleteMsg {
@@ -23,7 +23,7 @@
 }
 
 .merged {
-  @apply bg-red-200;
+  @apply bg-red-300;
 }
 
 .err {

web/components/pageComponents/FileUploadPage/Layout/index.module.css

@@ -26,7 +26,7 @@
   @apply text-white font-normal;
 
   &:hover {
-    @apply text-blue-200;
+    @apply text-sky-100;
   }
 }
 

web/components/pageComponents/FileUploadPage/Steps/Upload/EditableTable/TableGrid/index.module.css

@@ -18,7 +18,7 @@
   height: 75vh;
 
   :global(.rdg-cell-dragged-over) {
-    @apply bg-blue-100;
+    @apply bg-sky-50;
   }
 
   :global(.index-cell > .rdg-cell-drag-handle) {
@@ -27,7 +27,7 @@
 
   :global(.index-cell[aria-selected="true"]),
   :global(.rdg-cell[role="columnheader"][aria-selected="true"]) {
-    @apply bg-gray-300;
+    @apply bg-stone-100;
     box-shadow: 2px 0 5px -2px rgb(136 136 136 / 30%);
   }
 }

web/lib/tailwind.ts

@@ -1,5 +1,5 @@
 import config from "../tailwind.config";
 
-const customColors = config.theme?.extend?.colors as Record<string, string>;
+const customColors = config.theme?.colors as Record<string, string>;
 
 export const colors = customColors;

web/tailwind.config.ts

@@ -18,6 +18,13 @@ const config = mergeConfig({
     "./pages/**/*.tsx",
     "./styles/**/*.css",
   ],
+  theme: {
+    extend: {
+      borderColor: {
+        DEFAULT: "#D7D8DF",
+      },
+    },
+  },
 });
 
 export default config;