LAP DS / 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

#fce9eb

$brand-1

#EB002D

$brand-1-d

#aa192d

Brand 2

$brand-2-l

#dfe7ec

$brand-2

#5D89A2

$brand-2-d

#47677A

Brand 3

$brand-3-l

#F4EADE

$brand-3

#E4CCAE

$brand-3-d

#D4AE7E

Gray

$gray-100 (98)

#faf9f9

$gray-200 (95)

#f4f1f1

$gray-300

#E6E6E6

$gray-400 (85)

#d9d9d9

$gray-500

#B8B8B8

$gray-600 (50)

#808080

$gray-700 (30)

#4d4d4d

$gray-800 (20)

#333333

$gray-900

#1f1416

Black, white, dark, light

$white

#fff

$black

#000

Feedback

Primary, secondary

$primary

$brand-2

$secondary

$brand-1

Others

$success

#6aa421

$info

$brand-2

$warning

$brand-3

$danger

#dc3545

Dark, light

$light $gray-100

$dark $gray-900

Couleurs d'usage

Wording

$col-txt $gray-900

$col-txt-l $gray-600

$col-title $col-txt

$col-placeholder $gray-600

$col-link $col-txt

$col-disabled $gray-400

$col-label $col-txt

Border & background

$col-border $gray-400

$col-separator $gray-400

$col-disabled-bg $gray-200

$col-odd $gray-200

$col-alt $brand-3-l

$col-head $brand-2

Other

$col-ok $success

$col-ko $danger

$col-checked $brand-2

$col-highlight $brand-1

$col-current $brand-2

$col-logo-1 $brand-1-d

$col-logo-2 $brand-1

$col-promo $brand-1