ꯃꯆꯨꯁꯤꯡ꯫

ꯃꯆꯨꯁꯤꯡ꯫

ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯠ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯂꯩꯕꯥ ꯑꯃꯁꯨꯡ ꯔꯥꯖ꯭ꯌꯁꯤꯡ ꯂꯩꯕꯥ .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 ꯚꯔꯖꯟ ꯑꯃꯥ ꯁꯤꯖꯤꯟꯅꯩ ꯑꯃꯁꯨꯡ ꯑꯥꯂꯐꯥ ꯇ꯭ꯔꯥꯟꯁꯄꯔꯦꯟꯁꯤꯒꯤꯗꯃꯛ ( ꯂꯣꯀꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯅꯥ ꯃꯔꯝ ꯑꯣꯏꯗꯨꯅꯥ ꯗꯤꯐꯣꯜꯇ ꯚꯦꯜꯌꯨ ꯑꯃꯒꯥ ꯂꯣꯌꯅꯅꯥ 13, 110, 253) ꯑꯅꯤꯁꯨꯕꯥ CSS ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯃꯥ, , ꯑꯦꯇꯦꯆ ꯇꯧꯈꯤ꯫ ꯍꯥꯌꯕꯗꯤ ꯍꯧꯖꯤꯛ ꯅꯍꯥꯛꯅꯥ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯥ ꯃꯇꯝ ꯑꯃꯍꯦꯛꯇꯗꯥ, ꯅꯍꯥꯛꯀꯤ ꯀꯝꯞꯌꯨꯠ ꯇꯧꯔꯕꯥ ꯚꯦꯜꯌꯨ ꯑꯗꯨ . ꯀ꯭ꯂꯥꯁ ꯈꯨꯗꯤꯡꯃꯛꯀꯤ ꯃꯅꯨꯡꯗꯥ ꯂꯩꯕꯥ ꯂꯣꯀꯦꯜ CSS ꯚꯦꯔꯤꯑꯦꯕꯜ ꯑꯁꯤꯅꯥ ꯏꯅꯍꯦꯔꯤꯇꯦꯁꯟ ꯏꯁꯨꯁꯤꯡ ꯊꯤꯡꯏ ꯃꯔꯝ ꯑꯗꯨꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯅꯦꯁ꯭ꯠ ꯇꯧꯔꯕꯥ ꯏꯟꯁꯇꯦꯟꯁꯁꯤꯡꯗꯥ ꯑꯣꯇꯣꯃꯦꯇꯤꯛ ꯑꯣꯏꯅꯥ ꯃꯣꯗꯤꯐꯥꯏꯗ ꯑꯥꯂꯐꯥ ꯇ꯭ꯔꯥꯟꯁꯄꯔꯦꯟꯁꯤ ꯑꯃꯥ ꯂꯩꯇꯦ꯫--bs-text-opacity1.text-primarycolorrgba(13, 110, 253, 1).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>ꯑꯗꯨ ꯑꯄꯥꯝꯕꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁꯦꯃꯦꯟꯇꯤꯛ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯅꯠꯠꯔꯒꯥ ꯃꯁꯤꯗꯒꯤ ꯍꯦꯅꯕꯥ ꯑꯦꯂꯤꯃꯦꯟꯇ ꯑꯃꯗꯥ ꯔꯦꯞ ꯇꯧꯕꯅꯤ꯫

ꯁꯥꯁꯁ ꯇꯧꯕꯥ꯫

ꯃꯈꯥꯗꯥ ꯄꯤꯔꯤꯕꯥ ꯁꯥꯁ ꯐꯉ꯭ꯀꯁꯅꯦꯂꯤꯇꯤ ꯑꯁꯤꯒꯤ ꯃꯊꯛꯇꯥ, ꯃꯆꯨ ꯑꯃꯁꯨꯡ ꯑꯇꯩ ꯀꯌꯥꯒꯤꯗꯃꯛ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯥꯑꯣꯔꯤꯕꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ.ꯀꯤ ꯀꯁ꯭ꯇꯝ ꯄ꯭ꯔꯣꯄꯔꯇꯤꯁꯤꯡ (ꯑꯀꯥ ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ. ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ)ꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯄꯥꯕꯒꯤ ꯃꯇꯥꯡꯗꯥ ꯈꯟꯅꯕꯤꯌꯨ꯫

ꯚꯦꯔꯤꯑꯦꯕꯂꯁꯤꯡ꯫

ꯑꯌꯥꯝꯕꯥ 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
);

ꯑꯥꯔ.ꯖꯤ.ꯕꯤ.ꯒꯤ ꯃꯆꯨꯁꯤꯡ ꯑꯁꯤ ꯇꯣꯉꯥꯅꯕꯥ ꯁꯥꯁ ꯃꯦꯞ ꯑꯃꯗꯒꯤ ꯁꯦꯃꯒꯠꯂꯤ:

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

ꯑꯃꯁꯨꯡ ꯃꯆꯨꯒꯤ ꯑꯣꯄꯦꯁꯤꯇꯤꯁꯤꯡꯅꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯅꯥ ꯀꯟꯖꯨꯝ ꯇꯧꯕꯥ ꯃꯈꯣꯌꯒꯤ ꯃꯁꯥꯒꯤ ꯃꯦꯄꯀꯥ ꯂꯣꯌꯅꯅꯥ ꯃꯗꯨꯗꯥ ꯁꯦꯃꯒꯠꯂꯤ:

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

ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ

ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯁꯤ ꯑꯩꯈꯣꯌꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤ ꯑꯦ.ꯄꯤ.ꯑꯥꯏ.ꯗꯥ 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
      )
    ),