Typography

Text Color

Utilities for sets the text color.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
text-transparent	color: transparent	Text
text-white	color: #fff	Text

class
text-shade-`{palette}`-`{modifier}`	See:Palette page to find more about the color options (Shades, Tones, Tints), color manipulations (saturation, brightness, contrast), and transparency.
text-tone-`{palette}`-`{modifier}`
text-tint-`{palette}`-`{modifier}`

Usage

Set basic text color to an element.

<div class="text-shade-amber-5">
  ...
</div>

HTML

.dummy {
  @extend
    .text-shade-amber-5;
}

SCSS

Set default text color to <body> tag.

<body class="text-shade-amber-5">
  ...
</body>

HTML

body {
  @extend
    .text-shade-amber-5;
}

SCSS

Set auto dark theme enabled to an element with added (dark) prefix.

<div class="text-shade-granite-1 ... (dark)text-shade-charcoal-1">
  ...
</div>

HTML

.dummy {
  @extend
    .text-shade-granite-1,
    .\(dark\)text-shade-charcoal-1;
}

SCSS