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

4
components/app/Footer.vue
View File

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

4
components/app/Header.vue
View File

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

4
components/app/Section.vue
View File

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

31
components/app/Sidenav.vue
View File

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

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

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

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

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

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

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

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

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

2
components/collections/index.vue
View File

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

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

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

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

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

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

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

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

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

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

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

2
components/docs/Folder.vue
View File

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

6
components/docs/Request.vue
View File

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

4
components/environments/Edit.vue
View File

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

2
components/environments/index.vue
View File

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

2
components/firebase/Email.vue
View File

@@ -27,7 +27,7 @@
</div>
<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">
<i class="material-icons text-acColor" style="font-size: 64px">
<i class="material-icons text-accent" style="font-size: 64px">
verified
</i>
<h3 class="font-bold my-2 text-center text-lg">

2
components/firebase/Feeds.vue
View File

@@ -1,7 +1,7 @@
<template>
<div
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">
<div data-test="list-item" class="show-on-large-screen">

2
components/firebase/Inputform.vue
View File

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

13
components/graphql/Field.vue
View File

@@ -1,5 +1,5 @@
<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 }">
{{ fieldName }}
<span v-if="fieldArgs.length > 0">
@@ -19,7 +19,10 @@
:jump-type-callback="jumpTypeCallback"
/>
</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 }}
</div>
<div
@@ -41,7 +44,7 @@
</div>
<div v-if="fieldArgs.length > 0">
<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">
{{ field.name }}:
<GraphqlTypeLink
@@ -50,7 +53,7 @@
/>
<div
v-if="field.description"
class="mt-2 text-fgLightColor field-desc"
class="mt-2 text-secondaryLight field-desc"
>
{{ field.description }}
</div>
@@ -82,6 +85,6 @@ export default {
<style scoped lang="scss">
.field-highlighted {
@apply border-b-2;
@apply border-acColor;
@apply border-accent;
}
</style>

10
components/graphql/Type.vue
View File

@@ -4,14 +4,14 @@
class="font-bold type-title"
:class="{ 'type-highlighted': isHighlighted }"
>
<span v-if="isInput" class="font-normal text-acColor">input </span>
<span v-else-if="isInterface" class="font-normal text-acColor"
<span v-if="isInput" class="font-normal text-accent">input </span>
<span v-else-if="isInterface" class="font-normal text-accent"
>interface
</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 }}
</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 }}
</div>
<div v-if="interfaces.length > 0" class="mb-2">
@@ -104,6 +104,6 @@ export default {
<style scoped lang="scss">
.type-highlighted {
@apply text-acColor;
@apply text-accent;
}
</style>

2
components/graphql/TypeLink.vue
View File

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

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

@@ -82,7 +82,7 @@
type="text"
readonly
: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>
</div>
@@ -95,7 +95,7 @@
type="text"
readonly
: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>
@@ -105,7 +105,7 @@
readonly
:value="`Duration: ${entry.duration}ms`"
: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>
@@ -115,7 +115,7 @@
readonly
:value="entry.preRequestScript"
: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> -->
</div>

4
components/history/index.vue
View File

@@ -10,7 +10,7 @@
/>
</div>
<div
class="divide-y virtual-list divide-dashed divide-brdColor"
class="divide-y virtual-list divide-dashed divide-divider"
:class="{ filled: filteredHistory.length }"
>
<ul v-for="(entry, index) in filteredHistory" :key="`entry-${index}`">
@@ -42,7 +42,7 @@
<p v-if="history.length === 0" class="info">
<i class="material-icons">schedule</i> {{ $t("history_empty") }}
</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">
<button
data-testid="clear_history"

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

@@ -87,7 +87,7 @@
readonly
:value="`${entry.url}${entry.path}`"
: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>
</div>
@@ -100,7 +100,7 @@
type="text"
readonly
: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>
@@ -110,7 +110,7 @@
readonly
:value="`Duration: ${entry.duration}ms`"
: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>
@@ -120,7 +120,7 @@
readonly
:value="entry.preRequestScript"
: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> -->
</div>

6
components/http/BodyParameters.vue
View File

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

4
components/http/Headers.vue
View File

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

4
components/http/Parameters.vue
View File

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

4
components/realtime/Log.vue
View File

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

12
components/realtime/Mqtt.vue
View File

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

8
components/realtime/Socketio.vue
View File

@@ -81,8 +81,8 @@
border-b border-dashed
divide-y
md:divide-x
border-brdColor
divide-dashed divide-brdColor
border-divider
divide-dashed divide-divider
md:divide-y-0
"
>
@@ -197,7 +197,7 @@ export default {
{
payload: this.$t("connecting_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
},
]
@@ -216,7 +216,7 @@ export default {
{
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
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 }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
},
]
if (typeof EventSource !== "undefined") {
@@ -117,7 +117,7 @@ export default {
{
payload: this.$t("connected_to", { name: this.server }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
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 }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
},
]
try {
@@ -150,7 +150,7 @@ export default {
{
payload: this.$t("connected_to", { name: this.url }),
source: "info",
color: "var(--ac-color)",
color: "var(--accent-color)",
ts: new Date().toLocaleTimeString(),
},
]

2
components/smart/AccentModePicker.vue
View File

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

12
components/smart/AceEditor.vue
View File

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

6
components/smart/AutoComplete.vue
View File

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

8
components/smart/ColorModePicker.vue
View File

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

6
components/smart/DeletableChip.vue
View File

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

6
components/smart/HideMenu.vue
View File

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

8
components/smart/Modal.vue
View File

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

10
components/smart/Tabs.vue
View File

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

10
components/smart/Toggle.vue
View File

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

6
components/smart/UrlField.vue
View File

@@ -1,4 +1,4 @@
<!--
<!--
This code is a complete adaptation of the work done here
https://github.com/SyedWasiHaider/vue-highlightable-input
-->
@@ -392,14 +392,14 @@ export default {
<style lang="scss">
.VAR {
@apply font-bold;
@apply text-acColor;
@apply text-accent;
}
.url-field-container {
@apply inline-grid;
}
.url-field {
@apply border-dashed;
@apply border-brdColor;
@apply border-divider;
@apply whitespace-nowrap;
@apply overflow-x-auto;
@apply resize-none;

8
components/teams/Edit.vue
View File

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

13
components/teams/Team.vue
View File

@@ -101,16 +101,3 @@ export default {
},
}
</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>