Povrchy
Jedná se o skupinu tokenů, která spolu tvoří sadu pro stylování elementů nebo komponent. Každý povrch nabízí tokeny pro najetí a stisknutí, jenž využijeme u interaktivních komponent. Kromě barvy pozadí existují také tokeny pro kontrastní barvy písma pro konkrétní povrch.
| Token | Popis | Proměnná |
|---|---|---|
| Default | Výchozí barva pozadí | --surface-[color]-[emphasis] |
| Hover | Barva pozadí při najetí kurzoru | --surface-[color]-[emphasis]-hover |
| Active | Barva pozadí při kliku nebo zvolení | --surface-[color]-[emphasis]-active |
| Text Primary | Barva primárního textu | --text-primary-on-surface-[color]-[emphasis] |
| Text Secondary | Barva sekundárního textu | --text-secondary-on-surface-[color]-[emphasis] |
| Text Disabled | Barva neaktivního textu | --text-disabled-on-surface-[color]-[emphasis] |
Každá z barva povrchu je dále rozdělena do pěti úrovní důrazu (emphasis), jenž splňují naše podmínky pro flexibilitu, univerzálnost a přehlednost.
| Typ | Popis | Proměnná |
|---|---|---|
| Main | Stejné využití Surface Main, jen je obraven. | --surface-[color]-main |
| Minimal | Vhodné pro pozadí, které není nápadné, nezaujme pozornost. | --surface-[color]-minimal |
| Subtle | Pro aplikace, kde je potřeba nízká, ale patrná vizuální přítomnost. | --surface-[color]-subtle |
| Moderate | Pro výrazné prvky designu, normovaný jas a chroma napříč barvami. | --surface-[color]-moderate |
| Strong | Pro výrazné prvky designu, barvém ponechán jas a chroma. | --surface-[color]-strong |
| Contrast | K vytvoření výrazných kontrastů a důrazu. | --surface-[color]-contrast |
Jako název barvy slouží názvy barev z palety a funkčních barev, například
| Povrch | Proměnná |
|---|---|
| Surface Red Minimal | --surface-red-minimal |
| Surface Aqua Strong | --surface-aqua-strong |
| Surface Status Success Subtle | --surface-status-success-subtle |
| Surface Brand Primary Contrast | --surface-brand-primary-contrast |
Status
Section titled “Status”
Neutrální
Section titled “Neutrální”Neutrální povrchy jsou základní složkou designu a tvoří majoritní podíl ve vizualitě aplikace. Právě proto potřebujeme mít širokou paletu neutrálních elementů, jenž budou vhodné do konkrétních situací. Ať už pro rozlišení důležitosti některých informací, či pro lepší čitelnost.
| Typ | Popis | Proměnná |
|---|---|---|
| Base | Základní povrch pozadí. | --surface-base |
| Base Variant | Varianta povrchu pozadí. | --surface-base-variant |
| Main | Základní barva elementu. | --surface-main |
| Main Dim | Tlumený element. | --surface-main-dim |
| Main Variant | Varianta barvy elementu. | --surface-main-variant |
| Main Bright | Výrazný element. | --surface-main-bright |
| Control | Barva ovládacího prvku. | --surface-control |
| Control Variant | Varianta ovládacího prvku. | --surface-control-variant |
| Front | Popředí pop-upu. | --surface-front |
Neutrální průsvitné
Section titled “Neutrální průsvitné”Translucentní povrchy jsou průhlednou alternativou k těm klasickým. Mohou být vhodným řešením pro volnější designy aplikace a pro dosažení modernějšího stylu.
| Typ | Popis | Proměnná |
|---|---|---|
| Base Translucent | Základní povrch pozadí. | --surface-base-translucent |
| Base Variant Translucent | Varianta povrchu pozadí. | --surface-base-variant-translucent |
| Main Translucent | Základní barva elementu. | --surface-main-translucent |
| Main Dim Translucent | Tlumený element. | --surface-main-dim-translucent |
| Main Variant Translucent | Varianta barvy elementu. | --surface-main-variant-translucent |
| Main Bright Translucent | Výrazný element. | --surface-main-bright-translucent |
| Control Translucent | Barva ovládacího prvku. | --surface-control-translucent |
| Control Variant Translucent | Varianta ovládacího prvku. | --surface-control-variant-translucent |
| Front Translucent | Popředí pop-upu. | --surface-front-translucent |
