Theme colors
.text-primary
.text-primary-emphasis
.text-active
.text-active-emphasis
.text-secondary
.text-secondary-emphasis
.text-success
.text-success-emphasis
.text-info
.text-info-emphasis
.text-warning
.text-warning-emphasis
.text-danger
.text-danger-emphasis
.text-light
.text-light-emphasis
.text-dark
.text-dark-emphasis
.text-body
.text-body-emphasis
.text-body-secondary
.text-body-tertiary
.text-black
.text-white
.text-black-50
.text-white-50
<div class="p-15 m-b-5 text-primary">.text-primary</div>
<div class="p-15 m-b-5 text-primary-emphasis">.text-primary-emphasis</div>
<div class="p-15 m-b-5 text-active">.text-active</div>
<div class="p-15 m-b-5 text-active-emphasis">.text-active-emphasis</div>
<div class="p-15 m-b-5 text-secondary">.text-secondary</div>
<div class="p-15 m-b-5 text-secondary-emphasis">.text-secondary-emphasis</div>
<div class="p-15 m-b-5 text-success">.text-success</div>
<div class="p-15 m-b-5 text-success-emphasis">.text-success-emphasis</div>
<div class="p-15 m-b-5 text-info wui-bg-color--black">.text-info</div>
<div class="p-15 m-b-5 text-info-emphasis">.text-info-emphasis</div>
<div class="p-15 m-b-5 text-warning wui-bg-color--black">.text-warning</div>
<div class="p-15 m-b-5 text-warning-emphasis">.text-warning-emphasis</div>
<div class="p-15 m-b-5 text-danger">.text-danger</div>
<div class="p-15 m-b-5 text-danger-emphasis">.text-danger-emphasis</div>
<div class="p-15 m-b-5 text-light wui-bg-color--black">.text-light</div>
<div class="p-15 m-b-5 text-light-emphasis">.text-light-emphasis</div>
<div class="p-15 m-b-5 text-dark">.text-dark</div>
<div class="p-15 m-b-5 text-dark-emphasis">.text-dark-emphasis</div>
<div class="p-15 m-b-5 text-body">.text-body</div>
<div class="p-15 m-b-5 text-body-emphasis">.text-body-emphasis</div>
<div class="p-15 m-b-5 text-body-secondary">.text-body-secondary</div>
<div class="p-15 m-b-5 text-body-tertiary">.text-body-tertiary</div>
<div class="p-15 m-b-5 text-black">.text-black</div>
<div class="p-15 m-b-5 text-white wui-bg-color--black">.text-white</div>
<div class="p-15 m-b-5 text-black-50">.text-black-50</div>
<div class="p-15 m-b-5 text-white-50 wui-bg-color--black">.text-white-50</div>
Specificity
Sometimes contextual classes cannot be applied due to the specificity of another selector. In some cases, a sufficient workaround is to wrap your element’s content in a <div> or more semantic element with the desired class.
These are the most commonly used colors in wescale. You can find a more detailed insight into our colors with the corresponding guidelines, classes and variables under Colors
