Feat dark theme

dashboard/src/App.vue

@@ -43,6 +43,9 @@ import { dialogs } from './utils/components';
 import { useRoute } from 'vue-router';
 import { getTeam } from './data/team';
 import { session } from './data/session.js';
+import { initializeTheme } from '@/components/utils/UseTheme';
+
+initializeTheme();
 
 const AppSidebar = defineAsyncComponent(
 	() => import('./components/navigation/sidebar/Sidebar.vue'),

dashboard/src/assets/style.css

@@ -31,4 +31,11 @@
 		width: 12px;
 		height: 12px;
 	}
+
+	body {
+  background-color: var(--surface-white);
+  color: var(--ink-gray-9);
+  @apply text-base;
+	}
+
 }

dashboard/src/components/AccessRequestStatusDialog.vue

@@ -32,7 +32,7 @@
 					</p>
 				</div>
 				<div class="rounded-sm border divide-y">
-					<div class="grid grid-cols-5 font-medium bg-gray-50 divide-x">
+					<div class="grid grid-cols-5 font-medium bg-surface-gray-1 divide-x">
 						<div class="col-span-2 py-2 px-3">Permission</div>
 						<div class="col-span-1 py-2 px-3">Granted</div>
 						<div class="col-span-2 py-2 px-3">Expiry</div>

dashboard/src/components/AddDomainDialog.vue

@@ -19,7 +19,7 @@
 
 				<div
 					v-if="newDomain && !dnsVerified"
-					class="prose prose-sm space-y-2 prose-strong:text-gray-800"
+					class="prose prose-sm space-y-2 prose-strong:text-ink-gray-8"
 				>
 					<p>Create one of the following DNS records:</p>
 					<ul>
@@ -40,21 +40,21 @@
 				<div v-if="dnsResult && !dnsResult.matched" class="space-y-2">
 					<p class="text-base">
 						Received following DNS query responses for
-						<span class="font-semibold text-gray-700">{{ newDomain }}</span
+						<span class="font-semibold text-ink-gray-7">{{ newDomain }}</span
 						>.
 					</p>
 					<div
 						v-if="newDomain && dnsResult.CNAME && !dnsResult.CNAME.matched"
 						class="space-y-2"
 					>
 						<p class="text-base">
-							<span class="font-semibold text-gray-700">CNAME</span>
+							<span class="font-semibold text-ink-gray-7">CNAME</span>
 						</p>
 						<div
 							class="flex flex-row items-center justify-between rounded-lg border-2 p-2"
 						>
 							<p
-								class="select-all overflow-hidden font-mono text-sm text-gray-800"
+								class="select-all overflow-hidden font-mono text-sm text-ink-gray-8"
 							>
 								{{ dnsResult.CNAME.answer }}
 							</p>
@@ -65,13 +65,13 @@
 						class="space-y-2"
 					>
 						<p class="text-base">
-							<span class="font-semibold text-gray-700">A</span>
+							<span class="font-semibold text-ink-gray-7">A</span>
 						</p>
 						<div
 							class="flex flex-row items-center justify-between rounded-lg border-2 p-2"
 						>
 							<p
-								class="select-all overflow-hidden font-mono text-sm text-gray-800"
+								class="select-all overflow-hidden font-mono text-sm text-ink-gray-8"
 							>
 								{{ dnsResult.A.answer }}
 							</p>
@@ -81,14 +81,14 @@
 				<p class="flex text-base" v-if="dnsVerified === false">
 					<FeatherIcon
 						name="x"
-						class="mr-2 h-5 w-5 rounded-full bg-red-100 p-1 text-red-500"
+						class="mr-2 h-5 w-5 rounded-full bg-red-100 p-1 text-ink-red-3"
 					/>
 					DNS Verification Failed
 				</p>
 				<p class="flex text-base" v-if="dnsVerified === true">
 					<FeatherIcon
 						name="check"
