ಬಣ್ಣಗಳು

ಬಣ್ಣಗಳು

ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳೊಂದಿಗೆ ಪಠ್ಯವನ್ನು ಬಣ್ಣ ಮಾಡಿ. ನೀವು ಲಿಂಕ್‌ಗಳನ್ನು ಬಣ್ಣಿಸಲು ಬಯಸಿದರೆ, ನೀವು ಹೊಂದಿರುವ ಮತ್ತು ರಾಜ್ಯಗಳನ್ನು ಹೊಂದಿರುವ .link-*ಸಹಾಯಕ ವರ್ಗಗಳನ್ನು ನೀವು ಬಳಸಬಹುದು.:hover:focus

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

ಅಪಾರದರ್ಶಕತೆ

v5.1.0 ನಂತೆ, CSS ವೇರಿಯೇಬಲ್‌ಗಳನ್ನು ಬಳಸಿಕೊಂಡು ಸಾಸ್‌ನೊಂದಿಗೆ ಪಠ್ಯ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ರಚಿಸಲಾಗಿದೆ. ಸಂಕಲನ ಮತ್ತು ಡೈನಾಮಿಕ್ ಆಲ್ಫಾ ಪಾರದರ್ಶಕತೆಯ ಬದಲಾವಣೆಗಳಿಲ್ಲದೆ ನೈಜ-ಸಮಯದ ಬಣ್ಣ ಬದಲಾವಣೆಗಳಿಗೆ ಇದು ಅನುಮತಿಸುತ್ತದೆ.

ಇದು ಹೇಗೆ ಕೆಲಸ ಮಾಡುತ್ತದೆ

ನಮ್ಮ ಡೀಫಾಲ್ಟ್ .text-primaryಉಪಯುಕ್ತತೆಯನ್ನು ಪರಿಗಣಿಸಿ.

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

--bs-primaryನಾವು ನಮ್ಮ (ನ ಮೌಲ್ಯದೊಂದಿಗೆ ) CSS ವೇರಿಯಬಲ್‌ನ RGB ಆವೃತ್ತಿಯನ್ನು ಬಳಸುತ್ತೇವೆ 13, 110, 253ಮತ್ತು ಆಲ್ಫಾ ಪಾರದರ್ಶಕತೆಗಾಗಿ ಎರಡನೇ CSS ವೇರಿಯೇಬಲ್ ಅನ್ನು ಲಗತ್ತಿಸಿದ್ದೇವೆ ( ಸ್ಥಳೀಯ CSS ವೇರಿಯಬಲ್‌ಗೆ --bs-text-opacityಡೀಫಾಲ್ಟ್ ಮೌಲ್ಯದೊಂದಿಗೆ ). 1ಇದರರ್ಥ ನೀವು .text-primaryಈಗ ಬಳಸುವ ಯಾವುದೇ ಸಮಯದಲ್ಲಿ, ನಿಮ್ಮ ಕಂಪ್ಯೂಟೆಡ್ colorಮೌಲ್ಯವು rgba(13, 110, 253, 1). ಪ್ರತಿ ವರ್ಗದೊಳಗಿನ ಸ್ಥಳೀಯ CSS ವೇರಿಯೇಬಲ್ .text-*ಆನುವಂಶಿಕ ಸಮಸ್ಯೆಗಳನ್ನು ತಪ್ಪಿಸುತ್ತದೆ ಆದ್ದರಿಂದ ಉಪಯುಕ್ತತೆಗಳ ನೆಸ್ಟೆಡ್ ನಿದರ್ಶನಗಳು ಸ್ವಯಂಚಾಲಿತವಾಗಿ ಮಾರ್ಪಡಿಸಿದ ಆಲ್ಫಾ ಪಾರದರ್ಶಕತೆಯನ್ನು ಹೊಂದಿರುವುದಿಲ್ಲ.

ಉದಾಹರಣೆ

ಆ ಅಪಾರದರ್ಶಕತೆಯನ್ನು ಬದಲಾಯಿಸಲು, --bs-text-opacityಕಸ್ಟಮ್ ಶೈಲಿಗಳು ಅಥವಾ ಇನ್‌ಲೈನ್ ಶೈಲಿಗಳ ಮೂಲಕ ಅತಿಕ್ರಮಿಸಿ.

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

ಅಥವಾ, ಯಾವುದೇ .text-opacityಉಪಯುಕ್ತತೆಗಳಿಂದ ಆಯ್ಕೆಮಾಡಿ:

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

ನಿರ್ದಿಷ್ಟತೆ

