fix: Style cleanup

frontend/src/components/BackgroundHandler.vue

@@ -16,7 +16,7 @@
 							class="absolute left-2 top-[6px] z-10 h-4 w-4 rounded shadow-sm"
 							@click="togglePopover"
 							:class="{
-								'bg-gray-400 dark:bg-zinc-600': !backgroundURL,
+								'bg-surface-gray-4': !backgroundURL,
 							}"
 							:style="{
 								backgroundImage: backgroundURL ? `url(${backgroundURL})` : '',
@@ -31,7 +31,7 @@
 		<template #body>
 			<div class="rounded-lg bg-surface-white p-3 shadow-lg">
 				<div
-					class="image-preview group relative h-24 w-48 cursor-pointer overflow-hidden rounded bg-gray-200 dark:bg-zinc-700"
+					class="image-preview group relative h-24 w-48 cursor-pointer overflow-hidden rounded bg-surface-gray-3"
 					:style="{
 						backgroundImage: backgroundURL ? `url(${backgroundURL})` : '',
 						backgroundPosition: `center`,
@@ -53,11 +53,7 @@
 									'!grid': !backgroundURL,
 									'group-hover:grid': backgroundURL,
 								}">
-								<div
-									class="rounded bg-gray-200 p-2 text-xs text-gray-900 dark:bg-zinc-700 dark:text-zinc-200"
-									@click="openFileSelector">
-									Upload
-								</div>
+								<BuilderButton @click="openFileSelector">Upload</BuilderButton>
 							</div>
 						</template>
 					</FileUploader>

frontend/src/components/BlockPositionHandler.vue

@@ -28,17 +28,16 @@
 					@update:modelValue="(value: string) => blockController.setStyle('left', value)" />
 			</div>
 			<div
-				class="grid-col-3 grid h-16 w-16 grid-rows-3 gap-1 self-center justify-self-center rounded bg-gray-50 p-2 dark:bg-zinc-800">
+				class="grid-col-3 grid h-16 w-16 grid-rows-3 gap-1 self-center justify-self-center rounded bg-surface-gray-2 p-2">
 				<div
-					class="col-span-3 row-start-1 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-2"></div>
+					class="col-span-3 row-start-1 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-4"></div>
 				<div
-					class="col-span-3 row-start-3 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-2"></div>
+					class="col-span-3 row-start-3 h-2 w-[2px] self-center justify-self-center rounded bg-surface-gray-4"></div>
+				<div class="h-5 w-5 self-center justify-self-center rounded bg-gray-400 bg-surface-gray-4"></div>
 				<div
-					class="surface-grabg-surface-gray-2 h-5 w-5 self-center justify-self-center rounded bg-gray-400"></div>
+					class="col-span-1 col-start-1 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-4"></div>
 				<div
-					class="col-span-1 col-start-1 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-2"></div>
-				<div
-					class="col-span-1 col-start-3 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-2"></div>
+					class="col-span-1 col-start-3 row-start-2 h-[2px] w-2 self-center justify-self-center rounded bg-surface-gray-4"></div>
 			</div>
 			<div class="col-span-1 col-start-3 w-16 self-center">
 				<BuilderInput

frontend/src/components/BlockProperties.vue

@@ -28,7 +28,7 @@
 		</div>
 	</div>
 	<div v-else>
-		<p class="mt-2 text-center text-sm text-gray-600 dark:text-zinc-500">Select a block to edit properties</p>
+		<p class="mt-2 text-center text-sm text-ink-gray-6">Select a block to edit properties</p>
 	</div>
 </template>
 <script setup lang="ts">
