Trɔ yi nya veviwo gbɔ Trɔ yi docs ƒe mɔfiamewo dzi
in English

Amadedewo

Gɔmesese to eme to coloramadede ƒe viɖenu ƒe klass ʋɛ aɖewo dzi. Kpekpeɖeŋu na atsyã kadodowo kple hover nɔnɔmewo, hã le eme.

Amadedewo

Tsɔ amadede ƒe dɔwɔnuwo de ama nuŋɔŋlɔwo. Ne èdi be yeawɔ amadede kadodowo la, àteŋu azã .link-*kpeɖeŋutɔ ƒe klass siwo si :hoverkple :focusdukɔwo le.

.nuŋɔŋlɔ-gɔmedzedze

.nuŋɔŋlɔ-sekɛndri

.nuŋɔŋlɔ-dzidzedzekpɔkpɔ

.nuŋɔŋlɔ-afɔku

.nuŋɔŋlɔ-nuxlɔ̃ame

.nuŋɔŋlɔ-nyatakaka

.nuŋɔŋlɔ-kekeli

.nuŋɔŋlɔ-viviti

.text-ŋutilã

.nuŋɔŋlɔ si me nyawo me mekɔ o

.nuŋɔŋlɔ-ɣi

.nuŋɔŋlɔ-black-50

.nuŋɔŋlɔ-ɣi-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>
Gɔmesese nana mɔ̃ɖaŋununya siwo kpena ɖe ame ŋu

Amadede zazã atsɔ akpe ɖe gɔmesese ŋu koe naa nukpɔkpɔ ƒe dzesi aɖe, si womagblɔ na kpekpeɖeŋunamɔ̃wo zazãlawo o – abe screen readers ene. Kpɔ egbɔ be nyatakaka siwo wotsɔ amadedea de dzesii la dze ƒã tso emenyawo ŋutɔ me (le kpɔɖeŋu me, nuŋɔŋlɔ si wokpɔna), alo wotsɔe de eme to mɔnu bubuwo dzi, abe nuŋɔŋlɔ bubu siwo woɣla kple .visually-hiddenklass la ene.

Nusiwo wogblɔ tẽ

Ɣeaɖewoɣi la, womate ŋu awɔ nya siwo ƒo xlãe ƒe klasswo ŋudɔ o le tiatiawɔla bubu ƒe nɔnɔme tɔxɛ ta. Le go aɖewo me la, egbɔkpɔnu si sɔ enye be nàxatsa wò element ƒe emenyawo ɖe <div>gɔmesese ƒe akpa aɖe alo esi wu nenema me kple klass si nèdi.

Sass ƒe nyawo

Tsɔ kpe ɖe Sass ƒe dɔwɔwɔ si gbɔna ŋu la, bu nuxexlẽ tso míaƒe CSS ƒe nɔnɔme tɔxɛ siwo le eme (si woyɔna be CSS ƒe tɔtrɔwo) ŋu na amadedewo kple bubuwo ŋu.

Nusiwo trɔna

Míaƒe tanya ƒe amadedewoe wɔa dɔwɔnu akpa gãtɔ color, siwo wogbugbɔ de asi na mí tso míaƒe amadede ƒe amadede ƒe tɔtrɔwo me.

$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;

Amadede siwo le amadede dzẽ me hã li, gake ƒuƒoƒo sue aɖe koe wozãna tsɔ wɔa dɔwɔnu ɖesiaɖe.

$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;

Anyigbatata

Emegbe wotsɔa tanya ƒe amadedewo dea Sass ƒe anyigbatata me ale be míate ŋu awɔ loop ɖe wo dzi atsɔ awɔ míaƒe utilities, component modifiers, kple bubuwo.

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

Amadede siwo le amadede dzẽ me hã li abe Sass ƒe anyigbatata ene. Womezãa anyigbatata sia tsɔ wɔa dɔwɔnu aɖeke o.

$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
);

Dɔwɔnuwo ƒe API

Woɖe gbeƒã amadede ƒe dɔwɔnuwo le míaƒe dɔwɔnuwo API me le scss/_utilities.scss. Srɔ̃ alesi nàzã utilities API lae.

    "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,
        )
      )
    ),