Fix UI Kullanımı

Fix UI Nedir?

Fix UI, Falcon sitelerinde tekrarlayan bileşen görünümünü tek yerden yönetmek için kullandığımız proje içi tasarım sistemidir. npm paketi değildir; tüm bileşen sınıfları fix- ile başlar (fix-btn, fix-card, fix-badge).

Amaç: buton/kart/rozet rengini ve şeklini _fix-*.css dosyaları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.).

Sayfa düzeni, form alanları ve blog gövdesi Tailwind ile yapılır — CSS Kullanımı.

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`	Buton, kart, rozet, tipografi rolleri
Layout	`PageShell.astro` + Tailwind	`max-w-6xl`, section padding
Sarmalayıcı	`src/components/ui/*.astro`	Sınıf üretir; Button/Card fix-*, Input Tailwind
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">`
Yazı rolleri	`_fix-type.css`	—	marketing başlıkları, katalog
Rozet	`_fix-badge.css`	`Badge.astro`	`<Badge variant="success">`
Form (katalog)	`_fix-form.css`	—	yalnızca `/fix-ui` demosu (`fix-form`, `fix-form__row`)
Form alanları (production)	—	`Input`, `Label`, `Textarea`	Tailwind semantic sınıflar

Blog gövdesi Fix UI değildir: @tailwindcss/typography ile prose — Yazı Stilleri, MDX Kullanımı.

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

Canlı Katalog (`/fix-ui`)

Geliştirme sunucusunda tüm Fix UI bileşenleri tek sayfada:

Dosya	Rol
`src/pages/fix-ui/index.astro`	Route (`noindex`)
`src/components/fix-ui/FixUiPage.astro`	Demo layout
`src/components/fix-ui/fix-ui-nav.ts`	Bölüm anchor’ları

Burada fix-type-*, fix-btn, fix-card, fix-badge, fix-form ve prose önizlemesi görülür. Production sayfaları bu rotayı kullanmak zorunda değildir.

Tailwind Vs Fix-*

fix-*	Tailwind
Buton, kart, rozet görünümü	`PageShell`, grid, flex, gap, responsive
`fix-type-*` (marketing)	Blog başlığı (`text-3xl`), blog gövdesi (`prose`)
Tek dosyadan buton/kart teması	Form `Input`/`Label`, shell, footer

Buton/kart için class="bg-primary px-4 …" yazma — <Button> veya fix-btn kullan. Özelleştirmek için _fix-button.css düzenle veya <Button class="…"> (çakışmada Tailwind utility genelde kazanır).

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>

Form (katalog demosu — `/fix-ui`)

<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>

Production’da alanlar Input / Label üzerinden Tailwind ile stillenir; fix-form__input sınıfı kullanılmaz.

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

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

Audit (Kullanım Kontrolü)

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

Yeni bileşen eklerken: CSS + (varsa) ui/*.astro + site.css import + FIX-UI.md tablosu.

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
İsteğe bağlı /fix-ui katalog bölümü
FIX-UI.md tablosunu güncelle

Özet

Fix UI = token + fix-* CSS + ince Astro sarmalayıcı. Buton/kart/rozet merkezi; layout, form alanları ve blog prose Tailwind’de. Canlı referans: /fix-ui.