From 864d40d934c687ed362e077231098e52cf765bdd Mon Sep 17 00:00:00 2001
From: Liyas Thomas <liyascthomas@gmail.com>
Date: Wed, 8 Feb 2023 15:13:24 +0530
Subject: [PATCH] chore: improved theme colors

---
 .../hoppscotch-common/assets/scss/styles.scss | 28 ++++--------
 .../hoppscotch-common/assets/scss/themes.scss | 39 ++++++++++-------
 .../collections/graphql/Collection.vue        |  2 +-
 .../components/collections/graphql/Folder.vue |  2 +-
 .../src/components/http/Request.vue           |  4 +-
 .../src/components/smart/TreeBranch.vue       |  2 +-
 .../hoppscotch-ui/src/assets/scss/styles.scss | 42 +++++++++---------
 .../hoppscotch-ui/src/assets/scss/themes.scss | 43 +++++++++++--------
 8 files changed, 81 insertions(+), 81 deletions(-)

diff --git a/packages/hoppscotch-common/assets/scss/styles.scss b/packages/hoppscotch-common/assets/scss/styles.scss
index d29df819e..b38b0c9c7 100644
--- a/packages/hoppscotch-common/assets/scss/styles.scss
+++ b/packages/hoppscotch-common/assets/scss/styles.scss
@@ -34,7 +34,7 @@ input::placeholder,
 textarea::placeholder,
 .cm-placeholder {
   @apply text-secondary;
-  @apply opacity-35;
+  @apply opacity-50;
 }
 
 input,
