Text Color

Set text color

Syntax

visual="text:[color]/[opacity]"

Examples

<div visual="text:white">White text</div>
<div visual="text:blue-500">Blue text</div>
<div visual="text:[#FF5733]">Custom color</div>
<div visual="text:primary/75">75% opacity text</div>

Preview

Text Color

visual="text:primary" - Set text color from theme or palette

PrimarySecondarySuccessDanger

View Code

<div layout="flex" space="g:small p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <span visual="text:primary">Primary</span>
  <span visual="text:secondary">Secondary</span>
  <span visual="text:success">Success</span>
  <span visual="text:danger">Danger</span>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="text:[custom-value]">Custom</div>