fix: visuals reference matching overhaul and better workflow

web/src/components/ResultPanel.vue

@@ -21,9 +21,9 @@ const props = defineProps<{
 const role = computed(() => (props.tone === 'error' ? 'alert' : 'status'))
 
 const toneTileClass: Record<'success' | 'error' | 'info', string> = {
-	success: 'bg-success/10 text-success',
-	error: 'bg-error/10 text-error',
-	info: 'bg-info/10 text-info',
+	success: 'bg-(--rc-success-soft) text-success',
+	error: 'bg-(--rc-error-soft) text-error',
+	info: 'bg-(--rc-info-soft) text-info',
 }
 
 const tileClass = computed(() => toneTileClass[props.tone])
@@ -38,24 +38,31 @@ onMounted(async () => {
 
 <template>
 	<div :role="role" class="flex flex-col gap-4">
-		<div :class="['flex h-11 w-11 items-center justify-center', tileClass]">
-			<UIcon :name="icon" class="h-6 w-6" />
+		<div :class="['flex size-11 items-center justify-center', tileClass]">
+			<UIcon :name="icon" class="size-5.5" />
 		</div>
 		<div class="flex flex-col gap-1.5">
-			<h1 ref="titleEl" tabindex="-1" class="text-xl font-semibold leading-7 outline-none">
+			<h1
+				ref="titleEl"
+				tabindex="-1"
+				class="text-xl/7 font-semibold text-highlighted outline-none"
+			>
 				{{ title }}
 			</h1>
-			<p class="text-toned text-sm">{{ description }}</p>
+			<p class="text-base text-pretty text-toned">{{ description }}</p>
+			<slot />
 		</div>
-		<slot />
-		<div class="flex w-full flex-col gap-2">
+		<div v-if="actions.length" class="flex w-full flex-col gap-2">
 			<UButton
 				v-for="action in actions"
 				:key="action.label"
 				block
-				size="lg"
 				:color="action.color ?? 'primary'"
 				:variant="action.variant ?? 'solid'"
+				:class="[
+					'h-11 justify-center text-base sm:h-10',
+					action.variant === 'outline' ? 'text-highlighted' : '',
+				]"
 				:to="action.to"
 				:disabled="action.disabled"
 				@click="action.onClick"