@@ -416,7 +416,6 @@ pre.ace_editor {
 
 .smart-splitter .splitpanes__splitter {
   @apply relative;
-  @apply bg-primaryLight;
   @apply before:absolute;
   @apply before:inset-0;
   @apply before:bg-accentLight;
@@ -424,48 +423,39 @@ pre.ace_editor {
   @apply before:z-20;
   @apply before:transition;
   @apply before:content-DEFAULT;
-  @apply after:absolute;
-  @apply after:inset-0;
-  @apply after:z-20;
-  @apply after:transition;
-  @apply after:flex;
-  @apply after:items-center;
-  @apply after:justify-center;
-  @apply after:text-dividerDark;
-  @apply after:font-icon;
   @apply hover:before:opacity-100;
-  @apply hover:after:text-accentDark;
 }
 
 .no-splitter .splitpanes__splitter {
   @apply relative;
-  @apply bg-primaryLight;
 }
 
 .smart-splitter.splitpanes--vertical > .splitpanes__splitter {
-  @apply w-1;
+  @apply w-0;
   @apply before:-left-0.5;
   @apply before:-right-0.5;
   @apply before:h-full;
-  @apply after:content-["\e5d4"];
+  @apply bg-divider;
 }
 
 .smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
-  @apply h-1;
+  @apply h-0;
   @apply before:-top-0.5;
   @apply before:-bottom-0.5;
   @apply before:w-full;
-  @apply after:content-["\e5d3"];
+  @apply bg-divider;
 }
 
 .no-splitter.splitpanes--vertical > .splitpanes__splitter {
-  @apply w-0.5;
+  @apply w-0;
   @apply pointer-events-none;
+  @apply bg-dividerLight;
 }
 
 .no-splitter.splitpanes--horizontal > .splitpanes__splitter {
-  @apply h-0.5;
+  @apply h-0;
   @apply pointer-events-none;
+  @apply bg-dividerLight;
 }
 
 .cm-focused {
diff --git a/packages/hoppscotch-common/assets/scss/themes.scss b/packages/hoppscotch-common/assets/scss/themes.scss
index 7f1a4baaf..997d8b8ad 100644
--- a/packages/hoppscotch-common/assets/scss/themes.scss
+++ b/packages/hoppscotch-common/assets/scss/themes.scss
@@ -6,16 +6,19 @@
 }
 
 @mixin dark-theme {
-  --primary-color: theme("colors.neutral.900");
+  --primary-color: theme("colors.dark.800");
   --primary-light-color: theme("colors.dark.600");
   --primary-dark-color: theme("colors.neutral.800");
-  --primary-contrast-color: #161616;
+  --primary-contrast-color: theme("colors.neutral.900");
+
   --secondary-color: theme("colors.neutral.400");
   --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.100");
+  --secondary-dark-color: theme("colors.neutral.50");
+
   --divider-color: theme("colors.neutral.800");
   --divider-light-color: theme("colors.dark.500");
   --divider-dark-color: theme("colors.dark.300");
+
   --error-color: theme("colors.stone.800");
   --tooltip-color: theme("colors.neutral.100");
   --popover-color: theme("colors.dark.700");
@@ -24,15 +27,18 @@
 
 @mixin light-theme {
   --primary-color: theme("colors.white");
-  --primary-light-color: theme("colors.neutral.50");
-  --primary-dark-color: theme("colors.neutral.100");
-  --primary-contrast-color: #fefefe;
-  --secondary-color: theme("colors.neutral.500");
-  --secondary-light-color: theme("colors.neutral.400");
-  --secondary-dark-color: theme("colors.neutral.900");
+  --primary-light-color: theme("colors.gray.50");
+  --primary-dark-color: theme("colors.gray.100");
+  --primary-contrast-color: theme("colors.light.50");
+
+  --secondary-color: theme("colors.gray.500");
+  --secondary-light-color: theme("colors.gray.400");
+  --secondary-dark-color: theme("colors.gray.900");
+
   --divider-color: theme("colors.gray.100");
-  --divider-light-color: theme("colors.neutral.100");
-  --divider-dark-color: theme("colors.neutral.300");
+  --divider-light-color: theme("colors.gray.100");
+  --divider-dark-color: theme("colors.gray.300");
+
   --error-color: theme("colors.yellow.100");
   --tooltip-color: theme("colors.neutral.800");
   --popover-color: theme("colors.white");
@@ -43,16 +49,19 @@
   --primary-color: theme("colors.dark.900");
   --primary-light-color: theme("colors.neutral.900");
   --primary-dark-color: theme("colors.dark.800");
-  --primary-contrast-color: #0e0e0e;
+  --primary-contrast-color: theme("colors.dark.900");
+
   --secondary-color: theme("colors.neutral.400");
   --secondary-light-color: theme("colors.neutral.500");
   --secondary-dark-color: theme("colors.neutral.100");
-  --divider-color: theme("colors.neutral.800");
+
+  --divider-color: theme("colors.dark.600");
   --divider-light-color: theme("colors.dark.800");
-  --divider-dark-color: theme("colors.dark.300");
+  --divider-dark-color: theme("colors.dark.200");
+
   --error-color: theme("colors.stone.900");
   --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.600");
+  --popover-color: theme("colors.dark.900");
   --editor-theme: "twilight";
 }
 
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
index 471ccb5cd..d68775b83 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
@@ -135,7 +135,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
diff --git a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
index 80fb8db83..7a2f799d9 100644
--- a/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
+++ b/packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
@@ -123,7 +123,7 @@
     </div>
     <div v-if="showChildren || isFiltered" class="flex">
       <div
-        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+        class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
         @click="toggleShowChildren()"
       ></div>
       <div class="flex flex-col flex-1 truncate">
diff --git a/packages/hoppscotch-common/src/components/http/Request.vue b/packages/hoppscotch-common/src/components/http/Request.vue
index c73db255e..87637aedd 100644
--- a/packages/hoppscotch-common/src/components/http/Request.vue
+++ b/packages/hoppscotch-common/src/components/http/Request.vue
@@ -130,9 +130,7 @@
           </template>
         </tippy>
       </span>
-      <span
-        class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
-      >
+      <span class="flex ml-2 transition border rounded border-divider">
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
           :title="`${t(
diff --git a/packages/hoppscotch-common/src/components/smart/TreeBranch.vue b/packages/hoppscotch-common/src/components/smart/TreeBranch.vue
index 9c633172f..e02213bbe 100644
--- a/packages/hoppscotch-common/src/components/smart/TreeBranch.vue
+++ b/packages/hoppscotch-common/src/components/smart/TreeBranch.vue
@@ -14,7 +14,7 @@
   -->
   <div v-if="childrenRendered" v-show="showChildren" class="flex">
     <div
-      class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-1 hover:bg-dividerDark hover:scale-x-125"
+      class="bg-dividerLight cursor-nsResize flex ml-5.5 transform transition w-0.5 hover:bg-dividerDark hover:scale-x-125"
       @click="toggleNodeChildren"
     ></div>
     <div
diff --git a/packages/hoppscotch-ui/src/assets/scss/styles.scss b/packages/hoppscotch-ui/src/assets/scss/styles.scss
index 9aaf1b411..b38b0c9c7 100644
--- a/packages/hoppscotch-ui/src/assets/scss/styles.scss
+++ b/packages/hoppscotch-ui/src/assets/scss/styles.scss
@@ -34,7 +34,7 @@ input::placeholder,
 textarea::placeholder,
 .cm-placeholder {
   @apply text-secondary;
-  @apply opacity-35;
+  @apply opacity-50;
 }
 
 input,
@@ -135,7 +135,7 @@ a {
     @apply shadow-none;
     @apply fixed;
     @apply inline-flex;
-    @apply -mt-6;
+    @apply -mt-8;
   }
 }
 
@@ -416,7 +416,6 @@ pre.ace_editor {
 
 .smart-splitter .splitpanes__splitter {
   @apply relative;
-  @apply bg-primaryLight;
   @apply before:absolute;
   @apply before:inset-0;
   @apply before:bg-accentLight;
@@ -424,48 +423,39 @@ pre.ace_editor {
   @apply before:z-20;
   @apply before:transition;
   @apply before:content-DEFAULT;
-  @apply after:absolute;
-  @apply after:inset-0;
-  @apply after:z-20;
-  @apply after:transition;
-  @apply after:flex;
-  @apply after:items-center;
-  @apply after:justify-center;
-  @apply after:text-dividerDark;
-  @apply after:font-icon;
   @apply hover:before:opacity-100;
-  @apply hover:after:text-accentDark;
 }
 
 .no-splitter .splitpanes__splitter {
   @apply relative;
-  @apply bg-primaryLight;
 }
 
 .smart-splitter.splitpanes--vertical > .splitpanes__splitter {
-  @apply w-1;
+  @apply w-0;
   @apply before:-left-0.5;
   @apply before:-right-0.5;
   @apply before:h-full;
-  @apply after:content-["\e5d4"];
+  @apply bg-divider;
 }
 
 .smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
-  @apply h-1;
+  @apply h-0;
   @apply before:-top-0.5;
   @apply before:-bottom-0.5;
   @apply before:w-full;
-  @apply after:content-["\e5d3"];
+  @apply bg-divider;
 }
 
 .no-splitter.splitpanes--vertical > .splitpanes__splitter {
-  @apply w-0.5;
+  @apply w-0;
   @apply pointer-events-none;
+  @apply bg-dividerLight;
 }
 
 .no-splitter.splitpanes--horizontal > .splitpanes__splitter {
-  @apply h-0.5;
+  @apply h-0;
   @apply pointer-events-none;
+  @apply bg-dividerLight;
 }
 
 .cm-focused {
@@ -538,8 +528,16 @@ details[open] summary .indicator {
 }
 
 .env-highlight {
-  * {
-    @apply text-accentContrast;
+  @apply text-accentContrast;
+
+  &.env-found {
+    @apply bg-accentDark;
+    @apply hover:bg-accent;
+  }
+
+  &.env-not-found {
+    @apply bg-red-500;
+    @apply hover:bg-red-600;
   }
 }
 
diff --git a/packages/hoppscotch-ui/src/assets/scss/themes.scss b/packages/hoppscotch-ui/src/assets/scss/themes.scss
index 7fe889df5..997d8b8ad 100644
--- a/packages/hoppscotch-ui/src/assets/scss/themes.scss
+++ b/packages/hoppscotch-ui/src/assets/scss/themes.scss
@@ -6,16 +6,19 @@
 }
 
 @mixin dark-theme {
-  --primary-color: theme("colors.neutral.900");
+  --primary-color: theme("colors.dark.800");
   --primary-light-color: theme("colors.dark.600");
   --primary-dark-color: theme("colors.neutral.800");
-  --primary-contrast-color: #161616;
+  --primary-contrast-color: theme("colors.neutral.900");
+
   --secondary-color: theme("colors.neutral.400");
   --secondary-light-color: theme("colors.neutral.500");
-  --secondary-dark-color: theme("colors.neutral.100");
+  --secondary-dark-color: theme("colors.neutral.50");
+
   --divider-color: theme("colors.neutral.800");
   --divider-light-color: theme("colors.dark.500");
   --divider-dark-color: theme("colors.dark.300");
+
   --error-color: theme("colors.stone.800");
   --tooltip-color: theme("colors.neutral.100");
   --popover-color: theme("colors.dark.700");
@@ -24,15 +27,18 @@
 
 @mixin light-theme {
   --primary-color: theme("colors.white");
-  --primary-light-color: theme("colors.neutral.50");
-  --primary-dark-color: theme("colors.neutral.100");
-  --primary-contrast-color: #fefefe;
-  --secondary-color: theme("colors.neutral.500");
-  --secondary-light-color: theme("colors.neutral.400");
-  --secondary-dark-color: theme("colors.neutral.900");
+  --primary-light-color: theme("colors.gray.50");
+  --primary-dark-color: theme("colors.gray.100");
+  --primary-contrast-color: theme("colors.light.50");
+
+  --secondary-color: theme("colors.gray.500");
+  --secondary-light-color: theme("colors.gray.400");
+  --secondary-dark-color: theme("colors.gray.900");
+
   --divider-color: theme("colors.gray.100");
-  --divider-light-color: theme("colors.neutral.100");
-  --divider-dark-color: theme("colors.neutral.300");
+  --divider-light-color: theme("colors.gray.100");
+  --divider-dark-color: theme("colors.gray.300");
+
   --error-color: theme("colors.yellow.100");
   --tooltip-color: theme("colors.neutral.800");
   --popover-color: theme("colors.white");
@@ -43,16 +49,19 @@
   --primary-color: theme("colors.dark.900");
   --primary-light-color: theme("colors.neutral.900");
   --primary-dark-color: theme("colors.dark.800");
-  --primary-contrast-color: #0e0e0e;
+  --primary-contrast-color: theme("colors.dark.900");
+
   --secondary-color: theme("colors.neutral.400");
   --secondary-light-color: theme("colors.neutral.500");
   --secondary-dark-color: theme("colors.neutral.100");
-  --divider-color: theme("colors.neutral.800");
+
+  --divider-color: theme("colors.dark.600");
   --divider-light-color: theme("colors.dark.800");
-  --divider-dark-color: theme("colors.dark.300");
+  --divider-dark-color: theme("colors.dark.200");
+
   --error-color: theme("colors.stone.900");
   --tooltip-color: theme("colors.neutral.100");
-  --popover-color: theme("colors.dark.600");
+  --popover-color: theme("colors.dark.900");
   --editor-theme: "twilight";
 }
 
@@ -305,7 +314,3 @@
 :root[data-font-size="large"] {
   @include font-large;
 }
-
-.generic {
-  @apply text-primary text-primaryLight bg-primary;
-}