Arayüz ve Tasarım Sistemi
Bileşen kütüphaneleri
@iqvizyonui/react-components(^9.74.5) — Fluent UI v9 temelli IQV forku. Gerçekten kullanılan parçalar:Button,Dropdown,Field,Input,Option,SearchBox,IqvizyonProvider,webLightTheme,webDarkTheme,makeStyles,tokens,useId.antd+@ant-design/pro-components— kabuk, tablo, kart, form.
Boşluk standardı
dashboard/src/components/api-docs/pageFrame.ts tek kaynaktır. Değerler IQV
token'larından türer; serbest piksel yazılmaz.
| Bağlam | Geniş masaüstü | Tablet | Kompakt |
|---|---|---|---|
| Sayfa kenarı (yatay) | spacingHorizontalXXXL (32px) |
spacingHorizontalXL (20px) |
spacingHorizontalL (16px) |
| Sayfa kenarı (dikey) | spacingVerticalXXL (24px) |
24px | 24px |
| Dış girinti | 32px | 20px | spacingHorizontalS (8px) |
| Tablo hücresi (yatay) | clamp(spacingHorizontalXS, 1vw, spacingHorizontalM) |
← aynı | ← aynı |
Tipografi
AppTheme.tsx içindeki IQV_FONT_FAMILY hem antd token.fontFamily hem IQV
fontFamilyBase değerine verilir; index.css içindeki :root kuralıyla da
hizalanır.
Tablo başlık puntosu akışkandır:
clamp(fontSizeBase300, 1vw, fontSizeBase400) → 14px–16px.
Renk
Tablo başlıkları ~%80 siyah (rgba(0,0,0,0.8)), koyu temada aynı opaklık
beyaz üzerinden uygulanır. IQV/Fluent token'ları arasında tam %80'e karşılık
gelen semantic bir token bulunmadığı için değer doğrudan yazılmıştır ve bu
durum kaynak dosyada gerekçelendirilmiştir.
Kayıt adı ile KPI kartı etiketleri aynı griyi kullanır
(token.colorTextSecondary).