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

refactor(ui): better color names

Browse Source
This commit is contained in:
liyasthomas
2021-06-12 22:16:17 +05:30
parent 58296505a8
commit 2ffd0be03f
55 changed files with 248 additions and 264 deletions
Download Patch File Download Diff File Expand all files Collapse all files

88
assets/scss/styles.scss
View File

@@ -13,8 +13,8 @@ $responsiveWidth: 768px;
} }
::selection { ::selection {
@apply bg-acColor; @apply bg-accent;
@apply text-actColor; @apply text-primary;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
@@ -22,20 +22,20 @@ $responsiveWidth: 768px;
@apply w-2; @apply w-2;
&:hover { &:hover {
@apply bg-bgDarkColor; @apply bg-primaryDark;
} }
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
@apply bg-fgLightColor; @apply bg-secondaryLight;
&:hover { &:hover {
@apply bg-fgColor; @apply bg-secondary;
} }
} }
::placeholder { ::placeholder {
@apply text-fgLightColor; @apply text-secondaryLight;
@apply opacity-25; @apply opacity-25;
} }
@@ -44,8 +44,8 @@ html {
} }
body { body {
@apply bg-bgColor; @apply bg-primary;
@apply text-fgColor; @apply text-secondary;
@apply text-base; @apply text-base;
@apply font-medium; @apply font-medium;
@apply select-none; @apply select-none;
@@ -89,7 +89,7 @@ a {
@apply outline-none; @apply outline-none;
&.link { &.link {
@apply text-acColor; @apply text-accent;
} }
} }
@@ -169,7 +169,7 @@ p {
hr { hr {
@apply border-b; @apply border-b;
@apply border-dashed; @apply border-dashed;
@apply border-brdColor; @apply border-divider;
@apply my-4; @apply my-4;
} }
@@ -187,8 +187,8 @@ hr {
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply bg-ttColor; @apply bg-tooltip;
@apply text-fgColor; @apply text-secondary;
} }
.tooltip-arrow { .tooltip-arrow {
@@ -197,7 +197,7 @@ hr {
@apply border-solid; @apply border-solid;
@apply absolute; @apply absolute;
@apply m-2; @apply m-2;
@apply border-ttColor; @apply border-tooltip;
@apply z-30; @apply z-30;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@@ -274,8 +274,8 @@ hr {
} }
.popover-inner { .popover-inner {
@apply bg-ttColor; @apply bg-tooltip;
@apply text-fgColor; @apply text-secondary;
@apply text-base; @apply text-base;
@apply p-2; @apply p-2;
@apply rounded-lg; @apply rounded-lg;
@@ -301,7 +301,7 @@ hr {
} }
.popover-arrow { .popover-arrow {
@apply border-ttColor; @apply border-tooltip;
} }
} }
@@ -324,7 +324,7 @@ hr {
.info:not(.toasted) { .info:not(.toasted) {
@apply m-4; @apply m-4;
@apply text-fgLightColor; @apply text-secondaryLight;
.material-icons { .material-icons {
@apply align-middle; @apply align-middle;
@@ -337,8 +337,8 @@ button {
@apply items-center; @apply items-center;
@apply justify-center; @apply justify-center;
@apply p-4; @apply p-4;
@apply bg-acColor; @apply bg-accent;
@apply text-actColor; @apply text-primary;
@apply font-bold; @apply font-bold;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@@ -357,16 +357,16 @@ button {
&:not([disabled]):hover, &:not([disabled]):hover,
&:not([disabled]):active, &:not([disabled]):active,
&:not([disabled]):focus { &:not([disabled]):focus {
@apply text-actColor; @apply text-primary;
@apply fill-current; @apply fill-current;
@apply outline-none; @apply outline-none;
box-shadow: inset 0 0 0 2px var(--fg-color); box-shadow: inset 0 0 0 2px var(--secondary-color);
} }
&.icon { &.icon {
@apply bg-transparent; @apply bg-transparent;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply fill-current; @apply fill-current;
@apply outline-none; @apply outline-none;
@apply border-none; @apply border-none;
@@ -375,21 +375,21 @@ button {
&:not([disabled]):hover, &:not([disabled]):hover,
&:not([disabled]):active, &:not([disabled]):active,
&:not([disabled]):focus { &:not([disabled]):focus {
@apply text-fgColor; @apply text-secondary;
@apply fill-current; @apply fill-current;
@apply shadow-none; @apply shadow-none;
} }
} }
&.primary { &.primary {
@apply text-acColor; @apply text-accent;
@apply px-6; @apply px-6;
&:not([disabled]):hover, &:not([disabled]):hover,
&:not([disabled]):active, &:not([disabled]):active,
&:not([disabled]):focus { &:not([disabled]):focus {
@apply bg-acColor; @apply bg-accent;
@apply text-actColor; @apply text-primary;
} }
} }
} }
@@ -422,7 +422,7 @@ section:target {
@keyframes highlight { @keyframes highlight {
50% { 50% {
box-shadow: 0 0 0 2px var(--ac-color); box-shadow: 0 0 0 2px var(--accent-color);
} }
} }
@@ -451,8 +451,8 @@ pre,
code { code {
@apply flex; @apply flex;
@apply p-4; @apply p-4;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply text-fgColor; @apply text-secondary;
@apply font-mono; @apply font-mono;
@apply font-normal; @apply font-normal;
@apply transition; @apply transition;
@@ -466,7 +466,7 @@ code {
&:not([readonly]):not(.ace_editor):hover, &:not([readonly]):not(.ace_editor):hover,
&:not([readonly]):not(.ace_editor):active, &:not([readonly]):not(.ace_editor):active,
&:not([readonly]):not(.ace_editor):focus { &:not([readonly]):not(.ace_editor):focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color); box-shadow: inset 0 0 0 2px var(--secondary-light-color);
} }
} }
@@ -479,7 +479,7 @@ code {
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
box-shadow: inset 0 0 0 2px var(--fg-light-color); box-shadow: inset 0 0 0 2px var(--secondary-light-color);
} }
} }
@@ -518,7 +518,7 @@ pre {
@apply absolute; @apply absolute;
@apply pointer-events-none; @apply pointer-events-none;
@apply font-icon; @apply font-icon;
@apply text-fgLightColor; @apply text-secondaryLight;
content: "\e313"; content: "\e313";
top: 16px; top: 16px;
@@ -538,7 +538,7 @@ select {
} }
option { option {
@apply bg-bgColor; @apply bg-primary;
} }
input[type="checkbox"] { input[type="checkbox"] {
@@ -551,7 +551,7 @@ input[type="checkbox"] {
&::before { &::before {
@apply border; @apply border;
@apply border-fgColor; @apply border-secondary;
@apply rounded-lg; @apply rounded-lg;
@apply inline-flex; @apply inline-flex;
@apply items-center; @apply items-center;
@@ -569,29 +569,29 @@ input[type="checkbox"] {
} }
&:checked + label::before { &:checked + label::before {
@apply bg-acColor; @apply bg-accent;
@apply border-acColor; @apply border-accent;
@apply text-actColor; @apply text-primary;
} }
} }
.error:not(input), .error:not(input),
.disabled:not(input), .disabled:not(input),
[disabled] { [disabled] {
@apply bg-errColor; @apply bg-error;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply fill-current; @apply fill-current;
@apply cursor-not-allowed; @apply cursor-not-allowed;
&.icon { &.icon {
@apply text-errColor; @apply text-error;
@apply fill-current; @apply fill-current;
} }
} }
label { label {
@apply p-4; @apply p-4;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply text-sm; @apply text-sm;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@@ -653,7 +653,7 @@ ol li {
} }
.missing-data-response { .missing-data-response {
@apply text-fgLightColor; @apply text-secondaryLight;
} }
#response-details-wrapper { #response-details-wrapper {
@@ -707,8 +707,8 @@ section {
} }
.toasted.info { .toasted.info {
background-color: var(--ac-color) !important; background-color: var(--accent-color) !important;
color: var(--act-color) !important; color: var(--primary-color) !important;
font-weight: 700 !important; font-weight: 700 !important;
} }

90
assets/scss/themes.scss
View File

@@ -6,116 +6,110 @@
@mixin darkTheme { @mixin darkTheme {
// Background color // Background color
--bg-color: rgba(32, 33, 36, 1); --primary-color: rgba(32, 33, 36, 1);
// Light Background color // Light Background color
--bg-light-color: rgba(255, 255, 255, 0.04); --primary-light-color: rgba(255, 255, 255, 0.04);
// Dark Background color // Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.2); --primary-dark-color: rgba(0, 0, 0, 0.2);
// Text color // Text color
--fg-color: rgba(255, 255, 255, 0.9); --secondary-color: rgba(255, 255, 255, 0.9);
// Light Text color // Light Text color
--fg-light-color: rgba(255, 255, 255, 0.5); --secondary-light-color: rgba(255, 255, 255, 0.5);
// Border color // Border color
--brd-color: rgba(255, 255, 255, 0.05); --divider-color: rgba(255, 255, 255, 0.05);
// Error color // Error color
--err-color: rgba(255, 255, 255, 0.05); --error-color: rgba(255, 255, 255, 0.05);
// Tooltip color // Tooltip color
--tt-color: rgba(48, 48, 48, 1); --tooltip-color: rgba(48, 48, 48, 1);
// Editor theme // Editor theme
--editor-theme: "twilight"; --editor-theme: "twilight";
// Active text color
--act-color: rgba(32, 33, 36, 1);
} }
@mixin lightTheme { @mixin lightTheme {
// Background color // Background color
--bg-color: rgba(255, 255, 255, 1); --primary-color: rgba(255, 255, 255, 1);
// Light Background color // Light Background color
--bg-light-color: rgba(0, 0, 0, 0.05); --primary-light-color: rgba(0, 0, 0, 0.05);
// Dark Background color // Dark Background color
--bg-dark-color: rgba(0, 0, 0, 0.02); --primary-dark-color: rgba(0, 0, 0, 0.02);
// Text color // Text color
--fg-color: rgba(0, 0, 0, 0.9); --secondary-color: rgba(0, 0, 0, 0.9);
// Light Text color // Light Text color
--fg-light-color: rgba(0, 0, 0, 0.6); --secondary-light-color: rgba(0, 0, 0, 0.6);
// Border color // Border color
--brd-color: rgba(0, 0, 0, 0.1); --divider-color: rgba(0, 0, 0, 0.1);
// Error color // Error color
--err-color: rgba(0, 0, 0, 0.1); --error-color: rgba(0, 0, 0, 0.1);
// Tooltip color // Tooltip color
--tt-color: rgba(255, 255, 255, 1); --tooltip-color: rgba(255, 255, 255, 1);
// Editor theme // Editor theme
--editor-theme: "iplastic"; --editor-theme: "iplastic";
// Active text color
--act-color: rgba(255, 255, 255, 1);
} }
@mixin blackTheme { @mixin blackTheme {
// Background color // Background color
--bg-color: rgba(0, 0, 0, 1); --primary-color: rgba(0, 0, 0, 1);
// Light Background color // Light Background color
--bg-light-color: rgba(255, 255, 255, 0.02); --primary-light-color: rgba(255, 255, 255, 0.02);
// Dark Background color // Dark Background color
--bg-dark-color: rgba(255, 255, 255, 0.07); --primary-dark-color: rgba(255, 255, 255, 0.07);
// Text color // Text color
--fg-color: rgba(255, 255, 255, 0.9); --secondary-color: rgba(255, 255, 255, 0.9);
// Light Text color // Light Text color
--fg-light-color: rgba(255, 255, 255, 0.5); --secondary-light-color: rgba(255, 255, 255, 0.5);
// Border color // Border color
--brd-color: rgba(255, 255, 255, 0.11); --divider-color: rgba(255, 255, 255, 0.11);
// Error color // Error color
--err-color: rgba(255, 255, 255, 0.05); --error-color: rgba(255, 255, 255, 0.05);
// Tooltip color // Tooltip color
--tt-color: rgba(32, 32, 32, 1); --tooltip-color: rgba(32, 32, 32, 1);
// Editor theme // Editor theme
--editor-theme: "vibrant_ink"; --editor-theme: "vibrant_ink";
// Active text color
--act-color: rgba(0, 0, 0, 1);
} }
@mixin blueTheme { @mixin blueTheme {
// Acent color // Accent color
--ac-color: theme("colors.blue.400"); --accent-color: theme("colors.blue.400");
} }
@mixin greenTheme { @mixin greenTheme {
// Acent color // Accent color
--ac-color: theme("colors.green.400"); --accent-color: theme("colors.green.400");
} }
@mixin tealTheme { @mixin tealTheme {
// Acent color // Accent color
--ac-color: theme("colors.teal.400"); --accent-color: theme("colors.teal.400");
} }
@mixin indigoTheme { @mixin indigoTheme {
// Acent color // Accent color
--ac-color: theme("colors.indigo.400"); --accent-color: theme("colors.indigo.400");
} }
@mixin purpleTheme { @mixin purpleTheme {
// Acent color // Accent color
--ac-color: theme("colors.purple.400"); --accent-color: theme("colors.purple.400");
} }
@mixin orangeTheme { @mixin orangeTheme {
// Acent color // Accent color
--ac-color: theme("colors.orange.400"); --accent-color: theme("colors.orange.400");
} }
@mixin pinkTheme { @mixin pinkTheme {
// Acent color // Accent color
--ac-color: theme("colors.pink.400"); --accent-color: theme("colors.pink.400");
} }
@mixin redTheme { @mixin redTheme {
// Acent color // Accent color
--ac-color: theme("colors.red.400"); --accent-color: theme("colors.red.400");
} }
@mixin yellowTheme { @mixin yellowTheme {
// Acent color // Accent color
--ac-color: theme("colors.yellow.400"); --accent-color: theme("colors.yellow.400");
} }
:root { :root {

4
components/app/Footer.vue
View File

@@ -87,11 +87,11 @@ export default {
@apply flex-shrink-0; @apply flex-shrink-0;
@apply my-2; @apply my-2;
@apply mx-4; @apply mx-4;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply text-sm; @apply text-sm;
&:hover { &:hover {
@apply text-fgColor; @apply text-secondary;
} }
} }
</style> </style>

4
components/app/Header.vue
View File

@@ -30,7 +30,7 @@
font-mono font-mono
text-sm text-sm
rounded-md rounded-md
bg-bgDarkColor bg-primaryDark
hide-on-small-screen hide-on-small-screen
" "
> >
@@ -309,7 +309,7 @@ $responsiveWidth: 768px;
@apply duration-150; @apply duration-150;
&:hover { &:hover {
@apply text-acColor; @apply text-accent;
} }
} }

4
components/app/Section.vue
View File

@@ -55,7 +55,7 @@ export default Vue.extend({
fieldset { fieldset {
@apply my-4; @apply my-4;
@apply rounded-lg; @apply rounded-lg;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@@ -63,7 +63,7 @@ fieldset {
legend { legend {
@apply px-4; @apply px-4;
@apply text-fgColor; @apply text-secondary;
@apply font-bold; @apply font-bold;
@apply cursor-pointer; @apply cursor-pointer;
@apply transition; @apply transition;

31
components/app/Sidenav.vue
View File

@@ -160,7 +160,7 @@ $responsiveWidth: 768px;
@apply z-10; @apply z-10;
@apply h-screen; @apply h-screen;
@apply p-2; @apply p-2;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@@ -187,16 +187,19 @@ nav.primary-nav {
@apply flex-shrink-0; @apply flex-shrink-0;
@apply p-4; @apply p-4;
@apply rounded-full; @apply rounded-full;
@apply bg-bgLightColor; @apply bg-primaryLight;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply fill-current; @apply fill-current;
@apply outline-none; @apply outline-none;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
border-radius: 50%;
transition-property: all !important;
&:hover { &:hover {
@apply text-fgColor; @apply text-secondary;
@apply fill-current; @apply fill-current;
svg { svg {
@@ -205,8 +208,8 @@ nav.primary-nav {
} }
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
@apply bg-acColor; @apply bg-accent;
@apply text-actColor; @apply text-primary;
@apply fill-current; @apply fill-current;
border-radius: 16px; border-radius: 16px;
@@ -231,7 +234,7 @@ nav.secondary-nav {
@apply justify-center; @apply justify-center;
@apply border-t-2; @apply border-t-2;
@apply border-dashed; @apply border-dashed;
@apply border-brdColor; @apply border-divider;
@apply pt-2; @apply pt-2;
@apply space-y-2; @apply space-y-2;
@@ -242,8 +245,8 @@ nav.secondary-nav {
@apply flex-shrink-0; @apply flex-shrink-0;
@apply p-4; @apply p-4;
@apply rounded-full; @apply rounded-full;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply fill-current; @apply fill-current;
@apply outline-none; @apply outline-none;
@apply transition; @apply transition;
@@ -251,12 +254,12 @@ nav.secondary-nav {
@apply duration-150; @apply duration-150;
&:hover { &:hover {
@apply text-fgColor; @apply text-secondary;
@apply fill-current; @apply fill-current;
} }
&.current { &.current {
@apply text-acColor; @apply text-accent;
@apply fill-current; @apply fill-current;
} }
} }
@@ -270,7 +273,7 @@ nav.secondary-nav {
@apply h-auto; @apply h-auto;
@apply p-0; @apply p-0;
@apply w-full; @apply w-full;
@apply bg-bgColor; @apply bg-primary;
@apply shadow-2xl; @apply shadow-2xl;
} }
@@ -278,7 +281,7 @@ nav.secondary-nav {
@apply flex-row; @apply flex-row;
@apply flex-nowrap; @apply flex-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply space-y-0; @apply space-y-0;
padding-bottom: env(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);
@@ -290,7 +293,7 @@ nav.secondary-nav {
&.nuxt-link-exact-active { &.nuxt-link-exact-active {
@apply bg-transparent; @apply bg-transparent;
@apply text-acColor; @apply text-accent;
@apply fill-current; @apply fill-current;
svg { svg {

8
components/collections/graphql/Collection.vue
View File

@@ -3,7 +3,7 @@
<div <div
:class="[ :class="[
'row-wrapper transition duration-150 ease-in-out', 'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging }, { 'bg-primaryDark': dragging },
]" ]"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@@ -84,7 +84,7 @@
<li <li
v-for="(folder, index) in collection.folders" v-for="(folder, index) in collection.folders"
:key="folder.name" :key="folder.name"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsGraphqlFolder <CollectionsGraphqlFolder
:picked="picked" :picked="picked"
@@ -106,7 +106,7 @@
<li <li
v-for="(request, index) in collection.requests" v-for="(request, index) in collection.requests"
:key="index" :key="index"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsGraphqlRequest <CollectionsGraphqlRequest
:picked="picked" :picked="picked"
@@ -128,7 +128,7 @@
v-if=" v-if="
collection.folders.length === 0 && collection.requests.length === 0 collection.folders.length === 0 && collection.requests.length === 0
" "
class="flex ml-8 border-l border-brdColor" class="flex ml-8 border-l border-divider"
> >
<p class="info"> <p class="info">
<i class="material-icons">not_interested</i> <i class="material-icons">not_interested</i>

8
components/collections/graphql/Folder.vue
View File

@@ -3,7 +3,7 @@
<div <div
:class="[ :class="[
'row-wrapper transition duration-150 ease-in-out', 'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging }, { 'bg-primaryDark': dragging },
]" ]"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@@ -67,7 +67,7 @@
<li <li
v-for="(subFolder, subFolderIndex) in folder.folders" v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name" :key="subFolder.name"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsGraphqlFolder <CollectionsGraphqlFolder
:picked="picked" :picked="picked"
@@ -89,7 +89,7 @@
<li <li
v-for="(request, index) in folder.requests" v-for="(request, index) in folder.requests"
:key="index" :key="index"
class="flex ml-8 border-l border-brdColor" class="flex ml-8 border-l border-divider"
> >
<CollectionsGraphqlRequest <CollectionsGraphqlRequest
:picked="picked" :picked="picked"
@@ -114,7 +114,7 @@
folder.requests.length === 0 folder.requests.length === 0
" "
> >
<li class="flex ml-8 border-l border-brdColor"> <li class="flex ml-8 border-l border-divider">
<p class="info"> <p class="info">
<i class="material-icons">not_interested</i> <i class="material-icons">not_interested</i>
{{ $t("folder_empty") }} {{ $t("folder_empty") }}

2
components/collections/graphql/Request.vue
View File

@@ -3,7 +3,7 @@
<div <div
:class="[ :class="[
'row-wrapper transition duration-150 ease-in-out', 'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging }, { 'bg-primaryDark': dragging },
]" ]"
draggable="true" draggable="true"
@dragstart="dragStart" @dragstart="dragStart"

2
components/collections/graphql/index.vue
View File

@@ -49,7 +49,7 @@
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="border-b row-wrapper border-brdColor"> <div class="border-b row-wrapper border-divider">
<button <button
v-if="showCollActions" v-if="showCollActions"
class="icon" class="icon"

2
components/collections/index.vue
View File

@@ -52,7 +52,7 @@
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
@update-team-collections="updateTeamCollections" @update-team-collections="updateTeamCollections"
/> />
<div class="border-b row-wrapper border-brdColor"> <div class="border-b row-wrapper border-divider">
<button <button
v-if=" v-if="
collectionsType.type == 'team-collections' && collectionsType.type == 'team-collections' &&

8
components/collections/my/Collection.vue
View File

@@ -3,7 +3,7 @@
<div <div
:class="[ :class="[
'row-wrapper transition duration-150 ease-in-out', 'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging }, { 'bg-primaryDark': dragging },
]" ]"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@@ -93,7 +93,7 @@
<li <li
v-for="(folder, index) in collection.folders" v-for="(folder, index) in collection.folders"
:key="index" :key="index"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsMyFolder <CollectionsMyFolder
:folder="folder" :folder="folder"
@@ -117,7 +117,7 @@
<li <li
v-for="(request, index) in collection.requests" v-for="(request, index) in collection.requests"
:key="index" :key="index"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsMyRequest <CollectionsMyRequest
:request="request" :request="request"
@@ -144,7 +144,7 @@
(collection.requests == undefined || (collection.requests == undefined ||
collection.requests.length === 0) collection.requests.length === 0)
" "
class="flex ml-8 border-l border-brdColor" class="flex ml-8 border-l border-divider"
> >
<p class="info"> <p class="info">
<i class="material-icons">not_interested</i> <i class="material-icons">not_interested</i>

8
components/collections/my/Folder.vue
View File

@@ -3,7 +3,7 @@
<div <div
:class="[ :class="[
'row-wrapper transition duration-150 ease-in-out', 'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging }, { 'bg-primaryDark': dragging },
]" ]"
@dragover.prevent @dragover.prevent
@drop.prevent="dropEvent" @drop.prevent="dropEvent"
@@ -73,7 +73,7 @@
<li <li
v-for="(subFolder, subFolderIndex) in folder.folders" v-for="(subFolder, subFolderIndex) in folder.folders"
:key="subFolder.name" :key="subFolder.name"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsMyFolder <CollectionsMyFolder
:folder="subFolder" :folder="subFolder"
@@ -97,7 +97,7 @@
<li <li
v-for="(request, index) in folder.requests" v-for="(request, index) in folder.requests"
:key="index" :key="index"
class="flex ml-8 border-l border-brdColor" class="flex ml-8 border-l border-divider"
> >
<CollectionsMyRequest <CollectionsMyRequest
:request="request" :request="request"
@@ -124,7 +124,7 @@
folder.requests.length === 0 folder.requests.length === 0
" "
> >
<li class="flex ml-8 border-l border-brdColor"> <li class="flex ml-8 border-l border-divider">
<p class="info"> <p class="info">
<i class="material-icons">not_interested</i> <i class="material-icons">not_interested</i>
{{ $t("folder_empty") }} {{ $t("folder_empty") }}

2
components/collections/my/Request.vue
View File

@@ -3,7 +3,7 @@
<div <div
:class="[ :class="[
'row-wrapper transition duration-150 ease-in-out', 'row-wrapper transition duration-150 ease-in-out',
{ 'bg-bgDarkColor': dragging }, { 'bg-primaryDark': dragging },
]" ]"
draggable="true" draggable="true"
@dragstart="dragStart" @dragstart="dragStart"

6
components/collections/teams/Collection.vue
View File

@@ -89,7 +89,7 @@
<li <li
v-for="(folder, index) in collection.children" v-for="(folder, index) in collection.children"
:key="folder.title" :key="folder.title"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsTeamsFolder <CollectionsTeamsFolder
:folder="folder" :folder="folder"
@@ -114,7 +114,7 @@
<li <li
v-for="(request, index) in collection.requests" v-for="(request, index) in collection.requests"
:key="index" :key="index"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsTeamsRequest <CollectionsTeamsRequest
:request="request.request" :request="request.request"
@@ -140,7 +140,7 @@
(collection.requests == undefined || (collection.requests == undefined ||
collection.requests.length === 0) collection.requests.length === 0)
" "
class="flex ml-8 border-l border-brdColor" class="flex ml-8 border-l border-divider"
> >
<p class="info"> <p class="info">
<i class="material-icons">not_interested</i> <i class="material-icons">not_interested</i>

6
components/collections/teams/Folder.vue
View File

@@ -75,7 +75,7 @@
<li <li
v-for="(subFolder, subFolderIndex) in folder.children" v-for="(subFolder, subFolderIndex) in folder.children"
:key="subFolder.name" :key="subFolder.name"
class="ml-8 border-l border-brdColor" class="ml-8 border-l border-divider"
> >
<CollectionsTeamsFolder <CollectionsTeamsFolder
:folder="subFolder" :folder="subFolder"
@@ -100,7 +100,7 @@
<li <li
v-for="(request, index) in folder.requests" v-for="(request, index) in folder.requests"
:key="index" :key="index"
class="flex ml-8 border-l border-brdColor" class="flex ml-8 border-l border-divider"
> >
<CollectionsTeamsRequest <CollectionsTeamsRequest
:request="request.request" :request="request.request"
@@ -124,7 +124,7 @@
(folder.requests == undefined || folder.requests.length === 0) (folder.requests == undefined || folder.requests.length === 0)
" "
> >
<li class="flex ml-8 border-l border-brdColor"> <li class="flex ml-8 border-l border-divider">
<p class="info"> <p class="info">
<i class="material-icons">not_interested</i> <i class="material-icons">not_interested</i>
{{ $t("folder_empty") }} {{ $t("folder_empty") }}

2
components/docs/Folder.vue
View File

@@ -29,7 +29,7 @@ export default {
@apply flex-1; @apply flex-1;
@apply p-4; @apply p-4;
@apply border-l; @apply border-l;
@apply border-brdColor; @apply border-divider;
@apply mt-4; @apply mt-4;
.material-icons { .material-icons {

6
components/docs/Request.vue
View File

@@ -117,7 +117,7 @@ export default {
@apply flex-1; @apply flex-1;
@apply p-4; @apply p-4;
@apply border; @apply border;
@apply border-brdColor; @apply border-divider;
@apply rounded-lg; @apply rounded-lg;
@apply mt-4; @apply mt-4;
@@ -136,10 +136,10 @@ export default {
@apply justify-center; @apply justify-center;
@apply flex-1; @apply flex-1;
@apply p-4; @apply p-4;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply border-b; @apply border-b;
@apply border-dashed; @apply border-dashed;
@apply border-brdColor; @apply border-divider;
@apply m-0; @apply m-0;
&:last-child { &:last-child {

4
components/environments/Edit.vue
View File

@@ -38,8 +38,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"

2
components/environments/index.vue
View File

@@ -40,7 +40,7 @@
:show="showModalImportExport" :show="showModalImportExport"
@hide-modal="displayModalImportExport(false)" @hide-modal="displayModalImportExport(false)"
/> />
<div class="border-b row-wrapper border-brdColor"> <div class="border-b row-wrapper border-divider">
<div> <div>
<button class="icon" @click="displayModalAdd(true)"> <button class="icon" @click="displayModalAdd(true)">
<i class="material-icons">add</i> <i class="material-icons">add</i>

2
components/firebase/Email.vue
View File

@@ -27,7 +27,7 @@
</div> </div>
<div v-else slot="body" class="flex flex-col items-center"> <div v-else slot="body" class="flex flex-col items-center">
<div class="flex justify-center max-w-md p-4 items-center flex-col"> <div class="flex justify-center max-w-md p-4 items-center flex-col">
<i class="material-icons text-acColor" style="font-size: 64px"> <i class="material-icons text-accent" style="font-size: 64px">
verified verified
</i> </i>
<h3 class="font-bold my-2 text-center text-lg"> <h3 class="font-bold my-2 text-center text-lg">

2
components/firebase/Feeds.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<div <div
v-if="fb.currentFeeds.length !== 0" v-if="fb.currentFeeds.length !== 0"
class="divide-y virtual-list divide-dashed divide-brdColor" class="divide-y virtual-list divide-dashed divide-divider"
> >
<ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col"> <ul v-for="feed in fb.currentFeeds" :key="feed.id" class="flex-col">
<div data-test="list-item" class="show-on-large-screen"> <div data-test="list-item" class="show-on-large-screen">

2
components/firebase/Inputform.vue
View File

@@ -11,7 +11,7 @@
@keyup.enter="formPost" @keyup.enter="formPost"
/> />
</div> </div>
<div class="border-b show-on-large-screen border-brdColor"> <div class="border-b show-on-large-screen border-divider">
<input <input
v-model="label" v-model="label"
:aria-label="$t('label')" :aria-label="$t('label')"

13
components/graphql/Field.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<div class="p-2 m-2 border-b border-dashed border-brdColor"> <div class="p-2 m-2 border-b border-dashed border-divider">
<div class="field-title" :class="{ 'field-highlighted': isHighlighted }"> <div class="field-title" :class="{ 'field-highlighted': isHighlighted }">
{{ fieldName }} {{ fieldName }}
<span v-if="fieldArgs.length > 0"> <span v-if="fieldArgs.length > 0">
@@ -19,7 +19,10 @@
:jump-type-callback="jumpTypeCallback" :jump-type-callback="jumpTypeCallback"
/> />
</div> </div>
<div v-if="gqlField.description" class="mt-2 text-fgLightColor field-desc"> <div
v-if="gqlField.description"
class="mt-2 text-secondaryLight field-desc"
>
{{ gqlField.description }} {{ gqlField.description }}
</div> </div>
<div <div
@@ -41,7 +44,7 @@
</div> </div>
<div v-if="fieldArgs.length > 0"> <div v-if="fieldArgs.length > 0">
<h5 class="my-2 text-xs">ARGUMENTS:</h5> <h5 class="my-2 text-xs">ARGUMENTS:</h5>
<div class="px-4 border-l-2 border-acColor"> <div class="px-4 border-l-2 border-accent">
<div v-for="(field, index) in fieldArgs" :key="index"> <div v-for="(field, index) in fieldArgs" :key="index">
{{ field.name }}: {{ field.name }}:
<GraphqlTypeLink <GraphqlTypeLink
@@ -50,7 +53,7 @@
/> />
<div <div
v-if="field.description" v-if="field.description"
class="mt-2 text-fgLightColor field-desc" class="mt-2 text-secondaryLight field-desc"
> >
{{ field.description }} {{ field.description }}
</div> </div>
@@ -82,6 +85,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.field-highlighted { .field-highlighted {
@apply border-b-2; @apply border-b-2;
@apply border-acColor; @apply border-accent;
} }
</style> </style>

10
components/graphql/Type.vue
View File

@@ -4,14 +4,14 @@
class="font-bold type-title" class="font-bold type-title"
:class="{ 'type-highlighted': isHighlighted }" :class="{ 'type-highlighted': isHighlighted }"
> >
<span v-if="isInput" class="font-normal text-acColor">input </span> <span v-if="isInput" class="font-normal text-accent">input </span>
<span v-else-if="isInterface" class="font-normal text-acColor" <span v-else-if="isInterface" class="font-normal text-accent"
>interface >interface
</span> </span>
<span v-else-if="isEnum" class="font-normal text-acColor">enum </span> <span v-else-if="isEnum" class="font-normal text-accent">enum </span>
{{ gqlType.name }} {{ gqlType.name }}
</div> </div>
<div v-if="gqlType.description" class="mt-2 text-fgLightColor type-desc"> <div v-if="gqlType.description" class="mt-2 text-secondaryLight type-desc">
{{ gqlType.description }} {{ gqlType.description }}
</div> </div>
<div v-if="interfaces.length > 0" class="mb-2"> <div v-if="interfaces.length > 0" class="mb-2">
@@ -104,6 +104,6 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.type-highlighted { .type-highlighted {
@apply text-acColor; @apply text-accent;
} }
</style> </style>

2
components/graphql/TypeLink.vue
View File

@@ -1,7 +1,7 @@
<template> <template>
<span <span
:class="{ 'cursor-pointer': !isScalar }" :class="{ 'cursor-pointer': !isScalar }"
class="font-mono font-normal text-acColor" class="font-mono font-normal text-accent"
@click="jumpToType" @click="jumpToType"
> >
{{ typeString }} {{ typeString }}

8
components/history/graphql/Card.vue
View File

@@ -82,7 +82,7 @@
type="text" type="text"
readonly readonly
:value="`${line}`" :value="`${line}`"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> </li>
</div> </div>
@@ -95,7 +95,7 @@
type="text" type="text"
readonly readonly
:value="entry.time" :value="entry.time"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> </li>
<li> <li>
@@ -105,7 +105,7 @@
readonly readonly
:value="`Duration: ${entry.duration}ms`" :value="`Duration: ${entry.duration}ms`"
:placeholder="$t('no_duration')" :placeholder="$t('no_duration')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> </li>
<!-- <li> <!-- <li>
@@ -115,7 +115,7 @@
readonly readonly
:value="entry.preRequestScript" :value="entry.preRequestScript"
:placeholder="$t('no_prerequest_script')" :placeholder="$t('no_prerequest_script')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> --> </li> -->
</div> </div>

4
components/history/index.vue
View File

@@ -10,7 +10,7 @@
/> />
</div> </div>
<div <div
class="divide-y virtual-list divide-dashed divide-brdColor" class="divide-y virtual-list divide-dashed divide-divider"
:class="{ filled: filteredHistory.length }" :class="{ filled: filteredHistory.length }"
> >
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`"> <ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
@@ -42,7 +42,7 @@
<p v-if="history.length === 0" class="info"> <p v-if="history.length === 0" class="info">
<i class="material-icons">schedule</i> {{ $t("history_empty") }} <i class="material-icons">schedule</i> {{ $t("history_empty") }}
</p> </p>
<div v-if="history.length !== 0" class="rounded-b-lg bg-bgDarkColor"> <div v-if="history.length !== 0" class="rounded-b-lg bg-primaryDark">
<div v-if="!isClearingHistory" class="row-wrapper"> <div v-if="!isClearingHistory" class="row-wrapper">
<button <button
data-testid="clear_history" data-testid="clear_history"

8
components/history/rest/Card.vue
View File

@@ -87,7 +87,7 @@
readonly readonly
:value="`${entry.url}${entry.path}`" :value="`${entry.url}${entry.path}`"
:placeholder="$t('no_url')" :placeholder="$t('no_url')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> </li>
</div> </div>
@@ -100,7 +100,7 @@
type="text" type="text"
readonly readonly
:value="entry.time" :value="entry.time"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> </li>
<li> <li>
@@ -110,7 +110,7 @@
readonly readonly
:value="`Duration: ${entry.duration}ms`" :value="`Duration: ${entry.duration}ms`"
:placeholder="$t('no_duration')" :placeholder="$t('no_duration')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> </li>
<!-- <li> <!-- <li>
@@ -120,7 +120,7 @@
readonly readonly
:value="entry.preRequestScript" :value="entry.preRequestScript"
:placeholder="$t('no_prerequest_script')" :placeholder="$t('no_prerequest_script')"
class="pt-0 mt-0 text-sm bg-transparent text-fgLightColor" class="pt-0 mt-0 text-sm bg-transparent text-secondaryLight"
/> />
</li> --> </li> -->
</div> </div>

6
components/http/BodyParameters.vue
View File

@@ -23,8 +23,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
@@ -238,7 +238,7 @@ export default {
@apply flex-1; @apply flex-1;
@apply whitespace-nowrap; @apply whitespace-nowrap;
@apply overflow-auto; @apply overflow-auto;
@apply bg-bgDarkColor; @apply bg-primaryDark;
.file-chips-wrapper { .file-chips-wrapper {
@apply flex; @apply flex;

4
components/http/Headers.vue
View File

@@ -23,8 +23,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"

4
components/http/Parameters.vue
View File

@@ -23,8 +23,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"

4
components/realtime/Log.vue
View File

@@ -43,8 +43,8 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
.realtime-log { .realtime-log {
@apply p-4; @apply p-4;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply text-fgColor; @apply text-secondary;
@apply overflow-auto; @apply overflow-auto;
height: 256px; height: 256px;

12
components/realtime/Mqtt.vue
View File

@@ -57,7 +57,7 @@
v-model="msg" v-model="msg"
type="text" type="text"
spellcheck="false" spellcheck="false"
class="border-dashed md:border-l border-brdColor" class="border-dashed md:border-l border-divider"
/> />
</li> </li>
<div> <div>
@@ -172,7 +172,7 @@ export default {
{ {
payload: this.$t("connecting_to", { name: this.url }), payload: this.$t("connecting_to", { name: this.url }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}, },
] ]
@@ -204,7 +204,7 @@ export default {
this.log.push({ this.log.push({
payload: this.$t("connected_to", { name: this.url }), payload: this.$t("connected_to", { name: this.url }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}) })
this.$toast.success(this.$t("connected"), { this.$toast.success(this.$t("connected"), {
@@ -215,7 +215,7 @@ export default {
this.log.push({ this.log.push({
payload: `Message: ${payloadString} arrived on topic: ${destinationName}`, payload: `Message: ${payloadString} arrived on topic: ${destinationName}`,
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}) })
}, },
@@ -257,7 +257,7 @@ export default {
payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`, payload: `Published message: ${this.msg} to topic: ${this.pub_topic}`,
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
}) })
} catch (e) { } catch (e) {
this.log.push({ this.log.push({
@@ -302,7 +302,7 @@ export default {
(this.subscriptionState ? "subscribed" : "unsubscribed") + (this.subscriptionState ? "subscribed" : "unsubscribed") +
` to topic: ${this.sub_topic}`, ` to topic: ${this.sub_topic}`,
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}) })
}, },

8
components/realtime/Socketio.vue
View File

@@ -81,8 +81,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
> >
@@ -197,7 +197,7 @@ export default {
{ {
payload: this.$t("connecting_to", { name: this.url }), payload: this.$t("connecting_to", { name: this.url }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
}, },
] ]
@@ -216,7 +216,7 @@ export default {
{ {
payload: this.$t("connected_to", { name: this.url }), payload: this.$t("connected_to", { name: this.url }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}, },
] ]

4
components/realtime/Sse.vue
View File

@@ -105,7 +105,7 @@ export default {
{ {
payload: this.$t("connecting_to", { name: this.server }), payload: this.$t("connecting_to", { name: this.server }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
}, },
] ]
if (typeof EventSource !== "undefined") { if (typeof EventSource !== "undefined") {
@@ -117,7 +117,7 @@ export default {
{ {
payload: this.$t("connected_to", { name: this.server }), payload: this.$t("connected_to", { name: this.server }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}, },
] ]

4
components/realtime/Websocket.vue
View File

@@ -139,7 +139,7 @@ export default {
{ {
payload: this.$t("connecting_to", { name: this.url }), payload: this.$t("connecting_to", { name: this.url }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
}, },
] ]
try { try {
@@ -150,7 +150,7 @@ export default {
{ {
payload: this.$t("connected_to", { name: this.url }), payload: this.$t("connected_to", { name: this.url }),
source: "info", source: "info",
color: "var(--ac-color)", color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(), ts: new Date().toLocaleTimeString(),
}, },
] ]

2
components/smart/AccentModePicker.vue
View File

@@ -29,7 +29,7 @@
cursor-pointer cursor-pointer
hover:shadow-none hover:shadow-none
" "
:class="[`text-${color}-400`, { 'bg-actColor': color === active }]" :class="[`text-${color}-400`, { 'bg-primary': color === active }]"
@click="setActiveColor(color)" @click="setActiveColor(color)"
> >
<i class="material-icons">lens</i> <i class="material-icons">lens</i>

12
components/smart/AceEditor.vue
View File

@@ -270,11 +270,11 @@ export default {
@apply items-center; @apply items-center;
@apply flex-grow-0; @apply flex-grow-0;
@apply flex-shrink-0; @apply flex-shrink-0;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply text-sm; @apply text-sm;
&:hover { &:hover {
@apply text-fgColor; @apply text-secondary;
@apply cursor-pointer; @apply cursor-pointer;
} }
@@ -289,11 +289,11 @@ export default {
@apply absolute; @apply absolute;
@apply z-50; @apply z-50;
@apply top-9; @apply top-9;
@apply bg-bgColor; @apply bg-primary;
@apply max-h-60; @apply max-h-60;
@apply overflow-auto; @apply overflow-auto;
@apply shadow-lg; @apply shadow-lg;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply overscroll-none; @apply overscroll-none;
border-radius: 0 0 8px 8px; border-radius: 0 0 8px 8px;
@@ -304,8 +304,8 @@ export default {
@apply py-1; @apply py-1;
&:hover { &:hover {
@apply text-fgColor; @apply text-secondary;
@apply bg-bgLightColor; @apply bg-primaryLight;
} }
} }
} }

6
components/smart/AutoComplete.vue
View File

@@ -194,7 +194,7 @@ export default {
ul.suggestions { ul.suggestions {
@apply hidden; @apply hidden;
@apply bg-actColor; @apply bg-primary;
@apply absolute; @apply absolute;
@apply mx-2; @apply mx-2;
@apply left-0; @apply left-0;
@@ -222,8 +222,8 @@ export default {
&:hover, &:hover,
&.active { &.active {
@apply bg-acColor; @apply bg-accent;
@apply text-actColor; @apply text-primary;
@apply cursor-pointer; @apply cursor-pointer;
} }
} }

8
components/smart/ColorModePicker.vue
View File

@@ -30,12 +30,12 @@
rounded-full rounded-full
cursor-pointer cursor-pointer
border-collapseer-2 border-collapseer-2
text-fgLightColor text-secondaryLight
hover:text-fgColor hover:text-secondary
" "
:class="[ :class="[
{ 'bg-actColor': color === $colorMode.preference }, { 'bg-primary': color === $colorMode.preference },
{ 'text-acColor hover:text-acColor': color === $colorMode.value }, { 'text-accent hover:text-accent': color === $colorMode.value },
]" ]"
@click="$colorMode.preference = color" @click="$colorMode.preference = color"
> >

6
components/smart/DeletableChip.vue
View File

@@ -15,15 +15,15 @@
@apply rounded-lg; @apply rounded-lg;
@apply m-1; @apply m-1;
@apply pl-4; @apply pl-4;
@apply bg-bgDarkColor; @apply bg-primaryDark;
@apply text-fgColor; @apply text-secondary;
@apply font-mono; @apply font-mono;
@apply font-normal; @apply font-normal;
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply border; @apply border;
@apply border-brdColor; @apply border-divider;
} }
.close-button { .close-button {

6
components/smart/HideMenu.vue
View File

@@ -9,9 +9,9 @@
justify-center justify-center
px-2 px-2
py-1 py-1
bg-brdColor bg-divider
text-fgLightColor text-secondaryLight
hover:text-fgColor hover:text-secondary
my-4 my-4
z-10 z-10
rounded-l rounded-l

8
components/smart/Modal.vue
View File

@@ -63,11 +63,11 @@ export default {
@apply transition; @apply transition;
@apply ease-in-out; @apply ease-in-out;
@apply duration-150; @apply duration-150;
@apply bg-bgColor; @apply bg-primary;
@apply rounded-lg; @apply rounded-lg;
@apply shadow-2xl; @apply shadow-2xl;
@apply border; @apply border;
@apply border-ttColor; @apply border-tooltip;
max-height: calc(100vh - 128px); max-height: calc(100vh - 128px);
max-width: 640px; max-width: 640px;
@@ -121,12 +121,12 @@ export default {
&.top { &.top {
top: 68px; top: 68px;
background: linear-gradient(to bottom, var(--bg-color), transparent); background: linear-gradient(to bottom, var(--primary-color), transparent);
} }
&.bottom { &.bottom {
bottom: 16px; bottom: 16px;
background: linear-gradient(to top, var(--bg-color), transparent); background: linear-gradient(to top, var(--primary-color), transparent);
} }
} }
</style> </style>

10
components/smart/Tabs.vue
View File

@@ -83,7 +83,7 @@ export default {
@apply justify-center; @apply justify-center;
@apply py-2; @apply py-2;
@apply px-4; @apply px-4;
@apply text-fgLightColor; @apply text-secondaryLight;
@apply text-sm; @apply text-sm;
@apply rounded-lg; @apply rounded-lg;
@apply cursor-pointer; @apply cursor-pointer;
@@ -96,17 +96,17 @@ export default {
} }
&:hover { &:hover {
@apply text-fgColor; @apply text-secondary;
} }
} }
&:focus a { &:focus a {
@apply text-fgColor; @apply text-secondary;
} }
&.is-active a { &.is-active a {
@apply bg-brdColor; @apply bg-divider;
@apply text-fgColor; @apply text-secondary;
} }
} }
} }

10
components/smart/Toggle.vue
View File

@@ -29,11 +29,11 @@ export default {
<style scoped lang="scss"> <style scoped lang="scss">
$useBorder: false; $useBorder: false;
$borderColor: var(--fg-light-color); $borderColor: var(--secondary-light-color);
$activeColor: var(--ac-color); $activeColor: var(--accent-color);
$inactiveColor: var(--fg-light-color); $inactiveColor: var(--secondary-light-color);
$inactiveHandleColor: var(--bg-color); $inactiveHandleColor: var(--primary-color);
$activeHandleColor: var(--act-color); $activeHandleColor: var(--primary-color);
$width: 32px; $width: 32px;
$height: 16px; $height: 16px;
$handleSpacing: 4px; $handleSpacing: 4px;

4
components/smart/UrlField.vue
View File

@@ -392,14 +392,14 @@ export default {
<style lang="scss"> <style lang="scss">
.VAR { .VAR {
@apply font-bold; @apply font-bold;
@apply text-acColor; @apply text-accent;
} }
.url-field-container { .url-field-container {
@apply inline-grid; @apply inline-grid;
} }
.url-field { .url-field {
@apply border-dashed; @apply border-dashed;
@apply border-brdColor; @apply border-divider;
@apply whitespace-nowrap; @apply whitespace-nowrap;
@apply overflow-x-auto; @apply overflow-x-auto;
@apply resize-none; @apply resize-none;

8
components/teams/Edit.vue
View File

@@ -40,8 +40,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"
@@ -119,8 +119,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
> >

13
components/teams/Team.vue
View File

@@ -101,16 +101,3 @@ export default {
}, },
} }
</script> </script>
<style scoped lang="scss">
ul {
display: flex;
flex-direction: column;
}
ul li {
display: flex;
padding-left: 16px;
border-left: 1px solid var(--brd-color);
}
</style>

2
helpers/teams/TeamMemberAdapter.ts
View File

@@ -75,8 +75,6 @@ export default class TeamMemberAdapter {
}, },
}) })
debugger
result.push(...response.data.team.members) result.push(...response.data.team.members)
if ((response.data.team.members as any[]).length === 0) break if ((response.data.team.members as any[]).length === 0) break

2
layouts/error.vue
View File

@@ -2,7 +2,7 @@
<div class="page page-error"> <div class="page page-error">
<h1 class="mb-4 font-mono text-4xl">{{ statusCode }}</h1> <h1 class="mb-4 font-mono text-4xl">{{ statusCode }}</h1>
<h3 class="mb-4 font-mono text-xs">{{ message }}</h3> <h3 class="mb-4 font-mono text-xs">{{ message }}</h3>
<p class="mt-4 border-t border-ttColor"> <p class="mt-4 border-t border-tooltip">
<nuxt-link to="/"> <nuxt-link to="/">
<button class="icon"> <button class="icon">
<i class="material-icons">home</i> <i class="material-icons">home</i>

4
nuxt.config.js
View File

@@ -7,8 +7,8 @@ export const options = {
description: description:
"Helps you create requests faster, saving precious time on development.", "Helps you create requests faster, saving precious time on development.",
loading: { loading: {
color: "var(--ac-color)", color: "var(--accent-color)",
background: "var(--bg-color)", background: "var(--primary-color)",
}, },
app: { app: {
background: "#202124", background: "#202124",

4
pages/graphql.vue
View File

@@ -63,8 +63,8 @@
border-b border-dashed border-b border-dashed
divide-y divide-y
md:divide-x md:divide-x
border-brdColor border-divider
divide-dashed divide-brdColor divide-dashed divide-divider
md:divide-y-0 md:divide-y-0
" "
:class="{ 'border-t': index == 0 }" :class="{ 'border-t': index == 0 }"

2
pages/index.vue
View File

@@ -42,7 +42,7 @@
<input <input
v-if="!EXPERIMENTAL_URL_BAR_ENABLED" v-if="!EXPERIMENTAL_URL_BAR_ENABLED"
:class="{ error: !isValidURL }" :class="{ error: !isValidURL }"
class="border-dashed md:border-l border-brdColor" class="border-dashed md:border-l border-divider"
@keyup.enter="isValidURL ? sendRequest() : null" @keyup.enter="isValidURL ? sendRequest() : null"
id="url" id="url"
name="url" name="url"

19
tailwind.config.js
View File

@@ -22,16 +22,15 @@ export default {
}, },
extend: { extend: {
colors: { colors: {
bgColor: "var(--bg-color)", primary: "var(--primary-color)",
bgLightColor: "var(--bg-light-color)", primaryLight: "var(--primary-light-color)",
bgDarkColor: "var(--bg-dark-color)", primaryDark: "var(--primary-dark-color)",
fgColor: "var(--fg-color)", secondary: "var(--secondary-color)",
fgLightColor: "var(--fg-light-color)", secondaryLight: "var(--secondary-light-color)",
brdColor: "var(--brd-color)", accent: "var(--accent-color)",
errColor: "var(--err-color)", divider: "var(--divider-color)",
acColor: "var(--ac-color)", error: "var(--error-color)",
actColor: "var(--act-color)", tooltip: "var(--tooltip-color)",
ttColor: "var(--tt-color)",
blue: colors.blue, blue: colors.blue,
green: colors.green, green: colors.green,
teal: colors.teal, teal: colors.teal,