CSS Kullanımı

Bu belge, Falcon’da stillerin nasıl organize edildiğini ve ne zaman hangi yöntemi kullanacağını anlatır.

İki sistem birlikte çalışır; biri diğerinin yerine geçmez:

Sistem	Ne için?	Nerede?
*Fix UI (`fix-`)**	Buton, kart, rozet görünümü; isteğe bağlı `fix-type-*` (marketing)	`src/styles/components/`, `src/components/ui/`
Tailwind CSS 4	Sayfa düzeni (`PageShell`), shell, form alanları, blog `prose`, spacing/tek seferlik tipografi	`.astro` / HTML `class="..."`
Yazı rolleri (marketing)	`fix-type-*`	Yazı Stilleri
Blog / uzun MDX	`@tailwindcss/typography` (`prose`)	Yazı Stilleri, MDX Kullanımı

Fix UI bir npm paketi değildir; proje içi fix-* BEM sınıfları ve _fix-*.css dosyalarıdır.

Temel Mantık

Stil akışı dört katmandan oluşur:

Token'lar          →  Bileşen CSS (fix-*)  →  Astro sarmalayıcı  →  Sayfa
(colors, spacing)     _fix-button.css         Button.astro          index.astro

Token — Renk, boşluk, radius, gölge (src/styles/tokens/). Tüm ekranların paleti buradan gelir.
Bileşen CSS — .fix-btn, .fix-card gibi sınıflar; token tüketir. Görünümü değiştirmek için önce buraya bak.
Astro sarmalayıcı — Button.astro, Card.astro; yalnızca doğru fix-* sınıflarını üretir, stil yazmaz. Input / Label / Textarea ise Tailwind utility kullanır.
Sayfa — Layout için Tailwind (PageShell), buton/kart için <Button> / <Card> veya bilinçli fix-* sınıfı.

Özet: Tekrarlayan bileşen görünümü fix-* CSS’te; sayfa iskeleti, form alanları ve blog gövdesi Tailwind’de.

Dosya Yapısı

Katman	Dosya / klasör	Görevi
Tema + token	`src/styles/core.css`	`@theme`, `:root` / `.dark`, body; token import’ları
Token parçaları	`src/styles/tokens/_*.css`	`--primary`, `--space-m`, `--radius-l` …
Tipografi token	`src/styles/tokens/_typography.css`	`--text-h1`, `--text-h2`, `--leading-body` — boyut ölçeği
Fix bileşenleri	`src/styles/components/_fix-*.css`	`.fix-btn`, `.fix-card`, `.fix-type-*` stilleri
Sayfa layout	`src/components/layout/PageShell.astro`	`max-w-6xl`, yatay gutter, dikey section padding
Site yığını	`src/styles/site.css`	Import zinciri + Tailwind + typography plugin
UI sarmalayıcı	`src/components/ui/*.astro`	`Button`, `Card`, `Input` …
Fix UI katalog	`src/pages/fix-ui/`, `src/components/fix-ui/`	Canlı bileşen demosu (`/fix-ui`)
Yükleme	`src/layouts/BaseLayout.astro`	`import '@/styles/site.css'` (tek kez)

globals.css kullanılmaz — layout doğrudan site.css yükler.

`site.css` İmport Sırası

Sıra önemlidir: önce tema ve Fix bileşenleri, sonra Tailwind ve typography eklentisi.

@import "./core.css";
@import "./components/_fix-button.css";
@import "./components/_fix-card.css";
@import "./components/_fix-type.css";
@import "./components/_fix-badge.css";
@import "./components/_fix-form.css";
@import "tailwindcss";
@plugin "@tailwindcss/typography";

@source "../components/**/*.{astro,...}";
@source "../layouts/**/*.{astro,...}";
@source "../pages/**/*.{astro,...}";

Performans: Tek CSS pipeline; Fix sınıfları statik CSS; Tailwind yalnızca kullanılan utility’leri üretir (@source ile tarama sınırlı).
@apply kullanılmaz — Fix bileşenleri düz CSS + var(--token) ile yazılır.

Fix UI İsimlendirme (`fix-*`)

Tüm tasarım sistemi sınıfları fix- ile başlar; projede grep ile takip edilir.

Tür	Örnek
Buton	`fix-btn`, `fix-btn--primary`, `fix-btn--outline`, `fix-btn--s`
Kart	`fix-card`, `fix-card--elevated`, `fix-card__header`, `fix-card__body`
Yazı rolü	`fix-type-h1`, `fix-type-body`, `fix-type-lead`
Rozet	`fix-badge`, `fix-badge--success`
Form (katalog)	`fix-form`, `fix-form__row` — yalnızca `/fix-ui` demosu

CSS değişkenleri fix- almaz: --primary, --space-m, --radius-base.

Audit (kullanım kontrolü):

rg "fix-btn|fix-card|fix-type|fix-badge" src
rg "prose" src/components/blog

Buton/kart için uzun Tailwind zinciri (rounded-xl border bg-… px-4 py-2) yerine <Button> / <Card> veya fix-* kullan.

Ne Zaman Ne?

