Fix UI Kullanımı

Fix UI Nedir?

Fix UI, Falcon sitelerinde görünümü tek yerden yönetmek için kullandığımız bileşen sistemidir. Tüm bileşen sınıfları fix- ile başlar (fix-btn, fix-card, fix-prose).

Amaç: müşteri projelerinde buton/kart/form/prose rengini bir CSS dosyasından değiştirmek; sayfalarda uzun Tailwind zinciri tekrarı olmaması.

shadcn kullanılmıyor — görünüm Fix UI + token; etkileşim gerektiğinde ayrı React island (Motion vb.).

Katmanlar

Token (tokens/)  →  Bileşen CSS (_fix-*.css)  →  Astro ui/  →  Sayfa

Katman	Nerede	Ne yapar
Token	`src/styles/tokens/`	Renk, boşluk, radius
Tema	`src/styles/core.css`	`:root`, `.dark`, `@theme`
Bileşen	`src/styles/components/_fix-*.css`	Görünüm (tek kaynak)
Layout	`src/styles/layout/_fix-section.css`	`fix-section`, `fix-container`
Sarmalayıcı	`src/components/ui/*.astro`	Sınıf üretir, stil yazmaz
Yükleme	`site.css` → `BaseLayout`	Tek pipeline

Bileşenler

Bileşen	CSS	Astro	Kullanım
Buton	`_fix-button.css`	`Button.astro`	`<Button variant="primary">`
Kart	`_fix-card.css`	`Card.astro`	`<Card variant="elevated">`
Prose	`_fix-prose.css`	—	`<article class="fix-prose">` (blog)
Yazı rolleri	`_fix-type.css`	—	sayfa başlıkları, lead, meta
Badge	`_fix-badge.css`	`Badge.astro`	`<Badge variant="success">`
Form	`_fix-form.css`	`Label`, `Input`, `Textarea`	`class="fix-form"` + satırlar

Varyantlar BEM ile: fix-btn--outline, fix-card__body, fix-badge--danger.

Tailwind Vs Fix-*

fix-*	Tailwind
Buton, kart, badge, form, blog gövdesi, başlık/paragraf rolleri	Grid, flex, gap, responsive
Tek dosyadan tema değişimi	Sayfa layout, hizalama

Buton/kart için class="bg-primary px-4 …" yazma — <Button> veya fix-btn kullan.

Nasıl Kullanılır?

Buton

<Button variant="primary" size="l">Kaydet</Button>
<Button variant="outline" href="/blog/">Blog</Button>

Kart

<Card>
  <div class="fix-card__header"><h3 class="fix-type-h3 m-0">Başlık</h3></div>
  <div class="fix-card__body"><p>İçerik</p></div>
</Card>

Blog (MDX Gövdesi)

BlogPostView.astro içinde:

<article class="fix-prose">
  <Content />
</article>

Form

<form class="fix-form">
  <div class="fix-form__row">
    <Label for="email">E-posta</Label>
    <Input id="email" name="email" type="email" />
  </div>
  <Button type="submit">Gönder</Button>
</form>

Görünümü Değiştirmek

Renk / boşluk → src/styles/tokens/
Buton hover, kart çerçeve → ilgili _fix-*.css
Yazı boyutu → src/styles/tokens/_typography.css — ayrıntı: Yazı Stilleri
Sayfa dosyasına çoğu zaman dokunma gerekmez

Audit (Kullanım Kontrolü)

rg "fix-btn|fix-card|fix-prose|fix-type|fix-badge|fix-form" src

Yeni bileşen eklerken: CSS + (varsa) ui/*.astro + site.css import.

Yeni Bileşen Eklerken

src/styles/components/_fix-yeni.css — fix-yeni, fix-yeni--variant
site.css’e import (tailwindcss öncesi)
İsteğe bağlı src/components/ui/Yeni.astro
FIX-UI.md tablosunu güncelle

Özet

Fix UI = token + fix-* CSS + ince Astro sarmalayıcı. Görünüm merkezi; Tailwind yalnızca layout. shadcn yok; hızlı kontrol için rg "fix-" yeterli.