Colors

Apply text colors with .velin-text-* utilities mapped to VelinStyle's semantic color tokens.

Theme Colors

.velin-text-primary

.velin-text-secondary

.velin-text-success

.velin-text-danger

.velin-text-warning

.velin-text-info

.velin-text-muted

.velin-text-white

<p class="velin-text-primary">Primary text</p>
<p class="velin-text-secondary">Secondary text</p>
<p class="velin-text-success">Success text</p>
<p class="velin-text-danger">Danger text</p>
<p class="velin-text-warning">Warning text</p>
<p class="velin-text-info">Info text</p>
<p class="velin-text-muted">Muted text</p>
<p class="velin-text-white">White text</p>

Body & Emphasis

Contextual text colors for body copy and emphasis:

<p class="velin-text-body">Default body color</p>
<p class="velin-text-body-emphasis">Higher contrast emphasis</p>
<p class="velin-text-body-secondary">Subdued body text</p>
<p class="velin-text-body-tertiary">Tertiary body text</p>

Text Opacity

Pair with .velin-text-opacity-{value} to reduce text opacity:

<p class="velin-text-primary velin-text-opacity-75">75%</p>
<p class="velin-text-primary velin-text-opacity-50">50%</p>
<p class="velin-text-primary velin-text-opacity-25">25%</p>