Text opacity colors
Text colors with opacity in the range from 0.1 to 0.9.
PrimarySecondarySuccessInfoWarningDangerLightDarkBlackIndigoOrangePinkPurpleTealWhite
<!-- Source -->
<div class="text-primary-10">Primary</div>
<div class="text-primary-20">Primary</div>
<div class="text-primary-30">Primary</div>
<div class="text-primary-40">Primary</div>
<div class="text-primary-50">Primary</div>
<div class="text-primary-60">Primary</div>
<div class="text-primary-70">Primary</div>
<div class="text-primary-80">Primary</div>
<div class="text-primary-90">Primary</div>
<div class="text-secondary-10">Secondary</div>
<div class="text-secondary-20">Secondary</div>
<div class="text-secondary-30">Secondary</div>
<div class="text-secondary-40">Secondary</div>
<div class="text-secondary-50">Secondary</div>
<div class="text-secondary-60">Secondary</div>
<div class="text-secondary-70">Secondary</div>
<div class="text-secondary-80">Secondary</div>
<div class="text-secondary-90">Secondary</div>
<div class="text-success-10">Success</div>
<div class="text-success-20">Success</div>
<div class="text-success-30">Success</div>
<div class="text-success-40">Success</div>
<div class="text-success-50">Success</div>
<div class="text-success-60">Success</div>
<div class="text-success-70">Success</div>
<div class="text-success-80">Success</div>
<div class="text-success-90">Success</div>
<div class="text-info-10">Info</div>
<div class="text-info-20">Info</div>
<div class="text-info-30">Info</div>
<div class="text-info-40">Info</div>
<div class="text-info-50">Info</div>
<div class="text-info-60">Info</div>
<div class="text-info-70">Info</div>
<div class="text-info-80">Info</div>
<div class="text-info-90">Info</div>
<div class="text-warning-10">Warning</div>
<div class="text-warning-20">Warning</div>
<div class="text-warning-30">Warning</div>
<div class="text-warning-40">Warning</div>
<div class="text-warning-50">Warning</div>
<div class="text-warning-60">Warning</div>
<div class="text-warning-70">Warning</div>
<div class="text-warning-80">Warning</div>
<div class="text-warning-90">Warning</div>
<div class="text-danger-10">Danger</div>
<div class="text-danger-20">Danger</div>
<div class="text-danger-30">Danger</div>
<div class="text-danger-40">Danger</div>
<div class="text-danger-50">Danger</div>
<div class="text-danger-60">Danger</div>
<div class="text-danger-70">Danger</div>
<div class="text-danger-80">Danger</div>
<div class="text-danger-90">Danger</div>
<div class="text-light-10">Light</div>
<div class="text-light-20">Light</div>
<div class="text-light-30">Light</div>
<div class="text-light-40">Light</div>
<div class="text-light-50">Light</div>
<div class="text-light-60">Light</div>
<div class="text-light-70">Light</div>
<div class="text-light-80">Light</div>
<div class="text-light-90">Light</div>
<div class="text-dark-10">Dark</div>
<div class="text-dark-20">Dark</div>
<div class="text-dark-30">Dark</div>
<div class="text-dark-40">Dark</div>
<div class="text-dark-50">Dark</div>
<div class="text-dark-60">Dark</div>
<div class="text-dark-70">Dark</div>
<div class="text-dark-80">Dark</div>
<div class="text-dark-90">Dark</div>
<div class="text-black-10">Black</div>
<div class="text-black-20">Black</div>
<div class="text-black-30">Black</div>
<div class="text-black-40">Black</div>
<div class="text-black-50">Black</div>
<div class="text-black-60">Black</div>
<div class="text-black-70">Black</div>
<div class="text-black-80">Black</div>
<div class="text-black-90">Black</div>
<div class="text-indigo-10">Indigo</div>
<div class="text-indigo-20">Indigo</div>
<div class="text-indigo-30">Indigo</div>
<div class="text-indigo-40">Indigo</div>
<div class="text-indigo-50">Indigo</div>
<div class="text-indigo-60">Indigo</div>
<div class="text-indigo-70">Indigo</div>
<div class="text-indigo-80">Indigo</div>
<div class="text-indigo-90">Indigo</div>
<div class="text-orange-10">Orange</div>
<div class="text-orange-20">Orange</div>
<div class="text-orange-30">Orange</div>
<div class="text-orange-40">Orange</div>
<div class="text-orange-50">Orange</div>
<div class="text-orange-60">Orange</div>
<div class="text-orange-70">Orange</div>
<div class="text-orange-80">Orange</div>
<div class="text-orange-90">Orange</div>
<div class="text-pink-10">Pink</div>
<div class="text-pink-20">Pink</div>
<div class="text-pink-30">Pink</div>
<div class="text-pink-40">Pink</div>
<div class="text-pink-50">Pink</div>
<div class="text-pink-60">Pink</div>
<div class="text-pink-70">Pink</div>
<div class="text-pink-80">Pink</div>
<div class="text-pink-90">Pink</div>
<div class="text-purple-10">Purple</div>
<div class="text-purple-20">Purple</div>
<div class="text-purple-30">Purple</div>
<div class="text-purple-40">Purple</div>
<div class="text-purple-50">Purple</div>
<div class="text-purple-60">Purple</div>
<div class="text-purple-70">Purple</div>
<div class="text-purple-80">Purple</div>
<div class="text-purple-90">Purple</div>
<div class="text-teal-10">Teal</div>
<div class="text-teal-20">Teal</div>
<div class="text-teal-30">Teal</div>
<div class="text-teal-40">Teal</div>
<div class="text-teal-50">Teal</div>
<div class="text-teal-60">Teal</div>
<div class="text-teal-70">Teal</div>
<div class="text-teal-80">Teal</div>
<div class="text-teal-90">Teal</div>
<div class="text-white-10">White</div>
<div class="text-white-20">White</div>
<div class="text-white-30">White</div>
<div class="text-white-40">White</div>
<div class="text-white-50">White</div>
<div class="text-white-60">White</div>
<div class="text-white-70">White</div>
<div class="text-white-80">White</div>
<div class="text-white-90">White</div>