Text

Barvy textů jsou odvozeny od palety a funkčních barev. Z požadavků na kontrast, které chceme spňovat, jsou tyto barvy speciálně upraveny tak, abychom kritéria WCAG splnili. Nabízíme dva odstíny z každé barvy textu:

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 odlišení důležitosti některých textů je třeba míti více odstínů písma. V současné chvíli nabízíme tři a k nim tři barevné 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 parimá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ů máme i pro texty možnost barevných variant podle primární a sekundární barvy aplikace. Využití je z největší části u textů interaktivních prvků jako jsou například tlačítka.

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

Další z potřeb pro barevné texty jsou různé status hlášky. Slouží především jako upozornění pro uživatele.

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í 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	Doboruč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
Grey	--text-grey	--text-grey-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.