Design Token

Text Colors

Customizing text color variables or starting with the official design system.

Default

TokenDescriptions
Aatext-strongpage titles, subheadings, emphasized fields
Aatext-neutralbody text, descriptions, and general content
Aatext-lightlight color, icons
Aatext-lighterlighter color, icons
Aatext-lightestdim color, placeholder, disabled text
Aatext-invertinverted color of the foreground
Aatext-grayneutral, subtle, muted
Aatext-slatecool, calm, sophisticated
Aatext-brownearthy, warm, rustic
Aatext-orangevibrant, energetic, lively
Aatext-amberwarm, glowing, radiant
Aatext-yellowcheerful, sunny, bright
Aatext-limefresh, lively, zesty
Aatext-greennature, growth, harmony
Aatext-berylcalm, soothing, tranquil
Aatext-tealsophisticated, elegant, refined
Aatext-cyanmodern, futuristic, technological
Aatext-skypeaceful, serene, tranquil
Aatext-bluecalm, trustworthy, reliable
Aatext-indigomysterious, deep, spiritual
Aatext-violetcreative, imaginative, magical
Aatext-purpleroyal, luxurious, majestic
Aatext-fuchsiavibrant, bold, playful
Aatext-pinkfeminine, romantic, delicate
Aatext-crimsonpassionate, intense, powerful
Aatext-redbold, energetic, attention-grabbing

By default, theme modes drive text variables are meticulously adjusted in light and dark modes.

M
M
<div class="light">
<span class="fg:yellow">M</span>
</div>
<div class="dark">
<span class="fg:yellow">M</span>
</div>

View the default variables on GitHub


Basic usage

Add a text color

Add a color to the text variables group.

export default {
variables: {
text: {
primary: '
#000
'
}
}
}

Apply the custom color:

<p class="fg:primary"></p>

See the Color Customization documentation to learn more about color variable behavior.

Apply a text color

Apply the defined text-* variables using the inherited syntaxes color, text-decoration-color, text-decoration, text-fill-color, caret-color.

<html class="light">
<body class="fg:$(text-neutral)">equals</body>
<body class="fg:text-neutral">equals</body>
<body class="fg:neutral"></body>
</html>

Typically, we set the foreground color of elements using fg:color rather than the text-specific text:color.

<p class="text:pink">text-fill-color properity</p>
<p class="fg:pink">color properity</p>

Apply text color to any syntax

Besides inheriting the above rules, you can use text-* to access global text color variables in other syntax.

<svg class="stroke:text-light"></svg>

Escape inherited text colors

Use $(blue) to apply variables.blue instead of variables.text.blue.

<p class="fg:$(blue)"></p>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.