Design token

Designové tokeny jsou způsob správy designového systému.

Převádějí znovupoužitelné prvky v designovém systému (např. barvy, písma, mezery) na samostatné proměnné, aby je bylo možné jednotně spravovat a používat napříč celým systémem.

mdui používá k implementaci designových tokenů globální CSS Custom Property. To znamená, že stačí upravit CSS Custom Property a můžete globálně měnit styly všech komponent mdui. Zároveň se doporučuje, abyste ve svých vlastních stylech co nejvíce odkazovali na CSS Custom Property, aby vaše styly zůstaly jednotné se styly komponent mdui. Kromě toho, při úpravě dynamického barevného schématu se vaše vlastní styly také synchronně aktualizují.

Barva

mdui poskytuje sadu CSS Custom Property pro světlý režim a sadu pro tmavý režim. Ve světlém režimu je název CSS Custom Property --mdui-color-{name}-light, kde {name} je název barvy; v tmavém režimu je to --mdui-color-{name}-dark.

Kromě toho mdui poskytuje také sadu CSS Custom Property s názvem --mdui-color-{name}, která ve světlém režimu odkazuje na --mdui-color-{name}-light a v tmavém režimu na --mdui-color-{name}-dark, takže se automaticky přepíná podle světlého a tmavého režimu.

Pokud potřebujete upravit hodnoty některých barev CSS Custom Property, musíte upravit obě vlastnosti --mdui-color-{name}-light a --mdui-color-{name}-dark. Při čtení CSS Custom Property použijte přímo vlastnost --mdui-color-{name}.

Hodnotou CSS Custom Property jsou tři barevné složky RGB oddělené čárkami. Následující příklad ukazuje použití CSS Custom Property pro barvy:

/* Úprava hodnoty barvy primary */
:root {
  --mdui-color-primary-light: 103, 80, 164;
  --mdui-color-primary-dark: 208, 188, 255;
}

/* Nastavení barvy pozadí prvku foo na primary */
.foo {
  background-color: rgb(var(--mdui-color-primary));
}

/* Nastavení barvy pozadí prvku bar na primary s neprůhledností 0.8 */
.bar {
  background-color: rgba(var(--mdui-color-primary), 0.8);
}

Pokud potřebujete vytvořit zcela nové barevné schéma, doporučujeme použít funkci setColorScheme, která na základě zadané barvy vygeneruje celou sadu barev.

Zaoblení rohů

mdui poskytuje 7 různých velikostí zaoblení rohů. Následuje příklad použití těchto CSS Custom Property:

/* Úprava velikosti zaoblení extra-small */
:root {
  --mdui-shape-corner-extra-small: 0.3rem;
}

/* Nastavení zaoblení prvku foo na extra-small */
.foo {
  border-radius: var(--mdui-shape-corner-extra-small);
}

Typografie

mdui poskytuje 15 různých stylů textu, včetně 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.

Následuje příklad použití:

/* Úprava stylu textu Body large */
: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;
}

/* Nastavení stylu textu prvku foo na Body large */
.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);
}

Neprůhlednost stavové vrstvy

Některé komponenty mdui při interakci přidávají na svůj povrch poloprůhlednou vrstvu. Například komponenta <mdui-button> zobrazuje poloprůhlednou vrstvu při najetí myší, zaostření, stisknutí nebo přetažení. Můžete upravit neprůhlednost těchto vrstev úpravou CSS Custom Property.

Následuje příklad použití:

/* Úprava neprůhlednosti stavové vrstvy */
: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;
}

Nadmořská výška (stín)

Některé komponenty mdui mají efekt stínu, který simuluje pocit nadmořské výšky komponenty na stránce. Můžete upravit efekt stínu komponent úpravou CSS Custom Property.

Následuje příklad použití:

/* Úprava stínu úrovně level1 */
: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%);
}

/* Nastavení stínu prvku foo na level1 */
.foo {
  box-shadow: var(--mdui-elevation-level1);
}

Animace

Křivky zrychlení animací a doby trvání v komponentách mdui lze konfigurovat pomocí CSS Custom Property.

Následuje příklad použití:

/* Úprava křivky zrychlení standard a doby trvání short1 */
:root {
  --mdui-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1);
  --mdui-motion-duration-short1: 40ms;
}

/* Nastavení přechodu prvku foo s křivkou zrychlení standard a dobou trvání short1 */
.foo {
  transition: all var(--mdui-motion-duration-short1)
    var(--mdui-motion-easing-standard);
}

Responzivní breakpointy

mdui poskytuje řadu responzivních breakpointů, které lze konfigurovat pomocí CSS Custom Property. Následuje příklad použití:

/* Úprava hodnoty breakpointu sm */
:root {
  --mdui-breakpoint-sm: 560px;
}

Je důležité si uvědomit, že tyto CSS Custom Property nelze použít v CSS media queries. Následuje příklad chybného použití:

/* Chybné použití. CSS Custom Property nelze použít v media queries */
@media (min-width: var(--mdui-breakpoint-sm)) {
}

Pokud potřebujete provádět vyhodnocování breakpointů v JavaScriptu, můžete použít funkci breakpoint.