Web uygulamasının görünümü webapp/css/tokens.css içindeki CSS özel özellikleri ve prefs.js ile a11y.js dosyalarının kök öğeye koyduğu niteliklerle denetlenir. Bu sayfa belirteç gruplarını, tema ve yoğunluk anahtarlarını, yedi erişilebilirlik ayarını ve icons.js içindeki ikon kaydını listeler. Her tercihin nerede saklandığı kullanıcı arayüz durumu sayfasında özetlenir.
Kapsam ve kaynak¶
- Tanımlandığı yer:
webapp/css/tokens.css,webapp/js/prefs.js,webapp/js/a11y.js,webapp/js/a11y-ui.js(renderAccessibility),webapp/js/icons.js(ICONS,icon) - Sayı:
tokens.cssdosyasının:rootbloğunda bildirilen 74 farklı özel özellik (5-145. satırlar,grep -o "^\s*--[a-z0-9-]*:"vesort -uile sayıldı); geçersiz kılmalar dahil tüm dosyada 146 özel özellik bildirimi; 2 tema; 3 yoğunluk; 7 erişilebilirlik ayarı;ICONSiçinde 99 ikon (grep -cE "^ '[a-z0-9-]+': \{"ile sayıldı)
Belirteç grupları¶
| Grup | Belirteçler | Amaç | Kaynak |
|---|---|---|---|
| Yazı tipi | --font |
Önce Manrope, sonra sistem geri dönüşleri | webapp/css/tokens.css:8-10 |
| Etiketler | --label, --label-2, --label-3 |
Üç vurgu düzeyinde metin renkleri | webapp/css/tokens.css:12-15 |
| Vurgu renkleri | --blue, --green, --red, --amber, --orange, --teal, --purple, --yellow ve -fg türevleri |
Durum ve kategori renkleri | webapp/css/tokens.css:17-37 |
| Çizgiler | --sep, --stroke |
Ayırıcılar ve denetim kenarlıkları | webapp/css/tokens.css:39-44 |
| Cam malzemeler | --glass-thin, --glass-regular, --glass-stroke, --glass-spec, --blur-thin, --blur-regular |
Yarı saydam yüzeyler | webapp/css/tokens.css:46-52 |
| Sahne ışığı | --icon-light |
İkon kutucuklarındaki ışığın gücü; parlaklık ayarı sürer | webapp/css/tokens.css:54-60 |
| Köşe yarıçapı | --r-xs ile --r-2xl arası, --r-field, --r-capsule |
Köşe yarıçapları | webapp/css/tokens.css:62-72 |
| Hareket | --ease-spring, --ease-snap, --ease-glide, --dur-1 ile --dur-5 arası |
Yumuşatma eğrileri ve süreler | webapp/css/tokens.css:74-85 |
| Boşluk | --sp-1 ile --sp-8 arası |
4 px tabanlı boşluk ölçeği | webapp/css/tokens.css:87-95 |
| Yazı ölçeği | --fs-4xs ile --fs-4xl arası |
rem cinsinden yazı boyutları | webapp/css/tokens.css:97-113 |
| Yükselti | --elev-1 ile --elev-4 arası |
Gölgeler | webapp/css/tokens.css:115-120 |
| Katmanlar | --z-scrim ile --z-drag-top arası |
Adlandırılmış yığın düzeyleri | webapp/css/tokens.css:122-131 |
| Yüzeyler | --on-accent, --surface |
Vurgu dolgular üzerindeki metin ve uygulama yüzeyi | webapp/css/tokens.css:133-145 |
Kök yazı boyutu pencere genişliğiyle 16 px ile 18 px arasında ölçeklenir ve yazı ölçeği ayarıyla çarpılır (webapp/css/tokens.css:206-208).
Temalar¶
| Tema | Seçici | Ne zaman varsayılan | Kaynak |
|---|---|---|---|
| Koyu | nitelik yok (:root) |
Kayıtlı seçim yoksa ve sistem açık temayı tercih etmiyorsa | webapp/css/tokens.css:5-145, webapp/js/prefs.js:47-60 |
| Açık | html[data-theme='light'] |
Sistem açık temayı tercih ediyorsa ve kayıtlı seçim yoksa | webapp/css/tokens.css:178-205, webapp/js/prefs.js:52-56 |
setTheme seçimi yerel depoda cluster_theme altında saklar ve uygular. Geçiş sırasında geçiş animasyonları bir kare boyunca susturulur (webapp/js/prefs.js:61-77). Seçim Ayarlar › Genel ekranında yapılır (webapp/js/general.js:13-63).
Satır yoğunluğu¶
| Kademe | Nitelik | Kaynak |
|---|---|---|
comfortable |
data-density="comfortable" |
webapp/js/prefs.js:85, webapp/css/gen.css:5038-5044 |
default |
yok | webapp/js/prefs.js:85-105 |
compact |
data-density="compact" |
webapp/js/prefs.js:85, webapp/css/gen.css:5038 |
setDensity kademeyi yerel depoda cluster_density altında ve kullanıcı hesabında density arayüz durumu anahtarı altında saklar (webapp/js/prefs.js:84-99). Yorum, sıkı satırların yalnız hassas işaretçili cihazlarda uygulandığını ve dokunmatiğin 44 px satır tabanını koruduğunu belirtir (webapp/js/prefs.js:79-83). Liste başlığı bir yoğunluk düğmesi sunar; bkz. genel liste.
Erişilebilirlik ayarları¶
a11y.js yedi ayarı yerel depoda cluster_a11y altında tutar, ilk boyamadan önce uygular ve çoğaltılmış ana ekran kutularını storage olayıyla eş tutar (webapp/js/a11y.js:5, webapp/js/a11y.js:90-105).
| Ayar | Değerler | Uygulanış | Kaynak |
|---|---|---|---|
font_scale |
small 0.87, default 1.0, large 1.13, xlarge 1.27 |
--fscale |
webapp/js/a11y.js:11, webapp/js/a11y.js:55 |
high_contrast |
off, light |
data-hc |
webapp/js/a11y.js:12, webapp/js/a11y.js:68, webapp/css/tokens.css:290-318 |
reduced_motion |
açık veya kapalı | data-rm; animasyonlar ve geçişler kapalı |
webapp/js/a11y.js:87, webapp/css/tokens.css:319-326 |
dyslexia_font |
açık veya kapalı | data-dyslexia; disleksi dostu yazı tipi yığını ve geniş aralık |
webapp/js/a11y.js:86, webapp/css/tokens.css:210-217 |
color_blind_mode |
off, protanopia, deuteranopia, tritanopia |
data-cb; yerine geçen vurgu paletleri |
webapp/js/a11y.js:13, webapp/js/a11y.js:69, webapp/css/tokens.css:219-240 |
reading_bg |
off, peach, orange, yellow veya bir onaltılık renk |
data-rbg ve --reading-bg |
webapp/js/a11y.js:14-16, webapp/js/a11y.js:70-85 |
brightness |
50 ile 150 arası, varsayılan 100 | --a11y-bright ve --icon-light |
webapp/js/a11y.js:142-145, webapp/js/a11y.js:56-63 |
İşletim sisteminin azaltılmış hareket tercihi, uygulama ayarı kapalı olsa bile animasyonları kapatır (webapp/css/tokens.css:328-337). Kayıtlı yüksek karşıtlık değeri dark, light olarak okunur (webapp/js/a11y.js:35-39). Ayar ekranı renderAccessibility işlevidir; Ayarlar › Erişilebilirlik ekranından ve giriş ekranındaki bir düğmeden ulaşılır (webapp/js/a11y-ui.js:229, webapp/js/main.js:139-150).
a11y-ui.js ayrıca uygulama genelinde kullanılan onay iletişim kutularını sağlar: confirmAlert, confirmTyped ve sunucudan yüklenen bir devre dışı bırakma nedenini soran askDeactivation (webapp/js/a11y-ui.js:39-227).
Klavye ve ekran okuyucu desteği¶
| Özellik | Kaynak |
|---|---|
Ana ekran ızgarasına atlama bağlantısı (a11y.skip_to_content) |
webapp/index.html:77, webapp/css/tokens.css:339-357 |
| Görünür odak halkası | webapp/css/tokens.css:146-152 |
| Kartlarda ve iletişim kutularında odak tuzağı, odak açana geri verilir | webapp/js/ui.js:121-167, webapp/js/action-sheet.js:104-105 |
| Gezen odaklı ve ok tuşlu sekme çubuğu | webapp/js/module-app.js:156-212 |
| Kibar bir canlı bölgeli çevrimdışı şerit | webapp/js/main.js:182-207 |
İkon kaydı¶
ICONS bir adı bir SVG'ye, Türkçe ve İngilizce arama etiketlerine ve sağdan sola kuralına eşler (webapp/js/icons.js:30-559). Nesne glifleri dolgulu şekillerdir; işaret glifleri 2.4 px konturdur (webapp/js/icons.js:21-28). icon(name, cls) SVG'yi aria-hidden ve focusable="false" ile döndürür; bilinmeyen bir ad boş dize döndürür (webapp/js/icons.js:562-570). Yorum, yalnız simgeli düğmelerin erişilebilir adlarını düğme üzerinde taşıdığını belirtir.
Kısıtlar ve doğrulama¶
- Ayarlayıcılar izin verilen listelerin dışındaki değerleri yok sayar ve parlaklık 50 ile 150 arasına sıkıştırılır (
webapp/js/a11y.js:112-145). - Disleksi yazı tipi yığını önce OpenDyslexic adını verir (
webapp/css/tokens.css:211-213). Yazı tipiwebapp/fonts/içinde gelmez; tarayıcı onu yalnız cihazda kuruluysa kullanır. - Tarayıcı testleri:
web-client/_e2e_ui_a11y.mjs,web-client/_e2e_login_a11y.mjs,web-client/_e2e_density.mjs,web-client/_e2e_touch_sweep.mjs.
Tanıtılan terimler¶
| Terim | Kod tanımlayıcısı | Tanım | Türkçe terim | Kaynak |
|---|---|---|---|---|
| design token | --label ve diğerleri |
Her ekranın sabit bir değer yerine okuduğu bir CSS özel özelliği. | tasarım belirteci | webapp/css/tokens.css:5 |
| row density | setDensity |
Kullanıcının listelerin ve tabloların satırlarını ne kadar sık dizdiğine ilişkin seçimi. | Satır yoğunluğu | webapp/js/prefs.js:90 |
| reading background | reading_bg |
Daha kolay okuma için seçilen renkli yüzey rengi. | okuma arka planı | webapp/js/a11y.js:24 |
| icon registry | ICONS |
Web uygulamasının kullandığı her glifin tek kaynağı. | ikon kaydı | webapp/js/icons.js:30 |
İlgili sayfalar¶
92f8051 numaralı commit ile 2026-11-13 tarihinde doğrulandı.