@@ -629,7 +629,7 @@ const dimensionSectionProperties = [
 		component: "hr",
 		getProps: () => {
 			return {
-				class: "dark:border-zinc-700",
+				class: "border-outline-gray-1",
 			};
 		},
 		searchKeyWords: "",
@@ -1158,7 +1158,7 @@ const imageOptionsSectionProperties = [
 		getProps: () => {
 			return {
 				label: "Convert to WebP",
-				class: "text-base dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700",
+				class: "text-base self-end",
 			};
 		},
 		innerText: "Convert to WebP",

frontend/src/components/BorderRadiusHandler.vue

@@ -11,7 +11,7 @@
 		}"
 		@mousedown.stop="handleRounded">
 		<div
-			class="absolute left-2 top-2 w-fit rounded-full bg-zinc-800 px-3 py-2 text-xs text-white opacity-60"
+			class="absolute left-2 top-2 w-fit rounded-full bg-gray-800 px-3 py-2 text-xs text-white opacity-60"
 			v-show="updating">
 			{{ borderRadius }}
 		</div>

frontend/src/components/BuilderAssets.vue

@@ -19,22 +19,22 @@
 						class="relative flex translate-x-0 translate-y-0 cursor-pointer items-center justify-between overflow-hidden truncate rounded border border-transparent bg-surface-white px-2 py-1.5"
 						draggable="true"
 						:class="{
-							'!border-gray-400 dark:!border-zinc-600':
+							'!border-outline-gray-4':
 								store.fragmentData.fragmentId === component.name ||
 								selectedComponent === component.component_id,
 						}"
 						@click="selectComponent(component)"
 						@dblclick="componentStore.editComponent(null, component.name)"
 						@dragstart="(ev) => setComponentData(ev, component)">
-						<div class="flex items-center gap-2">
-							<FeatherIcon :name="'box'" class="h-4 w-4 text-gray-800 dark:text-zinc-400"></FeatherIcon>
-							<p class="text-base text-gray-800 dark:text-zinc-400">
+						<div class="flex items-center gap-2 text-ink-gray-5">
+							<FeatherIcon :name="'box'" class="h-4 w-4"></FeatherIcon>
+							<p class="text-base">
 								{{ component.component_name }}
 							</p>
 						</div>
 						<FeatherIcon
 							name="trash"
-							class="hidden h-3 w-3 cursor-pointer text-gray-800 group-hover:block dark:text-zinc-400"
+							class="hidden h-3 w-3 cursor-pointer text-ink-gray-5 group-hover:block"
 							@click.stop.prevent="componentStore.deleteComponent(component)"></FeatherIcon>
 					</div>
 				</div>

frontend/src/components/BuilderCanvas.vue

@@ -47,7 +47,7 @@
 				v-show="breakpoint.visible"
 				:key="breakpoint.device">
 				<div
-					class="absolute left-0 cursor-pointer select-none text-3xl text-gray-700 dark:text-zinc-300"
+					class="absolute left-0 cursor-pointer select-none text-3xl text-ink-gray-7"
 					:style="{
 						fontSize: `calc(${12}px * 1/${canvasProps.scale})`,
 						top: `calc(${-20}px * 1/${canvasProps.scale})`,
@@ -66,7 +66,7 @@
 			</div>
 		</div>
 		<div
-			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-surface-white px-3 py-2 text-center text-sm font-semibold text-gray-600 shadow-md dark:text-zinc-400"
+			class="fixed bottom-12 left-[50%] z-40 flex translate-x-[-50%] cursor-default items-center justify-center gap-2 rounded-lg bg-surface-white px-3 py-2 text-center text-sm font-semibold text-ink-gray-7 shadow-md"
 			v-show="!canvasProps.panning">
 			{{ Math.round(canvasProps.scale * 100) + "%" }}
 			<div class="ml-2 cursor-pointer" @click="setScaleAndTranslate">

frontend/src/components/BuilderLeftPanel.vue

@@ -25,26 +25,13 @@
 				width: `${store.builderLayout.leftPanelWidth}px`,
 			}"
 			@click.stop="store.leftPanelActiveTab === 'Layers' && store.activeCanvas?.clearSelection()">
-			<div v-if="false" class="mb-5 flex flex-col overflow-hidden rounded-lg text-sm">
-				<textarea
-					class="no-scrollbar h-fit resize-none rounded-sm border-0 bg-gray-300 text-sm outline-none dark:bg-zinc-700 dark:text-white"
-					v-model="prompt"
-					:disabled="generating" />
-				<button
-					@click="getPage"
-					type="button"
-					class="bg-gray-300 p-2 text-gray-800 dark:bg-zinc-700 dark:text-zinc-300"
-					:disabled="generating">
-					Generate
-				</button>
-			</div>
 			<div v-show="store.leftPanelActiveTab === 'Blocks'">
 				<BuilderBlockTemplates class="mt-1 p-4 pt-3" />
 			</div>
 			<div v-show="store.leftPanelActiveTab === 'Assets'">
 				<BuilderAssets class="mt-1 p-4 pt-3" />
 			</div>
