Základní barvy
→ Viz také core/variables.scss, helpers/colors.scss
- $vd-daintree-color: #002c3a
- Vyvozujeme z ní pozadí hlavičky webu a pak drobnosti v rozhraní - například badges.
- $vd-green-color: #5fa316
- Vyvozujeme z ní aktivní elementy: odkazy a tlačítka.
- $vd-brown-color: #2E2C09
- Vyvozujeme z ní text a neutrální šedivé odstíny pro neutrální pozadí sekcí.
- $vd-red-color: #b43b18
- Vyvozujeme z ní barvu textu chybových hlášení a v tmavší variantě barvu kódu.
- $vd-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í.
- 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.
(Mimochodem, tmavější odstíny zelené 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.