Tasarım Tokenları

Design Tokens, tasarım sistemlerini yönetmek için kullanılan bir stratejidir.

Tasarım sistemindeki tüm yeniden kullanılabilir öğeleri (örneğin renkler, yazı tipleri, boşluklar vb.) bağımsız değişkenler halinde soyutlayarak, tüm tasarım sistemi boyunca bunları birleşik bir şekilde yönetmenize ve uygulamanıza olanak tanır.

mdui, Design Tokens'ı uygulamak için genel CSS Custom Property'leri kullanır. Bu, yalnızca CSS Custom Property'leri değiştirerek tüm mdui bileşenlerinin stillerini genel olarak değiştirebileceğiniz anlamına gelir. Aynı zamanda, kendi geliştirdiğiniz stiller için de öncelikle CSS Custom Property'lerini referans almanız önerilir. Bu, stillerinizin mdui bileşenlerinin stilleriyle tutarlı olmasını sağlamanın yanı sıra, dinamik renk düzenini değiştirirken kendi stillerinizin de renk düzeniyle senkronize olarak güncellenmesini sağlar.

Renk

mdui, Açık Mod ve Koyu Mod için ayrı ayrı birer grup CSS Custom Property sağlar. Açık Mod'da CSS Custom Property adı --mdui-color-{name}-light şeklindedir, burada {name} renk adıdır; Koyu Mod'da ise --mdui-color-{name}-dark şeklindedir.

Ayrıca mdui, --mdui-color-{name} adında bir CSS Custom Property daha sağlar. Bu özellik, Açık Mod'da --mdui-color-{name}-light değerini, Koyu Mod'da ise --mdui-color-{name}-dark değerini referans alır. Bu sayede mevcut Açık Mod ve Koyu Mod'a göre rengi otomatik olarak değiştirebilir.

Bazı renklerin CSS Custom Property'lerini değiştirmeniz gerekiyorsa, hem --mdui-color-{name}-light hem de --mdui-color-{name}-dark özelliklerini aynı anda değiştirmeniz gerekir. CSS Custom Property'leri okurken ise doğrudan --mdui-color-{name} özelliğini kullanın.

CSS Custom Property'lerinin değeri, üç rengin RGB değerlerinin , ile ayrılmasıyla oluşur. Aşağıdaki örnek, renk CSS Custom Property'lerinin kullanımını göstermektedir:

/* primary renginin değerini değiştir */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* foo öğesinin arka plan rengini primary olarak ayarla */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* bar öğesinin arka plan rengini 0.8 opaklıkta primary olarak ayarla */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Tamamen yeni bir renk şeması oluşturmanız gerekiyorsa, setColorScheme fonksiyonunu kullanmanız önerilir. Bu fonksiyon, verdiğiniz bir renk değerine göre tam bir renk şeması oluşturabilir.

Köşe Yuvarlaklığı

mdui, 7 farklı boyutta köşe yuvarlaklığı sağlar. Aşağıda bu köşe yuvarlaklığı CSS Custom Property'lerinin nasıl kullanılacağına dair bir örnek verilmiştir:

/* extra-small köşe yuvarlaklık boyutunu değiştir */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* foo öğesinin köşe yuvarlaklığını extra-small olarak ayarla */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Tipografi

mdui, Display large, Display medium, Display small, Headline large, Headline medium, Headline small, Title large, Title medium, Title small, Label large, Label medium, Label small, Body large, Body medium, Body small dahil olmak üzere 15 farklı metin stili sağlar.

Aşağıda kullanım örneği verilmiştir:

/* Body large metin stilini değiştir */
:root {
  --mdui-typescale-body-large-line-height: 1.6rem;
  --mdui-typescale-body-large-size: 1.2rem;
  --mdui-typescale-body-large-tracking: 0.01rem;
  --mdui-typescale-body-large-weight: 400;
}

/* foo öğesinin metin stilini Body large olarak ayarla */
.foo {
  line-height: var(--mdui-typescale-body-large-line-height);
  font-size: var(--mdui-typescale-body-large-size);
  letter-spacing: var(--mdui-typescale-body-large-tracking);
  font-weight: var(--mdui-typescale-body-large-weight);
}

Durum Katmanı Opaklığı

Bazı mdui bileşenleri, etkileşim sırasında üzerlerine yarı saydam bir katman ekler. Örneğin, <mdui-button> bileşeni, fare üzerine gelindiğinde, odaklandığında, tıklandığında veya sürüklendiğinde yarı saydam bir katman belirir. Bu katmanların opaklığını CSS Custom Property'leri değiştirerek ayarlayabilirsiniz.

Aşağıda kullanım örneği verilmiştir:

/* Durum katmanı opaklığını değiştir */
:root {
  --mdui-state-layer-hover: 0.08;
  --mdui-state-layer-focus: 0.12;
  --mdui-state-layer-pressed: 0.12;
  --mdui-state-layer-dragged: 0.16;
}

Yükselme Yüksekliği (Gölge)

Bazı mdui bileşenleri, sayfadaki yükselme hissini simüle etmek için gölge efektine sahiptir. Bu efektleri CSS Custom Property'leri değiştirerek bileşenlerin gölge efektlerini ayarlayabilirsiniz.

Aşağıda kullanım örneği verilmiştir:

/* level1 seviyesindeki gölgeyi değiştir */
:root {
  --mdui-elevation-level1:
    0 0.5px 1.5px 0 rgba(var(--mdui-color-shadow), 19%),
    0 0 1px 0 rgba(var(--mdui-color-shadow), 3.9%);
}

/* foo öğesinin gölgesini level1 olarak ayarla */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animasyon

mdui bileşenlerindeki animasyonların hız eğrisi ve süresi CSS Custom Property'leri aracılığıyla yapılandırılabilir.

Aşağıda kullanım örneği verilmiştir:

/* standard hız eğrisini ve short1 süresini değiştir */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* foo öğesinin geçiş efektini standard hız eğrisi ve short1 süresi kullanacak şekilde ayarla */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Duyarlı Kırılma Noktaları

mdui bir dizi duyarlı kırılma noktası sağlar. Bu kırılma noktaları CSS Custom Property'leri aracılığıyla yapılandırılabilir. Aşağıda kullanım örneği verilmiştir:

/* sm kırılma noktası değerini değiştir */
:root {
  --mdui-breakpoint-sm: 560px;
}

Dikkat edilmesi gereken nokta, bu CSS Custom Property'leri CSS medya sorgularında kullanılamaz. Aşağıdaki örnek hatalı bir kullanımdır:

/* Hatalı kullanım. Medya sorgusunda CSS Custom Property kullanılamaz */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

JavaScript'te kırılma noktası kontrolü yapmanız gerekiyorsa, breakpoint fonksiyonunu kullanabilirsiniz.