Typography

Text Color

Utilities for sets the text color.

Variant

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

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