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.

Význam	Popis	Název barvy
Primární barva	Nejvýraznější barva celé aplikace, jenž se využívá u většiny výrazně zbarvených interaktivních komponent. Ve výchozím tématu je také aplikována pro obarvení neutrálních povrchů	brand-primary
Sekundární barva	Využívá se pro zvýraznění navigačních prvků jako menu a záložky. Doplňuje primární barvu pro zvýšení vizuální pestrosti	brand-secondary

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)
}

Tip

Navštiv články o površích nebo textech a dozvíš se více o proměnných --surface-* a --text-*.

Jak změnit branding barvu?

Použij Motivo V pravém panelu v sekci Brand vyber z palety primární a sekundární barvu.

Poté stáhni soubor spectro-theme.css s tématem pro tvou aplikaci, který nahraješ do složky /client/css/ na potřebném serveru. Tímto souborem můžeš přepsat dodávaný spectro-theme.css nebo si jej přejmenovat a v initParams přidat do stylů aplikace. Tím, že se tvuj.css nalinkuje jako poslední, dostane díky kaskádě CSS prioritu nad původním spectro-theme.css.

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	Název barvy
Úspěch	Oznamuje úspěch požadavku, či jiné potvrzení vyvolané akce. Lze použít také pro pozitivní akci, například schválení požadavku.	status-success
Varování	Varuje uživatele před potenciálním nebezpečím, či kritickým rozhodnutím.	status-warning
Chyba	Oznamuje neúspěch požadavku, nebo jiný technický problém. Lze použít také pro negativní akci, například zamítnutí požadavku či smazání.	status-error
Informace	Informuje uživatele o obecnějších věcech. Například uložení dat.	status-information

.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);
}