warna

warna

Mewarnai teks dengan utilitas warna. Jika Anda ingin mewarnai tautan, Anda dapat menggunakan .link-*kelas pembantu yang memiliki :hoverdan :focusmenyatakan.

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

Kegelapan

Mulai v5.1.0, utilitas warna teks dihasilkan dengan Sass menggunakan variabel CSS. Ini memungkinkan perubahan warna waktu nyata tanpa kompilasi dan perubahan transparansi alfa dinamis.

Bagaimana itu bekerja

.text-primaryPertimbangkan utilitas default kami .

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

Kami menggunakan versi RGB dari variabel CSS kami --bs-primary(dengan nilai 13, 110, 253) dan melampirkan variabel CSS kedua, --bs-text-opacity, untuk transparansi alfa (dengan nilai default 1berkat variabel CSS lokal). Itu berarti kapan pun Anda menggunakan .text-primarysekarang, nilai yang dihitung coloradalah rgba(13, 110, 253, 1). Variabel CSS lokal di dalam setiap .text-*kelas menghindari masalah pewarisan sehingga instance utilitas yang bersarang tidak secara otomatis memiliki transparansi alfa yang dimodifikasi.

Contoh

Untuk mengubah opasitas itu, timpa --bs-text-opacitymelalui gaya khusus atau gaya sebaris.

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

Atau, pilih dari salah satu .text-opacityutilitas:

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

Kekhususan

Terkadang kelas kontekstual tidak dapat diterapkan karena kekhususan pemilih lain. Dalam beberapa kasus, solusi yang cukup adalah dengan membungkus konten elemen Anda dalam elemen <div>semantik atau lebih dengan kelas yang diinginkan.

Kelancangan

Selain fungsionalitas Sass berikut, pertimbangkan untuk membaca tentang properti kustom CSS kami yang disertakan (alias variabel CSS) untuk warna dan lainnya.

Variabel

Sebagian besar colorutilitas dihasilkan oleh warna tema kami, dipindahkan dari variabel palet warna generik kami.

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

Warna skala abu-abu juga tersedia, tetapi hanya sebagian yang digunakan untuk menghasilkan utilitas apa pun.

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

Peta

Warna tema kemudian dimasukkan ke dalam peta Sass sehingga kita dapat mengulangnya untuk menghasilkan utilitas, pengubah komponen, dan banyak lagi.

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

Warna skala abu-abu juga tersedia sebagai peta Sass. Peta ini tidak digunakan untuk menghasilkan utilitas apa pun.

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

Warna RGB dihasilkan dari peta Sass terpisah:

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

Dan opacity warna dibangun di atasnya dengan peta mereka sendiri yang dikonsumsi oleh API utilitas:

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

API Utilitas

Utilitas warna dideklarasikan di API utilitas kami di scss/_utilities.scss. Pelajari cara menggunakan API utilitas.

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