docs/extension-test-page
What's New

Font Color

Utilities to change an element's font-color.

Use DtText's tone prop

Use DtText's tone prop to declare the text's tone, which will map to a foreground color. By default, the tone is inherited from its parent.

Usage

Use d-fc-{color} to change an element's text color.

Hover

Use h:d-fc-{color} to change an element's text color :hover state.

Focus

Use f:d-fc-{color} to change an element's text color :focus and :focus-within state.

Focus Visible

Use fv:d-fc-{color} to change an element's text color on :focus-visible state [only when focused by keyboard].

Inverted

Changing Opacity

Use d-fco{n} to change an element's text color opacity. You can also change font color opacity on :hover, :focus, :focus-visible by using the respective h:d-fco{n}, f:d-fco{n}, fv:d-fco{n} prefixes.

Classes

Class
Output
d-fc-current
color: currentColor !important;
Aa
d-fc-neutral-black
color: oklch(from var(--dt-color-neutral-black) l c h / var(--fco, alpha)) !important;
Aa
d-fc-neutral-transparent
color: oklch(from var(--dt-color-neutral-transparent) l c h / var(--fco, alpha)) !important;
Aa
d-fc-neutral-white
color: oklch(from var(--dt-color-neutral-white) l c h / var(--fco, alpha)) !important;
Aa
d-fc-transparent
color: transparent !important;
Aa
d-fc-unset
color: unset !important;
Aa
d-fc-critical
color: oklch(from var(--dt-color-foreground-critical) l c h / var(--fco, alpha)) !important;
Aa
d-fc-critical-inverted Deprecated
color: oklch(from var(--dt-color-foreground-critical-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-critical-strong
color: oklch(from var(--dt-color-foreground-critical-strong) l c h / var(--fco, alpha)) !important;
Aa
d-fc-critical-strong-inverted Deprecated
color: oklch(from var(--dt-color-foreground-critical-strong-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-disabled
color: oklch(from var(--dt-color-foreground-disabled) l c h / var(--fco, alpha)) !important;
Aa
d-fc-disabled-inverted Deprecated
color: oklch(from var(--dt-color-foreground-disabled-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-info
color: oklch(from var(--dt-color-foreground-info) l c h / var(--fco, alpha)) !important;
Aa
d-fc-info-inverted Deprecated
color: oklch(from var(--dt-color-foreground-info-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-info-strong
color: oklch(from var(--dt-color-foreground-info-strong) l c h / var(--fco, alpha)) !important;
Aa
d-fc-info-strong-inverted Deprecated
color: oklch(from var(--dt-color-foreground-info-strong-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-muted
color: oklch(from var(--dt-color-foreground-muted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-muted-inverted Deprecated
color: oklch(from var(--dt-color-foreground-muted-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-placeholder
color: oklch(from var(--dt-color-foreground-placeholder) l c h / var(--fco, alpha)) !important;
Aa
d-fc-placeholder-inverted Deprecated
color: oklch(from var(--dt-color-foreground-placeholder-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-positive
color: oklch(from var(--dt-color-foreground-positive) l c h / var(--fco, alpha)) !important;
Aa
d-fc-positive-inverted Deprecated
color: oklch(from var(--dt-color-foreground-positive-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-positive-strong
color: oklch(from var(--dt-color-foreground-positive-strong) l c h / var(--fco, alpha)) !important;
Aa
d-fc-positive-strong-inverted Deprecated
color: oklch(from var(--dt-color-foreground-positive-strong-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-primary
color: oklch(from var(--dt-color-foreground-primary) l c h / var(--fco, alpha)) !important;
Aa
d-fc-primary-inverted Deprecated
color: oklch(from var(--dt-color-foreground-primary-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-secondary
color: oklch(from var(--dt-color-foreground-secondary) l c h / var(--fco, alpha)) !important;
Aa
d-fc-secondary-inverted Deprecated
color: oklch(from var(--dt-color-foreground-secondary-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-success Deprecated
color: oklch(from var(--dt-color-foreground-success) l c h / var(--fco, alpha)) !important;
Aa
d-fc-success-inverted Deprecated
color: oklch(from var(--dt-color-foreground-success-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-success-strong Deprecated
color: oklch(from var(--dt-color-foreground-success-strong) l c h / var(--fco, alpha)) !important;
Aa
d-fc-success-strong-inverted Deprecated
color: oklch(from var(--dt-color-foreground-success-strong-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tertiary
color: oklch(from var(--dt-color-foreground-tertiary) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tertiary-inverted Deprecated
color: oklch(from var(--dt-color-foreground-tertiary-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-warning
color: oklch(from var(--dt-color-foreground-warning) l c h / var(--fco, alpha)) !important;
Aa
d-fc-warning-inverted Deprecated
color: oklch(from var(--dt-color-foreground-warning-inverted) l c h / var(--fco, alpha)) !important;
Aa
d-fc-warning-strong
color: oklch(from var(--dt-color-foreground-warning-strong) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-50 Deprecated
color: oklch(from var(--dt-color-berry-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-100 Deprecated
color: oklch(from var(--dt-color-berry-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-200 Deprecated
color: oklch(from var(--dt-color-berry-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-300 Deprecated
color: oklch(from var(--dt-color-berry-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-400 Deprecated
color: oklch(from var(--dt-color-berry-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-500 Deprecated
color: oklch(from var(--dt-color-berry-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-600 Deprecated
color: oklch(from var(--dt-color-berry-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-700 Deprecated
color: oklch(from var(--dt-color-berry-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-800 Deprecated
color: oklch(from var(--dt-color-berry-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-900 Deprecated
color: oklch(from var(--dt-color-berry-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-950 Deprecated
color: oklch(from var(--dt-color-berry-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-berry-1000 Deprecated
color: oklch(from var(--dt-color-berry-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-50 Deprecated
color: oklch(from var(--dt-color-black-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-100 Deprecated
color: oklch(from var(--dt-color-black-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-150 Deprecated
color: oklch(from var(--dt-color-black-150) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-200 Deprecated
color: oklch(from var(--dt-color-black-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-250 Deprecated
color: oklch(from var(--dt-color-black-250) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-300 Deprecated
color: oklch(from var(--dt-color-black-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-350 Deprecated
color: oklch(from var(--dt-color-black-350) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-400 Deprecated
color: oklch(from var(--dt-color-black-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-450 Deprecated
color: oklch(from var(--dt-color-black-450) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-500 Deprecated
color: oklch(from var(--dt-color-black-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-550 Deprecated
color: oklch(from var(--dt-color-black-550) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-600 Deprecated
color: oklch(from var(--dt-color-black-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-650 Deprecated
color: oklch(from var(--dt-color-black-650) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-700 Deprecated
color: oklch(from var(--dt-color-black-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-750 Deprecated
color: oklch(from var(--dt-color-black-750) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-800 Deprecated
color: oklch(from var(--dt-color-black-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-850 Deprecated
color: oklch(from var(--dt-color-black-850) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-900 Deprecated
color: oklch(from var(--dt-color-black-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-950 Deprecated
color: oklch(from var(--dt-color-black-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-black-1000 Deprecated
color: oklch(from var(--dt-color-black-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-50 Deprecated
color: oklch(from var(--dt-color-blue-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-100 Deprecated
color: oklch(from var(--dt-color-blue-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-200 Deprecated
color: oklch(from var(--dt-color-blue-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-300 Deprecated
color: oklch(from var(--dt-color-blue-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-400 Deprecated
color: oklch(from var(--dt-color-blue-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-500 Deprecated
color: oklch(from var(--dt-color-blue-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-600 Deprecated
color: oklch(from var(--dt-color-blue-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-700 Deprecated
color: oklch(from var(--dt-color-blue-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-800 Deprecated
color: oklch(from var(--dt-color-blue-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-900 Deprecated
color: oklch(from var(--dt-color-blue-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-950 Deprecated
color: oklch(from var(--dt-color-blue-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-blue-1000 Deprecated
color: oklch(from var(--dt-color-blue-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-50 Deprecated
color: oklch(from var(--dt-color-coral-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-100 Deprecated
color: oklch(from var(--dt-color-coral-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-200 Deprecated
color: oklch(from var(--dt-color-coral-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-300 Deprecated
color: oklch(from var(--dt-color-coral-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-400 Deprecated
color: oklch(from var(--dt-color-coral-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-500 Deprecated
color: oklch(from var(--dt-color-coral-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-600 Deprecated
color: oklch(from var(--dt-color-coral-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-700 Deprecated
color: oklch(from var(--dt-color-coral-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-800 Deprecated
color: oklch(from var(--dt-color-coral-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-900 Deprecated
color: oklch(from var(--dt-color-coral-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-950 Deprecated
color: oklch(from var(--dt-color-coral-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-coral-1000 Deprecated
color: oklch(from var(--dt-color-coral-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-50 Deprecated
color: oklch(from var(--dt-color-gold-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-100 Deprecated
color: oklch(from var(--dt-color-gold-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-200 Deprecated
color: oklch(from var(--dt-color-gold-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-300 Deprecated
color: oklch(from var(--dt-color-gold-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-400 Deprecated
color: oklch(from var(--dt-color-gold-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-500 Deprecated
color: oklch(from var(--dt-color-gold-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-600 Deprecated
color: oklch(from var(--dt-color-gold-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-700 Deprecated
color: oklch(from var(--dt-color-gold-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-800 Deprecated
color: oklch(from var(--dt-color-gold-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-900 Deprecated
color: oklch(from var(--dt-color-gold-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-950 Deprecated
color: oklch(from var(--dt-color-gold-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-gold-1000 Deprecated
color: oklch(from var(--dt-color-gold-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-50 Deprecated
color: oklch(from var(--dt-color-green-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-100 Deprecated
color: oklch(from var(--dt-color-green-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-200 Deprecated
color: oklch(from var(--dt-color-green-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-300 Deprecated
color: oklch(from var(--dt-color-green-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-400 Deprecated
color: oklch(from var(--dt-color-green-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-500 Deprecated
color: oklch(from var(--dt-color-green-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-600 Deprecated
color: oklch(from var(--dt-color-green-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-700 Deprecated
color: oklch(from var(--dt-color-green-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-800 Deprecated
color: oklch(from var(--dt-color-green-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-900 Deprecated
color: oklch(from var(--dt-color-green-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-950 Deprecated
color: oklch(from var(--dt-color-green-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-green-1000 Deprecated
color: oklch(from var(--dt-color-green-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-50 Deprecated
color: oklch(from var(--dt-color-indigo-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-100 Deprecated
color: oklch(from var(--dt-color-indigo-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-200 Deprecated
color: oklch(from var(--dt-color-indigo-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-300 Deprecated
color: oklch(from var(--dt-color-indigo-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-400 Deprecated
color: oklch(from var(--dt-color-indigo-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-500 Deprecated
color: oklch(from var(--dt-color-indigo-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-600 Deprecated
color: oklch(from var(--dt-color-indigo-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-700 Deprecated
color: oklch(from var(--dt-color-indigo-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-800 Deprecated
color: oklch(from var(--dt-color-indigo-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-900 Deprecated
color: oklch(from var(--dt-color-indigo-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-950 Deprecated
color: oklch(from var(--dt-color-indigo-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-indigo-1000 Deprecated
color: oklch(from var(--dt-color-indigo-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-50 Deprecated
color: oklch(from var(--dt-color-magenta-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-100 Deprecated
color: oklch(from var(--dt-color-magenta-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-200 Deprecated
color: oklch(from var(--dt-color-magenta-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-300 Deprecated
color: oklch(from var(--dt-color-magenta-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-400 Deprecated
color: oklch(from var(--dt-color-magenta-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-500 Deprecated
color: oklch(from var(--dt-color-magenta-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-600 Deprecated
color: oklch(from var(--dt-color-magenta-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-700 Deprecated
color: oklch(from var(--dt-color-magenta-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-800 Deprecated
color: oklch(from var(--dt-color-magenta-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-900 Deprecated
color: oklch(from var(--dt-color-magenta-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-950 Deprecated
color: oklch(from var(--dt-color-magenta-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-magenta-1000 Deprecated
color: oklch(from var(--dt-color-magenta-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-50 Deprecated
color: oklch(from var(--dt-color-olive-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-100 Deprecated
color: oklch(from var(--dt-color-olive-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-200 Deprecated
color: oklch(from var(--dt-color-olive-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-300 Deprecated
color: oklch(from var(--dt-color-olive-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-400 Deprecated
color: oklch(from var(--dt-color-olive-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-500 Deprecated
color: oklch(from var(--dt-color-olive-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-600 Deprecated
color: oklch(from var(--dt-color-olive-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-700 Deprecated
color: oklch(from var(--dt-color-olive-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-800 Deprecated
color: oklch(from var(--dt-color-olive-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-900 Deprecated
color: oklch(from var(--dt-color-olive-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-950 Deprecated
color: oklch(from var(--dt-color-olive-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-olive-1000 Deprecated
color: oklch(from var(--dt-color-olive-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-50 Deprecated
color: oklch(from var(--dt-color-purple-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-100 Deprecated
color: oklch(from var(--dt-color-purple-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-200 Deprecated
color: oklch(from var(--dt-color-purple-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-300 Deprecated
color: oklch(from var(--dt-color-purple-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-400 Deprecated
color: oklch(from var(--dt-color-purple-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-500 Deprecated
color: oklch(from var(--dt-color-purple-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-600 Deprecated
color: oklch(from var(--dt-color-purple-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-700 Deprecated
color: oklch(from var(--dt-color-purple-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-800 Deprecated
color: oklch(from var(--dt-color-purple-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-900 Deprecated
color: oklch(from var(--dt-color-purple-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-950 Deprecated
color: oklch(from var(--dt-color-purple-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-purple-1000 Deprecated
color: oklch(from var(--dt-color-purple-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-50 Deprecated
color: oklch(from var(--dt-color-red-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-100 Deprecated
color: oklch(from var(--dt-color-red-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-200 Deprecated
color: oklch(from var(--dt-color-red-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-300 Deprecated
color: oklch(from var(--dt-color-red-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-400 Deprecated
color: oklch(from var(--dt-color-red-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-500 Deprecated
color: oklch(from var(--dt-color-red-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-600 Deprecated
color: oklch(from var(--dt-color-red-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-700 Deprecated
color: oklch(from var(--dt-color-red-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-800 Deprecated
color: oklch(from var(--dt-color-red-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-900 Deprecated
color: oklch(from var(--dt-color-red-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-950 Deprecated
color: oklch(from var(--dt-color-red-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-red-1000 Deprecated
color: oklch(from var(--dt-color-red-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-50 Deprecated
color: oklch(from var(--dt-color-tan-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-100 Deprecated
color: oklch(from var(--dt-color-tan-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-200 Deprecated
color: oklch(from var(--dt-color-tan-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-300 Deprecated
color: oklch(from var(--dt-color-tan-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-400 Deprecated
color: oklch(from var(--dt-color-tan-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-500 Deprecated
color: oklch(from var(--dt-color-tan-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-600 Deprecated
color: oklch(from var(--dt-color-tan-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-700 Deprecated
color: oklch(from var(--dt-color-tan-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-800 Deprecated
color: oklch(from var(--dt-color-tan-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-900 Deprecated
color: oklch(from var(--dt-color-tan-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-950 Deprecated
color: oklch(from var(--dt-color-tan-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-tan-1000 Deprecated
color: oklch(from var(--dt-color-tan-1000) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-50 Deprecated
color: oklch(from var(--dt-color-teal-50) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-100 Deprecated
color: oklch(from var(--dt-color-teal-100) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-200 Deprecated
color: oklch(from var(--dt-color-teal-200) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-300 Deprecated
color: oklch(from var(--dt-color-teal-300) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-400 Deprecated
color: oklch(from var(--dt-color-teal-400) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-500 Deprecated
color: oklch(from var(--dt-color-teal-500) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-600 Deprecated
color: oklch(from var(--dt-color-teal-600) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-700 Deprecated
color: oklch(from var(--dt-color-teal-700) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-800 Deprecated
color: oklch(from var(--dt-color-teal-800) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-900 Deprecated
color: oklch(from var(--dt-color-teal-900) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-950 Deprecated
color: oklch(from var(--dt-color-teal-950) l c h / var(--fco, alpha)) !important;
Aa
d-fc-teal-1000 Deprecated
color: oklch(from var(--dt-color-teal-1000) l c h / var(--fco, alpha)) !important;
Aa

Font Color documentation last updated Thursday, June 18, 2026