-			<div v-show="store.leftPanelActiveTab === 'Layers'" class="p-4 pt-3">
+			<div v-show="store.leftPanelActiveTab === 'Layers'" class="p-3">
 				<BlockLayers
 					class="no-scrollbar overflow-auto"
 					v-if="pageCanvas"

frontend/src/components/BuilderToolbar.vue

@@ -107,7 +107,7 @@
 					</Tooltip>
 				</div>
 			</div>
-			<span class="text-sm dark:text-zinc-300" v-if="store.savingPage && store.activePage?.is_template">
+			<span class="text-sm text-ink-gray-3" v-if="store.savingPage && store.activePage?.is_template">
 				Saving template
 			</span>
 			<Tooltip text="Settings" :hoverDelay="0.6">

frontend/src/components/CollapsibleSection.vue

@@ -1,11 +1,10 @@
 <template>
 	<div>
-		<div class="flex items-center justify-between text-sm font-medium dark:text-zinc-400">
-			<h3 class="cursor-pointer text-base text-gray-900 dark:text-zinc-300" @click="toggleCollapsed">
+		<div class="flex items-center justify-between text-sm font-medium">
+			<h3 class="cursor-pointer text-base text-ink-gray-9" @click="toggleCollapsed">
 				{{ sectionName }}
 			</h3>
 			<BuilderButton
-				class="dark:text-zinc-400 dark:hover:bg-zinc-700"
 				:icon="collapsed ? 'plus' : 'minus'"
 				:variant="'ghost'"
 				size="sm"

frontend/src/components/ContextMenu.vue

@@ -1,20 +1,20 @@
 <template>
 	<Menu
-		class="fixed z-50 h-fit w-fit min-w-[120px] rounded-lg bg-surface-white p-1 shadow-xl"
+		class="fixed z-50 h-fit w-fit min-w-[120px] rounded-md bg-surface-white p-1 shadow-xl"
 		:style="{ top: y + 'px', left: x + 'px' }"
 		ref="menu">
 		<MenuItems static class="text-sm">
 			<MenuItem
 				v-slot="{ active, disabled }"
-				class="block cursor-pointer rounded-md px-3 py-1 dark:text-zinc-50"
+				class="block cursor-pointer rounded-sm px-3 py-1 text-ink-gray-9"
 				v-for="(option, index) in options"
 				v-show="!option.condition || option.condition()">
 				<div
 					@click.prevent.stop="(!option.condition || option.condition()) && handleClick(option.action)"
 					:class="{
 						'text-gray-900': !disabled,
-						'bg-gray-200 dark:bg-zinc-700': active,
-						'text-gray-400 dark:text-zinc-500': disabled,
+						'bg-surface-gray-4': active,
+						'text-ink-gray-4': disabled,
 					}">
 					{{ option.label }}
 				</div>

frontend/src/components/Controls/ColorPicker.vue

@@ -80,10 +80,7 @@
 							:style="{
 								background: color,
 							}"></div>
-						<EyeDropperIcon
-							v-if="isSupported"
-							class="text-gray-700 dark:text-zinc-300"
-							@click="() => open()" />
+						<EyeDropperIcon v-if="isSupported" class="text-ink-gray-7" @click="() => open()" />
 					</div>
 				</div>
 			</div>

frontend/src/components/Controls/InputLabel.vue

@@ -1,6 +1,5 @@
 <template>
-	<span
-		class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-gray-700 dark:text-zinc-400">
+	<span class="inline-flex w-1/2 min-w-20 max-w-40 items-center text-xs leading-5 text-ink-gray-6">
 		<slot />
 	</span>
 </template>

frontend/src/components/Controls/OptionToggle.vue

@@ -2,7 +2,7 @@
 	<div class="flex w-full items-center justify-between">
 		<InputLabel v-if="label">{{ label }}</InputLabel>
 		<TabButtons
