Tokens · Accessibility

Focus ring

Tüm odaklanabilir öğelerin etrafına çizilen iki katmanlı halka. İç katman 2px offset (yüzey rengi), dış katman 2px halka (vurgu rengi). Üç varyant: light surface, dark surface ve destructive aksiyon. Yalnızca :focus-visible ile uygulanır — fare tıklamasında görünmez.

01 · Anatomi

2px offset + 2px ring + 8px gap
Hemen Konuşalım 2px offset surface color 2px ring primary-400 / #10b981 Hedef element

02 · Üç varyant

Yüzey rengine ve aksiyonun tonuna göre seçilir
Default · light surface
--nb-focus-ring
Danger · destructive
--nb-focus-ring-danger
Dark · marketing / auth shell
--nb-focus-ring-dark

03 · Bileşen → varyant matrisi

Buton (primary, secondary, ghost)--nb-focus-ring
Buton — destructive--nb-focus-ring-danger
Buton — marketing/auth (dark bg)--nb-focus-ring-dark
Input · select · textarea--nb-focus-ring + border-primary
Input — invalid--nb-focus-ring-danger + border-danger
Checkbox · radio · switch--nb-focus-ring (box'a değil, label hit'e)
Tab · pagination · breadcrumb link--nb-focus-ring (8px radius)
Sidebar nav item--nb-focus-ring (item radius'una uyum)
Kanban kart (klavye sürükle)--nb-focus-ring
Modal close · drawer close--nb-focus-ring (icon button)

Kurallar

· Sadece :focus-visible ile uygula — fare tıklaması ring çizmez. :focus'a yapışma.
· outline kullanma — box-shadow tabanlı çift halka anti-alias bakımından daha temizdir ve border-radius'u takip eder.
· İç offset rengi her zaman elementin arkasındaki yüzey rengidir; iç içe kart varsa parent surface'i referans al.
· Ring kalınlığı 2px sabit; offset 2px sabit. Toplam etki bandı 4px. Hover ile birleşmez (focus ring her zaman üstte).
· Disabled element odaklanamaz → ring de yok. Ancak aria-disabled="true" ile odaklanabilir kalan elementlere ring uygulanır.
· WCAG 2.4.7 (Focus Visible) ve 2.4.11 (Focus Not Obscured) gereği — sticky header altına gizlenmesin diye sticky header z-index'i ile scroll-margin-top: 64px ekle.