Design token'lar
Merid'deki her renk, boyut, gölge ve süre bir CSS custom property'dir. Component'lerde token olmayan ham bir değer bulunmaz; bu yüzden bir token'ı değiştirdiğinde kullanıldığı her yer değişir.
Adlandırma
Tüm token'lar --mrd- önekini taşır ve üç katmana ayrılır.
| Katman | Örnek | Amaç |
|---|---|---|
| Primitive | --mrd-space-4 | Bir ölçekteki ham adım. Tek başına bir anlamı yoktur. |
| Semantic | --mrd-accent, --mrd-tray | Rolüne göre adlandırılır. Açık ve koyu tema arasında değişir. |
| Component | --mrd-control-md | Bir component ailesinin paylaştığı boyutlar. |
Kendi kodunda semantic token'ları tercih et. var(--mrd-tray) dark mode'a uyar, hex değeri uymaz.
Kategoriler
- Renk: accent, yüzeyler, çizgiler, metin tonları ve durum renkleri.
- Tipografi: font stack'leri, satır yüksekliği ve harf aralığıyla dokuz boyut, üç ağırlık.
- Boşluk: 4 ve 8 piksellik bir ölçek ve layout genişlikleri.
- Köşe yuvarlaklığı: yüzeyler iç içe geçtikçe küçülen dokuz köşe boyutu.
- Yükselti: mürekkep tonlu gölgeler ve focus halesi.
- Hareket: süreler ve tek easing eğrisi.
- Breakpoint'ler ve layer'lar: iki breakpoint ve z-index ölçeği.
Token'ları kullanma
Yalnızca değişkenlere ihtiyacın varsa token'ları component kuralları olmadan import et:
import "@merid/react/tokens.css";Sonra CSS'in değer kabul ettiği her yerde kullan:
.panel {
padding: var(--mrd-space-7);
border-radius: var(--mrd-radius-card);
background: var(--mrd-tray);
color: var(--mrd-body);
}Token'ları ezme
Bir token'ı global olarak değiştirmek için :root üzerinde, yalnızca bir alt ağaçta değiştirmek için o elemanda tanımla. Token'lar merid.tokens layer'ında durur; bu yüzden layer'sız sıradan bir tanım her zaman kazanır. Ayrıntılar için Stil ve CSS layer'ları sayfasına bak.