Základní barvy

Viz také core/variables.scss, helpers/colors.scss

$daintree-color: #002c3a
Vyvozujeme z ní pozadí hlavičky webu a pak drobnosti v rozhraní - například badges.
$green-color: #5fa316
Vyvozujeme z ní aktivní elementy: odkazy a tlačítka.
$brown-color: #2E2C09
Vyvozujeme z ní text a neutrální šedivé odstíny pro neutrální pozadí sekcí.
$red-color: #b43b18
Vyvozujeme z ní barvu textu chybových hlášení a v tmavší variantě barvu kódu.
$yellow-color: #EECF6D
Vyvozujeme z ní barvy pozadí důležitých, hlavně interaktivních elementů – ve světlejší variantě pro objednávkové formuláře, v tmavší pro informativní hlášení.

Sada základních barev je také na coolors.com.

Barvy pro text

$text-color
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

$text-color-lighter
Aby prošel přes WCAG jako AAA, je potřeba jej používat ideálně jen na bílém pozadí.
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rámečky

Používáme $border-color, což je světlejší odstín z $text-color-lighter.

TODO: Rámečky a oddělovače je potřeba zrevidovat. Hlavně na mobilech jsou některé zbytečně výrazné. Je potřeba mít jasnou stupnici hierarchií i tady.

Barvy pro pozadí

$bg-interactive, .bg-interactive
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Barvy pozadí pro objednávkové a jiné formuláře. Definováno v RGBa barvě kvůli použití na různých barvách pozadí.
$bg-message, .bg-message
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Chybové a informativní hlášky v rozhraní. Budeme také používat jako kontrastní pozadí v obrázcích atd.
$bg-dark, .bg-dark
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pozadí v barvě textu s bílým obsahem. Používáme jenom výjimečně, třeba pro reklamu na konci stránky.

„Šedivé“ odstíny

$grey-eee, .grey-eee
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
$grey-ddd, .grey-ddd
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
$grey-ccc, .grey-ccc
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
$grey-aaa, .grey-aaa
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Tmavozelené odstíny

Zatím jen pro hlavičku a obecně zelené pozadí. Viz také vd-trianglify-bright-2.svg.

$vd-darkgreen-color-0, .bg-darkgreen-0
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
$vd-darkgreen-color-33, .bg-darkgreen-33
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
$vd-darkgreen-color-66, .bg-darkgreen-66
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
$vd-darkgreen-color-100, .bg-darkgreen-100
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

(Mimochodem, tmavější odstíny jsou uložené v vd-trianglify.svg.)

Kombinované barvy - gradienty

$bg-highlight, .bg-highlight
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Pozadí pro odlišení bloku od ostatních s bílým pozadím. Důležité sekce na stránce.

„Hover“ barvy

$vd-bg-hover
Test: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.