Foundations — Interaction States & Focus Ring
Her interactive element için 5 zorunlu state. Focus ring sadece :focus-visible üzerinden uygulanır — fare tıklamasında halka görünmez, klavye Tab'ında görünür.
State Visual treatment Token
Default Base styling — surface, border, color rolünden gelir
Hover Background bir adım koyulaşır; color tek adım netleşir; cursor: pointer --nb-state-hover-bg · --nb-duration-fast
Active / Pressed Background iki adım koyulaşır; transform: none (shrink-on-press yok) --nb-state-active-bg
Focus-visible 2px surface offset + 2px renkli ring. Hover ile birlikte gösterilebilir. --nb-focus-ring · --nb-focus-ring-dark · --nb-focus-ring-danger
Disabled Opacity 0.5; pointer-events: none; tooltip ile sebebi açıklanır --nb-state-disabled-opacity
Light surface · emerald ring
Dark surface · white halo ring
Danger action · red ring
var(--nb-focus-ring-danger)
↹ Tab edin: emerald ring çıkar. Mouse ile tıklayın: çıkmaz.