Design token

A design token egy olyan stratégia a design rendszerek kezelésére.

A design rendszer összes újrafelhasználható elemét (például színek, betűtípusok, terek stb.) független változókká absztrahálja, hogy egységes kezelést és alkalmazást tegyen lehetővé a teljes design rendszerben.

Az mdui globális CSS egyéni tulajdonságokat használ a design token megvalósításához. Ez azt jelenti, hogy a CSS egyéni tulajdonságok módosításával globálisan módosíthatja az összes mdui komponens stílusát. Ugyanakkor a saját fejlesztésű stílusaihoz is javasolt előnyben részesíteni a CSS egyéni tulajdonságok hivatkozását, hogy biztosítsa a stílusok egységességét az mdui komponensekkel. Emellett a dinamikus szín módosításakor a saját stílusai is szinkronban frissülhetnek.

Színek

Az mdui a világos módhoz és a sötét módhoz külön-külön CSS egyéni tulajdonságcsoportokat biztosít. Világos módban a CSS egyéni tulajdonság neve --mdui-color-{name}-light, ahol {name} a szín neve; sötét módban --mdui-color-{name}-dark.

Ezenkívül az mdui biztosít egy --mdui-color-{name} nevű CSS egyéni tulajdonságcsoportot is. Ez a tulajdonság világos módban a --mdui-color-{name}-light értékére hivatkozik, sötét módban pedig a --mdui-color-{name}-dark értékére, így automatikusan vált az aktuális világos és sötét mód szerint.

Ha módosítania kell egyes színek CSS egyéni tulajdonságait, egyszerre kell módosítania a --mdui-color-{name}-light és a --mdui-color-{name}-dark tulajdonságokat. A CSS egyéni tulajdonságok beolvasásához pedig közvetlenül használja a --mdui-color-{name} tulajdonságot.

A CSS egyéni tulajdonságok értéke a három RGB-szín vesszővel elválasztva. Az alábbi példa bemutatja a színek CSS egyéni tulajdonságainak használatát:

/* A primary szín értékének módosítása */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* A .foo elem háttérszínének beállítása primary-re */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* A .bar elem háttérszínének beállítása 0,8 átlátszatlanságú primary-re */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Ha teljesen új színsémát szeretne létrehozni, javasoljuk a setColorScheme függvény használatát, amely egy adott színérték alapján generál egy teljes színsémát.

Lekerekítések

Az mdui 7 különböző méretű lekerekítést biztosít. Az alábbi példa bemutatja a lekerekítések CSS egyéni tulajdonságainak használatát:

/* Az extra-small lekerekítés méretének módosítása */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* A .foo elem lekerekítésének beállítása extra-small értékre */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Tipográfia

Az mdui 15 különböző szövegtípust biztosít, beleértve a 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 kategóriákat.

Az alábbiakban egy használati példa látható:

/* A Body large szövegtípus módosítása */
: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;
}

/* A .foo elem szövegtípusának beállítása Body large-re */
.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);
}

Állapotréteg átlátszatlansága

Egyes mdui komponensek interakció során egy áttetsző réteget adnak hozzájuk. Például a <mdui-button> komponens egér fölé helyezésekor, fókuszáláskor, lenyomáskor vagy húzáskor áttetsző réteg jelenik meg. A CSS egyéni tulajdonságok módosításával állíthatja be ezen rétegek átlátszatlanságát.

Az alábbiakban egy használati példa látható:

/* Az állapotréteg átlátszatlanságának módosítása */
: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;
}

Emelési magasság (árnyék)

Egyes mdui komponensek árnyékhatással rendelkeznek, hogy az oldalon való emelkedés érzetét keltsék. A CSS egyéni tulajdonságok módosításával állíthatja be a komponensek árnyékhatását.

Az alábbiakban egy használati példa látható:

/* A level1 szintű árnyék módosítása */
: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%);
}

/* A .foo elem árnyékának beállítása level1-re */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animáció

Az mdui komponensekben az animációkhoz használt simítási görbék és időtartamok CSS egyéni tulajdonságokkal konfigurálhatók.

Az alábbiakban egy használati példa látható:

/* A standard simítási görbe és a short1 időtartam módosítása */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* A .foo elem átmenetének beállítása a standard simítási görbével és a short1 időtartammal */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Reszponzív töréspontok

Az mdui számos reszponzív töréspontot biztosít, amelyek CSS egyéni tulajdonságokkal konfigurálhatók. Az alábbiakban egy használati példa látható:

/* A sm töréspont értékének módosítása */
:root {
  --mdui-breakpoint-sm: 560px;
}

Fontos megjegyezni, hogy ezek a CSS egyéni tulajdonságok nem használhatók CSS médialekérdezésekben. Az alábbiakban egy helytelen példa látható:

/* Helytelen használat. A médialekérdezésben nem használhatók CSS egyéni tulajdonságok */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Ha JavaScript-ben szeretne töréspont-ellenőrzést végezni, használhatja a breakpoint függvényt.