Yükselti
Merid'de yükselti önce yüzeylerden, sonra gölgelerden gelir. Sayfadaki bir kart gri yüzeyin (tray) üzerinde durur; gri yüzey üzerindeki bir kart ise yumuşak gölgeli beyaz bir yüzeye döner. Kenarlık son çaredir.
Gölge ölçeği
Tüm gölgeler uzun, yumuşak ve silik; siyahla değil mürekkep tonuyla (rgb(15 18 25 / …)) renklendirilir. Tek doygun gölge, birincil butonun accent parıltısıdır.
--mrd-shadow-xsSeçili pill--mrd-shadow-smİkon kutusu--mrd-shadow-mdKart yükselmesi--mrd-shadow-lgPopover, toast, tooltip--mrd-shadow-xlMenü--mrd-shadow-2xlDialog--mrd-shadow-accentYalnızca birincil butonSeviye seçme
| Yüzey | Gölge |
|---|---|
| Segmented control'deki seçili chip | --mrd-shadow-xs |
| Gri yüzey üzerindeki kart, hover'daki etkileşimli kart | --mrd-shadow-md |
| Popover, toast, tooltip | --mrd-shadow-lg |
| Menü | --mrd-shadow-xl |
| Dialog | --mrd-shadow-2xl |
Dark mode'da
Gölgeler %40–60 opaklıkta siyaha döner ve yükseltilmiş yüzeyler --mrd-elevated-ring ile 1px'lik bir halka ekler. Kendi yüzeylerin de aynı davransın diye bunu gölgenin yanına ekle:
.floating-panel {
box-shadow: var(--mrd-shadow-lg), var(--mrd-elevated-ring);
}Focus halesi
--mrd-focus-ring, düşük opaklıkta 4px'lik bir accent halesidir ve input'larda accent kenarlıkla birlikte kullanılır. Diğer kontroller 3px ofsetli 2px'lik bir accent outline kullanır.