In Radix - Bootstrap we have in the _variables.sccs the $colors variables
$blue: #001D4A !default; //ok
$indigo: #3D348B !default; //ok
$purple: #662E9B !default; //ok
$pink: #FFCFD2 !default; //ok
$red: #7A0302 !default; //ok
$orange: #FE5D26 !default; //ok
$yellow: #E3B23C !default; //ok
$green: #A8C256 !default; //ok
$teal: #7AE7C7 !default; //ok
$cyan: #1B9AAA !default; //ok
$colors: () !default;
$colors: map-merge(
(
"blue": $blue,
"indigo": $indigo,
"purple": $purple,
"pink": $pink,
"red": $red,
"orange": $orange,
"yellow": $yellow,
"green": $green,
"teal": $teal,
"cyan": $cyan,
"white": $white,
"gray": $gray-600,
"gray-dark": $gray-800
),
$colors
);
Something that i find very handy but is missing is to have the color text css class for all the colors. The below snippet shows how to achieve this.
@each $color_name,$color_value in $colors {
.text-#{$color_name} {
color: $color_value !important;
}
}
After compiling this i can write css classes like this:
<span class="text-green">Hello world</span>
<span class="text-indigo">Hello world</span>
<span class="text-blue">Hello world</span>