Tɛmɛn ka taa kunnafoni kunbabaw la Tɛmɛn ka taa docs navigation kan
in English

Kulɛriw

Kɔrɔ lase colorni kulɛri nafama kalansen damadɔ ye. A bɛ dɛmɛ don styling links ni hover states, fana.

Nin ɲɛ in kan

Kulɛriw

Aw bɛ sɛbɛnniw kulɛri ni kulɛri nafamafɛnw ye. N'i b'a fɛ ka jɛgɛnw kulɛri, i bɛ Se ka baara Kɛ ni .link-*dɛmɛn-kalansow ye minnu bɛ :hoverni :focusjamanaw ye.

.sɛbɛnni-fɔlɔ

.sɛbɛnni-sekondari

.sɛbɛnni-sɔrɔ-sɔrɔ

.sɛbɛnni-farati

.sɛbɛnni-lasɔmini

.sɛbɛnni-kunnafoni

.sɛbɛnni-yeelen

.sɛbɛnni-dibi

.sɛbɛnni-farikolo

.sɛbɛnni-muted

.sɛbɛnni-nɛrɛmuguma

.sɛbɛnni-nɛrɛ-50

.sɛbɛnni-fin-50

<p class="text-primary">.text-primary</p>
<p class="text-secondary">.text-secondary</p>
<p class="text-success">.text-success</p>
<p class="text-danger">.text-danger</p>
<p class="text-warning bg-dark">.text-warning</p>
<p class="text-info bg-dark">.text-info</p>
<p class="text-light bg-dark">.text-light</p>
<p class="text-dark">.text-dark</p>
<p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p>
<p class="text-white bg-dark">.text-white</p>
<p class="text-black-50">.text-black-50</p>
<p class="text-white-50 bg-dark">.text-white-50</p>
Kɔrɔ lasecogo dɛmɛni fɛɛrɛw ma

Baara kɛli ni kulɛri ye walasa ka kɔrɔ fara a kan, o bɛ taamasiyɛn yelen dɔrɔn de di, min tɛna lase dɛmɛni fɛɛrɛw baarakɛlaw ma – i n’a fɔ ɛkran kalanbagaw. Aw ye aw jija kunnafoni minnu jiralen don ni kulɛri ye, olu bɛ ye ka bɔ kɔnɔkow yɛrɛ la (misali la sɛbɛn yelen), walima u bɛ don a kɔnɔ fɛɛrɛ wɛrɛw fɛ, i n’a fɔ sɛbɛn wɛrɛw minnu dogolen don ni .visually-hiddenkalan ye.

Kɛrɛnkɛrɛnnenya la

Tuma dɔw la, kɔrɔɲɔgɔnmaya kalanw tɛ Se ka Kɛ k’a sababu Kɛ sugandilikɛla wɛrɛ ka kɛrɛnkɛrɛnnenya ye. Tuma dɔw la, baarakɛcogo bɛrɛbɛrɛ ye k’i ka yɔrɔ kɔnɔkow siri <div>kɔrɔko yɔrɔ dɔ la walima ka tɛmɛ o kan ni kalasi ɲininen ye.

Sass ye

Ka fara Sass baarakɛcogo nataw kan, aw ye jateminɛ kɛ ka kalan kɛ an ka CSS ladamufɛnw kan minnu bɛ a kɔnɔ (aka CSS variables) kulɛriw ni fɛn wɛrɛw kama.

Yɛlɛma-yɛlɛmaw

Nafamafɛn fanba colorbɛ Sɔrɔ an ka barokun kulɛriw fɛ, minnu bɛ Lasegin ka Bɔ an ka kulɛri palɛti fɛn caman sɛgɛsɛgɛli la.

$blue:    #0d6efd;
$indigo:  #6610f2;
$purple:  #6f42c1;
$pink:    #d63384;
$red:     #dc3545;
$orange:  #fd7e14;
$yellow:  #ffc107;
$green:   #198754;
$teal:    #20c997;
$cyan:    #0dcaf0;

$primary:       $blue;
$secondary:     $gray-600;
$success:       $green;
$info:          $cyan;
$warning:       $yellow;
$danger:        $red;
$light:         $gray-100;
$dark:          $gray-900;

Kulɛriw fana bɛ sɔrɔ, nka kulu fitinin dɔrɔn de bɛ kɛ ka nafamafɛn suguya bɛɛ lawuli.

$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #6c757d;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

Karta

O kɔfɛ, barokun kulɛriw bɛ don Sass karti dɔ kɔnɔ walasa an ka se ka loop kɛ u kan walasa k’an ka nafalanw, component modifiers ani fɛn wɛrɛw lawuli.

$theme-colors: (
  "primary":    $primary,
  "secondary":  $secondary,
  "success":    $success,
  "info":       $info,
  "warning":    $warning,
  "danger":     $danger,
  "light":      $light,
  "dark":       $dark
);

Kulɛriw fana bɛ sɔrɔ i n’a fɔ Sass karti. Nin karti in tɛ kɛ ka nafamafɛn si dilan.

$grays: (
  "100": $gray-100,
  "200": $gray-200,
  "300": $gray-300,
  "400": $gray-400,
  "500": $gray-500,
  "600": $gray-600,
  "700": $gray-700,
  "800": $gray-800,
  "900": $gray-900
);

Nafamafɛnw API

Kulɛri nafamafɛnw bɛ fɔ an ka nafamafɛnw API kɔnɔ san scss/_utilities.scss. Aw ye baara kɛcogo dɔn ni utilities API ye.

    "color": (
      property: color,
      class: text,
      values: map-merge(
        $theme-colors,
        (
          "white": $white,
          "body": $body-color,
          "muted": $text-muted,
          "black-50": rgba($black, .5),
          "white-50": rgba($white, .5),
          "reset": inherit,
        )
      )
    ),