1. root.fx-articleşart
2. header.fx-article__headerşart
3. kicker.fx-article__kickerixtiyoriy
4. back.fx-article__backixtiyoriy
5. category.fx-article__categoryixtiyoriy
6. title (h1).fx-article__titleşart
7. lead.fx-article__leadixtiyoriy
8. byline.fx-article__bylineixtiyoriy
9. author.fx-article__authorixtiyoriy
10. cover.fx-article__coverixtiyoriy
11. caption.fx-article__captionixtiyoriy
12. layout (3 ustun).fx-article__layoutşart
13. share.fx-article__shareixtiyoriy
14. share-label.fx-article__share-labelixtiyoriy
15. share-btn.fx-article__share-btnixtiyoriy
16. body (fx-prose).fx-article__bodyşart
17. aside (details + fx-toc).fx-article__asideixtiyoriy
18. footer.fx-article__footerixtiyoriy
19. tags.fx-article__tagsixtiyoriy
20. bio.fx-article__bioixtiyoriy
21. bio-name.fx-article__bio-nameixtiyoriy
22. bio-role.fx-article__bio-roleixtiyoriy
23. bio-text.fx-article__bio-textixtiyoriy
24. related (fx-blog).fx-article__relatedixtiyoriy
25. related-title.fx-article__related-titleixtiyoriy

<article aria-labelledby> + h1; matndagi h2’lar id bilan — mundarija (<nav aria-label>, fx-toc: aria-current) ularga olib boradi. Ulaşiş — röyxat (<ul aria-label="Ulaşiş">), har tugma aria-label bilan, yangi oynada oçiladi (rel="noopener"); «Nusxalaş» — fx-copy: natija role="status" orqali aytiladi. Tor ekranda mundarija <details>/<summary> — Enter/Space bilan oçiladi. Avatar aria-hidden (ism matnda), sana <time datetime>.

Naqş: WAI-ARIA APG landmarks · rol article

npx foxui add article

