Text Color

vel-src: colors.css

Utilities for controlling the text color of an element.

Class	Properties
vel-text-primary	color: var(--vel-primary-500)
vel-text-secondary	color: var(--vel-secondary-500)
vel-text-success	color: var(--vel-success-500)
vel-text-danger	color: var(--vel-danger-500)
vel-text-warning	color: var(--vel-warning-500)
vel-text-info	color: var(--vel-info-500)
vel-text-white	color: #ffffff
vel-text-black	color: #000000
vel-text-neutral-50	color: var(--vel-neutral-50)
vel-text-neutral-100	color: var(--vel-neutral-100)
vel-text-neutral-200	color: var(--vel-neutral-200)
vel-text-neutral-300	color: var(--vel-neutral-300)
vel-text-neutral-400	color: var(--vel-neutral-400)
vel-text-neutral-500	color: var(--vel-neutral-500)
vel-text-neutral-600	color: var(--vel-neutral-600)
vel-text-neutral-700	color: var(--vel-neutral-700)
vel-text-neutral-800	color: var(--vel-neutral-800)
vel-text-neutral-900	color: var(--vel-neutral-900)

Examples

Semantic text colors

vel-text-primary — Velora Violet

vel-text-success — Emerald

vel-text-danger — Rose

vel-text-warning — Amber

vel-text-info — Sky

vel-text-secondary — Slate

example.html

<div style="display:flex;flex-direction:column;gap:0.5rem;background:#060b17;padding:1.25rem;border-radius:0.5rem">
  <p class="vel-text-primary" style="margin:0">vel-text-primary — Velora Violet</p>
  <p class="vel-text-success" style="margin:0">vel-text-success — Emerald</p>
  <p class="vel-text-danger" style="margin:0">vel-text-danger — Rose</p>
  <p class="vel-text-warning" style="margin:0">vel-text-warning — Amber</p>
  <p class="vel-text-info" style="margin:0">vel-text-info — Sky</p>
  <p class="vel-text-secondary" style="margin:0">vel-text-secondary — Slate</p>
</div>

Neutral scale text

vel-text-neutral-900 (darkest)

vel-text-neutral-700

vel-text-neutral-500

vel-text-neutral-300

vel-text-neutral-100 (lightest)

example.html

<div style="display:flex;flex-direction:column;gap:0.25rem;background:#060b17;padding:1.25rem;border-radius:0.5rem">
  <p class="vel-text-neutral-900" style="margin:0">vel-text-neutral-900 (darkest)</p>
  <p class="vel-text-neutral-700" style="margin:0">vel-text-neutral-700</p>
  <p class="vel-text-neutral-500" style="margin:0">vel-text-neutral-500</p>
  <p class="vel-text-neutral-300" style="margin:0">vel-text-neutral-300</p>
  <p class="vel-text-neutral-100" style="margin:0">vel-text-neutral-100 (lightest)</p>
</div>

Hover text color change

Hover to see color change

example.html

<a class="vel-text-neutral-400 vel-hover:text-primary vel-transition-colors vel-duration-150" href="#" style="text-decoration:none">
  Hover to see color change
</a>