Faarwen

Faarwen

Colorize Text mat Faarf Utilities. Wann Dir Linke wëllt faarwen, kënnt Dir d' .link-*Helferklassen benotzen déi :hovera :focusStaaten hunn.

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

Opazitéit

Zënter v5.1.0 ginn Textfaarf Utilities mat Sass generéiert mat CSS Variablen. Dëst erlaabt Echtzäit Faarf Ännerungen ouni Kompiléierung an dynamesch Alpha Transparenz Ännerungen.

Wéi et funktionnéiert

Bedenkt eis Standard .text-primaryUtility.

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

Mir benotzen eng RGB Versioun vun eiser --bs-primary(mat dem Wäert vun 13, 110, 253) CSS Variabel an befestegt eng zweet CSS Variabel, --bs-text-opacity, fir d'Alpha Transparenz (mat engem Standardwäert 1dank enger lokaler CSS Variabel). Dat heescht wann Dir .text-primaryelo benotzt, Äre berechente colorWäert ass rgba(13, 110, 253, 1). Déi lokal CSS Variabel an all .text-*Klass vermeit Ierfschaftsprobleemer sou datt nested Instanzen vun den Utilities net automatesch eng modifizéiert Alpha Transparenz hunn.

Beispill

Fir dës Opazitéit z'änneren, iwwerschreiden --bs-text-opacityiwwer personaliséiert Stiler oder Inline Stiler.

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

Oder, wielt aus engem vun den .text-opacityUtilities:

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

Spezifizitéit

Heiansdo kënnen kontextuell Klassen net applizéiert ginn wéinst der Spezifizitéit vun engem anere Selektor. A verschiddene Fäll ass eng genuch Léisung fir Ären Element Inhalt an engem <div>oder méi semanteschen Element mat der gewënschter Klass ze wéckelen.

Sass

Zousätzlech zu der folgender Sass Funktionalitéit, betruecht iwwer eis abegraff CSS Custom Properties (alias CSS Variablen) fir Faarwen a méi ze liesen.

Variablen

Déi meescht colorUtilitys ginn duerch eis Thema Faarwen generéiert, vun eise generesche Faarfpalette Variabelen nei zougewisen.

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

Grayscale Faarwen sinn och verfügbar, awer nëmmen e Subset gëtt benotzt fir all Utilities ze generéieren.

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

Kaart

Themefaarwen ginn dann an eng Sass Kaart gesat, sou datt mir iwwer si kënne schloe fir eis Utilities, Komponentmodifikateuren a méi ze generéieren.

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

Grayscale Faarwen sinn och als Sass Kaart verfügbar. Dës Kaart gëtt net benotzt fir Utilities ze generéieren.

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

RGB Faarwen ginn aus enger separater Sass Kaart generéiert:

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

A Faarfopazitéiten bauen op dat mat hirer eegener Kaart déi vun der Utilities API verbraucht gëtt:

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

Utilities API

Faarf Utilities sinn an eiser Utilities API deklaréiert an scss/_utilities.scss. Léiert wéi Dir d'Utilities API benotzt.

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