Fix multiselect styling

frontend/src/lib/components/select/DraggableTags.svelte

@@ -30,7 +30,7 @@
 		role="listitem"
 		class={twMerge(
 			allowClear ? 'pr-1' : 'pr-3',
-			'pl-3 min-h-6 bg-surface-secondary rounded-full flex items-center gap-0.5',
+			'pl-3 min-h-6 border bg-surface rounded-full flex items-center gap-0.5',
 			currentlyDraggingIndex !== undefined ? 'hover:opacity-20' : ''
 		)}
 		style={currentlyDraggingIndex === index
@@ -54,7 +54,7 @@
 		<span class="text-sm select-none">{item.label || item.value}</span>
 		{#if allowClear}
 			<CloseButton
-				class="text-tertiary"
+				class="text-hint bg-transparent"
 				small
 				on:close={(e) => (onRemove(item), e.stopPropagation())}
 			/>

frontend/src/lib/components/select/MultiSelect.svelte

@@ -7,6 +7,7 @@
 	import DraggableTags from './DraggableTags.svelte'
 	import { Search } from 'lucide-svelte'
 	import { twMerge } from 'tailwind-merge'
+	import TextInput, { inputBorderClass } from '../text_input/TextInput.svelte'
 
 	type Value = Item['value']
 
@@ -59,7 +60,7 @@
 	let filterText = $state<string>('')
 	let open = $state<boolean>(false)
 	let wrapperEl: HTMLDivElement | undefined = $state()
-	let searchInputEl: HTMLInputElement | undefined = $state()
+	let searchInputEl: TextInput | undefined = $state()
 
 	$effect(() => searchInputEl?.focus())
 
@@ -99,7 +100,8 @@
 <div
 	bind:this={wrapperEl}
 	class={twMerge(
-		'relative min-h-8 flex items-center w-full bg-surface border border-gray-300 rounded-md text-tertiary',
+		'relative min-h-10 flex items-center w-full bg-surface-secondary text-tertiary rounded-md',
+		inputBorderClass({ forceFocus: open && !disabled }),
 		disabled ? 'pointer-events-none' : '',
 		open && !disabled ? 'open' : '',
 		disabled ? 'disabled' : '',
@@ -113,7 +115,9 @@
 	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
 
 	{#if value.length === 0}
-		<span class={twMerge('text-sm ml-2 h-full flex items-center flex-1', placeholderClass)}>
+		<span
+			class={twMerge('text-sm ml-4 h-full flex items-center flex-1 text-hint', placeholderClass)}
+		>
 			{placeholder}
 		</span>
 	{:else}
@@ -134,10 +138,10 @@
 			/>
 		</ul>
 	{/if}
-	{#if allowClear && !hideMainClearBtn}
+	{#if allowClear && !hideMainClearBtn && !!value?.length}
 		<CloseButton
 			noBg
-			class="mr-1 remove-all"
+			class="mr-1 remove-all bg-transparent text-hint"
 			small
 			on:close={(e) => (clearValue(), e.stopPropagation())}
 		/>
@@ -163,12 +167,14 @@
 		{#snippet header()}
 			{#if processedItems.length - value.length > 0 || onCreateItem}
 				<div class="mx-2 mb-1 mt-2 flex items-center relative">
-					<input
+					<TextInput
 						bind:this={searchInputEl}
 						bind:value={filterText}
-						onblur={(e) => (e.preventDefault(), searchInputEl?.focus())}
-						placeholder="Search"
-						class="!pr-7"
+						inputProps={{
+							onblur: (e) => (e.preventDefault(), searchInputEl?.focus()),
+							placeholder: 'Search...'
+						}}
+						class="!pr-7 !bg-surface"
 					/>
 					<Search size={16} class="absolute right-2 text-tertiary" />
 				</div>

frontend/src/lib/components/select/Select.svelte

@@ -7,7 +7,7 @@
 	import { getLabel, processItems, type ProcessedItem } from './utils.svelte'
 	import SelectDropdown from './SelectDropdown.svelte'
 	import { deepEqual } from 'fast-equals'
-	import { inputBorderClass } from '../text_input/TextInput.svelte'
+	import { inputBaseClass, inputBorderClass } from '../text_input/TextInput.svelte'
 
 	type Value = Item['value']
 
@@ -123,7 +123,7 @@
 		</div>
 	{:else if clearable && !disabled && value}
 		<div class="absolute z-10 right-2 h-full flex items-center">
-			<CloseButton class="text-secondary bg-transparent" noBg small on:close={clearValue} />
+			<CloseButton class="bg-transparent text-hint" noBg small on:close={clearValue} />
 		</div>
 	{:else if RightIcon}
 		<div class="absolute z-10 right-2 h-full flex items-center">
@@ -141,10 +141,11 @@
 			: (valueEntry?.label ?? getLabel({ value }) ?? placeholder)}
 		style={containerStyle}
 		class={twMerge(
-			'no-default-style !bg-surface-secondary text-ellipsis focus:ring-0 disabled:cursor-not-allowed rounded-md text-sm w-full',
+			inputBaseClass,
 			inputBorderClass({ error, forceFocus: open }),
+			'w-full',
 			open ? '' : 'cursor-pointer',
-			!loading && value ? 'placeholder-primary' : '',
+			!loading && value ? 'placeholder-primary' : 'placeholder-hint',
 			(clearable || RightIcon) && !disabled && value ? 'pr-8' : '',
 			inputClass ?? ''
 		)}

frontend/src/lib/components/text_input/TextInput.svelte

@@ -32,6 +32,12 @@
 		error?: string
 	}
 
+	export function focus() {
+		inputEl?.focus()
+	}
+
+	let inputEl: HTMLInputElement | undefined = $state()
+
 	let { inputProps, value = $bindable(), class: className = '', error }: Props = $props()
 </script>
 
@@ -44,5 +50,6 @@
 		inputBorderClass({ error: !!error }),
 		className
 	)}
+	bind:this={inputEl}
 	bind:value
 />