-			class="w-full min-w-[150px] [&>div>button[aria-checked='false']]:dark:!bg-transparent [&>div>button[aria-checked='false']]:dark:!text-zinc-400 [&>div>button[aria-checked='true']]:dark:!bg-zinc-700 [&>div>button]:items-center [&>div>button]:dark:!bg-zinc-700 [&>div>button]:dark:!text-zinc-100 [&>div]:h-7 [&>div]:dark:!bg-zinc-800"
+			class="w-full min-w-[150px] [&>div>button[aria-checked='true']]:dark:!bg-surface-gray-4 [&>div>button]:items-center [&>div]:h-7"
 			:buttons="options"
 			:modelValue="modelValue"
 			@update:modelValue="$emit('update:modelValue', $event)"></TabButtons>

frontend/src/components/ImageUploadInput.vue

@@ -29,7 +29,7 @@
 						@upload="setImageURL"
 						@remove="setImageURL('')"
 						:image_url="imageURL"
-						class="absolute right-0 top-5 rounded-r-md bg-surface-gray-2 pl-2 dark:bg-gray-900"
+						class="absolute right-0 top-5 rounded-r-md bg-surface-gray-2 pl-2 dark:bg-transparent"
 						:file_types="['image/*']" />
 				</div>
 			</div>
@@ -49,7 +49,7 @@
 							<img
 								:src="imageURL || '/assets/builder/images/fallback.png'"
 								alt=""
-								class="image-preview relative h-24 w-48 cursor-pointer bg-gray-200 dark:bg-zinc-700"
+								class="image-preview relative h-24 w-48 cursor-pointer bg-surface-gray-2"
 								:style="{
 									'object-fit': imageFit || 'contain',
 								}" />
@@ -59,12 +59,7 @@
 									'!grid': !imageURL,
 									'group-hover:grid': imageURL,
 								}">
-								<BuilderButton
-									class="rounded bg-gray-200 p-2 text-xs text-gray-900 dark:bg-zinc-700 dark:text-zinc-200"
-									variant="solid"
-									@click="openFileSelector">
-									Upload
-								</BuilderButton>
+								<BuilderButton variant="solid" @click="openFileSelector">Upload</BuilderButton>
 							</div>
 						</div>
 					</template>

frontend/src/components/ObjectEditor.vue

@@ -4,27 +4,19 @@
 			<BuilderInput
 				placeholder="Property"
 				:modelValue="key"
-				@update:modelValue="(val: string) => replaceKey(key, val)"
-				class="rounded-md text-sm text-gray-800 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:bg-zinc-700" />
+				@update:modelValue="(val: string) => replaceKey(key, val)" />
 			<BuilderInput
 				placeholder="Value"
 				:modelValue="value"
-				@update:modelValue="(val: string) => updateObjectValue(key, val)"
-				class="rounded-md text-sm text-gray-800 dark:border-zinc-700 dark:bg-zinc-800 dark:text-zinc-200 dark:focus:bg-zinc-700" />
+				@update:modelValue="(val: string) => updateObjectValue(key, val)" />
 			<BuilderButton
-				variant="outline"
+				class="flex-shrink-0 text-xs"
+				variant="subtle"
 				icon="x"
-				class="p-2 dark:border-zinc-600 dark:bg-zinc-800 dark:text-gray-100 dark:outline-0 dark:hover:bg-zinc-700 dark:hover:text-gray-100"
 				@click="deleteObjectKey(key as string)"></BuilderButton>
 		</div>
-		<BuilderButton
-			variant="subtle"
-			label="Add"
-			class="dark:bg-zinc-800 dark:text-gray-100"
-			@click="addObjectKey"></BuilderButton>
-		<p
-			class="rounded-sm bg-gray-100 p-2 text-2xs text-gray-800 dark:bg-zinc-800 dark:text-zinc-300"
-			v-show="description">
+		<BuilderButton variant="subtle" label="Add" @click="addObjectKey"></BuilderButton>
+		<p class="rounded-sm bg-surface-gray-1 p-2 text-2xs text-ink-gray-7" v-show="description">
 			<span v-html="description"></span>
 		</p>
 	</div>

frontend/src/components/PanelResizer.vue

@@ -8,7 +8,7 @@
 			'right-0': side === 'right',
 			'top-0': side === 'top',
 			'bottom-0': side === 'bottom',
