From 1421152a9356c7def86143dfb31a3586d5491d55 Mon Sep 17 00:00:00 2001
From: Wolfgang Müller
Date: Fri, 14 Feb 2025 11:57:03 +0100
Subject: frontend: Migrate to Tailwind 4.0

---
 frontend/src/lib/pills/AssociationPill.svelte | 34 ++++++++++++---------------
 frontend/src/lib/pills/Pill.svelte            |  4 +++-
 2 files changed, 18 insertions(+), 20 deletions(-)

(limited to 'frontend/src/lib/pills')

diff --git a/frontend/src/lib/pills/AssociationPill.svelte b/frontend/src/lib/pills/AssociationPill.svelte
index ffbc8c4..fec59b8 100644
--- a/frontend/src/lib/pills/AssociationPill.svelte
+++ b/frontend/src/lib/pills/AssociationPill.svelte
@@ -1,31 +1,27 @@
 <script lang="ts">
+	import Artist from '$lib/icons/Artist.svelte';
+	import Character from '$lib/icons/Character.svelte';
+	import Circle from '$lib/icons/Circle.svelte';
+	import World from '$lib/icons/World.svelte';
+	import type { Component } from 'svelte';
 	import Pill from './Pill.svelte';
 
 	type Association = 'artist' | 'circle' | 'world' | 'character';
 
 	let { name, type }: { name: string; type: Association } = $props();
+
+	const icons: Record<Association, Component> = {
+		artist: Artist,
+		character: Character,
+		circle: Circle,
+		world: World
+	};
+
+	const Icon = icons[type];
 </script>
 
 <Pill {name}>
 	{#snippet icon()}
-		<span class={`${type} icon-xs`}></span>
+		<Icon />
 	{/snippet}
 </Pill>
-
-<style lang="postcss">
-	.artist {
-		@apply icon-[material-symbols--person] -mx-px;
-	}
-
-	.character {
-		@apply icon-[material-symbols--face];
-	}
-
-	.circle {
-		@apply icon-[material-symbols--group] mx-px;
-	}
-
-	.world {
-		@apply icon-[material-symbols--public];
-	}
-</style>
diff --git a/frontend/src/lib/pills/Pill.svelte b/frontend/src/lib/pills/Pill.svelte
index 24d617d..5d5b5a8 100644
--- a/frontend/src/lib/pills/Pill.svelte
+++ b/frontend/src/lib/pills/Pill.svelte
@@ -15,12 +15,14 @@
 	let { name, tooltip, colour = 'zinc', icon }: Props = $props();
 </script>
 
-<div class="flex items-center rounded border p-0.5 {colour}" title={tooltip}>
+<div class="flex items-center rounded-sm border p-0.5 {colour}" title={tooltip}>
 	{@render icon?.()}
 	<span>{name}</span>
 </div>
 
 <style lang="postcss">
+	@reference "tailwindcss/theme"
+
 	.pink {
 		@apply border-pink-800 bg-pink-800/20 text-pink-200;
 	}
-- 
cgit v1.2.3-2-gb3c3