Merge remote-tracking branch 'central/main'

packages/hoppscotch-cli/package.json

@@ -54,7 +54,7 @@
     "io-ts": "^2.2.16",
     "jest": "^27.5.1",
     "lodash": "^4.17.21",
-    "prettier": "^2.6.2",
+    "prettier": "^2.8.4",
     "qs": "^6.10.3",
     "ts-jest": "^27.1.4",
     "tsup": "^5.12.7",

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 {

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-light-color: theme("colors.gray.50");
-  --primary-dark-color: theme("colors.neutral.100");
+  --primary-dark-color: theme("colors.gray.100");
-  --primary-contrast-color: #fefefe;
+  --primary-contrast-color: theme("colors.light.50");
-  --secondary-color: theme("colors.neutral.500");
+
-  --secondary-light-color: theme("colors.neutral.400");
+  --secondary-color: theme("colors.gray.500");
-  --secondary-dark-color: theme("colors.neutral.900");
+  --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-light-color: theme("colors.gray.100");
-  --divider-dark-color: theme("colors.neutral.300");
+  --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";
 }
 

packages/hoppscotch-common/package.json

@@ -126,7 +126,7 @@
     "@vue/runtime-core": "^3.2.39",
     "cross-env": "^7.0.3",
     "eslint": "^8.24.0",
-    "eslint-plugin-prettier": "^4.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.5.1",
     "npm-run-all": "^4.1.5",
     "openapi-types": "^12.0.0",

packages/hoppscotch-common/src/components/app/Interceptor.vue

@@ -69,7 +69,7 @@ const interceptors = computed(() => [
   },
 ])
 