-			'bg-gray-300 dark:bg-zinc-700': dragActive,
+			'bg-surface-gray-3': dragActive,
 		}"
 		@mousedown.prevent="resize">
 		<slot />

frontend/src/components/PlacementControl.vue

@@ -2,7 +2,7 @@
 	<div class="items-top relative flex justify-between">
 		<InputLabel class="items-center">Placement</InputLabel>
 		<div class="relative h-fit w-fit">
-			<div class="group grid grid-cols-3 rounded-sm bg-gray-200 p-1.5 dark:bg-zinc-800">
+			<div class="group grid grid-cols-3 rounded-sm bg-surface-gray-2 p-1.5">
 				<div
 					v-for="option in placementOptions"
 					:key="option"
@@ -32,19 +32,19 @@
 									(option === 'bottom-left' || option === 'bottom-middle' || option === 'bottom-right')),
 						}">
 						<div
-							class="rounded-sm bg-gray-500 dark:bg-zinc-500"
+							class="rounded-sm bg-surface-gray-5"
 							:class="{
 								'h-2 w-1': direction === 'row',
 								'h-1 w-2': direction === 'column',
 							}"></div>
 						<div
-							class="rounded-sm bg-gray-500 dark:bg-zinc-500"
+							class="rounded-sm bg-surface-gray-5"
 							:class="{
 								'h-3 w-1': direction === 'row',
 								'h-1 w-3': direction === 'column',
 							}"></div>
 						<div
-							class="rounded-sm bg-gray-500 dark:bg-zinc-500"
+							class="rounded-sm bg-surface-gray-5"
 							:class="{
 								'h-2 w-1': direction === 'row',
 								'h-1 w-2': direction === 'column',
@@ -60,19 +60,19 @@
 					'align-items': alignItems,
 				}">
 				<div
-					class="rounded-sm bg-gray-600 dark:bg-zinc-400"
+					class="rounded-sm bg-surface-gray-6"
 					:class="{
 						'h-1 w-2': direction === 'column',
 						'h-2 w-1': direction === 'row',
 					}"></div>
 				<div
-					class="rounded-sm bg-gray-600 dark:bg-zinc-400"
+					class="rounded-sm bg-surface-gray-6"
 					:class="{
 						'h-1 w-3': direction === 'column',
 						'h-3 w-1': direction === 'row',
 					}"></div>
 				<div
-					class="rounded-sm bg-gray-600 dark:bg-zinc-400"
+					class="rounded-sm bg-surface-gray-6"
 					:class="{
 						'h-1 w-2': direction === 'column',
 						'h-2 w-1': direction === 'row',

frontend/src/pages/PageBuilder.vue

@@ -33,15 +33,13 @@
 				class="canvas-container absolute bottom-0 top-[var(--toolbar-height)] flex justify-center overflow-hidden bg-surface-gray-2 p-10">
 				<template v-slot:header>
 					<div
-						class="absolute left-0 right-0 top-0 z-20 flex items-center justify-between bg-surface-white p-2 text-sm text-gray-800 dark:text-zinc-400">
+						class="absolute left-0 right-0 top-0 z-20 flex items-center justify-between bg-surface-white p-2 text-sm text-ink-gray-8">
 						<div class="flex items-center gap-1 text-xs">
 							<a @click="store.exitFragmentMode" class="cursor-pointer">Page</a>
 							<FeatherIcon name="chevron-right" class="h-3 w-3" />
 							{{ store.fragmentData.fragmentName }}
 						</div>
-						<BuilderButton
-							class="text-xs dark:bg-zinc-800 dark:text-zinc-200 dark:hover:bg-zinc-700"
-							@click="saveAndExitFragmentMode">
+						<BuilderButton class="text-xs" @click="saveAndExitFragmentMode">
 							{{ store.fragmentData.saveActionLabel || "Save" }}
 						</BuilderButton>
 					</div>

frontend/src/pages/PageBuilderDashboard.vue

@@ -196,7 +196,7 @@
 						</div>
 					</div>
 					<BuilderButton
-						class="m-auto mt-12 w-fit text-sm dark:bg-zinc-900 dark:text-zinc-300"
+						class="m-auto mt-12 w-fit text-sm"
 						@click="loadMore"
 						v-show="webPages.hasNextPage"
 						variant="subtle"