Color
Convey meaning through color with a handful of color utility classes. Includes support for styling links with hover states, too.
Color on BootstrapColors
<p class="text-primary">text-primary</p>
<p class="text-secondary">text-secondary</p>
<p class="text-success">text-success</p>
<p class="text-info">text-info</p>
<p class="text-warning">text-warning</p>
<p class="text-danger">text-danger</p>
<p class="text-body">text-body</p>
<p class="text-body-highlight">text-body-highlight</p>
<p class="text-body-secondary">text-body-secondary</p>
<p class="text-body-tertiary">text-body-tertiary</p>
<p class="text-body-quaternary">text-body-quaternary</p>
<p class="text-body-emphasis">text-body-emphasis</p><span class="pe-3 text-primary-subtle bg-dark dark__bg-gray-400 ">text-primary-subtle</span><br /><span class="pe-3 text-primary-light ">text-primary-light</span><br /><span class="pe-3 text-primary-lighter ">text-primary-lighter</span><br /><span class="pe-3 text-primary-dark ">text-primary-dark</span><br /><span class="pe-3 text-primary-darker ">text-primary-darker</span><br /><span class="pe-3 text-primary-emphasis ">text-primary-emphasis</span><br /><span class="pe-3 text-secondary-subtle bg-dark dark__bg-gray-400 ">text-secondary-subtle</span><br /><span class="pe-3 text-secondary-light ">text-secondary-light</span><br /><span class="pe-3 text-secondary-lighter ">text-secondary-lighter</span><br /><span class="pe-3 text-secondary-dark bg-white">text-secondary-dark</span><br /><span class="pe-3 text-secondary-darker ">text-secondary-darker</span><br /><span class="pe-3 text-secondary-emphasis ">text-secondary-emphasis</span><br /><span class="pe-3 text-success-subtle bg-dark dark__bg-gray-400 ">text-success-subtle</span><br /><span class="pe-3 text-success-light ">text-success-light</span><br /><span class="pe-3 text-success-lighter ">text-success-lighter</span><br /><span class="pe-3 text-success-dark ">text-success-dark</span><br /><span class="pe-3 text-success-darker ">text-success-darker</span><br /><span class="pe-3 text-success-emphasis ">text-success-emphasis</span><br /><span class="pe-3 text-info-subtle bg-dark dark__bg-gray-400 ">text-info-subtle</span><br /><span class="pe-3 text-info-light ">text-info-light</span><br /><span class="pe-3 text-info-lighter ">text-info-lighter</span><br /><span class="pe-3 text-info-dark ">text-info-dark</span><br /><span class="pe-3 text-info-darker ">text-info-darker</span><br /><span class="pe-3 text-info-emphasis ">text-info-emphasis</span><br /><span class="pe-3 text-warning-subtle bg-dark dark__bg-gray-400 ">text-warning-subtle</span><br /><span class="pe-3 text-warning-light ">text-warning-light</span><br /><span class="pe-3 text-warning-lighter ">text-warning-lighter</span><br /><span class="pe-3 text-warning-dark ">text-warning-dark</span><br /><span class="pe-3 text-warning-darker ">text-warning-darker</span><br /><span class="pe-3 text-warning-emphasis ">text-warning-emphasis</span><br /><span class="pe-3 text-danger-subtle bg-dark dark__bg-gray-400 ">text-danger-subtle</span><br /><span class="pe-3 text-danger-light ">text-danger-light</span><br /><span class="pe-3 text-danger-lighter ">text-danger-lighter</span><br /><span class="pe-3 text-danger-dark ">text-danger-dark</span><br /><span class="pe-3 text-danger-darker ">text-danger-darker</span><br /><span class="pe-3 text-danger-emphasis ">text-danger-emphasis</span><br />text-primary
text-secondary
text-success
text-info
text-warning
text-danger
text-body
text-body-highlight
text-body-secondary
text-body-tertiary
text-body-quaternary
text-body-emphasis
text-primary-subtletext-primary-light
text-primary-lighter
text-primary-dark
text-primary-darker
text-primary-emphasis
text-secondary-subtle
text-secondary-light
text-secondary-lighter
text-secondary-dark
text-secondary-darker
text-secondary-emphasis
text-success-subtle
text-success-light
text-success-lighter
text-success-dark
text-success-darker
text-success-emphasis
text-info-subtle
text-info-light
text-info-lighter
text-info-dark
text-info-darker
text-info-emphasis
text-warning-subtle
text-warning-light
text-warning-lighter
text-warning-dark
text-warning-darker
text-warning-emphasis
text-danger-subtle
text-danger-light
text-danger-lighter
text-danger-dark
text-danger-darker
text-danger-emphasis
Opacity
Color opacity allows for real-time color changes without compilation and dynamic alpha transparency changes.
How it works
Consider our default .text-primary utility.
.text-primary {
--phoenix-text-opacity: 1;
color: rgba(var(--phoenix-primary-rgb), var(--phoenix-text-opacity)) !important;
}Example
<div class="text-primary mb-1">This is default primary text</div>
<div class="text-primary mb-1" style="--bs-text-opacity: .5;">This is 50% opacity primary text using inline css</div>
<div class="text-primary text-opacity-75 mb-1">This is 75% opacity primary text using utility class</div>
<div class="text-primary text-opacity-50 mb-1">This is 50% opacity primary text using utility class</div>
<div class="text-primary text-opacity-25 mb-1">This is 25% opacity primary text using utility class</div>This is default primary text
This is 50% opacity primary text using inline css
This is 75% opacity primary text using utility class
This is 50% opacity primary text using utility class
This is 25% opacity primary text using utility class
