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
.mc-text-color-strong	Strong emphasis text color	mc-text-mushroom-950
.mc-text-color-supporting	Supporting text color	mc-text-mushroom-500
.mc-text-color-base	Base text color for normal content	mc-text-mushroom-600
.mc-text-color-weak	Weak emphasis text color	mc-text-mushroom-400
.mc-text-color-disabled	Text color for disabled elements	mc-text-white-400
.mc-text-color-on-fill-disabled	Text color on filled disabled elements	mc-text-white-500

Inverted Text Colors

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

Brand Text Colors

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

Success Text Colors

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

Information Text Colors

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

Danger Text Colors

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

Pending Text Colors

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

Caution Text Colors

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

Accent Text Colors

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

Special Text Colors

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

Examples

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

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

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

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