fix(components): replace remaining unthemed gray classes with semantic tokens
Replace text-gray-*, bg-gray-*, border-gray-*, divide-gray-*, placeholder-gray-*, focus:border-blue-*, focus:ring-blue-*, hover:bg-blue-*, and ring-brand-mint with their semantic-token equivalents (text-ink, bg-muted, border-line, etc.) across all pages and shared components so dark mode renders correctly everywhere. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -157,13 +157,13 @@ function handleBirthDateInput(e: Event) {
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{#each data.groups as group (group.id)}
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-ink-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="groupIds"
|
||||
value={group.id}
|
||||
checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
|
||||
class="rounded border-gray-300 text-ink focus:ring-accent"
|
||||
class="rounded border-line text-ink focus:ring-accent"
|
||||
/>
|
||||
{group.name}
|
||||
</label>
|
||||
|
||||
@@ -156,12 +156,12 @@ function handleBirthDateInput(e: Event) {
|
||||
|
||||
<div class="flex flex-wrap gap-3">
|
||||
{#each data.groups as group (group.id)}
|
||||
<label class="inline-flex items-center gap-2 text-sm text-gray-700">
|
||||
<label class="inline-flex items-center gap-2 text-sm text-ink-2">
|
||||
<input
|
||||
type="checkbox"
|
||||
name="groupIds"
|
||||
value={group.id}
|
||||
class="rounded border-gray-300 text-ink focus:ring-accent"
|
||||
class="rounded border-line text-ink focus:ring-accent"
|
||||
/>
|
||||
{group.name}
|
||||
</label>
|
||||
|
||||
Reference in New Issue
Block a user