Povrchy

Povrchy jsou skupina tokenů pro pozadí komponent. Každý povrch má varianty pro default, hover a active a odpovídající barvy textu.

Kdy použít

• Když potřebujete vizuální hierarchii přes pozadí (nikoliv jen přes text).
• Když řešíte stavy interakce (default, hover, active) konzistentně.
• Když chcete mít čitelnost pod kontrolou i na barevných plochách.

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á barva povrchu má několik úrovní důrazu (emphasis), aby šla použít od jemných po výrazné prvky.

Typ	Popis	Proměnná
Main	Stejné využití jako Surface Main, jen je obarven.	--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ě je 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

Upozornění

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

Brand

Status

Práva

Neutrální

Neutrální povrchy tvoří většinu UI. Slouží pro běžné layouty, obsah a čitelné oddělení informací.

Věděli jste?

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

Poznámka

Od ostatních povrchů se neutrální odlišují použitím barev 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ůhledná varianta neutrálních povrchů. Hodí se tam, kde chcete lehčí nebo „glass“ vzhled.

Typ	Proměnná
Base Translucent	--surface-base-translucent
Base Variant Translucent	--surface-base-variant-translucent
Main Translucent	--surface-main-translucent
Main Dim Translucent	--surface-main-dim-translucent
Main Variant Translucent	--surface-main-variant-translucent
Main Bright Translucent	--surface-main-bright-translucent
Control Translucent	--surface-control-translucent
Control Variant Translucent	--surface-control-variant-translucent
Front Translucent	--surface-front-translucent