-						class="mr-2 h-5 w-5 rounded-full bg-green-100 p-1 text-green-500"
+						class="mr-2 h-5 w-5 rounded-full bg-green-100 p-1 text-ink-green-2"
 					/>
 					DNS records successfully verified. Click on Add Domain.
 				</p>

dashboard/src/components/AddressableErrorDialog.vue

@@ -12,19 +12,19 @@
 			<div
 				:if="doc.message"
 				v-html="doc.message"
-				class="flex flex-col gap-2 whitespace-pre-wrap text-p-base text-gray-700"
+				class="flex flex-col gap-2 whitespace-pre-wrap text-p-base text-ink-gray-7"
 			></div>
 
 			<div v-if="doc.traceback" class="relative mt-6">
 				<button
-					class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-white p-1 text-xs text-gray-600"
+					class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-surface-white p-1 text-xs text-ink-gray-6"
 					variant="outline"
 					@click="copyTraceback"
 				>
 					{{ copied ? 'copied' : 'copy' }}
 				</button>
 				<div
-					class="max-h-48 w-full overflow-scroll rounded-sm border border-gray-200 bg-gray-100 p-3 text-xs text-gray-600"
+					class="max-h-48 w-full overflow-scroll rounded-sm border border-gray-200 bg-surface-gray-2 p-3 text-xs text-ink-gray-6"
 				>
 					<pre>{{ doc.traceback }}</pre>
 				</div>

dashboard/src/components/AlertBanner.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		:class="`flex items-center justify-between rounded-md border border-${color}-200 bg-${color}-100 px-3.5 py-2.5`"
+		:class="`flex items-center justify-between rounded-md border border-outline-${color}-2 bg-surface-${color}-1 px-3.5 py-2.5`"
 	>
 		<div class="flex items-center">
 			<lucide-alert-triangle
@@ -13,7 +13,7 @@
 			/>
 			<div
 				:class="{ 'ml-3': showIcon }"
-				class="text-p-base font-medium text-gray-800"
+				class="text-p-base font-medium text-ink-gray-8"
 				v-html="title"
 			/>
 		</div>

dashboard/src/components/Autocomplete.vue

@@ -1,6 +1,6 @@
 <template>
 	<div class="relative space-y-1.5">
-		<label class="block text-xs text-gray-600" v-if="label">
+		<label class="block text-xs text-ink-gray-6" v-if="label">
 			{{ label }}
 		</label>
 		<Combobox
@@ -33,7 +33,7 @@
 							@change="handleQueryChange"
 							:displayValue="getDisplayValue"
 							:placeholder="!modelValue ? placeholder : null"
-							class="focus:ring-outline-gray-3 h-full w-full rounded border border-gray-100 bg-gray-100 bg-transparent pl-2 pr-5 text-base text-gray-800 placeholder-gray-500 transition-colors focus:border-gray-500 focus:bg-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
+							class="focus:ring-outline-gray-3 h-full w-full rounded border border-gray-100 bg-surface-gray-2 bg-transparent pl-2 pr-5 text-base text-ink-gray-8 placeholder-gray-500 transition-colors focus:border-gray-500 focus:bg-surface-white focus:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-gray-400"
 						/>
 					</div>
 				</template>
@@ -43,7 +43,7 @@
 							class="bg-surface-white absolute right-0 z-[999] max-h-[15rem] w-full overflow-y-auto rounded-lg p-0 shadow-2xl"
 							v-show="filteredOptions.length"
 						>
-							<div class="w-full list-none bg-white px-1.5 py-1.5">
+							<div class="w-full list-none bg-surface-white px-1.5 py-1.5">
 								<ComboboxOption
 									v-for="option in filteredOptions"
 									v-slot="{ active, selected }"
@@ -70,8 +70,8 @@
 										v-else
 										class="flex w-full cursor-pointer select-none items-center justify-between truncate rounded px-2.5 py-1.5 text-base"
 										:class="{
-											'bg-gray-100': active,
-											'bg-gray-300': selected,
+											'bg-surface-gray-2': active,
+											'bg-surface-gray-4': selected,
 										}"
 									>
 										{{ option.label }}

