fix: visuals reference matching overhaul and better workflow

web/src/theme/ui.config.ts

@@ -1,4 +1,4 @@
-const overlayBackground = 'bg-(--ui-color-neutral-950)/40'
+const overlayBackground = 'bg-(--rc-overlay)'
 
 export const renewUi = {
 	colors: {
@@ -37,7 +37,7 @@ export const renewUi = {
 	},
 	button: {
 		slots: {
-			base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard)',
+			base: 'rounded-none font-medium transition-colors duration-(--duration-fast) ease-(--ease-standard) disabled:opacity-40 aria-disabled:opacity-40',
 		},
 		variants: {
 			size: {
@@ -45,20 +45,61 @@ export const renewUi = {
 					leadingIcon: 'size-4',
 					trailingIcon: 'size-4',
 				},
+				xl: {
+					leadingIcon: 'size-4',
+					trailingIcon: 'size-4',
+				},
 			},
 		},
+		compoundVariants: [
+			{
+				loading: true,
+				class: {
+					base: 'disabled:opacity-100 aria-disabled:opacity-100',
+				},
+			},
+		],
 		defaultVariants: {
 			size: 'md',
 		},
 	},
-	input: {
+	formField: {
 		slots: {
-			base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted',
+			labelWrapper: 'gap-2',
+			label: 'text-highlighted',
+			error: 'mt-1.5 text-xs/[18px]',
+			help: 'mt-1.5 text-xs/[18px]',
 		},
+		variants: {
+			size: {
+				xl: {
+					root: 'text-sm',
+				},
+			},
+			orientation: {
+				vertical: {
+					container: 'mt-1.5',
+				},
+			},
+		},
+	},
+	input: {
+		slots: {
+			base: 'rounded-none ring-(--ui-border-accented) placeholder:text-muted focus-visible:outline-none disabled:bg-elevated disabled:text-dimmed disabled:ring-(--ui-border) disabled:opacity-100',
+		},
+		compoundVariants: [
+			{
+				highlight: true,
+				class: 'ring-2',
+			},
+		],
 		variants: {
 			size: {
 				md: {
-					base: 'text-base md:text-sm',
+					base: 'ps-2.75 text-base',
+				},
+				xl: {
+					base: 'ps-2.75 text-lg',
 				},
 			},
 		},
@@ -164,19 +205,56 @@ export const renewUi = {
 	},
 	toast: {
 		slots: {
-			root: 'rounded-none shadow-(--shadow-popover)',
-			progress: 'rounded-none',
+			root: 'rounded-none shadow-(--shadow-popover) ring-0 border border-default gap-2.5 px-3.5 py-3',
+			title: 'text-sm font-semibold max-sm:text-base/5',
+			description: 'text-sm text-muted max-sm:text-base/5',
+			icon: 'mt-0.5 size-4 max-sm:mt-0.75',
+			progress: 'hidden',
 		},
+		variants: {
+			orientation: {
+				horizontal: {
+					root: 'items-start',
+				},
+			},
+			title: {
+				true: {
+					description: 'mt-0.5',
+				},
+			},
+		},
+		compoundVariants: [
+			{
+				color: ['primary', 'secondary', 'success', 'info', 'warning', 'neutral'],
+				class: { close: 'hidden' },
+			},
+		],
 	},
 	toaster: {
 		slots: {
-			viewport: 'z-(--z-toast)',
+			viewport: 'z-(--z-toast) sm:right-6 sm:bottom-6 sm:w-89',
 		},
 	},
 	alert: {
 		slots: {
-			root: 'rounded-none',
+			root: 'rounded-none gap-2.5 px-3.5 py-3',
+			icon: 'mt-0.5 size-4',
+			title: 'text-sm font-semibold',
+			description: 'text-sm text-pretty text-toned opacity-100',
 		},
+		variants: {
+			title: {
+				true: {
+					description: 'mt-0.5',
+				},
+			},
+		},
+		compoundVariants: [
+			{ color: 'success', variant: 'soft', class: { root: 'bg-(--rc-success-soft)' } },
+			{ color: 'info', variant: 'soft', class: { root: 'bg-(--rc-info-soft)' } },
+			{ color: 'warning', variant: 'soft', class: { root: 'bg-(--rc-warning-soft)' } },
+			{ color: 'error', variant: 'soft', class: { root: 'bg-(--rc-error-soft)' } },
+		],
 	},
 	card: {
 		slots: {