Funkční barvy

Tyto barvy mají specifický význam a pomáhají uživatelům rychle a snadno porozumět tomu, co mohou dělat. Nejčastějšími funkčními barvami jsou modrá, červená, zelená a žlutá. Při používání funkčních barev je důležité dodržovat zásady konzistence, kontrastu a rozlišení.

Brand

Branding je pojmem pro selekci barevnosti aplikace. Může jej tvořit libovolné množství barev, my využíváme dvě – primární a sekundární – což nám dává dostatečný prostor jedinečnému rozlišení aplikace. Při výběru barev dojde k automatickému obarvení základních prvků jako jsou tlačítka, ikonky v menu, či záložky. Základním rozvržením aplikace je kombinace modrá-oranžová. Tuto kombinaci není vůbec nutno dodržovat – naopak – experimentujte napříč vašimi aplikacemi.

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

Barevnost je důležitá v komunikaci s uživatelem – co probělho správně, na co si dát pozor, nebo jestli není něco špatně. V současné chvíli využíváme stavové barvy.

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ě stav potřebujeme v aplikaci občas také znázornit barevně práva, typicky povinné políčko. Ty můžeme opět jednoduše použít pomocí definovaných předvolených barev, kterých současné chvíli rozlišujeme tři.

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-postponedrequired-strong);
}

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