refactor(components): replace all hardcoded colors with semantic tokens
Replaces bg-white, text-brand-navy, border-brand-sand, text-gray-*, bg-[#2A2A2A], bg-brand-purple/15, hover:bg-brand-sand, etc. across all 35 .svelte files with semantic token utilities (bg-surface, text-ink, border-line, bg-pdf-bg, bg-nav-active, bg-muted, text-accent, bg-primary, ...). Also adds CSS filter: invert(1) in layout.css for De Gruyter <img> icons in dark mode, excluding icons that carry .invert already (to prevent double-inversion). Closes #64 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Marcel
@@ -41,7 +41,7 @@ function handleBirthDateInput(e: Event) {
|
||||
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<a
|
||||
href="/admin"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
|
||||
@@ -55,7 +55,7 @@ function handleBirthDateInput(e: Event) {
|
||||
{m.btn_back_to_overview()}
|
||||
</a>
|
||||
|
||||
<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">
|
||||
<h1 class="mb-6 font-serif text-3xl font-bold text-ink">
|
||||
{m.admin_user_edit_heading({ username: data.editUser.username })}
|
||||
</h1>
|
||||
|
||||
@@ -72,8 +72,8 @@ function handleBirthDateInput(e: Event) {
|
||||
|
||||
<form method="POST" use:enhance class="space-y-6">
|
||||
<!-- Profile card -->
|
||||
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_section_personal()}
|
||||
</h2>
|
||||
|
||||
@@ -81,7 +81,7 @@ function handleBirthDateInput(e: Event) {
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
||||
>
|
||||
{m.profile_label_first_name()}
|
||||
</span>
|
||||
@@ -89,13 +89,13 @@ function handleBirthDateInput(e: Event) {
|
||||
type="text"
|
||||
name="firstName"
|
||||
value={data.editUser.firstName ?? ''}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase"
|
||||
>
|
||||
{m.profile_label_last_name()}
|
||||
</span>
|
||||
@@ -103,15 +103,13 @@ function handleBirthDateInput(e: Event) {
|
||||
type="text"
|
||||
name="lastName"
|
||||
value={data.editUser.lastName ?? ''}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_birth_date()}
|
||||
</span>
|
||||
<input
|
||||
@@ -119,36 +117,32 @@ function handleBirthDateInput(e: Event) {
|
||||
placeholder="TT.MM.JJJJ"
|
||||
value={birthDateDisplay}
|
||||
oninput={handleBirthDateInput}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
<input type="hidden" name="birthDate" value={birthDateIso} />
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_email()}
|
||||
</span>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
value={data.editUser.email ?? ''}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_contact()}
|
||||
</span>
|
||||
<textarea
|
||||
name="contact"
|
||||
rows="3"
|
||||
placeholder={m.profile_contact_placeholder()}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
>{data.editUser.contact ?? ''}</textarea
|
||||
>
|
||||
</label>
|
||||
@@ -156,8 +150,8 @@ function handleBirthDateInput(e: Event) {
|
||||
</div>
|
||||
|
||||
<!-- Groups card -->
|
||||
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_groups()}
|
||||
</h2>
|
||||
|
||||
@@ -169,7 +163,7 @@ function handleBirthDateInput(e: Event) {
|
||||
name="groupIds"
|
||||
value={group.id}
|
||||
checked={data.editUser.groups?.some((g: { id: string }) => g.id === group.id)}
|
||||
class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
|
||||
class="rounded border-gray-300 text-ink focus:ring-accent"
|
||||
/>
|
||||
{group.name}
|
||||
</label>
|
||||
@@ -178,35 +172,31 @@ function handleBirthDateInput(e: Event) {
|
||||
</div>
|
||||
|
||||
<!-- Password card -->
|
||||
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<h2 class="mb-5 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_label_new_password_optional()}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_new_password()}
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
name="newPassword"
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_new_password_confirm()}
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
name="confirmPassword"
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
@@ -214,17 +204,17 @@ function handleBirthDateInput(e: Event) {
|
||||
|
||||
<!-- Save bar -->
|
||||
<div
|
||||
class="border-brand-sand sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t bg-white px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
|
||||
class="sticky bottom-0 z-10 -mx-4 flex items-center justify-between border-t border-line bg-surface px-6 py-4 shadow-[0_-2px_8px_rgba(0,0,0,0.06)]"
|
||||
>
|
||||
<a
|
||||
href="/admin"
|
||||
class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
|
||||
class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
|
||||
class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
|
||||
>
|
||||
{m.btn_save()}
|
||||
</button>
|
||||
|
||||
@@ -31,7 +31,7 @@ function handleBirthDateInput(e: Event) {
|
||||
<div class="mx-auto max-w-3xl px-4 py-8 sm:px-6 lg:px-8">
|
||||
<a
|
||||
href="/admin"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-gray-500 uppercase transition-colors hover:text-brand-navy"
|
||||
class="group mb-4 inline-flex items-center text-xs font-bold tracking-widest text-ink-2 uppercase transition-colors hover:text-ink"
|
||||
>
|
||||
<svg
|
||||
class="mr-2 h-4 w-4 transform transition-transform group-hover:-translate-x-1"
|
||||
@@ -45,7 +45,7 @@ function handleBirthDateInput(e: Event) {
|
||||
{m.btn_back_to_overview()}
|
||||
</a>
|
||||
|
||||
<h1 class="mb-6 font-serif text-3xl font-bold text-brand-navy">{m.admin_user_new_heading()}</h1>
|
||||
<h1 class="mb-6 font-serif text-3xl font-bold text-ink">{m.admin_user_new_heading()}</h1>
|
||||
|
||||
{#if form?.error}
|
||||
<div class="mb-5 rounded border border-red-200 bg-red-50 p-3 text-sm text-red-700">
|
||||
@@ -53,118 +53,104 @@ function handleBirthDateInput(e: Event) {
|
||||
</div>
|
||||
{/if}
|
||||
|
||||
<div class="border-brand-sand rounded-sm border bg-white p-6 shadow-sm">
|
||||
<div class="rounded-sm border border-line bg-surface p-6 shadow-sm">
|
||||
<form method="POST" use:enhance class="space-y-5">
|
||||
<!-- Account -->
|
||||
<h2 class="text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
<h2 class="text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_section_users()}
|
||||
</h2>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_login()}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
name="username"
|
||||
required
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_label_initial_password()}
|
||||
</span>
|
||||
<input
|
||||
type="password"
|
||||
name="password"
|
||||
required
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<!-- Profile -->
|
||||
<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_section_personal()}
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_first_name()}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
name="firstName"
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_last_name()}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
name="lastName"
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_birth_date()}
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="TT.MM.JJJJ"
|
||||
oninput={handleBirthDateInput}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
<input type="hidden" name="birthDate" value={birthDateIso} />
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_email()}
|
||||
</span>
|
||||
<input
|
||||
type="email"
|
||||
name="email"
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
/>
|
||||
</label>
|
||||
|
||||
<label class="block">
|
||||
<span
|
||||
class="mb-1 block font-sans text-xs font-bold tracking-widest text-gray-400 uppercase"
|
||||
>
|
||||
<span class="mb-1 block font-sans text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.profile_label_contact()}
|
||||
</span>
|
||||
<textarea
|
||||
name="contact"
|
||||
rows="3"
|
||||
placeholder={m.profile_contact_placeholder()}
|
||||
class="border-brand-sand w-full rounded-sm border px-3 py-2 font-serif text-sm focus:border-brand-navy focus:outline-none"
|
||||
class="w-full rounded-sm border border-line px-3 py-2 font-serif text-sm focus:border-ink focus:outline-none"
|
||||
></textarea>
|
||||
</label>
|
||||
|
||||
<!-- Groups -->
|
||||
<h2 class="pt-2 text-xs font-bold tracking-widest text-gray-400 uppercase">
|
||||
<h2 class="pt-2 text-xs font-bold tracking-widest text-ink-3 uppercase">
|
||||
{m.admin_col_groups()}
|
||||
</h2>
|
||||
|
||||
@@ -175,7 +161,7 @@ function handleBirthDateInput(e: Event) {
|
||||
type="checkbox"
|
||||
name="groupIds"
|
||||
value={group.id}
|
||||
class="rounded border-gray-300 text-brand-navy focus:ring-brand-mint"
|
||||
class="rounded border-gray-300 text-ink focus:ring-accent"
|
||||
/>
|
||||
{group.name}
|
||||
</label>
|
||||
@@ -184,17 +170,17 @@ function handleBirthDateInput(e: Event) {
|
||||
|
||||
<!-- Save bar -->
|
||||
<div
|
||||
class="border-brand-sand mt-4 flex items-center justify-between rounded-sm border bg-white px-6 py-4 shadow-sm"
|
||||
class="mt-4 flex items-center justify-between rounded-sm border border-line bg-surface px-6 py-4 shadow-sm"
|
||||
>
|
||||
<a
|
||||
href="/admin"
|
||||
class="font-sans text-xs font-bold tracking-widest text-gray-500 uppercase hover:text-brand-navy"
|
||||
class="font-sans text-xs font-bold tracking-widest text-ink-2 uppercase hover:text-ink"
|
||||
>
|
||||
{m.btn_cancel()}
|
||||
</a>
|
||||
<button
|
||||
type="submit"
|
||||
class="rounded-sm bg-brand-navy px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
|
||||
class="rounded-sm bg-primary px-5 py-2 font-sans text-xs font-bold tracking-widest text-white uppercase transition-opacity hover:opacity-80"
|
||||
>
|
||||
{m.btn_create()}
|
||||
</button>
|
||||
|
||||
Reference in New Issue
Block a user