-type InterceptorMode = typeof interceptors["value"][number]["value"]
+type InterceptorMode = (typeof interceptors)["value"][number]["value"]
 
 const interceptorSelection = computed<InterceptorMode>({
   get() {

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">

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">

packages/hoppscotch-common/src/components/history/index.vue

@@ -284,7 +284,7 @@ const filters = computed(() => [
   { value: "STARRED" as const, label: t("filter.starred") },
 ])
 
-type FilterMode = typeof filters["value"][number]["value"]
+type FilterMode = (typeof filters)["value"][number]["value"]
 
 const filterSelection = ref<FilterMode>("ALL")
 
@@ -293,7 +293,7 @@ const groups = computed(() => [
   { value: "URL" as const, label: t("group.url") },
 ])
 
-type GroupMode = typeof groups["value"][number]["value"]
+type GroupMode = (typeof groups)["value"][number]["value"]
 
 const groupSelection = ref<GroupMode>("TIME")
 

packages/hoppscotch-common/src/components/http/Request.vue

@@ -130,9 +130,7 @@
           </template>
         </tippy>
       </span>
-      <span
+      <span class="flex ml-2 transition border rounded border-divider">
-        class="flex ml-2 transition border rounded border-dividerLight hover:border-dividerDark"
-      >
         <ButtonSecondary
           v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
           :title="`${t(

packages/hoppscotch-common/src/components/http/Response.vue

@@ -3,40 +3,32 @@
     <HttpResponseMeta :response="response" />
     <LensesResponseBodyRenderer
       v-if="!loading && hasResponse"
+      v-model:selected-tab-preference="selectedTabPreference"
       :response="response"
     />
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { computed, defineComponent, watch } from "vue"
+import { ref, computed, watch } from "vue"
 import { startPageProgress, completePageProgress } from "@modules/loadingbar"
 import { useReadonlyStream } from "@composables/stream"
 import { restResponse$ } from "~/newstore/RESTSession"
 
-export default defineComponent({
+const selectedTabPreference = ref<string | null>(null)
-  setup() {
-    const response = useReadonlyStream(restResponse$, null)
 
-    const hasResponse = computed(
+const response = useReadonlyStream(restResponse$, null)
-      () =>
-        response.value?.type === "success" || response.value?.type === "fail"
-    )
 
-    const loading = computed(
+const hasResponse = computed(
-      () => response.value === null || response.value.type === "loading"
+  () => response.value?.type === "success" || response.value?.type === "fail"
-    )
+)
 
-    watch(response, () => {
+const loading = computed(
-      if (response.value?.type === "loading") startPageProgress()
+  () => response.value === null || response.value.type === "loading"
-      else completePageProgress()
+)
-    })
 
-    return {
+watch(response, () => {
-      hasResponse,
+  if (response.value?.type === "loading") startPageProgress()
-      response,
+  else completePageProgress()
-      loading,
-    }
-  },
 })
 </script>

packages/hoppscotch-common/src/components/http/ResponseMeta.vue

@@ -107,7 +107,7 @@ const t = useI18n()
 const colorMode = useColorMode()
 
 const props = defineProps<{
-  response: HoppRESTResponse
+  response: HoppRESTResponse | null
 }>()
 
 /**
@@ -118,6 +118,7 @@ const props = defineProps<{
  */
 const readableResponseSize = computed(() => {
   if (
+    props.response === null ||
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||
@@ -135,6 +136,7 @@ const readableResponseSize = computed(() => {
 
 const statusCategory = computed(() => {
   if (
+    props.response === null ||
     props.response.type === "loading" ||
     props.response.type === "network_fail" ||
     props.response.type === "script_fail" ||

packages/hoppscotch-common/src/components/lenses/HeadersRenderer.vue

@@ -27,18 +27,18 @@
 <script setup lang="ts">
 import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
-import { HoppRESTHeader } from "@hoppscotch/data"
 import { refAutoReset } from "@vueuse/core"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
+import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
 
 const t = useI18n()
 
 const toast = useToast()
 
 const props = defineProps<{
-  headers: Array<HoppRESTHeader>
+  headers: HoppRESTResponseHeader[]
 }>()
 
 const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

packages/hoppscotch-common/src/components/lenses/HeadersRendererEntry.vue

@@ -30,7 +30,7 @@
 import IconCopy from "~icons/lucide/copy"
 import IconCheck from "~icons/lucide/check"
 import { refAutoReset } from "@vueuse/core"
-import type { HoppRESTHeader } from "@hoppscotch/data"
+import type { HoppRESTResponseHeader } from "~/helpers/types/HoppRESTResponse"
 import { copyToClipboard } from "~/helpers/utils/clipboard"
 import { useI18n } from "@composables/i18n"
 import { useToast } from "@composables/toast"
@@ -40,7 +40,7 @@ const t = useI18n()
 const toast = useToast()
 
 defineProps<{
-  header: HoppRESTHeader
+  header: HoppRESTResponseHeader
 }>()
 
 const copyIcon = refAutoReset<typeof IconCopy | typeof IconCheck>(

packages/hoppscotch-common/src/components/lenses/ResponseBodyRenderer.vue

@@ -11,16 +11,16 @@
       :label="t(lens.lensName)"
       class="flex flex-col flex-1 w-full h-full"
     >
-      <component :is="lens.renderer" :response="response" />
+      <component :is="lensRendererFor(lens.renderer)" :response="response" />
     </SmartTab>
     <SmartTab
-      v-if="headerLength"
+      v-if="maybeHeaders"
       id="headers"
       :label="t('response.headers')"
-      :info="`${headerLength}`"
+      :info="`${maybeHeaders.length}`"
       class="flex flex-col flex-1"
     >
-      <LensesHeadersRenderer :headers="response.headers" />
+      <LensesHeadersRenderer :headers="maybeHeaders" />
     </SmartTab>
     <SmartTab
       id="results"
@@ -42,54 +42,77 @@
   </SmartTabs>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
-import { defineComponent } from "vue"
+import { computed, ref, watch } from "vue"
-import { getSuitableLenses, getLensRenderers } from "~/helpers/lenses/lenses"
+import {
+  getSuitableLenses,
+  getLensRenderers,
+  Lens,
+} from "~/helpers/lenses/lenses"
 import { useReadonlyStream } from "@composables/stream"
 import { useI18n } from "@composables/i18n"
+import type { HoppRESTResponse } from "~/helpers/types/HoppRESTResponse"
 import { restTestResults$ } from "~/newstore/RESTSession"
 
-export default defineComponent({
+const props = defineProps<{
-  components: {
+  response: HoppRESTResponse | null
-    // Lens Renderers
+  selectedTabPreference: string | null
-    ...getLensRenderers(),
+}>()
-  },
-  props: {
-    response: { type: Object, default: () => ({}) },
-  },
-  setup() {
-    const testResults = useReadonlyStream(restTestResults$, null)
 
-    return {
+const emit = defineEmits<{
-      testResults,
+  (e: "update:selectedTabPreference", newTab: string): void
-      t: useI18n(),
+}>()
+
+const allLensRenderers = getLensRenderers()
+
+function lensRendererFor(name: string) {
+  return allLensRenderers[name]
+}
+
+const testResults = useReadonlyStream(restTestResults$, null)
+
+const t = useI18n()
+
+const selectedLensTab = ref("")
+
+const maybeHeaders = computed(() => {
+  if (
+    !props.response ||
+    !(props.response.type === "success" || props.response.type === "fail")
+  )
+    return null
+  return props.response.headers
+})
+
+const validLenses = computed(() => {
+  if (!props.response) return []
+  return getSuitableLenses(props.response)
+})
+
+watch(
+  validLenses,
+  (newLenses: Lens[]) => {
+    if (newLenses.length === 0) return
+
+    const validRenderers = [
+      ...newLenses.map((x) => x.renderer),
+      "headers",
+      "results",
+    ]
+
+    if (
+      props.selectedTabPreference &&
+      validRenderers.includes(props.selectedTabPreference)
+    ) {
+      selectedLensTab.value = props.selectedTabPreference
+    } else {
+      selectedLensTab.value = newLenses[0].renderer
     }
   },
-  data() {
+  { immediate: true }
-    return {
+)
-      selectedLensTab: "",
-    }
-  },
-  computed: {
-    headerLength() {
-      if (!this.response || !this.response.headers) return 0
 
-      return Object.keys(this.response.headers).length
+watch(selectedLensTab, (newLensID) => {
-    },
+  emit("update:selectedTabPreference", newLensID)
-    validLenses() {
-      if (!this.response) return []
-
-      return getSuitableLenses(this.response)
-    },
-  },
-  watch: {
-    validLenses: {
-      handler(newValue) {
-        if (newValue.length === 0) return
-        this.selectedLensTab = newValue[0].renderer
-      },
-      immediate: true,
-    },
-  },
 })
 </script>

packages/hoppscotch-common/src/components/realtime/Subscription.vue

@@ -112,7 +112,7 @@ const emit = defineEmits<{
   (e: "submit", body: MQTTTopic): void
 }>()
 
-const QoS = ref<typeof QOS_VALUES[number]>(2)
+const QoS = ref<(typeof QOS_VALUES)[number]>(2)
 const name = ref("")
 const color = ref("#f58290")
 

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

packages/hoppscotch-common/src/helpers/new-codegen/index.ts

@@ -185,7 +185,7 @@ export const CodegenDefinitions = [
 /**
  * A type which defines all the valid code generators
  */
-export type CodegenName = typeof CodegenDefinitions[number]["name"]
+export type CodegenName = (typeof CodegenDefinitions)[number]["name"]
 
 /**
  * Generates Source Code for the given codgen

packages/hoppscotch-common/src/helpers/types/HoppRESTResponse.ts

@@ -1,10 +1,12 @@
 import { HoppRESTRequest } from "@hoppscotch/data"
 
+export type HoppRESTResponseHeader = { key: string; value: string }
+
 export type HoppRESTResponse =
   | { type: "loading"; req: HoppRESTRequest }
   | {
       type: "fail"
-      headers: { key: string; value: string }[]
+      headers: HoppRESTResponseHeader[]
       body: ArrayBuffer
       statusCode: number
 
@@ -27,7 +29,7 @@ export type HoppRESTResponse =
     }
   | {
       type: "success"
-      headers: { key: string; value: string }[]
+      headers: HoppRESTResponseHeader[]
       body: ArrayBuffer
       statusCode: number
       meta: {

packages/hoppscotch-common/src/newstore/settings.ts

@@ -7,7 +7,7 @@ import type { KeysMatching } from "~/types/ts-utils"
 
 export const HoppBgColors = ["system", "light", "dark", "black"] as const
 
-export type HoppBgColor = typeof HoppBgColors[number]
+export type HoppBgColor = (typeof HoppBgColors)[number]
 
 export const HoppAccentColors = [
   "green",
@@ -21,11 +21,11 @@ export const HoppAccentColors = [
   "pink",
 ] as const
 
-export type HoppAccentColor = typeof HoppAccentColors[number]
+export type HoppAccentColor = (typeof HoppAccentColors)[number]
 
 export const HoppFontSizes = ["small", "medium", "large"] as const
 
-export type HoppFontSize = typeof HoppFontSizes[number]
+export type HoppFontSize = (typeof HoppFontSizes)[number]
 
 export type SettingsType = {
   syncCollections: boolean

packages/hoppscotch-common/src/pages/realtime.vue

@@ -44,7 +44,7 @@ const REALTIME_NAVIGATION = [
   },
 ] as const
 
-type RealtimeNavTab = typeof REALTIME_NAVIGATION[number]["target"]
+type RealtimeNavTab = (typeof REALTIME_NAVIGATION)[number]["target"]
 
 const currentTab = ref<RealtimeNavTab>("websocket")
 

packages/hoppscotch-js-sandbox/package.json

@@ -55,11 +55,11 @@
     "@typescript-eslint/eslint-plugin": "^5.19.0",
     "@typescript-eslint/parser": "^5.19.0",
     "eslint": "^8.13.0",
-    "eslint-config-prettier": "^8.5.0",
+    "eslint-config-prettier": "^8.6.0",
-    "eslint-plugin-prettier": "^4.0.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "io-ts": "^2.2.16",
     "jest": "^27.5.1",
-    "prettier": "^2.6.2",
+    "prettier": "^2.8.4",
     "ts-jest": "^27.1.4",
     "typescript": "^4.6.3"
   }

packages/hoppscotch-ui/package.json

@@ -53,7 +53,7 @@
     "@vue/runtime-core": "^3.2.39",
     "cross-env": "^7.0.3",
     "eslint": "^8.24.0",
-    "eslint-plugin-prettier": "^4.2.0",
+    "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-vue": "^9.5.1",
     "histoire": "^0.12.4",
     "npm-run-all": "^4.1.5",

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;
   }
 }
 

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-light-color: theme("colors.gray.50");
-  --primary-dark-color: theme("colors.neutral.100");
+  --primary-dark-color: theme("colors.gray.100");
-  --primary-contrast-color: #fefefe;
+  --primary-contrast-color: theme("colors.light.50");
-  --secondary-color: theme("colors.neutral.500");
+
-  --secondary-light-color: theme("colors.neutral.400");
+  --secondary-color: theme("colors.gray.500");
-  --secondary-dark-color: theme("colors.neutral.900");
+  --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-light-color: theme("colors.gray.100");
-  --divider-dark-color: theme("colors.neutral.300");
+  --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;
-}