Tasarım sistemi

Temel ilkeler

Tipografi

Radix Themes sistem font yığını ve Text, Heading, Code bileşenlerinin ölçü/ağırlık prop’ları kullanılır. Eski tipografi tokenları yalnız geçiş köprüsüdür.

Boşluk ve padding

Yeni bileşenler Radix layout prop’larını ve --space-* tokenlarını kullanır. Paralel bir ölçek eklenmez; eski padding adları yalnız taşınmamış yüzeyler içindir.

Renk rolleri

Renkler doğrudan bağımlılık olarak @radix-ui/colors@3.0.0 sürümüne sabitlenir ve production’a self-hosted Radix Themes CSS’i üzerinden gelir. CDN, @latest ve Themes ile çakışacak ikinci ham scale import’u kullanılmaz. Arayüz semantik light/dark ve alpha değişkenlerini tüketir; yeni sabit hex veya tek temaya özel rgba eklenmez.

Yüzey hiyerarşisi

Sayfa, panel, yüzey ve overlay rolleri Radix --color-*, --gray-* ve --accent-* tokenlarından gelir. Hiyerarşi önce solid, soft, surface, outline ve ghost varyantlarıyla kurulur. Portalled katmanlar --color-panel-solid ve --color-overlay kullanır.

Bileşen örnekleri

İkon kullanımı

Yeni ve taşınmış yüzeyler Radix Icons kullanır. Lucide yalnız henüz taşınmamış yüzeylerde geçici olarak kalabilir. Emoji veya Unicode karakter ikon değildir.

Navigasyon, composition ve açılır menüler

Navbar; solda Home → Modes → Words → Community ana hedeflerini, ortada Search alanını, sağda Language → Appearance → Activity → Profile araçlarını gruplar. Tercihler ana hedeflerin arasına yerleştirilmez. Dil yönü tek bir Radix Themes DropdownMenu tetikleyicisinde globe, aktif yön ve chevron olarak gösterilir; seçenekler RadioGroup içindedir. Diğer açılır katmanlar Themes DropdownMenu, arama ve mobil davranışları Radix Popover ile Dialog kullanır. Gerçek hedef olan başlık doğrudan linktir; chevron yalnız alt menüyü açar. Link ve tetikleyicinin odak halkası bütün bileşik kontrolü çevreler, ayrı bir caret kutusu oluşturmaz. asChild yalnız davranışı doğru semantiğe sahip tek bir leaf öğeye aktarmak için kullanılır; linkler navigasyonu, butonlar komutları üstlenir. Özel leaf bileşenleri bütün prop’ları DOM’a yayar ve ref’i forwardRef ile iletir; etkileşimli div veya iç içe etkileşimli öğe oluşturulmaz. Açılış ve kapanış animasyonları Radix data-state değerlerini hedefleyen CSS keyframe’leriyle çalışır; reduced-motion tercihinde kapatılır. Tema düğmesi light/dark sınıflarını değiştirir ve tercih yoksa sistem görünümünü izler.

Kontrollü geçiş durumu

Radix geçişinin ilk aşamasında tema kökü, açık/koyu görünüm ve navbar; ikinci aşamasında misafir/üye ana sayfaları ile Sign In/Sign Up tamamlandı. Üçüncü aşamada Words arşivi ve ayrı Search sonuç yüzeyi Radix tablo, filtre, Select, TextField, Badge, pagination ve ikon eylemlerine taşındı. Dördüncü aşamada Flashcard çalışma yüzeyi; kart, filtre, metrik, eylem, kısayol, geçmiş ve ayar parçalarıyla Radix Themes ve Radix Icons'a geçirildi. Guest/member ayrımı, sürekli oturum akışı, klavye, TTS, CSRF yazımları ve EJS fallback korunur. EJS fallback ayrı bir tasarım kaynağı değildir: JavaScript açıkken ilk boyamada gizli kalır, React tek senkron commit ile yerini aldıktan sonra görünür; JavaScript kapalıysa no-JS stili fallback’i gösterir. Her aşama TypeScript, üretim derlemesi, entegrasyon testi ve yerel HTTP kontrolünden geçmeden tamamlanmış sayılmaz.

Server rendering ve hydration

Uygulama React 19 kullandığı için Radix’in React 18 öncesine özgü hydration ID sınırlaması geçerli değildir. Mevcut EJS çıktısı React SSR değil, erişilebilir no-JavaScript fallback’idir; tarayıcıdaki createRoot bu farklı ağacı tek commit ile değiştirir. Aynı olmayan EJS işaretlemesine hydrateRoot uygulanmaz. Gerçek React SSR’a geçildiğinde sunucu ve istemci aynı React ağacını, route verisini, anahtarları ve Radix Theme provider’ını üretmeli; ilk HTML’de klavye ve ekran okuyucu semantiği bulunmalı ve hydration mismatch oluşmamalıdır.

Viewport bütçesi ve yoğunluk

Görev odaklı masaüstü sayfalarında navbar çıkarıldıktan sonra başlık, formun tamamı, ana buton ve yakın alternatif eylem 1366×768 görünümde kaydırmadan erişilebilir olmalıdır. Masaüstü veri tabloları sabit bir sütun bütçesiyle içerik genişliğine tamamen sığar ve iç yatay/dikey kaydırma alanı oluşturmaz; Radix Table içindeki dikey kaydırma kapalıdır, 901px altında yalnız tek kontrollü yatay tablo kaydırması kabul edilir. Hero, bölüm, kart ve form aralıkları ortak --task-* tokenlarıyla viewport yüksekliğine uyum sağlar. Quiz ekranı aynı yaklaşımı --quiz-* tokenlarıyla uygular; misafir görünümü Flask referansındaki gibi doğrudan soruyla başlar, üye görünümü breadcrumbı korur ve kompakt iki sütunlu rehber görevin altında devam eder. Flashcard ekranı ayrı bir hero kullanmaz; kelime ve bulanık tanım yatay, istatistikler ve kontroller kompakt satırlar halinde sunulur. Filtre, havuz, sonraki kelime, geçmiş ve zamanlama özellikleri bu yoğun yapının içinde kalır. Footer ilk görünüm bütçesine dahil değildir. Kontroller 40px altına küçültülmez; kısa mobil ekranlarda okunabilirlik korunur ve kontrollü kaydırma kabul edilir.

Kelime verisi ve atıf

Çekirdek kelime sırası SUBTLEX-US, İngilizce tanım ve örnekler Simple English Wiktionary / Wiktextract, Türkçe karşılıklar ise FreeDict eng-tur kaynaklarından gelir. İçe aktarma kaynak metnini sadeleştirir ve sınırlı sayıda anlam/örnek seçer; her kelimenin kaynak, lisans, sıralama ve dönüşüm bilgisi word_sources tablosunda tutulur. Wiktionary içeriği CC BY-SA 4.0/GFDL, FreeDict verisi GPL-2.0-or-later, sıklık paketi ISC koşullarına tabidir.