btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

chore: improved theme colors

Browse Source
This commit is contained in:
Liyas Thomas
2023-02-08 15:13:24 +05:30
parent a227af05d9
commit 864d40d934
8 changed files with 81 additions and 81 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
packages/hoppscotch-common/assets/scss/styles.scss
View File

@@ -34,7 +34,7 @@ input::placeholder,
textarea::placeholder, textarea::placeholder,
.cm-placeholder { .cm-placeholder {
@apply text-secondary; @apply text-secondary;
@apply opacity-35; @apply opacity-50;
} }
input, input,
@@ -416,7 +416,6 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter { .smart-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight;
@apply before:absolute; @apply before:absolute;
@apply before:inset-0; @apply before:inset-0;
@apply before:bg-accentLight; @apply before:bg-accentLight;
@@ -424,48 +423,39 @@ pre.ace_editor {
@apply before:z-20; @apply before:z-20;
@apply before:transition; @apply before:transition;
@apply before:content-DEFAULT; @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:before:opacity-100;
@apply hover:after:text-accentDark;
} }
.no-splitter .splitpanes__splitter { .no-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight;
} }
.smart-splitter.splitpanes--vertical > .splitpanes__splitter { .smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1; @apply w-0;
@apply before:-left-0.5; @apply before:-left-0.5;
@apply before:-right-0.5; @apply before:-right-0.5;
@apply before:h-full; @apply before:h-full;
@apply after:content-["\e5d4"]; @apply bg-divider;
} }
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter { .smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1; @apply h-0;
@apply before:-top-0.5; @apply before:-top-0.5;
@apply before:-bottom-0.5; @apply before:-bottom-0.5;
@apply before:w-full; @apply before:w-full;
@apply after:content-["\e5d3"]; @apply bg-divider;
} }
.no-splitter.splitpanes--vertical > .splitpanes__splitter { .no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5; @apply w-0;
@apply pointer-events-none; @apply pointer-events-none;
@apply bg-dividerLight;
} }
.no-splitter.splitpanes--horizontal > .splitpanes__splitter { .no-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-0.5; @apply h-0;
@apply pointer-events-none; @apply pointer-events-none;
@apply bg-dividerLight;
} }
.cm-focused { .cm-focused {

39
packages/hoppscotch-common/assets/scss/themes.scss
View File

@@ -6,16 +6,19 @@
} }
@mixin dark-theme { @mixin dark-theme {
--primary-color: theme("colors.neutral.900"); --primary-color: theme("colors.dark.800");
--primary-light-color: theme("colors.dark.600"); --primary-light-color: theme("colors.dark.600");
--primary-dark-color: theme("colors.neutral.800"); --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-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500"); --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-color: theme("colors.neutral.800");
--divider-light-color: theme("colors.dark.500"); --divider-light-color: theme("colors.dark.500");
--divider-dark-color: theme("colors.dark.300"); --divider-dark-color: theme("colors.dark.300");
--error-color: theme("colors.stone.800"); --error-color: theme("colors.stone.800");
--tooltip-color: theme("colors.neutral.100"); --tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.700"); --popover-color: theme("colors.dark.700");
@@ -24,15 +27,18 @@
@mixin light-theme { @mixin light-theme {
--primary-color: theme("colors.white"); --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-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"); --error-color: theme("colors.yellow.100");
--tooltip-color: theme("colors.neutral.800"); --tooltip-color: theme("colors.neutral.800");
--popover-color: theme("colors.white"); --popover-color: theme("colors.white");
@@ -43,16 +49,19 @@
--primary-color: theme("colors.dark.900"); --primary-color: theme("colors.dark.900");
--primary-light-color: theme("colors.neutral.900"); --primary-light-color: theme("colors.neutral.900");
--primary-dark-color: theme("colors.dark.800"); --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-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500"); --secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100"); --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-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"); --error-color: theme("colors.stone.900");
--tooltip-color: theme("colors.neutral.100"); --tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.600"); --popover-color: theme("colors.dark.900");
--editor-theme: "twilight"; --editor-theme: "twilight";
} }

2
packages/hoppscotch-common/src/components/collections/graphql/Collection.vue
View File

@@ -135,7 +135,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <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()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">

2
packages/hoppscotch-common/src/components/collections/graphql/Folder.vue
View File

@@ -123,7 +123,7 @@
</div> </div>
<div v-if="showChildren || isFiltered" class="flex"> <div v-if="showChildren || isFiltered" class="flex">
<div <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()" @click="toggleShowChildren()"
></div> ></div>
<div class="flex flex-col flex-1 truncate"> <div class="flex flex-col flex-1 truncate">

4
packages/hoppscotch-common/src/components/http/Request.vue
View File

@@ -130,9 +130,7 @@
</template> </template>
</tippy> </tippy>
</span> </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 <ButtonSecondary
v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }" v-tippy="{ theme: 'tooltip', delay: [500, 20], allowHTML: true }"
:title="`${t( :title="`${t(

2
packages/hoppscotch-common/src/components/smart/TreeBranch.vue
View File

@@ -14,7 +14,7 @@
--> -->
<div v-if="childrenRendered" v-show="showChildren" class="flex"> <div v-if="childrenRendered" v-show="showChildren" class="flex">
<div <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" @click="toggleNodeChildren"
></div> ></div>
<div <div

42
packages/hoppscotch-ui/src/assets/scss/styles.scss
View File

@@ -34,7 +34,7 @@ input::placeholder,
textarea::placeholder, textarea::placeholder,
.cm-placeholder { .cm-placeholder {
@apply text-secondary; @apply text-secondary;
@apply opacity-35; @apply opacity-50;
} }
input, input,
@@ -135,7 +135,7 @@ a {
@apply shadow-none; @apply shadow-none;
@apply fixed; @apply fixed;
@apply inline-flex; @apply inline-flex;
@apply -mt-6; @apply -mt-8;
} }
} }
@@ -416,7 +416,6 @@ pre.ace_editor {
.smart-splitter .splitpanes__splitter { .smart-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight;
@apply before:absolute; @apply before:absolute;
@apply before:inset-0; @apply before:inset-0;
@apply before:bg-accentLight; @apply before:bg-accentLight;
@@ -424,48 +423,39 @@ pre.ace_editor {
@apply before:z-20; @apply before:z-20;
@apply before:transition; @apply before:transition;
@apply before:content-DEFAULT; @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:before:opacity-100;
@apply hover:after:text-accentDark;
} }
.no-splitter .splitpanes__splitter { .no-splitter .splitpanes__splitter {
@apply relative; @apply relative;
@apply bg-primaryLight;
} }
.smart-splitter.splitpanes--vertical > .splitpanes__splitter { .smart-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-1; @apply w-0;
@apply before:-left-0.5; @apply before:-left-0.5;
@apply before:-right-0.5; @apply before:-right-0.5;
@apply before:h-full; @apply before:h-full;
@apply after:content-["\e5d4"]; @apply bg-divider;
} }
.smart-splitter.splitpanes--horizontal > .splitpanes__splitter { .smart-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-1; @apply h-0;
@apply before:-top-0.5; @apply before:-top-0.5;
@apply before:-bottom-0.5; @apply before:-bottom-0.5;
@apply before:w-full; @apply before:w-full;
@apply after:content-["\e5d3"]; @apply bg-divider;
} }
.no-splitter.splitpanes--vertical > .splitpanes__splitter { .no-splitter.splitpanes--vertical > .splitpanes__splitter {
@apply w-0.5; @apply w-0;
@apply pointer-events-none; @apply pointer-events-none;
@apply bg-dividerLight;
} }
.no-splitter.splitpanes--horizontal > .splitpanes__splitter { .no-splitter.splitpanes--horizontal > .splitpanes__splitter {
@apply h-0.5; @apply h-0;
@apply pointer-events-none; @apply pointer-events-none;
@apply bg-dividerLight;
} }
.cm-focused { .cm-focused {
@@ -538,8 +528,16 @@ details[open] summary .indicator {
} }
.env-highlight { .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;
} }
} }

43
packages/hoppscotch-ui/src/assets/scss/themes.scss
View File

@@ -6,16 +6,19 @@
} }
@mixin dark-theme { @mixin dark-theme {
--primary-color: theme("colors.neutral.900"); --primary-color: theme("colors.dark.800");
--primary-light-color: theme("colors.dark.600"); --primary-light-color: theme("colors.dark.600");
--primary-dark-color: theme("colors.neutral.800"); --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-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500"); --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-color: theme("colors.neutral.800");
--divider-light-color: theme("colors.dark.500"); --divider-light-color: theme("colors.dark.500");
--divider-dark-color: theme("colors.dark.300"); --divider-dark-color: theme("colors.dark.300");
--error-color: theme("colors.stone.800"); --error-color: theme("colors.stone.800");
--tooltip-color: theme("colors.neutral.100"); --tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.700"); --popover-color: theme("colors.dark.700");
@@ -24,15 +27,18 @@
@mixin light-theme { @mixin light-theme {
--primary-color: theme("colors.white"); --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-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"); --error-color: theme("colors.yellow.100");
--tooltip-color: theme("colors.neutral.800"); --tooltip-color: theme("colors.neutral.800");
--popover-color: theme("colors.white"); --popover-color: theme("colors.white");
@@ -43,16 +49,19 @@
--primary-color: theme("colors.dark.900"); --primary-color: theme("colors.dark.900");
--primary-light-color: theme("colors.neutral.900"); --primary-light-color: theme("colors.neutral.900");
--primary-dark-color: theme("colors.dark.800"); --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-color: theme("colors.neutral.400");
--secondary-light-color: theme("colors.neutral.500"); --secondary-light-color: theme("colors.neutral.500");
--secondary-dark-color: theme("colors.neutral.100"); --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-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"); --error-color: theme("colors.stone.900");
--tooltip-color: theme("colors.neutral.100"); --tooltip-color: theme("colors.neutral.100");
--popover-color: theme("colors.dark.600"); --popover-color: theme("colors.dark.900");
--editor-theme: "twilight"; --editor-theme: "twilight";
} }
@@ -305,7 +314,3 @@
:root[data-font-size="large"] { :root[data-font-size="large"] {
@include font-large; @include font-large;
} }
.generic {
@apply text-primary text-primaryLight bg-primary;
}