feat(focus-rings): branded focus ring tokens (#167) #170

Merged
marcel merged 8 commits from feat/issue-167-focus-ring-tokens into main 2026-03-31 17:05:10 +02:00
3 changed files with 5 additions and 5 deletions
Showing only changes of commit 527d174e9c - Show all commits

View File

@@ -71,7 +71,7 @@ $effect(() => {
placeholder={m.form_placeholder_date()}
maxlength="10"
class="block w-full rounded border border-line p-2 text-sm shadow-sm
{dateInvalid ? 'border-red-400 focus:border-red-500 focus:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
{dateInvalid ? 'border-red-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-red-500' : 'focus:outline-none focus-visible:ring-2 focus-visible:ring-focus-ring'}"
aria-describedby={dateInvalid ? 'date-error' : undefined}
/>
<input type="hidden" name="documentDate" value={dateIso} />

View File

@@ -31,7 +31,7 @@ let {
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender -->
<div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
@@ -73,7 +73,7 @@ let {
<!-- Receiver -->
<div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="receiverId"

View File

@@ -31,7 +31,7 @@ let {
<div class="mb-6 grid grid-cols-1 items-end gap-4 md:grid-cols-[1fr_auto_1fr] md:gap-6">
<!-- Sender -->
<div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="senderId"
@@ -73,7 +73,7 @@ let {
<!-- Receiver -->
<div
class="[[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-2 [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus-visible:ring-focus-ring [[&_input]:focus:border-ink [&_input]:focus:ring-ink_input]:focus:outline-none relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
class="relative z-30 [&_input]:border-line [&_input]:py-2.5 [&_label]:mb-2 [&_label]:text-xs [&_label]:font-bold [&_label]:tracking-widest [&_label]:text-ink-2 [&_label]:uppercase"
>
<PersonTypeahead
name="receiverId"