Press/to search

Typography

Text Color

Utilities for sets the text color.


Class

classcss
text-transparentcolor: transparentText
text-whitecolor: #fffText
text-charcoal-100color: #222c35Text
text-charcoal-200color: #1f2831Text
text-charcoal-300color: #1c252cText
text-charcoal-400color: #192127Text
text-charcoal-500color: #161d22Text
text-charcoal-600color: #13181dText
text-charcoal-700color: #101419Text
text-charcoal-800color: #0d1014Text
text-charcoal-900color: #0a0c0fText
text-gray-100color: #f7fafcText
text-gray-200color: #edf2f7Text
text-gray-300color: #e2e8f0Text
text-gray-400color: #cbd5e0Text
text-gray-500color: #a0aec0Text
text-gray-600color: #718096Text
text-gray-700color: #4a5568Text
text-gray-800color: #2d3748Text
text-gray-900color: #1a202cText
text-red-100color: #fff5f5Text
text-red-200color: #fed7d7Text
text-red-300color: #feb2b2Text
text-red-400color: #fc8181Text
text-red-500color: #f56565Text
text-red-600color: #e53e3eText
text-red-700color: #c53030Text
text-red-800color: #9b2c2cText
text-red-900color: #742a2aText
text-orange-100color: #fffaf0Text
text-orange-200color: #feebc8Text
text-orange-300color: #fbd38dText
text-orange-400color: #f6ad55Text
text-orange-500color: #ed8936Text
text-orange-600color: #dd6b20Text
text-orange-700color: #c05621Text
text-orange-800color: #9c4221Text
text-orange-900color: #7b341eText
text-green-100color: #f0fff4Text
text-green-200color: #c6f6d5Text
text-green-300color: #9ae6b4Text
text-green-400color: #68d391Text
text-green-500color: #48bb78Text
text-green-600color: #38a169Text
text-green-700color: #2f855aText
text-green-800color: #276749Text
text-green-900color: #22543dText
text-teal-100color: #e6fffaText
text-teal-200color: #b2f5eaText
text-teal-300color: #81e6d9Text
text-teal-400color: #4fd1c5Text
text-teal-500color: #38b2acText
text-teal-600color: #319795Text
text-teal-700color: #2c7a7bText
text-teal-800color: #285e61Text
text-teal-900color: #234e52Text
text-blue-100color: #ebf8ffText
text-blue-200color: #bee3f8Text
text-blue-300color: #90cdf4Text
text-blue-400color: #63b3edText
text-blue-500color: #4299e1Text
text-blue-600color: #3182ceText
text-blue-700color: #2b6cb0Text
text-blue-800color: #2c5282Text
text-blue-900color: #2a4365Text
text-indigo-100color: #ebf4ffText
text-indigo-200color: #c3dafeText
text-indigo-300color: #a3bffaText
text-indigo-400color: #7f9cf5Text
text-indigo-500color: #667eeaText
text-indigo-600color: #5a67d8Text
text-indigo-700color: #4c51bfText
text-indigo-800color: #434190Text
text-indigo-900color: #3c366bText
text-purple-100color: #faf5ffText
text-purple-200color: #e9d8fdText
text-purple-300color: #d6bcfaText
text-purple-400color: #b794f4Text
text-purple-500color: #9f7aeaText
text-purple-600color: #805ad5Text
text-purple-700color: #6b46c1Text
text-purple-800color: #553c9aText
text-purple-900color: #44337aText
text-pink-100color: #fff5f7Text
text-pink-200color: #fed7e2Text
text-pink-300color: #fbb6ceText
text-pink-400color: #f687b3Text
text-pink-500color: #ed64a6Text
text-pink-600color: #d53f8cText
text-pink-700color: #b83280Text
text-pink-800color: #97266dText
text-pink-900color: #702459Text
text-khaki-100color: #f9f7f4Text
text-khaki-200color: #f0ebe4Text
text-khaki-300color: #e7dfd3Text
text-khaki-400color: #d5c8b2Text
text-khaki-500color: #c3b091Text
text-khaki-600color: #b09e83Text
text-khaki-700color: #756a57Text
text-khaki-800color: #584f41Text
text-khaki-900color: #3b352cText
text-amber-100color: #fff9e6Text
text-amber-200color: #fff0bfText
text-amber-300color: #ffe799Text
text-amber-400color: #ffd54dText
text-amber-500color: #ffc300Text
text-amber-600color: #e6b000Text
text-amber-700color: #997500Text
text-amber-800color: #735800Text
text-amber-900color: #4d3b00Text
text-nero-100color: #e9e9e9Text
text-nero-200color: #c7c8c9Text
text-nero-300color: #a6a7a8Text
text-nero-400color: #636466Text
text-nero-500color: #202225Text
text-nero-600color: #1d1f21Text
text-nero-700color: #131416Text
text-nero-800color: #0e0f11Text
text-nero-900color: #0a0a0bText

Usage

Set basic text color to an element.

<!-- Example -->
<y class="text-amber-500">
...
</y>

Set default text color to <body> tag.

<!-- Example -->
<body class="text-amber-500">
...
</body>

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

<!-- Example -->
<y class="text-charcoal-100 ... (dark)text-gray-200">
...
</y>

Customization

Read more information about using the Plugin API, and Responsive or Pseudo-Class Variants configuration with the Plugin API.

// Add Values
@include yogurt(
$class: 'text-gray',
$property: color,
$modifier: (
100: #252525,
200: #262626
//...
)
);

// Add Variants
@include yogurt(
$class: 'text-gray',
$property: color,
$modifier: (
100: #252525,
200: #262626
//...
),
$variant: (
'responsive',
'dark-mode',
'hover', 'group-hover',
'focus', 'focus-within', 'focus-visible',
'active',
'visited'
//...
)
);

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.