First I create a new SCSS partial named _theme_colors.scss,
then add the color codes as following:
$grays: (
"50": #FAFBFC,
"100": #DFE2E8,
"200": #D0D4DB,
"300": #A7B1BF,
"400": #8591A2,
"500": #6A7686,
"600": #4D5866,
"700": #3A434D,
"800": #272D33,
"900": #14171A
);
then I loop through them with scss @each
function as following:
@each $key, $value in $grays {
.text-gray-#{$key} {
color: $value !important;
}
.bg-gray-#{$key} {
background-color: $value;
}
}
thus I can use them in my html as text-gray-100
up to text-gray-900
for text colors based on design system or bg-gray-100
up to bg-gray-900
for background colors.
Top comments (0)