<article class="fx-article" aria-labelledby="ar-t">
  <header class="fx-article__header">
    <p class="fx-article__kicker"><a class="fx-article__back" href="#">Blog</a><a class="fx-article__category" href="#">Qöllanma</a></p>
    <h1 class="fx-article__title" id="ar-t">Tokenlar bilan mavzu yasaş: bitta HEX'dan butun palitragaça</h1>
    <p class="fx-article__lead">Brend rangingizni bergan holda kontrast qöriqçisidan ötadigan yoruğ va qoronği mavzuni qanday oliş mumkin — qadamma-qadam, kod bilan.</p>
    <div class="fx-article__byline"><span class="fx-avatar" data-size="sm" data-color="green" aria-hidden="true">DY</span><a class="fx-article__author" href="#">Dilnoza Yusupova</a><time datetime="2026-10-16">16-oktabr 2026</time><span>9 daqiqa öqiş</span></div>
  </header>
  <figure class="fx-article__cover" data-color="purple" aria-hidden="true"></figure>
  <div class="fx-article__layout">
    <ul class="fx-article__share" aria-label="Ulaşiş">
      <li class="fx-article__share-label" aria-hidden="true">Ulaşiş</li>
      <li><a class="fx-article__share-btn" href="https://t.me/share/url?url=https%3A%2F%2Ffoxui.dev%2Fblog%2Ftokenlar" target="_blank" rel="noopener" aria-label="Telegram'da ulaşiş"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 4 3 11l6 2 2 6 3-4 5 4z"/></svg></a></li>
      <li><a class="fx-article__share-btn" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Ffoxui.dev%2Fblog%2Ftokenlar" target="_blank" rel="noopener" aria-label="Facebook'da ulaşiş"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M15 3h-2a4 4 0 0 0-4 4v3H7v4h2v7h4v-7h3l1-4h-4V7a1 1 0 0 1 1-1h2z"/></svg></a></li>
      <li><a class="fx-article__share-btn" href="https://x.com/intent/post?url=https%3A%2F%2Ffoxui.dev%2Fblog%2Ftokenlar" target="_blank" rel="noopener" aria-label="X'da ulaşiş"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l16 16M20 4 4 20"/></svg></a></li>
      <li><button class="fx-article__share-btn" type="button" data-fx-copy data-copy="https://foxui.dev/blog/tokenlar" aria-label="Havolani nusxalaş"><svg data-fx-icon="copy" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="9" y="9" width="11" height="11" rx="2"/><path d="M5 15V6a2 2 0 0 1 2-2h9"/></svg><svg data-fx-icon="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m5 12 5 5L20 7"/></svg><span class="fx-copy__status fx-sr-only" role="status"></span></button></li>
    </ul>
    <div class="fx-article__body fx-prose">
      <p>Har bir mijoz brendida bitta-ikkita rang böladi, interfeysga esa önlab rang kerak: fon, çiziq, xato, ogohlantiriş, grafik ranglari. Ularni qölda tanlaş — kontrastni buzişning eng tez yöli.</p>
      <h2 id="ar-1">1. Brend rangidan şkala</h2>
      <p>Generator bitta HEX'dan 50–950 poğonali şkala yasaydi va har poğonani OKLCH'da tekislaydi.</p>
      <pre><code>node scripts/theme.mjs --name zarafshon --brand "#0f766e"</code></pre>
      <h2 id="ar-2">2. Kontrast qöriqçisi</h2>
      <p>Build har mavzu × yoruğ/qoronği juftini WCAG AA böyiça tekşiradi. Matn 4,5:1 dan past bölsa — build töxtaydi.</p>
      <h2 id="ar-3">3. Sahifaga ulaş</h2>
      <p>Mavzu bitta atribut bilan tanlanadi: <code>data-fx-theme="zarafshon"</code>. Komponentlar özgarmaydi.</p>
    </div>
    <details class="fx-article__aside" open>
      <summary>Mundarija</summary>
      <nav class="fx-toc" aria-label="Maqola mundarijasi" data-fx-toc><p class="fx-toc__title">Şu maqolada</p><ul class="fx-toc__list"><li><a class="fx-toc__link" href="#ar-1">Brend rangidan şkala</a></li><li><a class="fx-toc__link" href="#ar-2">Kontrast qöriqçisi</a></li><li><a class="fx-toc__link" href="#ar-3">Sahifaga ulaş</a></li></ul></nav>
    </details>
  </div>
  <footer class="fx-article__footer">
    <ul class="fx-article__tags" aria-label="Teglar"><li><a class="fx-chip" href="#">tokenlar</a></li><li><a class="fx-chip" href="#">mavzular</a></li><li><a class="fx-chip" href="#">kontrast</a></li></ul>
    <div class="fx-article__bio"><span class="fx-avatar" data-size="lg" data-color="green" aria-hidden="true">DY</span><p class="fx-article__bio-name">Dilnoza Yusupova</p><p class="fx-article__bio-role">Dizayn tizimi muhandisi, FoxUI</p><p class="fx-article__bio-text">Tokenlar, mavzular va kontrast qöriqçisi ustida işlaydi. Toşkentda yaşaydi.</p></div>
  </footer>
  <section class="fx-article__related fx-blog" aria-labelledby="ar-rel">
    <h2 class="fx-article__related-title" id="ar-rel">Öxşaş maqolalar</h2>
    <ul class="fx-blog__list">
      <li class="fx-blog__post"><div class="fx-blog__cover" data-color="yellow" aria-hidden="true"></div><div class="fx-blog__content"><a class="fx-blog__category" href="#">Relizlar</a><h3 class="fx-blog__post-title"><a class="fx-blog__link" href="#">0.28: 100 ta yangi naqş va «Işxona»</a></h3><div class="fx-blog__byline"><span class="fx-blog__author"><span><time datetime="2026-10-14">14-oktabr 2026</time> · 5 daq öqiş</span></span></div></div></li>
      <li class="fx-blog__post"><div class="fx-blog__cover" data-color="green" aria-hidden="true"></div><div class="fx-blog__content"><a class="fx-blog__category" href="#">Qöllanma</a><h3 class="fx-blog__post-title"><a class="fx-blog__link" href="#">Klaviatura bilan işlaş: har komponentda nimani tekşiramiz</a></h3><div class="fx-blog__byline"><span class="fx-blog__author"><span><time datetime="2026-10-02">2-oktabr 2026</time> · 6 daq öqiş</span></span></div></div></li>
    </ul>
  </section>
</article>

Tokenlar: --fx-bg-category-blue --fx-bg-category-green --fx-bg-category-purple --fx-bg-category-yellow --fx-bg-muted --fx-bg-subtle --fx-bg-surface --fx-border-color-default --fx-border-color-focus --fx-border-color-strong --fx-border-width-default --fx-border-width-focus --fx-control-h-md --fx-dialog-width --fx-ease-standard --fx-fg-success --fx-font-adjust-display --fx-font-family-display --fx-font-size-display-lg --fx-font-size-display-sm --fx-font-size-lg --fx-font-size-md --fx-font-size-sm --fx-font-size-xl --fx-font-size-xs --fx-font-weight-semibold --fx-line-height-relaxed --fx-line-height-tight --fx-motion-fast --fx-motion-press --fx-radius-badge --fx-radius-control --fx-radius-surface --fx-size-icon-sm --fx-size-topbar --fx-space-1 --fx-space-2 --fx-space-3 --fx-space-4 --fx-space-5 --fx-space-6 --fx-space-8 --fx-text-brand --fx-text-primary --fx-text-secondary --fx-text-tertiary