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í.
- 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.