Amadedewo

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.

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

Nusiwo me mekɔ o

Tso v5.1.0 dzi la, wowɔa nuŋɔŋlɔ ƒe amadede ƒe dɔwɔnuwo kple Sass to CSS tɔtrɔwo zazã me. Esia ɖea mɔ na amadede ƒe tɔtrɔ le ɣeyiɣi ŋutɔŋutɔ me nuƒoƒoƒu kple alfa ƒe ʋuʋu ƒe tɔtrɔ si trɔna manɔmee.

Ale si wòwɔa dɔe

Bu míaƒe .text-primarydɔwɔnu si míezãna ɖaa ŋu kpɔ.

.text-primary {
  --bs-text-opacity: 1;
  color: rgba(var(--bs-primary-rgb), var(--bs-text-opacity)) !important;
}

Míezãa míaƒe --bs-primary(si ƒe asixɔxɔ nye 13, 110, 253) CSS tɔtrɔ ƒe RGB tɔ eye míetsɔa CSS tɔtrɔ evelia kpena ɖe eŋu, --bs-text-opacity, na alfa ƒe ʋuʋu (kple asixɔxɔ gbãtɔ 1akpe ɖe teƒea ƒe CSS tɔtrɔ ŋu). Ema fia be ɣesiaɣi si nàzã .text-primaryfifia la, wò colorasixɔxɔ si wobu akɔntae nye rgba(13, 110, 253, 1). Nutoa me CSS tɔtrɔ si le .text-*klass ɖesiaɖe me ƒoa asa na domenyinu ƒe nyawo ale be nested instances of the utilities mekpɔa alpha transparency si woɖɔli le wo ɖokui si o.

Kpɔɖeŋu

Be nàtrɔ opacity ma la, ɖe asi le eŋu --bs-text-opacityto atsyã tɔxɛwo alo atsyã siwo le fli me dzi.

<div class="text-primary">This is default primary text</div>
<div class="text-primary" style="--bs-text-opacity: .5;">This is 50% opacity primary text</div>

Alo, tia .text-opacitynuzazãwo dometɔ ɖesiaɖe:

<div class="text-primary">This is default primary text</div>
<div class="text-primary text-opacity-75">This is 75% opacity primary text</div>
<div class="text-primary text-opacity-50">This is 50% opacity primary text</div>
<div class="text-primary text-opacity-25">This is 25% opacity primary text</div>

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

Wowɔa RGB amadedewo tso Sass ƒe anyigbatata si le vovo me:

$theme-colors-rgb: map-loop($theme-colors, to-rgb, "$value");

Eye amadede ƒe opacities tua ɖe ema dzi kple woawo ŋutɔ ƒe anyigbatata si utilities API ɖuna:

$utilities-text: map-merge(
  $utilities-colors,
  (
    "black": to-rgb($black),
    "white": to-rgb($white),
    "body": to-rgb($body-color)
  )
);
$utilities-text-colors: map-loop($utilities-text, rgba-css-var, "$key", "text");

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,
      local-vars: (
        "text-opacity": 1
      ),
      values: map-merge(
        $utilities-text-colors,
        (
          "muted": $text-muted,
          "black-50": rgba($black, .5), // deprecated
          "white-50": rgba($white, .5), // deprecated
          "reset": inherit,
        )
      )
    ),
    "text-opacity": (
      css-var: true,
      class: text-opacity,
      values: (
        25: .25,
        50: .5,
        75: .75,
        100: 1
      )
    ),