Tasarım tokenları
Tüm değerler (renkler, boyutlar, yarıçaplar, gölgeler, boşluklar)
tokens.css dosyasında tanımlanmış CSS özel özellikleridir.
Bileşenler hiçbir zaman sabit değer kullanmaz — her zaman bir tokena referans verir.
Markanıza uyarlamak için istediğiniz tokeni geçersiz kılabilirsiniz.
Kural: Kendi bileşenlerinizde de her zaman token kullanın.
Tema değişiminde etkilenebilecek hiçbir renk, boyut veya yarıçapı sabit değer olarak yazmayın.
Yüzeyler & metin
| Token | Varsayılan (açık) | Kullanım |
|---|
| --wb-bg | #f4f6fb | Sayfa arka planı |
| --wb-surface | #ffffff | Kartlar, paneller, modaller |
| --wb-surface-2 | #edf1f7 | Hafif arka planlar, tablo satırları |
| --wb-surface-3 | #e2e8f2 | Hover durumları, ayraçlar |
| --wb-text | #18212f | Birincil metin |
| --wb-muted | #5a6a84 | İkincil metin, etiketler, yer tutucular |
| --wb-border | #d6e0ee | Tüm kenarlıklar ve ayraçlar |
Anlamsal renkler
| Token | Varyantlar | Kullanım |
|---|
| --wb-success | -dark · -soft | Başarı uyarıları, rozetler, ikonlar |
| --wb-warning | -dark · -soft | Uyarı bildirimleri, dikkat durumları |
| --wb-danger | -dark · -soft | Hata durumları, yıkıcı işlemler |
| --wb-info | -dark · -soft | Bilgi uyarıları, ipuçları |
Boşluk skalası (4px taban)
| Token | Değer | Token | Değer |
|---|
| --wb-s1 | 4px | --wb-s8 | 32px |
| --wb-s2 | 8px | --wb-s10 | 40px |
| --wb-s3 | 12px | --wb-s12 | 48px |
| --wb-s4 | 16px | --wb-s16 | 64px |
| --wb-s5 | 20px | --wb-s20 | 80px |
| --wb-s6 | 24px | — | — |
Kenar yarıçapı
| Token | Değer |
|---|
| --wb-r-sm | 5px |
| --wb-r-md | 9px |
| --wb-r-lg | 14px |
| --wb-r-xl | 20px |
| --wb-r-full | 9999px (hap/daire) |
Tipografi
| Token | Açıklama |
|---|
| --wb-font | Gövde yazı tipi yığını (Inter, system-ui yedekleri) |
| --wb-font-heading | Başlık yazı tipi yığını (varsayılan olarak gövde ile aynı) |
| --wb-font-mono | Sabit genişlikli yığın (Cascadia Code, Menlo, Consolas) |
| --wb-font-size-xs/sm/md/lg/xl | 0.75 / 0.875 / 1 / 1.125 / 1.25 rem |
Gölgeler
| Token | Kullanım |
|---|
| --wb-shadow-sm | Hafif yükseklik (kartlar, girdiler) |
| --wb-shadow-md | Açılır menüler, popoverlar |
| --wb-shadow-lg | Modaller, çekmeceler |
| --wb-shadow-xl | Komut paleti, yüksek yüzen katmanlar |
Z-index skalası
| Token | Değer | Kullanım |
|---|
| --wb-z-dropdown | 100 | Açılır menüler, popoverlar, araç ipuçları |
| --wb-z-modal | 200 | Modaller, çekmeceler, onay diyalogları |
| --wb-z-toast | 300 | Toast bildirimleri |
Token geçersiz kılma
Kendi CSS'inizde :root veya kapsamlı bir seçici
hedefleyerek herhangi bir tokeni geçersiz kılabilirsiniz:
/* Global geçersiz kılma */
:root {
--wb-font: 'Geist', sans-serif;
--wb-r-md: 12px;
}
/* Kapsamlı geçersiz kılma — yalnızca bir bölümü etkiler */
.my-hero {
--wb-accent: #8b5cf6;
}
Vurgu renkleri
Tüm arayüzü farklı bir renk düzenine geçirmek için
<html> öğesine
data-accent ayarlayın. Her vurgu 12 token tanımlar.
Vurguyu bu sayfada önizlemek için yukarıdaki renk kutusuna tıklayın.
Vurgu token seti (vurgu başına 12 token)
| Token | Kullanım |
|---|
| --wb-accent | Birincil vurgu — düğme arka planları, aktif durumlar |
| --wb-accent-hover | Vurgu renkli öğelerin hover durumu |
| --wb-accent-active | Aktif / basılı durum |
| --wb-accent-soft | Tonlu arka plan (rozetler, çipler) |
| --wb-accent-softer | Çok hafif ton (sayfa bölümleri, açıklamalar) |
| --wb-accent-border | Vurgu tonlu kenarlık |
| --wb-accent-text | Açık arka plan üzerinde vurgu metni |
| --wb-accent-on | Vurgu arka planı üzerinde metin rengi (genellikle beyaz) |
| --wb-accent-ring | Odak halkası rengi |
| --wb-accent-ring-rgb | Opaklıklı rgba() odak halkası için RGB değerleri |
| --wb-accent-selection | Metin seçim arka planı |
| --wb-accent-glow-rgb | Parıltı efektleri için RGB değerleri |
Geriye dönük uyumluluk: --wb-primary,
--wb-primary-dark ve --wb-primary-soft
eşdeğer --wb-accent* tokenlarına yönlendiren takma adlardır.
Yeni kodda her zaman --wb-accent* kullanın.
Karanlık mod
Karanlık mod, <html> üzerindeki
data-mode özniteliği ile kontrol edilir. Üç değer desteklenir.
| Değer | Davranış |
|---|
| light | Her zaman açık mod |
| dark | Her zaman karanlık mod |
| auto | prefers-color-scheme sistem ayarını izler |
Karanlık mod nasıl çalışır
Karanlık mod, dark.css dosyasındaki
[data-mode="dark"] seçicisi aracılığıyla yüzey, metin ve
kenarlık tokenlarını geçersiz kılar. Tüm bileşen stilleri yeni değerleri otomatik olarak devralır —
ayrıca karanlık mod sınıf varyantlarına gerek yoktur.
<!-- Statik -->
<html data-mode="dark">
<!-- Kullanıcı tarafından değiştirilebilir -->
<button data-wb-mode-cycle>Modu değiştir</button>
<!-- Programatik olarak ayarlama -->
<script>WBTheme.setMode('dark');</script>
localStorage kalıcılığı: WBTheme,
kullanıcının mod tercihini localStorage içinde
wb-mode anahtarıyla saklar ve bir sonraki sayfa yüklemesinde
geri yükler. Yanlış modun görünmesini önlemek için HTML'de başlangıç
data-mode değerini ayarlayın.
Önayarlar
Önayarlar, birden fazla ekseni aynı anda ayarlayan adlandırılmış paketlerdir —
yarıçap, gölge, yoğunluk, yazı tipi ve kenarlık. Tutarlı bir görünüm için başlangıç
noktası olarak kullanın; bireysel eksenler herhangi bir önayar değerini hâlâ geçersiz kılabilir.
| Önayar | Yarıçap | Gölge | Yoğunluk | Yazı Tipi | Kenarlık |
|---|
| modern | varsayılan | varsayılan | varsayılan | modern | subtle |
| minimal | sharp | flat | compact | system | subtle |
| rounded | soft | soft | comfortable | modern | none |
| bold | sharp | varsayılan | varsayılan | modern | bold |
| editorial | sharp | flat | comfortable | editorial | medium |
<!-- "rounded" önayarını uygula, yalnızca vurguyu geçersiz kıl -->
<html data-preset="rounded" data-accent="rose">
<!-- "minimal" uygula, yarıçapı soft olarak geçersiz kıl -->
<html data-preset="minimal" data-radius="soft">
Önayarlar CSS şelale sırasında bireysel eksen özniteliklerinden önce uygulanır,
dolayısıyla bireysel eksenler her zaman önceliklidir.
Tema eksenleri
Karanlık mod ve vurgunun ötesinde, beş ek eksen arayüzünüzün görsel kişiliğini ayarlamanıza olanak tanır.
Yarıçap — data-radius
| Değer | Etki |
|---|
| sharp | Tüm kenar yarıçaplarını azaltır — daha yapılandırılmış, kurumsal his |
| soft | Tüm kenar yarıçaplarını artırır — arkadaşça, tüketiciye yönelik his |
Yoğunluk — data-density
| Değer | Etki |
|---|
| compact | Düğme, girdi, tablo satırlarındaki dolguyu azaltır — ekranda daha fazla içerik |
| comfortable | Dolguyu artırır — daha fazla nefes alanı, dokunmatik için daha iyi |
Gölge — data-shadow
| Değer | Etki |
|---|
| flat | Gölgeleri kaldırır — kenarlık tabanlı derinlik, temiz ve minimal |
| soft | Gölge bulanıklığını ve opaklığını artırır — daha yüksek, premium his |
Yazı Tipi — data-font
| Değer | Yazı tipi yığını |
|---|
| system | Yerel işletim sistemi yazı tipi yığını — web fontu yüklenmez |
| modern | Inter (CDN) — temiz, son derece okunabilir |
| editorial | Playfair Display (CDN) + Inter — editoryal, yayıncılık hissi |
Kenarlık — data-border
| Değer | Etki |
|---|
| none | Kenarlıkları kaldırır — yüzeyler yalnızca gölgelerle tanımlanır |
| subtle | Hafif kenarlıklar (varsayılan) |
| medium | Orta ağırlıklı kenarlıklar |
| bold | Kalın kenarlıklar — güçlü görsel yapı |
| dashed | Kesik kenarlıklar — belirgin, teknik his |
Tüm eksenleri birleştirme
<!-- Tek satır özel CSS yazmadan maksimum özelleştirme -->
<html
data-mode="dark"
data-accent="royal"
data-preset="rounded"
data-density="comfortable"
data-font="modern"
>
Özel token geçersiz kılmaları
Yerleşik eksenlerin ötesine geçen markaya özgü özelleştirme için, tokenları doğrudan
kendi CSS'inizde geçersiz kılın.
/* ── Marka yazı tipi ─────────────────────────────── */
:root {
--wb-font: 'DM Sans', sans-serif;
--wb-font-heading: 'DM Serif Display', serif;
}
/* ── Özel vurgu (8 yerleşik dışında) ───────────────── */
:root {
--wb-accent: #0f766e;
--wb-accent-hover: #0d6e66;
--wb-accent-active: #0b605a;
--wb-accent-soft: #ccfbf1;
--wb-accent-softer: #f0fdf4;
--wb-accent-border: #5eead4;
--wb-accent-text: #0d6e66;
--wb-accent-on: #ffffff;
--wb-accent-ring: rgb(15 118 110);
--wb-accent-ring-rgb: 15 118 110;
--wb-accent-selection: #ccfbf1;
--wb-accent-glow-rgb: 15 118 110;
}
/* ── Yoğun veri tablosu için daha sıkı boşluk ───────── */
.my-data-table {
--wb-s3: 0.5rem;
--wb-s4: 0.75rem;
}