Funkční barvy

Funkční barvy v rozhraní nenesou jen estetiku, ale hlavně význam. Umožňují jasně odlišit, co je primární akce, co je potvrzení úspěchu, co je varování a co je chyba vyžadující zásah. Jejich cílem je, aby stejný význam byl napříč aplikací komunikován stejnou barvou a stejným způsobem.

Jak vybírat správnou skupinu

Brand: identita produktu a primární interakce.
Stav: výsledky akce a systémová hlášení (success/warning/error/information).
Práva: povinnost/doporučení v datech formuláře.

TODO: Doplnit rozhodovací diagram “Kdy použít Brand vs Stav vs Práva”.

Brand

Brand určuje barevnou identitu aplikace. Ve Spectru pracujeme se dvěma barvami: primární a sekundární. Po jejich nastavení se automaticky obarví hlavní prvky UI (tlačítka, menu, záložky).

Změna brandingu V sekci Brand Colors vyber z palety primární a sekundární barvu. Nově můžeš použít svou vlastní barvu. Vyber ji z color pickeru nebo rovnou vlož HEX kód 💪

Význam	Popis	Seed
Primary	Určuje dominantní barvu aplikace, která se používá pro klíčové vizuální prvky, jako jsou tlačítka, odkazy, checkboxy a další interaktivní komponenty. Tato barva je základem vizuální identity aplikace a pomáhá vytvořit jednotný a snadno rozpoznatelný design, který podporuje značku a usnadňuje orientaci pro uživatele.	brandPrimary
Secondary	Doplňuje primární barvu a je ideální pro použití v navigačním menu, záložkách a dalších podpůrných prvcích. Tato barva může aplikaci jednoduše zpestřit nebo navazovat na logo projektu, které může mít více barev. Projektu dodává vizuální rozmanitost a oživení.	brandSecondary

Příklady použití

.foo {
  background-color: var(--surface-brand-primary-strong);
}

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

.qux {
  border-color: var(--brand-primary-50);
}

Stav

Stavové barvy říkají, jestli akce dopadla dobře, je potřeba pozor, nebo došlo k chybě.

Význam	Popis	Seed
Success	Používá se pro označení úspěšných stavů, jako je potvrzení akcí nebo oznámení o dokončení. Barvy v této kategorii navozují pocit klidu a spolehlivosti.	statusSuccess
Warning	Upozorňuje na potenciální problémy nebo varování. Barvy v této kategorii přitahují pozornost a signalizují opatrnost.	statusWarning
Error	Označuje chyby a kritické stavy. Tyto barvy jasně signalizují problémy, které vyžadují nápravu.	statusError
Information	Slouží k zobrazení doplňujících informací nebo neutrálních oznámení.	statusInformation

.foo--success {
  background-color: var(--surface-status-success-strong);
}

.foo--warning {
  background-color: var(--surface-status-warning-strong);
}

.foo--error {
  background-color: var(--surface-status-error-strong);
}

.foo--information {
  background-color: var(--surface-status-information-strong);
}

Práva

Podobně barvami označujeme i práva, typicky povinnost vyplnit pole. Aktuálně rozlišujeme tři úrovně.

Význam	Popis	Název barvy
Povinné	Pro pokračování je nutné vyplnění nebo zaškrtnutí políčka	`rights-required`
Odloženě povinné	Signalizace budoucí povinnosti políčka	`rights-postponed-required`
Doporučeno	Vyplnění není povinné, ale pro upřesnění údajů pouze doporučeno	`rights-recommended`

.foo--required {
  background-color: var(--surface-rights-required-strong);
}

.foo--postponedrequired {
  background-color: var(--surface-rights-postponed-required-strong);
}

.foo--recommended {
  background-color: var(--surface-rights-recommended-strong);
}

TODO: Doplnit obrázek “správně/špatně” pro status hlášky (např. nepoužívat error barvu pro informaci).