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]

Důraz

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

Barva

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

Caution

Pro funkční barvy jako například status-error a status-succes nepoužívejte přímo red nebo green barvu.

Brand

Status

Práva

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.

Věděli jste?

Barevný nádech a intenzitu saturace těchto povrchů lze přizpůsobit v seed pomocí parametrů surfaceBrand a surfaceIntensity.

Note

Od ostatních povrchů se neutální odlišují použitím barvy textu.

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é

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