dashboard/src/components/BackupFilesUploader.vue

@@ -32,7 +32,7 @@
 						<template #subtitle>
 							<span
 								class="text-base"
-								:class="error ? 'text-red-500' : 'text-gray-600'"
+								:class="error ? 'text-ink-red-3' : 'text-ink-gray-6'"
 							>
 								{{
 									uploading

dashboard/src/components/BuyPrepaidCreditsForm.vue

@@ -10,7 +10,7 @@
 			:min="minimumAmount"
 		>
 			<template #prefix>
-				<div class="grid w-4 place-items-center text-sm text-gray-700">
+				<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 					{{ $team.doc.currency === 'INR' ? '₹' : '$' }}
 				</div>
 			</template>
@@ -27,15 +27,15 @@
 			type="number"
 		>
 			<template #prefix>
-				<div class="grid w-4 place-items-center text-sm text-gray-700">
+				<div class="grid w-4 place-items-center text-sm text-ink-gray-7">
 					{{ $team.doc.currency === 'INR' ? '₹' : '$' }}
 				</div>
 			</template>
 		</FormControl>
 	</div>
 
 	<div class="mt-4">
-		<div class="text-xs text-gray-600">Select Payment Gateway</div>
+		<div class="text-xs text-ink-gray-6">Select Payment Gateway</div>
 		<div class="mt-1.5 grid grid-cols-1 gap-2 sm:grid-cols-2">
 			<button
 				@click="paymentGateway = 'Stripe'"

dashboard/src/components/BuyPrepaidCreditsStripe.vue

@@ -7,15 +7,15 @@
 				'mt-4': step == 'Add Card Details',
 			}"
 		>
-			<span class="text-sm leading-4 text-gray-700">
+			<span class="text-sm leading-4 text-ink-gray-7">
 				Credit or Debit Card
 			</span>
 			<div class="form-input mt-2 block w-full pl-3" ref="card-element"></div>
 			<ErrorMessage class="mt-1" :message="cardErrorMessage" />
 		</label>
 
 		<div v-if="step == 'Setting up Stripe'" class="mt-8 flex justify-center">
-			<Spinner class="h-4 w-4 text-gray-600" />
+			<Spinner class="h-4 w-4 text-ink-gray-6" />
 		</div>
 		<ErrorMessage
 			class="mt-2"
@@ -117,7 +117,7 @@ export default {
 						style: style,
 						classes: {
 							complete: '',
-							focus: 'bg-gray-100',
+							focus: 'bg-surface-gray-2',
 						},
 					});
 

dashboard/src/components/ChurnFeedbackDialog.vue

@@ -18,11 +18,11 @@
 		v-model="show"
 	>
 		<template v-slot:body-content>
-			<p class="mb-5 text-sm text-gray-800">
+			<p class="mb-5 text-sm text-ink-gray-8">
 				Help us improve your experience by sharing your thoughts.
 			</p>
 			<div class="mt-3">
-				<span class="mb-2 block text-sm leading-4 text-gray-600">
+				<span class="mb-2 block text-sm leading-4 text-ink-gray-6">
 					Please rate your experience
 				</span>
 				<StarRatingInput v-model="rating" />

dashboard/src/components/ClickToCopyField.vue

@@ -1,10 +1,10 @@
 <template>
-	<div class="relative rounded-lg border-2 border-gray-200 bg-gray-100 p-3">
-		<div class="select-all break-all text-xs text-gray-800">
+	<div class="relative rounded-lg border-2 border-gray-200 bg-surface-gray-2 p-3">
+		<div class="select-all break-all text-xs text-ink-gray-8">
 			<pre
 				:class="{
 					'whitespace-pre-wrap': breakLines,
-					'overflow-x-auto': !breakLines
+					'overflow-x-auto': !breakLines,
 				}"
 				:style="
 					!breakLines
@@ -15,7 +15,7 @@
 			>
 		</div>
 		<button
