fix: visuals reference matching overhaul and better workflow

web/src/components/PasswordStrengthHint.vue

@@ -11,16 +11,23 @@ const props = defineProps<{
 	showErrors: boolean
 }>()
 
-function itemClass(rule: PasswordRule) {
+function iconClass(rule: PasswordRule) {
 	if (rule.met) {
 		return 'text-success'
 	}
-	return props.showErrors ? 'text-error' : 'text-toned'
+	return props.showErrors ? 'text-error' : 'text-muted'
+}
+
+function textClass(rule: PasswordRule) {
+	if (rule.met) {
+		return 'text-default'
+	}
+	return props.showErrors ? 'text-error' : 'text-muted'
 }
 
 function itemIcon(rule: PasswordRule) {
 	if (rule.met) {
-		return 'i-lucide-circle-check'
+		return 'i-lucide-check'
 	}
 	return props.showErrors ? 'i-lucide-circle-alert' : 'i-lucide-circle'
 }
@@ -28,21 +35,18 @@ function itemIcon(rule: PasswordRule) {
 const items = computed(() =>
 	props.rules.map((rule) => ({
 		...rule,
-		classes: itemClass(rule),
+		iconClass: iconClass(rule),
+		textClass: textClass(rule),
 		icon: itemIcon(rule),
 	})),
 )
 </script>
 
 <template>
-	<ul class="flex flex-col gap-1">
-		<li
-			v-for="item in items"
-			:key="item.label"
-			:class="['flex items-center gap-1.5 text-sm', item.classes]"
-		>
-			<UIcon :name="item.icon" class="shrink-0" />
-			{{ item.label }}
+	<ul class="flex flex-col gap-1.5">
+		<li v-for="item in items" :key="item.label" class="flex items-center gap-2 text-xs/[18px]">
+			<UIcon :name="item.icon" :class="['size-3.5 shrink-0', item.iconClass]" />
+			<span :class="item.textClass">{{ item.label }}</span>
 			<span class="sr-only">{{ item.met ? 'met' : 'not met' }}</span>
 		</li>
 	</ul>