ಕೆಲವೊಮ್ಮೆ ಸಂದರ್ಭೋಚಿತ ತರಗತಿಗಳನ್ನು ಮತ್ತೊಂದು ಆಯ್ಕೆಗಾರನ ನಿರ್ದಿಷ್ಟತೆಯ ಕಾರಣದಿಂದಾಗಿ ಅನ್ವಯಿಸಲಾಗುವುದಿಲ್ಲ. <div>ಕೆಲವು ಸಂದರ್ಭಗಳಲ್ಲಿ, ನಿಮ್ಮ ಅಂಶದ ವಿಷಯವನ್ನು ಅಪೇಕ್ಷಿತ ವರ್ಗದೊಂದಿಗೆ ಅಥವಾ ಹೆಚ್ಚಿನ ಶಬ್ದಾರ್ಥದ ಅಂಶದಲ್ಲಿ ಸುತ್ತುವುದು ಸಾಕಷ್ಟು ಪರಿಹಾರವಾಗಿದೆ .

ಸಾಸ್

ಕೆಳಗಿನ ಸಾಸ್ ಕಾರ್ಯನಿರ್ವಹಣೆಯ ಜೊತೆಗೆ, ಬಣ್ಣಗಳು ಮತ್ತು ಹೆಚ್ಚಿನವುಗಳಿಗಾಗಿ ನಮ್ಮ ಒಳಗೊಂಡಿರುವ CSS ಕಸ್ಟಮ್ ಗುಣಲಕ್ಷಣಗಳ (ಅಕಾ CSS ವೇರಿಯಬಲ್ಸ್) ಬಗ್ಗೆ ಓದುವುದನ್ನು ಪರಿಗಣಿಸಿ.

ಅಸ್ಥಿರ

ಹೆಚ್ಚಿನ colorಉಪಯುಕ್ತತೆಗಳನ್ನು ನಮ್ಮ ಥೀಮ್ ಬಣ್ಣಗಳಿಂದ ರಚಿಸಲಾಗಿದೆ, ನಮ್ಮ ಜೆನೆರಿಕ್ ಬಣ್ಣದ ಪ್ಯಾಲೆಟ್ ವೇರಿಯೇಬಲ್‌ಗಳಿಂದ ಮರುಹೊಂದಿಸಲಾಗಿದೆ.

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

ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳು ಸಹ ಲಭ್ಯವಿವೆ, ಆದರೆ ಯಾವುದೇ ಉಪಯುಕ್ತತೆಗಳನ್ನು ರಚಿಸಲು ಉಪವಿಭಾಗವನ್ನು ಮಾತ್ರ ಬಳಸಲಾಗುತ್ತದೆ.

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

ನಕ್ಷೆ

ಥೀಮ್ ಬಣ್ಣಗಳನ್ನು ನಂತರ ಸಾಸ್ ಮ್ಯಾಪ್‌ಗೆ ಹಾಕಲಾಗುತ್ತದೆ ಆದ್ದರಿಂದ ನಾವು ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳು, ಕಾಂಪೊನೆಂಟ್ ಮಾರ್ಪಾಡುಗಳು ಮತ್ತು ಹೆಚ್ಚಿನದನ್ನು ರಚಿಸಲು ಅವುಗಳ ಮೇಲೆ ಲೂಪ್ ಮಾಡಬಹುದು.

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

ಗ್ರೇಸ್ಕೇಲ್ ಬಣ್ಣಗಳು ಸಾಸ್ ನಕ್ಷೆಯಾಗಿಯೂ ಲಭ್ಯವಿದೆ. ಯಾವುದೇ ಉಪಯುಕ್ತತೆಗಳನ್ನು ರಚಿಸಲು ಈ ನಕ್ಷೆಯನ್ನು ಬಳಸಲಾಗುವುದಿಲ್ಲ.

$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 ಬಣ್ಣಗಳನ್ನು ಪ್ರತ್ಯೇಕ ಸಾಸ್ ನಕ್ಷೆಯಿಂದ ರಚಿಸಲಾಗಿದೆ:

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

ಮತ್ತು ಬಣ್ಣದ ಅಪಾರದರ್ಶಕತೆಗಳು ತಮ್ಮದೇ ಆದ ನಕ್ಷೆಯೊಂದಿಗೆ ಅದರ ಮೇಲೆ ನಿರ್ಮಿಸುತ್ತವೆ ಅದನ್ನು ಉಪಯುಕ್ತತೆಗಳ API ನಿಂದ ಸೇವಿಸಲಾಗುತ್ತದೆ:

$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

ನಮ್ಮ ಉಪಯುಕ್ತತೆಗಳ API ನಲ್ಲಿ ಬಣ್ಣದ ಉಪಯುಕ್ತತೆಗಳನ್ನು ಘೋಷಿಸಲಾಗಿದೆ scss/_utilities.scss. ಉಪಯುಕ್ತತೆಗಳ 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
      )
    ),