Fixed dark mode styling of previous commit

Author: dterefe

DUUIWeb/src/lib/svelte/components/AnnotationChip.svelte

@@ -12,14 +12,14 @@
 	const toastStore = getToastStore()
 
 	const inputContainerClass =
-		'relative flex flex-wrap gap-3 px-2 pb-1 m-4 bg-surface-100 rounded-md p-2'
+		'relative flex flex-wrap gap-3 px-2 pb-1 m-4 bg-surface-100-800-token rounded-md p-2'
 	const outputContainerClass =
-		'relative flex flex-wrap items-end justify-end gap-3 px-2 pb-1 m-4 bg-surface-100 rounded-md p-2'
+		'relative flex flex-wrap items-end justify-end gap-3 px-2 pb-1 m-4 bg-surface-100-800-token rounded-md p-2'
 
 	const inputChipClass =
-		'uima-chip-input relative inline-flex items-center px-4 py-2 pr-8 variant-soft-primary border text-sm rounded-md'
+		'uima-chip-input relative inline-flex items-center px-4 py-2 pr-8 variant-soft-primary text-sm rounded-md'
 	const outputChipClass =
-		'uima-chip-output relative inline-flex items-center px-4 py-2 pr-8 variant-soft-primary border text-sm rounded-md'
+		'uima-chip-output relative inline-flex items-center px-4 py-2 pr-8 variant-soft-primary text-sm rounded-md'
 </script>
 
 <div
@@ -31,8 +31,8 @@
 >
 	<span
 		class={connector === 'input'
-			? 'absolute -top-3 left-3 bg-surface-100 px-2 text-xs rounded-md text-surface-400 font-medium'
-			: 'absolute -top-3 right-3 bg-surface-100 px-2 text-xs rounded-md text-surface-400 font-medium'}
+			? 'absolute -top-3 left-3 bg-surface-100-800-token px-2 text-xs rounded-md text-surface-400-900-token font-medium'
+			: 'absolute -top-3 right-3 bg-surface-100-800-token px-2 text-xs rounded-md text-surface-400-900-token font-medium'}
 	>
 		{connector === 'input' ? 'Input' : 'Output'}
 	</span>

DUUIWeb/src/lib/svelte/components/LayeredPipelineComponents.svelte

@@ -353,7 +353,7 @@ let hoveredComponentId: string | null = null
 </script>
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
-	class="relative min-h-[400px]  lg:max-w-[70%] md:p-4 overflow-hidden mx-auto bg-surface-100 rounded-md"
+	class="relative min-h-[400px]  lg:max-w-[70%] md:p-4 overflow-hidden mx-auto bg-surface-100-700-token rounded-md"
 	bind:this={viewport}
 	on:wheel|preventDefault={handleWheel}
 	on:mousedown={handleCanvasMouseDown}
@@ -399,8 +399,8 @@ let hoveredComponentId: string | null = null
 					class={`opacity-80 transition-colors ${
 						hoveredComponentId &&
 						(edge.fromId === hoveredComponentId || edge.toId === hoveredComponentId)
-							? 'text-primary-700'
-							: 'text-primary-200'
+							? 'text-primary-800-100-token'
+							: 'text-primary-100-800-token'
 					}`}
 					stroke="currentColor"
 					stroke-width="3"