Text

Barvy textu vycházejí z palety a funkčních barev. Jsou nastavené tak, aby splňovaly požadavky kontrastu. Pro každou barvu jsou dostupné dvě varianty:

Kategorie	Kontrast	Využití	Proměnná
Výchozí	> 4,5:1	Všechny texty	--text-[color]
Variant	> 3:1	Ikony nebo tučný text >19px nebo běžný text >24px	--text-[color]-variant

Poznámka

Barvy textů jsou určeny pouze pro neutrální povrchy. Pro ostatní využití použijte barvu připravenou přímo pro daný povrch.

Neutrální odstín

Pro rozlišení důležitosti textu použijte neutrální stupně. K dispozici jsou tři základní odstíny a jejich varianty.

Kategorie	Popis	Proměnná
Primární	Primární odstín textu	--text-primary
Sekundární	Méně výrazný odstín	--text-secondary
Disabled	Odstín značící neaktivnost	--text-disabled
Primární Variant	Varianta primárního odstínu	--text-primary-variant
Sekundární Variant	Varianta méně výrazného odstínu	--text-secondary-variant
Disabled Variant	Varianta odstínu pro neaktivnost	--text-disabled-variant

Poznámka

Výchozí text ponechte jako primární, méně důležitý obsah upozaďte jako sekundární. Disabled text využívejte výhradně u neaktivních prvků.

.foo {
    color: var(--text-primary);
}

.bar {
    color: var(--text-secondary);
}

.qux[disabled] {
    color: var(--text-disabled);
}

Brand

Stejně jako u povrchů i u textů existují brand varianty podle primární a sekundární barvy aplikace. Nejčastěji je využijete u interaktivních prvků.

Kategorie	Popis	Proměnná
Brand Primary	Primární barevnost textu.	--text-brand-primary
Brand Secondary	Sekundární barevnost textu.	--text-brand-secondary
Brand Primary Variant	Varianta primární barevnost textu.	--text-brand-primary-variant
Brand Secondary Variant	Varianta sekundární barevnost textu.	--text-brand-secondary-variant

.foo {
    color: var(--text-brand-secondary-variant);
}

.bar {
    color: var(--text-brand-primary);
}

Status

Status barvy textu používejte pro systémové zprávy a upozornění.

Kategorie	Popis	Proměnná
Status Error	Hláška značící chybu	--text-status-error
Status Warning	Hláška varující uživatele před možným problémem	--text-status-warning
Status Success	Hláška značící úspěch	--text-status-success
Status Information	Hláška informující o běžných procesech aplikace	--text-status-information
Status Error Variant	Varianta hlášky značící chybu	--text-status-error-variant
Status Warning Variant	Varianta hlášky varující uživatele před problémem	--text-status-warning-variant
Status Success Variant	Varianta hlášky značící úspěch	--text-status-success-variant
Status Information Variant	Varianta hlášky informující o běžných procesech aplikace.	--text-status-information-variant

.foo {
    color: var(--text-status-error);
}

.bar {
    color: var(--text-status-success-variant);
}

Práva

Barevné texty mohou být využity také v rámci práv.

Kategorie	Popis	Proměnná
Rights Required	Povinné	--text-rights-required
Rights Postponed Required	Odložené povinné	--text-rights-postponed-required
Rights Recommended	Doporučeno	--text-rights-recommended
Rights Required Variant	Povinné v barevné variantě	--text-rights-required-variant
Rights Postponed Required Variant	Odložené povinné v barevné variantě	--text-rights-postponed-required-variant
Rights Recommended Variant	Doporučeno v barevné variantě	--text-rights-recommended-variant

.foo {
    color: var(--text-rights-required);
}

Paleta

V případě potřeby lze samozřejmě využít barvy textů odvozené z palety.

Kategorie	Proměnná	Varianta
Red	--text-red	--text-red-variant
Pink	--text-pink	--text-pink-variant
Fuchsia	--text-fuchsia	--text-fuchsia-variant
Deep Purple	--text-deep-purple	--text-deep-purple-variant
Navy	--text-navy	--text-navy-variant
Blue	--text-blue	--text-blue-variant
Light Blue	--text-light-blue	--text-light-blue-variant
Aqua	--text-aqua	--text-aqua-variant
Teal	--text-teal	--text-teal-variant
Green	--text-green	--text-green-variant
Light Green	--text-light-green	--text-light-green-variant
Lime	--text-lime	--text-lime-variant
Yellow	--text-yellow	--text-yellow-variant
Amber	--text-amber	--text-amber-variant
Orange	--text-orange	--text-orange-variant
Deep Orange	--text-deep-orange	--text-deep-orange-variant
Brown	--text-brown	--text-brown-variant
Gray	--text-gray	--text-gray-variant
Silver	--text-silver	--text-silver-variant
Black	--text-black	--text-black-variant

.foo {
    color: var(--text-pink);
}

.bar {
    color: var(--text-aqua-variant);
}

.qux {
    color: var(--text-amber);
}

Upozornění

Pro tónování textu nepoužívejte šedou, stříbrnou ani černou, ale neutrální odstíny.