React için sade ve özenli component'ler.
Sade CSS ve tek bir token setiyle 46 erişilebilir component. İnce çizgiler, tek bir soğuk accent ve sakin hareket; süslenmiş değil, işlenmiş görünen ürünler için.
- Component
- 46
- Stil dosyası
- 1
- Cascade layer
- 3
- Lisans
- MIT
Component'i değil, token'ı değiştir.
Tema, accent ve yoğunluk birer CSS değişkeni. Değiştirdiğinde aşağıdaki her kontrol onlara uyar. Bu bir ekran görüntüsü değil, kütüphanenin kendisi.
northwind-web
stage.html
<div
data-theme="light"
data-accent="blue"
data-density="default"
>
…
</div>Herhangi bir elemanda üç attribute. İç içe çalışır, provider gerektirmez, runtime'da stil eklemez.
46 component, tek sözleşme.
Layout primitive'lerinden overlay'lere kadar. Her sayfada canlı önizleme, props, klavye haritası ve erişilebilirlik notları var. Tüm liste
Form girdileri12
Layout06
Tipografi05
Veri gösterimi06
Geri bildirim05
Overlay07
Navigasyon05
Altı kural, her yerde aynı.
Her component aynı tasarım sözleşmesine uyar. Merid ile kurulan bir sayfa, ayrıca incelemeye gerek kalmadan bütünlüklü durur. İlkeler
- 01Tek accent, ölçülü kullanımEtkileşimi ve seçimi tek bir soğuk mavi taşır. Geri kalan her şey mürekkep tonlu nötr.
--mrd-accent - 02Önce yüzey, sonra çizgiBölgeleri önce gri yüzeyler ayırır. İnce çizgi son çaredir, daha kalını hiç kullanılmaz.
--mrd-tray - 03Yalnızca ince çizgilerHer kenarlık bir piksel. Seçim 1.5px'lik accent halkası. Asla iki piksel, asla koyu.
1px --mrd-line - 04Hiyerarşi tondan gelirÜç metin tonu ve iki font ağırlığı. Vurgu için renge yaslanılmaz.
ink · body · muted - 05Sakin etkileşim150–200 milisaniyede renk tonu değişimi ve .97'lik basma efekti. Azaltılmış hareket tercihinde hepsi kalkar.
--mrd-duration - 06Açık cascadeHer kural isimli bir layer'da durur. Senin stillerin !important olmadan kazanır.
@layer merid.*
Temeller
Her component'in arkasındaki token'lar: açık ve koyu değerleriyle, her birinin neden var olduğuyla.
- RenkTek accent, mürekkep tonlu nötrler, sakin durum renkleri.
--mrd-accent - TipografiGeist ve Geist Mono, dokuz boyut, üç ağırlık.
--mrd-text-* - Boşluk4 ve 8 piksellik adımlardan bölüm ritmine uzanan bir ölçek.
--mrd-space-* - Köşe yuvarlaklığıYüzeyler iç içe geçtikçe küçülen köşeler.
--mrd-radius-* - YükseltiMürekkep tonlu yumuşak gölgeler, dark mode'da ince bir halka.
--mrd-shadow-* - HareketÜç süre ve tek bir easing eğrisi.
--mrd-ease - Dark modeSistem tercihi ya da bir data-theme attribute'u.
data-theme - LayoutContainer, gutter, bölüm ve okuma genişlikleri.
--mrd-container
- TemellerAçık ve koyu değerleriyle renk, tipografi, boşluk, köşe, yükselti ve hareket token'ları.
- Component'lerLayout primitive'lerinden Select, Tabs, Table ve Toast'a kadar 46 erişilebilir component.
- Overlay'lerFocus yönetimiyle Dialog, Drawer, AlertDialog, Popover ve DropdownMenu.
- ErişilebilirlikAA kontrastlı token'lar ve her etkileşimli parça için WAI-ARIA klavye desenleri.
- StilTek stil dosyası, üç cascade layer; runtime'da CSS-in-JS yok, build eklentisi yok.