Harakat · primitive
Fokus, holat qatlami va kontrast
Özaro ta'sir poydevori. Fokus halqasi oilasi (4.10): taşqi (standart), içki (data-ring="inset" — qirqiladigan konteyner, jadval katagi), ikki qavatli halo (rangli/qoronği fonda ham körinadi) va contrast (halqa matn rangida — brend banner, rels ustida); bitta elementga fx-focus-ring yoki butun blokka fx-focus-scope. Holat qatlami (4.17): fx-state — yuzada bitta qoplama, hover 8 % · fokus 10 % · bosiş 10 % · sudraş 16 %, rangi matn rangidan (har mavzu va fonda özi töğri). Yuqori kontrast (4.15): prefers-contrast: more yoki data-fx-contrast="more" — çegaralar va xira matn töqlaşadi, fokus halqasi qalinlaşadi, havolalar tagiga çiziladi.
- Dilnoza Rahimova — 3 ta oçiq bitim
- Sardor Toʻxtayev — qönğiroq kutilmoqda
- Ğayrat Olimov — yangi mijoz
Yuqori kontrast: xira matn töqlaşgan, havola tagiga çizilgan.
Variantlar
| Atribut | Qiymatlar | Standart |
|---|---|---|
data-ring | outsideinsethalocontrast | outside |
data-state-layer | current matn rangibrandselected doimiy tanlangan qoplama | current |
data-fx-contrast | system prefers-contrastmorenormal tizim sozlamasini bekor qiladi | system |
Anatomiya
- ring
.fx-focus-ringşart - scope
.fx-focus-scopeixtiyoriy - state-layer
.fx-stateixtiyoriy
Holatlar
Klaviatura va kiriş
Fokus körinişi WCAG 2.4.7 / 2.4.11: halqa 2 px (kontrast rejimida 3 px), halo rangli fonda ham 3:1 dan yuqori. Holat qatlami pointer-events: none — bosişga xalaqit bermaydi; forced-colors'da öçadi (tizim özi çizadi). prefers-contrast: more avtomatik qöllanadi.
Kod
AI uçun: qaçon işlatiladi
- Yangi interaktiv yuza (röyxat bandi, karta, chip) — hover/bosiş rangini tanlaş örniga fx-state.
- Rangli yoki rasmli fon ustidagi tugma va havolalar — data-ring="halo" yoki "contrast".
- Mijoz loyihasida «yuqori kontrast» sozlamasi — data-fx-contrast.
- Tugmaning öz hover rangi yetarli →
button - Tanlov guruhi (bir neçtadan biri) →
togglegroup - outline: none qoʻyib fokusni yashirmang — halqa turini (data-ring) almashtiring.
- Holat qatlami rangini qölda tanlamang — u matn rangidan oladi; brend tusi kerak bölsa data-state-layer="brand".
- Holatni faqat qoplama bilan bildirmang: tanlangan bandda aria-selected / aria-current ham bölsin.
- Kontrast rejimini «qoronği rejim» bilan almaştirmang — ular alohida öqlar.
npx foxui add focus
<div class="fx-cluster" data-gap="3"> <button class="fx-btn fx-focus-ring">Taşqi halqa</button> <button class="fx-btn fx-focus-ring" data-ring="inset">Içki halqa</button> <button class="fx-btn fx-focus-ring" data-ring="halo" data-variant="primary">Halo</button> </div> <div class="fx-focus-scope" data-ring="contrast" style="margin-block-start: var(--fx-space-4); padding: var(--fx-space-4); border-radius: var(--fx-radius-surface); background: var(--fx-bg-brand-solid); color: var(--fx-text-on-brand)"> Tarifingiz 3 kundan keyin tugaydi. <a href="#" style="color: inherit">Uzaytiriş</a> </div> <ul class="fx-list" style="margin-block-start: var(--fx-space-4)"> <li><a class="fx-list__link fx-state" href="#">Dilnoza Rahimova — 3 ta oçiq bitim</a></li> <li><a class="fx-list__link fx-state" href="#" aria-current="page">Sardor Toʻxtayev — qönğiroq kutilmoqda</a></li> <li><a class="fx-list__link fx-state" href="#" data-state-layer="brand">Ğayrat Olimov — yangi mijoz</a></li> </ul> <section data-fx-contrast="more" style="margin-block-start: var(--fx-space-4)"> <p class="fx-text" data-tone="tertiary">Yuqori kontrast: xira matn töqlaşgan, <a href="#">havola</a> tagiga çizilgan.</p> <input class="fx-input" placeholder="Mijoz ismi" aria-label="Mijoz ismi"> </section>
Tokenlar: --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-color-neutral-200 --fx-color-neutral-300 --fx-color-neutral-500 --fx-color-neutral-700 --fx-color-neutral-800 --fx-ease-standard --fx-focus-halo --fx-focus-inset --fx-focus-offset --fx-knob-outline --fx-motion-fast --fx-state-drag --fx-state-focus --fx-state-hover --fx-state-press --fx-text-brand