Durum	Kullan
Buton, kart, rozet	`<Button>`, `<Card>`, `<Badge>` veya `fix-*`
Marketing başlık / lead / gövde	`fix-type-h1`, `fix-type-lead`, `fix-type-body` — Yazı Stilleri
Blog / uzun MDX gövdesi	`prose` + semantic modifier’lar (`BlogPostView`)
Blog post başlığı (tek seferlik)	Tailwind: `text-3xl`, `font-extrabold` vb.
Sayfa layout, grid, responsive	`PageShell` + Tailwind: `flex`, `gap-4`, `md:grid-cols-2`
Form alanları (production)	`<Input>`, `<Label>`, `<Textarea>` (Tailwind)
Tüm sitede renk / boşluk değişimi	`src/styles/tokens/`
Bir butonun hover rengi	`_fix-button.css` (veya ilgili token)
Yeni sayfa	`BaseLayout` + `PageShell`; sayfada CSS `import` etme

Kullanım Örnekleri

Sayfa İskeleti (PageShell + Fix UI)

---
import BaseLayout from '@/layouts/BaseLayout.astro';
import PageShell from '@/components/layout/PageShell.astro';
import Button from '@/components/ui/Button.astro';
import Card from '@/components/ui/Card.astro';
---

<BaseLayout title="Örnek">
  <PageShell>
    <h1 class="fix-type-h1">Başlık</h1>
    <Button variant="primary">Kaydet</Button>
    <Card variant="elevated">
      <div class="fix-card__body">İçerik</div>
    </Card>
  </PageShell>
</BaseLayout>

PageShell → bölüm genişliği (max-w-6xl), yatay gutter, dikey padding (Tailwind).
fix-type-h1 → marketing başlığı; token tabanlı rol.
Buton/kart görünümü → Fix UI; stiller sayfada tanımlanmaz.

Bileşen Görünümünü Özelleştirmek

Örneğin primary buton rengi veya kart gölgesi:

src/styles/tokens/_colors.css → --primary (tüm bileşenler)
src/styles/components/_fix-button.css → .fix-btn--primary (yalnızca buton)
İsteğe bağlı: <Button class="…"> — ek sınıf; çakışan özellikte Tailwind utility genelde kazanır (site.css sırasında fix CSS, Tailwind’den önce gelir).

Yeni bileşen: token → _fix-yeni.css → site.css import → ui/Yeni.astro → (isteğe bağlı) /fix-ui katalog satırı.

Sayfa dosyasına dokunmana çoğu zaman gerek yok.

Ayrıntılı palet ve açık/koyu tablolar: Renk Ve Tema.

Tema Rengini Tailwind’de Kullanmak

core.css içindeki @theme eşlemesi sayesinde (ör. --color-primary: var(--primary)) semantic utility’ler token ile uyumludur: bg-background, text-muted-foreground, border-border. Yine de kart/buton şekli için fix-* tercih edilir.

Akış Şeması

Sayfa (index.astro)
    ↓
BaseLayout.astro  →  import site.css (bir kez)
    ↓
site.css
    → core.css (tema + token import)
    → _fix-button.css, _fix-card.css, _fix-type.css, _fix-badge.css, _fix-form.css
    → tailwindcss + @tailwindcss/typography
    → @source (components, layouts, pages taranır)

Sayfa içi:
    <PageShell>  →  max-w-6xl, py-16 …     (stil: Tailwind)
    <Button>     →  fix-btn fix-btn--primary (stil: _fix-button.css)
    <article class="prose …">               (stil: Typography plugin)

Kurallar

Yap	Yapma
CSS’i yalnızca `BaseLayout` üzerinden yükle	Her sayfada `import "...css"`
Buton/kart için `<Button>` / `<Card>` veya `fix-*`	Kart/butonda uzun Tailwind utility zinciri
Token’ları `tokens/` veya `core.css`	`core.css` içine `@import "tailwindcss"`
Bileşen stilini `_fix-*.css`’te topla	`core.css` içinde `.fix-btn` tanımı
Layout/spacing ve blog prose için Tailwind	Fix dosyalarında `@apply`
Görünüm değişince token veya component CSS	Onlarca sayfada aynı `class="..."` kopyası

Tailwind Kurulumu (Özet)

Paketler: tailwindcss, @tailwindcss/vite, @tailwindcss/typography (dev)
astro.config.mjs: Vite eklentisi
Kısayol: @/ → src/

tailwind.config.js zorunlu değil; @theme ve @source CSS içinde.

İleride: Docs Ayrı Bundle

Rehber bölümü gelince:

DocsLayout.astro  →  import "@/styles/docs.css"
docs.css          →  core + fix bileşenleri + tailwindcss + yalnızca docs @source

Site ve docs CSS’i ayrı kalır; gereksiz sınıf üretimi azalır.

Doğrulama

npm run build hatasız tamamlanmalı.
rg "fix-btn" src — Button.astro, _fix-button.css ve sayfa kullanımlarını göstermeli.
Buton/kart stilleri yalnızca src/styles/components/_fix-*.css ve token dosyalarında olmalı.
Canlı bileşen kataloğu: geliştirme sunucusunda /fix-ui.

Özet Cümle

Token’lar ve fix-* bileşen stilleri CSS katmanında; sayfa düzeni, form alanları ve blog gövdesi Tailwind’de; yükleme BaseLayout’ta. Buton ve kart tek yerden yönetilir; override için _fix-*.css düzenle veya class prop kullan.