LABO / Colors

Principe général

Bootstrap inclut une mécanique de gestion des couleurs à laquelle il convient d'ajouter certains ajustements. Il est interessant de "neutraliser" certaines variables de couleurs et de prévoir certaines variables d'usage.
Les couleurs peuvent être rangées dans plusieurs sections : niveau de gris, branding et feedbacks.

A noter également que certaines couleurs disposent d'une variation light(-l) et d'une variation dark (-d).
La présence d'un rond de couleur tomate précise que la couleur vient directement de la charte client (référence officielle).

Branding

Brand 1

$brand-1-l

#ffd3cb

$brand-1

tomato

$brand-1-d

#ff2d07

Brand 2

$brand-2-l

#dbdbb8

$brand-2

olive

$brand-2-d

#404000

Brand 3

$brand-3-l

#dbb8db

$brand-3

purple

$brand-3-d

#400040

Gray

$gray-100

#f9f9fa

$gray-200

#ebecee

$gray-300

#e2e1e4

$gray-400

#d4d3d7

$gray-500

#b6b3b9

$gray-600

#b6b3b9

$gray-700

#514e52

$gray-800

#3a393c

$gray-900

#252427

Black, white, dark, light

$white

#fff

$light $gray-500

$dark $gray-800

$black

#000

Feedback

Primary & secondary

$primary

#007bff

$secondary

#6c757d

$tertiary

#e83e8c

Others

$success

#28a745

$info

#17a2b8

$warning

#ffc107

$danger

#dc3545

Couleurs d'usage

Wording

$col-txt $black

$col-txt-l $gray-500

$col-title $brand-2

$col-placeholder $gray-600

$col-link $primary

$col-highlight $gray-500

Border & background

$col-border $gray-400

$col-separator $gray-600

$col-disabled-bg $gray-200

Other

$col-ok $success

$col-ko $danger

$col-checked $brand-1

$col-highlight $brand-1

$col-current $brand-1-d