Tokens & namespaces
color-text
Preset color-text values and their consumers.
Scope
These values come from the current preset. Project theme declarations can override them. Mode-specific entries are labeled separately.
Text roles provide foreground hierarchy and interaction colors. Choose them against the actual surface; a role name alone does not guarantee sufficient contrast.
Values
body
--color-text-body- Default
var(--color-neutral-70)lightvar(--color-neutral-70)darkvar(--color-gray-30) strong
--color-text-strong- Default
var(--color-neutral-100)lightvar(--color-neutral-100)darkvar(--color-white) muted
--color-text-muted- Default
var(--color-neutral-60)lightvar(--color-neutral-60)darkvar(--color-gray-40) subtle
--color-text-subtle- Default
var(--color-neutral-50)lightvar(--color-neutral-50)darkvar(--color-gray-50) disabled
--color-text-disabled- Default
var(--color-neutral-40)lightvar(--color-neutral-40)darkvar(--color-gray-60) placeholder
--color-text-placeholder- Default
var(--color-neutral-40)lightvar(--color-neutral-40)darkvar(--color-gray-60) inverse
--color-text-inverse- Default
var(--color-white)lightvar(--color-white)darkvar(--color-black) link
--color-text-link- Default
var(--color-blue-60)lightvar(--color-blue-60)darkvar(--color-blue-30) link-hover
--color-text-link-hover- Default
var(--color-blue-70)lightvar(--color-blue-70)darkvar(--color-blue-20) stone
--color-text-stone- Default
var(--color-stone-60)lightvar(--color-stone-60)darkvar(--color-stone-30) gray
--color-text-gray- Default
var(--color-gray-60)lightvar(--color-gray-60)darkvar(--color-gray-30) neutral
--color-text-neutral- Default
var(--color-neutral-60)lightvar(--color-neutral-60)darkvar(--color-neutral-30) slate
--color-text-slate- Default
var(--color-slate-60)lightvar(--color-slate-60)darkvar(--color-slate-30) brown
--color-text-brown- Default
var(--color-brown-60)lightvar(--color-brown-60)darkvar(--color-brown-30) orange
--color-text-orange- Default
var(--color-orange-60)lightvar(--color-orange-60)darkvar(--color-orange-30) amber
--color-text-amber- Default
var(--color-amber-60)lightvar(--color-amber-60)darkvar(--color-amber-40) yellow
--color-text-yellow- Default
var(--color-yellow-70)lightvar(--color-yellow-70)darkvar(--color-yellow-40) lime
--color-text-lime- Default
var(--color-lime-70)lightvar(--color-lime-70)darkvar(--color-lime-40) green
--color-text-green- Default
var(--color-green-70)lightvar(--color-green-70)darkvar(--color-green-40) beryl
--color-text-beryl- Default
var(--color-beryl-70)lightvar(--color-beryl-70)darkvar(--color-beryl-40) teal
--color-text-teal- Default
var(--color-teal-70)lightvar(--color-teal-70)darkvar(--color-teal-40) cyan
--color-text-cyan- Default
var(--color-cyan-70)lightvar(--color-cyan-70)darkvar(--color-cyan-40) sky
--color-text-sky- Default
var(--color-sky-70)lightvar(--color-sky-70)darkvar(--color-sky-30) blue
--color-text-blue- Default
var(--color-blue-60)lightvar(--color-blue-60)darkvar(--color-blue-30) indigo
--color-text-indigo- Default
var(--color-indigo-60)lightvar(--color-indigo-60)darkvar(--color-indigo-30) violet
--color-text-violet- Default
var(--color-violet-60)lightvar(--color-violet-60)darkvar(--color-violet-30) purple
--color-text-purple- Default
var(--color-purple-60)lightvar(--color-purple-60)darkvar(--color-purple-30) fuchsia
--color-text-fuchsia- Default
var(--color-fuchsia-60)lightvar(--color-fuchsia-60)darkvar(--color-fuchsia-30) pink
--color-text-pink- Default
var(--color-pink-60)lightvar(--color-pink-60)darkvar(--color-pink-30) crimson
--color-text-crimson- Default
var(--color-crimson-60)lightvar(--color-crimson-60)darkvar(--color-crimson-30) red
--color-text-red- Default
var(--color-red-60)lightvar(--color-red-60)darkvar(--color-red-30) sand
--color-text-sand- Default
var(--color-sand-60)lightvar(--color-sand-60)darkvar(--color-sand-30) taupe
--color-text-taupe- Default
var(--color-taupe-60)lightvar(--color-taupe-60)darkvar(--color-taupe-30) olive
--color-text-olive- Default
var(--color-olive-60)lightvar(--color-olive-60)darkvar(--color-olive-30) sage
--color-text-sage- Default
var(--color-sage-60)lightvar(--color-sage-60)darkvar(--color-sage-30) moss
--color-text-moss- Default
var(--color-moss-60)lightvar(--color-moss-60)darkvar(--color-moss-30) petrol
--color-text-petrol- Default
var(--color-petrol-60)lightvar(--color-petrol-60)darkvar(--color-petrol-30) copper
--color-text-copper- Default
var(--color-copper-60)lightvar(--color-copper-60)darkvar(--color-copper-30) terracotta
--color-text-terracotta- Default
var(--color-terracotta-70)lightvar(--color-terracotta-70)darkvar(--color-terracotta-30)
Consumers
-webkit-text-fill-color-, caret-color-, color-, fg-, text-, text-decoration-, text-decoration-color-, text-fill-color-
Customize
See variables and modes and theme directives. For usage and examples, see Colors.