Warna-warna

Warna-warna

Ngawarnaan téks nganggo utilitas warna. Upami anjeun hoyong ngawarnaan tautan, anjeun tiasa nganggo .link-*kelas pembantu anu gaduh :hoversareng :focusnagara.

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

Opacity

Dina v5.1.0, utilitas warna téks dihasilkeun ku Sass nganggo variabel CSS. Hal ieu ngamungkinkeun parobahan warna sacara real-time tanpa kompilasi sareng parobahan transparansi alfa dinamis.

Kumaha gawéna

Pertimbangkeun .text-primaryutilitas standar kami.

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

Urang make versi RGB urang --bs-primary(kalawan nilai 13, 110, 253) variabel CSS jeung napel variabel CSS kadua, --bs-text-opacity, Pikeun transparansi alfa (kalawan nilai standar 1berkat variabel CSS lokal). Éta hartosna iraha waé anjeun nganggo ayeuna, nilai .text-primarydiitung anjeun nyaéta . Variabel CSS lokal di jero unggal kelas ngahindarkeun masalah warisan ku kituna instansi anu disarangkeun tina utilitas henteu otomatis ngagaduhan transparansi alfa anu dirobih.colorrgba(13, 110, 253, 1).text-*

Contona

Pikeun ngarobah opacity éta, override --bs-text-opacityvia gaya custom atanapi gaya inline.

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

Atanapi, pilih salah sahiji .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>

Spésifikasi

Kadang-kadang kelas kontekstual teu tiasa diterapkeun kusabab spésifisitas pamilih anu sanés. Dina sababaraha kasus, hiji workaround cukup pikeun mungkus eusi unsur anjeun dina <div>atawa leuwih unsur semantik jeung kelas dipikahoyong.

Sass

Salian pungsionalitas Sass di handap ieu, pertimbangkeun maca ngeunaan sipat khusus CSS kami anu kalebet (alias variabel CSS) pikeun warna sareng seueur deui.

Variabel

Kaseueuran colorutilitas didamel ku warna téma kami, ditugaskeun deui tina variabel palet warna umum 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 grayscale oge sadia, tapi ngan sawaréh dipaké pikeun ngahasilkeun sagala utiliti.

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

Harita

Warna téma teras dilebetkeun kana peta Sass ku kituna urang tiasa ngurilingan aranjeunna pikeun ngahasilkeun utilitas, modifier komponén, sareng seueur deui.

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

Warna Grayscale ogé sayogi salaku peta Sass. Peta ieu henteu dianggo pikeun ngahasilkeun utilitas.

$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 dihasilkeun tina peta Sass anu misah:

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

Sareng opacities warna ngawangun éta kalayan peta sorangan anu dikonsumsi ku 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");

Utiliti API

Utiliti warna dinyatakeun dina API utilitas kami di scss/_utilities.scss. Diajar kumaha ngagunakeun Utiliti API.

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