refactor: monorepo+pnpm (removed husky)

packages/hoppscotch-app/assets/scss/styles.scss

@@ -0,0 +1,468 @@
+*,
+*::before,
+*::after {
+  @apply backface-hidden;
+}
+
+:root {
+  @apply antialiased;
+
+  font-variant-ligatures: common-ligatures;
+}
+
+::-webkit-scrollbar-track {
+  @apply bg-transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  @apply bg-divider bg-clip-content;
+  @apply rounded-full;
+  @apply border-solid border-4 border-transparent;
+  @apply hover:(bg-dividerDark bg-clip-content);
+}
+
+::-webkit-scrollbar {
+  @apply w-4;
+  @apply h-4;
+}
+
+.hide-scrollbar::-webkit-scrollbar {
+  @apply hidden;
+}
+
+::selection {
+  @apply bg-accent;
+  @apply text-accentContrast;
+}
+
+input::placeholder,
+textarea::placeholder {
+  @apply text-secondaryDark;
+  @apply opacity-25;
+}
+
+input,
+textarea {
+  @apply text-secondaryDark;
+  @apply font-medium;
+}
+
+html {
+  scroll-behavior: smooth;
+}
+
+body {
+  @apply bg-primary;
+  @apply text-secondary;
+  @apply font-medium;
+  @apply select-none;
+  @apply overflow-x-hidden;
+
+  animation: fade 300ms forwards;
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+  overflow: overlay;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+}
+
+@keyframes fade {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+.fade-enter-active,
+.fade-leave-active,
+.page-enter-active,
+.page-leave-active,
+.layout-enter-active,
+.layout-leave-active {
+  @apply transition-opacity;
+}
+
+.fade-enter,
+.fade-leave-to,
+.page-enter,
+.page-leave-to,
+.layout-enter,
+.layout-leave-to {
+  @apply opacity-0;
+}
+
+.material-icons {
+  font-size: var(--body-line-height) !important;
+  width: var(--body-line-height);
+  overflow: hidden;
+}
+
+.svg-icons {
+  height: var(--body-line-height);
+  width: var(--body-line-height);
+}
+
+a {
+  @apply inline-flex;
+  @apply text-current;
+  @apply no-underline;
+  @apply outline-none;
+  @apply transition;
+
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+
+  &.link {
+    @apply items-center;
+    @apply px-1 py-0.5;
+    @apply -mx-1 -my-0.5;
+    @apply text-accent;
+    @apply rounded;
+    @apply hover:text-accentDark;
+    @apply focus-visible:(ring ring-accent);
+  }
+}
+
+.tippy-popper {
+  .tooltip-theme {
+    @apply bg-tooltip;
+    @apply text-primary;
+    @apply font-semibold;
+    @apply py-1 px-2;
+    @apply truncate;
+    @apply shadow;
+
+    font-size: 88%;
+    line-height: var(--body-line-height);
+
+    kbd {
+      @apply inline-flex;
+      @apply font-sans;
+      @apply bg-gray-500;
+      @apply bg-opacity-45;
+      @apply text-primaryLight;
+      @apply rounded-sm;
+      @apply px-1;
+      @apply ml-1;
+      @apply truncate;
+    }
+  }
+
+  .popover-theme {
+    @apply bg-popover;
+    @apply text-secondary;
+    @apply p-2;
+    @apply shadow-lg;
+    @apply focus:outline-none;
+
+    font-size: var(--body-font-size);
+    line-height: var(--body-line-height);
+
+    .tippy-roundarrow svg {
+      @apply fill-popover;
+    }
+  }
+}
+
+[interactive] > div {
+  @apply flex;
+  @apply flex-1;
+  @apply h-full;
+}
+
+.tippy-content > div {
+  @apply flex flex-col;
+  @apply max-h-46;
+  @apply items-stretch;
+  @apply overflow-y-auto;
+
+  &::-webkit-scrollbar {
+    @apply hidden;
+  }
+}
+
+hr {
+  @apply border-b border-dividerLight;
+  @apply my-2;
+}
+
+.heading {
+  @apply font-bold;
+  @apply text-secondaryDark text-lg;
+}
+
+.input,
+.select,
+.textarea {
+  @apply flex;
+  @apply w-full;
+  @apply px-4 py-2;
+  @apply bg-transparent;
+  @apply rounded;
+  @apply text-secondaryDark;
+  @apply border border-divider;
+  @apply focus-visible:border-dividerDark;
+}
+
+input,
+select,
+textarea,
+button {
+  @apply focus:outline-none;
+  @apply truncate;
+  @apply transition;
+  @apply disabled:cursor-not-allowed;
+
+  font-size: var(--body-font-size);
+  line-height: var(--body-line-height);
+}
+
+.input[type="file"],
+.input[type="radio"],
+#installPWA {
+  @apply hidden;
+}
+
+.floating-input ~ label {
+  @apply font-medium;
+  @apply py-0.5;
+  @apply px-2;
+  @apply m-2;
+  @apply rounded;
+  @apply transition;
+  @apply absolute;
+  @apply origin-top-left;
+}
+
+.floating-input:focus-within ~ label,
+.floating-input:not(:placeholder-shown) ~ label {
+  @apply bg-primary;
+  @apply transform;
+  @apply origin-top-left;
+  @apply scale-75;
+  @apply -translate-y-5;
+  @apply translate-x-1;
+}
+
+.floating-input:focus-within ~ label {
+  @apply text-secondaryDark;
+}
+
+pre.ace_editor {
+  @apply font-mono;
+  @apply resize-none;
+  @apply z-0;
+}
+
+.select {
+  @apply appearance-none;
+  @apply cursor-pointer;
+
+  &::-ms-expand {
+    @apply hidden;
+  }
+}
+
+.select-wrapper {
+  @apply flex flex-1;
+  @apply relative;
+
+  &::after {
+    @apply absolute;
+    @apply flex;
+    @apply inset-y-0;
+    @apply items-center;
+    @apply justify-center;
+    @apply pointer-events-none;
+    @apply font-icon;
+    @apply text-secondaryLight;
+    @apply right-3;
+
+    content: "\e313";
+  }
+}
+
+input[type="checkbox"] {
+  @apply hidden;
+
+  &,
+  & + label {
+    @apply align-middle;
+    @apply cursor-pointer;
+
+    &::before {
+      @apply border-2 border-divider;
+      @apply rounded;
+      @apply inline-flex;
+      @apply items-center;
+      @apply justify-center;
+      @apply text-transparent;
+      @apply h-4;
+      @apply w-4;
+      @apply font-icon;
+
+      content: "\e876";
+      margin: 8px 8px 8px 0;
+    }
+  }
+
+  &:checked + label::before {
+    @apply bg-accent;
+    @apply border-accent;
+    @apply text-primary;
+  }
+}
+
+.info-response {
+  @apply text-pink-500;
+}
+
+.success-response {
+  @apply text-green-500;
+}
+
+.redir-response {
+  @apply text-yellow-500;
+}
+
+.cl-error-response {
+  @apply text-red-500;
+}
+
+.sv-error-response {
+  @apply text-red-600;
+}
+
+.missing-data-response {
+  @apply text-secondaryLight;
+}
+
+.toasted-container {
+  .toasted {
+    &.toasted-primary {
+      @apply bg-tooltip;
+      @apply text-primary;
+      @apply justify-start;
+      @apply shadow;
+      @apply font-medium;
+
+      font-size: var(--body-font-size);
+      line-height: var(--body-line-height);
+
+      .action {
+        @apply bg-gray-500;
+        @apply px-4;
+        @apply bg-opacity-10;
+        @apply ml-auto;
+        @apply last:ml-4;
+        @apply sm:ml-8;
+        @apply transition;
+        @apply rounded;
+        @apply text-current;
+        @apply normal-case;
+        @apply hover:(bg-opacity-20 no-underline);
+        @apply font-medium;
+
+        font-size: var(--body-font-size);
+        line-height: var(--body-line-height);
+      }
+    }
+
+    &.info {
+      @apply !bg-accent;
+    }
+
+    &.error {
+      @apply !bg-red-200;
+      @apply !text-red-800;
+    }
+
+    &.success {
+      @apply !bg-green-200;
+      @apply !text-green-800;
+    }
+  }
+}
+
+.smart-splitter .splitpanes__splitter {
+  @apply relative;
+  @apply bg-primaryLight;
+}
+
+.no-splitter .splitpanes__splitter {
+  @apply relative;
+  @apply bg-primaryLight;
+}
+
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter {
+  @apply w-1;
+}
+
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
+  @apply h-1;
+}
+
+.no-splitter.splitpanes--vertical > .splitpanes__splitter {
+  @apply w-0.5;
+  @apply pointer-events-none;
+}
+
+.no-splitter.splitpanes--horizontal > .splitpanes__splitter {
+  @apply h-0.5;
+  @apply pointer-events-none;
+}
+
+.smart-splitter .splitpanes__splitter::before {
+  @apply absolute;
+  @apply inset-0;
+  @apply bg-dividerLight;
+  @apply opacity-0;
+  @apply z-30;
+  @apply transition;
+
+  content: "";
+}
+
+.smart-splitter .splitpanes__splitter::after {
+  @apply absolute;
+  @apply inset-0;
+  @apply z-30;
+  @apply transition;
+  @apply flex;
+  @apply items-center;
+  @apply justify-center;
+  @apply text-dividerDark;
+  @apply font-icon;
+}
+
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter::after {
+  content: "\e5d4";
+}
+
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::after {
+  content: "\e5d3";
+}
+
+.smart-splitter .splitpanes__splitter:hover::before {
+  @apply opacity-100;
+}
+
+.smart-splitter.splitpanes--vertical > .splitpanes__splitter::before {
+  @apply -left-0.5;
+  @apply -right-0.5;
+  @apply h-full;
+}
+
+.smart-splitter.splitpanes--horizontal > .splitpanes__splitter::before {
+  @apply -top-0.5;
+  @apply -bottom-0.5;
+  @apply w-full;
+}
+
+@media (max-width: 767px) {
+  main {
+    margin-bottom: env(safe-area-inset-bottom);
+  }
+}