-			class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-white p-1 text-xs text-gray-600"
+			class="absolute right-2 top-2 rounded-sm border border-gray-200 bg-surface-white p-1 text-xs text-ink-gray-6"
 			variant="outline"
 			@click="copyTextContentToClipboard"
 		>
@@ -31,16 +31,16 @@ export default {
 	props: {
 		textContent: {
 			type: String,
-			required: true
+			required: true,
 		},
 		breakLines: {
 			type: Boolean,
-			default: true
-		}
+			default: true,
+		},
 	},
 	data() {
 		return {
-			copied: false
+			copied: false,
 		};
 	},
 	methods: {
@@ -53,7 +53,7 @@ export default {
 				}, 4000);
 				toast.success('Copied to clipboard!');
 			});
-		}
-	}
+		},
+	},
 };
 </script>

dashboard/src/components/CommunicationInfoDialog.vue

@@ -48,7 +48,7 @@
 				</div>
 				<div
 					v-if="$resources.getCommunicationInfos.loading"
-					class="flex w-full items-center justify-center gap-2 py-20 text-gray-700"
+					class="flex w-full items-center justify-center gap-2 py-20 text-ink-gray-7"
 				>
 					<Spinner class="w-4" /> Loading data...
 				</div>

dashboard/src/components/ConfigEditorDialog.vue

@@ -33,7 +33,7 @@
 							selectedConfig.value !== '__custom_key' &&
 							selectedConfig.detail
 						"
-						class="text-sm text-gray-500 mt-2 ml-1"
+						class="text-sm text-ink-gray-5 mt-2 ml-1"
 					>
 						{{ selectedConfig.detail }}
 					</div>

dashboard/src/components/ConfigPreviewDialog.vue

@@ -7,7 +7,7 @@
 	>
 		<template #body-content>
 			<pre
-				class="overflow-x-scroll rounded bg-gray-100 p-4 text-base"
+				class="overflow-x-scroll rounded bg-surface-gray-2 p-4 text-base"
 				v-html="configPreview"
 			></pre>
 		</template>

dashboard/src/components/CustomToast.vue

@@ -13,13 +13,13 @@ defineProps({
 
 <template>
 	<div
-		class="rounded-md border-px border-gray-4 bg-white px-4 py-3 text-sm leading-5 shadow-2xl"
+		class="rounded-md border-px border-gray-4 bg-surface-white px-4 py-3 text-sm leading-5 shadow-2xl"
 	>
-		<div v-if="title" class="mb-1 font-semibold text-gray-900">
+		<div v-if="title" class="mb-1 font-semibold text-ink-gray-9">
 			{{ title }}
 		</div>
 
 		<!-- Dangerous HTML rendering -->
-		<div v-if="html" class="text-gray-600" v-html="html" />
+		<div v-if="html" class="text-ink-gray-6" v-html="html" />
 	</div>
 </template>

dashboard/src/components/EnvironmentVariableEditorDialog.vue

@@ -23,8 +23,8 @@
 				<FormControl label="Value" v-model="value" autocomplete="off" />
 				<ErrorMessage class="mt-2" :message="error" />
 				<div class="flex items-center">
-					<lucide-info class="mr-2 text-gray-500" />
-					<div class="text-sm text-gray-600">
+					<lucide-info class="mr-2 text-ink-gray-5" />
+					<div class="text-sm text-ink-gray-6">
 						Environment variable changes will only be reflected in the newer
 						deploys.
 					</div>

dashboard/src/components/FeatureList.vue

@@ -1,5 +1,5 @@
 <template>
-	<ul class="space-y-2 text-sm text-gray-700">
+	<ul class="space-y-2 text-sm text-ink-gray-7">
 		<li
 			class="flex flex-row justify-items-center"
 			v-for="feature in features"
@@ -14,6 +14,6 @@
 <script>
 export default {
 	name: 'FeatureList',
-	props: ['features']
+	props: ['features'],
 };
 </script>