Storybook / Color

Couleurs brutes

Gammes

--blue $blue

#0d6efd

--indigo $indigo

#6610f2

--purple $purple

#6f42c1

--pink $pink

#d63384

--red $red

#dc3545

--orange $orange

#fd7e14

--yellow $yellow

#ffc107

--green $green

#198754

--teal $teal

#20c997

--cyan $cyan

#0dcaf0

Blue

--blue-100 $blue-100

#cfe2ff

--blue-200 $blue-200

#9ec5fe

--blue-300 $blue-300

#6ea8fe

--blue-400 $blue-400

#3d8bfd

--blue-500 $blue-500

$blue

--blue-600 $blue-600

#0a58ca

--blue-700 $blue-700

#084298

--blue-800 $blue-800

#052c65

--blue-900 $blue-900

#031633

Indigo

--indigo-100 $indigo-100

#e0cffc

--indigo-200 $indigo-200

#c29ffa

--indigo-300 $indigo-300

#a370f7

--indigo-400 $indigo-400

#8540f5

--indigo-500 $indigo-500

$indigo

--indigo-600 $indigo-600

#520dc2

--indigo-700 $indigo-700

#3d0a91

--indigo-800 $indigo-800

#290661

--indigo-900 $indigo-900

#140330

Purple

--purple-100 $purple-100

#e2d9f3

--purple-200 $purple-200

#c5b3e6

--purple-300 $purple-300

#a98eda

--purple-400 $purple-400

#8c68cd

--purple-500 $purple-500

$purple

--purple-600 $purple-600

#59359a

--purple-700 $purple-700

#432874

--purple-800 $purple-800

#2c1a4d

--purple-900 $purple-900

#160d27

Pink

--pink-100 $pink-100

#f7d6e6

--pink-200 $pink-200

#efadce

--pink-300 $pink-300

#e685b5

--pink-400 $pink-400

#de5c9d

--pink-500 $pink-500

$pink

--pink-600 $pink-600

#ab296a

--pink-700 $pink-700

#801f4f

--pink-800 $pink-800

#561435

--pink-900 $pink-900

#2b0a1a

Red

--red-100 $red-100

#f8d7da

--red-200 $red-200

#f1aeb5

--red-300 $red-300

#ea868f

--red-400 $red-400

#e35d6a

--red-500 $red-500

$red

--red-600 $red-600

#b02a37

--red-700 $red-700

#842029

--red-800 $red-800

#58151c

--red-900 $red-900

#2c0b0e

Orange

--orange-100 $orange-100

#ffe5d0

--orange-200 $orange-200

#fecba1

--orange-300 $orange-300

#feb272

--orange-400 $orange-400

#fd9843

--orange-500 $orange-500

$orange

--orange-600 $orange-600

#ca6510

--orange-700 $orange-700

#984c0c

--orange-800 $orange-800

#653208

--orange-900 $orange-900

#331904

Yellow

--yellow-100 $yellow-100

#fff3cd

--yellow-200 $yellow-200

#ffe69c

--yellow-300 $yellow-300

#ffda6a

--yellow-400 $yellow-400

#ffcd39

--yellow-500 $yellow-500

$yellow

--yellow-600 $yellow-600

#cc9a06

--yellow-700 $yellow-700

#997404

--yellow-800 $yellow-800

#664d03

--yellow-900 $yellow-900

#332701

Green

--green-100 $green-100

#d1e7dd

--green-200 $green-200

#a3cfbb

--green-300 $green-300

#75b798

--green-400 $green-400

#479f76

--green-500 $green-500

$green

--green-600 $green-600

#146c43

--green-700 $green-700

#0f5132

--green-800 $green-800

#0a3622

--green-900 $green-900

#051b11

Teal

--teal-100 $teal-100

#d2f4ea

--teal-200 $teal-200

#a6e9d5

--teal-300 $teal-300

#79dfc1

--teal-400 $teal-400

#4dd4ac

--teal-500 $teal-500

$teal

--teal-600 $teal-600