packages/hoppscotch-app/assets/scss/themes.scss

@@ -0,0 +1,374 @@
+@mixin baseTheme {
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
+  --font-icon: "Material Icons";
+}
+
+@mixin darkTheme {
+  // Background color
+  --primary-color: theme("colors.true-gray.900");
+  // Light Background color
+  --primary-light-color: theme("colors.dark.600");
+  // Dark Background color
+  --primary-dark-color: theme("colors.true-gray.800");
+  // Text color
+  --secondary-color: theme("colors.true-gray.400");
+  // Light Text color
+  --secondary-light-color: theme("colors.true-gray.500");
+  // Dark Text color
+  --secondary-dark-color: theme("colors.true-gray.100");
+  // Border color
+  --divider-color: theme("colors.true-gray.800");
+  // Light Border color
+  --divider-light-color: theme("colors.dark.500");
+  // Dark Border color
+  --divider-dark-color: theme("colors.dark.300");
+  // Error color
+  --error-color: theme("colors.warm-gray.800");
+  // Tooltip color
+  --tooltip-color: theme("colors.true-gray.100");
+  // Popover color
+  --popover-color: theme("colors.dark.700");
+  // Editor theme
+  --editor-theme: "merbivore_soft";
+}
+
+@mixin lightTheme {
+  // Background color
+  --primary-color: theme("colors.white");
+  // Light Background color
+  --primary-light-color: theme("colors.true-gray.50");
+  // Dark Background color
+  --primary-dark-color: theme("colors.true-gray.100");
+  // Text color
+  --secondary-color: theme("colors.true-gray.500");
+  // Light Text color
+  --secondary-light-color: theme("colors.true-gray.400");
+  // Dark Text color
+  --secondary-dark-color: theme("colors.true-gray.900");
+  // Border color
+  --divider-color: theme("colors.true-gray.200");
+  // Light Border color
+  --divider-light-color: theme("colors.true-gray.100");
+  // Dark Border color
+  --divider-dark-color: theme("colors.true-gray.300");
+  // Error color
+  --error-color: theme("colors.yellow.100");
+  // Tooltip color
+  --tooltip-color: theme("colors.true-gray.800");
+  // Popover color
+  --popover-color: theme("colors.white");
+  // Editor theme
+  --editor-theme: "textmate";
+}
+
+@mixin blackTheme {
+  // Background color
+  --primary-color: theme("colors.dark.900");
+  // Light Background color
+  --primary-light-color: theme("colors.true-gray.900");
+  // Dark Background color
+  --primary-dark-color: theme("colors.dark.800");
+  // Text color
+  --secondary-color: theme("colors.true-gray.400");
+  // Light Text color
+  --secondary-light-color: theme("colors.true-gray.500");
+  // Dark Text color
+  --secondary-dark-color: theme("colors.true-gray.100");
+  // Border color
+  --divider-color: theme("colors.true-gray.800");
+  // Light Border color
+  --divider-light-color: theme("colors.dark.700");
+  // Dark Border color
+  --divider-dark-color: theme("colors.dark.300");
+  // Error color
+  --error-color: theme("colors.warm-gray.900");
+  // Tooltip color
+  --tooltip-color: theme("colors.true-gray.100");
+  // Popover color
+  --popover-color: theme("colors.dark.700");
+  // Editor theme
+  --editor-theme: "twilight";
+}
+
+@mixin greenTheme {
+  // Accent color
+  --accent-color: theme("colors.green.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.green.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.green.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.green.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.green.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.green.600");
+}
+
+@mixin tealTheme {
+  // Accent color
+  --accent-color: theme("colors.teal.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.teal.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.teal.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.teal.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.teal.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.teal.600");
+}
+
+@mixin blueTheme {
+  // Accent color
+  --accent-color: theme("colors.blue.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.blue.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.blue.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.blue.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.blue.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.blue.600");
+}
+
+@mixin indigoTheme {
+  // Accent color
+  --accent-color: theme("colors.indigo.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.indigo.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.indigo.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.indigo.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.indigo.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.indigo.600");
+}
+
+@mixin purpleTheme {
+  // Accent color
+  --accent-color: theme("colors.purple.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.purple.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.purple.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.purple.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.purple.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.purple.600");
+}
+
+@mixin yellowTheme {
+  // Accent color
+  --accent-color: theme("colors.yellow.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.yellow.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.yellow.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.yellow.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.yellow.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.yellow.600");
+}
+
+@mixin orangeTheme {
+  // Accent color
+  --accent-color: theme("colors.orange.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.orange.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.orange.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.orange.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.orange.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.orange.600");
+}
+
+@mixin redTheme {
+  // Accent color
+  --accent-color: theme("colors.red.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.red.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.red.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.red.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.red.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.red.600");
+}
+
+@mixin pinkTheme {
+  // Accent color
+  --accent-color: theme("colors.pink.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.pink.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.pink.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.pink.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.pink.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.pink.600");
+}
+
+:root {
+  @include baseTheme;
+  @include darkTheme;
+  @include greenTheme;
+}
+
+:root.light {
+  @include lightTheme;
+}
+
+:root.dark {
+  @include darkTheme;
+}
+
+:root.black {
+  @include blackTheme;
+}
+
+:root[data-accent="blue"] {
+  @include blueTheme;
+}
+
+:root[data-accent="green"] {
+  @include greenTheme;
+}
+
+:root[data-accent="teal"] {
+  @include tealTheme;
+}
+
+:root[data-accent="indigo"] {
+  @include indigoTheme;
+}
+
+:root[data-accent="purple"] {
+  @include purpleTheme;
+}
+
+:root[data-accent="orange"] {
+  @include orangeTheme;
+}
+
+:root[data-accent="pink"] {
+  @include pinkTheme;
+}
+
+:root[data-accent="red"] {
+  @include redTheme;
+}
+
+:root[data-accent="yellow"] {
+  @include yellowTheme;
+}
+
+@mixin fontSmall {
+  // Font size
+  --body-font-size: 0.75rem;
+  // Line height
+  --body-line-height: 1rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.125rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 6.125rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 8.188rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 5rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 4rem;
+}
+
+@mixin fontMedium {
+  // Font size
+  --body-font-size: 0.875rem;
+  // Line height
+  --body-line-height: 1.25rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.375rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 6.625rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 8.813rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3.25rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 5.5rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2.25rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 4.5rem;
+}
+
+@mixin fontLarge {
+  // Font size
+  --body-font-size: 1rem;
+  // Line height
+  --body-line-height: 1.5rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.625rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 7.125rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 9.5rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3.5rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 6rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2.5rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 5rem;
+}
+
+:root[data-font-size="small"] {
+  @include fontSmall;
+}
+
+:root[data-font-size="medium"] {
+  @include fontMedium;
+}
+
+:root[data-font-size="large"] {
+  @include fontLarge;
+}