ꯃꯆꯨꯁꯤꯡ꯫
color
ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤ ꯀ꯭ꯂꯥꯁ ꯈꯔꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫ ꯍꯣꯚꯔ ꯁ꯭ꯇꯦꯇꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯁ꯭ꯇꯥꯏꯂꯤꯡ ꯂꯤꯉ꯭ꯀꯁꯤꯡꯒꯤ ꯁꯄꯣꯔꯠ ꯌꯥꯑꯣꯔꯤ, ꯃꯗꯨꯁꯨ ꯌꯥꯑꯣꯔꯤ꯫
ꯃꯆꯨꯁꯤꯡ꯫
ꯃꯆꯨꯒꯤ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯇꯦꯛꯁꯠ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ꯫ ꯀꯔꯤꯒꯨꯝꯕꯥ ꯅꯍꯥꯛꯅꯥ ꯂꯤꯉ꯭ꯀꯁꯤꯡ ꯃꯆꯨ ꯁꯪꯍꯅꯕꯥ ꯄꯥꯝꯂꯕꯗꯤ, ꯅꯍꯥꯛꯅꯥ ꯂꯩꯕꯥ ꯑꯃꯁꯨꯡ ꯔꯥꯖ꯭ꯌꯁꯤꯡ ꯂꯩꯕꯥ .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>
.text-opacity-*
ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡꯒꯤꯗꯃꯛꯇꯥ ꯌꯨꯇꯤꯂꯤꯇꯤꯁꯤꯡ ꯑꯃꯁꯨꯡ
.text-black-50
ꯁꯤ.ꯑꯦꯁ.ꯑꯦꯁ
.text-white-50
. ꯃꯈꯣꯌꯁꯤꯡ ꯑꯁꯤ v6.0.0 ꯗ�� ꯂꯧꯊꯣꯛꯀꯅꯤ꯫
ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡꯗꯥ ꯑꯔꯊ ꯄꯤꯕꯥ꯫
ꯑꯔꯊ ꯍꯥꯄꯆꯤꯟꯅꯕꯥ ꯃꯆꯨ ꯁꯤꯖꯤꯟꯅꯕꯅꯥ ꯚꯤꯖꯨꯑꯦꯜ ꯏꯟꯗꯤꯀꯦꯁꯟ ꯑꯃꯥ ꯈꯛꯇꯃꯛ ꯄꯤꯔꯤ, ꯃꯁꯤ ꯑꯦꯁꯤꯁ꯭ꯇꯦꯟꯇ ꯇꯦꯛꯅꯣꯂꯣꯖꯤꯁꯤꯡ ꯁꯤꯖꯤꯟꯅꯔꯤꯕꯁꯤꯡꯗꯥ – ꯁ꯭ꯛꯔꯤꯟ ꯔꯤꯗꯔꯒꯨꯝꯕꯥ – ꯌꯧꯍꯅꯕꯥ ꯉꯝꯂꯣꯏ꯫ .visually-hidden
ꯃꯆꯨ ꯑꯗꯨꯅꯥ ꯇꯥꯀꯄꯥ ꯏꯅꯐꯣꯔꯃꯦꯁꯟ ꯑꯗꯨ ꯀꯟꯇꯦꯟꯇ ꯃꯁꯥꯃꯛꯇꯒꯤ (ꯈꯨꯗꯝ ꯑꯣꯏꯅꯥ, ꯎꯕꯥ ꯐꯪꯂꯤꯕꯥ ꯇꯦꯛꯁꯠ ꯑꯗꯨꯗꯒꯤ) ꯃꯌꯦꯛ ꯁꯦꯡꯅꯥ ꯎꯕꯥ ꯐꯪꯏ ꯍꯥꯌꯕꯥ ꯁꯣꯌꯗꯅꯥ ꯈꯪꯗꯣꯀꯎ, ꯅꯠꯠꯔꯒꯥ ꯀ꯭ꯂꯥꯁ ꯑꯗꯨꯒꯥ ꯂꯣꯌꯅꯅꯥ ꯂꯣꯠꯁꯤꯜꯂꯕꯥ ꯑꯍꯦꯅꯕꯥ ꯇꯦꯛꯁꯇꯒꯨꯝꯕꯥ ꯑꯂꯇꯔꯅꯦꯇꯤꯚ ꯑꯣꯏꯕꯥ ꯄꯥꯝꯕꯩꯁꯤꯡꯒꯤ ꯈꯨꯠꯊꯥꯡꯗꯥ ꯌꯥꯎꯍꯅꯕꯥ꯫
ꯑꯣꯄꯦꯁꯤꯇꯤ ꯂꯩꯕꯥ꯫
v5.1.0ꯗꯥ ꯍꯥꯄꯆꯤꯜꯂꯦ꯫
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-opacity
1
.text-primary
color
rgba(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
)
),