Text Color
Utilities for controlling the text color.
Class | Properties | |
---|---|---|
text-transparent | color: 'transparent' | Aa |
text-black | color: '#22292f' | Aa |
text-grey-darkest | color: '#3d4852' | Aa |
text-grey-darker | color: '#606f7b' | Aa |
text-grey-dark | color: '#8795a1' | Aa |
text-grey | color: '#b8c2cc' | Aa |
text-grey-light | color: '#dae1e7' | Aa |
text-grey-lighter | color: '#f1f5f8' | Aa |
text-grey-lightest | color: '#f8fafc' | Aa |
text-white | color: '#ffffff' | Aa |
text-red-darkest | color: '#3b0d0c' | Aa |
text-red-darker | color: '#621b18' | Aa |
text-red-dark | color: '#cc1f1a' | Aa |
text-red | color: '#e3342f' | Aa |
text-red-light | color: '#ef5753' | Aa |
text-red-lighter | color: '#f9acaa' | Aa |
text-red-lightest | color: '#fcebea' | Aa |
text-orange-darkest | color: '#462a16' | Aa |
text-orange-darker | color: '#613b1f' | Aa |
text-orange-dark | color: '#de751f' | Aa |
text-orange | color: '#f6993f' | Aa |
text-orange-light | color: '#faad63' | Aa |
text-orange-lighter | color: '#fcd9b6' | Aa |
text-orange-lightest | color: '#fff5eb' | Aa |
text-yellow-darkest | color: '#453411' | Aa |
text-yellow-darker | color: '#684f1d' | Aa |
text-yellow-dark | color: '#f2d024' | Aa |
text-yellow | color: '#ffed4a' | Aa |
text-yellow-light | color: '#fff382' | Aa |
text-yellow-lighter | color: '#fff9c2' | Aa |
text-yellow-lightest | color: '#fcfbeb' | Aa |
text-green-darkest | color: '#0f2f21' | Aa |
text-green-darker | color: '#1a4731' | Aa |
text-green-dark | color: '#1f9d55' | Aa |
text-green | color: '#38c172' | Aa |
text-green-light | color: '#51d88a' | Aa |
text-green-lighter | color: '#a2f5bf' | Aa |
text-green-lightest | color: '#e3fcec' | Aa |
text-teal-darkest | color: '#0d3331' | Aa |
text-teal-darker | color: '#20504f' | Aa |
text-teal-dark | color: '#38a89d' | Aa |
text-teal | color: '#4dc0b5' | Aa |
text-teal-light | color: '#64d5ca' | Aa |
text-teal-lighter | color: '#a0f0ed' | Aa |
text-teal-lightest | color: '#e8fffe' | Aa |
text-blue-darkest | color: '#12283a' | Aa |
text-blue-darker | color: '#1c3d5a' | Aa |
text-blue-dark | color: '#2779bd' | Aa |
text-blue | color: '#3490dc' | Aa |
text-blue-light | color: '#6cb2eb' | Aa |
text-blue-lighter | color: '#bcdefa' | Aa |
text-blue-lightest | color: '#eff8ff' | Aa |
text-indigo-darkest | color: '#191e38' | Aa |
text-indigo-darker | color: '#2f365f' | Aa |
text-indigo-dark | color: '#5661b3' | Aa |
text-indigo | color: '#6574cd' | Aa |
text-indigo-light | color: '#7886d7' | Aa |
text-indigo-lighter | color: '#b2b7ff' | Aa |
text-indigo-lightest | color: '#e6e8ff' | Aa |
text-purple-darkest | color: '#21183c' | Aa |
text-purple-darker | color: '#382b5f' | Aa |
text-purple-dark | color: '#794acf' | Aa |
text-purple | color: '#9561e2' | Aa |
text-purple-light | color: '#a779e9' | Aa |
text-purple-lighter | color: '#d6bbfc' | Aa |
text-purple-lightest | color: '#f3ebff' | Aa |
text-pink-darkest | color: '#451225' | Aa |
text-pink-darker | color: '#6f213f' | Aa |
text-pink-dark | color: '#eb5286' | Aa |
text-pink | color: '#f66d9b' | Aa |
text-pink-light | color: '#fa7ea8' | Aa |
text-pink-lighter | color: '#ffbbca' | Aa |
text-pink-lightest | color: '#ffebef' | Aa |
Usage
Control the text color of an element using the text-{color}
utilities.
Customizing
Text Colors
By default BinStorm makes the entire default color palette available as text colors.
You can customize your color palette by editing the colors variable in your BinStorm config file, or customize just your text colors using the textColors section of your BinStorm config.
{
// ...
textColors: {
- ...colors,
+ 'primary': '#3490dc',
+ 'secondary': '#ffed4a',
+ 'danger': '#e3342f',
}
}
Disabling
If you don't plan to use the text-{color}
utilities in your project, you can disable them entirely by removing the colors
property in the modules
section of your config file:
{
// ...
modules: {
// ...
- colors: {
- prefix: 'text',
- propertyName: 'color'
- }
}
}