TEMELLER
TEMA
Temeller
Her bileşenin çizildiği tokenlar. Bu sayfa onları sitenin giydiği görünüşte, Pantrix hazır ayarında gösteriyor: Pantrix'in kendi boşluğu, yükseltisi, hareketi ve yoğunluğu üstünde bir markanın renkleri, yazısı ve şekilleri.
PantrixPreset
Açık ve koyu
Kontrast bu sayfada hesaplanır
Renk
Bir bileşen bir hex değil, bir rol ister. Markanın her rolü dörtlü bir PantrixColor: renk, üstüne yazılan, kabı ve kabın üstüne yazılan.
primary
#2264FF
onColor #FFFFFF
4,8:1 AA
kap #ECF3FE
5,8:1 AA
success
#1A8556
onColor #FFFFFF
4,6:1 AA
kap #E7F6EF
5,8:1 AA
info
#2264FF
onColor #FFFFFF
4,8:1 AA
kap #ECF3FE
5,8:1 AA
warning
#B95D15
onColor #FFFFFF
4,5:1 AA
kap #FFF2E6
6,6:1 AA
danger
#C42A55
onColor #FFFFFF
5,5:1 AA
kap #FCE7EC
7,5:1 AA
neutral
#4B4F5C
onColor #FFFFFF
8,2:1 AA
kap #EEF0F4
17,7:1 AA
Zeminler, metin ve çizgiler, açık
Rol
Renk
Yüzeyde
Ne için
background
#FFFFFF
1,00:1
Yüzeylerin arkasındaki pencere
surface
#FFFFFF
1,00:1
Kartlar, alanlar, sayfalar
textPrimary
#05070A
20,17:1 geçer
Metin
textSecondary
#4B4F5C
8,16:1 geçer
Yardım, yer tutucular, sayaçlar
textDisabled
#A0A5B3
2,46:1
Şu an kullanılamayan
border
#E7E9ED
1,22:1
Durgun bir alan
borderHover
#D5D9E0
1,42:1
İşaretçinin altında
borderStrong
#A0A5B3
2,46:1
Kaydırma çubukları, bir kontrolün kenarı
divider
#ECEEF3
1,16:1
Satırlar arasındaki çizgiler
focusRing
#2264FF
4,84:1 geçer
Klavyenin odağı
Pantrix paleti
50
#F4F8FF
100
#ECF3FE
200
#CFDFFF
300
#8BADFF
400
#5386FF
500
#2264FF
600
#1A52D6
700
#1442B8
25
#FAFBFC
50
#F5F7F9
100
#EEF0F4
200
#E7E9ED
300
#D5D9E0
400
#A0A5B3
500
#767A8A
600
#63647B
700
#4B4F5C
800
#2C2F3A
900
#101322
Yazı
Kütüphanenin birlikte getirdiği Plus Jakarta Sans'ta dokuz rol ve kod için bir tane. Rolü verilmeyen metin bir etikettir; bir alan stilinin rolünde yazar: telefonda gövdeninkinde, işaretçi altında etiketinkinde.
display · 36/42 Bold
Her platformun alışkanlıkları
headline · 28/34 Bold
Bu haftaki siparişler
title · 22/28 SemiBold
Teslimat adresi
callout · 18/26
Otuz gün içinde ücretsiz iade.
body · 16/24
Paket bugün depodan çıkıyor ve perşembe sana ulaşıyor.
label · 14/20
E-posta adresi
footnote · 12/16
Fiyatlara KDV dahildir.
caption · 11/14
2 dakika önce güncellendi
code · 14/20
PantrixTheme.typography.body
Boşluk
Yedi adım, PantrixTheme.spacing içinden. Bir sayfanın kenar boşlukları pencerenin boyut sınıfından gelir.
none
0dp
xs
4dp
sm
8dp
md
12dp
lg
16dp
xl
24dp
xxl
32dp
Şekil
Bileşenler bir ShapeRole ister; her birinin ne kadar yuvarlak olduğunu hazır ayar söyler. Pantrix hazır ayarı, kütüphanenin varsayılan ölçeğinden daha çok yuvarlar.
ExtraSmall
6dp · Pantrix 2dp
Small
8dp · Pantrix 4dp
Medium
12dp · Pantrix 8dp
Large
16dp · Pantrix 12dp
ExtraLarge
20dp · Pantrix 16dp
Full
Her ölçekte hap
Yükselti
none
0dp, bir kenar çizgisi
sm
1dp
md
2dp
lg
4dp
xl
8dp
Hareket
Üç süre. Sistem hareketi azalttığında tema kımıldayanı yerinde tutar ve bir anda değişmesine izin verir.
fast · 100ms
normal · 200ms
slow · 350ms
Yoğunluk
Uygulama başkasını istemedikçe Comfortable. Compact işaretçiye uyar ve bir dokunma hedefini asla platformun kendininkinden küçültmez; Spacious büyütür.
Compact · 0,85
Comfortable · 1
Spacious · 1,15