refactor: replace hardcoded colours with semantic tokens

This commit is contained in:
2026-08-11 20:08:53 -04:00
parent f36aa14463
commit f68a233dca
7 changed files with 26 additions and 23 deletions
@@ -31,8 +31,8 @@
selectedState.toggleSelection(book);
}}
class="{selectedState.isSelected(book.id)
? 'scale-110 text-yellow-300'
: 'scale-75 text-white'} transition-all hover:scale-110 hover:cursor-pointer hover:text-yellow-300"
? 'scale-110 text-star'
: 'scale-75 text-white'} transition-all hover:scale-110 hover:cursor-pointer hover:text-star"
/>
</div>
{#if selectedState.isSelected(book.id)}
@@ -42,7 +42,7 @@
: 'opacity-0'} transition-opacity group-hover:opacity-100"
>
<Circle
class="yellow-300 scale-50 fill-yellow-300 text-yellow-300 transition-all hover:scale-75 hover:cursor-pointer hover:text-yellow-300"
class="scale-50 fill-star text-star transition-all hover:scale-75 hover:cursor-pointer hover:text-star"
/>
</div>
{/if}
@@ -54,7 +54,7 @@
<DropdownMenu.Root>
<DropdownMenu.Trigger>
<EllipsisVertical
class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-yellow-300"
class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-star"
/>
</DropdownMenu.Trigger>
<DropdownMenu.Content>
@@ -89,7 +89,7 @@
class="absolute right-2 bottom-20 z-50 inline-flex items-center opacity-0 transition-opacity group-hover:opacity-100"
>
<Pencil
class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-yellow-300"
class="scale-75 text-white transition-all hover:scale-110 hover:cursor-pointer hover:text-star"
onclick={() => {
bookOps.bookToEdit = book;
bookOps.editDialogOpen = true;