Text Colors

These utility classes set text colors using semantic names for various states and contexts. Use them to ensure consistent text color application across your UI.

Usage

Base Text Colors

Class Name	Description	Color Token
.spr-text-color-strong	Strong emphasis text color	spr-text-mushroom-950
.spr-text-color-supporting	Supporting text color	spr-text-mushroom-500
.spr-text-color-base	Base text color for normal content	spr-text-mushroom-600
.spr-text-color-weak	Weak emphasis text color	spr-text-mushroom-400
.spr-text-color-disabled	Text color for disabled elements	spr-text-white-400
.spr-text-color-on-fill-disabled	Text color on filled disabled elements	spr-text-white-500

Inverted Text Colors

Class Name	Description	Color Token
.spr-text-color-inverted-strong	Strong text on dark backgrounds	spr-text-white-50
.spr-text-color-inverted-base	Base text on dark backgrounds	spr-text-mushroom-200
.spr-text-color-inverted-weak	Weak text on dark backgrounds	spr-text-mushroom-400
.spr-text-color-inverted-disabled	Disabled text on dark backgrounds	spr-text-white-600

Brand Text Colors

Class Name	Description	Color Token
.spr-text-color-brand-base	Brand text color	spr-text-kangkong-700
.spr-text-color-brand-hover	Brand text on hover	spr-text-kangkong-800
.spr-text-color-brand-pressed	Brand text on pressed	spr-text-kangkong-900

Success Text Colors

Class Name	Description	Color Token
.spr-text-color-success-base	Success text color	spr-text-kangkong-700
.spr-text-color-success-hover	Success text on hover	spr-text-kangkong-800
.spr-text-color-success-pressed	Success text on pressed	spr-text-kangkong-900

Information Text Colors

Class Name	Description	Color Token
.spr-text-color-information-base	Information text color	spr-text-blueberry-800
.spr-text-color-information-hover	Information text on hover	spr-text-blueberry-900
.spr-text-color-information-pressed	Information text on pressed	spr-text-blueberry-950

Danger Text Colors

Class Name	Description	Color Token
.spr-text-color-danger-base	Danger text color	spr-text-tomato-700
.spr-text-color-danger-hover	Danger text on hover	spr-text-tomato-800
.spr-text-color-danger-pressed	Danger text on pressed	spr-text-tomato-900

Pending Text Colors

Class Name	Description	Color Token
.spr-text-color-pending-base	Pending text color	spr-text-mango-800
.spr-text-color-pending-hover	Pending text on hover	spr-text-mango-900
.spr-text-color-pending-pressed	Pending text on pressed	spr-text-mango-950

Caution Text Colors

Class Name	Description	Color Token
.spr-text-color-caution-base	Caution text color	spr-text-carrot-800
.spr-text-color-caution-hover	Caution text on hover	spr-text-carrot-900
.spr-text-color-caution-pressed	Caution text on pressed	spr-text-carrot-950

Accent Text Colors

Class Name	Description	Color Token
.spr-text-color-accent-base	Accent text color	spr-text-wintermelon-700
.spr-text-color-accent-hover	Accent text on hover	spr-text-wintermelon-800
.spr-text-color-accent-pressed	Accent text on pressed	spr-text-wintermelon-900

Special Text Colors

Class Name	Description	Color Token
.spr-text-color-specialty-token-dark	Specialty dark token text	spr-text-mushroom-950

Examples

<!-- Basic usage -->
<p class="spr-text-color-strong">Strong emphasis text</p>
<p class="spr-text-color-base">Normal body text</p>
<p class="spr-text-color-weak">Secondary information</p>

<!-- Interactive states -->
<a href="#" class="spr-text-color-brand-base hover:spr-text-color-brand-hover"> Brand link </a>

<!-- Status messages -->
<p class="spr-text-color-success-base">Success message</p>
<p class="spr-text-color-danger-base">Error message</p>
<p class="spr-text-color-information-base">Information message</p>

<!-- Inverted for dark backgrounds -->
<div class="spr-background-color-inverted">
  <p class="spr-text-color-inverted-strong">Title on dark background</p>
  <p class="spr-text-color-inverted-base">Body text on dark background</p>
</div>