Langi za langi

Langi za langi

Langi y’ebiwandiiko n’ebikozesebwa mu langi. Bwoba oyagala okukuba langi ku links, osobola okukozesa .link-*helper classes ezirina :hoverne :focusstates.

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

Obutategeera bulungi

Okuva ku v5.1.0, ebikozesebwa mu langi y’ebiwandiiko bikolebwa ne Sass nga tukozesa enkyukakyuka za CSS. Kino kisobozesa enkyukakyuka za langi mu kiseera ekituufu awatali kukuŋŋaanya n’enkyukakyuka za alpha transparency ezikyukakyuka.

Engeri gye kikola

Lowooza ku .text-primaryutility yaffe eya default.

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

Tukozesa enkyusa ya RGB eyaffe --bs-primary(n’omuwendo gwa 13, 110, 253) enkyukakyuka ya CSS era ne tugattako enkyukakyuka ya CSS eyokubiri, --bs-text-opacity, olw’obwerufu bwa alpha (n’omuwendo ogusookerwako 1olw’enkyukakyuka ya CSS ey’omu kitundu). Ekyo kitegeeza nti essaawa yonna gy’okozesa .text-primarykati, omuwendo gwo ogubaliriddwa colorguba rgba(13, 110, 253, 1). Enkyukakyuka ya CSS ey’ekitundu munda mu buli .text-*kiraasi yeewala ensonga z’obusika kale ebikozesebwa ebiteekeddwa mu kisenge eby’ebikozesebwa tebiba na bwerufu bwa alpha obukyusiddwa mu ngeri ey’otoma.

Eky'okulabirako

Okukyusa opacity eyo, override --bs-text-opacitynga oyita mu custom styles oba inline styles.

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

Oba, londa okuva mu kimu ku .text-opacitybikozesebwa:

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

Okwetongola

Oluusi ebika by’embeera (contextual classes) tebisobola kukozesebwa olw’obutonde obw’enjawulo obw’omusunsuzi omulala. Mu mbeera ezimu, eky’okugonjoola ekimala kwe kuzinga ebirimu eby’ekintu kyo mu kintu <div>eky’amakulu oba okusingawo n’ekibiina ky’oyagala.

Sass nga bwe kiri

Ng’oggyeeko enkola ya Sass eno wammanga, lowooza ku kusoma ku bintu byaffe eby’ennono ebya CSS ebiteekeddwamu (aka CSS variables) ku langi n’ebirala.

Enkyukakyuka ezikyukakyuka

Ebisinga obungi colorebikozesebwa bikolebwa langi zaffe ez’omulamwa, eziddamu okuweebwa okuva mu nkyukakyuka zaffe eza langi ez’enjawulo.

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

Langi za enzirugavu nazo ziriwo, naye ekitundu ekitono kyokka kye kikozesebwa okukola ebikozesebwa byonna.

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

Maapu

Langi z’omulamwa olwo ziteekebwa mu maapu ya Sass tusobole okuzikolako okukola ebikozesebwa byaffe, ebikyusa ebitundu, n’ebirala.

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

Langi za Grayscale nazo zisangibwa nga maapu ya Sass. Maapu eno tekozesebwa kukola bikozesebwa byonna.

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

Langi za RGB zikolebwa okuva ku maapu ya Sass ey’enjawulo:

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

Era langi opacities zizimba ku ekyo ne maapu yaabwe ekozesebwa API y'ebikozesebwa:

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

Ebikozesebwa API

Ebikozesebwa ebya langi birangiriddwa mu API yaffe ey'ebikozesebwa mu scss/_utilities.scss. Yiga engeri y'okukozesaamu API y'ebikozesebwa.

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