#1aa179

--teal-700 $teal-700

#13795b

--teal-800 $teal-800

#0d503c

--teal-900 $teal-900

#06281e

Cyan

--cyan-100 $cyan-100

#cff4fc

--cyan-200 $cyan-200

#9eeaf9

--cyan-300 $cyan-300

#6edff6

--cyan-400 $cyan-400

#3dd5f3

--cyan-500 $cyan-500

$cyan

--cyan-600 $cyan-600

#1aa179

--cyan-700 $cyan-700

#087990

--cyan-800 $cyan-800

#055160

--cyan-900 $cyan-900

#032830

Gray

--gray-100 $gray-100

#f8f9fa

--gray-200 $gray-200

#e9ecef

--gray-300 $gray-300

#dee2e6

--gray-400 $gray-400

#ced4da

--gray-500 $gray-500

#adb5bd

--gray-600 $gray-600

#6c757d

--gray-700 $gray-700

#495057

--gray-800 $gray-800

#343a40

--gray-900 $gray-900

#212529

--white $white

#fff

--black $black

#000

--gray $gray

$gray-600

--gray-dark $gray-dark

$gray-800

Thèmes

Primary

--bs-primary $primary

$blue

--bs-primary-text-emphasis $primary-text-emphasis

eq. $color-800

--bs-primary-bg-subtle $primary-bg-subtle

eq. $color-100

--bs-primary-border-subtle $primary-border-subtle

eq. $color-200

Secondary

--bs-secondary $secondary

$gray-600

--bs-secondary-text-emphasis $secondary-text-emphasis

eq. $color-800

--bs-secondary-bg-subtle $secondary-bg-subtle

eq. $color-100

--bs-secondary-border-subtle $secondary-border-subtle

eq. $color-200

Success

--bs-success $success

$green

--bs-success-text-emphasis $success-text-emphasis

eq. $color-800

--bs-success-bg-subtle $success-bg-subtle

eq. $color-100

--bs-success-border-subtle $success-border-subtle

eq. $color-200

Info

--bs-info $info

$cyan

--bs-info-text-emphasis $info-text-emphasis

eq. $color-800

--bs-info-bg-subtle $info-bg-subtle

eq. $color-100

--bs-info-border-subtle $info-border-subtle

eq. $color-200

Warning

--bs-warning $warning

$yellow

--bs-warning-text-emphasis $warning-text-emphasis

eq. $color-800

--bs-warning-bg-subtle $warning-bg-subtle

eq. $color-100

--bs-warning-border-subtle $warning-border-subtle

eq. $color-200

Danger

--bs-danger $danger

$red

--bs-danger-text-emphasis $danger-text-emphasis

eq. $color-800

--bs-danger-bg-subtle $danger-bg-subtle

eq. $color-100

--bs-danger-border-subtle $danger-border-subtle

eq. $color-200

Light

--bs-light $light

$gray-100

--bs-light-text-emphasis $light-text-emphasis

eq. $color-800

--bs-light-bg-subtle $light-bg-subtle

eq. $color-100

--bs-light-border-subtle $light-border-subtle

eq. $color-200

Dark

--bs-dark $dark

$gray-900

--bs-dark-text-emphasis $dark-text-emphasis

eq. $color-800

--bs-dark-bg-subtle $dark-bg-subtle

eq. $color-100

--bs-dark-border-subtle $dark-border-subtle

eq. $color-200

Usages

Wording

text, text light, title, placeholder, link, disabled, label, etc...

--bs-body-color

$gray-900

--bs-secondary-color

rgba(33, 37, 41, 0.75)

--bs-tertiary-color

rgba(33, 37, 41, 0.5)

--bs-emphasis-color

$black

--bs-highlight-color

$gray-900

--bs-link-color

$primary

Background

disabled, odd, even, alt, head, etc...

--bs-body-bg

$white

Border

border, separator, etc...

--bs-border-color

$gray-300

Other

ok, ko, checked, highlight, current, logo, promo, etc...

--toto

$toto